Hexo 搭建博客（三）
上一篇文章，介绍了如何利用 hexo+github pages 搭建个人博客。那么这篇文章则以我的博客为例详细教你打造个性超赞博客 Hexo+GitHubPages+NexT 的主题。
我这里选择了 GitHub 上面最多人用的一款主题：Next
安装 next 主题
第一步：下载next主题
进入博客 hexo 文件夹里面空白处 D:\blog\hexo，鼠标右键选择 Git Bash here 运行下述命令：git clone https://github.com/iissnan/hexo-theme-next themes/next然后 回车 。这样next主题就会下载到themes文件夹里面了。 （这个命令窗口不要关掉，后面还要用）
git clone https://github.com/iissnan/hexo-theme-next themes/next
第二步：设置 _config.yml 文件
用 sublime 打开 D:\blog\hexo _config.yml 文件，找到 theme 字段，修改参数为：theme: next，(注意：后面有一个空格)
修改完，保存。
第三步：本地测试
在刚才的命令窗口分别输入以下代码：
第一个命令： hexo clean 然后按 回车 ,等一会，出现 $ 符号
第二个命令： hexo s -g 然后按 回车 ,等一会，出现:
打开浏览器访问 :http://localhost:4000，查看一下新的博客页面
可以看到，博客页面非常简洁，（或许和你实际看到的，略有不同，没有关系，后面我们还要进一步美化）。
这款主题包含4种风格，默认的是Muse，也可以尝试其他风格。具体操作：
打开 D:\blog\hexo_config.yml，定位到 Schemes，想要哪款主题就取消前面的#，我的博客使用的是 Gemini
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
好了，我们已经看到基本效果了，现在转到命令窗口，Ctrl+C 停止运行。 （窗口不用关掉，后面还要用）
首先更换语言成中文，点击blogs文件夹（也就是你博客项目的根目录文件夹）中的_config,yml配置文件，进行修改：
如果要用记事本编辑，一定要另存为，编码选 utf-8 。建议用：notepad 或者 subline text。
修改完成后说明主题已经换成next主题，并且样式为Gemini样式，接下来在blogs博客目录下，使用Git 调试运行看看效果：
hexo c //清空缓存
hexo s -g
浏览器：http://localhost:4000/，效果展示如下：
下面就需要根据个人需求，对该blog主题进行装修了······
侧边栏美化
添加博客名字和slogan
修改站点文件如下：
文件路径：hexo_config.yml （hexo 的配置文件）
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: python爱好者 # 更改为你自己的
subtitle: Bright Future
description: Stay Hungry,Stay Foolish
keywords: python,hexo
author: 爱好者
language: zh-CN
timezone:
新建标签、分类、关于页面
第一个：hexo new page “tags” 然后 回车
第二个：hexo new page “categories” 然后 回车
第三个：hexo new page “about” 然后 回车
然后，打开 D:\blog\hexo\source 就可以看到上述三个文件夹。
要添加关于博主的介绍，只需要在 D:\blog\hexo\source\about\index.md 文件中，用 markdown 书写内容即可.
侧栏社交链接图标设置
可以添加你的github、Email、知乎、简书等社交网站账号。
文件路径：hexo\themes\next_config.yml (主题next 的配置文件)
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/jaybinkoo || github
E-Mail: mailto:[email protected] || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:jaybinkoo?call|chat || skype
添加侧栏友情链接
在主题配置文件 _config.yml中Sidebar Settings部分添加字段：网址可以自定义
Hexo c
Hexo s –g
看下效果：
添加头像并设置随光标转动
博客添加头像有两种方法：
第一种是放在本地文件夹中：D:\blog\hexo\public\uploads，并且命名为avatar.jpg。
第二种是将图片放在七牛云中，然后传入链接。推荐这种方式，可以加快网页打开速度。
打开站点文件，搜索 avatar ,在下面添加下面代码：（我选择了第二种）
Hexo c
Hexo s –g
看下效果：
页脚美化
这些都很简单， 每个true /false注释写的很清楚，看不懂英文的自己复制下来翻译一下。
效果如下：（页脚）
隐藏powered By Hexo/主题
themes\next\layout_partials\ footer.swig
按下图位置进行注释掉，
页脚显示总访客数和总浏览量
在themes\next\layout_partials\ footer.swig，文件首行添加如下代码：
#接着修改相应代码：
# 添加总访客量
访客数:人次
{% if theme.footer.powered %}
{% endif %}
# 添加'|'符号
{% if theme.footer.powered and theme.footer.theme.enable %}
{% endif %}
{% if theme.footer.custom_text %}
{% endif %}
# 添加总访问量
总访问量:次
# 添加'|'符号
{% if theme.footer.powered and theme.footer.theme.enable %}
{% endif %}
# 添加博客全站共：
博客全站共{{ totalcount(site) }}字
以上代码#开头的中文要删掉，否则都会显示出来
显示统计字数和估计阅读时长
修改主题文件 _config.yml ：
文件位置：blogs_config.yml
Post wordcount display settings
Dependencies: https://github.com/willin/hexo-wordcount
显示统计字数和估计阅读时长
注意：这个要安装插件，先进入站点文件夹根目录
然后：npm install hexo-wordcount --save
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: false
设置阅读全文：
在写博客的时候，添加
即从该处分开，隐藏后面文字，需点击“阅读全文”查看
添加标签
在写文章时，.md文件
效果
将# 改成标签的图标
具体实现方法
修改模板 /themes/next/layout/_macro/post.swig，搜索 rel=“tag”>#，将 # 换成
主题配置文件中，添加网站版权信息
生成“分类”页并添加tpye属性
打开命令行，进入博客所在文件夹。执行命令
$ hexo new page categories
成功后会提示：
INFO Created: ~/Documents/blog/source/categories/index.md
根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：
添加type: "categories"到内容中，添加后是这样的
标签文件也一样，需要添加 type: tags 才可以跳转到标签页面
打开这几个开关，左侧边栏会出现这种效果：
在next主题的配置文件里，设置打赏功能
文章末尾添加“本文结束”标记
新建 passage-end-tag.swig 文件
在路径\themes\next\layout_macro中添加passage-end-tag.swig文件，其内容为：
{% if theme.passage_end_tag.enabled %}
------本文已触底，感谢您的阅读！一看就知道今天的你，比昨天的你更好一些，喵~ ------
{% endif %}
修改 post.swig 文件
在\themes\next\layout_macro\post.swig中，post-body之后，post-footer之前添加如下代码：
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
在主题配置文件中添加字段
在主题配置文件 _config.yml中添加以下字段开启此功能：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
完成以上设置之后，在每篇文章之后都会添加“本文结束”标记。
该功能简易添加方法参见：https://github.com/iissnan/hexo-theme-next/issues/1039
添加网站已运行时间
在themes/layout/_parrials/footer.swing 中添加
把代码放在你想要的位置，插入位置不同，效果显示的位置也会不同。若想要显示为简体或者英文，只要把对应的文字修改就行。
载入天数...
载入时分秒... Sometimes your whole life boils down to one insame move.
文章底部添加版权信息
效果
教程：
修改文件：themes/next/layout/_macro/post-copyright.swig
若没有post-copyright.swig文件，则自己创建post-copyright.swig文件，添加如下代码，剩余步骤同5.3 文章末尾添加“本文结束”标记方法。
-
{{ __('post.copyright.link') + __('symbol.colon') }}
{{ post.url | default(post.permalink) }}
-
{{ __('post.copyright.license_title') + __('symbol.colon') }}
{{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
设置每页显示数量
在项目的配置文件下面，blogs
用LeanClound给hexo+next博客添加文章阅读数
注册LeanCloud账号
访问 https://leancloud.cn
创建应用
新应用名称 (自定义) → 开发版 → 创建即可
创建Class
在创建的应用上点击 存储
数据栏中，_开头的都是系统预定义好的表，为了区分，新建一张表来保存数据。为了保证对 NexT 主题的修改兼容，新建 Class 名字必须为 Counter。为了避免权限问题导致 次数统计显示不正常，选择无限制，创建 Class。
获取App ID和App Key
建议设置Web安全域名，填入自己的博客域名。
填写 App ID 和 App Key
打开博客根目录/themes/next/下的_config.yml，查找leancloud，填写复制来的App ID和App Key，重新生成、部署博客即可正常统计文章阅读量。
文件路径：themes\next_config.yml （主题next的配置文件）
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: 0jIPAHo6f5PO-gzGzoHsz
app_key: RC0L6MlmcTDqRbk
# visitors count
counter: true
添加 LeanCloud 的 Valine 评论功能
创建 Comment
数据栏中，_开头的都是系统预定义好的表，为了区分，新建一张表来保存数据。为了保证对 NexT 主题的修改兼容，新建 Class 名字必须为 Comment。权限选择限制写入 ，创建 Class。
填写 App ID 和 App Key （和上面的是一样的）
打开博客根目录 /themes/next/ 下的 _config.yml，查找 Valine，填写复制来的App ID和App Key，重新生成、部署博客即可正常统计文章阅读量。
文件路径： themes\next_config.yml （next 主题配置文件）
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: 0jIPAHSJOq8dN1q3GzoHsz
appkey: RCiQJH6MlmcTDqRbk
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: 欢迎留言！匿名也可以留言！ # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
添加近期文章板块
参考 https://www.zhyong.cn/posts/7f8f/
打开文件：vim themes/next/layout/_macro/sidebar.swig，找到if theme.links后面的endif，在后面添加：
{% if theme.recent_posts %}
{{ theme.recent_posts_title }}
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
-
{{ post.title }}
{% endfor %}
{% endif %}
在next主题_config.yml配置文件中添加：
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
设置背景动画
参考： https://blog.csdn.net/sinat_33381791/article/details/82827842
由于在Next 6.0后设置 Canvas_nest: true是背景将会有动画效果，但是没有反应，查看一下官方文档有解释说明。
#解决方案
- 打开Git进入自己文件夹下/themes/next文件夹下
$ cd themes/next
运行git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest即:
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
进入 thems/next/_config.yml文件下修改 canvas_nest: true(注意: 冒号后面要空格)
效果如图：
到此为止，我个人觉得博客装修，就完工了。
下一篇 如何可以通过域名来实现访问的博客？
如何可以通过域名来实现访问的博客？