Flog

阿酱日常写码的碎碎念

0%

NexT Configuration

Posted on Edited on In
Symbols count in article: 14k Reading time ≈ 12 mins.

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

返回顶部按钮

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 主题的基本配置和定制优化