Hexo-NexT (v7.7.2) 主题配置

版本信息：Hexo-4.2、NexT-7.7.2（注意：文中提到的“主题的配置文件_config.yml”，在\hexo\source_data\next.yml里修改）

1. 获取 NexT

1.1. 下载最新 release 版本

通常情况下请选择 stable 版本。推荐不熟悉的用户按此方式进行。

这种方式将仅提供最新的 release 版本（其中不附带 .git 目录）。因此，你无法通过 git 更新这一方式安装的主题。

更新：推荐使用独立的配置文件（数据文件）而不在主题源代码进行更改，便于后续的更新（下载最新版本，替换掉旧版本）。

2. 站点配置

2.1. 设置 hexo 的 next 主题

我们在站点的配置文件_config.yml中找到 theme 后修改：theme: next # 配置成刚下载的next主题

2.2. 配置 hexo 网站相关信息

# Site

title: # 网站标题

subtitle: # 网站副标题

description: # 描述，介绍网站的

keywords: # 网站的关键字

author: # 博主姓名

language: zh-CN # 语言：zh-CN 是简体中文

timezone: UTC # 时区

2.3. 设置 hexo 永久链接

地址：hexo-abbrlink安装插件：npm install hexo-abbrlink --save然后我们可以在站点配置文件_config.yml 中修改为：

url: https://bore.vip/

root: /

permalink: archives/:abbrlink.html

abbrlink:

alg: crc32 # 算法：crc16(default) and crc32

rep: hex # 进制：dec(default) and hex

permalink_defaults:

2.4. nofollow 标签的使用

减少出站链接能够有效防止权重分散，hexo 有很方便的自动为出站链接添加 nofollow 标签的插件。首先安装 hexo-filter-nofollow 插件：npm install hexo-filter-nofollow --save然后我们在站点的配置文件_config.yml 中添加配置，将 nofollow 设置为 true：

# 外部链接优化

nofollow:

enable: true

field: site

exclude:

- 'exclude1.com'

- 'exclude2.com'

其中 exclude（例外的链接，比如友链）将不会被加上 nofollow 属性。

2.5. 站点地图 sitemap 生成

npm install hexo-generator-sitemap --save然后我们需要在 Hexo 站点配置文件中加入 sitemap 插件：

# 通用站点地图

sitemap:

path: sitemap.xml

2.6. 修改网站的图标 Favicon

把图标放在 /themes/next/source/images 里，并且修改主题配置文件（next.yml）：

favicon:

small: /images/favicon-16x16-next.png

medium: /images/favicon-32x32-next.png

apple_touch_icon: /images/favicon-32x32-next.png

safari_pinned_tab: /images/favicon-32x32-next.png

#android_manifest: /images/manifest.json

#ms_browserconfig: /images/browserconfig.xml

3. 主题配置

3.1 准备工作，配置文件分离

Next主题在7.3之后分离了配置文件与主题，详情请见小丁的个人博客

新建文件夹hexo/source/_data

将./themes/next/_config.yml复制到hexo/source/_data路径下并重命名为next.yml

将next.yml中的override设置为true即可作为主题的配置文件使用

override: true

在hexo/source/_data中新建body-end.swig和styles.styl文件

然后在next.yml的custom_file_path中删除前面的#来启用bodyEnd和style

custom_file_path中的其他选项根据需要创建相关文件并启用

3.2. 指定next-Gemini模板

主题配置文件（next.yml），关键字：Schemes,修改

#scheme: Muse

#scheme: Mist

#scheme: Pisces #打开前面的注释

scheme: Gemini

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白

Mist - Muse 的紧凑版本，整洁有序的单栏外观

Pisces - 双栏 Scheme，小家碧玉似的清新

Gemini - 左侧网站信息及目录，块+片段结构布局

3.3. 配置 hexo 中的 about、tag、categories、sitemap 菜单

默认的主题配置文件_config.yml（next.yml）中，菜单只开启了首页和归档，我们根据需要，可以添加 about、tag、categories、sitemap 等菜单，所以把它们也取消注释。

# 菜单设置为菜单名: /菜单目录 || 菜单图标名字

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

menu_settings:

icons: true # 显示图标

badges: true # 显示统计信息

注：hexo 所有图标均来自 fontawesome，其中 || 后面是你想要设置的图标的名字。菜单项的中文文本翻译见菜单中文翻译

3.4. 手动生成 hexo 菜单对应文件

3.4.1. 新建 about 页面

我们可以在博客根目录下输入以下命令新建页面：hexo new page about然后你会发现多了一个 hexo/source/about 文件夹，里面有一个 index.md 文件，你可以根据自己的需要在这个 Markdown 文件中写一些内容（同文章一样，用 Markdown 语法）。

3.4.2. 新建一个 tags 页面

同样的，我们可以新建 tags 页面：hexo new page tags在 tags 页面文件 hexo/source/tags/index.md 的头部修改为：

---

title: 标签

date: 2020-04-26 00:13:30 # 时间随意

type: "tags" # 类型一定要为tags

comments: false # 提示这个页面不需要加载评论

---

3.4.3 新建一个 categories 页面

同样的，我们可以新建 categories 页面：hexo new page categories在 categories 页面文件 hexo/source/categories/index.md 的头部修改为：

---

title: 文章分类

date: 2020-04-26 00:15:00

type: "categories"

comments: false

---

3.4.4. 新建一个 404 页面

这里我们将 404 替换成腾讯的公益页面。首先我们在 hexo/source 目录下创建自己的 404.html：

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

注意：Hexo 博客的基本内容是一些 Markdown 文件，放在 source/_post 文件夹下，每个文件对应一篇文章。除此之外，放在 source 文件夹下的所有开头不是下划线的文件，在 hexo generate 的时候，都会被拷贝到 public 文件夹下。但是，Hexo 默认会渲染所有的 HTML 和 Markdown 文件。

因此我们可以简单地在文件开头加上 layout: false 一行来避免渲染：

layout: false

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

这样我们就完成了 404 页面的创建。注意：本地测试不出来，发布出来就### 配置 hexo 本地搜索可以了。

3.5. 配置 hexo 本地搜索

3.5.1. 本地搜索的原理

对于动态网站来说，可以通过 php 实现。但是，Hexo 博客是静态网站，用不了 php。NexT 主题已经实现这个功能，它用了 Hexo 的拓展包 hexo-generator-searchdb，预先生成了一个文本库 search.xml，然后传到了网站里面。在本地搜索的时候，NexT 直接用 javascript 调用了这个文件，从而实现了静态网站的本地搜索。

3.5.2. 设置过程

安装插件:npm install hexo-generator-searchdb --save然后我们修改站点配置_config.yml 文件，添加如下内容：

# 本地搜索

search:

path: search.xml

field: post

format: html

limit: 100

path：索引文件的路径，相对于站点根目录field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面limit：限制搜索的条目数然后修改主题配置文件_config.yml（next.yml）：

# Local Search

# Dependencies: https://github.com/theme-next/hexo-generator-searchdb

local_search:

enable: true

# If auto, trigger search by changing input.

# If manual, trigger search by pressing enter key or search button.

trigger: auto

# Show top n results per article, show all results by setting to -1

top_n_per_article: 1

# Unescape html strings to the readable one.

unescape: false

# Preload the search data when the page loads.

preload: false

3.6. valine 评论

3.6.1. 获取 APP id 和 APP key

注意右上角选择国际版。

你可以点击 LeanCloud ，注册登录，进入控制台后点击创建应用。

进入刚刚创建的应用，选择设置》应用Keys，就能看到你的 APP ID 和 APP Key

3.6.2. 修改主题配置文件

注意guest_info这一栏，删除link，评论框就没有网址选项。

# Valine

# You can get your appid and appkey from https://leancloud.cn

# For more information: https://valine.js.org, https://github.com/xCss/Valine

# 配置项详情请查阅官方文档。

valine:

enable: true # 开启评论功能

appid: # 填入刚刚获取的APP ID

appkey: # 填入刚刚获取的APP key

notify: false # 邮件通知默认关闭

verify: false # 验证码默认关闭

placeholder: 在这里写下你的评论吧！ # 评论框默认文字

avatar: mm # 头像风格

guest_info: nick,mail #,link # Custom comment header

pageSize: 10 # Pagination size

language: # Language, available values: en, zh-cn

visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

comment_count: false # If false, comment count will only be displayed in post page, not in home page

recordIP: false # 是否记录IP

serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)

#post_meta_order: 0

3.6.3. valine评论标题改中文中文

打开themes -> next -> languages -> zh-CN.yml

# 在post标签下添加如下代码

comments:

valine: 评论数 # 这里的中文随便自己定义

3.7. 设置 hexo 中的 rss 订阅

没人用，不推荐

3.8. 配置 hexo 主题next.yml的 footer 信息

底部 footer 可以开关显示 hexo 信息、theme 信息、建站时间等个性化配置：

footer:

since: 2020 # 建站开始时间

icon:

name: user # 设置建站初始时间和至今时间中间的图标，默认是一个'小人像'，更改user为heart可以变成一个心

animated: true

color: "#808080" # 更改图标的颜色，红色为'#ff0000'

powered:

enable: true # 开启hexo驱动

version: true # 开启hexo版本号

theme:

enable: true # 开启主题驱动

version: true # 开启主题版本号

3.9. 头像信息设置 next.yml

avatar:

url: /images/avatar.jpg # 设置头像资源的位置

rounded: true # 开启圆形头像

opacity: 1 # 不透明的比例：0就是完全透明

rotated: false # 不开启旋转

3.10. 社交信息和友链配置

这里和菜单设置格式一样，社交名字: 社交url || 社交图标，图标信息来自 fontawesome：

social:

GitHub: https://github.com/yourname || github

E-Mail: mailto:yourname@gmail.com || envelope

Google: https://plus.google.com/yourname || google

social_icons:

enable: true # 显示社交图标

icons_only: false # 只显示图标，不显示文字

友链配置：

# Blog rolls

links_icon: link # 友链的图标参考上文

links_title: Links # 友链的title 比如你可以更改为友情链接

links_layout: block # 友链摆放的样式：按块（一行一个）

#links_layout: inline # 友链摆放的样式：按线摆放（一行很多个），注意，同时只能一种样式

links:

Title: http://example.com/ # 友链的地址

官方提供的友链放在侧边栏下面，视觉上比较臃肿。这里我新建了一个友链页面：友情链接，设置教程见：Hexo-NexT 新增友链。

3.11. 首页文章不展示全文显示摘要

官方公告：auto_excerpt 可以自动截断文章内容作为摘要。此功能不是一个 Hexo 主题应当负责的，这为主题的维护者带来了太大压力。自 7.6.0 版本开始，此功能被移除，请自行安装第三方插件，或阅读 Hexo 有关文档。当然，我们仍然建议通过 `` 来精确控制 Read More 的位置。

因此，这个功能在新版的 NexT 已经被废弃了，大家可以直接在文章中添加  来精确控制摘要内容。

3.12. 首页文章属性next.yml

post_meta:

item_text: false # 设为true 可以一行显示，文章的所有属性

created_at: true # 显示创建时间

updated_at:

enabled: true # 显示修改的时间

another_day: true # 设true时，如果创建时间和修改时间一样则显示一个时间

categories: true # 显示分类信息

3.13. 页面阅读统计不蒜子统计

busuanzi_count:

enable: false # 设true 开启

total_visitors: true # 总阅读人数（uv数）

total_visitors_icon: user # 阅读总人数的图标

total_views: true # 总阅读次数（pv数）

total_views_icon: eye # 阅读总次数的图标

post_views: true # 开启内容阅读次数

post_views_icon: eye # 内容页阅读数的图标

3.14. 字数统计、阅读时长

首先安装插件：npm install hexo-symbols-count-time --save主题配置文件_config.yml（next.yml）修改如下：

symbols_count_time:

separated_meta: true # false会显示一行

item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字

item_text_total: true # 底部footer是否显示字数统计属性文字

awl: 4 # 计算字数的一个设置,没设置过

wpm: 275 # 一分钟阅读的字数

站点配置文件_config.yml 新增如下：

symbols_count_time:

#文章内是否显示

symbols: true

time: true

# 网页底部是否显示

total_symbols: true

total_time: true

3.15. 内容页里的代码块新增复制按钮

codeblock:

copy_button:

enable: false # 增加复制按钮的开关

show_result: true # 点击复制完后是否显示复制成功结果提示

3.16. Mac风格代码块样式

hexo\source_data\next.yml里修改：

codeblock:

# Code Highlight theme

# See: https://github.com/chriskempson/tomorrow-theme

highlight_theme: normal

# Add copy button on codeblock

copy_button:

enable: true

# Show text copy result.

show_result: true

# Available values: default | flat | mac

style: mac

3.17. 配置微信，支付宝打赏

# Reward

reward_comment: # 打赏描述

wechatpay: /images/wechatpay.png # 微信支付的二维码图片地址

alipay: /images/alipay.png # 支付宝的地址

#bitcoin: /images/bitcoin.png # 比特币地址

3.18. 相关文章推荐

安装推荐文章的插件：npm install hexo-related-popular-posts --save主题配置信息（next.yml）如下:

related_posts:

enable: true

title: 相关文章推荐 # 属性的命名

display_in_home: false # false代表首页不显示

params:

maxCount: 5 # 最多5条

#PPMixingRate: 0.0 # 相关度

#isDate: true # 是否显示日期

#isImage: false # 是否显示配图

isExcerpt: false # 是否显示摘要

3.19. 文章原创申明

creative_commons:

license: by-nc-sa

sidebar: false

post: true # 默认显示版权信息

language:

3.20. 修改文章底部标签的样式

# Use icon instead of the symbol # to indicate the tag at the bottom of the post

# 标签代替#

tag_icon: true

3.21. 显示当前浏览进度next.yml

back2top:

enable: false # 默认关闭

# Back to top in sidebar.

sidebar: true

# Scroll percent label in b2t button.

scrollpercent: true

3.22. 修改 back2top 标签

插件新版本对next7.8支持不好，图标无法显示先卸载新版：npm uninstall hexo-cake-moon-menu --save安装version 2.1.2：npm i hexo-cake-moon-menu@2.1.2然后在站点配置文件`_config.yml 中添加以下代码：

moon_menu:

back2top:

enable: true

icon: fa fa-chevron-up

func: back2top

order: -1

back2bottom:

enable: true

icon: fa fa-chevron-down

func: back2bottom

order: -2

3.23. 菜单栏显示分类 / 标签中的文章数目

scheme选择Gemini

menu_settings:

badges: true # 显示菜单分类的数目

4. 进阶配置

4.1 修改文章默认模板

修改hexo\scaffolds\post.md

title: {{ title }}

date: {{ date }}

categories:

tags:

abbrlink:

top:

4.2 新增文章时自动打开Markdown编辑器

首先在 hexo/scripts 下新建一个 newpost.js 文件，如果没有 scripts 文件可以手动创建一个。

在这个文件写入如下代码：

var spawn = require('child_process').exec;

hexo.on('new', function(data){

spawn('start "markdown编辑器绝对路径.exe" ' + data.path);

});

注意里面要修改的是 Markdown 编辑器的绝对路径，我使用的是 Typora ，所以我的绝对路径是 D:\Program Files\Typora\Typora.exe ，大家可以对应进行修改。

4.3 Pjax插件

Pjax是基于Ajax的插件，能实现网页局部无刷新载入，听起来很香，然而存在一些小问题：

使用Mediumzoom时，从归档进入博文不会加载图片，需要刷新网页才能加载

Echarts图表全部需要刷新才能显示，否则只有一片空白

安装Pjax，地址： next-theme /pjax ，运行以下代码安装：

git clone https://github.com/next-theme/pjax source/lib/pjax

然后在next.yml中搜索pjax并设置为pjax: true

如果部署是报错:

ERROR Process failed: lib/pjax/README.md

YAMLException: end of the stream or a document separator is expected at line 9, column 102:

... languages` and other directories:

解决方法：安装完pjax插件后，部署时报错

在 Hexo 的 _config.yml 中找到名为 skip_render 的选项，然后设置为这样:

skip_render:

- lib/**/*

4.4 加载进度条

显示当前网页的加载进度,安装：git clone https://github.com/theme-next/theme-next-pace source/lib/pace在next.yml中搜索Progress bar in the top during page loading并设置为

pace:

enable: true

4.5. 背景图片

将背景图片放置在./hexo/themes/next/source/images中并命名为background.jpg然后在./hexo/source/_data/styles.styl中添加

body {

background:url(/images/background.jpg);//图片路径

background-repeat: no-repeat;//是否重复平铺

background-attachment: fixed;//是否随着网页上下滚动而滚动，fixed为固定

background-position: 50% 50%;//图片位置

background-size: cover;//图片展示大小

-webkit-background-size: cover;

-o-background-size: cover;

-moz-background-size: cover;

-ms-background-size: cover;

opacity: 0.9;

footer > div > div {

color:#000000;//底部文字颜色

}

4.6 首页文章阴影边框

找到三种方法，在next7.7.2中都不起效。

4.6.1 scheme选择Gemini

# Schemes

#scheme: Muse

#scheme: Mist

#scheme: Pisces

scheme: Gemini

4.6.2 在styles.styl里添加代码

方法一只有首页第一篇文章有阴影效果，其他两种方法都没有效果。（不折腾了）

.content-wrap {

background: initial;

}

.post-block {

box-shadow: 0 2px 6px 0 rgb(0,0,0,0.6), 0 0 6px 0 rgb(0,0,0,0.6)

background: #FFF

}

// 主页文章添加阴影效果

.post_block {

opacity: 0;

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

}

// 主页文章添加阴影效果

.post {

margin-top: 0px;

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

}

4.7. 自定义单行代码颜色

在./hexo/source/_data/styles.styl中添加

code {

color: #ff511A;

//background: #fbf7f8;

margin: 2px;

}

4.8. 菜单中文翻译

我们原来是通过配置主题下的 languages 目录中的 zh-CN.yml 文件来对菜单等进行中文翻译的，现在我们可以通过在 hexo/source/_data/ 下新建数据文件 languages.yml，配置如下：

zh-CN:

menu:

home: 首页

top: 热榜

archives: 归档

categories: 分类

tags: 标签

about: 关于

links: 友情链接

search: 搜索

schedule: 日程表

sitemap: 站点地图

commonweal: 公益 404

movies: 观影

books: 阅读

gallery: 画廊

reward:

donate: <i class="fa fa-qrcode fa-2x" style="line-height:35px;"></i>

wechatpay: 微信支付

alipay: 支付宝

bitcoin: 比特币

4.9. 文章末尾添加本文结束分割线

新建 source/_data/post-body-end.swig 文件，添加内容：

<div>

{% if not is_index %}

<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

{% endif %}

</div>

在next.yml中，去掉注释postBodyEnd: source/_data/post-body-end.swig

4.10. 圆角设置、中文字体设置

4.10.1. 圆角设置

在自定义样式文件 hexo\source\_data\variables.styl 中添加：

// 圆角设置

$border-radius-inner = 20px 20px 20px 20px;

$border-radius = 20px;

然后在 NexT 的配置文件 next.yml 中取消 variables.styl 的注释：variable: source/_data/variables.styl在这里会有一个bug，左下角始终会有个白块。解决方法:你只需要在 source\_data\styles.styl 文件中添加一行代码即可：:root{--body-bg-color: hsla(0,0%,100%,0)}或者添加下列代码：

.sidebar {

box-shadow: none

background: none

}

4.10.2. 中文字体设置

首先修改主题配置文件 next.yml：

font:

enable: true

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).

host: https://fonts.loli.net

# Font options:

# `external: true` will load this font family from `host` above.

# `family: Times New Roman`. Without any quotes.

# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.

global:

external: true

family: Lato

size:

# Font settings for site title (.site-title).

title:

external: true

family:

size:

# Font settings for headlines (<h1> to <h6>).

headings:

external: true

family: Noto Serif SC

size:

修改配置文件 \hexo\source_data\variables.styl，增加如下代码：

// 中文字体

$font-family-monospace = consolas, Menlo, monospace, $font-family-base;

$font-family-monospace = get_font_family('codes'), consolas, Menlo, monospace, $font-family-base if get_font_family('codes');

4.11. 鼠标点击特效、打字特效、友链等

4.11.1. 打字特效、鼠标点击特效

之前版本：Hexo-NexT 添加打字特效、鼠标点击特效中，以下代码是放在 hexo/next/_layout/_custom/custom.swig 文件中的，现在这部分代码需要放到 hexo/source/_data/body-end.swig 文件中：

{# 鼠标点击特效 #}

{% if theme.cursor_effect == "fireworks" %}

{% elseif theme.cursor_effect == "explosion" %}

{% elseif theme.cursor_effect == "love" %}

{% elseif theme.cursor_effect == "text" %}

{% endif %}

{# 打字特效 #}

{% if theme.typing_effect %}

POWERMODE.colorful = {{ theme.typing_effect.colorful }};

POWERMODE.shake = {{ theme.typing_effect.shake }};

document.body.addEventListener('input', POWERMODE);

</script>

{% endif %}

然后在 NexT 的配置文件 next.yml 中取消 body-end.swig 的注释：bodyEnd: source/_data/body-end.swig然后我们在 next.yml 中增加如下配置项：

# 鼠标点击特效

# mouse click effect: fireworks | explosion | love | text

cursor_effect: fireworks

# 打字特效

# typing effect

typing_effect:

colorful: true # 礼花特效

shake: false # 震动特效

注意：上面所有特效的 JS 代码文件都放在站点的 source 目录下（即 hexo/source/js/）而不是主题目录下，如果没有 js 目录，则新建一个。

4.11.2 友链添加

详见：Hexo-NexT 新增友链从第一种友链方式改用第二种友链方式，因为第二种瀑布流友链样式是不用修改 NexT 主题源文件的。

411.3. 代码块折叠

参考：代码块折叠

4.12. 近期文章、粒子时钟特效

4.12.1. 近期文章

现在我们把上面的代码放到 hexo/source/_data/sidebar.swig 文件中，并且做以下更改：

{% if theme.recent_posts %}

</div>

- {% set posts = site.posts.sort('-date') %}

+ {% set posts = site.posts.sort('-date').toArray() %}

{% for post in posts.slice('0', '5') %}

<li>

<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>

</li>

{% endfor %}

</ul>

</div>

{% endif %}

这是因为 NexT 已经更换 Nunjucks 作为模板引擎。

然后在 NexT 的配置文件 next.yml 中取消 sidebar.swig 的注释：sidebar: source/_data/sidebar.swig最后，为了配置方便，在主题的next.yml 中添加了几个变量，如下：

recent_posts_title: 近期文章

recent_posts_layout: block

recent_posts: true

4.12.2. 粒子时钟特效

现在我们只需要把粒子时钟的 js 代码直接放入到 hexo/source/_data/sidebar.swig 文件即可。详情见：Hexo-NexT 增加 canvas 粒子时钟

4.13. 置顶文章标志

首先我们需要安装 hexo-generator-index-pin-top 这个插件，

npm uninstall hexo-generator-index --save

npm install hexo-generator-index-pin-top --save

然后将以下代码放入 hexo/source/_data/post-meta.swig 文件

{% if post.top %}

{% endif %}

然后在 NexT 的配置文件 next.yml 中取消 post-meta.swig 的注释：post-meta: source/_data/post-meta.swig使用方法：在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字，比如：

---

title: TMDb电影数据分析

declare: true

toc: true

tags:

- Python

- 数据分析

categories:

- 数据分析

- 实战

abbrlink: 7e380af2

date: 2018-11-23 13:20:03

top: 100

---

注意：top 中数字越大，文章越靠前。

4.14. 静态资源压缩插件

安装插件：npm install hexo-neat --save然后我们需要在站点配置文件中添加以下代码：

# 博文压缩

neat_enable: true

# 压缩html

neat_html:

enable: true

exclude:

# 压缩css

neat_css:

enable: true

exclude:

- '**/*.min.css'

# 压缩js

neat_js:

enable: false

mangle: true

output:

compress:

exclude:

- '**/*.min.js'

- '**/jquery.fancybox.pack.js'

- '**/index.js'

- '**/fireworks.js'

4.15. 首页改归档页

把 layout/archive.swig 改为 layout/index.swig 就行了。不过注意此时首页的 meta 信息是 archive （归档）……要做个清爽合格的首页，可以把原 index.swig 的 meta 信息拷贝到新 index.swig 下。

// new index.swig (archive.swig)

- {% block title %}{{ __('title.archive') }} | {{ title }}{% endblock %}

+ {% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}

4.16. 修改首页、归档页显示文章数量

站点配置文件_config.yml里修改：

index_generator:

path: ''

per_page: 10

order_by: -date

# Pagination

## Set per_page to 0 to disable pagination

per_page: 10

pagination_dir: page

4.17. 关闭文章目录自动数字编号

关闭文章目录自动数字编号后，可以自定义目录数字编号。

在hexo\source_data\next.yml里修改：

toc:

enable: true

# Automatically add list number to toc.

number: false

# If true, all words will placed on next lines if header width longer then sidebar width.

wrap: false

# If true, all level of TOC in a post will be displayed, rather than the activated part of it.

expand_all: false

# Maximum heading depth of generated toc.

max_depth: 6

4.18 自动部署脚本

在根目录新建deploy.sh，输入以下内容：

#!/bin/bash

echo -e "\033[0;32mDeploying updates to gitee...\033[0m"

hexo clean

hexo g -d

有时候可能需要多次运行脚本才能提交成功，这时不妨手动输入命令。

5. V8.0 更新内容

5.1 重要更新

图标库升级为 Font-Awesome 5 (theme-next/hexo-theme-next#1438)

模板格式从 swig 更改为 njk

菜单设置变更 (a527bfd)

-override: false

menu:

- home: / || fa fa-home

+ #home: / || fa fa-home

#about: /about/ || fa fa-user

#tags: /tags/ || fa fa-tags

#categories: /categories/ || fa fa-th

- archives: /archives/ || fa fa-archive

+ #archives: /archives/ || fa fa-archive

#schedule: /schedule/ || fa fa-calendar

#sitemap: /sitemap.xml || fa fa-sitemap

#commonweal: /404/ || fa fa-heartbeat

Valine 选项更新 (6e6fc74)

valine:

- appid: # Your leancloud application appid

- appkey: # Your leancloud application appkey

+ appId: # Your leancloud application appid

+ appKey: # Your leancloud application appkey

...

- guest_info: nick,mail,link # Custom comment header

+ meta: # Custom comment header

+ - nick

+ - mail

+ - link

支持 highlight.js (9fdaba2)

允许更多的代码高亮格式 (03e50d0)

codeblock:

...

- # See: https://github.com/chriskempson/tomorrow-theme

- highlight_theme: normal

+ # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles

+ theme:

+ light: default

+ dark: dark

5.2 配置

5.2.1. 代码高亮

codeblock:

theme:

light: agate

dark: dark

# Add copy button on codeblock

copy_button:

enable: true

# Show text copy result.

show_result: true

# Available values: default | flat | mac

style: mac

你可以在这里预览代码高亮的效果：highlightjs 选择你喜欢的 style 即可。

5..2. 更换模板

custom_file_path:

#head: source/_data/head.njk

#header: source/_data/header.njk

#sidebar: source/_data/sidebar.njk

postMeta: source/_data/post-meta.njk

postBodyEnd: source/_data/post-body-end.njk

footer: source/_data/footer.njk

bodyEnd: source/_data/body-end.njk

variable: source/_data/variables.styl

#mixin: source/_data/mixins.styl

style: source/_data/styles.styl

同时将原 _data 目录下的 swig 文件后缀改为 njk 即可

6. 参考链接

1.Hexo-NexT (v7.0+) 主题配置

2.Hexo-NexT 版本更新记录

3.Next升级+Mac迁移

4.Hexo 框架 (三)：Next 主题配置及美化

5.Hexo博客+Next主题深度优化与定制

6.尝试折腾了下用 Hexo-Next-Theme 搭建的博客

7.NexT 版本更新 V8.0 记录