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

  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文件(太懒了不想自己写)

博客搭建与魔改系列教程导航🚥🚥🚥

  1. 🥬Hexo博客搭建基础教程(一)
  2. 🍒Hexo博客搭建基础教程(二)
  3. 🥪Hexo博客搭建基础教程(三)
  4. 🍀博客魔改教程总结(一) ⇦当前位置🪂
  5. 🍚博客魔改教程总结(二)
  6. 🎋博客魔改教程总结(三)
  7. 🥕博客魔改教程总结(四)
  8. 🍊博客魔改教程总结(五)
  9. 🧄博客魔改教程总结(六)
  10. 🎨综合美化模块教程

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 hexo-butterfly-envelope --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
    # envelope_comment
    # see https://akilar.top/posts/e2d3c450/
    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: 自动书记人偶竭诚为您服务！ #仅支持单行文本
      height: #1050px，信封划出的高度
      path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
      front_matter: #【可选】comments页面的 front_matter 配置
        title: 留言板
        comments: 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;
    }

  2. 在主题配置文件[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'">

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

    1
    2
    3
    4
    5
    # The banner image of home page
    index_img: 

    # Footer Background
    footer_bg: false

  4. 部分人反映一图流改完了背景图也没了，那大概率是你之前没设置背景图。在主题配置文件[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

  3. 参数释义

参数备选值/类型释义
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

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

  3. 参数释义

参数备选值/类型释义
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，不然本地预览的时候可能不会显示！！！

  2. 在网站配置文件_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: ""

  3. 配置项的含义：

    • 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，如加入黑夜模式。

  4. 执行 hexo 三连

    1
    2
    3
    hexo clean
    hexo g
    hexo s

  5. 我们可以看到黑夜模式看起来特别的别扭，因此还要做一下黑夜模式的颜色适配，在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

  2. 添加配置信息，以下为写法示例
    在站点配置文件_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初始化方法

  3. 参数释义

参数备选值/类型释义
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;
    }

  2. 各个属性的定义：

    1. font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
    2. src属性值中首先指定了字体文件所在的路径。
    3. format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
    4. font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
    5. 支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐)

  3. 在主题配置文件_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

  4. 重启项目即可看到

    1
    hexo cl; hexo s

文章双侧栏显示(小冰)

点击查看教程

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

1667113039031

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

    1
    npm i hexo-butterfly-article-double-row --save

  2. 在网站配置文件_config.yml新增以下项 (注意不是主题配置文件)：

    1
    2
    butterfly_article_double_row:
      enable: true

  3. 这时候插件有个bug，就是最后一页文章数目为奇数的时候，会出现这种情况

    image

    会显得很不舒服，感谢唐志远大佬修复了这个bug，只需要在custom.css文件添加以下代码即可：

    1
    2
    3
    4
    5
    /* 翻页按钮居中 */
    #pagination {
      width: 100%;
      margin: auto;
    }

  4. 执行 hexo 三连：

    1
    2
    3
    hexo clean
    hexo g
    hexo s

wowjs动画

点击查看教程

详见：Add Blog Animation – Wowjs

效果预览：

动画

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

    1
    npm install hexo-butterfly-wowjs --save

  2. 添加配置信息，以下为写法示例
    在站点配置文件_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

  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

wowjs详细用法见原帖。

GitCalendar(店长)

点击查看教程

详见：Gitcalendar

image-20221029215737879

安装

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

  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链接

自定义挂载容器

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

  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仓库

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

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

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

    image-20221029221751149

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

  2. 新建文件[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);

  3. 在主题配置文件_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否则有时候会不生效)

  4. 重启项目即可看到效果

    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;
      }
    }

  2. 刷新页面即可看到效果，默认是夜间模式才开启的，因为白天模式开启霓虹灯会显得很奇怪

星空背景和流星特效

点击查看教程
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()

  2. 在[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;
    }

  3. 在主题配置文件_config.butterfly.yml的inject配置项中bottom下填入：

    1
    2
    3
    4
    inject:
      bottom:
       - <canvas id="universe"></canvas>
       - <script defer src="/js/universe.js"></script>

  4. 在主题配置文件_config.butterfly.yml的inject配置项中head下填入：

    1
    2
    3
    inject:
      head:
       - <link rel="stylesheet" href="/css/universe.css">

  5. 重新编译即可看到效果。

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

点击查看教程

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

image-20221029224145818

安装

  1. 如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录[BlogRoot]下打开终端，运行以下指令

    1
    2
    # 卸载原版电子钟
    npm uninstall hexo-butterfly-clock

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

    1
    npm install hexo-butterfly-clock-anzhiyu --save

  3. 添加配置信息，以下为写法示例
    在主题配置文件_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，默认使用鱼的，可能会被限制，不保证可靠性。

  4. 参数释义

参数备选值/类型释义
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

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

  4. 选择 WebApi

    pp

  5. 复制 key

    pp

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

  1. 登录后进入控制台

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

    pp

  3. 点击添加, key名称随意，服务平台选择Web服务,点击提交

    pp

  4. 复制 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;
}

🍕🍕🍕写在最后

  • 大家有啥教程想看的可以在评论区留言，如果搭建或者魔改过程中遇到不懂的可以加下面的群讨论，同时本人在B站有空也会做一些魔改系列的视频教程，点这里可以进入我的B站账号个人空间–Fomalhaut

    二维码