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: [e-mail]:Alvabill/Alvabill.github.io.git,master
    coding: [e-mail]: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

实现效果：

---

添加标签、分类等页面

1 修改主题配置文件，在菜单项添加以下内容：

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  archives: /archives/
  tags: /tags/
  categories: /categories/
  about: /about/
  #sitemap: /sitemap.xml
  #commonweal: /404/

这里可以添加图标，个人不是很喜欢所以没有添加，图标的代码就在以上代码的下边，可以自行修改体验。

2 新建页面
在站点根目录输入以下代码新建页面：

$ hexo new page tags
$ hexo new page categories
$ hexo new page about

archives页面不需要新建，NexT主题自带了；tags、categories页面需要设置类型，即打开站点根目录\source\tags、站点根目录\source\categories分别进行修改：

如果有集成评论服务，页面也会带有评论。因为后面我们会添加评论系统所以这里需要添加字段 comments 并将值设置为 false。

---

设置网站icon

主题配置文件中第一行代码就是网站icon设置，这里你只需要找到你喜欢的logo把它制作成ico格式然后改名favicon.ico，放到/themes/next/source/images下面即可。

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico # 网站logo

---

添加侧边栏社交链接

主要修改主题配置文件的社交链接和对应图标：

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:  # 添加你的社交账号
  #LinkLabel: Link
  GitHub: https://github.com/Alvabill
  fcc: https://www.freecodecamp.cn/alvabill
  简书: https://www.jianshu.com/u/439a6eee60e1
  CSDN: http://blog.csdn.net/weixin_38796712
# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  icons_only: false
  transition: false
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  fcc: free-code-camp
  GitHub: github
  简书: book
  CSDN: rotate-right 

实现效果如下：

---

添加侧边栏友情链接

修改主题配置文件：

# Blog rolls  推荐阅读
links_title: Links
#links_layout: block
links_layout: inline
links:
  Web前端导航: http://www.alloyteam.com/nav/
  创造狮导航: http://www.chuangzaoshi.com/code
  前端书籍资料: http://www.36zhen.com/t?id=3448
  掘金酱: http://e.xitu.io/
  V2EX: https://www.v2ex.com/
  印记中文: https://www.v2ex.com/

实现效果：

---

底部显示建站时间和图标修改

修改主题配置文件：

# Specify the date when the site was setup
since: 2018 # 建站年份

# icon between year and author @Footer
authoricon: snowflake-o

实现效果：

雪花图标需要用到最新的fa图标库，后面会介绍如何设置默认库。

---

微信支付宝打赏功能

在主题配置文件中的微信or支付宝收款地址处填入收款二维码图片即可：

# Reward
#reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: http://p3dm71oa7.bkt.clouddn.com/wcpay.png
alipay: http://p3dm71oa7.bkt.clouddn.com/zfbpay.jpg
#bitcoin: /images/bitcoin.png

实现效果：

---

关闭网站动画效果

为了追求更快的响应速度我们可以把网站的大部分动画关掉，这里修改主题配置文件的一行代码即可：

# Motion
use_motion: [false/true]

---

设置第三方JS库

在主题配置文件中设定成合适的 CDN 地址，此特性可以加速静态资源（JavaScript 第三方库）的加载。
例如：

# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
#    mquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 2.1.3
  jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js

  # Internal version: 2.1.5
  # See: http://fancyapps.com/fancybox/
  fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css

  # Internal version: 1.0.6
  # See: https://github.com/ftlabs/fastclick
  fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js

  # Internal version: 1.9.7
  # See: https://github.com/tuupola/jquery_lazyload
  lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js

  # Internal version: 0.7.9
  # See: https://faisalman.github.io/ua-parser-js/
  ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js

  # Internal version: 4.6.2
  # See: http://fontawesome.io/
  fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

  # Internal version: 1
  # https://www.algolia.com
  algolia_instant_js:
  algolia_instant_css:

  # Internal version: 1.0.2
  # See: https://github.com/HubSpot/pace
  # Or use direct links below:
  # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
  pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

  # Internal version: 1.0.0
  # https://github.com/hustcc/canvas-nest.js
  canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js

---

添加评论系统

NexT支持的第三方的评论系统有很多，不过不少已经关闭不再可用了，而且对于国内来说比较友好的现在应该就只有来必力，当然喜欢折腾的小伙伴可以尝试一下其他的或者自建评论系统。这里就先介绍目前最简单可行的方案，也就是来必力。

获取来必力id：
登陆 来必力 注册获取，这里要注意，这个韩国的系统注册啥的真的太慢了，所以要记住不要耐不住关闭页面或者狂刷新，耐心等待就好。
注册后点击导航上边的安装，选择免费的city版本：

点击现在安装后填入网站的一些信息就可以获取到安装代码，框中的就是你的来必力id：

复制上边的id，在主题配置文件里面搜索livere_uid，在后面添加来必力id即可：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的来必力id}

另外可以点击用户头像进入管理界面个性化你的评论系统：

最终实现效果:

---

统计访客量以及文章阅读量

NexT主题集成了不蒜子统计功能：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
# 不蒜子统计功能
busuanzi_count:
  # count values only if the other configs are false
  enable: false
  # custom uv span for the whole site
  site_uv: false
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: false
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。
当site_uv: true时，代表在页面底部显示站点的UV值。
当site_pv: true时，代表在页面底部显示站点的PV值。
当page_pv: true时，代表在文章页面的标题下显示该页面的PV值（阅读数）。
site_uv_header和site_uv_footer这几个为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。
示例：

enable: true
# 效果：本站访客数12345人次
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# 效果：本站总访问量12345次（一般不开启这个）
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
# 效果：本文总阅读量12345次
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次

---

阅读次数统计（基于LeanCloud）

相比不蒜子的统计，LeanCloud的文章阅读量统计更加稳定靠谱，所以本人也把网站的文章内统计改为LeanCloud的了。
设置方法参考该文章--传送门

实现效果：

---

字数统计

用于统计文章的字数以及分析出阅读时间。
在主题配置文件中，搜索wordcount，设置为下面这样就可以了：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  min2read: true
  wordcount: true
  separated_meta: true

再打开\themes\next\layout\_macro\post.swig文件，在leancloud-visitors-count后面位置添加一个分割符：

实现效果：

另外，在/themes/next/layout/_partials/footer.swig文件endif %}前加上下面代码可以实现在站点底部统计全站字数：

<div class="theme-info">
  <span class="post-count">Total Words:{{ totalcount(site) }}</span>
</div>

实现效果：

如果无法显示可能是hexo-wordcount插件没有安装，git bash在网站根目录安装一下就可以：

$ npm install hexo-wordcount --save

---

增加版权信息

在目录themes/next/layout/_macro/下添加my-copyright.swig，代码如下：

{% 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 %}

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

.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;
}

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

    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

前面添加代码：

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

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

@import "my-post-copyright"

最后到站点根目录/scaffolds/post.md，在两个---中间增加一行：

copyright: true

之后的每一篇文章都会自己加上版权信息，之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息。

---

添加分享文章功能

这里我们使用AddThis，为什么呢，晒一下我的样式你就知道了：

具体选择什么样式可以在AddThis网站上面设置。
首先注册账号（需要科学上网），注册后找到该位置：

在主题配置文件中搜索add_this_id，去掉前面的注释，添加上你的AddThis ID就可以了。

# Share  分享
#jiathis: true
# Warning: JiaThis does not support https. 博主实测支持https
add_this_id: {your AddThis ID}

具体添加方式如下，可以选择多种样式：

---

添加文章评分功能

通过widgetpack来给网站每篇文章添加评分系统，效果如下：

首先注册账号，添加新站点，填入网站名称和域名地址，点击添加：

获取id：

这里9384就是我的id，复制下来到主题配置文件中搜索widgetpack添加即可:

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:  {your ID}    #<app_id>
  color:  fc6423

这里建议设置为按ip地址记录评分，比较方便：

---

文章排序优先级设置

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

'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
    }
  });
};

在\scaffolds\post.md头部---中添加以下代码：

top:  

以后新建文章就可以给文章的top赋值，数值越大优先级越高。

已经写好的文章在对应的md文件头部添加top：{number}即可

---

添加站内搜索功能

这里使用Algolia，其他的都不太靠谱。
前往Algolia注册页面，注册一个新账户。可以使用GitHub或者Google账户直接登录，注册后的14天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户总共有10,000条记录，每月有100,000的可以操作数。注册完成后，创建一个新的Index，这个Index将在后面使用。

Index创建完成后，此时这个Index里未包含任何数据。接下来需要安装Hexo Algolia扩展，这个扩展的功能是搜集站点的内容并通过API发送给Algolia。前往站点根目录，执行命令安装：

$ npm install --save hexo-algolia

找到新建的Index对应的Key，复制下面的App ID和API Key，同时修改权限:

在站点配置文件（注意是站点配置文件）末尾，新增配置代码：

#添加搜索
algolia:
  applicationID: '{your appID}'
  apiKey: 'your API Key'
  indexName: 'your Index name'
  chunkSize: 5000

在站点根目录执行以下代码，更新Index(每次更新文章都需要执行一次)，即上传站点内容到algolia：

$ export HEXO_ALGOLIA_INDEXING_KEY={your API Key}
$ hexo algolia

更改主题配置文件，搜索algolia_search：

# Algolia Search
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"

将enable改为true即可，根据需要你可以调整labels中的文本。

---

DaoVoice 在线联系

实现效果：

首先去注册，这里需要邀请码，贴一个5ea4435c，或者直接点击邀请码的链接。注册后就可以查看你的app_id:

复制app_id，打开/themes/next/layout/_partials/head.swig,写下如下代码：

{% 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 %}

接着打开主题配置文件，在最后写下如下代码：

# Online contact
daovoice: true
daovoice_app_id: {your app_id}

具体样式设计可以在 应用设置-->聊天设置 后边改。

---

个性化优化

设置字体

在主题配置文件中设置，例如：

font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

---

设置代码高亮主题

NexT 默认使用的是 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

效果：

---

设置小型代码块颜色

修改\themes\next\source\css\_variables\base.styl文件，修改$code-background和$code-foreground的值：

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 13px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 3px
$code-foreground                = $black-light
$code-background                = $gainsboro

---

左上角或右上角的Github样式

实现效果有两种：

具体实现方式便是到样式1或者样式2的网站中选择你喜欢的样式，复制其中的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址。

---

添加背景动画

NexT已经自带了多种背景动画效果，你只需要根据需求在主题配置文件修改其中一个为true即可。

# Canvas-nest 
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

实现效果：

---

添加顶部加载条

在主题配置文件中搜索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

这里有多种主题选择，根据自己喜好选择主题修改便可。

---

点击出现小爱心效果

效果：

将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  #手机端不显示

具体设置可以看官方介绍--传送门。

---

学习借鉴的文章

1. http://shenzekun.cn/hexo%E7%9...
2. http://blog.csdn.net/MasterAn...
3. http://blog.csdn.net/lemonxq/...