Flog

阿酱日常写码的碎碎念

0%

NexT Configuration

NexT主题配置(Version 7.8.0)

说明

声明

本教程面向Hexo NexT主题v7.3.0以上版本,兼容最新v7.8.0版本。

若使用v6.x.x或之前的版本可能会导致不兼容,或文件不存在的问题,本文中也会提醒。

其他Hexo主题不能直接套用,建议自行修改之后再使用。

阅读须知

  • Hexo目录架构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .
    ├── .deploy #部署文件夹
    ├── public #html源码,hexo g生成
    ├── scaffolds #模板
    ├── scripts #扩展脚本
    ├── source #文章源码
    | ├── _drafts #草稿
    | └── _posts #文章
    ├── themes #主题
    | ├── next #NexT主题
    ├── _config.yml #博客配置
    └── package.json #应用程序数据
  • NexT目录架构

    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
    37
    38
    ├── .github                #github信息
    ├── languages #多语言
    | ├── _en.yml #默认语言
    | └── zh-CN.yml #简体中文
    | └── zh-TW.yml #繁体中文
    ├── layout #布局,根目录下的*.swig文件是对主页,分页,存档等的控制
    | ├── _custom #可以自定义的模板,覆盖原有模板
    | | ├── head.swig #文首样式
    | | ├── header.swig #头部样式
    | | ├── sidebar.swig #侧边栏样式
    | ├── _macro #可以自定义的模板,覆盖原有模板
    | | ├── post.swig #文章模板
    | | ├── reward.swig #打赏模板
    | | ├── sidebar.swig #侧边栏模板
    | ├── _partial #局部的布局
    | | ├── head #头部模板
    | | ├── search #搜索模板
    | | ├── share #分享模板
    | ├── _script #局部的布局
    | ├── _third-party #第三方模板
    | ├── _layout.swig #主页面模板
    | ├── index.swig #主页面模板
    | ├── page #页面模板
    | └── tag.swig #tag模板
    ├── scripts #script源码
    | ├── tags #tags的script源码
    | ├── marge.js #页面模板
    ├── source #源码
    | ├── css #css源码
    | | ├── _common #*.styl基础css
    | | ├── _custom #*.styl自定义局部css
    | | └── _mixins #mixins的css
    | ├── fonts #字体
    | ├── images #图片
    | ├── js #javascript源代码
    | └── lib #引用库
    ├── _config.yml #主题配置文件
    └── README.md #说明文件
  • NexT在v7.3.0之后的版本将所有自定义custom文件转移至Hexo目录source/_data/...中。

  • 了解CSS,swig和js语法

主题配置

Hexo _config.yml的配置

Site设置

1
2
3
4
5
6
7
# Site
title: Siriusq
subtitle: Hello World!
description: UCLCS NB!
keywords:
author: Sirius
language: zh-CN

title: 填写标题
subtitle: 填写副标题
description: 简介
keywords: 关键词
author: 作者,文章中显示的作者名称
language: 设置语言,zh-CN是简体中文,en是英语,默认是德语

URL栏设置

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://Siriusq.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

url:填写博客在Github的二级域名,如 https://YourName.github.io
permalink:是生成博客页面时的路径名,一般是:year/:month/:day/:title/

翻页设置

共有两处,用于控制每一页显示多少篇博文

1
2
3
4
5
6
7
8
9
10
11
12
13
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 12
order_by: -date

# Pagination
## Set per_page to 0 to disable pagination
per_page: 12
pagination_dir: page

per_page:后设置博文数量,0代表不翻页全部平铺显示

Deployment设置

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:username/username.github.io.git
branch: master

branch:分支填写master

repo:后把username换成自己的用户名

NexT _config.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
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 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: "#f08080"

# If not defined, `author` from Hexo main config will be used.
copyright: Siriusq

powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: false

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false

since: 表示网站成立的年份,不设置的话默认是当前年份,显示为© 2019
icon: 中设置年份后面的图标,默认是心形,想修改的话去Fontawesome选择图标,然后再name栏修改
animated: 用于设置心形是否跳动
color: 用于设置图标颜色,百度对照色表查就好
copyright: 显示图标后面的版权所属,也就是作者名,不设置的话默认显示根目录配置文件中的作者名
powered: 后面的栏目用于设定是否显示Powered by Hexo以及当前主题的版本信息,显示的话设为true
theme: 后面的栏目用于设定是否显示当前主题的版本信息,显示的话将设为true

版权信息

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: en

license:用于设置版权标准,具体可以去Creative Commons查看
sidebar:用于设置是否在侧边栏显示版权标准
post:用于设置是否在文章底部显示版权信息
language:用于设置语言

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
2
3
4
5
6
7
8
9
10
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
switch_lang: /en || language
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

||前表示页面的地址,后面表示显示的图标名称
about:用于设置关于页面,没有的话在Git bash中使用hexo new page "about"创建,然后打开\source\about\index.md就可以编写了
tags:用于设置标签功能,同样使用命令hexo new page "tags"创建,然后打开source\tags\index.md并在日期后面添加一行type: "tags",写博文时在顶部加上一栏tags: []即可设置标签,多个标签中间使用,分隔
archieves:用于设置归档页面
categories:用于设置目录页面,编辑博文时在顶部加上一栏categories:就可以为博文设置所属目录

主题选择

Next有四个主题可供选择

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

选择自己喜欢的主题uncomment即可

社交网站链接设置

NexT v7.8.0 email social link bug,暂时没有得到官方的修复

所设置的 mailto:siriuskevin@foxmail.com 在转换为md转html之后会在front多出一个/

该bug可以通过修改源码解决,更多可以查看#1295

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/Siriusq || github
E-Mail: mailto:siriuskevin@foxmail.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

||前输入你社交主页的链接即可,后面用于设置图标
E-mail:栏格式为mailto:邮箱地址,在win10系统可以调用系统邮件服务自动填写收件人

头像设置

用于设置是否在侧边栏显示头像

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.gif
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true

url:后填写头像图片的路径,默认在\themes\next\source\images
rounded:用于设置是否显示圆形头像
opacity:用于设置头像透明度,1为不透明
rotated:用于设置头像鼠标移动到头像上时头像是否旋转

侧边栏目录设置

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
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
#position: left
position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
width: 320

# Sidebar Display, available values (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false
# Click any blank part of the page to close sidebar (only for Muse | Mist).
dimmer: false

position:用于设置侧边栏在左边还是右边,把要选择的位置前面的#去掉再把另一个前面加上#即可,这个选项只对PiscesGemini两个主题起作用
width:用于设置侧边栏的宽度,默认MuseMist是320,PiscesGemini是240
display:用于设置侧边栏的显示方式,只对MuseMist两个主题起作用,可以挨个试一下
offset:用于设置侧边栏距离顶部介绍的距离,只对PiscesGemini两个主题起作用
onmobile:用于设置是否在手机等宽度较小的设备上显示侧边栏,只对MuseMist两个主题起作用
dimmer:用于设置点击屏幕空白处是否关闭侧边栏,同样只对MuseMist两个主题起作用

返回顶部按钮

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:用于设置是否显示阅读进度百分比

开启阅读全文选项

用搜索找到这一段并把read_more_btn:设为true即可

1
2
3
# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true

下面这一段用于设置自动生成阅读全文选项

NexT在7.3版本之后就不再支持auto_excerpt,请添加<!-- More -->到文章中手动设置

1
2
3
4
5
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

length表示截止到的字符长度

这一段用于设置自动跳转到阅读全文选项之后的位置

1
2
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

设置完成后,在文章内加入``字段就可以在首页隐去剩下的文字并显示阅读全文按钮了

代码块复制按钮

1
2
3
4
5
6
7
8
9
10
codeblock:
# Manual define the border radius in codeblock, leave it blank for the default value: 1
border_radius:
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true
# Style: only 'flat' is currently available, leave it blank if you prefer default theme
style:

enable:用于开启代码块右上角的复制按钮
show_result:用于设置是否显示复制成功提示

打赏

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
enable: false
animation: false
#comment: Donate comment here

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

enable:用于设置是否在文章末尾显示打赏按钮
animation:用于设置打上按钮是否显示动画
reward:后面的选项去掉前面的#即可开启对应的打赏,记得替换成自己的图片,路径在\themes\next\source\images

代码块高亮主题

Next主题内置了tomorrow代码高亮主题,一共有五个,可以去Tomorrow查看预览效果,在下面的highlight_theme:中改成自己想要的即可

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

书签

在左上角显示一个书签按钮可以跳转到上一次设置书签的位置
首先执行命令git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark安装bookmark插件
然后在下面的选项中将enable:设置为true

1
2
3
4
5
6
7
# 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

黑暗模式

在config.yml文件中找到darkmode关键字

1
2
# Dark Mode
darkmode: true

设置为true即可

主题深度美化

这些美化总结一下就是可以但没必要

🈶️闲情逸致🉐️可以搞一下,这是一个大坑之后有时间再更


顶部阅读进度条

在博文页面顶部添加Reading Progress进度条,表示阅读进度,Next主题已内置配置文件

安装

切换到Next主题文件夹

1
cd themes/next

安装模块到source/lib文件夹

1
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress
修改配置文件

打开Next主题路径下的配置文件_config.yml,搜索reading_progress定位到如下代码并将enable:设置为true

1
2
3
4
5
6
# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
enable: true
color: "#ffc0cb" # 调整线条颜色
height: 3px # 调整线条高度

线条颜色可以在ATOOL查询颜色代码直接修改

升级

切换到安装目录

1
cd themes/next/source/lib/reading_progress

更新

1
git pull

加载条

用于在网页加载的过程中显示加载进度,Next主题已支持PACE功能
有多种加载动画可选

  • 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
安装

切换到Next主题文件夹

1
cd themes/next

安装模块到source/lib文件夹

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
修改配置文件

打开Next主题路径下的配置文件_config.yml,搜索pace定位到如下代码

1
2
3
4
5
6
7
8
# 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-flash

pace:设置为true
pace_theme:设置为上面Themes list:中的一种,主题样式可以在PACE查看

调整颜色

为了让进度条和主题背景相匹配,可以在./themes/next/source/lib/pace中找到相应主题的css文件并修改颜色配置
下面代码以pace-theme-flash.min.css示例

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}

.pace .pace-progress {
background: #ffc0cb;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #ffc0cb, 0 0 5px #ffc0cb;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #ffc0cb;
border-left-color: #ffc0cb;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}

使用搜索功能搜索#,定位到颜色设置,上述代码中一共有5处,颜色替换方法如下

  • ATOOL查询颜色代码直接修改
  • 使用Visual Studio Code安装css插件直接点击#修改颜色
  • 前往PACE选择颜色并复制代码直接替换原文件中的代码

默认颜色都是蓝色,上述代码修改完后是粉色

升级

切换到安装目录

1
cd themes/next/source/lib/pace

更新

1
git pull

参考

hexo 个人博客基于 NexT 主题的基本配置和定制优化