博客的美化配置（NexT主题）

欢迎各位大佬来参观我的博客：AmosMeer’s Blog
搭建过程中出现的任何问题请参考博客：常见问题解决
完整的博客搭建过程的文章汇总：

1. 利用 Github Pages 和 Hexo 初步搭建博客
2. 博客的美化配置（NexT主题）
3. 博客的功能配置
4. 利用 Github Pages 和 Hexo 搭建博客常见问题解决
5. 常见 Hexo 命令

主要有一下 23 种配置：

1. 在右上角或者左上角实现 fork me on github
2. 修改文章内链接文本样式
3. 修改底部标签样式
4. 在文章末尾添加“文章结束”标记
5. 设置头像并设置动画效果
6. 修改代码块自定义样式
7. 侧边栏社交小图标设置
8. 主页文章添加阴影效果
9. 网站底部加访问量（待完成）
10. 添加热度（待完成）
11. 网站底部加上字数统计和阅读时长
12. 设置网站的图标Favicon12
13. 实现文章统计功能
14. 添加网页顶部进度加载条
15. 底部隐藏由Hexo强力驱动、主题–NexT.Mist
16. 博文置顶
17. 添加站内搜索
18. 在文章底部增加版权信息
19. 添加侧栏推荐阅读
20. 添加底部桃心
21. 添加DaoVoice在线联系
22. 博客加上萌萌的宠物
23. 首页文章只显示预览

从 Hexo 的官网选取主题

1.选取主题

可以选择喜欢的主题，点击进入到它的 github 地址，只需要把 GitHub 的地址复制下来即可。
我选择的主题为：hexo-theme-next，所以下面的配置也会以 next 为例。

2.克隆主题

再打开Hexo文件夹下的themes目录（F:\Blog\hexo\themes），右键Git Bash，在命令行输入:

git clone https://github.com/theme-next/hexo-theme-next (此处地址替换成你需要使用的主题的地址)

然后等待下载完成

3.修改Hexo配置文件

下载完成后，打开Hexo文件夹下的配置文件_config.yml

修改参数为：theme: hexo-theme-next

4.部署主题，本地查看效果

返回Hexo目录，右键Git Bash，输入

hexo g
hexo s

打开浏览器，输入 http://localhost:4000/ 即可看见更换后的新主题

部署到 Github

如果效果满意，就可以将它部署到 Github 上
打开 Hexo 文件夹，右键 Git Bash，输入

hexo clean (必须要，不然有时因为缓存问题，服务器更新不了主题)
hexo g -d

查看

打开自己的主页，即可看到修改后的效果
更多修改效果请查看对应主题的说明文档，点击此查看本主题(Next)对应的说明文档。

进一步美化主题（NexT）

根据 NexT 官方文档中的 开始使用 下的流程就可以完成初步的配置

1. 在右上角或者左上角实现 fork me on github

效果图如下图所示：

在 GitHub Ribbons 或 GitHub Corners 选择一款你喜欢的挂饰，拷贝方框内的代码：

将刚刚复制的挂饰代码，添加到 Blog/themes/next/layout/_layout.swig 文件中，添加位置如下图所示(放在 <div class="headband"></div> 下方)：

2. 修改文章内链接文本样式

修改 Blog/themes/next/source/css/_common/components/post/post.styl ，在末尾添加 CSS 样式：

// 文章内链接文本样式
.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; //底部分割线颜色
  }
}

设置后，效果如下：

3. 修改底部标签样式

记事本打开 Blog\themes\next\layout\_macro\post.swig 文件
command+f 搜索 rel="tag">#，将 # 替换成 <i class="fa fa-tag"></i>

4. 在文章末尾添加“文章结束”标记

路径 Blog\themes\next\layout\_macro 文件夹中新建 passage-end-tag.swig 文件
或者使用以下命令创建：

//切换到路径_macro
cd [_macro路径]

//创建passage-end-tag.swig文件
touch passage-end-tag.swig

在passage-end-tag.swig添加以下内容，直接用文本编辑器打开，粘贴以下内容后保存

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;