NexT 是 Hexo 框架中最为流行的主题之一。精于心，简于形。
NexT 支持多种常见第三方服务，使用 第三方服务 来扩展站点的功能 。
除了 Markdown 支持的语法之外，NexT 借助 Hexo 提供的 tag 插件 ， 为您提供在书写文档时快速插入带特殊样式的内容。
安装主题
-
克隆NexT 主题
-
克隆最新版本
定位到 Hexo 站点目录下，将NexT主题文件克隆或者拷贝到hexo/theme目录下即可。
cd your-hexo-sit
git clone https://github.com/iissnan/hexo-theme-next themes/next
-
克隆稳定版本
定位到 Hexo 站点目录下，将NexT主题文件克隆或者拷贝到hexo/theme目录下即可。本博客就是克隆的这个版本。
cd your-hexo-sit
git clone https://github.com/theme-next/hexo-theme-next themes/next
-
启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开站点配置文件， 找到 theme 字段，并将其值更改为 next
theme: next
主题核心配置
核心配置可完全参考NexT官网中文文档
包括：选择Scheme、设置语言、设置菜单、设置头像、设置侧栏、添加「标签」页面、添加「分类」页面、设置字体、设置代码高亮主题、侧边栏社交链接、开启打赏功能、友情链接、腾讯公益404页面、数据统计与分析、搜索服务、分享服务等。
主题配置文件 username.github.io\themes\next\_config.yml
分为若干块，每块都附带官方说明文件网址，可以用谷歌浏览器打开，开启翻译，即可轻松配置。
目前主流的组件基本已被装进 NexT主题，只需修改主题配置文件参数即可，网上的若干优化教程估计已非必要。
NexT 7 自定义样式支持已与主题核心组件分离，如博客背景、文本结束标记等。这样用户可放心升级主题而不会破坏自定义配置。在路径 source/_data 下添加自定义文件，并在主题配置文件 custom_file_path 取消注释。
另，tag 插件也是NexT的一大亮点，会单独开一篇文章具体介绍，请参考 NexT tag 插件
本人博客：由 Hexo 强力驱动 v3.9.0 |主题 – NexT.Gemini v7.4.0
Next 主题更新日志
主题优化
RSS支持
RSS(Really Simple Syndication)称为简易信息聚合，是一种描述和同步网站内容的格式。RSS搭建了信息迅速传播的一个技术平台，使得每个人都成为潜在的信息提供者。发布一个RSS文件后，这个RSS Feed中包含的信息就能直接被其他站点调用，而且由于这些数据都是标准的XML格式，所以也能在其他的终端和服务中使用，是一种描述和同步网站内容的格式。
NexT 中 RSS 有三个设置选项，满足特定的使用场景。 更改主题配置文件，设定 rss 字段的值。
-
rss: false
禁用 RSS，不在页面上显示 RSS 连接。
-
rss: #留空
留空：使用 Hexo 生成的 Feed 链接，需先安装 hexo-generator-feed 插件
-
安装 hexo-generator-feed 插件
npm install hexo-generator-feed --save
-
在站点配置文件 _config.yml 修改/添加
feed:
type: atom
path: atom.xml
limit: 20 # Feed中的最大帖子数(使用0或false显示所有帖子)
-
rss: /atom.xml
具体的URL：适用于已经烧制过 Feed 的情形。
-
安装 hexo-generator-feed 插件
npm install hexo-generator-feed --save
-
在站点配置文件 _config.yml 修改/添加
feed:
type: atom
path: atom.xml
limit: 20 # Feed中的最大帖子数(使用0或false显示所有帖子)
Creative Commons
NexT支持显示Creative Commons 4.0国际许可证。这些许可证允许创作者声明保留的权利和放弃的权利。
修改主题配置文件
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: deed.zh
阅读进度和书签
NexT支持页面滚动阅读进度指示器。
修改主题配置文件
reading_progress:
enable: true
color: "#37c6c0"
height: 2px
Bookmark是一个插件，允许用户保存他们的阅读进度。用户只需单击页面左上角的书签图标即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的最后滚动位置。
在主题配置文件启用
bookmark:
enable: true
color: "#222" # 自定义书签颜色
save: auto # auto | manual 自动保存进度或点击保存进度
网站图标(favicon)
默认情况下，Hexo站点在hexo-site/themes/next/source/images/目录中使用 NexT favicons 。
可以自己下载图标，放在hexo-site/source/images/目录中，修改主题配置文件。
图标网站 easyicon
favicon：
small：/ images/ favicon-16x16-next.png
medium： /images/favicon-32x32-next.png
apple_touch_icon： /images/apple-touch-icon-next.png
safari_pinned_tab： /images/logo.svg
android_manifest： /images/manifest.json
ms_browserconfig： /images/browserconfig.xml
SEO支持
SEO(Search Engine Optimization)意为搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
# SEO
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
- 启用百度推送功能，博客会自动将网址推送到百度，这对搜索引擎优化非常有帮助。
主题配置文件修改 baidu_push: true
字数统计和阅读时长
-
导入插件
npm install hexo-symbols-count-time --save
-
站点配置文件
symbols_count_time:
symbols: true # 是否启用
time: true # 估计阅读时间
total_symbols: true # 页脚部分中所有帖子字数
total_time: true # 页脚部分中所有帖子的估计阅读时间
exclude_codeblock: false
-
主题配置文件
symbols_count_time:
separated_meta: true # 以分隔线显示单词计数和估计读取时间
item_text_post: true # 显示单词计数和估计阅读时间的文本描述
item_text_total: false # 在页脚部分显示单词计数和估计阅读时间的文本描述
awl: 4 # 平均字长
wpm: 275 # 每分钟的平均单词数
suffix: mins.
文章热度
-
配置 leancloud 官方使用文档
-
修复NexT的leancloud计数器的安全插件
-
导入插件
npm install hexo-leancloud-counter-security --save
-
站点配置文件添加
leancloud_counter_security:
enable_sync: true
app_id: <<your app id>>
app_key: <<your app key>>
username: <<your username>> # 部署时会询问是否留空
password: <<your password>> # 建议留空。部署时会询问是否留空
-
主题配置文件修改
leancloud_visitors:
enable: true
app_id: <<your app id>>
app_key: <<your app key>>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
security: true
betterPerformance: false
- 控制台命令：在Leancloud数据库中注册用户以进行权限控制
hexo lc-counter register <<username>> <<password>>
相关热门帖子
请参考官方文档
背景动画
NexT 支持多种背景动画，导入插件并修改对应主题配置文件即可
加载栏: pace
3D库: three
流动线条: canvas_nest
彩带: canvas_ribbon
第三方服务
静态网站在某些功能上受到限制，因此我们需要第三方服务来扩展我们的网站。
您可以随时使用NexT支持的第三方服务扩展所需的功能。
数学公式
NexT提供了两个用于显示数学公式的渲染引擎。
-
启用数学公式
math:
enable: true
per_page: true
per_page: true 默认只渲染 Front-matter 标记 mathjax: true 的文档
per_page: false 每一页都会导入 mathjax / katex 脚本
-
选择渲染引擎
目前，NexT提供了两个渲染引擎：MathJax和KaTeX。
math
- 需要卸载原始渲染器
hexo-renderer-marked 并选择渲染器之一安装：
npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save ＃ or hexo-renderer-pandoc
mathjax：
enable：true
katex
- 需要卸载原始渲染器
hexo-renderer-marked 并选择渲染器之一安装：
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save ＃ or hexo-renderer-markdown-it
katex:
enable：true
Note: 渲染器插件只能选择其一，否则不能正常显示。
评论系统
NexT 支持多款评论系统。
如需取消某个 页面/文章 的评论，在 md 文件的 front-matter 中增加 comments: false
-
gitalk: 是一个基于Github Issue和Preact的现代评论组件。
- 单击此处注册新的OAuth应用程序。
其他内容可以随意填写，但请务必填写正确的回调URL（通常是与评论页面对应的域名）。
然后，您将获得 Client ID和Client secret。
- 创建一个您想要在GitHub中存储Gitalk 评论的存储库。
- 修改主题配置文件
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
enable: true
github_id: # Github username
repo: # Gitalk 评论的存储库
client_id: # Client ID
client_secret: # Client Secret
admin_user: # 所有者和合作者
distraction_free_mode: true # Facebook-like distraction free mode
language: zh-CN
-
Valine (China): 是一种快速，简单和高效的Leancloud，不依赖后端评论系统。官方使用文档
-
多评论系统支持: NexT允许您同时启用多个评论系统。官方使用文档
聊天服务
请参考官方文档
自定义样式支持
NexT 建议大家使用 Hexo 官方推荐的 Data Files 系统（Hexo 3.x 及以上）来分离个人配置，这样就可以在尽可能少地修改 NexT 工程代码的情况下进行个性化配置，方便主题升级。
文本结束标记
主题配置文件取消注释
custom_file_path:
postBodyEnd: source/_data/post-body-end.swig
在路径 /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>
添加主题及标题栏背景图
首先主题配置文件取消注释
custom_file_path:
style: source/_data/styles.styl
在路径 /source/_data 下创建/修改 styles.styl文件，并添加以下内容
// 添加背景 url(https://source.unsplash.com/random/1600x900);
body {
background:url(/images/background6.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size:cover;
}
// 标题栏背景
.site-meta {
padding: 20px 0;
color: #fff;
background: $blue;
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
// 修改主体透明度
.main-inner{
background: #fff;
opacity: 0.95;
}
// 修改菜单栏透明度，会引起本地搜索菜单bug
//.header-inner {
// opacity: 0.95;
//}
// 主页文章添加阴影效果
.post {
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);
}
修改主副标题字体颜色
继续在/source/_data/styles.styl文件中添加，帮你挑选颜色的网站： color-hex
//主标题颜色
.brand{
color: $white
}
//副标题颜色
.site-subtitle {
margin-top: 10px;
font-size: 13px;
color: #ffffff;
}
修改按钮，选择区域，代码块，表格等样式
首先主题配置文件取消注释
custom_file_path:
style: source/_data/variables.styl
在路径 /source/_data 下创建/修改 variables.styl文件（相当于修改主题文件 next/source/css/_variables/base.styl），并添加以下内容
// Buttons
// --------------------------------------------------
$btn-default-bg = white;
$btn-default-color = #49b1f5;
$btn-default-font-size = $font-size-small;
$btn-default-border-width = 2px;
$btn-default-border-color = #49b1f5;
$btn-default-hover-bg = #49b1f5;
$btn-default-hover-color = white;
$btn-default-hover-border-color = #49b1f5;
// Selection
$selection-bg = #49b1f5;
$selection-color = white;
// Code & Code Blocks
// --------------------------------------------------
$code-font-family = $font-family-monospace;
$code-border-radius = 3px;
$code-foreground = $black-light;
$code-background = #edf1ff;
// Table
// --------------------------------------------------
$table-width = normal; //next默认100%
$table-border-color = $gray-lighter;
$table-font-size = $font-size-small;
$table-content-alignment = left;
$table-content-vertical = middle;
$table-th-font-weight = 700;
$table-cell-padding = 8px;
$table-cell-border-right-color = $gainsboro;
$table-cell-border-bottom-color = $gray-lighter;
$table-row-odd-bg-color = #f9f9f9;
$table-row-hover-bg-color = $whitesmoke;
文章加密
在需要加密的文章 Front matter 区域设置 password: 123456
主题配置文件取消注释
custom_file_path:
head: source/_data/head.swig
在路径 /source/_data 下创建/修改 head.swig文件，并添加以下内容
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误！');
history.back();
}
}
})();
</script>
参考链接：
hexo的next主题个性化配置
Hexo Next主题进阶详细教程
hexo个人博客next主题优化
NexT主题统一网站颜色
Hexo Theme NexT 主题个性化配置最佳实践
Hexo+NexT 主题配置备忘
