博客的美化配置（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 样式：

1 2 3 4 5 6 7 8 9 10 11

// 文章内链接文本样式 .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 文件
或者使用以下命令创建：

1 2 3 4 5

//切换到路径_macro cd [_macro路径] //创建passage-end-tag.swig文件 touch passage-end-tag.swig

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

1 2 3 4 5

<div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束 <i class="fa fa-paw"></i> 感谢您的阅读-------------</div> {% endif %} </div>

打开 Blog\themes\next\layout\_macro\post.swig，在 post-body 之后， post-footer 之前（post-footer之前两个DIV），添加以下代码：

1 2 3 4 5

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

添加位置如下：

修改主题配置文件_config.yml，在末尾添加：

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

配置完成之后，效果如下：

5.设置头像并设置动画效果

在 Blog/_config.yml 中添加头像链接地址：

//添加头像地址
avatar: [ http://....]

设置头像圆角并旋转，打开 Blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl，添加以下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/ /* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out; } img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/ /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); } /* Z 轴旋转动画 */ @-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); } } @-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); } } @keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } }

6.修改代码块自定义样式

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// Custom styles. code { color: #ff7600; background: #fbf7f8; margin: 2px; } // 大代码块的自定义样式 .highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px; } .highlight, code, pre { border: 1px solid #d6d6d6; }

7.侧边栏社交小图标设置

打开主题配置文件_config.yml，command+f搜索 Social，将你有的社交账号前面的 # 号去掉。
格式为：

[社交平台名]: [社交地址] || [图标名称]

效果如下：

图标可以去Font Awesome Icon网站去找，找到后复制名字到相应的位置即可。

8.主页文章添加阴影效果

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

1 2 3 4 5 6 7 8

// 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }

效果如下：

9.网站底部加上访问量（待完成）

10.添加热度（待完成）

11.网站底部字数统计和阅读时长

打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话：

1	<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码，如图：

1 2 3 4 5

<div class="powered-by"> <i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv"> 本站访客数:<span id="busuanzi_value_site_uv"></span> </span> </div>

在这里有两中不同计算方式的统计代码：

1. pv的方式，单个用户连续点击n篇文章，记录n次访问量

1 2 3

<span id="busuanzi_container_site_pv"> 本站总访问量<span id="busuanzi_value_site_pv"></span>次 </span>

2. uv的方式，单个用户连续点击n篇文章，只记录1次访客数

1 2 3

<span id="busuanzi_container_site_uv"> 本站总访问量<span id="busuanzi_value_site_uv"></span>次 </span>

12.设置网站的图标Favicon

在图标网站找一张你喜欢的图标（大：32x32 小：16x16），图标网站：easyicon或者阿里巴巴矢量图标库。将下载下来的小图和中图放在Blog/themes/next/source/images，将默认的两张图片替换掉。

如果你自定义了图片名字，需要修改主题配置文件：

1 2 3 4 5 6 7 8 9

# For example, you put your favicons into `hexo-site/source/images` directory. # Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo. favicon: small: /images/favicon-16x16-next.png //16X16小图 medium: /images/favicon-32x32-next.png //32X32大图 apple_touch_icon: /images/apple-touch-icon-next.png //apple-touch-icon safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml

修改后，效果如下：

13.实现文章统计功能

安装 hexo-symbols-count-time，命令如下：

npm install hexo-symbols-count-time --save

在站点配置文件 hexo _config.yaml添加：
（注意：修改此配置需要重启服务才能更新）

1 2 3 4 5

symbols_count_time: symbols: true # 文章字数 time: true # 阅读时长 total_symbols: true # 所有文章总字数 total_time: true # 所有文章阅读中时长

在主题配置文件 next _config.yaml添加：

1 2 3 4 5 6

symbols_count_time: separated_meta: true # 是否换行显示 字数统计 及 阅读时长 item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示 item_text_total: false # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示 awl: 4 wpm: 275

具体可查看 symbols_count_time
效果图：

14.添加网页顶部进度加载条

编辑主题配置文件，command+F 搜索 pace，将其值改为 ture 就可以了。

15.底部隐藏由Hexo强力驱动、主题–NexT.Mist

打开Blog/themes/next/layout/_partials/footer.swig，注释掉相应代码。

16.博文置顶

修改hexo-generator-index插件，把node_modules/hexo-generator-index/lib/generator.js中代码替换为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

'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值，值越大，越靠前：

1 2 3 4 5 6 7 8 9

--- title: Hexo-NexT主题配置 date: 2018-01-20 20:41:08 categories: Hexo tags: - Hexo - NexT top: 100 ---

17.添加站内搜索

NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。下面介绍Local Search的安装。
安装 hexo-generator-search

npm install hexo-generator-search --save

安装 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

编辑站点配置文件，添加以下内容

1 2 3 4 5

search: path: search.xml field: post format: html limit: 10000

编辑主题配置文件，设置 Local searchenable 为 ture
效果如下图所示：

18.在文章底部增加版权信息

在目录Blog/themes/next/layout/_macro/，添加文件 my-copyright.swig，内容如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

{% if page.copyright %} <div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS库 sweetalert 可修改路径 --> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p> <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p> <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p> <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p> <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功！"></i></span> </p> <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script> {% endif %}

在目录Blog/themes/next/source/css/_common/components/post/下添加文件my-post-copyright.styl，添加以下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; 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; +mobile(){display:none;} } .my_post_copyright .copy-path:hover { color: #808080; cursor: pointer; }

修改Blog/themes/next/layout/_macro/post.swig，在如图位置 post body 后面添加以下代码：

1 2 3 4 5

<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %} </div>

在Blog/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代码：

1	@import "my-post-copyright"

在Markdown文章中加入copyright : ture：

1 2 3 4 5 6 7 8 9 10

--- title: Hexo-NexT主题配置 date: 2018-01-20 20:41:08 categories: Hexo tags: - Hexo - NexT top: 100 copyright: ture ---

配置根目录下的_config.yml文件，配置为：

1 2 3 4 5 6

# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: https://wenmobo.github.io/ //你的网站地址 root: / permalink: :year/:month/:day/:title/ permalink_defaults:

19.添加侧栏推荐阅读

编辑主题配置文件，如下配置即可：

1 2 3 4 5 6 7 8

# Blog rolls links_icon: link links_title: 推荐阅读 #links_layout: block links_layout: inline links: Swift 4: https://developer.apple.com/swift/ Objective-C: https://developer.apple.com/documentation/objectivec

效果如下图所示：

20.添加底部桃心

打开Blog/themes/next/layout/_partials/footer.swig搜索with-love，在fontawesom找到你喜欢的图标，在如下位置替换即可：

效果如下图所示：

21.添加DaoVoice在线联系

首先在DaoVoice注册个账号
完成后，会得到一个app_id，后面会用到：

修改themes\hexo-theme-next\layout\_partials\head\head.swig文件，在如下位置添加内容如下：

1 2 3 4 5 6 7 8 9

{% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice") daovoice('init', { app_id: "{{theme.daovoice_app_id}}" }); daovoice('update'); </script> {% endif %}

在主题配置文件_config.yml文件中添加内容：

1 2 3

# Online contact daovoice: true daovoice_app_id: # 这里填你刚才获得的 app_id

聊天窗口配置

我的配置如下：

效果如下：

22. 博客加上萌萌的宠物

然后输入如下代码安装：

npm install -save hexo-helper-live2d

然后在 hexo 的 _config.yml 中添加参数：

1 2 3 4 5 6 7 8 9 10 11

live2d: enable: true scriptFrom: local model: use: live2d-widget-model-miku display: position: right width: 140 height: 260 mobile: show: true

其中的 model 可以从一下列表中选择一个：
点击查看模型预览，查看官方文档

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru) live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru) live2d-widget-model-haruto live2d-widget-model-hibiki live2d-widget-model-hijiki live2d-widget-model-izumi live2d-widget-model-koharu live2d-widget-model-miku live2d-widget-model-ni-j live2d-widget-model-nico live2d-widget-model-nietzsche live2d-widget-model-nipsilon live2d-widget-model-nito live2d-widget-model-shizuku live2d-widget-model-tororo live2d-widget-model-tsumiki live2d-widget-model-unitychan live2d-widget-model-wanko live2d-widget-model-z16

---

首页文章只显示预览

打开主题配置文件 _config.yml，搜索 auto_excerpt ,找到如下部分：

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
    enable: false
    length: 150

把enable改为对应的 false 改为 true