0%

NexT主题配置及优化

熬夜伤身

安装

进入Hexo目录,使用git bash安装

1
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
  • 可以随时使用 git 更新至最新版本并切换至任何有 tag 标记的 release 版本、最新的 master 分支版本、甚至其他分支。

    获取 tags 列表:

    1
    2
    3
    4
    5
    6
    $ cd themes/next
    $ git tag -l

    v6.0.0
    v6.0.1
    v6.0.2

    切换到 v6.0.1 这一 tag 指向的 release 版本。输入如下指令:

    1
    2
    3
    4
    $ git checkout tags/v6.0.1
    Note: checking out 'tags/v6.0.1'.

    HEAD is now at da9cdd2... Release v6.0.1

    切换回 master 分支,输入如下指令即可:

    1
    $ git checkout master

注意:

由于历时遗留问题,NexT主题目前一共有三个仓库:

版本 年份 仓库
v5.1.4 或更低 2014 ~ 2017 https://github.com/iissnan/hexo-theme-next
v6.0.0 ~ v7.8.0 2018 ~ 2019 https://github.com/theme-next/hexo-theme-next
v8.0.0 或更高 2020 https://github.com/next-theme/hexo-theme-next

安装时务必核对相应的地址是否正确


站点配置

数据文件

参考Github issues

next.yml 配置文件

为了避免更新出现冲突,推荐使用 Alternate Theme Config 存储配置:https://theme-next.js.org/docs/getting-started/configuration.html
注:Hexo 官方已实现此功能,在升级到 Hexo 5.0 版本后,请留意配置方式上的改变,使用 _config.next.yml 代替 source/_data/next.yml旧的 next.yml 配置方式诞生于 2015 年(iissnan/hexo-theme-next#328),已经完成其历史使命,将在一段时间后停止支持。

_config.[name].yml

所有配置都位于config文件中/_config.[name].yml。用中[name]themeoption 值替换站点配置文件例如next


用法

  1. 请确保使用的是Hexo 5.0(或更高版本)。

  2. 在站点的根目录中创建一个配置文件,例如_config.next.yml

  3. 从复制所需的NexT主题选项

    主题配置文件

    进入此配置文件。如果是第一次安装NexT,可以通过以下命令复制整个配置文件:

    1
    2
    3
    4
    #通过npm
    cp node_modules / hexo-theme-next / _config.yml _config.next.yml
    安装#通过Git
    cp theme / next / _config.yml _config.next.yml安装

设置Hexo主题

在 Hexo 站点配置文件/_config.yml)中设置主题:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

选择Scheme

Scheme是NexT提供的主题方案,在主题配置文件/next.yml)中修改。

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
  • Gemini - 类似Pisces,配色使用米黄暖色调,采用block阴影
1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

当前选择:Gemini


配置Hexo网站信息

1
2
3
4
5
6
7
8
# Site
title: # 网站标题
subtitle: # 网站副标题
description: # 描述,介绍网站的
keywords: # 网站的关键字
author: # 博主姓名
language: zh-CN # 语言:zh-CN 是简体中文
timezone: UTC # 时区

主题配置

设置菜单

  1. 设置配置文件_config.next.yml中相关内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 菜单设置为 菜单名: /菜单目录 || 菜单图标名字
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 # 显示统计信息
  • 若站点运行在子目录中,需要将链接前缀的 / 去掉
  1. 手动生成页面

    新菜单开启后没有对应文件,需要手动生成 about、tags、categories、404 页面。

    在根目录下输入以下指令新建页面:

    1
    hexo new page tags

    hexo/source/tags 文件夹中新生成index.md 文件,对内容进行修改:

    1
    2
    3
    4
    5
    6
    ---
    title: 标签
    date: 2019-06-29 11:35:42 # 时间随意
    type: "tags" # 类型一定要为tags
    comments: false # 提示这个页面不需要加载评论
    ---

设置搜索页

安装插件

1
npm install hexo-generator-searchdb --save

配置文件_config.yml

1
2
3
4
5
6
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 100
  • path:索引文件的路径,相对于站点根目录
  • field:搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面
  • limit:限制搜索的条目数

配置文件_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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

设置rss订阅

安装插件

1
npm install hexo-generator-feed --save

配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:

配置Footer

  1. v7.8.0

    配置文件_config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    footer:
    # Specify the date when the site was setup. If not defined, current year will be used.
    since: 2019
    # Icon between year and copyright info.
    icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

    # If not defined, `author` from Hexo `_config.yml` will be used.
    copyright:

    # Powered by Hexo & NexT
    powered:
    enable: false # 开启hexo驱动
    version: true # 开启hexo版本号

    theme:
    enable: false # 开启主题驱动
    version: true # 开启主题版本号

    # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
    beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

添加运行时间

先修改配置文件_config.next.yml中的custom选项:

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

在相应位置新建文件footer.swig,写入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
year - 作为date对象的年份,为4位年份值
month - 0-11之间的整数,做为date对象的月份
day - 1-31之间的整数,做为date对象的天数
hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
minutes - 0-59之间的整数,做为date对象的分钟数
seconds - 0-59之间的整数,做为date对象的秒数
microseconds - 0-999之间的整数,做为date对象的毫秒数 */
var t1 = Date.UTC(2019,12,29,18,07,00); //北京时间
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
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);
document.getElementById("sitetime").innerHTML="本站运行 "+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
}/*因为建站时间还没有一年,就将之注释掉了。需要的可以取消*/
siteTime();
</script>

隐藏强力驱动

修改hexo/themes/next/layout/_partials/footer.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    *注释掉以下代码行

<!--
<span class="post-meta-divider">|</span>
-->

<!--
{%- if theme.footer.powered %}
<div class="powered-by">
{%- set next_site = 'https://theme-next.org' %}
{%- if theme.scheme !== 'Gemini' %}
{%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
{%- endif %}
{{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
</div>
{%- endif %}
-->
  1. v8.0.0

    配置文件_config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    # Show multilingual switcher in footer.
    # 底部显示语言切换
    language_switcher: false

    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 Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

    # If not defined, `author` from Hexo `_config.yml` will be used.
    copyright:

    # Powered by Hexo & NexT
    powered: true

    # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
    beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

设置头像信息

配置文件_config.next.yml

1
2
3
4
5
avatar:
url: /images/avatar.jpg # 设置头像资源的位置
rounded: true # 开启圆形头像
opacity: 1 # 不透明的比例:0就是完全透明
rotated: false # 不开启旋转

头像的链接地址可以是:

地址
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为:avatar: /images/avatar.png

社交信息与友情链接

配置文件_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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/ # 友链的地址

侧边栏目录设置

1
2
3
4
5
6
7
8
9
10
11
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# 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. You can set it in one post through `toc_max_depth` in Front Matter.
max_depth: 6

enable:用于设置是否开启侧边栏目录
number:用于设置自动编号
wrap:用于设置当标题长度超过侧边栏长度时是否自动换行
expand_all:用于设置是否展开全部目录,否的话会自动展开正在看的那部分
max_depth:用于设置自动生成目录的最大深度,也就是生成到几级标题


返回顶部按钮

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

enable:用于设置是否开启回到顶部按钮
sidebar:用于设置是否将按钮放到侧边栏中
scrollpercent:用于设置是否显示阅读进度百分比


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

1
<!-- more -->

首页文章属性

1
2
3
4
5
6
7
post_meta:
item_text: false # 设为true 可以一行显示,文章的所有属性
created_at: true # 显示创建时间
updated_at:
enabled: true # 显示修改的时间
another_day: true # 设true时,如果创建时间和修改时间一样则显示一个时间
categories: true # 显示分类信息

字数统计、阅读时长(⚠待考)

安装插件

1
npm install hexo-word-counter

配置文件_config.next.yml

1
2
3
4
symbols_count_time:
separated_meta: true # false会显示一行
item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
item_text_total: true # 底部footer是否显示字数统计属性文字

配置文件_config.yml

1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: false
total_time: false

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

配置文件_config.next.yml

1
2
3
4
codeblock:
copy_button:
enable: false # 增加复制按钮的开关
show_result: false # 点击复制完后是否显示 复制成功 结果提示

文章底部标签显示的优化

配置文件_config.next.yml

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

Github角标

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/Siriusq
title: Follow me on GitHub

enable:用于设置是否在页面右上角显示Github三角标
permalink:后面填写你的Github地址
title:用于设置鼠标移动到图标后显示的文字


文章加密

中文说明文档

安装插件

1
npm install hexo-blog-encrypt --save

标签加密:配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
  • 对博文禁用 Tag 加密

    只需要将博文头部的 password 设置为 "" 即可取消 Tag 加密。

文章设定加密

1
2
3
4
5
---
title: Hello World
date: 2016-03-30 21:18:02
password: mikemessi
---
  • 密码优先级:文章>标签
  • 配置优先级:文章>配置文件>默认

TOC无法正常展开

已知问题,无法解决。


CSS美化

行内代码块配色

由于版本更新问题,无法从themes/next/source/css/_custom/custom.styl中直接进行修改,查询了一下最新文档决定使用custom_file_path功能,方便未来版本更新以及配置的调整。

配置文件_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

打开对应目录,新建styles.styl文件,加入以下代码:

1
2
3
4
5
6
// inline code
p code {
color: #c71585;
background: #fffafa;
margin: 2px;
}

2020/10/09 更新

原始代码无法渲染部分块内超链接,检查后发现是CSS语法层级问题,删除p后即可文章内全局渲染。


文章超链接配色

同理使用custom_file_path

配置文件source/_data/styles.styl

1
2
3
4
5
6
7
8
9
10
.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;
}
}

2020/10/09 更新

原始代码无法渲染部分块内超链接,检查后发现是CSS语法层级问题,删除p后即可文章内全局渲染。


代码行配色

配置文件_config.yml

1
2
3
4
5
6
highlight:
enable: false
...
prismjs:
enable: true
...

安装插件

1
npm install prism-themes

配置文件_config.next.yml

1
2
3
4
5
6
7
8
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
...
prism:
light: prism-atom-dark
dark: prism-atom-dark
...

参考文章

  1. 官方文档
  2. Hexo-NexT (v7.0+) 主题配置
  3. Hexo-NexT 主题个性优化 - 荷戟独彷徨