Hexo + NexT主题美化GitHub博客
在美化之前先已安装Hexo，且已下载了NexT主题。
Hexo版本：7.1.0
NexT版本：8.20.0
Hexo常用指令
参考资料：https://blog.csdn.net/vpqtxzmzezeqjj9977/article/details/122982320
npm install hexo-theme-next 方式安装的主题，路径在hexo\node_modules\hexo-theme-next下
修改NexT主题的样式
NeXT主题目录下的_config.yml文件，找到scheme，我选择的是Gemini。
#Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
修改中文
在Hexo 的配置文件_config.yml下找到language: en修改为language: zh-CN
在NexT主题的配置文件_config.yml下找到language修改为language: zh-CN
添加拓展Markdown语法的渲染器
可以使用Windows的控制台，或者是Git Bash来下载。首先移除默认渲染器，再下载新的渲染器hexo-renderer-markdown-it-plus
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it-plus --save
这个渲染器已经默认启用一些markdown插件，因此在_config.yml中添加任何配置。该插件链接：hexo-renderer-markdown-it-plus
我是用的NexT主题，在NexT主题的配置文件_config.yml中找到math，并选择katex作为公式渲染器，如下所示。如果不使用Latex公式可以不用开启，NexT官方文档有说明：https://theme-next.js.org/docs/third-party-services/math-equations
math:
...
katex:
enable: true
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: true
Hexo添加图片
下载插件hexo-image-link，插件链接：hexo-image-link。这个插件可以在本地markdown文件中使用相对路径的方式显示图片，同时发布的页面也显示同样的图片。
使用方式：
-
在Hexo的配置文件
_config.yml中设置：post_asset_folder: true。开启之后在控制台使用指令hexo new a.md，会在/source/_posts目录下创建名为a的文件夹和名为a的markdown文件，将图片放在与markdown同名的文件夹中，文件结构如下_posts ├── a │ ├── sp1.png ├── a.md -
markdown采用这样的格式插入图片：
，图片路径：source/_posts/a/sp1.jpg.
使用生成指令hexo g之后，图片会和生成后的html文件放置在一起，图片的路径被插件映射为public/2024/08/01/a/sp1.jpg
首页文章显示阅读更多
在md文件合适的位置中添加<!--more-->，不会将文章全部显示出来且会显示一个阅读更多按钮
修改代码块样式
NexT的配置文件_config.yml下找到codeblock，修改为如下设置
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: atom-one-dark
dark: atom-one-dark
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: mac
# Fold code block
fold:
enable: false
height: 500
修改行代码块
Hexo的source文件下新建_data/styles.styl，NexT主题的配置文件_config.yml下找到custom_file_path，并添加路径style: source/_data/styles.styl，sytles.styl文件的内容如下：
// 针对Code代码标签的美化
code {
padding: 2px 4px;
word-wrap: break-word;
color: #c7254e;
background: #f9f2f4;
border-radius: 3px;
font-size: 18px;
}
参考链接：https://zengfanyongcn.github.io/2022/04/17/code-background
设置mermaid
无需安装插件
参考NexT官方文档：https://theme-next.js.org/docs/tag-plugins/mermaid.html#Settings
菜单栏设置
NexT的配置文件_config.yml下找到menu，并进行如下设置：
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat
需在sources/下建立对应的文件：
$ hexo new page about
$ hexo new page tags
$ hexo new page categories
会自动在sources文件下生成about.md、tags.md、categories.md，修改md文件：
#关于
---
title: 关于
date: 2019-01-23 23:30:47
tags: about
---
# tags.md
---
title: 标签
date: 2019-01-23 23:26:43
type: tags
---
# categories.md
---
title: 类别
date: 2019-01-23 23:27:04
type: categories
---
参考链接：
其它修改
主页添加分类
step1：
$ cd your-hexo-site
$ hexo new page categories
执行完第一步，/source/目录下会产生一个categories目录。
step2：在_post文件下编写md文件时，开头添加如下：
title: Hexo + NeXT主题美化GitHub博客
categories: Others
---
这样后面生成网页时该md文件就存在于Others这个分类之中了。
参考链接：https://theme-next.iissnan.com/theme-settings.html
右上角添加GitHub Corner
NexT主题的配置文件_config.yml中设置：
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false
permalink: https://github.com/yourname
title: Follow me on GitHub
参考链接：https://hexo-next.readthedocs.io/zh-cn/latest/next/base/Github图标/
返回顶部
NexT主题的配置文件_config.yml中设置：
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true
浙公网安备 33010602011771号