推荐阅读：Halo 博客配置

选择Halo还是Hexo？看完↑的第一小节后，相信你就会有答案了

一、Hexo 博客基础配置

0. 配置 GitHub 的 SSH Key

略

image-20240107200914367

建议 SSH 创建时密码留空，因为真的会忘（

1. 创建 GitHub Pages 仓库

输入 username.github.io 作为存储库名称。 将 username 替换为你的 GitHub 用户名。 例如，如果用户名为 octocat，则存储库名称应为 octocat.github.io。

存储库中 GitHub Pages 设置的屏幕截图。 存储库名称字段包含文本“octocat.github.io”，并用深橙色框出。

2. 本地安装 Hexo 博客程序

新建一个文件夹用来存放 Hexo 的程序文件，如 Hexo-Blog。打开该文件夹，右键 -> Git Bash Here。

2.1 安装 Hexo

cnpm install -g hexo-cli

2.2 Hexo 初始化和本地预览

初始化：

hexo init      # 初始化
cnpm install    # 安装组件

启动本地预览

hexo g   # 生成页面
hexo s   # 启动预览

访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功！

2.3 Hexo博客文件夹目录结构

img

2.4 部署 Hexo 到 GitHub Pages

首先安装 hexo-deployer-git：

cnpm install hexo-deployer-git --save

然后在根目录下_config.yml 文件末尾的 Deployment 部分添加：

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: main

将_config.yml 文件中的 url 修改成自己的：

url: https://用户名.github.io/

完成后运行如下命令，将网站上传部署到 GitHub Pages：

hexo d

然后稍等片刻，等待 GitHub 中 workflows 运行完毕（大约需要 1min），即可访问我们的 GitHub 域名。

image-20240107194324697

2.5 Hexo 命令总结

hexo new "文章标题"    # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

二、Hexo 博客进阶配置

本站已采用solitude主题，这里主题配置相关的内容就仅供参考了，solitude主题使用及配置可以看官方文档

1. 安装 Butterfly

1.1 安装

在 Hexo 根目录中运行：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

npm install hexo-renderer-pug hexo-renderer-stylus --save

1.2 修改主题

修改 Hexo 根目录下的_config.yml文件，将主题改为butterfly

theme: butterfly

1.3 创建新的配置文件

在 Hexo 根目录下创建_config.butterfly.yml。Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

2. 修改配置文件

修改_config.yml：

注意修改配置文件（包括主题配置文件）时的缩进问题！

2.1 设置博客个人资料

# Site
title: Rean's Blog 						#标题
subtitle: Enjoy technology and music	#副标题
description: ''							#个性签名
keywords:
author: Rean							#作者
language: zh-CN							#语言
timezone: Asia/Shanghai    				#中国的时区

2.2 图片懒加载

安装hexo-lazyload-image模块：

cnpm install hexo-lazyload-image --save

新增：

lazyload:
  enable: true
  loadingImg: /img/spin.svg

2.3 引入图片

引入本地图片（不推荐）

修改：

# 开始使用本地静态资源
post_asset_folder: true

安装插件hexo-asset-image。

# 在项目根目录下执行
npm install https://github.com/xcodebuild/hexo-asset-image.git --save

完成上述配置后，在使用命令hexo new post新建文章时，将会在source/_posts目录下创建一个与文章同名的目录。

然后配置Markdown编辑器，使得插入图片保存的目录为与文章同名的目录即可。Typora配置如下所示。

image-20240107225914436

图片引用方式：

# 引用图片的时候一定要带上目录名称作为路径（相对路径）
![本地图片](测试文章/本地图片.jpg)

原理详见：在Hexo中引入本地图片的实现 - nuccch - 博客园 (cnblogs.com)

使用图床（推荐）

这里以阿里云OSS为例，创建一个Bucket

（有需要的可以设置一下防盗链）

然后设置访问控制RAM，创建用户

设置授权，图省事可以直接用AliyunOSSFullAccess（），粒度小一点可以AliyunOSSReadOnlyAccess+自定义策略，再小一点就只给自定义策略

{
    "Version": "1",
    "Statement": [
        {
            "Action": [
                "oss:GetObject",
                "oss:PutObject",
                "oss:DeleteObject"
            ],
            "Resource": "acs:oss:*:*:你的bucket/你的路径/*",
            "Effect": "Allow"
        }
    ]
}

然后创建AccessKey（注意保存！）

然后安装PicGo，图床设置如下，区域根据自己创建桶时选的区域来填写

最后设置Typora

2.4 永久短链生成（2024/3/18更新）

Hexo 默认生成的链接太长了，而且一旦文章名字改变，链接也跟着改变。 rozbo/hexo-abbrlink这个插件可以使得Hexo 生成的链接变短，而且不会因文章名字改变而改变。

安装插件：

cnpm install hexo-abbrlink --save

在_config.yml 配置文件写入：

# abbrlink config
abbrlink:
  alg: crc32 #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex

# 更改 permalink 值
permalink: p/:abbrlink/

记得把原来的permalink:删除/注释掉（或者直接修改原来的值）！！

3. 修改主题配置文件

修改_config.butterfly.yml：

3.1 菜单（导航）栏

menu:
  主页: / || fas fa-home
  文章 || fa fa-graduation-cap:
    分类: /categories/ || fa fa-archive
    标签: /tags/ || fa fa-tags
    归档: /archives/ || fa fa-folder-open
  音乐: /music/ || fa fa-music
  # 关于作者: /about/ || fas fa-heart

3.2 代码块显示设置

highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条

img

img

img

img

img

img

同时将_config.yml中的highlight进行设置：

highlight:
  enable: false
  line_number: false
  auto_detect: false

3.3 本地搜索

首先安装搜索插件：

npm install hexo-generator-search --save

然后修改_config.butterfly.yml：

local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "此关键词下没有搜索结果: ${query}" # 如果没有查到内容相关内容显示

3.4 修改副标题

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (开启打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 ,
  # 如果有英文双引号' " ',请使用转义字元 "
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - Enjoy technology and music
  # 可以不止一个副标题，下面还可以接着
  # - 其他副标题

3.5 图片设置

图片可以用云链接或者本地路径：/themes/butterfly/source/img。

3.5.1 网站图标

可以更换成自己的图标，我这里图片分辨率取同样32*32。

# Favicon（网站图标）
favicon: /img/favicon.png

3.5.2 个人头像

avatar:
  img: /img/avatar.jpg #图片路径
  effect: false #头像会一直转圈

3.5.3 主页封面图片

# The banner image of home page
index_img: /img/banner-1.png

3.5.4 文章详情页的顶部图片

当没有在文章front-matter设置top_img和cover的情况下会显示该图。

# If the banner of page not setting, it will show the top_img
default_top_img: /img/banner-1.png

3.5.5 归档页顶部图片

# 归档子标签页图片
# The banner image of archive page
archive_img: /img/banner-1.png

3.5.6 标签页顶部图片

# tag页（标签页）
tag_img: /img/banner-1.png

3.5.7 归档页顶部图片

# category页
category_img: /img/banner-1.png

3.6 文章封面统一设置

cover:
  index_enable: true #  是否展示文章封面
  aside_enable: true
  archives_enable: true
  position: both # 封面展示的位置 left/right/both
  # 当没有设置cover时，默认展示的文章封面
  default_cover:
  # 当配置多张图片时，会随机选择一张作为 cover. 此时写法为
    - /img/SynthV_banner_Image_BG1.jpg
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover1.JPG
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover2.jpg
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover3.jpg
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover4.jpg
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover5.JPG
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover6.JPG
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover7.JPG
    - https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover8.JPG

3.7 404图片替换

# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

3.8 图片大图查看

medium_zoom: false
fancybox: true

3.9 版权样式

复制内容后面加上版权信息：

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: false  # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

文章版权信息：

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

3.10 相关文章

# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

3.11 侧边栏

# 侧边栏
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right 
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/Rean-Schwarze
  card_announcement:
    enable: true
    content: 随缘更新~ #修改公告栏信息

社交平台信息

social:
   fab fa-github: https://github.com/ || Github
   fab fa-bilibili: https://space.bilibili.com/6531436 || bilibili

可以在 Find Icons with the Perfect Look & Feel | Font Awesome 中找到想要的图标加上其他平台的信息。

image-20240107210306901

3.12 主页文章节选

在butterfly里，有四种可供选择

  1. description： 只显示description
  2. both： 优先选择description，如果没有配置description，则显示自动节选的内容
  3. auto_excerpt：只显示自动节选
  4. false： 不显示文章内容
index_post_content:
  method: 2
  length: 500 # if you set method to 2 or 3, the length need to config

description在Markdown的front-matter里添加。

3.13 Toc 目录

# toc (目錄)
toc:
  post: true
  page: false
  number: false
  expand: true # 是否展开
  style_simple: false # for post
  scroll_percent: true

3.14 背景特效

打字效果：

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: true

背景特效：

# Background effects (背景特效)
# canvas_ribbon (静止彩带)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false
# Fluttering Ribbon (动态彩带)
canvas_fluttering_ribbon:
  enable: false
  mobile: false
#星空特效
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

footer背景

# footer是否显示图片背景(与top_img一致)
footer_bg: true

3.15 字数统计

安装统计组件

cnpm install hexo-wordcount --save or yarn add hexo-wordcount

修改主题配置文件

# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

3.16 访问人数 busuanzi (UV 和 PV)

下列代码似乎不需要添加也能生效。

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

需要关闭浏览器中的广告拦截插件才能正常显示统计！

4. 创建页面

4.1 创建分类页

在 Hexo 根目录下运行：

hexo new page categories

运行完毕后，打开/source/categories/index.md，设置其 type：

type: "categories"

4.2 创建标签页

在 Hexo 根目录下运行：

hexo new page tags

运行完毕后，打开/source/tags/index.md，设置其 type：

type: "tags"

4.3 创建音乐页

在 Hexo 根目录下运行：

hexo new page music

npm install aplayer

npm install --save hexo-tag-aplayer

假如安装成功，则可以定位到主题目录\layout\includes，看看layout.pug应该出现以下字段，若不存在请手动加上。

head
   include ./head.pug
    link(rel="stylesheet" href="APlayer.min.css")
    div(id="aplayer")
    script(src="https://cdn.jsdelivr.net/gh/radium-bit/res@master/live2d/autoload.js" async)
    script(src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js" async)
 body

然后在_config.yml最后添加代码：

#aplayer
aplayer: 
  script_dir: js                      # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: css                         # Public 目录下样式目录路径，默认: 'assets/css'
  #cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  #style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  #meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  #meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  #externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同meting: true

最后，在\source\music\index.md中修改：

---
title: 来听歌吧
date: 2024-01-07 12:41:51
type: music
aplayer: true
top_img: false
comments: false
aside: false
---

<font color=#31c27c size=3>QQ音乐（好像听不了）</font>

{% meting "002tswK804XaPE" "tencent" "song" "mutex:false" "preload:none" %}

<font color=#e60026 size=3>网易云音乐</font>

{% meting "2106465174" "netease" "song" "mutex:false" "preload:none" %}

有关 {% meting %} 的选项列表如下：

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置

添加本地音乐

在music文件夹内新建index文件夹（若不存在），然后将资源文件都放进去。

方法1

在index.md内添加：

{% aplayer "孤帆和岛" "尚辰、喧笑、朝歌夜弦" "/music/index/尚辰、喧笑、朝歌夜弦 - 孤帆和岛.flac" "/music/index/尚辰、喧笑、朝歌夜弦 - 孤帆和岛.jpg" %}
标签参数
  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: （可选）播放器袖珍风格
  • autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: （可选）歌词文件 URL 地址

此方法调用.lrc文件目前没摸索到正确的方法，所以采用另一个比较笨的办法。

方法2

除了使用标签 lrc 选项来设定歌词，你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中：

{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

4.4 添加全局吸底APlayer

在主题配置文件中，插入：

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: true
  exclude:
    # - xxxx
    # - xxxx

美化与调整

在\themes\butterfly\source\css\custom.css中添加：

/* Aplayer日间模式调整 */
/* 背景色 */
.aplayer {
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

.aplayer.aplayer-fixed .aplayer-lrc:after,
.aplayer.aplayer-fixed .aplayer-lrc:before {
  display: none;
}

.aplayer.aplayer.aplayer-fixed .aplayer-body {
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
}

/* 滚动条 */
.aplayer .aplayer-list ol::-webkit-scrollbar {
  width: 5px;
}

.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--theme-color) !important;
}

.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-color) !important;
}

/* 圆角 */
.aplayer.aplayer-fixed .aplayer-list {
  border-radius: 6px 6px 0 0 !important;
}

.aplayer.aplayer-fixed .aplayer-miniswitcher {
  border-radius: 0 6px 6px 0 !important;
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  transition: 0.28s !important;
  border-radius: 6px !important;
}

/* 选中与播放中歌曲激活颜色 */
.aplayer .aplayer-list ol li:hover {
  background: var(--theme-color) !important;
}

.aplayer .aplayer-list ol li.aplayer-list-light {
  background: var(--theme-color) !important;
}

/* 歌词 */
.aplayer-lrc p {
  color: #ffffff !important;
  text-shadow: #000000 1px 0 0, #000000 0 1px 0, #000000 -1px 0 0, #000000
      0 -1px 0 !important;
}

/* Aplayer黑暗模式 */
[data-theme="dark"] .aplayer {
  background: rgba(22, 22, 22, 0.6) !important;
  color: rgb(255, 255, 255);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .aplayer.aplayer-fixed .aplayer-body {
  background: rgba(22, 22, 22, 0.6) !important;
  color: rgb(255, 255, 255);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

[data-theme="dark"]
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-time
  .aplayer-icon
  path {
  fill: #d4d4d4;
}

[data-theme="dark"] .aplayer .aplayer-list ol li:hover {
  background: var(--theme-color) !important;
}

[data-theme="dark"] .aplayer .aplayer-list ol li.aplayer-list-light {
  background: var(--theme-color) !important;
}

[data-theme="dark"] .aplayer .aplayer-info .aplayer-controller .aplayer-time {
  color: #d4d4d4;
}

[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-index {
  color: #d4d4d4;
}

[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-author {
  color: #d4d4d4;
}

注入css

在主题配置文件中，插入：

# Inject
# ps：引入自定义css、js
#     css文件在head引入，js文件在bottom里引入，有的js要求在head引入，不然无法生效
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# ps: 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head: #注入自定义css
    - <link rel="stylesheet" href="/css/custom.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom: #注入自定义js
    - <div class="aplayer no-destroy" data-id="421801417" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="false"> </div>
      # - <script src="/js/script.js?v1"></script>
    # - <script src="/xxxx"></script>

Aplayer html 参数解释

与 meting 参数基本相同，区别是选项名称前面多了data-字段。

5. 添加评论功能

此处选择使用 Giscus 以及 Valine 双评论系统。

5.1 更改主题配置

comments:
  use: Giscus,Valine # 可实现单评论、双评论(最多两个)
  text: true # 是否显示评论服务商的名字
  lazyload: true # 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启lazyload后，评论数将不显示）
  count: true # 是否在文章顶部显示评论数，livere、Giscus 和 utterances 不支持评论数显示
  card_post_count: false # 是否在首页文章卡片显示评论数，gitalk、livere 、Giscus 和 utterances 不支持评论数显示

5.2 Giscus

利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。

5.2.1 安装 Giscus

点击链接：GitHub Apps - giscus

img

选择自己博客的仓库，点击install。

5.2.2 配置仓库 Discussions

打开仓库的 Settiing ，在 Features 中找到 Discussions 勾选上。

image-20240108122131371

然后建立一个Announcements的分类。

img

5.2.3 进入 Giscus 配置

打开链接：giscus

image-20240108122345633

选择自己的博客仓库，映射关系选择URL，分类选择Announcemes。

配置完后，可以在启用 giscus 部分复制相关信息到主题配置文件中。

image-20240108122508662

# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  theme:
    light: light
    dark: dark
  option:

5.3 Valine

  1. 访问LeanCloud，进行注册，登陆，实名认证。
  2. 创建 Valine 应用，名称任意。
  3. 进入对应的应用，点击 设置 -> 应用 凭证，获取AppID、AppKey、服务器地址。
  4. 修改主题配置文件：
# valine
# https://valine.js.org
valine:
  appId: 
  appKey: 
  #查询下面的网站，选择评论的适合出现的图像 https://valine.js.org/#/avatar
  avatar: monsterid # gravatar style 
  #你的对应的服务器的地址，就在appid那一页的下面
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  #评论系统的背景
  bg: # valine background
  #是否允许游客评论
  visitor: false
  #评论区显示的文字
  placeholder: 留下你的足迹o(*￣▽￣*)ブ
  #每一页最大的评论数量
  pageSize: 15
  option:

三、开始使用

1. 创建文章

进入博客所在目录，右键打开 Git Bash Here，创建博文：

hexo new "文章标题"

然后就可以在source/_post文件夹内找到创建的.md文件进行编辑。

2. 编辑格式

在Markdown文件顶部可以进行格式的编辑。

2.1 分类 categories

# 这是默认的写法，给文章添加一个分类123。
categories: 123
# 这会将文章分类123/456子分类目录下。
categories: [123, 456]
# 同样，这会将文章分类到123/456子分类目录下。
categories:
   - 123
   - 456
# 多标签写法，文章被分类到123、456以及123的子分类789这3个分类下面，官方指定写法。
categories:
   - [123]
   - [456]
   - [123, 789]

2.2 标签 tags

# 方法1：
tags:
  - 123
  - 456
# 方法2：
tags: [123, 456]

2.3 文章封面设置

top_img: /img/hello-1.png # 顶部背景图
cover: /img/hello-1.png   # 文章封面

放在themes\butterfly\source\img里面哦

2.4 文章描述

description: 描述

3. 部署

运行命令：

hexo g -d

等待约 1min 即可。

四、参考链接

使用 Hexo+GitHub 搭建个人免费博客教程（小白向） - 知乎 (zhihu.com)

GitHub Pages 快速入门 - GitHub 文档

hexo博客中tags与categories用法 - 知乎 (zhihu.com)

Butterfly 安裝文檔(一) 快速開始 | Butterfly

【Hexo】Hexo搭建Butterfly主题并快速美化_hexo主题butterfly配置-CSDN博客

Hexo博客 | 采用随机图片作为博客封面背景，真香！-腾讯云开发者社区-腾讯云 (tencent.com)

Hexo新建标签、分类、归档等页面_hexo new page-CSDN博客

hexo侧边栏社交小图标设置 - 简书 (jianshu.com)

Butterfly 安裝文檔(三) 主題配置-1 | Butterfly

在Hexo中引入本地图片的实现 - nuccch - 博客园 (cnblogs.com)

如何在Hexo博客Butterfly主题开启Aplayer和“音乐”页面_butterfly 增加音乐页-CSDN博客

hexo-tag-aplayer/docs/README-zh_cn.md at master · MoePlayer/hexo-tag-aplayer (github.com)

https://blog.saop.cc/p/8dc9/

hexo-butterfly主题-giscus评论系统设置 - 知乎 (zhihu.com)