Hexo + NexT主题美化GitHub博客

在美化之前先已安装Hexo，且已下载了NexT主题。

Hexo版本：7.1.0

NexT版本：8.20.0

NeXT下载地址

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-texcopy_tex: true

Hexo添加图片

下载插件hexo-image-link，插件链接：hexo-image-link。这个插件可以在本地markdown文件中使用相对路径的方式显示图片，同时发布的页面也显示同样的图片。

使用方式：

1. 在Hexo的配置文件_config.yml中设置： post_asset_folder: true 。开启之后在控制台使用指令hexo new a.md，会在/source/_posts目录下创建名为a的文件夹和名为a的markdown文件，将图片放在与markdown同名的文件夹中，文件结构如下

   _posts├── a│   ├── sp1.png├── a.md
   

2. markdown采用这样的格式插入图片：![label](a/logo.jpg) ，图片路径： 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-darkdark: atom-one-darkprism:light: prismdark: prism-dark# Add copy button on codeblockcopy_button:enable: true# Available values: default | flat | macstyle: mac# Fold code blockfold:enable: falseheight: 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-homeabout: /about/ || fa fa-usertags: /tags/ || fa fa-tagscategories: /categories/ || fa fa-tharchives: /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
---

参考链接：

文件配置 - Hexo-NexT

菜单栏 - Hexo-NexT

其它修改

主页添加分类

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: falsepermalink: https://github.com/yournametitle: 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

参考链接

Hexo

Hexo-NexT

NexT 使用文档 (iissnan.com)

https://theme-next.js.org/docs/tag-plugins/