Hexo Next 自定义配置

发表于 | 更新于 | 分类于

Hexo 一直是一个非常简单易上手的博客平台，其中的 Next 主题更是以精简著名，其实我个人非常喜欢这个主题，从去年开始就陆续有使用它来搭建博客的习惯了。在这里要特别感谢一下 Next 的创建人 iissnan ，真是做的太好了！！！然而我这个人手上有点东西就闲不下来，要拼命折腾到我觉得满意为止，所以在这里记录一下所有的配置以及搭建过程，供需要的人参考，也以防未来需要重新配置。

起源

其实这次折腾是有原因的，之前虽然有一直在用 Next ，但是版本太低了，一直处于 5.0.1，最近看到了更新到了 5.1.1，就想把整个网站都更新一下（其实主要是因为 canvas 的动画效果太酷炫，我口水都流出来了）。下了新版本之后发现变化实在是太大了，很多东西以前都没有集成，现在在主题配置文件中随便设置一下就可以用了，比如站内搜索等功能。但是有些功能还是需要自己设计的，比如说有些评论功能有一些 bug ，还有一些 css 样式的修改等，在 Next 使用文档当中能够顺利实现的功能这里就只在常规配置中一句话带过了。

常规配置

添加分类页面

在终端下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 categories ：

1
2
$ cd your-hexo-site
$ hexo new page categories

编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

1
2
3
4
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

在菜单中添加链接。编辑 主题配置文件 ， 添加 categories 到 menu 中，如下：

1
2
3
4
menu:
  home: /
  archives: /archives
  categories: /categories

如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
5
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

设置字体

记录一下我的字体设置：

字段 字体
global Monda
headings Roboto Slab
posts Microsoft YaHei
logo Lobster Two
codes monospace

设置代码高亮主题

我个人用的是 normal 我觉得最契合 Next 这个主题，记录下代码高亮支持的语言：

全称 标识
JavaScript javascript, js, jsx
TypeScript typescript, ts
CSS css
HTML, XML xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist
Bash bash, sh, zsh
C++ cpp, c, cc, h, c++, h++, hpp
php php
yml yml

HyperComments

首先登陆 HyperComments 可以通过 Google 账号登陆，一般私人版本的只支持一个网站的绑定，输入博客网站绑定好之后，进入 admin 操作界面，点击右上角的设置图标，选择左边的 Widget - code ，右边会有你的 ID 显示，或者在如下代码中寻找：

1
_hcwp.push({widget:"Stream", widget_id: your id});

获得 ID 后，修改主题配置文件以下配置：

1
2
# Hypercomments
hypercomments_id: your hypercomments_id

不蒜子统计

站内统计相对比较简单，记录下我的配置：

1
2
3
4
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
1
2
3
4
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
1
2
3
4
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-eye"></i> 阅读次数
page_pv_footer:

内容分享服务

一开始用的是 JiaThis 的内容分享服务，一行代码就可以搞定。但是后来我嫌界面太丑了，而且没有找到合适的自定义分享的方法，所以果断抛弃了 JiaThis ，使用了 AddThis 之后，感觉舒服了很多，至于具体的配置十分方便，对照着 使用文档 进行修改就可以了，主题的话建议使用黑色，和 Next 的简约风格相配。

搜索服务

在上个版本中，我使用的是 Swiftype，但是这个版本 Swiftype 已经开始收费了，并且只有企业级用户才开放注册，于是改用 Algolia，配置好之后发现其实 Algolia 算是一款非常好用的站内搜索服务软件了，配置如下：

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

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

1
npm install --save hexo-algolia

在 Algolia 服务站点上找到需要使用的一些配置的值，包括 ApplicationID、Search API Key、 Admin API Key。注意，Admin API Key 需要保密保存。

当配置完成，在站点根目录下执行 hexo algolia 来更新 Index。请注意观察命令的输出。更新完成之后应该可以在 Algolia 上看到你的 Index 多出来你的博客文章数目的记录。

更改主题配置文件，找到 Algolia Search 配置部分：

1
2
3
4
5
6
7
8
9
# Algolia Search
algolia_search:
  enable: false
  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"

这里会产生一些问题，在这里都记录下来

  • npm install --save hexo-algolia 需要更新成为 npm install hexo-algolia@0.2.0 并在站点文件 package.json 当中修改 "hexo-algolia": "^^0.2.0"
  • 如果之前是选择了试用账户的，那么必须登陆到 Algolia 选择一个自己的替代 plan，一般选择免费即可，这样才会让 Algolia 为你的站点进行搜索服务

个性配置

网易云音乐播放器

打开 网易云音乐，找到你要插入的歌曲，点击生成外链播放器，进入之后首先进行自己的配置，可以选择 iframe 或者 Flash 嵌入方式，是否自动播放，嵌入播放器大小等。最后复制下方的 HTML 代码，后面需要使用。如下：

我会选择把播放器放到侧边栏当中，所以需要修改对应位置的代码，如果你希望放在其他地方可以自行选择位置。打开 /next/layout/_macro/sidebar.swig 文件，由于我们是希望放在所有内容下面，故在 site-overview 的 section 最后插入刚刚复制的那一段 HTML 代码：

1
2
3
4
<section>
  ...
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=588609&auto=0&height=66"></iframe>
</section>

更改标题样式

更改所有样式都是修改你的 css 布局，这里就以标题为例，来说一下怎么在主题中修改 css 的布局与样式来达到我们需要的效果。首先打开博客，选取你需要修改的部分，最好使用 chrome 浏览器，如果对网页结构与布局比较熟悉的应该可以很轻易地找到标题对应的 css 样式，打开谷歌开发者工具，点击标题，可以看到右边的 style 当中会有 css 代码：

1
2
3
4
5
.site-meta .site-title {
    font-size: 28px;
    font-family: 'Comic Sans MS', sans-serif;
    color: #000;
}

看到类名为 site-meta 定位到 /next/source/css/_common/components/header ，不同的修改部位需要找到不同的 style 文件，文件 site-meta.styl 中直接添加或者修改对应的 css 代码就可以了。

具体的修改你可以在 chrome 的开发者工具当中直接更改其中的属性，比如颜色，比如背景等，当时就可以看到修改效果，将代码复制出来，粘贴到对应的地方就可以了，修改的时候尽量注意不要动原配置，尽可能通过重复设置来覆盖原文件代码。

结语

这一次更新对自己的博客修改也算是比较满意了，未来一定会添加更多的元素在博客当中，目前的想法是希望增加一张封面，希望可以拥有自己的域名，然后其他的话目前来说还是比较喜欢 Next 的简约风格的，我也不太想修改掉这种风格，如果能够一直兼容的话未来也不会动作很大。

有任何疑问都可以在评论区与我沟通，祝各位早日拥有自己喜欢的博客。