hexo搭建个人博客--NexT主题优化
写在前面
本文为个人前一篇文章hexo搭建个人博客--基础篇的后续篇，前文主要介绍了如何搭建一个个人网站以及绑定域名等相关内容，还没有建站的伙伴们可以看一下前文，已经搭建好的就可以忽略了。
本文的优化是基于Hexo的NexT主题的，其他主题的疑问也可以在后台或评论区一起沟通交流。
目录
1 实用性优化
- 基本使用（
_config.yml文件配置） - 添加RSS
- 添加标签、分类等页面
- 设置网站icon
- 添加侧边栏社交链接
- 添加侧边栏友情链接
- 底部显示建站时间和图标的修改
- 微信支付宝打赏功能
- 关闭网站动画效果
- 设置第三方JS库
- 添加评论系统
- 统计访客量以及文章阅读量
- 阅读次数统计（基于LanCloud）
- 字数统计
- 增加版权信息
- 添加文章分享功能
- 文章排序优先级设置
- 添加站内搜索功能
- DaoVoice在线联系
2 个性化优化
- 设置字体
- 设置代码高亮主题
- 左上角或右上角的Github样式
- 添加背景动画
- 添加顶部加载条
- 点击出现小爱心效果
- 修改文章链接文本样式
- 修改文章底部标签样式
- 文章末尾统一添加“文本结束”标记
- 修改作者头像并旋转
- 文章添加阴影效果
- 修改打赏部分字体动画
- 自定义鼠标样式
- 添加看板娘
正文
以下修改保存后均可通过hexo g && hexo s指令在本地http://localhost:4000查看修改，另外通过hexo d发布到GitHub pages 或 Coding pages上面通过绑定的域名在线查看效果。
实用性优化
基本使用
上一篇文章已经讲过如何安装Hexo，不了解的小伙伴可以参考一下我的上一篇文章，或者访问Hexo文档来了解如何安装Hexo。
在Hexo中有两个很重要的名为_config.yml的文件，其中一个在站点安装的根目录下，另一个在主题目录下。前者提供了Hexo自身的一些基本配置信息，后者为你所安装的主题的相关配置。为了方便区分，我们把前者称为站点配置文件，后者称为主题配置文件。
站点配置文件
文件路径站点根目录/_config.yml，编辑软件推荐使用Sublime Text 。
这里贴一下个人的部分配置，可以改一下相关内容自行体会一下效果：
# Site
title: Alvabill
subtitle: Stay Hungry, Stay Foolish
author: Alvabill
description: "Alvabill个人站，主要涉及前端知识共享、实践教程、前沿技术共同学习等方面" #网站描述 SEO
language: en
timezone: Asia/Shanghai
“title”：博客的名称。
“subtitle”：根据主题的不同，有的会显示有的不会显示。
“description”：主要用于SEO，告诉搜索引擎一个关于站点的简单描述，通常建议在其中包含网站的关键词。
“author”：作者名称，用于主题显示文章的作者。
“language”：语言会对应的解析正在应用的主题中的languages文件夹下的不同语言文件。所以这里的名称要和languages文件夹下的语言文件名称一致。
“timezone”：可不填写。
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://alvabill.ml
root: /
permalink: :title/
permalink_defaults:
“url”：一般填写自己的站点链接。
“root”：设置根目录的位置。如果你的网站存放在子目录中，例如 http://yoursite.com/blog，则应该将你的 url 设为http://yoursite.com/blog 并把 root 设为 /blog/。
“permalink”：生成的链接的格式。带井号的是默认的格式，带有日期感觉怪怪的，改成了自己喜欢的格式。规则也比较简单，标签前面要加英文冒号。
“permalink_defaults”: 生成链接中各部分的默认值
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
- README.md
- CNAME
目录一般不需要修改，这里需要改动的是skip_render，跳过指定文件的渲染，这里写上去着两个文件名便可，在上一篇文章中已经详细描述过这里就不累赘了。
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
书写相关的设置
“new_post_name”：新的博文的文件名
“default_layout:“ 默认布局
“filename_case: 0“ #把文件名称转换为 (1) 小写或 (2) 大写
“render_drafts: false“ 是否显示草稿
“post_asset_folder: false“ #是否启动资源文件夹
“relative_link: false“ #把链接改为与根目录的相对位址
“future: true “
“highlight:“ #代码块的设置，Hexo自带的代码高亮插件
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
分类和标签的设置
“default_category”：如果撰写文章时没有设置分类，默认的分类选择。
“category_map”：用于映射分类的别名。
“tag_map”：用法和分类别名是一样的。
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository:
github: git@github.com:Alvabill/Alvabill.github.io.git,master
coding: git@git.coding.net:Alvabill/Alvabill.git,master
“theme”：主题拓展，可以在主题商店选择其他主题，这里使用next
“deploy”：部署方式，前文已经详细描述，不再累赘。
主题配置文件
文件路径站点根目录/themes/next/_config.yml，编辑软件推荐使用Sublime Text 。
这里先选择主题：
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes # NexT 主题提供三种布局
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
主题选择，在前面加#注释掉其他的，这里我们选Mist，其他主题你们也可以体验一下，不过不保证本教程的优化全部适配哦，不过选择其他主题的小伙伴遇到的问题也欢迎在评论区提出一起交流。
添加RSS
在主题配置文件中有NexT默认的RSS设置，默认为留空，这时使用 Hexo 生成的 Feed 链接，需要先安装 hexo-generator-feed插件。
在站点根目录打开git bash，安装插件：
$ npm install --save hexo-generator-feed
修改站点配置文件，在最后添加以下代码：
feed: # RSS订阅插件
type: atom
path: atom.xml
limit: 0
plugins: hexo-generate-feed
修改主题配置文件如下：
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
实现效果：
引用自http://shenzekun.cn
添加顶部加载条
在主题配置文件中搜索pace：
# Progress bar in the top during page loading. 加载条
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
这里有多种主题选择，根据自己喜好选择主题修改便可。
点击出现小爱心效果
效果：
引用自http://shenzekun.cn
将love.js文件放到路径
/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：
<script type="text/javascript" src="/js/src/love.js"></script>
修改文章内链接文本样式
修改文件 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;
}
}
修改文章底部标签样式
修改/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
实现效果：
文章末尾统一添加“本文结束”标记
在路径\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下内容：
<div>
{% if not is_index %}
<div style="text-align:center;color: #555;font-size:14px;">-------------The End-------------</div>
{% endif %}
</div>
接着打开\themes\next\layout\_macro\post.swig文件，在这个位置添加代码：
要添加的代码如下：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件，在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
实现效果：
修改作者头像并旋转
打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：
.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);
}
}
文章添加阴影效果
打开\themes\next\source\css\_custom\custom.styl,向里面加入：
// 主页文章添加阴影效果
.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);
}
实现效果：
修改打赏部分字体动画
Next打赏部分的动画是鬼畜一般的不停地抖动，看着很难受，所以博主把它改为只循环三遍，打开文件themes/next/source/css/_common/components/post/post-reward.styl，把微信和支付宝的改为如下：
#wechat:hover p{
animation: roll 0.1s 3 linear;
-webkit-animation: roll 0.1s 3 linear;
-moz-animation: roll 0.1s 3 linear;
}
#alipay:hover p{
animation: roll 0.1s 3 linear;
-webkit-animation: roll 0.1s 3 linear;
-moz-animation: roll 0.1s 3 linear;
}
自定义鼠标样式
打开themes/next/source/css/_custom/custom.styl，添加代码：
// 鼠标样式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
}
其中 url 里面必须是 ico 图片，ico 图片可以上传到网上（推荐七牛云图床），然后获取外链，复制到 url 里就行了。
添加看板娘
实现效果：
用git bash在站点根目录执行如下代码：
$ npm install hexo-helper-live2d --save
然后打开/themes/next/layout/_layout.swig,将下面代码放到</body>之前：
{{ live2d() }}
在站点配置文件末尾添加代码：
## 看板娘
live2d:
model: hijiki
position: left
bottom: -30
mobileShow: false #手机端不显示
具体设置可以看官方介绍--传送门。
