一般情况下，当我们在使用 Hexo 的 NexT 主题时，都希望把博客改造成自己喜欢的风格。NexT 主题经过不断的迭代积累，目前提供了非常丰富的配置来满足使用者的个性化需求。

经过一段时间的摸索，我总结了一些有关 NexT 主题配置的最佳实践方案，能够优雅的对博客进行个性化改造及持续升级。核心思想就是，使用官方的推荐的方式配置主题，多挖掘博客自带的功能，尽可能少得修改源码。下面分享我的做法。

版本

Hexo 3.9.0
NexT 7.2.0

一些踩过的坑

目前，网上有很多 Hexo NexT 个性化配置资料，比如像博客的美化配置（NexT主题）这样的方案。

起初，我根据自己的需要按照上面博客里的方法进行配置是没什么太大问题的。但是当我尝试升级 NexT 主题的时候，问题就来了。上述博客里的方案，很多功能的实现需要修改 NexT 源码，当 pull NexT 最新代码与本地分支 merge 时，会产生大量的冲突，非常不方便。

后来经过查阅官方博客 NexT - Docs，我发现随着 NexT 版本的迭代，现如今的 NexT 已经集成了很多上面博客里提到的功能，我们通过修改配置文件即可使用，绝大部分的功能已经不再需要修改源码实现了。

另外，NexT 也建议大家使用 Hexo 官方推荐的 Data Files 系统（Hexo 3.x 即以上）来分离个人配置，稍后我会详细介绍。这样就可以在尽可能少地修改 NexT 工程代码的情况下进行个性化配置，方便主题升级。

改造前的工作

在 hexo 和 next 的根目录下，都存在一个叫做 _config.yml 的配置文件。在改造之前，让我们来规定一下两个文件的叫法以方便区分。

hexo/_config.yml：site config file
next/_config.yml：theme config file

Clone NexT

直接把 NexT 工程从 GitHub 上克隆下来放在 Hexo 的 theme/next 中，这样方便未来主题的升级工作。

NexT 工程地址：hexo-theme-next

个性化配置分离

如果能把个性化的配置内容分离出来，也就是说在其他地方通过某种方式配置个性化的设置而不直接修改主题的 theme config file 的话，那么我们在 pull 最新的 NexT 代码时，就不会对 theme config file 产生冲突。

NexT 官方博客中的 Data Files 一文详细说明了如果使用 Data Files 系统进行个性化配置。

不过 Data Files 需要 Hexo 的版本在 3.x 之上，所以文中提供两种配置方法供大家选择。

Hexo 2.x

如果是 Hexo 2.x 版本（当然 3.x 也支持这种方式），可以通过在 site config file 中编写主题的配置，而不需要修改 theme config file，也不需要添加任何新的文件。

步骤：

检查一下是否存在 hexo/source/_data/next.yml 文件，如果存在则删除。
在 site config file 添加 theme_config: 节点。
需要修改的配置内容从 theme config file 文件中拷贝到 site config file 的 theme_config: 节点下。注意缩进。

Hexo 3.x

如果是 Hexo 3.x 的话，可以将 theme config file 需要修改的配置放入 hexo/source/_data/next.yml 中，不需要修改 theme config file。

步骤：

确定是否使用的是 Hexo 3.x 及以上的版本。
在 hexo/source/_data/ 目录中新建 next.yml 文件（如果 _data 文件夹不存在，则新建一个）。
如果 next.yml 中设置 override: false，那么只需要将需要的配置项从 site config file 和 theme config file 文件中拷贝过来。
如果 next.yml 中设置 override: ture，那么需要将所有 theme config file 中的内容拷贝过来。

个性化改造

有关配置文件各项配置的使用，官方博客 NexT - Docs 中给出了详细的阐述，这里我只记录了一些比较好玩的功能。有关博客名称、头像等这种基本配置我就不再说明了。

第三方库使用 CDN

第三方库可以放在 next/source/lib/ 目录下，也可以使用 CDN 在加载这些库。如果想要减少服务器流量压力的话，可以通过配置 CDN 地址，使第三方库通过 CDN 加载，提高站点打开速度。

NexT 提供了 CDN 的配置地址，并给出了推荐的 URL，例子如下。

# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:# Internal path prefix. Please do not edit it._internal: lib# Internal version: 3.4.1# Example:# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js# jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.jsjquery:# Internal version: 4.7.0# See: https://fontawesome.com# Example:# fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.cssfontawesome:

Footer / 页脚设置

footer:# © 和年份中间的图标icon:# 图标名name: user# 图标的一个动画效果，类似于心跳animated: true# 图标颜色，可格局需要自行修改color: "#808080"# Powered by Hexo 字样，不喜欢可以设置为 falsepowered:enable: true# Version info of Hexo after Hexo link (vX.X.X).version: true# 主题字样，不喜欢可以 falsetheme:# Theme & scheme info link (Theme - NexT.scheme).enable: true# Version info of NexT after scheme info (vX.X.X).version: true# 备案信息，如果网站有备案号，可以在这里填写备案号beian:enable: falseicp:

Creative Commons / 文章版权

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:license: by-nc-ndpost: truelanguage: deed.zh

在文章 .md 文件中的上部，添加 copyright: true。

有关 Creative Commons 大家可以到 creativecommons 中查看。

返回顶部按钮

back2top:enable: true# 是否在侧边栏显示sidebar: false# 是否显示页面浏览百分比scrollpercent: false

Tag 标签前图标修改

文章标签的显示默认前面“#”号，可以通过设置将“#”换为图标。

tag_icon: true

界面加载进度条

NexT 集成了 theme-next-pace。资源库需要自行下载或者使用 CDN 的方式。

pace:enable: false# Themes list:# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimaltheme: minimalvendors:# Internal version: 1.0.2# See: https://github.com/HubSpot/pace# Example:# pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js# pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js# pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css# pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.csspace:pace_css:

访问量统计

NexT 集成了已经集成好了不蒜子。

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:enable: falsetotal_visitors: truetotal_visitors_icon: usertotal_views: truetotal_views_icon: eyepost_views: truepost_views_icon: eye

如果对显示的文案不满意的话，可以修改 /next/layout/_third-party/analytics/busuanzi-counter.swig 文件中的相关内容。

背景彩带

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:enable: true
vendors:# Internal version: 1.0.0# See: https://github.com/zproo/canvas-ribbon# Example:canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js

字数统计

NexT 集成了 hexo-symbols-count-time 插件。

步骤：

npm install hexo-symbols-count-time --save
在 site config file 中添加 symbols_count_time 配置。

symbols_count_time:# 文章上部是否显示字数symbols: true# 文章上部是否显示阅读时间time: true# 站点底端是否显示站点总字数total_symbols: true# 站点底端是否显示总阅读时间total_time: false# 是否移除代码块exclude_codeblock: false

在 next.yml 中配置 symbols_count_time 节点。

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:separated_meta: trueitem_text_post: trueitem_text_total: falseawl: 4wpm: 275suffix: mins.

其中：

awl：平均字符长度，默认为 4。
- 汉字 ≈ 2
- 英文 ≈ 4
- 俄文 ≈ 6
wpm：阅读速度。
- 慢 ≈ 200
- 正常 ≈ 275
- 快 ≈ 350
suffix：后缀，默认为 mins.。

对中文用户来说：汉字的平均长度 ≈ 1.5，如果仅用中文书写没有英文的话，建议 awl 和 wmp 分别设置为 2 和 300。如果中英混合，建议 awl 和 wmp 分别设置为 4 和 275。

GitHub Fork Me

在站点右上角添加 GitHub 标识，例如“Fork me on GitHub”。

# `Follow me on GitHub` banner in the top-right corner.
github_banner:enable: falsepermalink: https://github.com/yournametitle: Follow me on GitHub

图片延迟加载

对于图片进行延迟加载，访问到图片位置时才去请求图片资源，这样可以提高博客的访问速度，节省流量。

步骤：

npm install hexo-lazyload-image --save
在 site config file 中添加 lazyload 配置。

# Lazyload
## Depends on hexo-lazyload-image
lazyload:enable: trueonlypost: false# 图片尚未加载完时，显示指定图片。目录地址为博客根目录下的 source/loadingImg: /uploads/loading.gif

修改配色

NexT 主题默认色系是黑白色系。目前官方尚未提供颜色修改的配置，所以我们可以通过修改相关 .styl 文件来修改主题颜色。

链接持久化

Hexo 默认的文章链接是“年/月/日/标题”。之所以要做链接持久化是因为，中文 url 不利于 SEO，另外如果标题修改了，会导致链接发生变化，不利于文章的推广。所以我们要做的就是把标题转成唯一的英文或数字字符串。这里推荐 rozbo 大神的 hexo-abbrlink。

步骤：

npm install hexo-abbrlink --save
在 site config file 中添加

permalink: posts/:abbrlink/# abbrlink config
abbrlink:alg: crc32  #support crc16(default) and crc32rep: dec    #support dec(default) and hex

alg 是算法。有 crc16 和 crc32 两种。
rep 是进制。有 dec（十进制）和 hex（十六进制）两种。

样例：

crc16 & hex
https://post.zz173.com/posts/66c8.htmlcrc16 & dec
https://post.zz173.com/posts/65535.htmlcrc32 & hex
https://post.zz173.com/posts/8ddf18fb.htmlcrc32 & dec
https://post.zz173.com/posts/1690090958.html

crc16 算法下的十进制编码最大为 65535，这对个人博客来说足够了。

有关作者写的详细介绍 hexo-abbrlink介绍感兴趣可以看下。

自定义目录

假如你想让你的某一分类，例如下图的“测试模块”，像“归档”、“分类”等模块按时间线展示，可以通过设置 menu 来达到目的。如果想展示个人专栏或者某一系列文章，可以采用这个方法。

在 theme config file 中添加“测试板块”内容。

menu:tags: /tags/ || tagscategories: /categories/ || th测试板块: /categories/Java || coffee

其中，格式按照 Key: /link/ || icon 规则填写。

站内搜索

在官方博客 search-services 中，作者提供了三种方式实现搜索功能。这里我采用 Local Search 方式实现。该方案的好处是不需要依赖任何第三方的组件，配置也非常简便。如果没有特殊搜索需求的话，这种方式可以满足绝大部分用户。

步骤：

安装 hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save

在 site config file 中添加配置

search:path: search.xmlfield: postformat: htmllimit: 10000

在 theme config file 中添加配置

# 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 -1top_n_per_article: 1# Unescape html strings to the readable one.unescape: false# Preload the search data when the page loads.preload: false

这样，侧边栏中就显示搜索功能了。

本博客 GitHub 地址：https://github.com/InterHorse/matalking-blog

想要对 NexT 主题配置更深入的了解及进阶使用，推荐阅读官方博客 NexT，写得非常全面。

原文作者：一只因特马
原文链接： https://www.interhorse.cn/a/3849174810/
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-ND 许可协议。转载请注明出处！

Hexo Theme NexT 主题个性化配置最佳实践相关推荐

hexo之next主题个性化配置详细教程
hexo之next主题个性化配置详细教程 1.在右上角或者左上角实现fork me on github 实现的效果图具体实现方法点击传送门>> 挑选自己喜欢的样式,并复制代码. 例如, ...
hexo的next主题个性化配置
前言: 如果你觉得我的博客界面不错,你可以参考这篇文章,在这篇文章中总结了几十个个性化配置,并不是都要安装,取你所需即可．一.常用的个性化配置汇总: 1．更换主题 2．设置语言 3．字数统计和阅读时 ...
hexo的next主题个性化配置教程
看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果主要有以下33种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景实 ...
新手篇 | K8S配置最佳实践
本文档旨在汇总和强调用户指南.快速开始文档和示例中的最佳实践.本文已上传到 kubernetes-handbook 中的第四章最佳实践章节,本文仅作归档,更新以 kubernetes-handbook ...
hexo博客matery主题个性化配置
hexo博客个性化配置参考博客 CDN加速:在页脚底部添加又拍云图片logo 博客文章开头format格式修改hexo new post格式的方法 hexo s手机端查看修改博客标题在手机端的字 ...
PAI和Hologres的个性化推荐最佳实践
简介:常见的个性化推荐系统包括日志收集,数据加工,召回,排序,离在线效果评估等诸多环节,对于中小客户存在技术门槛高,搭建周期长等问题.计算平台基于 PAI,Hologres,MaxCompute,Da ...
【Hexo】NexT 主题的配置使用记录
文章目录简介版本安装配置记录风格/主题网页图标菜单栏侧边栏本地搜索代码块动画效果阅读进度书签 Mermaid lazyload fancybox pangu 捐赠版权声明 ...
ECS弹性网卡+弹性公网IP配置最佳实践之策略路由
概述目前阿里云ECS部分机型可以配置多张网卡(一张原生网卡+若干张弹性网卡),用来实现业务上对于系统内多网卡的需求,详细可以参考 [[新功能]弹性公网IP绑定弹性网卡新功能及最佳实践 ](https ...
基于 PAI 搭建企业级个性化推荐系统最佳实践
场景描述本方案结合阿里云 PAI 团队预置的基础版算法方案为例,演示如何以阿里云提供的数据.AI 类产品为基础,离线部分采用Maxcompute&Dataworks&PAI的大数据& ...
hexo的next主题个性化教程打造炫酷网站
看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果主要有以下30种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景实 ...

Hexo Theme NexT 主题个性化配置最佳实践

版本