小技巧-手把手教你搭建漂亮好看的个人网站

　　打开Git Bash here，输入：

　　进入创建的博客项目下进行安装

　　安装之后，整个博客项目目录如下：

　　2.3.2、访问URL

　　访问URL：http://localhost:4000，效果如下图：

　　到这里已经通过Hexo初步创建博客了，下面再来了解一下如何将我们的博客托管到GitHub服务器上。

　　2.4、托管到GitHub

　　2.4.1、GitHub创建repositories

　　进入GitHub官网中浏览器输入 https://github.com/ ,如果还没有账号就创建一个账号就好了。

　　登录自己的账号。直接new repositories 或者进入You repositories 再new repositories。

　　进入到创建 repositories 页面后,一定要注意，将新建的repository的名字为: Your account name.github.io。其他默认就好了。

　　2.4.2、配置

　　GitHub的Repository创建好后，再回到本地的Hexo的githubBlog项目中，找到在项目的根目录下_config.yml找到 deploy标签

　　在该文件下面添加如下内容：

　　注：repository: https://github.com/whb1990/whb1990.github.io 是自己刚刚创建Your account name.github.io 的repository，在Clone with HTTPS里面，复制粘贴就好了，冒号后面记得空格。branch 后面是master就好了。

　　在 _config.yml 找到 url 进行修改为：

　　2.4.3、部署

　　到这里就差不多了，接下来需要执行一些命令，将博客部署到GitHub上去。

　　打开Git Bash Here进入githubBlog 根目录下，首先需要安装一下 hexo-deployer-git(https://github.com/hexojs/hexo-deployer-git) 不然可能出现错误无法部署成功。

　　然后再执行以下命令:

　　或者简写

　　部署成功如下显示:

　　2.4.4、测试

　　我们进行访问 https://whb1990.github.io/ 和 http://localhost:4000/ 一样的页面说明是已经成功。

　　三、站点文件配置

　　在根githubBlog目录下 _config.yml文件，我们暂且称为站点配置文件，以便与后面讲到的主题配置文件(Next主题下的 _config.yml 文件)进行区分。

　　3.1、网站

　　参数

　　描述

　　title

　　网站标题

　　subtitle

　　网站副标题

　　description

　　网站描述

　　author

　　您的名字

　　language

　　网站使用的语言

　　timezone

　　网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

　　3.2、目录

　　参数

　　描述

　　source_dir

　　资源文件夹，这个文件夹用来存放内容。

　　public_dir

　　公共文件夹，这个文件夹用于存放生成的站点文件。

　　tag_dir

　　标签文件夹

　　archive_dir

　　归档文件夹

　　category_dir

　　分类文件夹

　　code_dir

　　Include code 文件夹

　　i18n_dir

　　国际化（i18n）文件夹

　　skip_render

　　跳过指定文件的渲染，您可使用 glob 来配置路径

　　3.3、文章

　　参数

　　描述

　　默认值

　　new_post_name

　　新文章的文件名称

　　:title.md

　　default_layout

　　预设布局

　　post

　　auto_spacing

　　在中文和英文之间加入空格

　　false

　　titlecase

　　把标题转换为 title case

　　false

　　external_link

　　在新标签中打开链接

　　true

　　filename_case

　　把文件名称转换为 (1) 小写或 (2) 大写

　　0

　　render_drafts

　　显示草稿

　　false

　　post_asset_folder

　　启动 Asset 文件夹

　　false

　　relative_link

　　把链接改为与根目录的相对位址

　　false

　　future

　　显示未来的文章

　　true

　　highlight

　　代码块的设置

　　3.4、分类&标签

　　参数

　　描述

　　默认值

　　default_category

　　默认分类

　　uncategorized

　　category_map

　　分类别名

　　tag_map

　　标签别名

　　3.5、分页

　　参数

　　描述

　　默认值

　　per_page

　　每页显示的文章量 (0 = 关闭分页功能)

　　10

　　pagination_dir

　　分页目录

　　page

　　四、写作

　　4.1、创建文章

　　如：创建hello-world

　　如果不添加title，默认就是标题title: hello-world。

　　这里注意一下，如果创建带有中文的路径名称时，生成静态页面hexo g可能会报错。

　　这是由于 路径中存在 / 的符号转义问题 ，如：创建文章时命名为中文，一般都出现这个小问题。

　　解决方法，在命令行中输入:

　　然后重新生成文件部署就好了。

　　4.2、编辑文章

　　创建的文章在source/_posts目录下，打开文件进行编辑，完全支持Markdown语法。

　　五、Next主题

　　在 Hexo主题官网(https://hexo.io/themes/) 中有许多主题，大家喜欢什么就进行部署和编辑就好了，大致的思路都是差不多的。

　　我选择的 Next主题(https://github.com/theme-next/hexo-theme-next) ，网上很多也是用的这个主题。

　　5.1、安装

　　在githubBlog根目录下，执行以下命令：

　　上面的命令是clone最新版本的主题，也可以使用下面的命令clone指定版本的主题

　　安装完成之后，在themes下就会有next目录

　　5.2、切换主题

　　在项目根目录下打开 _config.yml 文件将 theme 设置为 next 即可：

　　部署之后查看效果如下，有点丑：

　　5.3、主题配置

　　一般配置都在 theme/next/-config.yml文件下配置。

　　5.3.1、修改整体布局

　　在 theme/next/-config.yml 找到 menu 看看自己博客所需的分类

　　在menu_settings如果设置icon: false则无图标，badges: true则标签都会显示数字

　　注：这里需要创建about页面，很简单，同创建标签tags、归档archives页面一样的方式，所需要创建的名称要与menu相对应，举例说明如下。

　　创建完成之后在自己项目查找，如我的是githubBlog/source/目录下查看新创建好的相关标签页面，里面包含各自的index.md文件，大家可以自行编辑了。

　　5.3.2、Schemes方案设置

　　自己喜欢什么风格自行选择。

　　5.3.3、social设置

　　使用方式: Key: permalink || icon Key表示标签显示，permalink表示URI连接，icon表示图标，自己添加所要显示的

　　注：图标库来源https://fontawesome.com/icons?from=io，在scheme: Pisces该效果不显示。

　　5.3.4、avatar头像设置

　　5.3.5、toc边栏中的目录设置

　　5.3.6、Creative Commons 4.0国际许可设置

　　5.3.7、sidebar侧边栏配置这里选择默认吧

　　5.3.8、save_scroll配置

　　5.3.9、excerpt_description

　　5.3.10、auto_excerpt配置

　　5.3.11、codeblock代码块配置

　　5.3.12、wechat_subscriber微信配置

　　5.3.13、footer 底部设置

　　5.3.14、favicon标签页图标

　　5.3.15、Math Equations Render Support 数学方程式渲染支持

　　5.3.16、Han Support 支持汉字

　　设置汉字支持，按照以下步骤：

　　1. 打开Git Bash Here，进入theme/next目录下

　　2. 获取该汉字支持Git module，执行命令以下命令获得

　　3. 设置汉字支持

　　4. 更新update

　　5.3.17、font字体设置

　　六、添加图标链接到GitHub

　　一般在右上角或者左上角，如配置右上角Fork_me_on_GitHub，按以下步骤进行

　　1. 打开 Fork_me_on_GitHub(https://github.blog/2008-12-19-github-ribbons/) 链接，里面有许多样式，选择自己喜欢的样式，将其复制下来。

　　配置右上角的Fork_me_on_GitHub:

　　七、修改文章底部标签

　　原先#号的样式

　　修改为图标的样式

　　八、设置背景动画样式

　　NexT里面有几种动画背景样式canvas_nest、three_waves、canvas_lines、canvas_sphere等

　　8.1、canvas_nest如下图所示:

　　按照以下步骤完成：

　　1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下

　　2. 下载安装 canvas_nest module`执行

　　在 /themes/next/source/lib查看会看到canvas_nest文件夹

　　3. 在/themes/next/_config.yml设置

　　8.2、 three_waves如图所示

　　three_waves(https://github.com/theme-next/theme-next-three) 设置步骤，和 canvas_nest(https://github.com/theme-next/theme-next-canvas-nest) 步骤是一样的。

　　下载完成后，在/themes/next/_config.yml设置

　　8.3、canvas_ribbon

　　canvas_ribbon只适合 scheme、Pisces这里不测试了，大家可以进入 canvas_ribbon(https://github.com/theme-next/theme-next-canvas-ribbon) 安装。

　　九、在网站底部添加访问量

　　1. 进入 \themes\next\layout\_partials\footer.swig 文件顶部第一行添加

　　2. 搜索

　　在这个位置上添加以下代码:

　　注：这里的id值可以选择两种

　　十、给每篇文章添加类别和标签

　　在创建的文章都在source/_post目录下找到，每篇文章添加tags、categories。

　　十一、添加进度条

　　添加进度条的话在手机浏览的时候一般情况都有自带的进度条了，例如微信浏览、浏览器浏览等等，这样就出现重复的进度条了，这里看个人是否添加。但是在电脑浏览器浏览却是不错的。

　　按照以下步骤进行或者进入这里 Progress配置(https://github.com/theme-next/theme-next-pace) 查看如何配置

　　1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下

　　2. 下载安装 Progress module 执行

　　在 /themes/next/source/lib查看会看到pace文件夹

　　3. 在/themes/next/_config.yml设置

　　十二、添加站内搜索

　　由于可能需要快速查找相关文章，那么就需要添加站内搜索。

　　按以下步骤进行或者进入 NexT配置站内搜索(https://github.com/theme-next/hexo-generator-searchdb) 文档查看如何配置

　　1. 安装站内搜索插件

　　2. 在根目录下的 _config.yml添加

　　3. 在themes/next/_config.yml文件中搜索local_search，进行设置

　　十三、添加打赏

　　NexT主要提供三种打赏方式分别是微信、支付宝、比特币

　　在themes/next搜索Reward：

　　十四、友情链接

　　十五、添加阅读统计

　　给每篇文章进行添加阅读统计，效果如下图:

　　1. 进入 leancloud(https://leancloud.cn/)

　　2. 创建应用

　　3. 进入设置页面获取应用Key

　　将App ID、App Key 配置到next/_config.yml中leancloud_visitors

　　4. 在leancloud存储的位置创建Class，必须命名为Counter

　　5. 查看后台统计数据

　　十六、添加评论

　　我的博客选择的是Valine。

　　在next/_config.yml搜索Valine，进入 Valine(https://leancloud.cn/) 官网，也是 leancloud(https://leancloud.cn/) 官网，进入leancloud 控制台,没有账号密码就进行设置。

　　1. 创建应用

　　参考上面 添加阅读统计 的创建应用。

　　2. 进入设置页面获取应用key

　　参考上面 添加阅读统计 的进入设置页面获取应用key。

　　3. 在next/_config.yml进行配置。

　　4. 显示结果

　　这样就完成了valine评论的配置了，接下来就可以进行评论了，我们还可以在后台查看评论信息。

　　5. 在后台查看评论数据

　　在valine后台，存储位置中的数据里面创建Class，名称必须为命名为Comment。

　　参考上面 添加阅读统计 的创建Class。

　　注：选择valine评论系统是因为支持国内网络，不需要连接外网（翻墙）就可以进行显示评论系统，而且很好管理，页面简单。

　　十七、添加RSS

　　效果如下图：

　　实现步骤如下：

　　1. 切换到你的blog根目录下，然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)

　　2. 然后在根目录的站点配置文件 _config.yml下进行配置

　　3. 然后打开next主题文件夹里面的_config.yml，在里面配置为如下：

　　十八、点击出现桃心效果

　　效果如下图：

　　实现步骤如下：

　　1. 打开浏览器，输入：http://7u2ss1.com1.z0.glb.clouddn.com/love.js

　　2. 然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。

　　3. 将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

　　十九、修改文章内链接文本样式

　　效果如下图：

　　实现步骤如下：

　　修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

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

　　二十、在每篇文章末尾统一添加“本文结束”标记

　　效果如下图：

　　实现步骤如下：

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

　　接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer`之前添加如下画红色部分代码（post-footer之前两个DIV）：

　　然后打开主题配置文件_config.yml，在末尾添加：

　　二十一、修改``代码块自定义样式

　　效果如下：

　　实现步骤如下：

　　打开\themes\next\source\css\_custom\custom.styl，向里面加入：(颜色可以自己定义)

　　二十二、主页文章添加阴影效果

　　效果如下图：

　　实现步骤如下：

　　打开\themes\next\source\css\_custom\custom.styl，向里面加入：

　　二十三、添加热度

　　效果如下图：

　　实现步骤如下：

　　next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig ，在画红线的区域添加 ℃：

　　然后打开，/themes/next/languages/zh-Hans.yml，将画红框的改为热度就可以了:

　　二十四、网站底部字数统计

　　效果如下图：

　　实现步骤如下：

　　切换到根目录下，然后运行如下代码

　　然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

　　二十五、添加 README.md 文件

　　每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。

　　在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为

　　保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

　　二十六、实现统计功能

　　效果如下图：

　　实现步骤如下：

　　在根目录下安装 hexo-wordcount，运行：

　　然后在主题的配置文件中，配置如下：

　　二十七、添加顶部加载条

　　效果如下图：

　　实现步骤如下：

　　打开/themes/next/layout/_partials/head.swig文件，添加红框上的代码

　　但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

　　二十八、在文章底部增加版权信息

　　效果如下图：

　　实现步骤如下：

　　在目录 next/layout/_macro/下添加 my-copyright.swig：

　　在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

　　修改next/layout/_macro/post.swig，在代码

　　之前添加增加如下代码：

　　如下图：

　　修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

　　保存重新生成即可。如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

　　如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

　　这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:true加到里面去。

　　二十九、隐藏网页底部powered By Hexo / 强力驱动

　　打开themes/next/layout/_partials/footer.swig，隐藏或删除如下代码，如下图：

　　三十、修改打赏字体不闪动

　　修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

　　三十一、文章加密访问

　　效果如下图：

　　实现步骤如下：

　　打开themes/next/layout/_partials/head/head.swig文件,在以下位置插入这样一段代码：

　　然后在文章上写成类似这样：

　　三十二、添加鼠标点击显示字体效果

　　效果如下图：

　　实现步骤如下：

　　在 /themes/next/source/js 下新建文件click_show_text.js，在 click_show_text.js文件中添加以下代码：

　　其中的社会主义核心价值观可以根据你自己的创意替换为其他文字，然后在 \themes\next\layout\_layout.swing文件末尾添加以下代码：

　　三十三、添加鼠标点击烟花爆炸效果

　　效果如下图：

　　实现步骤如下：

　　在 \themes\next\source\js 目录下新建一个 fireworks.js 的文件，里面写入以下代码：

　　然后在 \themes\next\layout\layout.swing 文件中写入以下代码：

　　三十四、自定义鼠标指针样式

　　在 \themes\next\source\css\_custom\custom.styl 文件 body 样式里写入如下代码：

　　鼠标指针可以用 Axialis CursorWorkshop 这个软件自己制作，不同主题具体放的文件有所不同，确保在博客主体 body 的 CSS 文件中即可，其中的鼠标指针链接可替换成自己的，首先尝试加载mouse.cur ，如果该文件不存在或由于其他原因无效，那么 auto 会被使用，也就是自动默认效果，图片格式为.ico、.ani、.cur，建议使用.cur，如果使用.ani或者其他格式无效，原因是浏览器兼容问题。

　　三十五、添加彩色滚动变换字体

　　在你想要添加彩色滚动变换字体的地方写入以下代码即可，其中文字可自行更改：

　　我是放在了侧边栏头像的下边，描述的位置\themes\next\layout\_macro\sidebar.swing：

　　三十六、浏览器网页标题恶搞

　　效果如下图：

　　实现步骤如下：

　　在目录 \themes\next\source\js 下新建一个 FunnyTitle.js 文件，在里面填写如下代码：

　　然后在 \themes\next\layout\layout.swing 文件中写入以下代码：

　　再次部署博客后就可以看见标题搞笑的效果了。

　　三十七、添加网站雪花飘落效果

　　效果如下图：

　　实现步骤如下：

　　在\themes\next\source\js目录下新建一个 snow.js文件，粘贴以下代码：

　　然后在 \themes\next\layout\layout.swing 文件中写入以下代码：

　　如果没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：

　　三十八、添加背景动态彩带效果

　　效果如下图：

　　实现步骤如下：

　　在 \themes\next\layout\layout.swing 文件中写入以下代码：

　　三十九、添加背景代码雨特效

　　效果如下图：

　　实现步骤如下：

　　在 \themes\next\source\js 目录下新建一个 DigitalRain.js文件，粘贴以下代码：

　　然后在 \themes\next\source\css\_custom\custom.styl 中写入样式：

　　在 \themes\next\layout\layout.swing 文件中写入以下代码：

　　四十、代码块复制功能

　　效果如下图：

　　实现步骤如下：

　　1. 下载 clipboard.js clipboard.js(https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.js) clipboard.min.js(https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js)

　　保存文件clipboard.js / clipboard.min.js 到路径\themes\next\source\js\src下。

　　2. 使用clipboard.js

　　也是在 \themes\next\source\js\src 目录下，创建clipboard-use.js，文件内容如下：

　　在\themes\next\source\css\_custom\custom.styl样式文件中添加下面代码：

　　3. 引用

　　在\themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签（）之前添加）：

　　四十一、Hexo文章中图片点击实现全屏查看

　　使用图片浏览放大功能fancybox插件。

　　1. 切换到lib目录

　　2. 下载插件

　　3. 更改主题配置文件

　　四十二、3D动态标签云

　　1. 安装标签云hexo-tag-cloud插件

　　2. 配置sidebar.swig文件

　　打开next/layout/_macro/sidebar.swig，输入：

　　根据自己的需要放在合适的位置。重新hexo s一下，就可以出现刚刚那个3d标签云了!

　　四十三、添加卡通人物

　　效果如下图：

　　实现步骤如下：

　　1. 下载 live2d(https://github.com/EYHN/hexo-helper-live2d)

　　2. 下载模型

　　更多模型选择请 访问https://github.com/EYHN/hexo-helper-live2d。

　　3. 修改站点配置文件

　　四十四、卡通人物升级版

　　效果如下图：

　　能说话、能换装、能玩游戏、能拍照、还能自定义。

　　实现步骤如下：

　　1. 下载 张书樵(https://github.com/stevenjoezhang/live2d-widget) 大神的项目，解压到本地博客目录的themes/next/source下，修改autoload.js文件，将如下代码：

　　改为

　　2. 在/themes/next/layout/_layout.swing中,新增如下内容：

　　3. 在主题配置文件 中,新增如下内容：

　　想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

　　四十五、扩展看板娘模型

　　由于官方的看板娘模型比较少，可手动添加模型。

　　把 github模型(https://github.com/summerscar/live2dDemo) 下载到本地，解压后将assets目录拷贝到博客根目录中的live2d_models（自己新建，文件名不可改）里，再修改_config.yml 里的 live2d中model.use即可（改为live2d_models中的模型名字就行）。

　　四十六、去掉顶部黑线

　　打开themes\next\source\css\_custom\custom.styl添加以下代码：

　　四十七、 修改主题页面布局为圆角

　　47.1、 方法一

　　在/themes/next/source/css/_variables/custom.styl文件种添加如下代码（以Gemini风格为例）：

　　47.2、 方法二

　　在\themes\next\source\css\_variables\Gemini.styl文件中直接添加：

　　效果如下图：

　　四十八、 自适应背景图片

　　1. 在站点配置文件夹/themes/next/source/images/放入你的背景图片;

　　2. 然后修改主题文件夹themes/source/css/_custom/custom.styl，在custom.styl开头加入如下的代码:

　　四十九、 防止每次heox clean 后CNAME文件被删除

　　1. 先把github中的CNAME文件复制一份到本地public

　　2. 再安装插件

　　3. 根目录_config.yml中添加

　　并修改

　　五十、 去除valine的Powered By

　　修改\themes\next\layout\_third-party\comments\valine.swig文件

　　五十一、增加词云

　　增加之前的效果如下图：

　　方法比较简单，加个js脚本就好了，就加在标签的那个页面好了。

　　打开themes\next\layout\page.swig`找到

　　将下面这段代码:

　　换成下面这段代码：

　　效果如下图：

　　五十二、代码块Mac Panel特效

　　先上效果图：

　　能设置阴影效果和实现文本编辑功能，不过文本只存在浏览器页面上，不会真正保存。

　　实现步骤如下：

　　1.引入JS

　　这里需要新建两个js文件events.js和codeblock.js，路径位于/themes/next/scripts/包下。

　　events.js代码如下：

　　codeblock.js代码如下：

　　2.引入CSS

　　在/themes/next/source/css/_common/components/highlight/目录下新建macPanel.styl文件，内容如下：

　　此css是根据我本地的样式做过调整，注释的代码为原有的，根据需要调整样式即可。

　　3.配置引用

　　在themes/next/source/css/_common/components/highlight/highlight.styl文件中引入刚才新建的macPanel.styl：

　　配置在文件的顶部位置即可。

　　到此Mac Panel已配置完成，根据需要可调整主题配置文件中的highlight_theme选项，选择自己喜欢的样式。

　　4.可能遇到的问题

　　如果在配置完毕后，hexo启动报错，可将站点配置文件里的highlight属性auto_detect改成false：

　　如果还是有问题，可仔细检查一下刚才新建的文件、修改的配置文件，有什么地方配置错了，或者是语法上的错误,修改后重新启动即可看到效果。

　　五十三、 为文章生成永久链接

　　hexo默认的文章链接形式为year/:month/:day/:title，是按照年、月、日、标题来生成的。当把文章源文件名改掉之后，链接也会改变，这很不友好。并且如果文章标题是中文的，那么该路径就会出现中文字符。在路径中出现了中文字符很容易引发各种问题，而且也不利于seo，因为路径包含了年月日三个层级，层级太深不利于百度蜘蛛抓取。

　　解决办法就是利用其它的插件来生成唯一的路径，这样就算文件标题随意修改，而不会导致原本的链接失效而造成站点下存在大量的死链。

　　1.安装插件

　　注意：执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…使用npm命令安装即可。比如：

　　2.配置

　　修改根目录站点配置文件config.yml，改为：

　　这里将页面都添加了 .html 的后缀，用来伪装成静态页面(虽说Hexo的页面本身就是静态页面)，这样可以直接从路径就知道这是个静态页面，方便seo。

　　生成的链接将会是这样的(官方样例)：

　　生成完后，原md文件的Front-matter内会增加abbrlink字段，值为生成的ID`。这个字段确保了在我们修改了Front-matter内的博客标题title或创建日期date字段之后而不会改变链接地址。

　　最后附上一张我个人网站的全览图：