4.7 Hexo 搭建博客教程
=====================

|image0|

--------------

现在越来越多的人喜欢利用Github搭建静态网站，原因不外乎简单省钱。本人也利用hexo+github搭建了本博客，用于分享一些心得。在此过程中，折腾博客的各种配置以及功能占具了我一部分时间，在此详细记录下我是如何利用hexo+github搭建静态博客以及一些配置相关问题，以免过后遗忘，且当备份之用。

一、创建博客项目
----------------

1.1 准备工作
~~~~~~~~~~~~

-  下载\ `node.js <http://nodejs.cn/download/>`__\ 并安装（官网下载安装），默认会安装npm。
-  下载安装git（官网下载安装）
-  下载安装hexo。方法：打开终端
   运行\ ``npm install -g hexo``\ （要翻墙）

|image1|

1.2 初始化项目
~~~~~~~~~~~~~~

-  新创建一个目录，比如叫做 ``iswbm-blog``
-  使用终端进入该文件夹内，执行\ ``hexo init`` （初始化项目）

|image2|

-  运行你的博客项目（用于调试），查看生成的文章是否符合自己的预期。

.. code:: shell

   $ hexo g  # 生成静态文件
   $ hexo s  # 运行本地web服务器

运行完 ``hexo s``
会有一个本地web地址（\ ``localhost:4000``\ ）出现在你的屏幕，打开它即可看到。

1.3 部署上线
~~~~~~~~~~~~

要让我们在 ``localhost:4000``
看到的那些内容能够在公网能够访问。我们需要将其部署上线。

按照下面的步骤来

-  在Github上创建名字为XXX.github.io的项目，XXX为自己的github用户名。然后
   clone 到你的本地电脑上。

   |image3|

-  打开该文件夹内的\ ``_config.yml``\ 配置文件，将其中的type设置为git，其他配置如下

.. code:: yml

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type: git
     repository: https://github.com/iswbm/iswbm.github.io.git
     branch: master

-  安装Git部署插件

.. code:: shell

   $ npm install hexo-deployer-git --save

-  重新生成静态文件，部署上线。

.. code:: shell

   $ hexo clean 
   $ hexo g 
   $ hexo d

在第一次部署后，请到 github 后台，补充你的 网站信息，否则无法访问。

|image4|

一切完成之后，你就可以通过上面的网址来访问我的博客了。

1.4 绑定域名
~~~~~~~~~~~~

做为一个个人博客，使用 github的域名，明显不够个性化。

我们可以自己去阿里云购买一个域名（我的是 iswbm.com），然后将其 CNAME
到你的博客地址上。

-  去阿里云 域名云解析 |image5|

-  然后到对应的GitHub仓库，绑定我的个性域名 |image6|

-  然后再在你本地的项目里的 ``source`` 目录下新建
   ``CNAME``\ 文件，内容就是我的域名

   ::

      iswbm.com

-  然后重新部署，使配置生效。这样就可以使用域名访问。

   .. code:: shell

      $ hexo clean 
      $ hexo g 
      $ hexo d

二、丰富博客页面
----------------

--------------

2.1 标签页
~~~~~~~~~~

具体请参考下官方教程：\ `创建标签云页面 <https://github.com/iissnan/hexo-theme-next/wiki/创建标签云页面>`__

2.2 分类页面
~~~~~~~~~~~~

具体请参考下官方教程：\ `创建分类页面 <https://github.com/iissnan/hexo-theme-next/wiki/创建分类页面>`__

2.3 关于页面
~~~~~~~~~~~~

具体请参考下官方教程：\ `创建关于页面 <https://github.com/iissnan/hexo-theme-next/wiki/创建-%22关于我%22-页面>`__

三、博文书写技巧
----------------

--------------

3.1 引用块
~~~~~~~~~~

更多设置，查看\ `官方文档 <https://hexo.io/zh-cn/docs/tag-plugins.html>`__

::

   {% blockquote David Levithan, Wide Awake %}
   Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
   {% endblockquote %}

效果如下 |image7|

3.2 一键生成md头格式
~~~~~~~~~~~~~~~~~~~~

首先在\ ``/scaffolds/post.md``\ 文件中添加：

::

   ---
   title: {{ title }}
   date: {{ date }}
   tags:
   categories: 
   copyright: true
   permalink: 01
   top: 0
   password:
   ---

然后使用
``hexo new``\ 就可以一键生成新文章的头格式了，不用手动去搬运或者书写。相当方便。

.. figure:: http://image.iswbm.com/image-20200321201555321.png
   :alt: image-20200321201555321

   image-20200321201555321

四、美化博客
------------

--------------

4.1 更换主题
~~~~~~~~~~~~

在 hexo 部署目录下，使用如下命令下载主题

::

   git clone https://github.com/iissnan/hexo-theme-next themes/next

打开站点配置文件（部署代码根目录下的
``_config.yml``\ ）选择刚刚下载的next主题

::

   # Extensions
   ## Plugins: https://hexo.io/plugins/
   ## Themes: https://hexo.io/themes/
   theme: next

然后再编辑 ``themes/next/_config.yml`` 选择主题样式

::

   scheme: Pisces

4.2 ico缩略图
~~~~~~~~~~~~~

::

   1. 制作icon图标，最好是32x32，可以在这里制作：https://tool.lu/favicon/

   2. 将制作的ico文件，放到next主题source/images目录下

   3. 配置ico文件路径。配置文件在 themes/next/_config.yml
   favicon:
     small: /images/favicon-16x16-next.ico
     medium: /images/favicon-32x32-next.ico

4.3 菜单栏和图标
~~~~~~~~~~~~~~~~

::

   menu:
     home: / || home
     about: /about/ || user
     tags: /tags/ || tags
     categories: /categories/ || th
     archives: /archives/ || archive
     schedule: /schedule/ || calendar
     # sitemap: /sitemap.xml || sitemap
     # commonweal: /404/ || heartbeat

   # Enable/Disable menu icons.
   menu_icons:
     enable: true

4.4 社交网络和图标
~~~~~~~~~~~~~~~~~~

::

   social:
     GitHub: https://github.com/iswbm || github
     E-Mail: mailto:wongbingming@163.com || envelope-o
     微博: http://weibo.com/942663728 || weibo
     WeChat: http://image.iswbm.com/17-9-9/58657236.jpg || weixin
     知乎: https://www.zhihu.com/people/wongbingming/activities || chain-broken
     CnBlog: http://www.cnblogs.com/wongbingming/ || file-text-o
     
   social_icons:
     enable: true
     icons_only: false
     transition: false

4.5 背景动画
~~~~~~~~~~~~

在\ ``next``\ 下的\ ``_config.yml``\ 找到\ ``canvas_nest``\ 设置为\ ``True``

4.6 添加热度
~~~~~~~~~~~~

next主题集成leanCloud，我只需稍微配置下(在主题配置文件)
其中的id和key要去\ ``LeanCloud``\ 注册登录然后创建应用后，新建Class，名字一定要是\ ``Counter``\ ，然后查看id和key填入

::

   post_meta:
     item_text: true

   leancloud_visitors:
     enable: true
     app_id: 你的id
     app_key: 你的key

打开\ ``themes/next/layout/_macro/post.swig``
在\ ``”leancloud-visitors-count”>``\ 标签后面添加℃。
然后打开，\ ``themes/next/languages/zh-Hans.yml``\ ，将visitors内容改为热度即可。

为什么不直接用不蒜子，因为首页的时候，无法显示。
如果也开了不蒜子的计数功能的话，可以直接把下面代码删掉

::

   {% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.page_pv %}
               <span class="post-meta-divider">|</span>
               <span class="page-pv">{{ theme.busuanzi_count.page_pv_header }}
               <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>{{ theme.busuanzi_count.page_pv_footer }}
               </span>
   {% endif %}

如果你在前端看到了这个错误

::

   Code 504: The app is archived, please restore in console before use.

很好解决，前往 `LeanCloud <https://leancloud.cn/>`__ 重新激活应用即可。

如果在前端又出现了这个错误

::

   Code 403: 访问被api域名白名单拒绝，请检查你的安全域名设置.

也很好解决，前往 `LeanCloud <https://leancloud.cn/>`__
绑定你的域名即可。不过要注意的是这个域名，你得备案，否则会绑定失败

4.7 分享插件JiaThis
~~~~~~~~~~~~~~~~~~~

默认有好多分享平台，可以在jiathis.swig里删除不需要的

::

   jiathis:
     uid: 2135144 #Get this uid from http://www.jiathis.com/
   # add_this_id:

隐藏页脚的hexo强力驱动，在\ ``footer.swig``\ 里注释这段代码

::

   <!--
   {% if theme.copyright %}
     <div class="powered-by">{#
     #}{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}{#
   #}</div>

     <span class="post-meta-divider">|</span>
     <div class="theme-info">{#
     #}{{ __('footer.theme') }} &mdash; {#
     #}<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">{#
       #}NexT.{{ theme.scheme }}{#
     #}</a> v{{ theme.version }}{#
   #}</div>
   {% endif %}
   -->

4.8 Fork me on Github
~~~~~~~~~~~~~~~~~~~~~

点击\ `这里 <https://github.com/blog/273-github-ribbons>`__\ 挑选自己喜欢的样式，并复制代码
然后粘贴刚才复制的代码到\ ``themes/next/layout/_layout.swig``\ 文件中(放在\ ``<div class="headband"></div>``\ 的下面)，并把\ ``href``\ 改为你的\ ``github``\ 地址

4.9 设置阅读全文
~~~~~~~~~~~~~~~~

在md博文里添加

::

   以上首页显示
   <!--more-->
   以下首页不显示

4.10 添加版权
~~~~~~~~~~~~~

修改\ ``themes/next/layout/_macro/post-copyright.swig``\ 如下

::

   <ul class="post-copyright">
     <li class="my_post-copyright-author">
       <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
       {{ config.author }}
     </li>
     <li class="my_post-copyright-link">
       <strong>本文链接：</strong>
       <a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.permalink }}</a>
     </li>
     <li class="my_post-copyright-link">
       <strong>发布时间：</strong>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
     </li>
     <li class="my_post-copyright-link">
       <strong>最后更新：</strong>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
     </li>

     <li class="my_post-copyright-license">
       <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
       {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
     </li>
   </ul>

到主题配置文件，改\ ``enable``\ 为\ ``True``

::

   post_copyright:
     enable: true
     license: CC BY-NC-SA 3.0
     license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

4.11 文章结尾页眉
~~~~~~~~~~~~~~~~~

在路径\ ``themes/next/layout/_macro``\ 中新建 ``passage-end-tag.swig``
文件,并添加以下内容：

::

   <div>
       {% if not is_index %}
           <div style="text-align:center;color: #ccc;font-size:14px;">-------------Page's over<i class="fa fa-paw"></i>Thanks for reading-------------</div>
       {% endif %}
   </div>

接着打开\ ``themes/next/layout/_macro/post.swig``\ 文件，添加如下下代码，注意位置
|image8| 代码如下：

::

   <div>
     {% if not is_index %}
       {% include 'passage-end-tag.swig' %}
     {% endif %}
   </div>

然后再主题文件增加如下配置，以便可以方便开关这个功能

::

   # 文章末尾添加“本文结束”标记
   passage_end_tag:
     enabled: true

4.12 更改标签的图标
~~~~~~~~~~~~~~~~~~~

修改模板\ ``/themes/next/layout/_macro/post.swig``\ ，搜索
``rel=”tag”>#``\ ，将 # 换成

::

   <i class="fa fa-tag"></i>

4.13 添加访问量和访客数
~~~~~~~~~~~~~~~~~~~~~~~

``\themes\next\layout_partials\footer.swig``\ 最前面添加如下代码

::

   <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

4.14 更改容器宽度
~~~~~~~~~~~~~~~~~

更改NexT容器宽度可以参考这个\ `常见问题 <http://theme-next.iissnan.com/faqs.html>`__
Pisces Scheme比较特殊。
在\ ``themes/next/source/css/_schemes/Pisces/_layout.styl``\ 最后面增加如下样式

::

   .header{
       width: 80%;
       +tablet() {
           width: 100%;
       }
       +mobile() {
           width: 100%;
       }
   }
   .container .main-inner {
       width: 80%;
       +tablet() {
           width: 100%;
       }
       +mobile() {
           width: 100%;
       }
   }
   .content-wrap {
       width: calc(100% - 260px);
       +tablet() {
           width: 100%;
       }
       +mobile() {
           width: 100%;
       }
   }

4.15 自定义CSS
~~~~~~~~~~~~~~

默认的博客文章，是按照你选定的主题来显示。其中可能有些并不那么尽如你意。

但是没有关系，你可以自己定义自己满意的css样式，以下是我自己定义的。在这里做个记录。

::

   # 设置图片不居中
   themes/next/source/css/_common/components/post/post-expand.styl

   .post-gallery-row .fancybox img { margin: 0 auto !important;}


   # 标题格式
   themes/next/source/css/_common/scaffolding/base.styl

   h1 {
       font-size: 27px;
       position: relative;
       padding: 15px;
       margin-bottom: 20px;
       border: 1px solid #eee;
       border-radius: 3px;
       border-left-color: red;
       border-left-width: 5px;
       background-color: #406CA4;
       color: #ffffff;
       font-family: cursive;
       border-radius: 15px 15px 15px 15px !important;
   }

4.16 添加头像
~~~~~~~~~~~~~

将你的头像放置到 ``themes/next/source/images/avatar.png``

在 ``themes/next/_config.yml`` 设置路径

.. code:: yaml

   avatar: /images/avatar.png

4.17 设置中文
~~~~~~~~~~~~~

在根目录的 ``_config.yml`` 里 把 ``language`` 改成
``zh-Hans``\ ，这个值是要和 ``themes/next/languages``
目录下的文件名保持一致。

4.18 不渲染 README
------------------

在根目录创建 README.md 文件，内容由你决定。

然后在 ``_config.yml`` 修改配置

.. code:: yaml

   skip_render: README.md

4.18 页面出现 %20 问题
~~~~~~~~~~~~~~~~~~~~~~

Next 主题的配置文件有一个原生
bug，就是菜单项后面会多一个空格，这会导致你在页面访问
about，tags等页面时，会报 404，原因是地址后面多了个空格。

|image9|

五、其他实用功能
----------------

5.1 给文章加密
~~~~~~~~~~~~~~

打开themes->next->layout->_partials->head.swig文件,搜索\ ``pace``\ ，在这个代码块后面插入这样一段代码：

::

   <script>
       (function(){
           if('{{ page.password }}'){
               if (prompt('请输入文章密码') !== '{{ page.password }}'){
                   alert('密码错误！');
                   history.back();
               }
           }
       })();
   </script>

然后文章中设置

::

   password: 你的密码

5.2 博文压缩
~~~~~~~~~~~~

在站点的根目录下执行以下命令：

::

   $ npm install gulp -g
   $ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在根目录下新建\ ``gulpfile.js``

::

   var gulp = require('gulp');
   var minifycss = require('gulp-minify-css');
   var uglify = require('gulp-uglify');
   var htmlmin = require('gulp-htmlmin');
   var htmlclean = require('gulp-htmlclean');
   // 压缩 public 目录 css
   gulp.task('minify-css', function() {
       return gulp.src('./public/**/*.css')
           .pipe(minifycss())
           .pipe(gulp.dest('./public'));
   });
   // 压缩 public 目录 html
   gulp.task('minify-html', function() {
     return gulp.src('./public/**/*.html')
       .pipe(htmlclean())
       .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
       }))
       .pipe(gulp.dest('./public'))
   });
   // 压缩 public/js 目录 js
   gulp.task('minify-js', function() {
       return gulp.src('./public/**/*.js')
           .pipe(uglify())
           .pipe(gulp.dest('./public'));
   });
   // 执行 gulp 命令时执行的任务
   gulp.task('default', [
       'minify-html','minify-css','minify-js'
   ]);

生成博文是执行\ ``hexo g && gulp``\ 就会根据\ ``gulpfile.js``\ 中的配置，对\ ``public``\ 目录中的静态资源文件进行压缩。

5.3 设定置顶/顺序
~~~~~~~~~~~~~~~~~

``F:\MyBlog\node_modules\hexo-generator-index\lib\generator.js``\ 改成下面

::

   'use strict';
   var pagination = require('hexo-pagination');
   module.exports = function(locals){
     var config = this.config;
     var posts = locals.posts;
       posts.data = posts.data.sort(function(a, b) {
           if(a.top && b.top) { // 两篇文章top都有定义
               if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
               else return b.top - a.top; // 否则按照top值降序排
           }
           else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
               return -1;
           }
           else if(!a.top && b.top) {
               return 1;
           }
           else return b.date - a.date; // 都没定义按照文章日期降序排
       });
     var paginationDir = config.pagination_dir || 'page';
     return pagination('', posts, {
       perPage: config.index_generator.per_page,
       layout: ['index', 'archive'],
       format: paginationDir + '/%d/',
       data: {
         __index: true
       }
     });
   };

在文章中添加 top 值，数值越大文章越靠前（默认是0，按时间排序），如

::

   ---
   title: 解决Charles乱码问题
   date: 2017-05-22 22:45:48
   tags: 技巧
   categories: 技巧
   copyright: true
   top: 100
   ---

5.5 搜索功能
~~~~~~~~~~~~

参照\ `这篇博客 <https://superbsco.github.io/2017/01/13/new-article/>`__\ ，搜索\ ``搜索功能``

5.7 文章内链接文本样式
~~~~~~~~~~~~~~~~~~~~~~

在\ ``F:\MyBlog\themes\next\source\css\_common\components\post\post.styl``

::

   // 文章内链接文本样式
   .post-body p a{
     color: #0593d3;
     border-bottom: none;
     border-bottom: 1px solid #0593d3;
     &:hover {
       color: #fc6423;
       border-bottom: none;
       border-bottom: 1px solid #fc6423;
     }
   }

其中选择.post-body 是为了不影响标题，选择 p
是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

5.8 归档设置分页数量
~~~~~~~~~~~~~~~~~~~~

在根目录的 ``_config.yml``

::

   index_generator:
     per_page: 5

   archive_generator:
     per_page: 20
     yearly: true
     monthly: true

   tag_generator:
     per_page: 10

5.9 设置永久链接
~~~~~~~~~~~~~~~~

在根目录的 ``_config.yml``

::

   permalink: :year/:i_month/:i_day/:title.html

博文里设置一下，举个例子

::

   permalink: Database-MySQL-Basic_usage

六、多台电脑协同更新博客
------------------------

--------------

上班后，工作都会给配置了一台电脑，而自己家里也有电脑，有时候我想使用家里电脑更新博客，而有时候我也想使用公司电脑更新博客。

这就很蛋疼了，因为Markdown的原文只有一份，如何将两台电脑的原文保持一致呢。当然，容易想到的是代管在Github上。

6.1 Github上操作
~~~~~~~~~~~~~~~~

将博客项目分成两个分支 \* ``master``\ 为博客界面前端文件 \* ``hexo``
为博文markdown原文

在web界面新建分支，命名为\ ``hexo``

在web界面设置 ``hexo`` 为默认分支，因为我们只会在这个分支上进行操作。
|image10|

6.2 本地PC操作
~~~~~~~~~~~~~~

clone项目到本地：

::

   git clone git@github.com:iswbm/iswbm.github.io.git

使用 ``git branch``
确认此时的分支是否为hexo，如果不是则上面设置默认分支有误，要重新设置。

6.3 处理hexo分支
~~~~~~~~~~~~~~~~

第一步我们创建hexo分支时，hexo的内容和master的内容是完全一致的，存放的是博客前端文件，这并不是我们想要的，所以我们要先将其清空，再放入我们的文件。

清空hexo分支

::

   git checkout --orphan hexo
   git rm -rf .
   git commit -m "clear hexo branch"
   git push origin hexo

将博客原始文件添加进来，但是有一些是没必要放的，具体要放哪些文件，看图片。
|image11|

::

   git add -A
   git commit -m "add blog markdown raw files"

添加node_modules/文件夹 本来这个文件夹，不需要拷过来的，但是怕安装
``hexo-deployer-git`` 失败，所以之前要拷贝的。

可以从下面这个链接里获取：

   下载链接；\ https://pan.baidu.com/s/1-DHgTuxb0mCj_7wdaKqAwQ
   获取密码：pckc

然后检查是否正常渲染

::

   hexo g
   hexo s

如果一切正常，那么再确认下 ``_config.yml``
文件的deploy参数的分支是master，我们可不能将其发布到 hexo 分支。

确认过后，我们就可以发布博客了。

::

   hexo d

如果发布出现问题，可能是 ``hexo-deployer-git``
这个插件安装有误，就要想办法装上了。这里就不讲了。

七、更换电脑后如何迁移博客
--------------------------

--------------

在真实场景里，我们会有可能会换电脑或者将系统进行重装操作，而这个时候如何将之前的电脑上项目（主要是
Markdown原文）迁移过来呢？

在\ ``七、多台电脑协同更新博客``
这一节里，我们已经讲过，如何将md原文进行管理。

那就好办了呀。只要将之前的项目 clone 下来就可以了呀。

首先肯定是要在新电脑上安装\ ``Git``\ ，\ ``Node.Js``\ ，\ ``Hexo``

7.1 工具安装
~~~~~~~~~~~~

``安装Git``\ ：百度自行下载

``安装npm``\ ：到 `官网 <https://nodejs.org/en/>`__ 下载exe文件安装

``安装hexo``\ ：执行以下命令安装（注意需要新开一个git
bash窗口，不然会提示找不到npm命令）

::

   npm install -g hexo

7.2 clone最新分支
~~~~~~~~~~~~~~~~~

::

   git clone git@github.com:iswbm/iswbm.github.io.git

添加node_modules/文件夹 本来这个文件夹，不需要拷过来的，但是怕安装
``hexo-deployer-git`` 失败，所以这里我直接备份一份，可以拷贝覆盖上即可。

   下载链接；\ https://pan.baidu.com/s/1-DHgTuxb0mCj_7wdaKqAwQ
   获取密码：pckc

完成之后，应该就可以正常更新博客了。

在写完文章后，一定要注意操作顺序。

1. 先将hexo分支push要远端

2. 再执行部署到master分支。

不然哪天这个电脑又出现故障，那就麻烦了。

附录：参考文档
--------------

--------------

-  `Hexo 官方使用文档 - 中文 <https://hexo.io/zh-cn/docs/index.html>`__
-  `Hexo Next 主题 官方使用文档 -
   中文 <http://theme-next.iissnan.com/getting-started.html>`__
-  `Hexo的next主题个性化教程：打造炫酷网站 <https://www.jianshu.com/p/f054333ac9e6>`__
-  `使用hexo：如果换了电脑怎么更新博客？ <https://www.zhihu.com/question/21193762>`__
-  `GitHub+Hexo
   搭建个人网站详细教程 <https://zhuanlan.zhihu.com/p/26625249>`__
-  `Gitalk：基于 Github Issue 和 Preact
   开发的评论插件 <https://github.com/gitalk/gitalk/blob/master/readme-cn.md>`__
-  `Hexo搭建博客教程 <https://thief.one/2017/03/03/Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/>`__

--------------

|image12|

.. |image0| image:: http://image.iswbm.com/20200602135014.png
.. |image1| image:: http://image.iswbm.com/image-20200321163152876.png
.. |image2| image:: http://image.iswbm.com/image-20200321163746032.png
.. |image3| image:: http://image.iswbm.com/image-20200321165634287.png
.. |image4| image:: http://image.iswbm.com/image-20200321171008622.png
.. |image5| image:: http://image.iswbm.com/image-20200321171939919.png
.. |image6| image:: http://image.iswbm.com/image-20200321171821683.png
.. |image7| image:: http://image.iswbm.com/17-9-10/85269241.jpg
.. |image8| image:: http://image.iswbm.com/17-9-9/63041495.jpg
.. |image9| image:: /Users/MING/Library/Application%20Support/typora-user-images/image-20200321210014963.png
.. |image10| image:: http://image.iswbm.com/image-20200321193444320.png
.. |image11| image:: https://i.loli.net/2018/04/15/5ad31888232e9.png
.. |image12| image:: http://image.iswbm.com/20200607174235.png