Hexo-魔改(一) ⇦当前位置🪂
Hexo-魔改(二)
Hexo-魔改(三)

一图流教程

点击查看教程
  1. 在 [BlogRoot]\source 文件夹下新建一个文件夹 css，该文件夹用于存放自定义的 css样式，再新建一个名为 custom.css，在里面写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}
  1. 在主题配置文件 [BlogRoot]\_config.butterfly.yml 文件中的 inject 配置项的 head 子项加入以下代码，代表引入刚刚创建的 custom.css 文件（这是相对路径的写法）
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

violet 留言板（店长）

点击查看教程
  1. 在 [BlogRoot] 运行指令
1
npm install hexo-butterfly-envelope --save
  1. 在站点配置文件_config.yml或主题配置文件_config.butterfly.yml 添加以下配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#violet 留言板（店长）
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 本站有哪些做得好或者不好的地方？
    - 或者你有什么改进的建议？
    - 又或者你有什么具体的问题需要咨询？
    - 都可以在下方评论区告诉我哦~~
  bottom: M 小站站长亲自为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

首页分类磁贴 1.0（小冰）

点击查看教程

这个插件主要实现了以下功能：

  1. 自定义 tags 或 categories 的排列和展示
  2. 自定义 tags 或 categories 的展示图标，名称
  3. 自定义排列的行数，默认 2 行

教程：

  1. 在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm i hexo-magnet --save

注意，一定要加 --save，不然本地预览的时候可能不会显示！！！

  1. 在网站配置文件_config.yml 新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 3
  display:
    - name: Hexo
      display_name: Hexo 博客基础搭建教程
      icon: 📚
    - name: 笔记
      display_name: 日常笔记
      icon: 📒
    - name: C
      display_name: C
      icon: 💻
    - name: Ps
      display_name: Photoshop
      icon: 🐱‍👓
    - name: 5ystudy
      display_name: 5y
      icon: 👩‍💻
    - name: PTA
      display_name: PTA
      icon: 📐
  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#b30070"
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

这里附上一个Emoji网站

🤣 Emoji表情大全，颜文字百科 💌 - EmojiXD

配置项的含义：

  • enable

    参数：true/false
    含义：是否开启插件

  • enable_page

    参数：/
    含义：路由地址，如 / 代表主页。/me/ 代表自我介绍页等等

  • priority

    参数：1
    含义：插件的叠放顺序，数字越大，叠放约靠前。

  • type

    参数：categories/tags
    含义：选择筛选分类还是标签

  • devide

    参数：2
    含义：表示分隔的列数，2 表示分为两列展示

  • display

参数：

1
2
3
- name: 教程 # 这里是tags或者categories的名称
  display_name: 小冰の魔改教程 # 这里是替换的名称
  icon: 📚 # 这里是展示的图标

含义：配置项，可自行设置，按照设置的顺序展示

  • color_setting

参数：

1
2
3
4
text_color: black # 文字默认颜色
text_hover_color: white # 文字鼠标悬浮颜色
background_color: "#f2f2f2" # 文字背景默认颜色
background_hover_color: "#b30070" # 文字背景悬浮颜色

含义：颜色配置项，可自行设置

  • layout

参数：html 模板字段
含义：包含挂载容器

1
2
3
4
5
<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->
  <div id="catalog_magnet">  <!--挂载容器-->
    ${temple_html_item}
  </div>
</div>

  • plus_style

    参数：“”
    含义：提供可自定义的 style，如加入黑夜模式。

  1. 执行 hexo 三连

  2. 我们可以看到黑夜模式看起来特别的别扭，因此还要做一下黑夜模式的颜色适配，在 custom.css 文件中添加以下代码适配黑夜模式 (具体颜色可以自己调节)：

1
2
3
4
5
6
7
8
9
10
11
/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #1e1e1e;
  color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  background: #3ecdf1;
  color: #f2f2f2;
}

页脚 Github 徽标（店长）

点击查看教程
  1. 安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-footer-beautify --save
  1. 添加配置信息，以下为写法示例
    在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加（这是我的配置）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude: #屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项（看你喜欢哪个，最好下载下来放到自己的项目中不然会增加我网站的负载）
  # 这是我的  
  #runtime_js: https://www.fomal.cc/static/js/runtime.js
  #runtime_css: https://www.fomal.cc/static/css/runtime.min.css 
  # 这是店长的 
  #runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  #runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  runtime_js: /js/runtime.js
  runtime_css: https://cdn.jsdelivr.net/npm/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v6.2.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v4.3.1
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用多线部署，主线路托管于Vercel
    - link: https://dashboard.4everland.org/
    # https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS
      shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS
      message: 本站采用多线部署，备用线路托管于4EVERLAND
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js
  1. 参数释义
参数备选值 / 类型释义
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable.timertrue/false【必选】计时器控制开关
enable.bdagetrue/false【必选】徽标控制开关
enable_pagepath【可选】填写想要应用的页面，如根目录就填’/‘, 分类页面就填’/categories/‘。若要应用于所有页面，就填 all，默认为 all
excludepath【可选】填写想要屏蔽的页面，可以多个。仅当 enable_page 为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.typeid/class【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.nametext【必选】挂载容器名称
layout.index0 和正整数【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
runtime_jsurl【必选】页脚计时器脚本，可以下载上文填写示例的链接，参照注释和教程：Native JS Timer 自行修改。
runtime_cssurl【可选】自定义样式，预留开发者接口，可自行下载。
swiperparanumber【可选】若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题
bdageitem.linkurl【可选】页脚徽标指向的网站链接
bdageitem.shieldsurl【必选】页脚徽标对应的 API，API 具体写法示例参照教程 Add Github Badge
bdageitem.messagetext【可选】页脚徽标悬停时显示的信息
swiper_cssurl【可选】swiper 的依赖
swiper_jsurl【可选】swiper 的依赖
swiperbdage_init_jsurl【可选】swiper 初始化方法

GitCalendar (店长)

点击查看教程

安装

1.安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：

1
npm install hexo-filter-gitcalendar --save

2.添加配置信息，以下为写法示例
在站点配置文件_config.yml 或者主题配置文件如_config.butterfly.yml 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#GitCalendar
# hexo-filter-gitcalendar
gitcalendar:
  enable: true # 开关
  simplemode: true
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  # butterfly挂载容器
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  user: MGHYGitHub #git用户名
  apiurl: 'https://vercel.lmghy.top'	# 这是我的API，最好自己弄一个
  minheight:
    pc: 280px #桌面端最小高度
    mibile: 0px #移动端最小高度
  color: "['#d9e0df', '#c6e0dc', '#a8dcd4', '#9adcd2', '#89ded1', '#77e0d0', '#5fdecb', '#47dcc6', '#39dcc3', '#1fdabe', '#00dab9']" # 目前我在用的
  # "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
  # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
  # color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
  container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug语法
  gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
  gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js

3.参数释义

参数备选值 / 类型释义
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enabletrue/false【必选】控制开关
enable_pagepath/all【可选】填写想要应用的页面的相对路径（即路由地址）, 如根目录就填’/‘, 分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
layout.typeid/class【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.nametext【必选】挂载容器名称
layout.index0 和正整数【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
usertext【必选】git 用户名
apiurlurl【可选】默认使用提供文档提供的 api，但还是建议自建 api，参考教程：自建 API 部署
minheight.pc280px【可选】桌面端最小高度，默认为 280px
minheight.mobile0px【可选】移动端最小高度，默认为 0px
colorlist【可选】一个包含 11 个色值的数组，文档给出了四款预设值
containerpug【可选】预留的父元素容器，用以适配多主题，需要用 pug 语法填写，目前已适配 butterfly，volantis，matery，mengd 主题，这四个主题，插件会自自动识别_config.yml 内填写的 theme 配置项。其余主题需要自己填写父元素容器。
gitcalendar_cssURL【可选】自定义 CSS 样式链接
gitcalendar_jsURL【可选】自定义 js 链接

自定义挂载容器

1.在对应页面创建一个 DOM 让插件有地方挂载，例如演示的就是在关于页面 (/about/) 的文件中直接写入一个 div 块

1
2
<!-- GitCalendar容器 -->
<div id="gitZone"></div>

2.在对应配置项改为与你容器 id 以创建页面路径相关的（是改不是加！！！）

1
2
3
4
5
6
enable_page: /about/ # 应用页面(记住最后带/)

layout: # 挂载容器类型
  type: id
  name: gitZone
  index: 0

3.重启项目就会看见

1
hexo cl; hexo s

自建 API 部署

虽然 Vercel 的访问应当没有次数限制，但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建 API。使用 Vercel 部署，完全免费，且无需服务器。

将此项目 fork 到你的 Github 仓库

python_github_calendar_api

  1. 访问 Vercel 官网，点击右上角的 sign up 进行注册，注册并登录后点击右上角创建一个项目，并选择以 Github 继续。
  2. 此时应该会看到你刚刚 fork 过来的你仓库的项目，看不到就输入关键字进行搜索。
  3. 点击该仓库右边的 Import 进行导入，Vercel 的 PROJECT NAME 可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除 PROJECT 以后重建一个了，下方三个选项保持默认就好，点击 Deploy 进行部署。
  4. 到此时，Vercel 的部署已经完成，可以使用 Vercel 提供的默认域名来访问 api 链接。例如我获取到的默认域名为 github-calendar-api.vercel.app, 则用它来替换冰老师教程中的自建 API，填写到 [Blogroot]\_config.butterfly.yml 中关于 gitcalendar 的 apiurl 中。注意源码修改版不要带协议，不要带后缀。就填写给你的默认域名就好。而插件版需要带协议
1
2
3
4
5
6
gitcalendar:
  enable: true
  simplemode: true
  user: MGHYGitHub
  apiurl: 'https://vercel.lmghy.top'
  color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"

文章置顶滚动栏 (店长)

点击查看教程
  1. 安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-swiper --save
  1. 添加配置信息，以下为写法示例
    在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
  1. 参数释义
参数备选值 / 类型释义
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enabletrue/false【必选】控制开关
enable_pagepath/all【可选】填写想要应用的页面的相对路径（即路由地址）, 如根目录就填’/‘, 分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
timemodedate/updated【可选】时间显示，date 为显示创建日期，updated 为显示更新日期，默认为 date
layout.typeid/class【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.nametext【必选】挂载容器名称
layout.index0 和正整数【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
default_descrtext默认文章描述
swiper_cssurl【可选】自定义的 swiper 依赖项 css 链接
swiper_jsurl【可选】自定义的 swiper 依赖项加 js 链接
custom_cssurl【可选】适配主题样式补丁
custom_jsurl【可选】swiper 初始化方法

使用方法：在文章的 front_matter 中添加 swiper_index 配置项即可。

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

文章双侧栏显示 (小冰)

点击查看教程
  1. 在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm i hexo-butterfly-article-double-row --save
  1. 在网站配置文件_config.yml 新增以下项 (注意不是主题配置文件)：
1
2
butterfly_article_double_row:
  enable: true
1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}
  1. 执行 hexo 三连：

wowjs 动画

点击查看教程
  1. 安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-wowjs --save
  1. 添加配置信息，以下为写法示例

在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 2 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
  animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
  1. 参数释义

###3.参数释义

参数备选值 / 类型释义
enabletrue/false【必选】控制开关
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
mobiletrue/false控制移动端是否启用，默认移动端禁用
animateitem.classclass【可选】添加动画类名，只支持给 class 添加
animateitem.styletext【可选】动画样式，具体类型参考 animate.css
animateitem.durationtime, 单位为 s 或 ms【可选】动画持续时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
animateitem.delaytime, 单位为 s 或 ms【可选】动画开始的延迟时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
animateitem.offsetnumber, 单位为 px【可选】开始动画的距离（相对浏览器底部）。
animateitem.iterationnumber, 单位为 s 或 ms【可选】动画重复的次数
animate_cssURL【可选】animate.css 的 CDN 链接，默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_jsURL【可选】wow.min.js 的 CDN 链接，默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_jsURL【可选】wow_init.js 的 CDN 链接，默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

导航栏魔改

点击查看教程
  1. 在 [BlogRoot]\css\custom.css 中引入如下 css 代码，然后在主题配置文件_config.butterfly.yml 中引入该文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 一级菜单居中 */
#nav .menus_items {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* 子菜单横向展示 */
#nav .menus_items .menus_item:hover .menus_item_child {
  display: flex !important;
}
/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
  left: -125px;
}

此处的 css 实现了两个作用：菜单栏居中、子菜单横向显示。其中子菜单横向显示要根据自己的实际情况来改，例如你的以及菜单的第 2 个选项中有子菜单，那就要加一项调节第 2 个选项中的子菜单，这个具体调节多少要根据你的具体情况为准，可以自己慢慢调到中间。

此时我们只需要在主题配置文件_config.butterfly.yml 中列表对应的地方加一个 hide 即可，如下图的列表选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat || hide:
    番剧: /bangumis/ || fas fa-film
    留言板: /comments/ || fas fa-commenting
    #音乐: /music/ || fas fa-music
    相册: /gallery/ || fas fa-images
    #电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  #关于: /about/ || fas fa-heart

此时有人觉得右边搜索按钮露出搜索两个字很丑，我们也可以把它隐藏了，在 [BlogRoot]\themes\Butterfly\layout\includes\header\nav.pug（npm 安装的在 [BlogRoot]\node_moudules\hexo-theme-butterfly\layout\includes\header\nav.pug）中把以下语句删除或注释掉即可，搜索两个字就不会显示出来 (这种语句统一写法是直接删除 + 就可以，不用补空格)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]
    
  #menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search-button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
-          span=' '+_p('search.title')
    !=partial('includes/header/menu_item', {}, {cache: true})

    #toggle-menu
      a.site-page
        i.fas.fa-bars.fa-fw

黑夜霓虹灯

点击查看教程

此教程会有两处地方有霓虹灯效果：一个是大标题和个人信息的动态霓虹灯，默认周期为 1200ms；另外的是菜单栏的小字有夜光效果，为你的博客增添几分赛博朋克风～

  1. 首先在自定义的样式文件 [BlogRoot]\css\custom.css 中引入以下代码，这部分代码是菜单栏文字有夜光效果的，变量部分 var(--theme-color) 可以换为自己喜欢的颜色，例如紫色 rgb(179, 71, 241)：
1
2
3
4
5
6
7
8
9
10
/* 夜间模式菜单栏发光字 */
[data-theme="dark"] #nav .site-page,
[data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a {
  text-shadow: 0 0 2px var(--theme-color) !important;
}

/* 手机端适配 */
[data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
  text-shadow: 0 0 2px var(--theme-color) !important;
}
  1. 新建文件 [BlogRoot]\js\light.js 并写入以下代码，本质就是计时器，大家可以根据自己的喜好调节闪烁周期，默认为 1200ms：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 霓虹灯效果
// 颜色数组
var arr = ["#39c5bb", "#f14747", "#f1a247", "#f1ee47", "#b347f1", "#1edbff", "#ed709b", "#5636ed"];
// 颜色索引
var idx = 0;

// 切换颜色
function changeColor() {
    // 仅夜间模式才启用
    if (document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark') {
        if (document.getElementById("site-name"))
            document.getElementById("site-name").style.textShadow = arr[idx] + " 0 0 15px";
        if (document.getElementById("site-title"))
            document.getElementById("site-title").style.textShadow = arr[idx] + " 0 0 15px";
        if (document.getElementById("site-subtitle"))
            document.getElementById("site-subtitle").style.textShadow = arr[idx] + " 0 0 10px";
        if (document.getElementById("post-info"))
            document.getElementById("post-info").style.textShadow = arr[idx] + " 0 0 5px";
        try {
            document.getElementsByClassName("author-info__name")[0].style.textShadow = arr[idx] + " 0 0 12px";
            document.getElementsByClassName("author-info__description")[0].style.textShadow = arr[idx] + " 0 0 12px";
        } catch {
            
        }
        idx++;
        if (idx == 8) {
            idx = 0;
        }
    } else {
        // 白天模式恢复默认
        if (document.getElementById("site-name"))
            document.getElementById("site-name").style.textShadow = "#1e1e1ee0 1px 1px 1px";
        if (document.getElementById("site-title"))
            document.getElementById("site-title").style.textShadow = "#1e1e1ee0 1px 1px 1px";
        if (document.getElementById("site-subtitle"))
            document.getElementById("site-subtitle").style.textShadow = "#1e1e1ee0 1px 1px 1px";
        if (document.getElementById("post-info"))
            document.getElementById("post-info").style.textShadow = "#1e1e1ee0 1px 1px 1px";
        try {
            document.getElementsByClassName("author-info__name")[0].style.textShadow = "";
            document.getElementsByClassName("author-info__description")[0].style.textShadow = "";
        } catch {
            
        }
    }
}

// 开启计时器
window.onload = setInterval(changeColor, 1200);
  1. 在主题配置文件_config.butterfly.yml 引入以上两个文件，要注意的是，js 文件这里必须为 defer，不能为 ansyc，保证脚本会延迟到整个页面都解析完后再执行，此时才有对应的元素进行操作：
1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  bottom: 
    - <script defer src="/js/light.js"></script> # 霓虹灯(必须defer否则有时候会不生效)
  1. 重启项目即可看到效果
1
hexo cl; hexo s

版权美化（店长）

点击查看教程
  1. 修改 [Blogroot]\themes\butterfly\layout\includes\post\post-copyright.pug, 直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的 front-matter 中重新定义作者，原文链接，开源许可协议等内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license
  1. 修改 [Blogroot]\themes\butterfly\source\css\_layout\post.styl, 直接复制以下内容，替换原文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

    &:before
      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 18, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

  li
    &::marker
      color: $light-blue
      font-weight: 600
      font-size: 1.05em

    &:hover
      &::marker
        color: var(--pseudo-hover)

  ul > li
    list-style-type: circle

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  if hexo-config('anchor')
    a.headerlink
      &:after
        @extend .fontawesomeIcon
        float: right
        color: var(--headline-presudo)
        content: '\f0c1'
        font-size: .95em
        opacity: 0
        transition: all .3s

      &:hover
        &:after
          color: var(--pseudo-hover)

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      &:hover
        a.headerlink
          &:after
            opacity: 1

  ol,
  ul
    ol,
    ul
      padding-left: 20px

    li
      margin: 4px 0

    p
      margin: 0 0 8px

  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
    else if hexo-config('beautify.field') == 'post'
      &.post-content
        beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background-color: rgb(239 241 243)

    &:before
      background var(--heo-post-blockquote-bg)
      position absolute
      right -26px
      top -120px
      content '\f25e'
      font-size 200px
      font-family 'Font Awesome 5 Brands'
      opacity .2

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

  .post-copyright-cc-info
    color: $theme-color;

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background-color #07080a
      text-shadow #bfbeb8 0 0 2px
      border 1px solid rgb(19 18 18 / 35%)
      box-shadow 0 0 5px rgb(20, 120, 210)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #e0e0e4

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px
  1. 默认项的配置

作者：[Blogroot]\_config.yml 中的 author 配置项

1
2
3
4
5
6
7
8
# Site
title: MghyのBlog
subtitle: '个人学习记录站'
description: '个人搭建的学习记录站-基于Hexo'
keywords:
author: MGHY
language: zh-CN
timezone: 'Asia/Shanghai'

许可协议：[Blogroot]\_config.butterfly.yml 中的 license 和 license_url 配置项

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

页面覆写配置项，修改对应文章的 front-matter

1
2
3
4
5
6
7
8
9
---
title: Copyright-beautify # 文章名称
date: 2021-03-02 13:52:46 # 文章发布日期
updated: 2021-03-02 13:52:46 # 文章更新日期
copyright_author: Nesxc # 作者覆写
copyright_url: https://www.nesxc.com/post/hexocc.html # 原文链接覆写
license: # 许可协议名称覆写
license_url: # 许可协议链接覆写
---

侧边栏电子时钟

点击查看教程
  1. 如果跑过下面旧版的教程，前往博客根目录，卸载原版电子钟插件，打开cmd命令窗口执行如下命令：
1
npm uninstall hexo-butterfly-clock
  1. 安装新的插件，前往博客根目录，打开cmd命令窗口执行如下命令：
1
npm install hexo-butterfly-clock-anzhiyu --save
  1. 添加配置信息，以下为写法示例:在站点配置文件_config.yml 或 主题配置文件_config.butterfly.yml 中添加配置信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
  clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
  clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
  ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
  # 和风天气key 默认是 b16a1fa0e63c46a4b8f28abfb06ae3fe
  qweather_key: # 你的key
  # 高得地图web服务key 默认为 e2b04289e870b005374ee030148d64fd&s=rsv3
  gaud_map_key: # 你的key
  default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

  1. 其中 qweather_key 和 gaud_map_key 最好自己去申请对应的 api key，默认使用鱼的，可能会被限制，不保证可靠性。

  2. 参数释义

参数备选值 / 类型释义
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enabletrue/false【必选】控制开关
enable_pagepath/all【可选】填写想要应用的页面的相对路径（即路由地址）, 如根目录就填’/‘, 分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
excludepath【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.typeid/class【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.nametext【必选】挂载容器名称
layout.index0 和正整数【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
loadingURL【可选】电子钟加载动画的图片
clock_cssURL【可选】电子钟样式 CDN 资源
clock_jsURL【可选】电子钟执行脚本 CDN 资源
ip_apiURL【可选】获取时钟 IP 的 API
qweather_keytext【可选】和风天气 key
gaud_map_keytext【可选】高得地图 web 服务 key
default_rectangletext【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气
rectangletext【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置

个人卡片渐变色

点击查看教程
  1. 在[BlogRoot]\css\custom.css自定义样式的文件中引入如下代码（最后记得在inject配置项引入!!!）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
  background: linear-gradient(
    -45deg,
    #e8d8b9,
    #eccec5,
    #a3e9eb,
    #bdbdf0,
    #eec1ea
  );
  box-shadow: 0 0 5px rgb(66, 68, 68);
  position: relative;
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite !important;
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
  background-color: #3eb8be;
  border-radius: 8px;
}

顶部渐变条色加载条

点击查看教程
  1. 新建[BlogRoot]\css\progress_bar.css文件，写入以下内容（或者你在[BlogRoot]\css\custom.css直接加也行，最后在配置文件记得引入即可）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 7rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden
}

.pace-inactive .pace-progress {
    opacity: 0;
    transition: .3s ease-in
}

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    /* linear-gradient(to right, #3494e6, #ec6ead) */
    background: linear-gradient(to right, #43cea2, #3866ca);
    animation: gradient 2s ease infinite;
    background-size: 200%
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}
  1. 在主题配置文件_config.butterfly.yml的inject配置项加入刚刚的css样式和必须的js依赖：
1
2
3
4
5
6
7
inject:
  head:
    - xxx
    - <link rel="stylesheet" href="/static/css/progress_bar.css" media="defer" onload="this.media='all'"> 
  bottom: 
  	- xxx
    - <script async src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script>

Bilibili视频适配

点击查看教程
  1. 在[BlogRoot]\css\custom.css自定义样式的文件中引入如下代码（这是我的[猕猴桃的doge]，你可以自行微调）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*哔哩哔哩视频适配*/
.aspect-ratio {
  position: relative;
  width: 90%;
  height: auto;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}
  1. 直接复制插入你的 md 文章就行，修改里面的 aid 为你视频的 AV号：
1
2
3
4
5
6
7
8
9
10
11
<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid=474023258&&page=1&as_wide=1&high_quality=1&danmaku=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> 
    </iframe>
</div>

文章页局部 html 代码不渲染

点击查看教程
  1. 在你的 md 文章页中，部分内容不想经过 Hexo 渲染，则包一层 raw 标签：
1
2
3
4
{% raw %}
<div class="">你的一些代码...</div>
<script>你的一些代码...</script>
{% endraw %}

那么标签内的代码就不会被框架渲染了~

文章H1~H6标题小风车转动效果

点击查看教程
  1. 修改主题配置文件_config.butterfly.yml文件的beautify配置项：
1
2
3
4
5
6
beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"
1
2
3
4
5
6
7
#在用
# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: '\f0c1' # '\f0c1'
  title-prefix-icon-color: '#F47466' # '#F47466'
  1. 在[BlogRoot]\css\custom.css 中加入以下代码，可以自己调节一下转速:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}
  1. 在主题配置文件_config.butterfly.yml的inject配置项进行引入（不再赘述）。