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

  1. 博客魔改有风险,如果博客魔改出问题了又没有备份,可通过此项目查看基础源码进行回滚jerryc127/hexo-theme-butterflyccknbc-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_imgfooter_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语法填写,目前已适配butterflyvolantismaterymengd主题,这四个主题,插件会自自动识别_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进行导入,VercelPROJECT NAME可以自定义,不用太过在意,但是之后不支持修改,若要改名,只能删除PROJECT以后重建一个了,下方三个选项保持默认就好,点击Deploy进行部署。

    image-20221029221751149
  4. 到此时,Vercel的部署已经完成,可以使用Vercel提供的默认域名来访问api链接。例如我获取到的默认域名为github-calendar-api.vercel.app,则用它来替换冰老师教程中的自建API,填写到[BlogRoot]\_config.butterfly.yml中关于gitcalendarapiurl中。注意源码修改版不要带协议,不要带后缀。就填写给你的默认域名就好。而插件版需要带协议

    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.ymlinject配置项中bottom下填入:

    1
    2
    3
    4
    inject:
    bottom:
    - <canvas id="universe"></canvas>
    - <script defer src="/js/universe.js"></script>
  4. 在主题配置文件_config.butterfly.ymlinject配置项中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

    二维码