搭建 HEXO 博客（二）：个性化定制

1、主题配置

Hexo 有多种主题可供选择，我们可以到 Github 上面搜索 Hexo 主题即可。众多主题中使用最多的是 Next 主题，这里我们以 Next 主题为例。如果要使用 Next 主题，我们只需要到其 Github 仓库 https://github.com/theme-next/hexo-theme-next，将其克隆到我们 Hexo 项目的 themes/next 下面即可。

然后在站点的 _config.yml 配置文件里面将 theme 修改为 next，清理，重启并预览效果即可，

hexo clean
hexo s -g

Next 也提供了四种主题样式，到 next 目录下面修改其主题配置文件 _config.yml，将 Schemes 属性，将指定的注释去掉即可，清理，重启，即可预览该主题的效果。

下面我们介绍一下 Next 和 Hexo 个性化的一些定制方式。

2、博客评论

这里以 gitalk 为例。在新版本的 Next 中已经提供了 gitalk 的集成选项，参考注释，到 Gitalk 进一步了解如何使用。

首先，您需要选择一个公共 Github 存储库（已存在或创建一个新的 Github 存储库）用于存储评论，

然后需要创建 GitHub Application，如果没有 点击这里申请，Authorization callback URL 填写当前使用插件页面的域名。

然后将获取到信息填写到 Next 的配置文件中，

gitalk:
  enable: true
  github_id: xxxxxxxxx
  repo: xxxxxxxxx
  client_id: xxxxxxxxx
  client_secret: xxxxxxxxx
  admin_user: xxxxxxxxx
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

这样重启预览 Hexo，页面或者文章页面下面就出现评论的入口了。

3、Local Search 本地搜索

安装插件 hexo-generator-searchdb，执行以下命令:

npm install hexo-generator-searchdb --save

修改 hexo/_config.yml 站点配置文件，新增以下内容到任意位置：

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

编辑 主题配置文件，启用本地搜索功能：

# Local search
local_search:
enable: true

重启并浏览效果即可。

4、设置网站图标

在 EasyIcon 中找一张（32 * 32）的 ico 图标，或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改主题配置文件：

Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

或者自己制作一些图标也行。

5、修改文章底部的 # 号的标签，改为图标

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel="tag"，将 {{ tag.name }} 之前的内容换成 <i class="fa fa-tag"></i>，就是更改一个标签的意思。

6、增加文章字数统计及阅读时常功能

参考：https://github.com/theme-next/hexo-symbols-count-time

安装插件 symbols_count_time，执行以下命令:

npm install hexo-symbols-count-time

修改 themes/next/_config.yml 主题配置文件，搜索关键字 symbols_count_time，修改如下:

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

7、修改链接文字样式

打开 themes\next\source\css\_common\components\post\post.styl 添加以下代码:

.post-body p a{
 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

8、头像设置圆形,停留旋转效果

修改 themes/next/_config.yml 将 avatar: /images/avatar_2.gif 替换为自己的头像，

可以将自己的头像上传自定义的图片到下列目录 /themes/next/source/images/ 下面，然后进行引用即可。

9、代码复制

在 next 配置中修改如下，

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  border_radius: 8   # 按钮圆滑度
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

10、修改文章链接

hexo-next 文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。比如：https://zxiaoxuan.github.io/2019/08/12/hello-world/ 这样，如果文章标题是中文的话，URL链接是也会是中文，那么要生存简洁且唯一的 URL，怎么办呢？

安装插件

npm install hexo-abbrlink --save

修改根目录站点配置文件 config.yml，改为：

permalink: posts/:abbrlink/
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

11、标签页和分类页

进入项目目录下，开启命令行，输入

hexo new page tags

这样会在生成一个文件：/source/tags/index.md

修改这个文件的注释，注意这里的 type: "tags" 标记了这个文件的类型，

---
title: tags
date: 2016-06-08 16:19:38
type: "tags"
---

categories 的使用同理。

12、显示预览内容

首先修改配置文件：

excerpt_description: true 

两种方式，

方法一：写概述

在文章的 front-matter 中添加 description，其中 description 中的内容就会被显示在首页上，其余一律不显示。

---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
photos: # 如果要显示图片的话
	"https://faithlove.github.io/pic/2018/HexoThumb/topPicPre.png-slim"
---

比较不方便的是还得写一下概述，很多时候会懒得写概述，于是就需要第二种方法了。

方法二：文章截断

在需要截断的地方加入：

<img src="https://faithlove.github.io/pic/2018/RMTP_1/topPicPre.png-slim" width=50% />
<!--more-->

首页就会显示这条以上的所有内容，隐藏接下来的所有内容。

未完待续，请参见下文