Hi SANNAHA

A Link is a Promise.

0%

为Hexo站点启用NexT主题

发表于 更新于

NexT is a high quality elegant Hexo theme.
It is crafted from scratch, with love.

——NexT 的自述

NexT 主题是在GitHub有着 10k star 的高人气Hexo主题，可方便切换多种方案（Scheme），内置标签分类、代码高亮、载入动画等功能，支持评论系统、站内搜索、数据统计与分析等第三方服务。

本文预计围绕以下几方面展开介绍：

  • 启用 NexT 主题
  • 配置 NexT 主题
  • 启用第三方服务
  • 深度订制样式

参考资料：
NexT 开发文档
hexo 的 next 主题个性化教程:打造炫酷网站
打造个性超赞博客 Hexo + NexT +GithubPages 的超深度优化

Next主题预览

启用NexT主题

在blog\目录下，按住shift键的同时按下鼠标右键，点击在此处打开命令行（win10 为 Powershell），输入：

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

当下载完成后，打开~\blog\根目录里的_config.yml这个站点配置文件，找到theme字段，将其值改为next。

在命令行依次输入下面的命令来验证NexT主题是否配置成功：

1
2
3
hexo clean //清除Hexo的缓存
hexo g //生成静态文件
hexo s //启动本地服务器，默认为"localhost:4000"

此时用浏览器访问 https://localhost:4000 ，就会发现博客界面已如下图所示：

验证NexT

配置NexT主题

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 主题可以方便切换多种不同的方案。

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏方案
  • Pisces - 双栏 Scheme，小家碧玉似的清新

我使用的是 Pisces，打开~\blog\themes\next\里的_config.yml这个主题配置文件，删去 scheme: Pisces 前面的注释#即可启用该 scheme，如下所示：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

设置博客信息

打开站点配置文件，设置博客信息：

1
2
3
4
5
6
7
# Site
title: IKARISHINJI's Blog
subtitle: 广阔天地 大有可为
description: From Lilin to Adam
author:  SHINJI
language: zh-Hans
timezone: Asia/Shanghai

设置菜单

打开主题配置文件，设置启用的菜单：

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

同前面一样，带#的为不启用。

注意，如果点击标签页面出现404错误，说明需要新建 tags 页面：

1
hexo new page tags

编辑 index.md 文件：

blog\source\tags\index.md
1
2
3
4
5
6
---
title: 
date: 2020-02-11 12:06:06
type: tags
comments: false
---

设置侧栏

在博客左边/右边除了菜单外，还有一个侧栏，可以放置头像和其他社交链接，并在阅读文章时会自动显示文章目录。

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标，图标名称是 Font Awesome 提供图标的名字（不必带 fa- 前缀）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//设置社交链接
social:
  Weibo: https://weibo.com/IKAR1SHINJI || weibo
  Twitter: https://twitter.com/lossfour || twitter
  GitHub: https://github.com/IKAR1SHINJI || github
  Bilibili: https://space.bilibili.com/4571850 || play-circle

social_icons:
  enable: true //显示图标
  icons_only: false
  transition: false

//设置友情链接
# Blog rolls
links_title: Play together
#links_layout: block
#links_layout: inline
links:
  IKAR1SHINJI: https://steamcommunity.com/id/3annaha/

设置头像，把头像图片放在~\blog\source\uploads\中（如无此路径自行创建即可），图片命名为avatar.jpg：

1
2
# Sidebar Avatar
avatar: /uploads/avatar.jpg

开启侧栏文章目录，在阅读文章时自动展开：

1
2
3
4
5
# Table Of Contents in the Sidebar
toc:
  enable: true //开启侧栏文章目录，目录由一级、二级标题形成
  number: true //自动为目录编号
  wrap: false //不展示目录中全部文字

设置侧栏位置、返回顶部按钮等：

1
2
3
4
5
6
7
8
sidebar:
  position: left //侧栏位置
  display: post 
  offset: 12
  offset_float: 12
  b2t: true //显示返回顶部按钮
  scrollpercent: true //显示百分比
  onmobile: false //在移动设备上不显示侧边栏

启用第三方插件

评论系统

NexT 支持多款 评论系统 ，但经常被墙难以稳定使用。索性无视复杂的网络问题，选用成熟的 Disqus 供有条件的同学交流使用。

状态：被墙
注册 Disqus ，点击首页的 “GET STARTED”，选择“I want to install Disqus on my site”，设置网站信息，填写“Website Name”获得shortname，安装平台跳过即可。

编辑主题配置文件， 将 disqus 下的 enable 设定为 true，同时提供您的 shortname。count 用于指定是否在标题下面显示评论数量：

1
2
3
4
disqus:
  enable: false
  shortname: your shortname
  count: true

状态：正常
登陆 来必力 获取你的 LiveRe UID。 打开主题配置文件， 编辑 livere_uid 字段，设置如下：

1
livere_uid: your livere_uid

搜索服务

NexT 支持集成 Swiftype、 微搜索、Local Search 和 Algolia 多款 搜索服务 。

状态：免费
前往 Algolia ，注册一个新账户。免费账户 总共有 10,000 条记录，每月有 100,000 的可以操作数。注册完成后，创建一个新的 Index，这个 Index 将在后面使用。

接下来需要安装 Hexo Algolia 扩展， 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录，执行命令安装：

1
npm install --save hexo-algolia

在 Algolia 服务站点上找到需要使用的一些配置的值，包括 ApplicationID、Search-Only API Key、 Admin API Key。注意，Admin API Key 需要保密保存。点击ALL API KEYS 找到新建INDEX对应的key， 编辑权限，在弹出框中找到ACL选择勾选Add records, Delete records, List indices, Delete index权限，点击update更新。

编辑站点配置文件，新增以下配置：

1
2
3
4
algolia:
  applicationID: 'applicationID'
  indexName: 'indexName'
  chunkSize: 5000
替换除了 `chunkSize` 以外的其他字段为在 Algolia 获取到的值。 当配置完成，在站点根目录下执行以下命令来更新 Index。 
1
2
3
//windows 下替换 export 为 set，使用 powershell 可能导致失败
export HEXO_ALGOLIA_INDEXING_KEY=Search-Only API key
hexo algolia

更改主题配置文件，找到 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"

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

状态：收费
$79 一个月，老老实实用 Algolia 不好吗？

添加百度/谷歌/本地 自定义站点内容搜索
安装hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
npm install hexo-generator-searchdb --save

编辑站点配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

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

1
2
3
# Local search
local_search:
  enable: true

文章阅读次数统计

注册 LeanCloud 帐号，创建计数应用，拿到AppID以及AppKey这两个参数即可正常使用文章阅读量统计的功能了。

详见 配置 LeanCloud

音乐播放器

[*Aplayer* ](https://github.com/MoePlayer/APlayer)

Aplayer-Hexo 插件

Aplayer + Meting

视频播放器

Dplayer

Dplayer 有个网页全屏播放的 BUG，在 下面 介绍如何修复。

订制样式

该部分主要对网页的外观进行修改，较为繁琐。

进度条

打开主题配置文件，找到并启用进度条Progress bar：

1
2
3
# Progress bar in the top during page loading.
pace: true
pace_theme: pace-theme-minimal

打开~\blog\themes\next\layout\_partials\head.swig 文件，修改进度条的颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="{{ pace_css_uri }}" rel="stylesheet">
//找到上面这段代码，在后面添加style
<style>
   .pace .pace-progress {
       background: #ab0328; /*进度条颜色*/
       height: 3px;
   }
   .pace .pace-progress-inner {
        box-shadow: 0 0 10px #ab0328, 0 0 5px #ab0328; /*阴影颜色*/
   }
   .pace .pace-activity {
       border-top-color: #ab0328; /*上边框颜色*/
       border-left-color: #ab0328; /*左边框颜色*/
   }
</style>

打开~\blog\themes\next\source\css\_custom\custom.styl（如无则自行创建），添加线性渐变色带作为进度条的背景：

1
2
3
4
5
// 页面最顶部的横线
.headband {
    height: 3px;
    background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
}

同样的，通过修改~\blog\themes\next\source\css\_custom\custom.styl文件，添加自定义LOGO：

1
2
3
4
5
6
7
8
// 站点LOGO
.site-meta{
    background: url("LOGO.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; 
    background-color: rgba(0, 0, 0, 1);
}

Dplayer

在 Pisces 方案中使用 Dplayer 作为视频播放器会有一个网页全屏播放的BUG，可以通过在~\blog\themes\next\source\css\_custom\custom.styl文件中添加以下内容来修复这个BUG：

1
2
3
4
// 修视频播放器Dplayer网页全屏的bug
.use-motion .post-body {
    transform: inherit !important;
}

文章宽度

NexT 主题的 Pisces 方案，文章部分较窄，对文字和高分辨率图片显示不够友好，需要修改宽度。

打开~\blog\themes\next\source\css\_variables\custom.styl，修改如下：

1
2
3
4
5
// 修改成你期望的宽度
$content-desktop = 800px
$main-desktop = 1055px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 1000px

加载评论

在 Disqus 评论系统被墙的情况下，在文章底部设置加载评论的按钮，这样既保留评论功能，又不影响墙内访客打开页面的速度。
打开~\blog\themes\next\layout\_partials\comments.swig，添加加载评论按钮：

1
2
3
4
<div style="text-align:center;">
  <button class="disbtn" id="load-disqus" onclick="disqus.load();">Load Disqus comments</button>
</div>
//添加在<div id="disqus_thread">之前

打开~\blog\themes\next\layout\_third-party\comments\disqus.swig，修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if page.comments %}
  <script type="text/javascript">
    var disqus = {
      load : function disqus(){
        var disqus_config = function () {
          this.page.url = '{{ page.permalink }}';
 this.page.identifier = '{{ page.path }}';
 this.page.title = '{{ page.title| addslashes }}';
  };
var d = document, s = d.createElement('script');
s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
$('#load-disqus').remove();
   }
   }
  </script>
{% endif %}

打开~\blog\themes\next\source\css\_custom\custom.styl文件，添加按钮样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//评论加载按钮
.disbtn {
    display: inline-block;
    padding: 0 20px;
    font-size: 14px;
    color: #222;
    background: #fff;
    border: 2px solid #222;
    text-decoration: none;
    border-radius: 0;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    line-height: 2;
}

.disbtn:hover {
 border-color: #222;
  color: #fff;
  background: #222;
}

SEO

生成站点地图：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在 public 目录下会生成 sitemap.xml 文件。

参考资料：
NexT 开发文档
hexo 的 next 主题个性化教程:打造炫酷网站
打造个性超赞博客 Hexo + NexT + GithubPages 的超深度优化