一、搭建hexo并部署到Github

1. 安装Git

下载地址：https://git-scm.com/downloads
全部选择默认选项安装即可。
安装完成后在开始菜单里找到“Git”，打开“Git Bash”。跳出窗口，说明Git安装成功

在窗口输入

1 2	git config --global user.name "Your Name" git config --global user.email "[email protected]"

查看Git版本

git --verison

2. node下载和安装

下载地址：https://nodejs.cn/
直接安装
测试：
1
2
node -v
npm -v

3. 安装hexo

创建Blog文件夹，存放博客文件，然后在文件夹下右键git bash打开。
npm安装hexo
1
npm install -g hexo-cli
输入hexo -v验证是否安装成功
初始化hexo
1
hexo init

本地预览

1 2	hexo generate //生成静态网页，可简写 hexo g hexo server //打开本地服务器，可简写 hexo s

浏览器输入 http://localhost:4000/

4. 部署到Github

注册github账号，自行百度
打开 https://github.com/，新建一个项目仓库，命名为：
1
geek.github.io //用户名.github.ioo
创建ssh

id_rsa是主机的私人秘钥，不能泄漏。

id_rsa.pub是公共秘钥可以给他人看。

把公钥放在github上。

生成秘钥：
1
ssh-keygen -t rsa -C "yourmail"
在主机用户目录里找到.ssh目录，里面有id_rsa和id_rsa.pub两个文件。

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便去，把id_rsa.pub里面的信息复制进去。

在git bash输入ssh -T [email protected]，出现下面的信息，以及出现用户名，就成功了
1
2
$ ssh -T [email protected]
Hi geek! You've successfully authenticated, but GitHub does not provide shell access.

修改hexo配置文件

打开博客根目录下的config.yml文件

修改最后一行配置

deploy:
  type: git
  repository: https://github.com/geek/geek/github.io.git
  branch: master

部署

需要先安装deploy-git，也就是部署命令，才能用命令部署到github

1	npm install hexo-deployer-git --save

然后hexo三步走

1
2
3

hexo clean  //清除之前生成的东西
hexo generate  //生成静态文章
hexo deploy  //部署文章

二、安装butterfly主题

1. 安装

打开hexo根目录，右键打开git bash窗口

1	npm install hexo-theme-butterfly

升级方法

1	npm update hexo-theme-butterfly

2. 应用主题

修改更目录下的_config.yml，把主题修改为butterfly

1	theme: butterfly

3. 安装插件

如果没有pug以及stylus渲染器，安装：

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

4.配置建议

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 內容复制到 _config.butterfly.yml 去。

注意：复制的是主题的 _config.yml，而不是hexo的 _config.yml

不要把主题目录的 _config.yml 删掉

以后只需要在 _config.butterfly.yml 进行配置就行。

hexo 会自动合并主题中 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其有限度较高。

三、页面配置

1. Page Front-matter

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
limit:
  type:
  value:
---

参数	解释
title	【必须】页面标题
type	【必须】标签、分类、友情链接三个页面需要配置
updated	【可选】页面更新日期
description	【可选】页面描述
keywords	【可选】页面关键字
comments	【可选】展示页面评论模块（默认为true)
top_img	【可选】页面顶部图片
mathjax	【可选】显示mathjax（当设置mathjax的per_page:false时，才需要配置，默认false)
katex	【可选】显示katex（当设置katex的per_page:false时，下需要配置，默认false)
aside	【可选】显示侧边栏（默认true）
aplayer	【可选】在需要的页面加载aplayer的js和css
highlight_shrink	【可选】配置代码框是否展开（true/false）（默认为设置中highlight_shrink的配置）
random	【可选】配置友情链接是否随机排序（默认为false）
limit	【可选】配置说说显示数量
limit.type	【可选】配置说说显示数量的类型（date或者num）
limit.value	【可选】配置说说显示数量的值

2. Post Front-matter

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
noticeOutdate:
---

参数	解释
title	【必须】文章标题
date	【必须】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标签
categories	【可选】文章分类
keywords	【可选】文章关键字
description	【可选】文章描述
top_img	【可选】文章顶部图片
cover	【可选】文章缩略图（如果没有设置 top_img ，文章页顶部将显示缩略图，可设为 false/图片地址/留空）
comments	【可选】显示文章评论模块（默认 true ）
toc	【可选】显示文章 TOC（默认为设置中 enable 设置）
toc_number	【可选】显示 toc_number（默认为设置中 toc 的 number 配置）
toc_style_simple	【可选】显示 toc 简洁模式
copyright	【可选】显示文章版权模块（默认为设置中 post_copyright 的enable配置）
copyright_author	【可选】文章版权模块的`文章作者`
copyright_author_href	【可选】文章版权模块的`文章作者`链接
copyright_url	【可选】文章版权模块的`文章链接`的链接
copyright_info	【可选】文章版权模块的版权声明文字
mathjax	【可选】显示mathjax（当设置mathjax的per_page:false时，才需要配置，默认false）
katex	【可选】显示katex（当设置katex 的 per_page:false 时，才需要配置，默认 false ）
aplayer	【可选】在需要的页面加载 aplayer 的 js 和 css
highlight_shrink	【可选】配置代码框是否展开（true/false)（默认为设置中 highlight_shrink 的配置）
aside	【可选】显示侧边栏（默认true）
abcjs	【可选】加载 abcjs （当设置 abcjs 的 per_page:false 时，才需要配置，默认false )
noticeOutdate	【可选】文章过期提醒（默认为设置中 noticeOutdate 的 enable 配置）

3. 标签页

前往 Hexo 的根目录
打开git bash，输入

1	hexo new page tags

找到 source/tags/index.md 文件

修改这个文件

---
title: 標籤
date: 2025-02-05 00:00:00
type: 'tags'
top_img: rgb(143,178,201)
aside: false
---

4. 分类页

前往 Hexo 的根目录
打开 git bash ，输入
1
hexo new page categories
找到 source/categories/index.md 文件

修改这个文件

---
title: 分類
date: 2025-02-05 00:00:00
type: 'categories'
top_img: rgb(143,178,201)
aside: false
---

5. 友情链接

前往 Hexo 的根目录
打开 git bash ，输入
1
hexo new page link
找到 source/link/index.md 文件

修改文件

---
title: 友情鏈接
date: 2025-02-02 00:00:00
type: 'link'
top_img: rgb(143,178,201)
aside: false
---

数据来源

在 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: 社交分享平台

友情链接界面可以由用户自己自定义，只需要在友情链接 Markdown 档设置就行，以普通的 Markdown 格式书写。

6. 404页面

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

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

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

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

四、主题配置

1. 配置文件速读

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

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

# Lazyload
# https://github.com/verlok/vanilla-lazyload
lazyload:
  # 是否启用 Lazyload
  enable: false
  # 使用浏览器的原生 lazyload 而不是 vanilla-lazyload
  native: 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:

# 结构化数据
# https://developers.google.com/search/docs/guides/intro-structured-data
structured_data: true

# 添加供应商前缀以确保兼容性
# 是否启用 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:

2. 语言

修改 Hexo 的配置文件 _config.yml

默认语言是 en

支持：

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

3. 目录

主页: / || fas fa-home
文章: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
链接||fas fa-list:
  友情链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

4. 代码高度限制

配置代码高度限制，超出的部分会隐藏，并显示展开按钮。

1 2	# highlight_height_limit: false # unit: px highlight_height_limit: 300

直接添加数字，不用加单位px

不适用于隐藏后的代码块（ css 设置 display:none）

5. 社交图标

butterfly 支持 font-awesome v6 图标

书写格式 图标名：url || 描述性文字 || color

1
2
3

social:
  fab fa-github: https://github.com/xxxxx || Github || "#hdhfbb"
  fas fa-envelope: mailto:[email protected] || Email || "#000000"

6. 图片设置

6.1 头像

1
2
3

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

6.2 顶部图

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

top_img: false

6.3 页脚背景图

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

6.4 网站背景

默认显示白色，可设置图片或者颜色

1
2
3

# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background:

7. 文章封面

因博客可能只有博主自己看，考虑加载速度，所以关闭封面

cover:
  # 是否显示文章封面
  index_enable: false
  aside_enable: false
  archives_enable: false
  default_cover:

8. 页面meta显示

显示文章的相关信息的

post_meta:
  # Home Page
  page:
    # Choose: created / updated / both
    date_type: created
    # Choose: date / relative
    date_format: date
    categories: true
    tags: false
    label: true
  post:
    # Choose: left / center
    position: left
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: date
    categories: true
    tags: true
    label: true

9. 首页

9.1 首页顶部图大小

默认显示全屏，网站信息会剧中显示

# 主页设置
# 默认top_img全屏，site_info在中间
# 使用默认, 都无需填写（建议默认）
index_site_info_top: # 主页标题距离顶部距离  例如 300px/300em/300rem/10%
index_top_img_height: #主页top_img高度 例如 300px/300em/300rem  不能使用百分比

9.2 网站副标题

设置主页中显示的网站副标题或喜欢的座右铭。

# 主页subtitle
subtitle:
  enable: false
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 调用第三方服务
  # false 关闭调用
  # 1  调用一言网的一句话（简体） https://hitokoto.cn/
  # 2  调用一句网（简体） http://yijuzhan.com/
  # 3  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # 如果关闭打字效果，subtitle 只会显示 sub 的第一行文字
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today

10. 文章页

10.1 TOC目录

在侧边栏显示TOC（文章目录）

toc:
  post: true
  page: false
  number: true
  expand: false
  # Only for post
  style_simple: false
  scroll_percent: true

参数	解释
post	文章页是否显示 TOC
page	普通页面是否显示 TOC
number	是否显示章节数
expand	是否展开 TOC
style_simple	简洁模式（侧边栏只显示 TOC, 只对文章页有效）
scroll_percent	是否显示滚动进度百分比

10.2 文章版权

为博客文章展示文章版权和协议

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/

11. 搜索

search:
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: algolia_serch
  placeholder: 请输入需要搜索的内容

# Algolia Search
algolia_search:
  # Number of search results per page
  hitsPerPage: 6

12. Inject

inject:
  head:
  	- <link rel="stylesheet" href="/self.css">
  bottom:
  	- <script src="xxxx"></script>

五、标签外挂

1. 选项卡（Tabs）

{% tabs 样例 %}

<!-- tab 代码  -->

这里是代码

<!-- endtab -->

<!-- tab 预览  -->

这里是预览

<!-- endtab -->

{% endtabs %}

这里是代码

这里是预览

六、个人自定义

1. 页脚设置

css文件

在 source/css 目录下，新建 custom.css 文件

/* 自定义底部  start */
#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: rgb(255, 255, 255) !important;
    text-align: left;
    flex-wrap: wrap;
}

.ft-item-1,
.ft-item-2 {
    display: flex;
    height: 100%;
    padding: 10px 14px;
}

.ft-item-1 {
    flex-direction: column;
    flex: 2;
}

.ft-item-2 {
    flex: 1;
    flex-direction: column;
}

.t-top {
    display: flex;
}

.t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
}

.t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
}

.btn-xz-box {
    margin-top: 10px;
    background-color: #8e8d8f;
}

.btn-xz {
    display: block;
    background-color: #8e8d8f;
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
    cursor: pointer !important;
}

.btn-xz:hover {
    text-decoration: none !important;

}

.btn-xz-box:hover .btn-xz {
    background-color: #6595f0;
}

.t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
}

.ft-links li a {
    display: inline-block !important;
    width: 50%;
    cursor: pointer !important;
    color: rgb(255, 255, 255) !important;
}

.ft-links li a:hover {
    text-decoration: none !important;
    color: #6595f0 !important;
}

.ft-item-2 .ft-img-group {
    width: 100%;
}

.ft-t {
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
}

.t-l-t {
    padding-left: 14px;
}

.ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
}

.ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer !important;
}

.ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
}

@media screen and (max-width: 768px) {

    .ft-item-1 {
        flex-basis: 100% !important;
    }

    .ft-item-2 {
        flex-basis: 100% !important;
    }

    .t-top .t-t-l .bg-ad {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .t-top {
        flex-wrap: wrap;
    }

    .t-top .t-t-l {
        flex-basis: 100% !important;

    }

    .t-top .t-t-r {
        margin-top: 16px;
        flex-basis: 100% !important;
    }
}
/* 自定义底部  End */

进hexo中butterfly主题目录下，node_modules/hexo-theme-butterfly/layout/includes/footer.pug 更改文件内容

#footer-wrap
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t 严肃声明
          .bg-ad
            div
              | 请不要利用博客内的知识去做违法乱纪之事，任何利用博客去做违法犯罪的人和事，均与博主无关。该博客只为技术分享，一切皆为技术服务。
            .btn-xz-box
              a.btn-xz(href='https://XXXX.com/') 跳转主页
        .t-t-r
          p.ft-t.t-l-t 基础导航
          ul.ft-links
            li
              a(href='https://XXXX.com/articles/hexo1600/') 建站指南
              a(href='https://XXXX.com/nav.html') 网址导航
            li
              a(href='https://XXXX.com/about/') 关于博主
              a(href='https://XXXX.com/archives/') 文章归档
            li
              a(href='https://XXXX.com/categories/') 文章分类
              a(href='https://XXXX.com/tags/') 文章标签
    .ft-item-2
      p.ft-t.t-l-t 推荐链接
        ul.ft-links
          li 
            a(href='https://XXXX.com/') blog
            a(href='https://github.com/') github
          li 
            a(href='https://bilibili.com/') bilibili 
            a(href='https://leetcode.cn/') leetcode
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
    else
      .copyright!= `&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

2. 黑夜模式

更改黑夜模式中页脚背景。

在 source/css/目录下，新建 dartheme_modify.css

[data-theme='dark'] #footer {
  background-color: rgb(26,26,26)!important;
  background-size: cover;
}

/* 适配手机模式 */

@media (max-width: 768px) {
[data-theme='dark'] #footer {
    background: rgb(26,26,26);
    background-size: cover;
  }
}

3. 源文件备份

如果版本大于3.X，使用下面命令安装

1	npm install hexo-git-backup --save

备份更新：

1 2	npm remove hexo-git-backup npm install hexo-git-backup --save

安装完毕后，在 _config.yml 文件中配置：

backup:
  type: git
  theme: butterfly
  message: MyBlog Buckup
  repository: 
    github: [email protected]:xxx/xxx.git,branchName

注：theme为主题，message可以随便写，branchName为分支名