Hexo基本使用
作者: 時光
原文: https://blog.shiguang666.eu.org/2023/12/25/5c114e5214cc
来源: 時光的博客园子
1、初始化
需要node 环境，不再赘述node安装过程
推荐使用cnpm进行安装
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装好后需要配置下环境变量，将 node_global目录添加到path环境变量
使用 cnpm -v 查看cnpm版本并验证是否安装配置成功
以下npm 命令可替换为 cnpm 命令
# 安装hexo脚手架
$ npm install hexo-cli -g
# 初始化 会自动创建一个blog目录
$ hexo init blog
# 切换到blog目录
$ cd blog
# 安装依赖
$ npm install
# 运行服务 可简写为 hexo s
$ hexo server
hexo 默认端口为4000，如果一切顺利的话，此时访问 localhost:4000 或者 127.0.0.1：4000 即可访问
初始化的项目会有篇Hello World的文章，文章源文件可以到 blog\source\_posts 目录内查看
2、常用命令
init
$ hexo init [folder]
新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
本命令相当于执行了以下几步：
- Git clone hexo-starter 和 hexo-theme-landscape 主题到当前目录或指定目录。
- 使用 Yarn 1、pnpm 或 npm 包管理器下载依赖（如有已安装多个，则列在前面的优先）。npm 默认随 Node.js 安装。
new
$ hexo new [layout] <title>
新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
$ hexo new "post title with whitespace"
| 参数 | 描述 |
|---|---|
-p, --path |
自定义新文章的路径 |
-r, --replace |
如果存在同名文章，将其替换 |
-s, --slug |
文章的 Slug，作为新文章的文件名和发布后的 URL |
默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录：
hexo new page --path about/me "About me"
以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"
注意！title 是必须指定的！如果你这么做并不能达到你的目的：
hexo new page --path about/me
此时 Hexo 会创建 source/_posts/about/me.md，同时 me.md 的 Front Matter 中的 title 为 "page"。这是因为在上述命令中，hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。
generate
$ hexo generate
生成静态文件。
| 选项 | 描述 |
|---|---|
-d, --deploy |
文件生成后立即部署网站 |
-w, --watch |
监视文件变动 |
-b, --bail |
生成过程中如果发生任何未处理的异常则抛出异常 |
-f, --force |
强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate |
-c, --concurrency |
最大同时生成文件的数量，默认无限制 |
该命令可以简写为
$ hexo g
publish
$ hexo publish [layout] <filename>
发表草稿。
server
$ hexo server
启动服务器。默认情况下，访问网址为： http://localhost:4000/。
| 选项 | 描述 |
|---|---|
-p, --port |
重设端口 |
-s, --static |
只使用静态文件 |
-l, --log |
启动日记记录，使用覆盖记录格式 |
deploy
$ hexo deploy
部署网站。
| 参数 | 描述 |
|---|---|
-g, --generate |
部署之前预先生成静态文件 |
该命令可以简写为：
$ hexo d
clean
$ hexo clean
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。
list
$ hexo list <type>
列出网站数据。
version
$ hexo version
显示 Hexo 版本。
3、提交到GitHub
3.1 创建仓库
在Github上新创建一个仓库，仓库名只能为 xxx.github.io
将xxx替换为github登录名，因为一会要用到Github pages服务
复制仓库地址
在_config.yml文件中添加仓库信息
deploy:
type: git
repo: https://github.com/xiangyangdev/xiangyangdev.github.io.git
branch: master
注意 branch 默认主分支 是 master 或者main
3.2 生成SSH并关联Github
首先需要配置一下Git的user.name和user.email信息
$ git config user.name "your github account"
$ git config user.email "your email"
这里的user.name输入你的GitHub用户名，user.email输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户,配置之后可以使用以下命令查看配置的用户信息
$ git config user.name
$ git config user.email
然后执行下面的命令创建SSH
$ ssh-keygen -t rsa -C "your email"
输入命令之后会提示输入密码，不用管直接一路回车，直到出现如下界面
然后可以在你的计算机用户（如WIndows为C:/Users/xxx/）下面看到自动生成了一个.ssh文件夹，可以看到.ssh文件下面有两个个文件id_rsa和id_rsa.pub
ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你连接自己的GitHub账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。
到Github => 点击头像 => settings => SSH and GPG keys => new SSH key
Title可随意填写，把id_rsa.pub里面的内容复制到Key里面，然后点击Add SSH Key就可以了
输入下面的命令可以查看配置是否成功
$ ssh -T git@github.com
3.3 一键部署
安装 hexo-deployer-git 用于一键部署
$ npm install hexo-deployer-git --save
安装好后生成下静态文件
$ hexo generate # 或者 hexo g
一键部署
$ hexo deploy # 或者 hexo d
若出现 ERROR Deployer not found: git 错误则表明hexo-deployer-git插件未安装成功，重新安装一下即可
当看到命令窗口打印INFO Deploy done:git就说明部署成功了，可以到github查看提交的代码
部署完成后稍等片刻你便可以访问 https://your_github_name.github.io/ 来预览你的博客了
3.2 跳过渲染 README.md 文件
通常情况下每个项目下都应该有一个 README.md 的项目介绍文件，但由于hexo仅保留 public 目录下的源码文件，如果我们想要保留 README.md文件，则需要在 source根目录创建该文件
然后修改_config.yml 下的skip_render 内容，跳过指定文件的渲染 ，添加需要忽略的文件或目录
修改完成之后需要重新清理缓存生成动态文件，你可以使用以下命令
$ hexo clean && hexo g && hexo d
然后在github上就能看到 README.md 文件了
3.3 绑定自定义域名
首先添加一条CNAME 记录，目标地址为github博客域名，即 your_github_name.github.io
然后在 source 目录下创建一个 CNAME 文件，注意不带后缀名
目录结构如下
把CNAME 文件添加到 skip_render ，跳过该文件的渲染
在github => settings => pages => Custom domain 关联我们的域名
开启强制HTTPS
如果不能开启需要检查DNS解析是否正常，CNAME记录不要开启小云朵，一般更换域名后一个小时左右再刷新该页面即可开启强制HTTPS
保存成功后就可以用我们关联的域名进行访问了
4、博客美化
4.1 更换主题
Hexo官网上面有非常多好看的主题，你可以选择自己喜欢的主题下载下来放到 themes文件夹下面
比较好看的主题有 Butterfly、Fluid、Indigo、Matery等，这里以更换为Matery主题为例。
首先点击 官方下载地址 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。
当然你也可以使用 git clone 命令来下载，例如下载Butterfly主题
$ cd blog
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
然后修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: butterfly
4.2 _config.yml配置说明
网站
| 参数 | 描述 |
|---|---|
title |
网站标题 |
subtitle |
网站副标题 |
description |
网站描述 |
keywords |
网站的关键词。支持多个关键词，多个用逗号分隔。 |
author |
您的名字 |
language |
网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。 |
timezone |
网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。 |
其中，description 主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author 参数用于主题显示文章的作者。
示例：
title: 時光
subtitle: '時光的博客园子'
description: '時光的博客园子'
keywords: '博客,時光,時光的博客,時光博客园子,实用博客,开源,共享'
author: 時光
language: zh-CN
timezone: 'Asia/Shanghai'
网址
| 参数 | 描述 | 默认值 |
|---|---|---|
url |
网址, 必须以 http:// 或 https:// 开头 |
|
root |
网站根目录 | url's pathname |
permalink |
文章的 永久链接 格式 | :year/:month/:day/:title/ |
permalink_defaults |
永久链接中各部分的默认值 | |
pretty_urls |
改写 permalink 的值来美化 URL |
|
pretty_urls.trailing_index |
是否在永久链接中保留尾部的 index.html，设置为 false 时去除 |
true |
pretty_urls.trailing_html |
是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) |
true |
网站存放在子目录
如果您的网站存放在子目录中，例如
http://example.com/blog，则请将您的url设为http://example.com/blog并把root设为/blog/。
例如：
# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/
示例：
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.shiguangdev.eu.org
permalink: :year/:month/:day/:hash/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
目录
| 参数 | 描述 | 默认值 |
|---|---|---|
source_dir |
资源文件夹，这个文件夹用来存放内容。 | source |
public_dir |
公共文件夹，这个文件夹用于存放生成的站点文件。 | public |
tag_dir |
标签文件夹 | tags |
archive_dir |
归档文件夹 | archives |
category_dir |
分类文件夹 | categories |
code_dir |
Include code 文件夹，source_dir 下的子目录 |
downloads/code |
i18n_dir |
国际化（i18n）文件夹 | :lang |
skip_render |
跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。 |
例如：
skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染
提示
如果您刚刚开始接触 Hexo，通常没有必要修改这一部分的值。
示例：
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
- "README.md"
- "CNAME"
文章
| 参数 | 描述 | 默认值 |
|---|---|---|
new_post_name |
新文章的文件名称 | :title.md |
default_layout |
预设布局 | post |
auto_spacing |
在中文和英文之间加入空格 | false |
titlecase |
把标题转换为 title case | false |
external_link |
在新标签中打开链接 | true |
external_link.enable |
在新标签中打开链接 | true |
external_link.field |
对整个网站（site）生效或仅对文章（post）生效 |
site |
external_link.exclude |
需要排除的域名。主域名和子域名如 www 需分别配置 |
[] |
filename_case |
把文件名称转换为 (1) 小写或 (2) 大写 | 0 |
render_drafts |
显示草稿 | false |
post_asset_folder |
启用 资源文件夹 | false |
relative_link |
把链接改为与根目录的相对位址 | false |
future |
显示未来的文章 | true |
highlight |
代码块的设置, 请参考 Highlight.js 进行设置 | |
prismjs |
代码块的设置, 请参考 PrismJS 进行设置 |
相对地址
默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为
example.com，您有一篇文章名为hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。
分类 & 标签
| 参数 | 描述 | 默认值 |
|---|---|---|
default_category |
默认分类 | uncategorized |
category_map |
分类别名 | |
tag_map |
标签别名 |
日期 / 时间格式
Hexo 使用 Moment.js 来解析和显示时间。
| 参数 | 描述 | 默认值 |
|---|---|---|
date_format |
日期格式 | YYYY-MM-DD |
time_format |
时间格式 | HH:mm:ss |
updated_option |
当 Front Matter 中没有指定 updated 时 updated 的取值 |
mtime |
updated_option
updated_option控制了当 Front Matter 中没有指定updated时，updated如何取值：
mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。date: 使用date作为updated的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变empty: 直接删除updated。使用这一选项可能会导致大部分主题和插件无法正常工作。
use_date_for_updated选项已经在 v7.0.0+ 中被移除。请改为使用updated_option: 'date'。
分页
| 参数 | 描述 | 默认值 |
|---|---|---|
per_page |
每页显示的文章量 (0 = 关闭分页功能) | 10 |
pagination_dir |
分页目录 | page |
例如：
pagination_dir: 'page'
# http://example.com/page/2
pagination_dir: 'awesome-page'
# http://example.com/awesome-page/2
扩展
| 参数 | 描述 |
|---|---|
theme |
当前主题名称。值为false时禁用主题 |
theme_config |
主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置 |
deploy |
部署部分的设置 |
meta_generator |
Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签 |
示例：
## Themes
theme: butterfly
# Deployment
deploy:
type: git
repo: https://github.com/xxxxxxxxx/xxxxxxxxx.github.io.git
branch: master
包括或不包括目录和文件
在 Hexo 配置文件中，通过设置 include/exclude 可以让 Hexo 进行处理或忽略某些目录和文件夹。你可以使用 glob 表达式 对目录和文件进行匹配。
include 和 exclude 选项只会应用到 source/ ，而 ignore 选项会应用到所有文件夹.
| 参数 | 描述 |
|---|---|
include |
Hexo 默认会不包括 source/ 下的文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。 |
exclude |
Hexo 不包括 source/ 下的这些文件和目录 |
ignore |
Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件 |
例如：
# 处理或不处理目录或文件
include:
- ".nojekyll"
# 处理 'source/css/_typing.css'
- "css/_typing.css"
# 处理 'source/_css/' 中的任何文件，但不包括子目录及其其中的文件。
- "_css/*"
# 处理 'source/_css/' 中的任何文件和子目录下的任何文件
- "_css/**/*"
exclude:
# 不处理 'source/js/test.js'
- "js/test.js"
# 不处理 'source/js/' 中的文件、但包括子目录下的所有目录和文件
- "js/*"
# 不处理 'source/js/' 中的文件和子目录下的任何文件
- "js/**/*"
# 不处理 'source/js/' 目录下的所有文件名以 'test' 开头的文件，但包括其它文件和子目录下的单文件
- "js/test*"
# 不处理 'source/js/' 及其子目录中任何以 'test' 开头的文件
- "js/**/test*"
# 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render'，或者在要忽略的文件的文件名之前加一个下划线 '_'
# 在这里配置一个 - "_posts/hello-world.md" 是没有用的。
ignore:
# 忽略任何一个名叫 'foo' 的文件夹
- "**/foo"
# 只忽略 'themes/' 下的 'foo' 文件夹
- "**/themes/*/foo"
# 对 'themes/' 目录下的每个文件夹中忽略名叫 'foo' 的子文件夹
- "**/themes/**/foo"
列表中的每一项都必须用单引号或双引号包裹起来。
include 和 exclude 并不适用于 themes/ 目录下的文件。如果需要忽略 themes/ 目录下的部分文件或文件夹，可以使用 ignore 或在文件名之前添加下划线 _。
source/_posts文件夹是一个例外，但该文件夹下任何名称以_开头的文件或文件夹仍会被忽略。不建议在该文件夹中使用include规则。
使用代替配置文件
可以在 hexo-cli 中使用 --config 参数来指定自定义配置文件的路径。你可以使用一个 YAML 或 JSON 文件的路径，也可以使用逗号分隔（无空格）的多个 YAML 或 JSON 文件的路径。例如：
# 用 'custom.yml' 代替 '_config.yml'
$ hexo server --config custom.yml
# 使用 'custom.yml' 和 'custom2.json'，优先使用 'custom3.yml'，然后是 'custom2.json'
$ hexo generate --config custom.yml,custom2.json,custom3.yml
当你指定了多个配置文件以后，Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml。如果遇到重复的配置，排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。
例如，使用 --config 指定了两个自定义配置文件：
$ hexo generate --config custom.yml,custom2.json
如果 custom.yml 中指定了 foo: bar，在 custom2.json 中指定了 "foo": "dinosaur"，那么在 _multiconfig.yml 中你会得到 foo: dinosaur。
使用代替主题配置文件
通常情况下，Hexo 主题是一个独立的项目，并拥有一个独立的 _config.yml 配置文件。
除了自行维护独立的主题配置文件，你也可以在其它地方对主题进行配置。
配置文件中的 theme_config
该特性自 Hexo 2.8.2 起提供
# _config.yml
theme: "my-theme"
theme_config:
bio: "My awesome bio"
foo:
bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
foo:
baz: 'b'
最终主题配置的输出是：
{
bio: "My awesome bio",
logo: "a-cool-image.png",
foo: {
bar: "a",
baz: "b"
}
}
独立的 _config.[theme].yml 文件
该特性自 Hexo 5.0.0 起提供
独立的主题配置文件应放置于站点根目录下，支持 yml 或 json 格式。需要配置站点 _config.yml 文件中的 theme 以供 Hexo 寻找 _config.[theme].yml 文件。
# _config.yml
theme: "my-theme"
# _config.my-theme.yml
bio: "My awesome bio"
foo:
bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
foo:
baz: 'b'
最终主题配置的输出是：
{
bio: "My awesome bio",
logo: "a-cool-image.png",
foo: {
bar: "a",
baz: "b"
}
}
我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题，那么这些信息对你将会非常有用：Hexo 在合并主题配置时，Hexo 配置文件中的
theme_config的优先级最高，其次是_config.[theme].yml文件，最后是位于主题目录下的_config.yml文件。
4.3、Butterfly主题配置
Hexo官网上面有非常多好看的主题，你可以选择自己喜欢的主题下载下来放到 themes文件夹下面
比较好看的主题有 Butterfly、Fluid、Matery、Kira 、Ayer 、Annie 等，这里以更换为Matery主题为例。
首先点击 官方下载地址 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。
当然你也可以使用 git clone 命令来下载，例如下载Butterfly主题
$ cd blog
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
然后修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: butterfly
按照官方建议，为了减少升级主题后带来的不便，可以将主题配置复制到与主配置同级目录内
在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)
注意： 不要把主题目录的 _config.yml 删掉
注意： 以后只需要在 _config.butterfly.yml 进行配置就行。
如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。
Hexo会自动合併主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。
4.3.1、网站背景
可以是网络地址，也可以是文件相对路径
# The banner image of home page
index_img: /img/bg.jpg
一般情况下，source目录为资源文件根目录
效果如下
4.3.2、头像
修改 主题配置文件
avatar:
img: /img/avatar.png
effect: true # 头像会一直转圈
4.3.3、网站图标
favicon: /img/avatar.png
4.3.4、导航栏设置
nav:
logo: /img/avatar.png # image
display_title: true
fixed: false # fixed navigation bar
目录
4.3.5、社交图标
Butterfly支持 font-awesome v6 图标.
书写格式 图标名：url || 描述性文字 || color
social:
fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
fas fa-envelope: mailto:xxxxxx@gmail.com || Email || "#000000"
图标名可在这寻找
4.3.6、配置文章链接转数字或字母
$ npm install hexo-abbrlink --save
在 _config.yml文件中进行配置：
permalink: posts/:abbrlink/
# or
permalink: posts/:abbrlink.html
新增以下配置
# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
drafts: false #(true)Process draft,(false)Do not process draft. false(default)
# Generate categories from directory-tree
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
enable: true #true(default)
depth: #3(default)
over_write: false
auto_title: false #enable auto title, it can auto fill the title by path
auto_date: false #enable auto date, it can auto fill the date by time today
force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.
4.3.7、本地搜索依赖
$ npm install hexo-generator-search --save
在 _config.yml文件中进行配置：
# 本地搜索
search:
path: search.xml
field: all
content: true
主题的配置文件也需修改，此处仍以Butterfly主题为例，修改 _config.butterfly.yml配置信息
# Local search
local_search:
enable: true
4.3.8、百度主动推流
deploy:
- type: baidu_url_submitter # 百度主动推送
4.3.9、live2d
# 安装live2d
npm install --save hexo-helper-live2d
# 安装模型
npm install --save live2d-widget-model-koharu
在 _config.yml文件中进行配置：
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true #开关插件版看板娘
scriptFrom: local # 默认
# scriptFrom: https://cdn.cbd.int/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-koharu # npm-module package name
# use: https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json # 你的自定义 url
display:
position: left #控制看板娘位置
width: 150 #控制看板娘大小
height: 300 #控制看板娘大小
mobile:
show: false # 手机中是否展示
4.3.10、sitemap
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev
在 _config.yml文件中进行配置：
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
path: sitemap.xml
rel: false
tags: true
categories: true
# https://github.com/coneycode/hexo-generator-baidu-sitemap
baidusitemap:
path: baidusitemap.xml
4.3.11、Rss
npm install hexo-generator-feed --save
在 _config.yml文件中进行配置：
# https://github.com/hexojs/hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
rss: /atom.xml
4.3.12、追番插件
npm install hexo-bilibili-bangumi --save
# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
enable: true
path:
vmid: 372204786
title: '追番列表'
quote: '生命不息，追番不止！'
show: 1
lazyload: false
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value
cinema: # 追剧设置
enable: false
path:
vmid: 372204786
title: '追剧列表'
quote: '生命不息，追剧不止！'
show: 1
lazyload: true
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value
主题配置文件开启懒加载
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
enable: true
4.3.13、百度主动推送
npm install hexo-baidu-url-submit --save
4.3.14、aplayer 音乐播放器
安装插件
npm install hexo-tag-aplayer --save
修改主题配置文件：
aplayerInject:
enable: false
per_page: true
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>
# aplayer音乐
- <div class="aplayer no-destroy" data-id="10051718332" data-server="netease" data-type="playlist" data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>
修改以下参数配置自己喜欢的歌单
| id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
|---|---|---|
| server | 必须值 | 音乐平台: netease(即网易), tencent, kugou, xiami, baidu |
| type | 必须值 | song, playlist, album, search, artist |
以网易云为例，登录网易云网页版，找到自己的歌单，可以在浏览器地址栏查看歌单播放列表id
4.3.15、设置关于页、分类页、标签页
butterfly 主题默认带有不少菜单，如关于（about）、分类（categories）、标签（tags）等，默认处于注释状态，将需要取消的菜单注释掉，然后生成相应的 page 即可。
打开 ~\themes\butterfly\_config.yml 文件，找到 menu 相关的设置，取消掉需要的菜单项的注释。重新生成部署后，可以看到新增的菜单项
但是单击后会报如下错误
Cannot GET /about/
Cannot GET /tags/
Cannot GET /categories/
- 这是因为还需要运行如下命令新建相关 page
hexo new page "about"
hexo new page "tags"
hexo new page "categories"
- 新建 page 后，会在 source 目录下新建
about、tags、categories文件夹，每个文件夹下还会创建一个index.md文件表示关于、标签页分类页面，编辑这三个MarkDown文件可以自定义这三个页面的内容. - 最后一步，编辑各页面对应的
index.md文件，增加 type 即可。注意冒号 : 后必须空一格，title 和 date 是默认生成的。重新部署后能够看到效果。
---
title: about
date: 2021-03-13 15:21:30
type: "about"
---
---
title: tages
date: 2021-03-13 15:21:30
type: "tags"
---
---
title: categories
date: 2021-03-13 15:21:30
type: "categories"
---
- 在新建博文的头部，直接输入该博文的分类、标签等即可。分类只能有一个，标签能有多个，多个标签不能一行，注意下面的格式。
---
title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
categories: # 分类
- 分类 # 只能由一个
tags: # 标签
- PS3 # 能有多个
- Games # 一个标签一行
---
摘要
<!--more-->
正文
设置好后重启生效，效果如下：
可以根据需要更改目录显示名和页面titile更改标题
效果如下
4.3.16、相册
可参考 Hexo添加相册
在主题配置里添加相册目录
在 blog\source目录下新建一个目录用于存放相册文件，例如 gallery
在其子目录下新建 index.html 或者 index.md文件
写法如下
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
- name：图库名字
- description：图库描述
- link：连接到对应相册的地址
- img-url：图库封面的地址
例如：
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/wallpaper' https://img2023.cnblogs.com/blog/2233039/202403/2233039-20240301000822337-2125206689.jpg %}
</div>
新建一个.md文件用于存放预览的图片，文件名称与目录中引用的路径名称一致，例如 wallpaper.md
引入需要预览的图片，格式如下：
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 图片格式
{% endgallery %}
说明：
| 参数 | 解释 |
|---|---|
| lazyload | 【可选】点击按钮加载更多图片，填写 true/false。默认为 false。 |
| rowHeight | 【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 220。 |
| limit | 【可选】每次加载多少张照片。默认为 10。 |
其他示例：
{% gallery %}
markdown 图片格式
{% endgallery %}
{% gallery true,220,10 %}
markdown 图片格式
{% endgallery %}
{% gallery true,,10 %}
markdown 图片格式
{% endgallery %}
如下：
重新执行 hexo g 生成网页文件，即可预览
相册也可在其他文章中引用
展示效果如下
4.3.17、评论
配置可参考
开启双评论
最多支持两种评论系统
开启双评论后如下所示
设置文章隐藏评论
某些文章我们不希望显示评论，例如标签页，只需在文章源信息上添加 comments: false 即可
5、源文件备份
5.1、源文件首次备份
新建一个空仓库，可以设置为私有，不公开
复制仓库地址
克隆仓库到本地
git clone https://github.com/xxxxx/xxx.git
创建 .gitignore 忽略文件
touch .gitignore
写入以下内容
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml
将博客文件全部复制到该仓库下
git add .
git commit -m 'backup'
git push
这样就将源文件提交到新仓库了
更新文件后使用以下命令进行备份
git add .
git commit -m 'backup'
git push
5.2、 后续更新一键脚本
由于每次更新后都要输入大量命令行十分麻烦，遂创建一键部署脚本方便备份部署
在博客根目录下创建deploy.sh文件，写入
echo "Start"
git add .
git commit -m 'backup'
git push
echo "Finish"
echo 按任意键继续
read -n 1
保存后，在博客根目录双击执行或用命令./deploy.sh 即可实现博客的一键备份并部署
5.3、恢复博客
5.3.1、基础环境搭建
Hexo博客基础环境已经搭好：比如安装npm、git、nodejs、hexo安装…
5.3.2、克隆项目到本地
克隆仓库到本地
git clone https://github.com/xxxxx/xxx.git
5.3.3、恢复博客
在clone来的文件夹里执行
npm install hexo-cli
npm install
npm install hexo-deployer-git
这样博客源文件就成功移植了，再用hexo clean、hexo g、hexo d即可部署完成
若有引用插件，使用 hexo g 生成网页文件时可能会出错，安装即可
例如
npm install hexo-abbrlink --save
常见错误
2.1 Cannot find module 'esprima'
手动安装一下即可
npm install esprima
2.2 Asset render failed: css/style.css
由于无法加载css，访问服务如下所示
升级一下 hexo版本即可
查看hexo 版本
$ hexo version
升级命令如下：
$ npm i hexo-cli -g
$ npm update
