目标

本文将介绍一些针对 NexT 主题的个性化配置。

本文相关推荐阅读：

Hexo 搭建个人博客（七）Hexo 配置 NexT 主题
Hexo 搭建个人博客（八）NexT 侧边栏配置

环境及版本声明

本文基于以下环境及版本：

hexo: 3.8.0
hexo-cli: 1.1.0
NexT: 7.1.0
OS: Ubuntu 18.04 LTS x86_64

若主题版本不一致，下面的配置方法可能不适用。

设置 RSS

NexT 中 RSS 有三个设置选项，满足特定的使用场景：

# false：禁用 RSS，不在页面上显示 RSS 连接.
# 留空：使用Hexo生成订阅源并自动插入链接。你可能需要先安装插件: `npm install hexo-generator-feed --save`.
# 具体的链接地址：适用于已烧制过 Feed 的情形.
rss:

具体操作如下：

首先在站点根目录下执行下列命令安装插件：

npm install hexo-generator-feed --save

更改 主题配置文件，设定 rss 字段的值如下：

rss: /atom.xml

重新生成、启动服务器显示如下：

添加 tags 页面

新建「标签」页面，并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签，若你的所有文章都未包含标签，此页面将是空的。下面是一篇包含标签的文章的例子：

---
title: QuickSort
date: 2019-04-13 17:49:09
tags: [Java, Sort]
categories:
- [Algorithm, Sort]
---QuickSort Demo

新建页面

在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：

$ hexo new page tags
INFO  Created: ~/VScode/hexo/source/tags/index.md

设置页面类型

编辑刚刚新建的页面（source/tags/index.md），将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

---
title: tags
date: 2019-04-13 17:56:13
type: "tags"
---

修改菜单

在菜单中添加链接。编辑 主题配置文件，添加 tags 到 menu 中，如下:

menu:home: / || hometags: /tags/ || tagsarchives: /archives/ || archive

注意

如果没有设置页面类型，默认情况下「标签」页面会被当成普通页面，我们文章的标签信息不会出现在「标签」页面中，例如：

在设置了页面类型后，再打开：

如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

---
title: tags
date: 2019-04-13 17:56:13
type: "tags"
comments: false
---

添加 categories 页面

与 “添加 tags 页面” 类似

新建页面

$ hexo new page categories
INFO  Created: ~/VScode/hexo/source/categories/index.md

设置页面类型

编辑刚刚新建的页面（source/categories/index.md），将页面的类型设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

---
title: categories
date: 2019-04-13 17:57:40
type: "categories"
---

修改菜单

在菜单中添加链接。编辑 主题配置文件，添加 tags 到 menu 中，如下:

menu:home: / || homecategories: /categories/ || tharchives: /archives/ || archive

注意

如果没有设置页面类型，则文章的分类信息不会出现在「分类」页面中，下面是设置了页面类型后的示例：

如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false

设置阅读全文

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。NexT 提供三种方式来控制文章在首页的显示方式。也就是说，在首页显示文章的摘录并显示阅读全文按钮，可以通过以下方法实现：

使用 ``

在文章中嵌入  标记，Hexo 会将其之上的内容作为首页预览内容，这是 Hexo 提供的方式

使用 description

在文章的 front-matter 中添加 description，并提供文章摘录

使用 NexT 配置

如果需要自动形成摘要，则将 auto_excerpt 下的 enable 设置成 true，默认截取的长度为 150 字符，可以根据需要在 主题配置文件 中自行设定：

# 自动将页面滚动到<!-- more -->标记下的部分.
scroll_to_more: true# 在Cookie中自动保存每个帖子/页面上的滚动位置.
save_scroll: false# 自动摘录 description 作为主页的预览内容.
excerpt_description: true# 自动摘录（不推荐）.
auto_excerpt:enable: truelength: 150# Read more button
# 如果为true，则会在摘录部分显示read more按钮.
read_more_btn: true

Hexo 建议使用 （即第一种方式），除了可以精确控制需要显示的摘录内容以外，可以让 Hexo 中的插件更好的识别。

设置文章置顶

默认顺序

Hexo 默认主页文章按日期降序。

# Home page setting
# path: 博客主页根路径. (default = '')
# per_page: 每页显示文章数量. (0 = 禁用分页)
# order_by: 文章排序. (默认按日期降序)
index_generator:path: ''per_page: 10order_by: -date

安装 hexo-generator-index-pin-top

首先是卸载默认排序插件，安装新插件，新插件支持文章置顶：

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

置顶文章

在需要置顶的文章的 front-matter 中设置 top: 1 即可实现文章置顶功能，并且数字越大文章越靠前，如：

---
title: Hello World
top: 1
---

添加置顶图标

上面置顶文章会文章排在前面，但是不会有任何有关 “置顶” 的标识。我们可以修改 NexT 主题的/themes/next/layout/_macro/post.swig 文件，在 <div class="post-meta"> 下加入 “置顶” 标识，如图标和文字描述：

{% if post.top %}<i class="fa fa-thumb-tack"></i><font color=7D26CD>{{ __('post.sticky') }}</font><span class="post-meta-divider">|</span>
{% endif %}

此时的效果如下：

设置代码块高亮

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night，night blue，night bright，night eighties，对应的展示效果可到 Tomorrow Theme 查看：

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

启用代码块复制功能

编辑 主题配置文件，启用 codeblock 模块，如下：

codeblock:# Manual define the border radius in codeblock, leave it blank for the default value: 1border_radius:# Add copy button on codeblockcopy_button:enable: true# Show text copy resultshow_result: true# Style: only 'flat' is currently available, leave it blank if you prefer default themestyle:

设置 copy_button: true，启用复制按钮；同时设置 show_result: true，显示代码复制结果。

修改文章链接样式

打开文件 /themes/next/source/css/_common/components/post/post.styl，在末尾添加以下 CSS 样式:

.post-body p a{color: #0593d3;border-bottom: none;border-bottom: 1px solid #0593d3;&:hover {color: #fc6423;border-bottom: none;border-bottom: 1px solid #fc6423;}
}

颜色可自定义，在这里选中状态为橙色，链接样式为蓝色，效果如下:

修改文章底部标签样式

打开模板文件 /themes/next/layout/_macro/post.swig，找到 for tag in post.tags 部分，将 # 换成 <i class="fa fa-tag"></i>，如下:

{% for tag in post.tags %}<a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}

修改后，效果如下：

统一添加文章结束标记

在 /themes/next/layout/_macro 下新建 passage-end-tag.swig 文件，并添加以下代码：

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

打开 /themes/next/layout/_macro/post.swig 文件，在 END POST BODY 后面引入 passage-end-tag.swig，如下：

{#####################}
{### END POST BODY ###}
{#####################}{% if theme.passage_end_tag.enable and not is_index %}{% include 'passage-end-tag.swig' %}
{% endif %}

在 主题配置文件 _config.yml 的末尾添加以下配置：

# 文章结束标记
passage_end_tag:# 是否显示文章结束标记enable: true

该配置为自定义配置，与上面的代码配套使用，方便通过简单的配置来启用或者关闭文章结束标记。显示效果如下：

添加版权信息

编辑 主题配置文件，修改如下配置：

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# 许可证的可用值: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 如果你喜欢CC许可证的翻译版本，可以设置 lanuage 的值.
# CC许可证有39种语言版本，你可以根据需要找到特定的正确的缩写.
creative_commons:license: by-nc-sa# 是否在侧边栏显示版权信息sidebar: true# 是否在文章底部显示版权信息post: true# 可以设置CC许可证的翻译版本language:

by-nc-sa 表示 署名-非商业性使用-相同方式共享，更加详细的解释请查阅官网 creativecommons.org

设置 sidebar: true 后，显示效果如下：

设置 post: true 后，显示效果如下：

如果需要自定义文章底部版权信息的，可以自行修改 /themes/next/layout/_partials/post/post-copyright.swig 文件。

设置打赏功能

首先将你的 WeChat Pay / Alipay / Bitcoin 的收款二维码图片放到 /themes/next/source/images 文件夹下，或者上传到图床并获取它们的绝对 HTTP 地址。

编辑 站点配置文件，启用打赏功能，例如选择使用微信支付和支付宝：

# Reward (Donate)
reward_settings:# 如果为true，则默认会在每篇文章底部显示打赏.# 你可以通过在 Front-matter 中设置 `reward: true | false` 在特定文章中显示或隐藏打赏.enable: trueanimation: falsecomment: 坚持原创技术分享，您的支持将鼓励我继续创作！reward:wechatpay: /images/wechatpay.jpgalipay: /images/alipay.jpg#bitcoin: /images/bitcoin.png

效果如下：

点击打赏按钮：

设置站点背景

NexT 默认提供3种背景配置，但都需要安装依赖。以下配置均不修改 vendors: 下的内容。

Canvas-nest 背景

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

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

Step 3

编辑 主题配置文件，启用 cavas_nest 模块，如下：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:enable: trueonmobile: false # 是否在手机上显示color: "0,0,255" # RGB颜色值, 用 ',' 分隔opacity: 0.5 # 线条透明度: 0~1zIndex: -1 # 背景的 z-index 属性值count: 99 # 线条数量

在 站点根目录下 启动服务器，显示效果如下（其它设置可根据需要自行修改）：

JavaScript 3D library 背景

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

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

Step 3

编辑 主题配置文件，设 three_waves，canvas_lines，canvas_sphere 其中一项为 true，如下：

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: true
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

在 站点根目录下 启动服务器，three_waves 显示效果如下：

canvas_lines 效果如下：

canvas_sphere 效果如下：

Canvas-ribbon 背景

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

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

Step 3

编辑 主题配置文件，启用 canvas_ribbon 模块，如下：

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: ribbon的宽度.
# alpha: ribbon的透明度.
# zIndex: ribbon的显示级别.
canvas_ribbon:enable: truesize: 300alpha: 0.6zIndex: -1

在 站点根目录下 启动服务器，显示效果如下：

设置左上角或右上角 github 图标

开启默认设置

NexT 支持通过配置开启右上角 github 图标，编辑 主题配置文件，启用 github-banner 如下：

# `Follow me on GitHub` banner in the top-right corner.
github_banner:enable: true# 点击即跳转到该链接，自行设定permalink: https://github.com/yourname# 当鼠标悬浮于上方时显示的文本title: Follow me on GitHub

效果如下：

进阶自定义设置

自定义配置使其可以使用 GitHub Ribbons 和 GitHub Corners 中的任何一款图标。

修改 /themes/next/layout/_partials/github-banners.swig 文件内容如下：

github-banner.swig

同时编辑 站点配置文件，修改 github_banner 部分如下：

# `Follow me on GitHub` banner in the top-left or top-right corner.
# `Fork me on GitHub` banner in the top-left or top-right corner.
github_banner:enable: truepermalink: https://github.com/wylutitle: Follow me on GitHub# Available values of ribbons:# See: https://github.blog/2008-12-19-github-ribbons/# ribbons-left-red | ribbons-left-green | ribbons-left-darkblue # ribbons-left-orange | ribbons-left-gray | ribbons-left-white# ribbons-right-red | ribbons-right-green | ribbons-right-darkblue # ribbons-right-orange | ribbons-right-gray | ribbons-right-white# Available values of corners:# See: http://tholman.com/github-corners/# corners-right-black | corners-right-green | corners-right-red # corners-right-blue | corners-right-white# corners-left-black | corners-left-green | corners-left-red# corners-left-blue | corners-left-white# If not set, it will use NexT default style.type:# You can set size of banner.# Default values for ribbons: width = height = 120# Default values for corners: width = height = 80size:# whether to display on the mobile side.# If use left banner, you should better set it "false" as the banner will cover menu button. mobile: true

这样你就可以通过 type 随意切换 banner 的样式了。

设置侧栏阅读进度百分比

编辑 站点配置文件，修改 back2top 部分如下：

back2top:enable: true# Back to top in sidebar.sidebar: true# Scroll percent label in b2t button.scrollpercent: true

设置顶部阅读进度条

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

Step 3

编辑 主题配置文件，启用 reading_progress 模块，如下：

注意：不是vendors:下的reading_progress

# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:enable: truecolor: "#37c6c0"height: 2px

设置顶部页面加载进度条

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

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

Step 3

编辑 主题配置文件，启用 pace 模块，如下：

注意：不是vendors:下的pace

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
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
pace_theme: pace-theme-minimal

设置阅读位置标记功能

Bookmark 是一个插件，允许用户保存他们的阅读位置。只需单击页面左上角的书签图标（如书签）即可保存阅读位置，当他们下次访问您的博客时，他们可以通过单击主页上的书签图标继续读取最后一个位置。

注意：实测当站点语言设置为 en 时，该功能不能正常使用，若设置为 zh-CN 可以正常使用，其它语言未测试。

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

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

Step 3

编辑 主题配置文件，启用 bookmark 模块，如下：

注意：不是 vendors: 下的 bookmark

# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:enable: true# If auto, save the reading position when closing the page or clicking the bookmark-icon.# If manual, only save it by clicking the bookmark-icon.save: auto

启用数学公式渲染引擎

编辑 主题配置文件，修改 bookmark 配置，如下：

# Math Equations Render Support
math:enable: true# Default (true) will load mathjax / katex script on demand.# That is it only render those page which has `mathjax: true` in Front Matter.# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.per_page: falseengine: mathjax#engine: katex# hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.mathjax:cdn: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML#cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML# See: https://mhchem.github.io/MathJax-mhchem/#mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3#mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) needed to full Katex support.katex:cdn: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css#cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.csscopy_tex:# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-texenable: falsecopy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.jscopy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

设置 enable: true，即启用引擎渲染数学公式。per_page 表示是否自动渲染每一页，如果为 true 则只渲染 front-matter 中包含 mathjax: true 的文章。例如：

---
title: Hello World
date: 2019-04-12 17:49:09
top: 1
mathjax: true
---

要想更好的支持 mathjax 需要安装 hexo-rendering-pandoc (或者 hexo-renderer-kramed)，详见 Hexo相关问题和优化中有关数学公式渲染的说明。

设置字数统计和预计阅读时间

包括文章字数统计、预计阅读时间，和页面底部站点总字数统计、总阅读时间预计。

Symbols count and time to read of articles.

Better than hexo-reading-time and faster than hexo-worcount. No external dependencies.

插件 hexo-symbols-count-time 的使用说明详见 https://github.com/theme-next/hexo-symbols-count-time

Step 1

进入到工程目录下，安装 Hexo 插件：

npm install hexo-symbols-count-time --save

Step 2

编辑 站点配置文件，添加如下内容：

# Hexo plugin: hexo-symbols-count-time
# https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:symbols: true # 文章字数统计time: true # 文章预计阅读时间total_symbols: true # 页面底部站点总字数统计total_time: true # 页面底部站点总阅读时间预计

Step 3

此插件集成在 NexT 主题中，在 Hexo 站点配置文件 中启用插件后，你可以调整 NexT 配置中的选项，查看 主题配置文件，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:separated_meta: true # 文章统计结果是否独立一行显示item_text_post: true # 是否展示文章统计结果的文本item_text_total: true # 是否展示站点统计结果的文本awl: 2wpm: 275

如果 separated_meta: false，则效果如下：

awl

平均字长（平均一个字的字符数），默认值：4。
- CN≈2
- EN≈5
- RU≈6
wpm

每分钟阅读字数，默认值：275。
- 慢≈200
- 正常≈275
- 快≈350

中国用户注意事项：因为中文平均字长约为 1.5，如果你大多数情况下用中文写帖子（没有混合英文），建议将 awl 设置为 2，将 wpm 设置为 300。但是，如果你通常将你的帖子与英语混合，那么 awl 到 4 和 wpm 到 275 就会很好。

添加 Live2D 看板娘萌宠

插件 hexo-helper-live2d 的使用说明详见 https://github.com/EYHN/hexo-helper-live2d

详细配置过程及说明推荐参考 Miaia 的博客用Live2D让看板喵入住你的Hexo博客吧(^o)/~

Step 1

进入到工程目录下，安装 Hexo 插件：

npm install hexo-helper-live2d --save

Step 2

在插件作者的博客中挑选一个模型，记录该模型的名字。模型资源名称为 live2d-widget-model-模型名称，例如选择模型 shizuku ，则其对应的 Live2D 资源名称为 live2d-widget-model-shizuku，然后直接在站点根目录下安装该模型，命令如下：

npm install live2d-widget-model-shizuku --save

Step 3

编辑 站点配置文件，添加如下内容：

# Hexo plugin: hexo-helper-live2d
## https://github.com/EYHN/hexo-helper-live2d
live2d:enable: truepluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)scriptFrom: local # Default#scriptFrom: jsdelivr # jsdelivr CDN#scriptFrom: unpkg # unpkg CDN#scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom urltagMode: false # Whether only to replace live2d tag instead of inject to all pageslog: false # Whether to show logs in consolemodel:use: live2d-widget-model-shizuku # npm-module package name#use: wanko # folder name in (hexo base dir)/live2d_models/#use: ./wives/wanko # folder path relative to hexo base dir#use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom urlscale: 1hHeadPos: 0.5vHeadPos: 0.618display:superSample: 2width: 150height: 300position: righthOffset: 0vOffset: -10mobile:show: falsescale: 0.05react:opacityDefault: 0.7opacityOnHover: 0.2

执行命令 hexo clean && hexo g && hexo s，效果如下：

配置项说明，摘自 Miaia 博客用Live2D让看板喵入住你的Hexo博客吧(^o)/~

配置项	类型	属性	备注
enable	Boolean	`true`或者`false`	控制live2d插件是否生效。
scriptFrom	String	`local`或者`jsdelivr`或者`unpkg`	l2dwidget.js使用的CDN地址，local表示使用本地地址。
pluginRootPath	String	例如：`live2dw/`	插件在站点上根目录的相对路径。
pluginJsPath	String	例如：`lib/`	脚本文件相对与插件根目录路径。
pluginModelPath	String	例如：`assets/`	模型文件相对与插件根目录路径。
tagMode	Boolean	`true`或者`false`	标签模式, 控制是否仅替换tag标签而非插入到所有页面中。
debug	Boolean	`true`或者`false`	调试模式, 控制是否在控制台输出日志。
model.use	String	例如：`live2d-widget-model-hijiki`	npm 模块包名（上文例中即使用的这个方式）。
model.use	String	例如：`hijiki`	博客根目录/live2d_models/ 下的目录名。
model.use	String	例如：`./wives/hijiki`	相对于博客根目录的路径。
model.use	String	例如：`https://域名/model.json`	你自定义live2d模型json文件的url。
model.scale	Number	可选值，默认值为 `1`	模型与canvas的缩放。
model.hHeadPos	Number	可选值，默认值为 `0.5`	模型头部横坐标。
model.vHeadPos	Number	可选值，默认值为 `0.618`	模型头部横坐标。
display.superSample	Number	可选值，默认值为 `2`	超采样等级。
display.width	Number	可选值，默认值为 `150`	canvas的长度。
display.height	String	可选值，默认值为 `300`	canvas的高度。
display.position	Number	可选值，默认值为 `right`	显示位置：左或右。
display.hOffset	Number	可选值，默认值为 `0`	canvas水平偏移。
display.vOffset	Number	可选值，默认值为 `-20`	canvas水平偏移。
mobile.show	Boolean	可选值，默认值为 `true`	控制是否在移动设备上显示。
mobile.scale	Number	可选值，默认值为 `0.5`	移动设备上的缩放。
react.opacityDefault	Number	可选值，默认值为 `0.7`	默认透明度。
react.opacityOnHover	Number	可选值，默认值为 `0.2`	鼠标移上透明度（此项貌似没有效果）。

官方API文档

添加文章分享按钮

Step 1

进入到 NexT 主题目录下：

cd themes/next

Step 2

安装模块到 source/lib 目录下：

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

Step 3

编辑 主题配置文件，启用 needmoreshare2 模块，如下：

# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks:
# Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Reddit,Delicious,StumbleUpon,Pinterest,
# GooglePlus,Tumblr,GoogleBookmarks,Newsvine,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:enable: truepostbottom:enable: trueoptions:iconStyle: defaultboxForm: horizontalposition: bottomCenternetworks: Weibo,Wechat,Douban,QQZone,Twitter,Facebookfloat:enable: trueoptions:iconStyle: defaultboxForm: horizontalposition: middleRightnetworks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

启用 postbottom 分享按钮，点击按钮效果如下：

启用 float 分享按钮，点击按钮效果如下：

这两个分享按钮可同时启用，也可以单独使用其中一个，其它参数配置效果可自行测试。

设置网页底部信息

查看 主题配置文件，默认 footer 配置如下：

footer:# Specify the date when the site was setup. If not defined, current year will be used.#since: 2015# Icon between year and copyright info.icon:# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: user# If you want to animate the icon, set it to true.animated: false# Change the color of icon, using Hex Code.color: "#808080"# If not defined, `author` from Hexo main config will be used.copyright:powered:# Hexo link (Powered by Hexo).enable: true# Version info of Hexo after Hexo link (vX.X.X).version: truetheme:# Theme & scheme info link (Theme - NexT.scheme).enable: true# Version info of NexT after scheme info (vX.X.X).version: true# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.# http://www.beian.miit.gov.cnbeian:enable: falseicp:# Any custom text can be defined here.#custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>

默认效果如下：

注意：默认是没有 站点总字数 和 站点阅读时长 的，这里有相关显示是因为上面启用了统计功能。

设置建站时间

编辑 footer 下的 since 配置如下，例如建站时间为2019，则：

footer:# 指定建站日期，若没有定义则使用当前的年份作为建站日期。since: 2019

设置版权所有者

footer:# 如果没有定义, 则站点作者的配置会用于此处。copyright: wylu

编辑 footer 下的 icon 配置如下：

footer:# Icon between year and copyright info.icon:# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: heart# If you want to animate the icon, set it to true.animated: true# Change the color of icon, using Hex Code.color: "#ff0000"

这里使用 fa-heart 的图标，并且启用动画和设置 icon 的颜色为红色。

隐藏 Hexo 和 NexT 信息

编辑 footer 下的 powered 和 theme 配置如下：

footer:powered:# Hexo link (Powered by Hexo).enable: false# Version info of Hexo after Hexo link (vX.X.X).version: truetheme:# Theme & scheme info link (Theme - NexT.scheme).enable: false# Version info of NexT after scheme info (vX.X.X).version: true

修改完配置后，效果如下：

添加站点运行时间

在 /themes/next/layout/_custom 文件夹下新建一个名称为 site-runtime.swig 的文件，并添加内容如下：

<div id="site-runtime"><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span><span id="runtime"></span>
</div>
<script language="javascript">function isPC() {var userAgentInfo = navigator.userAgent;var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];for (var i = 0; i < agents.length; i++) {if (userAgentInfo.indexOf(agents[i]) > 0) {return false;}}return true;}function siteTime(openOnPC, start) {window.setTimeout("siteTime(openOnPC, start)", 1000);var seconds = 1000;var minutes = seconds * 60;var hours = minutes * 60;var days = hours * 24;var years = days * 365;{% if theme.footer.runtime.start %}start = new Date("{{ theme.footer.runtime.start }}");{% endif %}var now = new Date();var year = now.getFullYear();var month = now.getMonth() + 1;var date = now.getDate();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();var diff = now - start;var diffYears = Math.floor(diff / years);var diffDays = Math.floor((diff / days) - diffYears * 365);var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);if (openOnPC) {document.getElementById("runtime").innerHTML = "Running: " + diffYears + " years " + diffDays + " days " + diffHours + " hours " + diffMinutes + " mins " + diffSeconds + " secs";} else {document.getElementById("runtime").innerHTML = "Running: " + diffYears + "y " + diffDays + "d " + diffHours + "h " + diffMinutes + "m " + diffSeconds + "s";}}var showOnMobile = {{ theme.footer.runtime.mobile }};var openOnPC = isPC();var start = new Date();siteTime(openOnPC, start);if (!openOnPC && !showOnMobile) {document.getElementById('site-runtime').style.display = 'none';}
</script>

编辑文件 /themes/next/layout/_partials/footer.swig，在文件底部添加如下内容：

{% if theme.footer.runtime.enable %}{% include '../_custom/site-runtime.swig' %}
{% endif %}

编辑 主题配置文件，在 footer 下添加如下配置作为其子配置项：

# Site Runtime
runtime:enable: true# The time of the site started running. If not defined, current time of local time zone will be used.# You can specify the time zone by adding the `+HOURS` or `-HOURS` format time zone.# If not specify the time zone, it will use `+0000` as default.# ex: "2015-06-08 07:24:13 +0800", `+0800` specify that it is the time in the East Eight Time Zone.start: 2015-06-08 08:00:00 +0800# Whether to show on the mobile sidemobile: true

注意：runtime 必须在 footer 下才能正常工作，与 footer 下的 theme 是平级关系，该配置支持设置是否在移动端显示，不支持修改展示文本语言。对于要修改展示文本语言的，可以直接修改 site-runtime.swig 文件。

添加鼠标点击效果

爱心点击效果

在 /themes/next/source/js/src 下新建文件 love.js，接着把该链接下的 js 代码复制到 love.js 文件中。如果链接失效，可以到博主Github 复制。如果没有 src 目录，则自行手动创建。

烟花点击效果

在 /themes/next/source/js/src 下新建文件 fireworks.js，接着把该链接下的 js 代码复制到 fireworks.js 文件中。

新建 `click-animation.swig`

在 /themes/next/layout/_custom 文件夹下新建文件 click-animation.swig，并添加如下代码：

{% if theme.click_animation.enable %}<script type="text/javascript">function isPC() {var userAgentInfo = navigator.userAgent;var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];for (var i = 0; i < agents.length; i++) {if (userAgentInfo.indexOf(agents[i]) > 0) {return false;}}return true;}var showOnMobile = {{ theme.click_animation.mobile }};var openOnPC = isPC();{% if theme.click_animation.style == "love" %}if (openOnPC || showOnMobile) $.getScript("/js/src/love.js");{% elseif theme.click_animation.style == "fireworks" %}if (openOnPC || showOnMobile) {var newCanvas = $('<canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;"></canvas>');$("body").append(newCanvas);$.getScript("http://cdn.bootcss.com/animejs/2.2.0/anime.min.js").done(function (script, textstatus) {if (textstatus == "success" && typeof(anime) != undefined) {$.getScript("/js/src/fireworks.js");}});}{% endif %}</script>
{% endif %}

修改 `_layout.swig`

在 /themes/next/layout/_layout.swig 文件 <body> 标签内的底部添加如下代码：

{% include '_custom/click-animation.swig' %}

添加自定义配置项

编辑 主题配置文件，在文件末尾添加如下配置：

# Mouse Click Animation.
click_animation:enable: true# Available values of style: love | fireworks# If not define, there will be no click animation even enabled.style: love# Whether to show on the mobile sidemobile: false

当 style: love 时，效果如下：

当 style: fireworks 时，效果如下：

添加自定义404页面

参考 MOxFIVE 博客在 Hexo 中创建匹配主题的404页面

在站点根目录下，执行如下命令创建404页面：

hexo new page 404

编辑新建的页面文件，默认在站点根目录下 /source/404/index.md，在 front-matter 中添加 permalink: /404，表示指定该页面固定链接为 http://"主页"/404.html

---
title: 404
date: 2019-05-07 22:30:57
comments: false
permalink: /404
---<center>404 Not Found
对不起，您所访问的页面不存在或者已删除
[点击此处](https://wylu.github.io)返回首页
</center>* 我的Github：[http://github.com/wylu](http://github.com/wylu)
* 我的CSDN：[https://blog.csdn.net/qq_32767041](https://blog.csdn.net/qq_32767041)
* 给我留言：[https://wylu.github.io/guestbook/](https://wylu.github.io/guestbook/)

在本地打开链接 http://localhost:4000/404.html ，如果能看到如下效果，则表示配置成功。需要注意的是，在本地测试时，当你尝试跳转到一个不存在的页面时，不会显示自定义的404页面，但是当我们将页面部署到 GithubPages 时，它就会使用我们自定义的404页面。

添加图片放大预览功能

利用 Fancybox 能放大查看图片。

有 Fancybox2 和 Fancybox3 两个版本，这里使用 Fancybox3。

如果已经有 fancybox2 的，需要在站点根目录下执行下列命令进行删除：

rm -rf themes/next/source/lib/fancybox

进入到 themes/next 主题目录下，执行以下命令安装 fancybox3 模块：

cd themes/next

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

编辑 主题配置文件，启用 fancybox，修改配置如下：

fancybox: true

放大预览效果如下：

Hexo 搭建个人博客（九）NexT 主题进阶配置相关推荐

Hexo搭建个人博客及next主题基本配置
前言国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...
利用Hexo搭建个人博客－博客发布篇
通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...
给hexo搭建的博客更换主题
怎么给hexo搭建的博客更换主题首先要进入hexo的官网主题界面,找到你所想要的主题网址:https://hexo.io/themes/ 点进该主题,就会进入你选中的主题的拥有者的博客,你就可以看 ...
Linux下使用 github+hexo 搭建个人博客04-next主题优化
上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...
通过Hexo搭建个人博客以及主题配置
这是蓝鸟x发布的第一篇文章前言直接在github page平台上托管我们的博客.这样就可以安心的来写作,又不需要定期维护,而且hexo作为一个快速简洁的博客框架,用它来搭建博客真的非常容易. He ...
GitHub Pages + Hexo搭建个人博客网站，史上最全教程
文章目录一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题五.创建文章六.个 ...
GitHub+hexo搭建个人博客（2019新版超详细教程）
GitHub+hexo搭建个人博客详细教程原文链接 : GitHub+hexo搭建个人博客详细教程前言随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交信息分享者,随之优秀的信息分享平台也越来 ...
利用Hexo搭建个人博客－博客初始化篇
上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境. 相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面, ...
hexo搭建个人博客_hexo 搭建个人博客
hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍本 blog 使用 HEXO 搭建, MATERY 作为主题, ...
使用Hexo搭建个人博客-保姆级教程
使用Hexo搭建个人博客-保姆级教材首先我们看一下最终效果,按照以下步骤最后就可以完成和我一样的博客 https://chen-mingxuan.gitee.io/blog-test/ PS:CSD ...

Hexo 搭建个人博客（九）NexT 主题进阶配置

目标

环境及版本声明

设置 RSS

添加 tags 页面

新建页面

设置页面类型

修改菜单

注意

添加 categories 页面

新建页面

设置页面类型

修改菜单

注意

设置阅读全文

使用

使用 description

使用 NexT 配置

设置文章置顶

默认顺序

安装 hexo-generator-index-pin-top

置顶文章

添加置顶图标

设置代码块高亮

启用代码块复制功能

修改文章链接样式

修改文章底部标签样式

统一添加文章结束标记

添加版权信息

设置打赏功能

设置站点背景

Canvas-nest 背景

Step 1

Step 2

Step 3

JavaScript 3D library 背景

Step 1

Step 2

Step 3

Canvas-ribbon 背景

Step 1

Step 2

Step 3

设置左上角或右上角 github 图标

开启默认设置

进阶自定义设置

设置侧栏阅读进度百分比

设置顶部阅读进度条

Step 1

Step 2

Step 3

设置顶部页面加载进度条

Step 1

Step 2

Step 3

设置阅读位置标记功能

Step 1

Step 2

Step 3

启用数学公式渲染引擎

设置字数统计和预计阅读时间

Step 1

Step 2

Step 3

添加 Live2D 看板娘 萌宠

Step 1

Step 2

Step 3

添加文章分享按钮

Step 1

Step 2

Step 3

设置网页底部信息

设置建站时间

设置版权所有者

设置建站时间和版权所有者之间的图标

隐藏 Hexo 和 NexT 信息

添加站点运行时间

添加鼠标点击效果

爱心点击效果

使用 ``

添加 Live2D 看板娘萌宠

新建 `click-animation.swig`

修改 `_layout.swig`