主题下载安装

进入命令行，下载 NexT 主题，输入：

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

修改站点配置文件_config.yml，找到如下代码：

1
2
## Themes: https://hexo.io/themes/
theme: landscape

将 landscape 修改为 next

切换主题

next 主题自带四种样式。

在主题配置文件/next/_config.yml中查找：scheme，找到如下代码：

1
2
3
4
5
6
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
选择一种样式，去掉前面的 #，其他主题前加上 #

隐藏网页强力驱动

隐藏网页底部 powered By Hexo / 强力驱动
打开 themes/next/layout/_partials/footer.swig

找到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.footer.powered.enable %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}
{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} – {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

把这段代码首尾分别加上：，或者直接删除

浏览进度

浏览页面显示当前浏览进度
打开 themes/next/_config.yml，搜索关键字 scrollpercent,把 false 改为 true

Local Search本地搜索

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

1
2
3
npm install hexo-generator-searchdb --save
或者
npm install -g npm@11.3.0

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

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

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

1
2
3
# Local search
local_search:
enable: true

设置网站图标

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

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

修改文章底部标签

修改文章底部的#号的标签，改为图标
修改模板/themes/next/layout/_macro/post.swig

搜索 rel=“tag”>#，将 # 换成<i class="fa fa-tag"></i>

[Read More]按钮样式

修改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
// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

阅读全文设置

修改 阅读全文 前显示文字数量即位置
打开 themes/next/_config.yml,搜索关键字 auto_excerpt， 修改length即可修改阅读全文前显示文字数量

1
2
3
auto_excerpt:
  enable: true
  length: 150

或者在文章中任意位置添加<!-- more -->

建议在文章中加入 <!-- more -->
自定义 [Read More] 按钮之前要显示的内容！

修改链接文字样式

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

1
2
3
4
5
6
7
8
9
.post-body p a{

 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

连接颜色已变为彩色

代码块复制选项

Next6 中自带了复制代码按钮，Next5 需要自己手动配置。

搜索 codeblock，找到如下配置：

1
2
3
4
5
codeblock:
border_radius: 8   # 按钮圆滑度
copy_button:  # 设置是否开启代码块复制按钮
	enable: true
	show_result: true  # 是否显示复制成功信息

修改加载特效

由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条。Next 已经集成了很多加载特效，可以在下面选项中在线调试测试一下。

搜索pace，找到如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 页面顶部加载条
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal  #默认设置，可以修改为上述任何一个