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

实现效果：

---

添加标签、分类等页面

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图标库，后面会介绍如何设置默认库。

---

微信支付宝打赏功能

在主题