3.Butterfly主题安装配置

一、安装Butterfly主题

三、更换主题

1、下载主题

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

2、应用主题

修改hexo根目录下的_config.yml,把主题改成butterfly

3、安装插件

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

为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做）。

在 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的配置，其优先度较高。

二、基本配置

在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

网站

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
author	您的名字
language	网站使用的语言
timezone	网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数	描述
url	网址
root	网站根目录
permalink	文章的 永久链接 格式
permalink_defaults	永久链接中各部分的默认值

在这里，你需要把url改成你的网站域名。

permalink，也就是你生成某个文章时的那个链接格式。

比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp。

以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找 永久链接 。

参数	结果
:year/:month/:day/:title/	2013/07/14/hello-world
:year-:month-:day-:title.html	2013-07-14-hello-world.html
:category/:title	foo/bar/hello-world

再往下翻，中间这些都默认就好了。

theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: <repository url>
  branch: [branch]

theme就是选择什么主题，也就是在theme这个文件夹下，在官网上有很多个主题，默认给你安装的是lanscape这个主题。当你需要更换主题时，在官网上下载，把主题的文件放在theme文件夹下，再修改这个参数就可以了。

接下来这个deploy就是网站的部署的，repo就是仓库(Repository)的简写。branch选择仓库的哪个分支。这个在之前进行github page部署的时候已经修改过了，不再赘述。而这个在后面进行双平台部署的时候会再次用到。

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

title: Hello World
date: 2013/7/13 20:46:25
---

下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述
layout	布局
title	标题
date	建立日期
updated	更新日期
comments	开启文章的评论功能
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章网址

其中，分类和标签需要区别一下，分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

layout（布局）

当你每一次使用代码

hexo new paper

它其实默认使用的是post这个布局，也就是在source文件夹下的_post里面。

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
post	source/_posts
page	source
draft	source/_drafts

而new这个命令其实是：

hexo new [layout] <title>

只不过这个layout默认是post罢了。

page

如果你想另起一页，那么可以使用

hexo new page board

系统会自动给你在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board

draft

draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以

hexo new draft newpage

这样会在source/_draft中新建一个newpage.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用

hexo server --draft

在本地端口中开启服务预览。

如果你的草稿文件写完了，想要发表到post中，

hexo publish draft newpage

就会自动把newpage.md发送到post中。

三、标签页

前往你的 Hexo 的根目录

输入 hexo new page tags

你会找到 source/tags/index.md 这个文件

修改这个文件：

---
title: 标签
date: 2018-01-05 00:00:00
type: 'tags'
orderby: random
order: 1
---

参数 解释
type 【必须】页面类型，必须为 tags
orderby 【可选】排序方式 ：
random - 随机排序 / name - 标签名字排序 / length - 标签数量排序
order 【可选】排序次序： 1（升序），-1（降序）

四、分类页

分类页文件名不一定是 categories, 例子中的 categories 只是一个示例
记得添加 type: “categories”

前往你的 Hexo 的根目录

输入 hexo new page categories

你会找到 source/categories/index.md 这个文件

修改这个文件：

---
title: 分类
date: 2018-01-05 00:00:00
type: 'categories'
---

五、友情链接

友情链接页文件名不一定是 link, 例子中的 link 只是一个示例
记得添加 type: “link”

前往你的 Hexo 的根目录

输入 hexo new page link

你会找到 source/link/index.md 这个文件

修改这个文件：

---
title: 友情链接
date: 2018-06-07 22:17:49
type: 'link'
---

数据来源

在 Hexo 根目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

六、图库

图库页面只是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行

然后使用标签外挂 galleryGroup，具体用法请查看对应的内容。

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

子页面

子页面也是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行

然后使用标签外挂 gallery，具体用法请查看对应的内容。

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

如果你想要使用 /photo/ohmygirl 这样的链接显示你的图片内容

你可以把创建好的 ohmygirl 整个文件夹移到 photo 文件夹里去

七、404页面

主题内置了一个简单的 404 页面，可在设置中开启

本地预览时，访问出错的网站是不会跳到 404 页面的。

如需本地预览，请访问 http://localhost:4000/404.html

# A simple 404 page
error_404:
  enable: true
  subtitle: '页面没有找到'
  background:

八、说说页面

请留意，説説界面只支持原生的 markdown 格式，不支持标签外挂和数学公式

创建说说页面

説説页文件名不一定是 shuoshuo, 例子中的 shuoshuo 只是一个示例
记得添加 type: “shuoshuo”

前往你的 Hexo 的根目录

输入 hexo new page shuoshuo

你会找到 source/shuoshuo/index.md 这个文件

修改这个文件：

---
title: 説説
date: 2018-06-07 22:17:49
type: 'shuoshuo'
---

数据来源

在 Hexo 根目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 shuoshuo.yml

author 和 avatar可省略，会自动去获取配置文件中的 author 和 avatar

- author: Butterfly
  avatar: https://butterfly.js.org/img/avatar.png
  date: 2024-06-21 23:33:26
  content: |
    This is a sample content for **Author 1**.
    ![Sample Image](https://via.placeholder.com/150)
  tags:
    - tags1
    - tags2
- author: Butterfly
  avatar: https://butterfly.js.org/img/avatar.png
  date: 2024-06-20 23:33:26
  content: |
    This is a sample content for **Author 2**.
    ![Sample Image](https://via.placeholder.com/150)
  tags:
    - tag2
    - tag3

- author: Butterfly
  avatar: https://butterfly.js.org/img/avatar.png
  date: 2024-06-19 23:33:26
  content: |
    This is a sample content for **Author 3**.

参数 解释
author 【可选】作者名称
avatar 【可选】作者头像
date 【必需】日期
content 【必需】内容（ Markdown 格式或者 Html 格式
tags 【可选】标签

九、主题配置

配置文件速读

# --------------------------------------
# 导航设置
# --------------------------------------

nav:
  # 导航栏 Logo 图片
  logo:
  # 是否显示标题
  display_title: true
  # 是否固定导航栏
  fixed: false

menu:
  # 首页: / || fas fa-home
  # 列表||fas fa-list:
  #   音乐: /music/ || fas fa-music
  #   电影: /movies/ || fas fa-video

# --------------------------------------
# 代码块设置
# --------------------------------------

code_blocks:
  # 代码块主题: darker / pale night / light / ocean / false
  theme: light
  # 是否使用 Mac 风格
  macStyle: false
  # 代码块高度限制（单位: px）
  height_limit: false
  # 是否自动换行
  word_wrap: false

  # 工具栏
  # 是否显示复制按钮
  copy: true
  # 是否显示语言标签
  language: true
  # true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
  shrink: false
  # 是否显示全屏显示代码块按钮
  fullpage: false

# 社交媒体链接
# 格式:
#   icon: 链接 || 描述 || 颜色
social:

# --------------------------------------
# 图片设置
# --------------------------------------

# 网站的 favicon 图标
favicon: /img/favicon.png

# 头像设置
avatar:
  # 头像图片链接
  img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  # 是否启用头像效果
  effect: false

# 禁用所有横幅图片
disable_top_img: false

# 如果页面未设置横幅，则显示默认的横幅图片
default_top_img:

# 主页的横幅图片
index_img:

# 归档页的横幅图片
archive_img:

# 注意: 是标签页（单个标签），不是标签页面（所有标签）
tag_img:

# 标签页的横幅图片，可以为每个标签设置横幅图片
# 格式:
#  - 标签名: 图片链接
tag_per_img:

# 注意: 是分类页（单个分类），不是分类页面（所有分类）
category_img:

# 分类页的横幅图片，可以为每个分类设置横幅图片
# 格式:
#  - 分类名: 图片链接
category_per_img:

# 页脚的背景图片
footer_img: false

# 网站背景
# 可以设置为颜色或图片
# 图片格式: url(http://xxxxxx.com/xxx.jpg)
background:

# 封面设置
cover:
  # 是否禁用封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 主页封面的位置
  # 选择: left/right/both
  position: both
  # 当未设置封面时，显示默认封面
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# 替换损坏的图片
error_img:
  # 友链页面的错误图片
  flink: /img/friend_404.gif
  # 文章页面的错误图片
  post_page: /img/404.jpg

# 简单的 404 页面
error_404:
  # 是否启用 404 页面
  enable: false
  # 404 页面的副标题
  subtitle: 'Page Not Found'
  # 404 页面的卡片背景图片
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

# 文章元数据设置
post_meta:
  # 主页页面
  page:
    # 日期类型: created / updated / both
    date_type: created
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: false
    # 是否显示文字标签
    label: true
  # 文章页面
  post:
    # 元数据位置: left / center
    position: left
    # 日期类型: created / updated / both
    date_type: both
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: true
    # 是否显示文字标签
    label: true

# --------------------------------------
# 首页设置
# --------------------------------------

# 首页头图的设置
# 默认: 头图全屏，站点信息在中间
# 站点信息的位置，例如: 300px/300em/300rem/10%
index_site_info_top:
# 头图的高度，例如: 300px/300em/300rem
index_top_img_height:

# 首页的副标题设置
subtitle:
  # 是否启用副标题
  enable: false
  # 是否启用打字机效果
  effect: true
  # 自定义 typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # 来源 - 调用第三方服务 API（仅限中文）
  # 它将首先显示来源，然后显示副标题内容
  # 选择: false/1/2/3
  # false - 禁用此功能
  # 1 - hitokoto.cn
  # 2 - yijuzhan.com
  # 3 - jinrishici.com
  source: false
  # 如果关闭打字机效果，副标题将仅显示 sub 的第一行内容
  sub:

# 首页文章佈局
# 1: 行佈局
# 2: 列布局
index_layout: 1

# 在首页显示文章简介
# 1: 描述
# 2: 两者（如果存在描述，将显示描述，否则显示自动摘要）
# 3: 自动摘要（默认）
# false: 不显示文章简介
index_post_content:
  method: 3
  # 如果设置 method 为 2 或 3，需要配置长度
  length: 500

# --------------------------------------
# 文章设置
# --------------------------------------

toc:
  # 是否在文章中显示目录
  post: true
  # 是否在页面中显示目录
  page: false
  # 是否显示目录编号
  number: true
  # 是否默认展开目录
  expand: false
  # 是否使用简洁风格（仅适用于文章）
  style_simple: false
  # 是否显示滚动百分比
  scroll_percent: true

post_copyright:
  # 是否启用版权声明
  enable: true
  # 是否进行文章 URL 解码
  decode: false
  # 作者链接
  author_href:
  # 许可证类型
  license: CC BY-NC-SA 4.0
  # 许可证链接
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 贊助/打赏
reward:
  # 是否启用打赏
  enable: false
  # 打赏案例文本
  text:
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: 微信
    # - img: /img/alipay.jpg
    #   link:
    #   text: 支付宝

# 文章编辑
# 轻鬆在线浏览和编辑博客源代码
post_edit:
  # 是否启用在线编辑
  enable: false
  # url: https://github.com/用户名/仓库名/edit/分支名/子目录名/
  # 例如: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 相关文章
related_post:
  # 是否显示相关文章
  enable: true
  # 显示的文章数量
  limit: 6
  # 选择: created / updated
  date_type: created

# 选择: 1 / 2 / false
# 1: “下一篇文章”将链接到旧文章
# 2: “下一篇文章”将链接到新文章
# false: 禁用分页
post_pagination: 1

# 显示文章过期通知
noticeOutdate:
  # 是否启用过期通知
  enable: false
  # 样式: simple / flat
  style: flat
  # 多少天后显示通知
  limit_day: 365
  # 位置: top / bottom
  position: top
  message_prev: 已经过了
  message_next: 天自上次更新，文章内容可能已过时。

# --------------------------------------
# 页脚设置
# --------------------------------------
footer:
  owner:
    # 是否启用所有者显示
    enable: true
    # 网站创建年份
    since: 2019
  # 自定义文本
  custom_text:
  # 主题和框架的版权声明
  copyright: true

# --------------------------------------
# 侧边栏设置
# --------------------------------------

aside:
  # 是否启用侧边栏
  enable: true
  # 是否默认隐藏侧边栏
  hide: false
  # 是否在右下角显示隐藏侧边栏的按钮
  button: true
  # 移动设备上是否启用侧边栏
  mobile: true
  # 侧边栏位置：left / right
  position: right
  display:
    # 归档页面是否显示侧边栏
    archive: true
    # 标签页面是否显示侧边栏
    tag: true
    # 分类页面是否显示侧边栏
    category: true
  card_author:
    # 是否显示作者信息卡片
    enable: true
    # 作者描述
    description:
    button:
      # 是否显示按钮
      enable: true
      # 按钮图标
      icon: fab fa-github
      # 按钮文本
      text: Follow Me
      # 按钮链接
      link: https://github.com/xxxxxx
  card_announcement:
    # 是否显示公告卡片
    enable: true
    # 公告内容
    content: This is my Blog
  card_recent_post:
    # 是否显示最近文章卡片
    enable: true
    # 显示文章数量，0 表示显示所有
    limit: 5
    # 排序方式：date / updated
    sort: date
    sort_order:
  card_newest_comments:
    # 是否显示最新评论卡片
    enable: false
    sort_order:
    # 显示评论数量
    limit: 6
    # 单位：分钟，保存数据到 localStorage
    storage: 10
    # 是否显示头像
    avatar: true
  card_categories:
    # 是否显示分类卡片
    enable: true
    # 显示分类数量，0 表示显示所有
    limit: 8
    # 选择：none / true / false
    expand: none
    sort_order:
  card_tags:
    # 是否显示标签卡片
    enable: true
    # 显示标签数量，0 表示显示所有
    limit: 40
    # 是否启用颜色
    color: false
    # 标签排序方式：random/name/length
    orderby: random
    # 排序顺序：1 表示升序，-1 表示降序
    order: 1
    sort_order:
  card_archives:
    # 是否显示归档卡片
    enable: true
    # 归档类型：monthly / yearly
    type: monthly
    # 日期格式，例如：YYYY年MM月
    format: MMMM YYYY
    # 排序顺序：1 表示升序，-1 表示降序
    order: -1
    # 显示归档数量，0 表示显示所有
    limit: 8
    sort_order:
  card_post_series:
    # 是否显示系列文章卡片
    enable: true
    # 标题显示系列名称
    series_title: false
    # 排序方式：title 或 date
    orderBy: 'date'
    # 排序顺序：1 表示升序，-1 表示降序
    order: -1
  card_webinfo:
    # 是否显示网站信息卡片
    enable: true
    # 是否显示文章数量
    post_count: true
    # 是否显示最后推送日期
    last_push_date: true
    sort_order:
    # 发佈日期与当前日期的时间差
    # 格式：Month/Day/Year Time 或 Year/Month/Day Time
    # 如果不启用此功能，请留空
    runtime_date:

# --------------------------------------
# 右下角按钮设置
# --------------------------------------

# 右下角按钮与底部的距离（默认单位：px）
rightside_bottom:

# 简繁转换设置
translate:
  # 是否启用简繁转换
  enable: false
  # 按钮文本
  default: 繁
  # 网站语言（1 - 繁体中文 / 2 - 简体中文）
  defaultEncoding: 2
  # 转换延迟
  translateDelay: 0
  # 按钮在简体中文时的文本
  msgToTraditionalChinese: '繁'
  # 按钮在繁体中文时的文本
  msgToSimplifiedChinese: '简'

# 閲读模式
readmode: true

# 暗黑模式设置
darkmode:
  # 是否启用暗黑模式
  enable: true
  # 切换暗黑/明亮模式的按钮
  button: true
  # 是否自动切换暗黑/明亮模式
  # autoChangeMode: 1  跟随系统设置，如果系统不支持暗黑模式，则在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: 2  在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: false  不自动切换
  autoChangeMode: false
  # 设置明亮模式时间，值在 0 到 24 之间。如果未设置，默认值为 6 和 18
  start:
  end:

# 在返回顶部按钮中显示滚动百分比
rightside_scroll_percent: false

# 不要修改以下设置，除非你知道它们的工作原理
# 选择：readmode,translate,darkmode,hideAside,toc,chat,comment
# 不要重复相同的值
rightside_item_order:
  # 是否启用右侧项目顺序
  enable: false
  # 隐藏的默认项目：readmode,translate,darkmode,hideAside
  hide:
  # 显示的默认项目：toc,chat,comment
  show:

# --------------------------------------
# 全局设置
# --------------------------------------

# 锚点设置
anchor:
  # 滚动时，URL 将根据标题 ID 更新
  auto_update: false
  # 点击标题滚动并更新锚点
  click_to_scroll: false

# 图片标题
photofigcaption: false

# 复制设置
copy:
  # 是否启用复制功能
  enable: true
  # 在复制的内容后添加版权信息
  copyright:
    enable: false
    # 当复制字符数超过 limit_count 时添加版权信息
    limit_count: 150

# 需要安装 hexo-wordcount 插件
wordcount:
  # 是否启用字数统计
  enable: false
  # 在文章元信息中显示字数统计
  post_wordcount: true
  # 在文章元信息中显示閲读时间
  min2read: true
  # 在侧边栏网站信息中显示总字数
  total_wordcount: true

# 不蒜子 PV / UV 统计
busuanzi:
  # 网站 UV 统计
  site_uv: true
  # 网站 PV 统计
  site_pv: true
  # 页面 PV 统计
  page_pv: true

# --------------------------------------
# 数学公式设置
# --------------------------------------

# 关于 per_page
# 如果设置为 true，将在每个页面加载 mathjax/katex 脚本
# 如果设置为 false，将根据你的设置加载 mathjax/katex 脚本（在页面的 front-matter 中添加 'mathjax: true' 或者 'katex: true'）
math:
  # 选择：mathjax, katex
  # 如果不需要数学公式，保持为空
  use:
  per_page: true
  hide_scrollbar: false

  mathjax:
    # 启用上下文菜单
    enableMenu: true
    # 选择：all / ams / none，这控制是否对公式编号以及如何编号
    tags: none

  katex:
    # 启用复制 KaTeX 公式
    copy_tex: false

# --------------------------------------
# 搜索设置
# --------------------------------------

search:
  # 选择：algolia_search / local_search / docsearch
  # 如果不需要搜索功能，保持为空
  use:
  placeholder:

  # Algolia 搜索
  algolia_search:
    # 每页搜索结果数量
    hitsPerPage: 6

  # 本地搜索
  local_search:
    # 页面加载时预加载搜索数据
    preload: false
    # 每篇文章显示的顶部 n 个搜索结果，设置为 -1 显示所有结果
    top_n_per_article: 1
    # 将 HTML 字符串反转义为可读内容
    unescape: false
    CDN:

  # Docsearch
  # https://docsearch.algolia.com/
  docsearch:
    appId:
    apiKey:
    indexName:
    option:

# --------------------------------------
# 分享系统
# --------------------------------------

share:
  # 选择：sharejs / addtoany
  # 如果不需要分享功能，保持为空
  use: sharejs

  # Share.js
  # https://github.com/overtrue/share.js
  sharejs:
    sites: facebook,twitter,wechat,weibo,qq

  # AddToAny
  # https://www.addtoany.com/
  addtoany:
    item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# --------------------------------------
# 评论系统
# --------------------------------------

comments:
  # 最多两个评论系统，第一个将作为默认显示
  # 如果不需要评论功能，保持为空
  # 选择：Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # 两个评论系统的格式：Disqus,Waline
  use:
  # 按钮旁边显示评论系统名称
  text: true
  # 懒加载：评论系统将在评论元素进入浏览器视口时加载
  # 如果设置为 true，评论计数将无效
  lazyload: false
  # 在文章顶部图片中显示评论计数
  count: false
  # 在主页显示评论计数
  card_post_count: false

# Disqus 评论插件配置
# 官方文档：https://disqus.com/
disqus:
  # Disqus 的 shortname
  shortname:
  # 最新评论小部件的 API 密钥
  apikey:

# 使用 Disqus API 渲染评论的替代方案
# 官方文档：https://github.com/SukkaW/DisqusJS
disqusjs:
  # Disqus 的 shortname
  shortname:
  # API 密钥
  apikey:
  # 其他可选配置
  option:

# Livere 评论插件配置
# 官方文档：https://www.livere.com/
livere:
  # Livere 的用户 ID
  uid:

# Gitalk 评论插件配置
# 官方文档：https://github.com/gitalk/gitalk
gitalk:
  # GitHub 应用的客户端 ID
  client_id:
  # GitHub 应用的客户端密钥
  client_secret:
  # 存储评论的仓库名称
  repo:
  # 仓库拥有者的用户名
  owner:
  # 管理员用户名列表
  admin:
  # 其他可选配置
  option:

# Valine 评论插件配置
# 官方文档：https://valine.js.org
valine:
  # LeanCloud 应用的 appId
  appId:
  # LeanCloud 应用的 appKey
  appKey:
  # 评论者头像样式
  avatar: monsterid
  # 该配置适用于国内自定义域名用户，海外版本将自动检测（无需手动填写）
  serverURLs:
  # 评论框背景图片
  bg:
  # 使用 Valine 的访客计数作为页面的访客量
  visitor: false
  # 其他可选配置
  option:

# Waline 评论插件配置，一个简单的评论系统，基于 Valine 开发，支持后端
# 官方文档：https://waline.js.org/
waline:
  # 服务器 URL
  serverURL:
  # 评论框背景图片
  bg:
  # 使用 Waline 的访客计数作为页面的访客量
  pageview: false
  # 其他可选配置
  option:

# Utterances 评论插件配置
# 官方文档：https://utteranc.es/
utterances:
  # 存储评论的 GitHub 仓库
  repo:
  # 问题映射方式，可选值：pathname/url/title/og:title
  issue_term: pathname
  # 浅色主题，可选值：github-light
  light_theme: github-light
  # 深色主题，可选值：photon-dark
  dark_theme: photon-dark

# Facebook 评论插件配置
# 官方文档：https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
  # 应用 ID
  app_id:
  # 用户 ID，可选
  user_id:
  # 每页显示评论数
  pageSize: 10
  # 评论排序方式，可选值：social / time / reverse_time
  order_by: social
  # 语言设置
  lang: zh_TW

# Twikoo 评论插件配置
# 官方文档：https://github.com/imaegoo/twikoo
twikoo:
  # 环境 ID
  envId:
  # 区域
  region:
  # 使用 Twikoo 的访客计数作为页面的访客量
  visitor: false
  # 其他可选配置
  option:

# Giscus 评论插件配置
# 官方文档：https://giscus.app/
giscus:
  # 仓库地址
  repo:
  # 仓库 ID
  repo_id:
  # 分类 ID
  category_id:
  # 主题配置，light 为浅色主题，dark 为深色主题
  theme:
    light: light
    dark: dark
  # 其他可选配置
  option:

# Remark42 评论插件配置
# 官方文档：https://remark42.com/docs/configuration/frontend/
remark42:
  # 服务器地址
  host:
  # 站点 ID
  siteId:
  # 其他可选配置
  option:

# Artalk 评论插件配置
# 官方文档：https://artalk.js.org/guide/frontend/config.html
artalk:
  # 服务器地址
  server:
  # 站点名
  site:
  # 使用 Artalk 的访客计数作为页面的访客量
  visitor: false
  # 其他可选配置
  option:

# --------------------------------------
# 聊天服务配置
# --------------------------------------

chat:
  # 聊天服务类型，可选值：chatra/tidio/crisp，如果不需要聊天功能则留空
  use:
  # 推荐使用聊天按钮，会在网站右下角创建一个按钮，并隐藏原始按钮
  rightside_button: false
  # 原始聊天按钮在向上滚动时显示，向下滚动时隐藏
  button_hide_show: false

# Chatra 聊天服务配置
# 官方网站：https://chatra.io/
chatra:
  # Chatra 服务 ID
  id:

# Tidio 聊天服务配置
# 官方网站：https://www.tidio.com/
tidio:
  # Tidio 公钥
  public_key:

# Crisp 聊天服务配置
# 官方网站：https://crisp.chat/en/
crisp:
  # Crisp 网站 ID
  website_id:

# --------------------------------------
# 分析服务配置
# --------------------------------------

# 百度统计配置
# 官方网站：https://tongji.baidu.com/web/welcome/login
baidu_analytics:

# 谷歌分析配置
# 官方网站：https://analytics.google.com/analytics/web/
google_analytics:

# Cloudflare 分析配置
# 官方网站：https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:

# Microsoft Clarity 分析配置
# 官方网站：https://clarity.microsoft.com/
microsoft_clarity:

# --------------------------------------
# 广告配置
# --------------------------------------

# Google Adsense 广告配置
google_adsense:
  # 是否启用
  enable: false
  # 是否自动投放广告
  auto_ads: true
  # 广告脚本 URL
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  # 客户 ID
  client:
  # 是否启用页面级广告
  enable_page_level_ads: true

# 手动插入广告配置，如果不需要广告则留空
ad:
  # 在首页每三个帖子后插入广告
  index:
  # 在侧边栏插入广告
  aside:
  # 在文章分页前插入广告
  post:

# --------------------------------------
# 站点验证配置
# --------------------------------------

site_verification:
  # 示例：
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

# --------------------------------------
# 美化 / 效果
# --------------------------------------

# 主题颜色自定义
# 注意：颜色值必须用双引号，如 "#000"，否则可能会导致错误！

# 主题颜色配置
# theme_color:
#   是否启用主题颜色
#   enable: true
#   主颜色
#   main: "#49B1F5"
#   分页器颜色
#   paginator: "#00c4b6"
#   按钮悬停颜色
#   button_hover: "#FF7242"
#   文本选择颜色
#   text_selection: "#00c4b6"
#   链接颜色
#   link_color: "#99a9bf"
#   元数据颜色
#   meta_color: "#858585"
#   水平线颜色
#   hr_color: "#A4D8FA"
#   代码前景色
#   code_foreground: "#F47466"
#   代码背景色
#   code_background: "rgba(27, 31, 35, .05)"
#   目录颜色
#   toc_color: "#00c4b6"
#   引用块填充颜色
#   blockquote_padding_color: "#49b1f5"
#   引用块背景颜色
#   blockquote_background_color: "#49b1f5"
#   滚动条颜色
#   scrollbar_color: "#49b1f5"
#   浅色模式下的主题颜色
#   meta_theme_color_light: "ffffff"
#   深色模式下的主题颜色
#   meta_theme_color_dark: "#0d0d0d"

# 分类和标签页面的用户界面设置
# 选择：index - 与主页 UI 相同 / default - 与归档 UI 相同
# 留空或设置为 index
category_ui:
tag_ui:

# 拉伸行使每行宽度相等
text_align_justify: false

# 为页眉和页脚添加遮罩
mask:
  header: true
  footer: true

# 加载动画
preloader:
  # 是否启用加载动画
  enable: false
  # 资源
  # 1. 全屏加载
  # 2. 进度条
  source: 1
  # pace 主题 (参见 https://codebyzach.github.io/pace/)
  pace_css_url:

# 页面过渡效果
enter_transitions: true

# 默认显示模式 - light (默认) / dark
display_mode: light

# 美化文章内容的配置
beautify:
  # 是否启用美化
  enable: false
  # 指定美化的范围 (site 或 post)
  field: post
  # 指定标题前缀图标，如 '\f0c1'
  title-prefix-icon:
  # 指定标题前缀图标的颜色，如 '#F47466'
  title-prefix-icon-color:

# 全局字体设置
# 除非您知道它们的工作原理，否则不要修改以下设置
font:
  global-font-size:
  code-font-size:
  font-family:
  code-font-family:

# 网站标题和副标题的字体设置
blog_title_font:
  font_link:
  font-family:

# 分隔符图标的设置
hr_icon:
  # 是否启用分隔符图标
  enable: true
  # Font Awesome 图标的 unicode 值，如 '\3423'
  icon:
  icon-top:

# 打字机效果
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  # 是否启用打字机效果
  enable: false
  # 是否启用彩色效果
  colorful: true
  # 是否启用震动效果
  shake: true
  # 是否在移动设备上启用
  mobile: false

# 背景效果
# --------------------------------------

# canvas_ribbon
# 参见: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  # 是否启用 canvas_ribbon
  enable: false
  # ribbon 的大小
  size: 150
  # ribbon 的不透明度 (0 ~ 1)
  alpha: 0.6
  zIndex: -1
  # 是否点击更改颜色
  click_to_change: false
  # 是否在移动设备上启用
  mobile: false

# Fluttering Ribbon
canvas_fluttering_ribbon:
  # 是否启用 Fluttering Ribbon
  enable: false
  # 是否在移动设备上启用
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  # 是否启用 canvas_nest
  enable: false
  # 线条颜色，默认: '0,0,0'; RGB 值: (R,G,B).(注意: 使用 ',' 分隔.)
  color: '0,0,255'
  # 线条的不透明度 (0~1)
  opacity: 0.7
  # 背景的 z-index 属性
  zIndex: -1
  # 线条数量
  count: 99
  # 是否在移动设备上启用
  mobile: false

# 鼠标点击效果: 烟花
fireworks:
  # 是否启用烟花效果
  enable: false
  zIndex: 9999
  # 是否在移动设备上启用
  mobile: false

# 鼠标点击效果: 心形符号
click_heart:
  # 是否启用心形符号效果
  enable: false
  # 是否在移动设备上启用
  mobile: false

# 鼠标点击效果: 文字
clickShowText:
  # 是否启用文字效果
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  # 是否随机显示文字
  random: false
  # 是否在移动设备上启用
  mobile: false

# --------------------------------------
# 灯箱设置
# --------------------------------------

# 选择: fancybox / medium_zoom
# https://github.com/francoischalifour/medium-zoom
# https://fancyapps.com/fancybox/
# 如果不需要灯箱效果，请留空
lightbox:

# --------------------------------------
# 标签外挂设置
# --------------------------------------

# 系列
series:
  # 是否启用系列
  enable: false
  # 按标题或日期排序
  orderBy: 'title'
  # 排序方式。1, asc 为升序; -1, desc 为降序
  order: 1
  # 是否显示编号
  number: true

# ABCJS - ABC 音乐符号插件
# https://github.com/paulrosen/abcjs
abcjs:
  # 是否启用 ABCJS
  enable: false
  # 是否每页启用
  per_page: true

# Mermaid
# https://github.com/mermaid-js/mermaid
mermaid:
  # 是否启用 Mermaid
  enable: false
  # 使用代码块编写 Mermaid 图表
  code_write: false
  # 内置主题: default / forest / dark / neutral
  theme:
    light: default
    dark: dark

# chartjs
# 参见 https://www.chartjs.org/docs/latest/
chartjs:
  enable: false
  # 除非你了解它们的工作原理，否则不要修改。
  # 默认设置仅在未指定 MD 语法时使用。
  # 图表的字体颜色
  fontColor:
    light: "rgba(0, 0, 0, 0.8)"
    dark: "rgba(255, 255, 255, 0.8)"
  # 图表的边框颜色
  borderColor:
    light: "rgba(0, 0, 0, 0.1)"
    dark: "rgba(255, 255, 255, 0.2)"
  # 雷达图和极区图的刻度标签背景颜色
  scale_ticks_backdropColor:
    light: "transparent"
    dark: "transparent"

# Note - Bootstrap 提示框
note:
  # Note 标签样式值:
  #  - simple    bs-callout 旧警告样式。默认。
  #  - modern    bs-callout 新 (v2-v3) 警告样式。
  #  - flat      扁平提示框样式，带背景，如 Mozilla 或 StackOverflow。
  #  - disabled  禁用所有 Note 标签的 CSS 样式。
  style: flat
  # 是否显示图标
  icons: true
  # 边框半径
  border_radius: 3
  # 背景颜色偏移百分比 (modern: -12 | 12; flat: -18 | 6)。
  # 也应用于标签变量。此选项可与禁用的 Note 标签一起使用。
  light_bg_offset: 0

# --------------------------------------
# 其他设置
# --------------------------------------

# https://github.com/MoOx/pjax
pjax:
  # 是否启用 pjax
  enable: false
  # 排除指定页面不使用 pjax，如 '/music/'
  exclude:
    # - /xxxxxx/

# 注入 CSS 和脚本 (aplayer/meting)
aplayerInject:
  # 是否启用注入
  enable: false
  # 是否每页启用
  per_page: true

# Snackbar - Toast 通知
# https://github.com/polonel/SnackBar
# 位置: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  # 是否启用 Snackbar
  enable: false
  # 通知位置
  position: bottom-left
  # 浅色模式和深色模式下的通知背景颜色
  bg_light: '#49b1f5'
  bg_dark: '#1f1f1f'

# Instant.page
# https://instant.page/
instantpage: false

# Pangu - 在中文字符和英文字符之间插入空格
# https://github.com/vinta/pangu.js
pangu:
  # 是否启用 Pangu
  enable: false
  # 指定使用 Pangu 的范围(site 或 post)
  field: site

# Lazyload
# https://github.com/verlok/vanilla-lazyload
lazyload:
  # 是否启用 Lazyload
  enable: false
  # 指定使用 Lazyload 的范围 (site 或 post)
  field: site
  placeholder:
  blur: false

# PWA
# 参见 https://github.com/JLHwung/hexo-offline
# ---------------
pwa:
  # 是否启用 PWA
  enable: false
  # PWA manifest 文件路径
  manifest:
  # Apple Touch 图标路径
  apple_touch_icon:
  # 32x32 像素的 favicon 图标路径
  favicon_32_32:
  # 16x16 像素的 favicon 图标路径
  favicon_16_16:
  # mask 图标路径
  mask_icon:

# Open graph meta tags
# 参见 https://hexo.io/docs/helpers#open-graph
Open_Graph_meta:
  # 是否启用 Open Graph meta 标签
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

# 添加供应商前缀以确保兼容性
# 是否启用 CSS 前缀
css_prefix: true

# Inject
# 插入代码到 head（在 '</head>' 标签之前）和底部（在 '</body>' 标签之前）
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

# CDN 设置
# 除非你知道它们的工作原理，否则不要修改以下设置
CDN:
  # 内部和第三方脚本的 CDN 提供商
  # 两者的选项：local/jsdelivr/unpkg/cdnjs/custom
  # 注意： Dev 版本只能使用 'local' 作为内部脚本
  # 注意：将第三方脚本设置为 'local' 时，需要安装 hexo-butterfly-extjs
  internal_provider: local
  third_party_provider: jsdelivr

  # 是否在 URL 中添加版本号，true 或 false
  version: false

  # 自定义格式
  # 例如：https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format:

  option:

十、语言

修改 Hexo 的配置文件 _config.yml

默认语言是 en

主题支持

default(en)
zh-CN (简体中文)
zh-TW (台湾繁体中文)
zh-HK (香港繁体中文)
ja (日语)
ko (韩语)

十一、网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改 Hexo 的_config.yml

十二、导航

1、参数配置

nav:
  # Navigation bar logo image
  logo: /xxxx.png
  display_title: true
  # Whether to fix navigation bar
  fixed: false

参数	解释
logo	网站的 logo，支持图片，直接填入图片链接
display_title	是否显示网站标题，填写 true 或者 false
fixed	是否固定状态栏，填写 true 或者 false

2、目录

Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

必须是 /xxx/，后面||分开，然后写图标名。

如果不希望显示图标，图标名可不写。

默认子目录是展开的，如果你想要隐藏，在子目录里添加 hide 。

List||fas fa-list||hide:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video

注意： 导航的文字可自行更改

例如：

menu:
首页: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fa fa-heartbeat:
音乐: /music/ || fas fa-music
照片: /Gallery/ || fas fa-images
电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart

十三、代码块

code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme: light
  macStyle: false
  # Code block height limit (unit: px)
  height_limit: false
  word_wrap: false

  # Toolbar
  copy: true
  language: true
  # true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button
  shrink: false
  fullpage: false

参数	解释
theme	代码高亮主题，可选 darker / pale night / light / ocean / false
macStyle	是否使用 Mac 风格
height_limit	代码块高度限制（单位: px）, 可填写 数字 或者 false
word_wrap	是否自动换行
copy	是否显示复制按钮
language	是否显示语言标签
shrink	true: 收缩代码块 / false: 展开代码块 / none: 展开代码块并隐藏按钮
fullpage	是否全屏显示代码块

十四、社交图标

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"

十五、图片设置

1、头像

avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

2、顶部图

如果不要显示顶部图，可直接配置 disable_top_img: true

顶部图的获取顺序，如果都没有配置，则不显示顶部图。

页面顶部图的获取顺序：

各自配置的 top_img > 配置文件的 default_top_img

文章页顶部图的获取顺序：

各自配置的 top_img > cover > 配置文件的 default_top_img

配置	解释
index_img	主页的 top_img
default_top_img	默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img	归档页面的 top_img
tag_img	tag 子页面 的 默认 top_img
tag_per_img	tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img	category 子页面 的 默认 top_img
category_per_img	category 子页面的 top_img，可配置每个 category 的 top_img

其它页面 （tags/categories/自建页面）和 文章页 的 top_img ，请到对应的 md 页面设置front-matter中的top_img

以上所有的 top_img 可配置以下值

配置的值	效果
留空	显示默认的 top_img（如有），否则显示默认的顔色
（文章页 top_img 留空的话，会显示 cover 的值）
img 链接	图片的链接，显示所配置的图片
顔色(
HEX 值 - #0000FF
RGB 值 - rgb(0,0,255)
顔色单词 - orange
渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)
）	对应的顔色
transparent	透明
false	不显示 top_img

tag_per_img:
  aplayer: https://xxxxxx.png
  android: ddddddd.png

category_per_img：
  随想: hdhdh.png
  推荐: ddjdjdjd.png