熬夜伤身
安装
进入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 |
安装时务必核对相应的地址是否正确
- 跨版本升级参考文档:Update from Version 5
站点配置
数据文件
参考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]
的theme
option 值替换站点配置文件例如next
。
用法
请确保使用的是Hexo 5.0(或更高版本)。
在站点的根目录中创建一个配置文件,例如
_config.next.yml
。从复制所需的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 | # Extensions |
选择Scheme
Scheme是NexT提供的主题方案,在主题配置文件
(/next.yml
)中修改。
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
- Gemini - 类似Pisces,配色使用米黄暖色调,采用block阴影
1 | # Schemes |
当前选择:Gemini
配置Hexo网站信息
1 | # Site |
主题配置
设置菜单
- 设置配置文件
_config.next.yml
中相关内容
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 | # 本地搜索 |
path
:索引文件的路径,相对于站点根目录field
:搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面limit
:限制搜索的条目数
配置文件_config.next.yml
1 | # Local Search |
设置rss订阅
安装插件
1 | npm install hexo-generator-feed --save |
配置文件_config.yml
1 | feed: |
配置Footer
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
34footer:
# 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 | custom_file_path: |
在相应位置新建文件footer.swig
,写入以下代码
1 | <span id="sitetime"></span> |
隐藏强力驱动
修改hexo/themes/next/layout/_partials/footer.swig
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 | avatar: |
头像的链接地址可以是:
地址 | 值 |
---|---|
完整的互联网 URI | http://example.com/avatar.png |
站点内的地址 | 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png 或者 放置在 source/images/ 目录下 配置为:avatar: /images/avatar.png |
社交信息与友情链接
配置文件_config.next.yml
1 | social: |
侧边栏目录设置
1 | # Table Of Contents in the Sidebar |
enable:
用于设置是否开启侧边栏目录number:
用于设置自动编号wrap:
用于设置当标题长度超过侧边栏长度时是否自动换行expand_all:
用于设置是否展开全部目录,否的话会自动展开正在看的那部分max_depth:
用于设置自动生成目录的最大深度,也就是生成到几级标题
返回顶部按钮
1 | back2top: |
enable:
用于设置是否开启回到顶部按钮sidebar:
用于设置是否将按钮放到侧边栏中scrollpercent:
用于设置是否显示阅读进度百分比
首页文章不展示全文显示摘要
1 | <!-- more --> |
首页文章属性
1 | post_meta: |
字数统计、阅读时长(⚠待考)
安装插件
1 | npm install hexo-word-counter |
配置文件_config.next.yml
1 | symbols_count_time: |
配置文件_config.yml
1 | symbols_count_time: |
内容页里的代码块新增复制按钮
配置文件_config.next.yml
1 | codeblock: |
文章底部标签显示的优化
配置文件_config.next.yml
1 | # Use icon instead of the symbol # to indicate the tag at the bottom of the post |
Github角标
1 | # `Follow me on GitHub` banner in the top-right corner. |
enable:
用于设置是否在页面右上角显示Github三角标permalink:
后面填写你的Github地址title:
用于设置鼠标移动到图标后显示的文字
文章加密
安装插件
1 | npm install hexo-blog-encrypt --save |
标签加密:配置文件_config.yml
1 | # Security |
对博文禁用 Tag 加密
只需要将博文头部的
password
设置为""
即可取消 Tag 加密。
文章设定加密
1 |
|
- 密码优先级:文章>标签
- 配置优先级:文章>配置文件>默认
TOC无法正常展开
已知问题,无法解决。
CSS美化
行内代码块配色
由于版本更新问题,无法从themes/next/source/css/_custom/custom.styl
中直接进行修改,查询了一下最新文档决定使用custom_file_path
功能,方便未来版本更新以及配置的调整。
配置文件_config.next.yml
1 | custom_file_path: |
打开对应目录,新建styles.styl
文件,加入以下代码:
1 | // inline code |
2020/10/09 更新
原始代码无法渲染部分块内超链接,检查后发现是CSS语法层级问题,删除p
后即可文章内全局渲染。
文章超链接配色
同理使用custom_file_path
配置文件source/_data/styles.styl
1 | .post-body p a { |
2020/10/09 更新
原始代码无法渲染部分块内超链接,检查后发现是CSS语法层级问题,删除p
后即可文章内全局渲染。
代码行配色
配置文件_config.yml
1 | highlight: |
安装插件
1 | npm install prism-themes |
配置文件_config.next.yml
1 | codeblock: |