butterfly主题的配置

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

hexo-theme-butterfly是基於 hexo-theme-melody 的基礎上進行開發的。

穩定版【建議】

在你的 Hexo 根目錄裏

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

測試版

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

升級方法：在主題目錄下，運行 git pull

应用主题

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

theme: butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

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

升级完成后，请到 Github 的 Releases 界面或者文档七查看新版的更新内容。

里面有标注 _config 文件的变更内容（如有），请根据实际情况更新你的配置内容。

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

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

Butterfly 安装文档(二) 主题页面

📖 本教程更新于 2022 年 02 月 13 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意）

🦋 Butterfly 已经更新到 4.1.0

📚 文档目录

🚀 快速开始 - 📑 主题页面 - 🛠 主题配置-1 - ⚔️ 主题配置-2 - ❓ 主题问答 - ⚡️ 进阶教程 - ✨ 更新日誌 - 🤞 打赏

Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变数。

Page Front-matter 用于页面配置
Post Front-matter 用于文章页配置

如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里

Page Front-matter

title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
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 的配置)

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

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标籤
categories	【可选】文章分类
keywords	【可选】文章关键字
description	【可选】文章描述
top_img	【可选】文章顶部图片
cover	【可选】文章缩略图 (如果没有设置 top_img, 文章页顶部将显示缩略图，可设为 false / 图片地址 / 留空)
comments	【可选】显示文章评论模块 (默认 true)
toc	【可选】显示文章 TOC (默认为设置中 toc 的 enable 配置)
toc_number	【可选】显示 toc_number (默认为设置中 toc 的 number 配置)
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)
hide	【可选】隐藏文章
sticky	【可选】文章置顶，值越大越考上

标签页

前往你的 Hexo 博客的根目录
输入hexo new page tags
你会找到source/tags/index.md这个文件
修改这个文件：

记得添加 type: “tags”

---
title: 标籤
date: 2022-02-22 22:22:22
type: "tags"
---

分类页

分类页
前往你的 Hexo 博客的根目录
输入hexo new page categories
你会找到source/categories/index.md这个文件
修改这个文件：

记得添加 type: “categories”

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

友情链接

为你的博客创建一个友情链接！

创建友情链接页面

前往你的 Hexo 博客的根目录
输入 hexo new page link
你会找到source/link/index.md这个文件
修改这个文件：

记得添加 type: “link”

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

class_name 和 class_desc 支持 html 格式书写，如不需要，也可以留空。

友情链接界面设置

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

图库

这个功能不实用需要的话去文档看https://butterfly.js.org/posts/dc584b87/#%E5%9C%96%E5%BA%AB

404页面

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

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

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

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

Butterfly 安装文档(三) 主题配置-1

语言

修改站点配置文件 _config.yml

默认语言是 en

主题支持三种语言

default(en)
zh-CN (简体中文)
zh-TW (繁体中文)

网站信息

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

title: StackHub  //网站标题
subtitle: ''   //副标题
description: '' //描述
keywords: //关键字
author: fanyg //作者
language: zh-CN //语言
timezone: ''  //时区

导航菜单

修改 主题配置文件

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

demo:

代码

代码块中的所有功能只适用于 Hexo 自带的代码渲染

如果使用第三方的渲染器，不一定会有效

代码高亮主题

Butterfly 支持6种代码高亮样式：

darker
pale night
light
ocean
mac
mac light

修改 主题配置文件
highlight_theme: light
具体什么效果请到文档上看https://butterfly.js.org/posts/4aa8abbe/#%E4%BB%A3%E7%A2%BC%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A1%8C

代码复制

主题支持代码复製功能

修改 主题配置文件

highlight_copy: true

代码框展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码

true 全部代码框不展开，需点击>打开
false 代码狂展开，有>点击按钮
none 不显示>按钮

修改 主题配置文件

highlight_shrink: true #代码框不展开，需点击 '>' 打开

你也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。

当主题配置文件中的 highlight_shrink 设为true时，可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。

当主题配置文件中的 highlight_shrink 设为false时，可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

修改 主题配置文件

code_word_wrap: true

如果你是使用 highlight 渲染，需要找到你站点的 Hexo 配置文件_config.yml，将line_number改成false:

highlight:
  enable: true
  line_number: false # <- 改这里
  auto_detect: false
  tab_replace:

如果你是使用 prismjs 渲染，需要找到你站点的 Hexo 配置文件_config.yml，将line_number改成false:

prismjs:
  enable: false
  preprocess: true
  line_number: false # <- 改这里
  tab_replace: ''

具体效果看这里https://butterfly.js.org/posts/4aa8abbe/#%E4%BB%A3%E7%A2%BC%E6%8F%9B%E8%A1%8C

代码高度限制(推荐开启)

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

highlight_height_limit: false # unit: px

注意：

1. 单位是 px，直接添加数字，如 200

实际限制高度为 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit 一点时，出现展开按钮，展开没内容。
不适用于隐藏后的代码块（ css 设置 display: none）

社交图标

Butterfly支持 font-awesome v6图标.

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

social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

图标名可在这寻找

主页文章节选(自动节选和文章页description)

因为主题UI的关係，主页文章节选只支持自动节选和文章页description。

在butterfly里，有四种可供选择

description：只显示description
both：优先选择description，如果没有配置description，则显示自动节选的内容
auto_excerpt：只显示自动节选
false：不显示文章内容
修改 主题配置文件

index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

description在front-matter里添加

就是在markdown写文章的时候加个description

例

---
title: 'buttfly主题配置与魔改'
date: 2022-04-04 9:00:00
tags: 博客
categories: 瞎折腾
description: 这是一篇关于主题配置的文章   //这样就会在主页显示这个文章的描述
---

顶部图

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

配置	解释
index_img	主页的 top_img
default_top_img	默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img	归档页面的 top_img
archive_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 可配置以下值

3.2.0 以下版本的配置只支持

留空，true 和 false - 显示默认的顔色
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 和 category_per_img 是 3.2.0 新增的内容，可对 tag 和 category 进行单独的配置

并不推荐为每个 tag 和每个 category 都配置不同的顶部图，因为配置太多会拖慢生成速度

tag_per_img：
  aplayer: https://xxxxxx.png
  android: ddddddd.png
  
category_per_img：
  随想: hdhdh.png
  推荐: ddjdjdjd.png

top_img: false

文章置顶

【推荐】hexo-generator-index从 2.0.0 开始，已经支持文章置顶功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章封面

文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址。
如果不配置cover,可以设置显示默认的cover.

如果不想在首页显示cover,可以设置为false

修改主题配置文件

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:

上面这个position是文章封面图的位置具体效果可以看https://butterfly.js.org/posts/4aa8abbe/#%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2

当配置多张图片时,会随机选择一张作为cover.此时写法应为

default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相关配置

文章meta显示

这个选项是用来显示文章的相关信息的。

修改主题配置文件

post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标籤
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标籤
    label: true # true or false 显示描述性文字

文章版权

为你的博客文章展示文章版权和许可协议。

修改主题配置文件

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

由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置decode: true来显示中文网址。

如果有文章（例如：转载文章）不需要显示版权，可以在文章Front-matter单独设置

copyright: false

copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。

对于没有提供二维码的，可配置一张软件的icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。

link可以不写，会默认为图片的链接。

修改主题配置文件

reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

属性	解释
post	文章页是否显示 TOC
page	普通页面是否显示 TOC
number	是否显示章节数
expand	是否展开 TOC
style_simple	简洁模式（侧边栏只显示 TOC, 只对文章页有效）

文章锚点(建议开启)

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题ID进行替换
(注意: 每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。)

修改主题配置文件

# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基準。

# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

limit_day：距离更新时间多少天才显示文章过期提醒

message_prev ：天数之前的文字

message_next：天数之后的文字

文章编辑按钮(不推荐开启很鸡肋的功能)

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章分页按钮

# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

头像

修改主题配置文件

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

图片描述

可开启图片Figcaption描述文字显示

优先显示图片的 title 属性，然后是 alt 属性

修改主题配置文件

photofigcaption: true

复製相关配置

可配置网站是否可以复製、复製的内容是否添加版权信息

# copy settings
# copyright: Add the copyright information after copied content (复製的内容后面加上版权信息)
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50 //字符超过50就会给复制的内容加上版权信息

添加版权信息后

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.


作者: Jerry
连结: http://localhost:4000/posts/bd3c650b/#Paragraph
来源: Butterfly
着作权归作者所有。商业转载请联络作者获得授权，非商业转载请註明出处。

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

修改主题配置文件

footer:
  owner:
    enable: true
    since: 2018

页脚自定义文本

custom_text是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。

修改主题配置文件

custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

对于部分人需要写 ICP 的，也可以写在 custom_text里

custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号：xxxxxx</span></a>

右下角按钮

简繁转换

简体繁体互换

右下角会有简繁转换按钮。

修改主题配置文件

translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

夜间模式

右下角会有夜间模式按钮

修改主题配置文件

# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false

V2.0.0 开始增加一个选项，可开启自动切换light mode 和 dark mode

autoChangeMode: 1 跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode

autoChangeMode: 2 只按照时间晚上6点到早上6点之间切换为 dark mode,其余时间为light mode

autoChangeMode: false 取消自动切换

閲读模式

閲读模式下会去掉除文章外的内容，避免干扰閲读。

只会出现在文章页面，右下角会有閲读模式按钮。

修改主题配置文件

readmode: true

按钮排序

请看这里

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

修改主题配置文件

aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      enable: true
	  icon: fab fa-github
      text: Github
      link: https://github.com/jerryc127/hexo-theme-butterfly
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true

详细效果请看这里

访问人数 busuanzi (UV 和 PV)

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

网页已运行时间

修改主题配置文件

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

标籤外挂（Tag Plugins）

太多了需要的话请看这里

有很多让文章变得更漂亮的写法可以去看看

Butterfly 安装文档(四) 主题配置-2

从现在开始只贴一些能用的到的东西其它我没用到的只会贴个链接

很多设置所以请看这里

比较推荐来必力 twikoo

在线聊天

我估计大多数人都用不到所以请看这里

如果你不知道 sharejs，看看它的説明。

修改主题配置文件

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

Addtoany

可以到addtoany查看使用説明

addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

搜索系统

Algolia

记得运行 hexo clean

你需要安装 hexo-algolia或 hexo-algoliasearch. 根据它们的説明文档去做相应的配置。
修改主题配置文件

algolia_search:
  enable: true
  hits:
    per_page: 6

本地搜索

你需要安装 hexo-generator-search，根据它的文档去做相应配置
修改主题配置文件

local_search:
  enable: false

网站验证

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平臺进行提交。
各自的验证码可从各自管理平臺拿到

修改主题配置文件

site_verification:
  # - name: google_site_verification
  #   content: xxxxxx
  # - name: baidu_site_verification
  #   content: xxxxxxx

分析统计

支持

百度统计
谷歌分析
CNZZ分析
Cloudflare分析
Microsoft Clarity

详细请看这里

Math 數學

建議使用 KaTex 獲得更好的效果，下文有介紹！

修改 主題配置文件:

mathjax:
  enable: true
  # true 表示每一頁都加載mathjax.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false

如果per_page設為true,則每一頁都會加載Mathjax服務。設為false，則需要在文章Front-matter添加mathjax: true,對應的文章才會加載Mathjax服務。

然後你需要修改一下默認的markdown渲染引擎來實現 MathJax 的效果。

查看: hexo-renderer-kramed

以下操作在你 hexo 博客的目錄下 (不是 Butterfly 的目錄!):

效果：

首先禁用MathJax（如果你配置過 MathJax 的話），然後修改你的主題配置文件以便加載katex.min.css:

katex:
  enable: true
  # true 表示每一頁都加載katex.js
  # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true

你不需要添加katex.min.js來渲染數學方程。相應的你需要卸載你之前的 hexo 的 markdown 渲染器，然後安裝其它插件。

卸載掉 marked 插件，安裝 hexo-renderer-markdown-it

npm un hexo-renderer-marked --save # 如果有安裝這個的話，卸載
npm un hexo-renderer-kramed --save # 如果有安裝這個的話，卸載

npm i hexo-renderer-markdown-it --save # 需要安裝這個渲染插件
npm install @neilsustc/markdown-it-katex --save #需要安裝這個katex插件

在 hexo 的根目錄的 _config.yml 中配置

markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

如需配置其它參數，請參考 katex 官網

注意，此方法生成的 katex 沒有斜體

卸載掉 marked 插件，然後安裝新的hexo-renderer-markdown-it-plus:

# 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save


# 然後安裝 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到 hexo-renderer-markdown-it-plus已經無人持續維護, 所以我們使用 @upupming/hexo-renderer-markdown-it-plus。這份 fork 的代碼使用了 @neilsustc/markdown-it-katex同時它也是 VSCode 的插件 Markdown All in One所使用的, 所以我們可以獲得最新的 KaTex 功能例如 \tag{}。

你還可以通過 @neilsustc/markdown-it-katex控制 KaTeX 的設置，所有可配置的選項參見 https://katex.org/docs/options.html。比如你想要禁用掉 KaTeX 在命令行上輸出的宂長的警告信息，你可以在根目錄的 _config.yml 中使用下面的配置將 strict 設置為 false:

markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

當然，你還可以利用這個特性來定義一些自己常用的 macros。

因為 KaTeX 更快更輕量，因此沒有 MathJax 的功能多（比如右鍵菜單）。為那些使用 MathJax 的用戶，主題也內置了 katex 的複製功能。

美化/特效

自定義主題色

可以修改大部分UI顏色

修改 主題配置文件，比如：

顏色值必須被雙引號包裹，就像"#000"而不是#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"

網站背景

默認顯示白色，可設置圖片或者顏色

修改 主題配置文件

# 圖片格式 url(http://xxxxxx.com/xxx.jpg)
# 顏色（HEX值/RGB值/顔色單詞/漸變色)
# 留空 不顯示背景
background:

留意: 如果你的網站根目錄不是’/‘,使用本地圖片時，需加上你的根目錄。
例如：網站是 https://yoursite.com/blog,引用一張img/xx.png圖片，則設置background為 `url(/blog/img/xx.png)

background:’#49B202’

background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

修改 主題配置文件

# footer是否顯示圖片背景(與top_img一致)
footer_bg: true

配置的值	效果
留空/false	顯示默認的顔色
img鏈接	圖片的鏈接，顯示所配置的圖片
顔色( HEX值 - #0000FF RGB值 - rgb(0,0,255) 顔色單詞 - orange 漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%) ）	對應的顔色
true	顯示跟 top_img 一樣

true

打字效果

打字效果activate-power-mode

修改 主題配置文件

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

背景特效

好看的綵帶背景，可設置每次刷新更換綵帶，或者每次點擊更換綵帶
修改 主題配置文件

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #設置是否每次點擊都更換綵帶
  mobile: false # false 手機端不顯示 true 手機端顯示

相關配置可查看canvas_ribbon

好看的綵帶背景，會飄動
修改 主題配置文件

canvas_fluttering_ribbon:
  enable: true
  mobile: false # false 手機端不顯示 true 手機端顯示

修改 主題配置文件

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 # false 手機端不顯示 true 手機端顯示

鼠標點擊效果

zIndex建議只在-1和9999上選
-1 代表煙火效果在底部
9999 代表煙火效果在前面

修改 主題配置文件

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

修改 主題配置文件

# 點擊出現愛心
click_heart:
  enable: true
  mobile: false

修改 主題配置文件

# 點擊出現文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false # 文字隨機顯示
  mobile: false

頁面美化

會改變ol、ul、h1-h5的樣式

field配置生效的區域

post 只在文章頁生效
site 在全站生效

修改 主題配置文件

# 美化頁面顯示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon填寫的是fontawesome的icon的Unicode數。

未開啟美化

開啟美化

自定義字體和字體大小

全局字體

可自行設置字體的font-family
如不需要配置，請留空

修改 主題配置文件

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

Blog 標題字體

可自行設置字體的font-family
如不需要配置，請留空。
如不需要使用網絡字體，只需要把font_link留空就行

修改 主題配置文件

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

網站副標題

可設置主頁中顯示的網站副標題或者喜歡的座右銘。

修改 主題配置文件

# 主頁subtitle
subtitle:
  enable: false
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 今日事&#44;今日畢
    - Never put off till tomorrow what you can do today

主頁top_img顯示大小

適用於版本號 >= V1.2.0

默認的顯示為全屏。site-info的區域會居中顯示

# 主頁設置
# 默認top_img全屏，site_info在中間
# 使用默認, 都無需填寫（建議默認）
index_site_info_top: # 主頁標題距離頂部距離  例如 300px/300em/300rem/10%
index_top_img_height:  #主頁top_img高度 例如 300px/300em/300rem  不能使用百分比

注意：index_top_img_height的值不能使用百分比。
2個都不填的話，會使用默認值

舉例，當

index_top_img_height: 400px

效果

頁面加載動畫preloader

當進入網頁時，因為加載速度的問題，可能會導致top_img圖片出現斷層顯示，或者網頁加載不全而出現等待時間，開啟preloader後，會顯示加載動畫，等頁面加載完，加載動畫會消失。

配置butterly.yml

# 加載動畫 Loading Animation
preloader: true

PWA

要為Butterfly配上 PWA 特性, 你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-offline --save 或者 yarn add hexo-offline
在根目錄創建 hexo-offline.config.cjs 文件，並增加以下內容。

// offline config passed to workbox-build.
module.exports = {
  globPatterns: ['**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}'],
  // 靜態文件合集，如果你的站點使用了例如 webp 格式的文件，請將文件類型添加進去。
  globDirectory: 'public',
  swDest: 'public/service-worker.js',
  maximumFileSizeToCacheInBytes: 10485760, // 緩存的最大文件大小，以字節為單位。
  skipWaiting: true,
  clientsClaim: true,
  runtimeCaching: [ // 如果你需要加載 CDN 資源，請配置該選項，如果沒有，可以不配置。
    // CDNs - should be CacheFirst, since they should be used specific versions so should not change
    {
      urlPattern: /^https:\/\/cdn\.example\.com\/.*/, // 可替換成你的 URL
      handler: 'CacheFirst'
    }
  ]
}

更多內容請查看 hexo-offline的官方文檔

在主題配置文件中開啟 pwa 選項。

pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  apple_touch_icon: /img/pwa/apple-touch-icon.png
  favicon_32_32: /img/pwa/32.png
  favicon_16_16: /img/pwa/16.png
  mask_icon: /img/pwa/safari-pinned-tab.svg

在創建source/目錄中創建manifest.json文件。

{
    "name": "string",
    "short_name": "Junzhou",
    "theme_color": "#49b1f5",
    "background_color": "#49b1f5",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
          "src": "images/pwaicons/36.png",
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
      ],
      "splash_pages": null
  }

你也可以通過 Web App Manifest快速創建manifest.json。（Web App Manifest 要求至少包含一個 512*512 像素的圖標）

可以通過Chrome插件Lighthouse檢查 PWA 配置是否生效以及配置是否正確。
- 打開博客頁面
- 啟動Lighthouse插件 (Lighthouse插件要求至少包含一個 512*512 像素的圖標)

關於 PWA（漸進式增強 Web 應用）的更多內容請參閲 Google Tools for Web Developers

字數統計

要為Butterfly配上字數統計特性, 你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-wordcount --save or yarn add hexo-wordcount
修改 主題配置文件:

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

圖片大圖查看模式

只能開啟一個

如果你並不想爲某張圖片添加大圖查看模式，你可以使用 html 格式引用圖片，併爲圖片添加 no-lightbox class 名。

修改 主題配置文件

# fancybox http://fancyapps.com/fancybox/3/
fancybox: true

修改 主題配置文件

medium_zoom: true

Snackbar 彈窗

Snackbar 彈窗,根據自己愛好開啟

修改 主題配置文件

# Snackbar 彈窗
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode時彈窗背景
  bg_dark: '#2d3035' #dark mode時彈窗背景

未開啟Snackbar

開啟Snackbar

其它配置

CSS 前綴

有些 CSS 並不是所有瀏覽器都支持，需要增加對應的前綴才會生效。

開啟 css_prefix 後，會自動為一些 CSS 增加前綴。（會增加 20%的體積）

修改配置文件

# Add the vendor prefixes to ensure compatibility
css_prefix: true

Open Graph

在 head 裏增加一些 meta 資料，例如縮略圖、標題、時間等等。當你分享網頁到一些平臺時，平臺會讀取 Open Graph 的內容，展示縮略圖，標題等等信息。

修改配置文件

# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta: true

Instantpage

當鼠標懸停到鏈接上超過 65 毫秒時，Instantpage 會對該鏈接進行預加載，可以提升訪問速度。

修改配置文件

# https://instant.page/
# prefetch (預加載)
instantpage: true

Pangu

如果你跟我一樣，每次看到網頁上的中文字和英文、數字、符號擠在一塊，就會坐立難安，忍不住想在它們之間加個空格。這個外掛正是你在網路世界走跳所需要的東西，它會自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。

修改配置文件

# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
  enable: false
  field: post # site/post

field只支持兩個參數，post(只在文章頁生效)和site(全站生效)

Pjax

當用戶點擊鏈接，通過ajax更新頁面需要變化的部分，然後使用HTML5的pushState修改瀏覽器的URL地址。

這樣可以不用重複加載相同的資源（css/js），從而提升網頁的加載速度。

# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

對於一些第三方插件，有些並不支持 pjax 。
你可以把網頁加入到 exclude 裏，這個網頁會被 pjax 排除在外。
點擊該網頁會重新加載網站

使用pjax後，一些自己DIY的js可能會無效，跳轉頁面時需要重新調用，請參考Pjax文檔
使用pjax後，一些個別頁面加載的js/css，將會改為所有頁面都加載

Butterfly的Pjax目前仍有一些問題，請留意

使用谷歌廣告可能會報錯（例如自動廣告）

如果你在使用中發現問題，歡迎反饋Bugs

Inject

2.3.0以上支持

如想添加額外的js/css/meta等等東西，可以在Inject裏添加，支持添加到head(</body>標籤之前)和bottom(</html>標籤之前)。

請注意：以標準的html格式添加內容

例如

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

留意: 如果你的網站根目錄不是’/‘,使用本地圖片時，需加上你的根目錄。
例如：網站是 https://yoursite.com/blog,引用css/xx.css，則設置為<link rel="stylesheet" href="/blog/css/xx.css">

CDN

配置文件中最後一部分CDN，裏面是主題所引用到的文件，可自行配置CDN。（非必要請勿修改，配置後請確認鏈接是否能訪問）

以下是一些CDN提供商：

jsdelivr 👍主題使用
bootcdn
cdnjs
……

Butterfly-安裝文檔-五-主題問答

📖 本教程更新於 2022 年 02 月 13 日，教程的內容針對最新穩定版而更新（如果你是舊版，教程會有些出入，請留意）

🦋 Butterfly 已經更新到 4.1.0

以下是一些網友在安裝的過程中出現的問題。在提問題之前，先看有沒有解決方法。

運行後網頁顯示代碼

頁面只顯示 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug #aside_content.aside_content include includes/aside.pug

請下載安裝：npm install hexo-renderer-pug hexo-renderer-stylus --save or `yarn add hexo-renderer-pug hexo-renderer-stylus

配置友情鏈接報錯

配置友情鏈接頁面時出現報錯

ERROR D:\Desktop\orxing-blog\themes\Butterfly\layout\flink.pug:2
    1| .flink
  > 2|   each i in site.data.link
    3|     p.comment-word= i.class_name
    4|     .post-cards
    5|       ul.md-links

Cannot read property &#39;length&#39; of undefined
TypeError: D:\Desktop\orxing-blog\themes\Butterfly\layout\flink.pug:2
    1| .flink
  > 2|   each i in site.data.link
    3|     p.comment-word= i.class_name
    4|     .post-cards
    5|       ul.md-links

Cannot read property &#39;length&#39; of undefined
    at eval (eval at wrap (D:\Desktop\orxing-blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:1890:32)
    at eval (eval at wrap (D:\Desktop\orxing-blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:2017:4)
    at template (eval at wrap (D:\Desktop\orxing-blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:10152:72)
    at Theme._View.View._compiled (D:\Desktop\orxing-blog\node_modules\hexo\lib\theme\view.js:123:48)
    at Theme._View.View.View.render (D:\Desktop\orxing-blog\node_modules\hexo\lib\theme\view.js:29:15)
    at D:\Desktop\orxing-blog\node_modules\hexo\lib\hexo\index.js:349:21
    at tryCatcher (D:\Desktop\orxing-blog\node_modules\bluebird\js\release\util.js:16:23)
    at D:\Desktop\orxing-blog\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (D:\Desktop\orxing-blog\node_modules\hexo\lib\hexo\router.js:123:3)
    at RouteStream.Readable.read (_stream_readable.js:457:10)
    at resume_ (_stream_readable.js:936:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:9)

請檢查 link.yml文檔內代碼的空格

升級最新版後運行報錯

升級最新版本hexo g後報錯

INFO  Deleted database.
INFO  Start processing
FATAL Something&#39;s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
TypeError: Cannot read property &#39;enable&#39; of undefined
    at Hexo.<anonymous> (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/themes/Butterfly/scripts/post-lazyload.js:5:23)
    at Hexo.tryCatcher (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/method.js:15:34)
    at /Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/hexo/lib/extend/filter.js:60:50
    at tryCatcher (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/reduce.js:155:18)
    at Object.gotAccum (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/reduce.js:144:25)
    at Object.tryCatcher (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/promise.js:517:31)
    at Promise._settlePromise (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromiseCtx (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/promise.js:611:10)
    at _drainQueueStep (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:17:14)
    at processImmediate (internal/timers.js:439:21)

請參照最新版的_config.yml, 比對後，把缺的配置複製到主題配置文件中去

wordcount is not a function / totalcount is not a function

報錯wordcount is not a function

請檢查是否安裝了wordcount插件 npm i --save hexo-wordcount

升級2.0.0後運行報錯

舊版本升級到2.0.0後報錯

INFO Start processing
FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
unexpected end of file
at Object.prettifyError (F:\hexo\nodemodules\nunjucks\src\lib.js:36:11)
at Template.render (F:\hexo\node_modules\nunjucks\src\environment.js:542:21)
at Environment.renderString (F:\hexo\node_modules\nunjucks\src\environment.js:380:17)
at Promise.fromCallback.cb (F:\hexo\node_modules\hexo\lib\extend\tag.js:123:48)
at tryCatcher (F:\hexo\node_modules\bluebird\js\release\util.js:16:23)
at Function.Promise.fromNode.Promise.fromCallback (F:\hexo\node_modules\bluebird\js\release\promise.js:185:30)
at Tag.render (F:\hexo\node_modules\hexo\lib\extend\tag.js:123:18)
at Object.onRenderEnd (F:\hexo\node_modules\hexo\lib\hexo\post.js:280:20)
at Promise.then.then.result (F:\hexo\node_modules\hexo\lib\hexo\render.js:64:19)
at tryCatcher (F:\hexo\node_modules\bluebird\js\release\util.js:16:23)
at Promise.settlePromiseFromHandler (F:\hexo\nodemodules\bluebird\js\release\promise.js:517:31)

2.0.0版本以上刪掉了gallery，而引入新的gallery。所以如果有使用舊版，需刪掉或者更改寫法。

代碼渲染與實際不同

2.1.0 以下版本會出現的問題

代碼渲染與實際不同

<div>aaa</div>

渲染結果:

cheerio版本錯誤，請安裝0.22.0版本

npm install cheerio@0.22.0 –save

搜索欄在底部

hexo deploy後搜索欄在頁面底部

生成前先hexo clean

本地可以正常運行，但是push上去後出錯/缺失/無效

清理瀏覽器緩存

如果1無效，請確認上傳時是否有運行 hexo clean

已在Hexo的配置文件設置了語言，為什麼導航欄仍然是英文

請在導航的配置裏，自己修改成想要的中文

首頁: / || fa fa-home
時間軸: /archives/ || fa fa-archive
標籤: /tags/ || fa fa-tags
分類: /categories/ || fa fa-folder-open

運行報錯 Cannot read property ‘bind’ of undefined/full_url_for is not function

TypeError: Cannot read property 'bind' of undefined

把Hexo升級到4.0以上版本

Cannot read property ‘appId’ of undefined

報錯

  > 1| -
    2|   var algolia = 'undefined';
    3|   var env = process.env;
    4|   if (theme.algolia_search.enable) {

Cannot read property 'appId' of undefined
    at eval (eval at wrap (F:\github\Blog\blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:8:49)
    at template (eval at wrap (F:\github\Blog\blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:329:53)
    at _View._compiledSync (F:\github\Blog\blog\node_modules\hexo\lib\theme\view.js:132:24)
    at _View.renderSync (F:\github\Blog\blog\node_modules\hexo\lib\theme\view.js:59:25)
    at F:\github\Blog\blog\node_modules\hexo\lib\plugins\helper\partial.js:31:52
    at Cache.apply (F:\github\Blog\blog\node_modules\hexo\node_modules\hexo-util\lib\cache.js:27:46)
    at Object.fragmentCache (F:\github\Blog\blog\node_modules\hexo\lib\plugins\helper\fragment_cache.js:11:34)
    at Object.partial (F:\github\Blog\blog\node_modules\hexo\lib\plugins\helper\partial.js:31:17)
    at eval (eval at wrap (F:\github\Blog\blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:149:46)
    at template (eval at wrap (F:\github\Blog\blog\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:5213:93)
    at _View._compiled (F:\github\Blog\blog\node_modules\hexo\lib\theme\view.js:136:50)
    at _View.render (F:\github\Blog\blog\node_modules\hexo\lib\theme\view.js:39:17)
    at F:\github\Blog\blog\node_modules\hexo\lib\hexo\index.js:64:21
    at tryCatcher (F:\github\Blog\blog\node_modules\hexo\node_modules\bluebird\js\release\util.js:16:23)
    at F:\github\Blog\blog\node_modules\hexo\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (F:\github\Blog\blog\node_modules\hexo\lib\hexo\router.js:30:5)
    at RouteStream.Readable.read (_stream_readable.js:490:10)
    at resume_ (_stream_readable.js:975:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  path: 'F:\\github\\Blog\\blog\\themes\\Butterfly\\layout\\includes\\head.pug'
}

algolia 插件安裝後還需要配置
查看插件文檔配置

頂部出現 Loading

生成前先 hexo clean

⚡️ Butterfly 安裝文檔(六) 進階教程

點擊中文目錄報錯的問題

這種情況出現在主題為 3.0.0以下版本，升級主題就行

Butterfly-安装文档-六-进阶教程

📖 本教程更新於 2022 年 02 月 13 日，教程的內容針對最新穩定版而更新（如果你是舊版，教程會有些出入，請留意）

🦋 Butterfly 已經更新到 4.1.0

📚 文檔目錄

Post not found: Butterfly-安裝文檔-一-快速開始 🚀 快速開始 - Post not found: Butterfly-安裝文檔-二-主題頁面 📑 主題頁面 - Post not found: Butterfly-安裝文檔-三-主題配置-1 🛠 主題配置-1 - Post not found: Butterfly-安裝文檔-四-主題配置-2 ⚔️ 主題配置-2 - Post not found: Butterfly-安裝文檔-五-主題問答 ❓ 主題問答 - Post not found: Butterfly-安裝文檔-六-進階教程 ⚡️ 進階教程 - Post not found: Butterfly-安裝文檔-七-更新日誌 ✨ 更新日誌 - Post not found: Butterfly-打賞 🤞 打賞

你可以通過右下角的簡按鈕切換為簡體顯示

建議

不要把個人需要的文件/圖片放在主題source文件夾裏，因為在升級主題的過程中，可能會把文件覆蓋刪除了。
在Hexo根目錄的source文件夾裏，創建一個文件夾來放置個人文件/圖片。
引用文件直接為/文件夾名稱/文件名

音樂

音樂界面使用了插件 hexo-tag-aplayer
使用方法請參考插件文檔

音樂頁面只是普通的page頁，按普通頁面操作生成就行。

以下內容可供選擇配置

注意：仍需要安裝插件hexo-tag-aplayer

插件會在每一個文件都插入 js 和 css，為了避免這一情況，3.0 版本內置了 aplayer 需要的 css 和 js。

首先在Hexo根目錄_config裏配置asset_inject為false

aplayer:
  asset_inject: false

然後在你需要使用aplayer的頁面Front-matter添加

aplayer: true

這樣只會在需要aplayer的頁面插入js和css。

如何添加全局 Aplayer 播放，請參考這篇文章

電影

電影界面使用了插件 hexo-butterfly-douban
使用方法請參考插件的文檔。

注意：

hexo-butterfly-douban 會主動生成頁面，所以不需要自己創建。
如遇到無法抓取問題，顯示 INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad
請過段時間再試試，這我也無能為力。

説説

Artitalk

安裝插件 hexo-butterfly-artitalk

具體配置查看插件文檔

HexoPlusPlus Talk

安裝插件 hexo-butterfly-hpptalk

具體配置查看插件文檔

自定義代碼配色

點擊前往

自定義側邊欄

點擊前往

添加全局吸底Aplayer教程

點擊前往

Icon

Butterfly主題內置了Font Awesome V5 圖標，目前已更新到 5.13.0，總共有1,588個免費圖標。由於是國外的圖標網站，對於國內的一些網站Icon並不支持。如有需要，你可以引入其它的圖標服務商。

iconfont

國內最出名的莫過於iconfont,功能很強大且圖標內容很豐富的矢量圖標庫。很多Font Awesome不支持的圖標都可以在這裏找到。同時，iconfont支持選擇需要的圖標生成css鏈接，減少不必要的CSS加載。

註冊賬號

打開iconfont的網站，點擊導航欄的人像圖標，會跳出註冊界面，按要求註冊賬號。

Snipaste_2020-05-28_21-12-01

添加圖標入庫

選擇自己需要的圖標，把鼠標移到圖標上，會顯示三個按鈕（依次是添加入庫、收藏和下載），而我們需要的是把圖標添加入庫

添加入庫後，你可以看到網站右上角購物車圖標顯示了1字，代表圖標已經添加入庫，點擊購物車圖標，會彈出側邊欄顯示詳情。

已選擇的圖標會顯示在上面，你可以重複上面的操作，把需要的圖標添加入庫，然後點擊添加到項目。

接下來會要求選擇項目名稱，沒有的自己創建一個。

生成CSS鏈接

在添加到項目之後，會跳到項目的詳情界面。點擊Font class，然後再點擊暫無代碼，點擊生成文字。網站會自動生成CSS鏈接，我們只需要複製鏈接就行。

添加鏈接進主題配置文件

打開主題配置文件，找到inject配置，按要求把鏈接填入

在我們需要使用的地方填入icon，例如Menu，圖片使用格式為iconfont icon名字

運行Butterfly之後，你就可以看到menu的圖標生效了

其他添加方法

除了通過引入CSS鏈接使用圖標，iconfont也支持通過其它方法使用圖標，具體可查看iconfont官方使用文檔

其它圖標提供商

除了iconfont，還有RemixIcon、Flaticon等等提供商，很多圖標可以選擇，具體使用方法請參考各自的文檔。

圖片壓縮

Butterfly主題需要使用到很多圖片。如果圖片太大，會嚴重拖慢網站的加載速度。

圖片壓縮能夠有效的緩解這個問題。

除了通過gulp-imagemin來壓縮圖片，還可以通過在綫壓縮網站和軟件來進行壓縮。以下兩款是我自己正在使用的工具。網上有很多這樣的工具，挑選一款適合自己的就行。

tinypng

一個在綫壓縮的網站。壓縮後的圖片也保留了很高的質量，在知乎上很多人推薦，不過免費版有限制。
caesium

開源軟件，支持Windows和macOS。可以批量壓縮軟件，無限制。
imgbot

imgbot 是一款 Github 插件。

安裝後，你上傳圖片到 Github 去，imgbot 會自動壓縮圖片並推送 PR，我們只需要合併 PR 就行

你可以配置 imgbot 的偵測方法、壓縮方法（有損/無損），具體可以查看插件的文檔

插件推薦

hexo-abbrlink

可以把鏈接permalink轉為數字的插件，配置容易，生成時自動轉為數字。
hexo-generator-feed

生成RSS文件的插件
hexo-filter-nofollow

為網站使用到的所有外鏈添加rel="noopener external nofollow noreferrer", 可以有效地加強網站SEO和防止權重流失
hexo-generator-sitemap

生成sitemap的插件
hexo-generator-baidu-sitemap

看名字就知道，是專門為百度生成sitemap的插件

✨ Butterfly 安裝文檔(七) 更新日誌

Butterfly添加Aplayer教程

以下文章只是教程

如果部署之后，并没有出现 aplayer , 请确认是否跟足步骤操作或者更换音乐源，多试试。

如果遇到使用問題，请仔细查看插件文档，或者到插件那裏反饋。

前言

如果你想使用 aplayer，很多人都會推薦安裝 hexo-tag-aplayer 這款插件。這款插件通過 Hexo 獨有的標籤外掛，我們可以很方便的寫入一些參數，插件就會幫我們生成對應的 html。如果你只是使用一些簡單的功能，其實無需使用到這個插件，只需以 html 格式書寫就行，不用插件去轉換。

例如：

如果使用插件，在 markdown 中要這樣寫

{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

其會被插件渲染為

<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>

如果我們不想使用插件，就需要在markdown中用html的格式書寫，同時把主題配置文件中的aplayerInject開啟

<div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div>

這樣我們就可以不用使用多一個插件，當然這種東西見仁見智，選自己喜歡的就行。

回到正題，這篇文章將教大家如何在Butterfly上使用全局吸底 Aplayer

aplayer

關閉 `asset_inject`

此步驟適用於安裝了 hexo-tag-aplayer 插件的人

由於需要全局都插入 aplayer 和 meting 資源，為了防止插入重複的資源，需要把 asset_inject 設為 false

在 Hexo 的配置文件中

aplayer:
  meting: true
  asset_inject: false

開啟主題的 `aplayerInject`

在主題的配置文件中，enable 設為 true 和 per_page 設為 true

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

插入 Aplayer html

為了適配 hexo-tag-aplayer，主題內置的 Meting js 仍為 1.2 版本，並非最新的 2.x 版本。

Aplayer html 例子：

<div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

參數解釋

option	default	description
data-id	require	song id / playlist id / album id / search keyword
data-server	require	music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
data-type	require	`song`, `playlist`, `album`, `search`, `artist`
data-fixed	`false`	enable fixed mode
data-mini	`false`	enable mini mode
data-autoplay	`false`	audio autoplay
data-theme	`#2980b9`	main color
data-loop	`all`	player loop play, values: ‘all’, ‘one’, ‘none’
data-order	`list`	player play order, values: ‘list’, ‘random’
data-preload	`auto`	values: ‘none’, ‘metadata’, ‘auto’
data-volume	`0.7`	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
data-mutex	`true`	prevent to play multiple player at the same time, pause other players when this player start play
data-lrctype	`0`	lyric type
data-listfolded	`false`	indicate whether list should folded at first
data-listmaxheight	`340px`	list max height
data-storagename	`metingjs`	localStorage key that store player setting

require 代表着這些參數是必須要使用的，其它的參數則可以根據自己需要配置。

配置全局吸底，data-fixed 和 data-mini 也必須配置，配置為 true

如果使用 Pjax，則在 class 裏需添加 no-destroy，這樣防止切換頁面時 Aplayer 被銷毀

把 aplayer代碼 插入到主題配置文件的 inject.bottom 去

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

運行 Hexo 就可以看到網頁左下角出現了 Aplayer

最後，如果你想切換頁面時，音樂不會中斷。請把主題配置文件的 pjax 設為 true

魔改教程

首页公告栏轮播组件

修改BlogRoot\themes\butterfly_config.yml（可以忽略，貌似不加也行）

inject:
  head:
+   # 公告栏轮播组件
+   - <link rel="stylesheet" href="https://npm.elemecdn.com/swiper/swiper-bundle.min.css" media="defer"">
  bottom:

新建BlogRoot\themes\butterfly\layout\includes\notice.pug

#notice.notice(onclick=`window.open('/notice/','_self')`)
    i.notice-logo.fas.fa-bullhorn.card-announcement-animation
    span=' '+_p('公告栏')
    #noticeList.swiper-container
        .swiper-wrapper
            .swiper-slide <Custom> //这里是轮播内容
            .swiper-slide <Custom>
            .swiper-slide <Custom>
    i.notice-enter.fas.fa-arrow-circle-right
script(src='https://npm.elemecdn.com/swiper/swiper-bundle.min.js',data-pjax='')
script.
    var swiper = new Swiper ('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

     autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
    })

.swiper-slide Custom这里可以写你的公告内容

新建BlogRoot\source\notice\index.md，也可以通过在命令行里敲hexo new page

---
title: 公告栏 - Notice
date: 2021-04-27 16:09:00
description: 与本站和博主相关的公告
aside: false
---

[这里可以写你的公告]

修改BlogRoot\themes\butterfly\layout\index.pug

extends includes/layout.pug
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    if theme.gitcalendar.enable
      .recent-post-item(style='width:100%;height:7.5% !important;overflow:hidden;')
        !=partial('includes/gitcalendar', {}, {cache: true})
+   include includes/notice.pug
    +postUI
    include includes/pagination.pug

注意：如果你使用了 GitCalendar，可能会出现大小失常，建议height:15%改成height:7.5%，具体情况自行调整

在custom.css里添加以下代码

blog地址/source/css/custom.css

这是自己新建的css文件夹

注意要在主题配置文件(_config.butterfly.yml)中找到 inject 去引入css文件
inject:
head:
- <link rel="stylesheet" href="/css/style.css">
- <link rel="stylesheet" href="/css/custom.css">
bottom:

.notice-logo {
  line-height: 22px;
  margin-right: 8px;
  transition: 0.3s;
}
#notice {
  height: 47px;
  background-color: white;
  color: var(--font-color);
  margin-top: 1rem;
  padding: 0.6rem 1rem 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  overflow: hidden;
}
[data-theme="dark"] #notice {
  background: black !important;
}
#notice span {
  white-space: nowrap;
}
.swiper-wrapper {
  width: 100%;
  height: 25px;
  line-height: 25px;
}
.swiper-wrapper .swiper-slide {
  width: 100%;
  text-align: center;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
  font-weight: bold;
}
.swiper-slide:hover {
  color: #81d8cf;
}
#noticeList {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.notice-enter {
  line-height: 25px;
  margin-left: 8px;
  transition: 0.3s;
}

一些视频教程

小白的话强烈推荐B站卷二兔的教程非常仔细我也是看了他的教程入坑的

这是链接

我的博客配置过程踩的一些坑

首先从小改动开始说吧

夜间模式太黑了

themes\butterfly\source\css_mode\darkmode.styl

到这个文件配置我相信稍微看懂一点英语就知道该配置哪些了

深浅模式下分别使用不同网站背景

修改BlogRoot\themes\butterfly_config.yml，其中background_dark参数为深色模式下的图片地址。

# Website Background (设置网站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(<FilePath>)
+background_dark: url(<FilePath>)

修改BlogRoot\themes\butterfly\source\css\var.styl，在第 36 行左右

$web-bg = hexo-config('background') && unquote(hexo-config('background'))
+$web-bg-dark = hexo-config('background_dark') && unquote(hexo-config('background_dark'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh

修改BlogRoot\themes\butterfly\source\css_mode\darkmode.styl，在第 41 行左右

+   #web_bg
+     background: $web-bg-dark
-   #web_bg:before,
    #footer:before,
    #page-header:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

从上面推荐的那个up主卷二兔那里学来的

博客根目录\source\css\style.css

没有文件夹和文件就新建

在style.css文件写入

#footer {
    background: transparent;
}

还有重要的一步就是在主题配置文件中的inject 引入这个css
inject:
  head:
    - <link rel="stylesheet" href="/css/style.css"> //配置了哪个就引入哪个
    - <link rel="stylesheet" href="/css/custom.css">
  bottom:

什么?你想要更花哨点的??请去学css

侧边小时钟不错怎么加一个同款?

4/8更新: 最好去themes\butterfly\source\css_layout\aside.styl

.card-widget
  @extend .cardHover
  position: relative
  overflow: hidden
  margin-top: 20px
+ margin-bottom: 15px
  padding: 20px 24px

这个时钟在toc_simple模式下和目录挤在一起了所以加个bottom隔开

效果如图:

改法2:

在博客根目录找到node_modules\hexo-butterfly-clock\lib\clock.min.css

然后重新上传到github

- .card-clock{padding:0!important}

+ .card-clock{padding:0!important;margin-bottom: 15px}

我感觉两个都不是很好如果有大佬知道更好的改法可以在评论区分享下

4/8 14:38更新

找到了一很好的解决方法

首先如果你改动了上面的部分请改回原样

进入themes\butterfly\source\css\_layout\aside.styl

改动下面标注的两行

  .card-widget
    @extend .cardHover
    position: relative
    overflow: hidden
-   margin-top: 20px
+   margin-bottom: 15px
    padding: 20px 24px

这时候的效果就完美解决了

如果发现公告标签和个人离得比较近还可以加上审查元素自己看把距离对上就行了

  .card-announcement
+   margin-top: 15px
    .item-headline
      i
        color: #34a9ea

安装

请到魔改大佬的博客看

https://zfe.space/post/hexo-electric-clock.html

简述一下

npm安装插件

npm i hexo-electric-clock --save

2.新增网站根目录_config 配置项 (不是主题的)：

electric_clock:
  priority: 5
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'

执行hexo三连

hexo clean && hexo g && hexo s

文章上面公告栏不错怎么加一个?

https://hassanwong.top/posts/9d49f75f/
看的这个教程 在里面他推荐了个更好的 但是那个更好的一直报错...

文章上面的git贡献日历不错咋加的?

看这个大佬的https://akilar.top/posts/1f9c68c9/

里面还有自建api的教程

利用python去爬取github的贡献

你的怎么没有数据来源咋去掉?

将npm上的gitcalendar.js烤皮一份仍github上用jsd加速然后在配置文件中把 gitcalendar_js替换成改过的js

这文章怎么还有加载动画咋整?

我推荐里面的基础引用

新建 [Blogroot]\themes\butterfly\source\js\wow_init.js，配置特性动画的默认项。
引入 js 和 css 样式，修改 [Blogroot]\_config.butterfly.yml 的 inject 配置项，添加样式资源。
选择需要添加动画的 dom 元素，添加动画 class 类。此处提供三种写法。

我选择了pug 写法，拟给首页文章卡片套上动画，直接源码修改：

修改 [Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug
mixin postUI(posts)
each article , index in page.posts.data
- .recent-post-item
+ .recent-post-item.wow.animate__zoomIn

使用 wowjs 给博客添加动画效果

配置说说页面

这个折腾死我了

https://github.com/jerryc127/butterfly-plugins/tree/main/hexo-butterfly-artitalk)

首先butterfly主题支持两个说说插件

但是教程并不对小白友好经过我的摸索我简述下大致流程
首先是

Artitalk

安装插件 hexo-butterfly-artitalk

具体配置查看插件文档

安装插件npm install hexo-butterfly-artitalk
前往 LeanCloud 国际版，注册账号。
绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。
在左侧内建账户/用户管理下添加账户和密码
回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
然后新建一个名为atComment的class，权限什么的使用默认的即可。
点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url,不填则默认头像
在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。
最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

因为butterfly集成了这个js所以直接到主题配置文件中填入刚刚的ID和Key

# Artitalk 说说
  artitalk:
    enable: true
    appId: 这里是id
    appKey: 这里填key
    path:
    js:
    option:
    front_matter:

现在你需要去# 主题菜单

# 我是这样添加的你可以学我 也可以自行更改

自言自语||fas fa-cubes:
    自语|artitalk: /artitalk/ || fas fa-cubes

这时候去主题根目录\source\新建一个artitalk的文件夹\新建一个index.md填入下面的内容

---
title: 自语|artitalk
date: 2022-04-05 10:20:00
comments: false
---
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fanygOfficial/cdn@file/js/artitalk.js"></script>

<div id="artitalk_main"></div>
<script>
new Artitalk({
    appId: '', // Your LeanCloud appId 注意在这两个单引号里面也要填入ID和Key 不然就会一直加载中
    appKey: '' // Your LeanCloud appKey
})
</script>

现在就可以去hexo三连试一试了
想看细节点的请去Artitalk的文档

然后是

HexoPlusPlus Talk

安装插件 hexo-butterfly-hpptalk

具体配置查看插件文档

安装插件npm install hexo-butterfly-hpptalk
注册一个cloudflare账号
进入左侧workers界面(新版)创建服务 , 只需要更改服务名即可 ,点进这个服务点击右边的快速编辑
打开github或jsdelivr将这个index.js的内容全选复制到第三步的最后 快速编辑 里面的 左侧代码栏里 ,点击保存并部署,返回.
再次点开这个服务,点设置找到下面的变量,首先将最上面的环境变量添加成下图这个(这是账户密码和验证码)
在去Workers里面的KV点开创建一个随便命名
在回到第5步将KV命名空间绑定 绑定上刚刚创建的KV , 并且变量名称要填KVNAME

去触发器中,点击 添加路由

按照人家给的格式添加  //注意这一步你需要在cloudflare上有个已经解析正常的域名
二级域名.一级域名.com/*
注意这个最后的/*一定要添加
这是cf的解释: 使用星号 (*) 字符创建与多个 URL 相匹配的动态模式.
不需要去解析cname之类的 只需等待 等待你这个二级域名可以访问 (大概五分钟)
期间可以去xxxx.xxxxx.workers.dev 这是已经部署好的触发器中的链接可以先点开看看

点开这个链接会报错这时候在这个链接后面加入 /hpp/admin/login 这时候就可以用你之前在变量中设置好的账号密码登录了
此时此刻你已经登录到后台 ,你绑定的域名应该也可以访问了,在后台说说中你可以直接发送说说
现在我们需要去把这个说说引入到hexo中

首先是主题配置文件

hpptalk:
  enable: true 
  domain:
  path:
  limit:
  start:
  js:
  css:
  option:
  front_matter:

md上面一堆啥玩意,其实都不用管你只需要把你绑定的域名加到domain后面注意加空格
domain: admin.你的一级域名.xxx
不需要加协议后面也不需要加/*

这个时候去主题配置页面的菜单配置中

# 我是这样添加的你可以学我 也可以自行更改

自言自语||fas fa-cubes:
    自言|hexo plus plus: /talk/ || fas fa-cubes

对应的你应该去根目录\source\talk\index.md , 新建这些文件在index.md输入

---
title: 自言|HexoPlusPlus
date: 2022-04-05 10:20:00
top_img: 
comments: false
---

<!-- 引用 HexoPlusPlus_Talk组件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@1.2.0/talk.css" /> 
<script src="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@1.2.0/talk_user.js"></script>
<!-- 创建HexoPlusPlus_Talk容器 -->
<div id="hpp_talk"></div>
<!-- 激活HexoPlusPlus_Talk -->
<script>
new hpp_talk({
id:"hpp_talk",//容器id
domain: "这里请填写你绑定的那个域名!!!!!!!",//您的HexoPlusPlus域名，如admin.cyfan.top
limit: 10,//单次获取的最多条数
start: 0,//从第几条开始
//themecss: "" //自定义说说主题，可选【仅1.1.0版本及以上使用】
});
</script>

请看上方配置文件的第17行确保你已经填写了域名
现在就可以hexo三连看看香喷喷的说说页面啦

还有一些以后想到在写吧本篇文章汇总了我这两天的搭建过程

推荐一些大佬的博客

https://akilar.top/

https://zfe.space/

https://blog.zhheo.com/ 这个真的是魔改到离谱! 很酷炫

4月2日折腾到4月5号

本文在4月5号下午写了差不多6个小时累呀睡觉了明天还要查核算

用到的魔改教程

gulp压缩css js html教程

https://akilar.top/posts/49b73b87/

基于 Butterfly 主题的侧边栏电子钟

https://akilar.top/posts/4e39cf4a/

首页置顶 gitcalendar

https://akilar.top/posts/1f9c68c9/

DIY 外挂标签的简单写法与应用

https://akilar.top/posts/e2bf861f/

使用 wowjs 给博客添加动画效果

https://akilar.top/posts/abab51cf/

基于 swiper 的首页置顶轮播图

https://akilar.top/posts/8e1264d1/

魔改教程

https://hassanwong.top/posts/9d49f75f/

https://blog.realwds.com/posts/39c5cc87.html

https://guole.fun/posts/butterfly-custom/ 这个大哥救了我才想起来没在主题配置文件中引入css….

本文如有任何错误请指出或者有更好的方案欢迎在评论区贴上链接友好交流! 我是前端小白,如有错误希望谅解!

2022 /10 /12

今天打算在改动一些参考教程

Butterfly主题美化魔改集锦 https://hassanwong.top/posts/9d49f75f/

Butterfly 主题首页增加公告 https://blog.realwds.com/posts/39c5cc87.html

优化之前的公告栏

butterfly主题的配置

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

应用主题

安装插件

Butterfly 安装文档(二) 主题页面

Front-matter

Page Front-matter

Post Front-matter

标签页

分类页

友情链接

创建友情链接页面

友情链接添加

友情链接界面设置

图库

404页面

Butterfly 安装文档(三) 主题配置-1

语言

网站信息

导航菜单

代码

代码高亮主题

代码复制

代码框展开/关闭

代码换行

代码高度限制(推荐开启)

社交图标

主页文章节选(自动节选和文章页description)

顶部图

文章置顶

文章封面

文章页相关配置

文章meta显示

文章版权

文章打赏

TOC

为特定的文章配置

相关文章

文章锚点(建议开启)

文章过期提醒

文章编辑按钮(不推荐开启 很鸡肋的功能)

文章分页按钮

头像

图片描述

复製相关配置

Footer 设置

博客年份

页脚自定义文本

右下角按钮

简繁转换

夜间模式

閲读模式

按钮排序

侧边栏设置

侧边排版

访问人数 busuanzi (UV 和 PV)

运行时间

最新评论

标籤外挂（Tag Plugins）

Butterfly 安装文档(四) 主题配置-2

评论

在线聊天

分享

share.js

Addtoany

搜索系统

Algolia

本地搜索

网站验证

分析统计

广告

Math 數學

美化/特效

自定義主題色

網站背景

footer 背景

打字效果

背景特效

鼠標點擊效果

頁面美化

文章编辑按钮(不推荐开启很鸡肋的功能)

關閉 `asset_inject`

開啟主題的 `aplayerInject`

Footer太难看想透明

侧边小时钟不错怎么加一个同款?

文章上面公告栏不错怎么加一个?

这文章怎么还有加载动画咋整?