魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣）

  1. 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行 回滚： jerryc127/hexo-theme-butterfly、 ccknbc-actions/blog-butterfly。
  2. 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。
  3. 鉴于每个人的根目录名称都不一样，本帖 博客根目录 一律以 [BlogRoot] 指代。
  4. 本帖涉及魔改源码的内容，会使用 diff代码块 标识，复制时请 不要忘记删除 前面的 +、- 符号。
  5. 因为 .pug 和 .styl 以及 .yml 等对缩进要求较为严格，请尽量 不要使用记事本等无法提供语法高亮的文本编辑器 进行修改。
  6. 本帖基于 Butterfly主题 进行魔改方案编写，因此请读者优先掌握 Butterfly主题官方文档 的内容后再来进行魔改。
  7. 魔改会过程常常引入 自定义的css与js文件，方法见 Hexo博客添加自定义css和js文件(太懒了不想自己写)

Live2D教程（店长）

点击查看教程

详见： Live2d Widget

效果预览

image-20221029203004407

目前只推荐这个(因为消耗资源较少)，这是博客自带的看板娘，这孩子不会说话也不能换装，只会跟着你的鼠标晃动脑袋，不过有几款超可爱。

安装

  1. 在Hexo根目录 [BlogRoot] 下打开终端，输入以下指令安装必要插件：

    1
    npm install --save hexo-helper-live2d

  2. 打开站点配置文件 [BlogRoot]\config.yml
    搜索live2d,按照如下注释内容指示进行操作。
    如果没有搜到live2d的配置项，就直接把以下内容复制到最底部。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true #开关插件版看板娘
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: live2d-widget-model-wanko # npm-module package name
        # use: wanko # 博客根目录/live2d_models/ 下的目录名
        # use: ./wives/wanko # 相对于博客根目录的路径
        # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
      display:
        position: right #控制看板娘位置
        width: 150 #控制看板娘大小
        height: 300 #控制看板娘大小
      mobile:
        show: true # 手机中是否展示

  3. 完成后保存修改，在Hexo根目录下运行指令。

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    之所以必须要使用 hexo clean 是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。

更换

  1. 同样是在Hexo根目录 [BlogRoot] 下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在 模型预览 里查看以供选择。

  2. 输入指令

    1
    npm install --save live2d-widget-model-koharu

  3. 然后在站点配置文件 [BlogRoot]\_config.yml 里找到 model 项修改为期望的模型

    1
    2
    3
    model:
      use: live2d-widget-model-koharu
      # 默认为live2d-widget-model-wanko

  4. 之后按部就班的运行

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    就能在 localhost:4000 上查看效果了。

卸载看板娘

卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录 [BlogRoot] 打开终端，输入：

1
2
npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错，记得把 [BlogRoot]\_config.yml 里的配置项给注释或者删除掉。

violet留言板（店长）

点击查看教程

详见： 信笺样式留言板

效果预览

image-20221029205141439

  1. 在 [BlogRoot] 运行指令

    1
    npm install --save hexo-helper-live2d

  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
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true #开关插件版看板娘
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: live2d-widget-model-wanko # npm-module package name
        # use: wanko # 博客根目录/live2d_models/ 下的目录名
        # use: ./wives/wanko # 相对于博客根目录的路径
        # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
      display:
        position: right #控制看板娘位置
        width: 150 #控制看板娘大小
        height: 300 #控制看板娘大小
      mobile:
        show: true # 手机中是否展示

一图流教程

点击查看教程

效果预览
1667395334356

  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'">

  2. 在主题配置文件 [BlogRoot]\_config.butterfly.yml 文件中的 index_img 和 footer_bg 配置项取消头图与页脚图的加载项避免冗余加载

    1
    2
    3
    4
    # The banner image of home page
    index_img: 
    # Footer Background
    footer_bg: false

  3. 部分人反映一图流改完了背景图也没了，那大概率是你之前没设置背景图。在主题配置文件 [BlogRoot]\_config.butterfly.yml 文件中的 background 配置项设置背景图

    1
    background: url(https://source.fomal.cc/img/home_bg.webp)

页脚Github徽标（店长）

点击查看教程

详见： Add Github Badge

效果预览

image-20221029205540493

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

    1
    npm install hexo-butterfly-footer-beautify --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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
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
  # 徽标部分配置项
  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初始化方法

首页分类磁贴新版(店长)

点击查看教程

详见： Categories Magnet

效果预览

image-20221029215332417

  1. 安装插件,在博客根目录 [BlogRoot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-categories-card --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
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: Ubuntu指南
      cover: https://assets.akilar.top/image/cover1.webp
    - descr: 玩转Win10
      cover: https://assets.akilar.top/image/cover2.webp
    - descr: 长篇小说连载
      cover: https://assets.akilar.top/image/cover3.webp
    - descr: 个人日记
      cover: https://assets.akilar.top/image/cover4.webp
    - descr: 诗词歌赋
      cover: https://assets.akilar.top/image/cover5.webp
    - descr: 杂谈教程
      cover: https://assets.akilar.top/image/cover6.webp
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css
  1. 参数释义
参数备选值/类型释义
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enabletrue/false【必选】控制开关
enable_pagepath/all【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
layout.typeid/class【可选】挂载容器类型，填写id或class，不填则默认为id
layout.nametext【必选】挂载容器名称
layout.index0和正整数【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
columnodd/even【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列
rownumber【可选】显示行数，默认两行，超过行数切换为滚动显示
message.descrtext分类描述,需要和你自己的文章分类一一对应。
message.coverurl分类背景,需要和你自己的文章分类一一对应。
custom_cssurl【可选】自定义样式，会替换默认的css链接，可以下载文档给出的cdn链接后自主修改

首页分类磁贴1.0（小冰）

点击查看教程

详见： 教程：hexo-magnet 插件 1.0

效果预览

image

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

  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: 2
  display:
    - name: 教程
      display_name: 小冰の魔改教程
      icon: 📚
    - name: 游戏评测
      display_name: 小冰の游戏评测
      icon: 🎮
    - name: 生活趣闻
      display_name: 小冰の生活趣闻
      icon: 🐱‍👓
    - name: vue
      display_name: 小冰の编程学习
      icon: 👩‍💻
    - name: 学习
      display_name: 小冰の读书笔记
      icon: 📒
    - name: 随想
      display_name: 小冰の胡思乱想
      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: ""

  1. 配置项的含义：

    • 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

    参数：type; （class&id）

    参数：name;

    参数：index；（数字）

    含义：如果说 magnet 是一幅画，那么这个 layout 就是指定了哪面墙来挂画

    而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。

    其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。

    最后墙的名字即是 name;

1
2
3
4
5
6
7
8
<div name="我是墙" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载magnet，也就是画画-->
    </div>
  </div>
</div>

  • temple_html

    参数：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 三连
1
2
3
hexo clean
hexo g
hexo s
  1. 我们可以看到黑夜模式看起来特别的别扭，因此还要做一下黑夜模式的颜色适配，在 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;
}

文章置顶滚动栏(店长)

点击查看教程

详见： Swiper Bar

效果预览

image-20221029215312336

  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 #置顶轮播图顺序，非负整数，数字越大越靠前
---

自定义字体

点击查看教程

声明： 非商免字体 未经授权仅限个人使用，不得用于商业用途！

效果预览

image

  1. 准备好字体文件后，在 [BlogRoot]\source\css\custom.css（没有就自己创建）中添加以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: 'YSHST';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(/font/优设好身体.woff2);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

  1. 各个属性的定义：

  2. font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。

  3. src属性值中首先指定了字体文件所在的路径。
  4. format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
  5. font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
  6. 支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐)
  7. 在主题配置文件 _config.butterfly.yml 中的 font 配置项以及 blog_title_font 配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：
1
2
3
4
5
6
7
8
9
10
11
12
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: '15px'
  code-font-size: '14px'
  font-family: YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  code-font-family: Consolas, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

# 左上角網站名字 主頁居中網站名字
blog_title_font:
  font_link: 
  font-family: YSHST, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif
  1. 重启项目即可看到
1
hexo cl; hexo s

文章双侧栏显示(小冰)

点击查看教程

详见： 教程：butterfly 主题文章双栏布局插件

效果预览

1667113039031

  1. 在博客根目录 [BlogRoot] 下打开终端，运行以下指令：
1
npm i hexo-butterfly-article-double-row --save
  1. 在网站配置文件 _config.yml 新增以下项 (注意不是主题配置文件)：
1
2
butterfly_article_double_row:
  enable: true
  1. 这时候插件有个bug，就是最后一页文章数目为奇数的时候，会出现这种情况
    image
    会显得很不舒服，感谢 唐志远大佬 修复了这个bug，只需要在 custom.css 文件添加以下代码即可：
1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}
  1. 执行 hexo 三连：
1
2
3
hexo clean
hexo g
hexo s

wowjs动画

点击查看教程

详见： Add Blog Animation – 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. 参数释义
参数备选值/类型释义
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

wowjs详细用法见原帖。

GitCalendar(店长)

点击查看教程

详见： Gitcalendar

效果预览

image-20221029215737879

安装

  1. 安装插件,在博客根目录 [BlogRoot] 下打开终端，运行以下指令：
1
npm install hexo-filter-gitcalendar --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
# hexo-filter-gitcalendar
gitcalendar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  # butterfly挂载容器
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  user: Fomalhaut-Blog #git用户名
  apiurl: 'https://gitcalendar.fomal.cc'	# 这是我的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
  1. 参数释义
参数备选值/类型释义
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链接

自定义挂载容器

很多人反映不想挂在首页，想挂在关于或者统计等页面，只需要做2步:

  1. 在对应页面创建一个DOM让插件有地方挂载，例如演示的就是在关于页面( /about/)的文件中直接写入一个 div 块
1
2
<!-- GitCalendar容器 -->
<div id="gitZone"></div>
  1. 在对应配置项改为与你容器 id 以创建页面路径相关的（是改不是加!!!）
1
2
3
4
5
6
enable_page: /about/ # 应用页面(记住最后带/)

layout: # 挂载容器类型
  type: id
  name: gitZone
  index: 0
  1. 重启项目就会看见
1
hexo cl; hexo s

自建API部署

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

将此项目 fork 到你的Github仓库

  1. 访问 Vercel官网，点击右上角的sign up进行注册，注册并登录后点击右上角创建一个项目，并选择以Github继续。

pp

  1. 此时应该会看到你刚刚 fork 过来的你仓库的项目，看不到就输入关键字进行搜索。

  2. 点击该仓库右边的 Import 进行导入， Vercel 的 PROJECT NAME 可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除 PROJECT 以后重建一个了，下方三个选项保持默认就好，点击 Deploy 进行部署。
    image-20221029221751149

  3. 到此时， 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: Akilarlxh
  apiurl: github-calendar-api.vercel.app
  color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"

导航栏魔改

点击查看教程

效果预览

image-20221112135755719

在 [BlogRoot]\source\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个选项中的子菜单，这个具体调节多少要根据你的具体情况为准，可以自己慢慢调到中间。

此时我们的手机端子菜单默认是展开显示的，如下图所示：

image-20221112140953381

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

1
2
3
4
5
6
7
8
9
10
11
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  列表||fas fa-list || hide:
    音乐: /music/ || fas fa-music
    电影: /movies/ || fas fa-video
  留言板: /comments/ || fas fa-envelope-open
  友链: /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

黑夜霓虹灯1.0（js计时器实现）

点击查看教程

效果预览

动画image-20221112144954577

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

  1. 首先在自定义的样式文件 [BlogRoot]\source\css\custom.css 中引入以下代码，变量部分 var(--theme-color) 可以换为自己喜欢的颜色，例如紫色 rgb(179, 71, 241)，后面的颜色连续渐变效果根据个人喜好选择，有的人喜欢连续的，有的人喜欢断续的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 夜间模式菜单栏发光字 */
[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;
}

/* 闪烁变动颜色连续渐变 */
#site-name,
#site-title,
#site-subtitle,
#post-info,
.author-info__name,
.author-info__description {
  transition: text-shadow 1s linear !important;
}
  1. 新建文件 [BlogRoot]\source\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

黑夜霓虹灯2.0（纯CSS实现）

点击查看教程

用js计时器实现的霓虹灯性能比较低，于是弄了一个纯css关键帧实现，推荐都用这个，实测性能高挺多，Pjax适配也比较友好。

  1. 在自定义的 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
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
/* 日间模式不生效 */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
  animation: none;
}
/* 夜间模式生效 */
[data-theme="dark"] #site-name,
[data-theme="dark"] #site-title {
  animation: light_15px 10s linear infinite;
}
[data-theme="dark"] #site-subtitle {
  animation: light_10px 10s linear infinite;
}
[data-theme="dark"] #post-info {
  animation: light_5px 10s linear infinite;
}
/* 关键帧描述 */
@keyframes light_15px {
  0% {
    text-shadow: #5636ed 0 0 15px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 15px;
  }
  25% {
    text-shadow: #f14747 0 0 15px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 15px;
  }
  50% {
    text-shadow: #b347f1 0 0 15px;
  }
  62.5% {
    text-shadow: #002afa 0 0 15px;
  }
  75% {
    text-shadow: #ed709b 0 0 15px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 15px;
  }
  100% {
    text-shadow: #5636ed 0 0 15px;
  }
}

@keyframes light_10px {
  0% {
    text-shadow: #5636ed 0 0 10px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 10px;
  }
  25% {
    text-shadow: #f14747 0 0 10px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 10px;
  }
  50% {
    text-shadow: #f1ee47 0 0 10px;
  }
  50% {
    text-shadow: #b347f1 0 0 10px;
  }
  62.5% {
    text-shadow: #002afa 0 0 10px;
  }
  75% {
    text-shadow: #ed709b 0 0 10px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 10px;
  }
  100% {
    text-shadow: #5636ed 0 0 10px;
  }
}

@keyframes light_5px {
  0% {
    text-shadow: #5636ed 0 0 5px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 5px;
  }
  25% {
    text-shadow: #f14747 0 0 5px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 5px;
  }
  50% {
    text-shadow: #b347f1 0 0 5px;
  }
  62.5% {
    text-shadow: #002afa 0 0 5px;
  }
  75% {
    text-shadow: #ed709b 0 0 5px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 5px;
  }
  100% {
    text-shadow: #5636ed 0 0 5px;
  }
}
  1. 刷新页面即可看到效果，默认是夜间模式才开启的，因为白天模式开启霓虹灯会显得很奇怪

星空背景和流星特效

点击查看教程

效果预览

image

  1. 在 [BlogRoot]/source/js 目录下新建 universe.js，输入以下代码：
1
2
function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()
  1. 在 [BlogRoot]/source/css 目录下新建 universe.css，输入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */
  z-index: -1;
}
  1. 在主题配置文件 _config.butterfly.yml 的 inject 配置项中 bottom 下填入：
1
2
3
4
inject:
  bottom:
   - <canvas id="universe"></canvas>
   - <script defer src="/js/universe.js"></script>
  1. 在主题配置文件 _config.butterfly.yml 的 inject 配置项中 head 下填入：
1
2
3
inject:
  head:
   - <link rel="stylesheet" href="/css/universe.css">
  1. 重新编译即可看到效果。

侧边栏电子时钟(安知鱼)

点击查看教程

详见： 给butterfly添加侧边栏电子钟

效果预览

image-20221029224145818

安装

  1. 如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录 [BlogRoot] 下打开终端，运行以下指令
1
2
# 卸载原版电子钟
npm uninstall hexo-butterfly-clock
  1. 安装插件,在博客根目录 [BlogRoot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-clock-anzhiyu --save
  1. 添加配置信息，以下为写法示例

在主题配置文件 _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 (安知鱼电子钟)
# see https://anzhiy.cn/posts/fc18.html
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  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
  qweather_key:  # 和风天气key
  gaud_map_key:  # 高得地图web服务key
  default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
  rectangle: 113.34532,23.15624 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置

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

  1. 参数释义
参数备选值/类型释义
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 后的位置

API申请教程

一、 qweather_key 申请地址: https://id.qweather.com/#/login

  1. 登录后进入控制台
    pp
  2. 创建应用

pp

  1. 填写应用名称和 key 名称随意

  2. 选择 WebApi
    pp

  3. 复制 key

pp

二、 gaud_map_key 申请地址: https://lbs.amap.com/

  1. 登录后进入控制台

  2. 创建应用，名称随意，类型选其他

pp

  1. 点击添加, key 名称随意， 服务平台 选择 Web服务,点击提交
    pp
  2. 复制 key

pp

个人卡片渐变色

点击查看教程

效果预览

image (1)

在 [BlogRoot]\source\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
57
58
59
60
61
/* 侧边栏个人信息卡片动态渐变色 */
#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%;
  }
}

/* 黑夜模式适配 */
[data-theme="dark"] #aside-content > .card-widget.card-info {
  background: #191919ee;
}

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

🍕🍕🍕写在最后

  • 大家有啥教程想看的可以在评论区留言

提示🍒

(｡･∀･)ﾉﾞ由于网站部分设置项更新，当前已为您重置所有设置，祝您愉快！