butterfly 重装日记

本文章参考并借鉴了许多大佬的教程

引入阿里矢量图标库

在控制台找到对应图标的class，然后去Hexo根目录查找，差不多大部分都在这个目录C:\hexo\themes\butterfly\layout\includes
然后进行修改把原来类似这样的'i.fas.fa-arrow-up'引入的图标改为以svg图标引入svg(viewBox='0 0 1024 1024' style='width: 1em; height: 1em; margin: 0 -1px -2px 0;') use(xlink:href='#你的图标名称')
大部分修改方式都是这样的，如果你不知道明确的目录就在控制台找到class然后去vsc整个项目搜索就可以了，然后以此类推找到类似这样的'i.fas.fa-arrow-up'，再进行修改！阿里矢量图标现在的iconfont可以在图标库的项目设置里直接打开彩色设置，然后采用symbol的引用方式即可！

自定义css

在博客目录创建自己的csshexo\themes\butterfly\source\css\anxy.css
然后在hexo\themes\butterfly\_config.yml在里面的inject的head部分引入- <link rel="stylesheet" href="/css/anxy.css">

配置文章链接转数字或字母

仓库
安装插件npm install hexo-abbrlink --save
修改 config.yml文件中的永久链接：

permalink: posts/:abbrlink.html
abbrlink:
    alg: crc16   #算法：crc16(default) and crc32
    rep: dec     #进制：dec(default) and hex

本地搜索依赖

安装插件npm install hexo-generator-search --save
在根目录添加：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

基于butterfly的最新版本需要在主题文件的config.yml中找到搜索这个选项，改为本地搜索，里面有配置说明

RSS和sitemap的安装

安装插件（RSS）：npm install hexo-generator-feed --save
安装插件：npm install hexo-generator-sitemap --save
安装插件：npm install hexo-generator-baidu-sitemap --save-dev
在博客目录的配置文件添加以下内容：

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

baidusitemap:
    path: baidusitemap.xml
sitemap:
    path: sitemap.xml

页脚 github 徽标和计时器

安装插件npm install hexo-butterfly-footer-beautify --save
博客根目录配置文件添加内容：

# 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://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: 3 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v5.4.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用JsDelivr为静态资源提供CDN加速
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用双线部署，默认线路托管于Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 本站采用双线部署，联通线路托管于Coding
    - 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

页面样式调节

这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。

:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

个人卡片卡片背景

/* 个人信息卡片背景图 */

[data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWEin.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWVGq.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}

侧边栏分类栏调整

修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_categories.js 里第五十八行的内容

1	result += `<span class="card-category-list-count">${cat.length} 篇</span>`

修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_archives.js 里第九十二行的内容

1	result += `<span class="card-archive-list-count">${item.count} 篇</span>`

添加自定义css

#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item, #aside-content .card-categories ul.card-category-list > .card-category-list-item {
    width: 48%;
    margin: 3px 0;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    padding: 3px 10px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--font-color);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    -webkit-box-orient: vertical;
}

/* 侧边栏分类（标签）样式调整 */


作者: 亦小封
链接: https://meuicat.com/posts/73a5ae75.html
来源: 爱吃肉的猫
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

资讯-文章数目（删除）

这个和作者卡片上的重复了，删掉简洁些
删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 里第七至十行的内容

    ···

      span= _p('aside.card_webinfo.headline')
    .webinfo
-      if theme.aside.card_webinfo.post_count
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.article_name') + " :"
-          .item-count= site.posts.length
      if theme.runtimeshow.enable
        .webinfo-item

    ···


作者: 亦小封
链接: https://meuicat.com/posts/73a5ae75.html
来源: 爱吃肉的猫
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

渐变色版权美化（店长+微调）：Fomalhaut

1.修改[BlogRoot]\themes\butterfly\layout\includes\post\post-copyright.pug,直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的front-matter中重新定义作者，原文链接，开源许可协议等内容。

if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license

2.修改[BlogRoot]\themes\butterfly\source\css\_layout\post.styl,直接复制以下内容，替换原文件，这个文件就是自己调节样式的。其中，184行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节；253行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：

beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

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

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

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

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

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

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

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

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

  ul > li
    list-style-type: circle

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

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

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

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

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

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

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

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

    li
      margin: 4px 0

    p
      margin: 0 0 8px

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

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

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

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

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

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

      .social-share
        font-size: .85em

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

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);

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

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

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

      &-info
        padding-left: 6px

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

          &:hover
            text-decoration: none

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

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

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

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

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

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px

3.默认项的配置

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

# Site
title: Akilarの糖果屋
subtitle: Akilar.top
description:
keywords:
author: Akilar #默认作者
language: zh-CN
timezone: ''

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

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

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

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

右边按钮阅读进度（Leonus）：Fomalhaut

1.旧版本的butterfly看上面链接的教程。
2.新版butterfly只需要配置主题文件就好了（大约在464行左右）

1 2	# 在返回顶部按钮中显示滚动百分比 rightside_scroll_percent: true

直达底部按钮：Fomalhaut

在[BlogRoot]\themes\butterfly\layout\includes\rightside.pug添加以下内容:

1 2	button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)") i.fas.fa-arrow-down

博客背景切换-弹窗版：Leonus

本人使用的是Leonus博主的方案，这里看一下我的微微修改。
使用的是阿里云图标库，自行修改，并引入阿里云提供的链接。
1.修改hexo\themes\butterfly\layout\includes\header\nav.pug

div
        a.site-page.social-icon.search(href="javascript:;" onclick="toggleWinbox()" title="切换背景-换一种感觉。")
          svg.icon(aria-hidden="true" style="width: 21px;height: 21px;margin-bottom: -4.5px;margin-left: 10px;")
            use(xlink:href="#icon-xiangce")

这是nav.pug的全部展示

nav#nav
  span#blog-info
    a.nav-site-title(href=url_for('/'))
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
      if theme.nav.display_title
        span.site-name=config.title
    if is_post()
      a.nav-page-title(href=url_for('/'))
        span.site-name=(page.title || config.title)
  #menus
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})
  #nav-right
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          svg.icon(aria-hidden="true" style="width: 1.25em;height: 1.25em;margin-bottom: -4.5px;margin-bottom: -4.5px;")
            use(xlink:href="#icon-icon-sousuo")   
            
      div
        a.site-page.social-icon.search(href="javascript:;" onclick="toggleWinbox()" title="切换背景-换一种感觉。")
          svg.icon(aria-hidden="true" style="width: 21px;height: 21px;margin-bottom: -4.5px;margin-left: 10px;")
            use(xlink:href="#icon-xiangce")

      #toggle-menu
        span.site-page
          svg(viewBox='0 0 1024 1024' style='width: 1em; height: 1em; margin: 0 -1px -2px 0;')
            use(xlink:href='#icon-mulu')

2.引入js
在主题配置文件里的inject下的bottom引入文件：

inject:
  head:

  bottom:
    #winbox
    - <script src="https://cdn.jsdelivr.net/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script> # 添加此行
    - <script src="xxx.js"></script> # 这个代表自定义js，放在最下面

3.添加自定义js(里面的图片是Leonus的cdn，请自行下载，上传到自己的图床。)

// 切换背景弹窗版
// 存数据
// name：命名 data：数据
function saveData(name, data) {
    localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data }))
}

// 取数据
// name：命名 time：过期时长,单位分钟,如传入30,即加载数据时如果超出30分钟返回0,否则返回数据
function loadData(name, time) {
    let d = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0 否则返回数据
    if (d) {
        let t = Date.now() - d.time
        if (t < (time * 60 * 1000) && t > -1) return d.data;
    }
    return 0;
}

// 上面两个函数如果你有其他需要存取数据的功能，也可以直接使用

// 读取背景
try {
    let data = loadData('blogbg', 1440)
    if (data) changeBg(data, 1)
    else localStorage.removeItem('blogbg');
} catch (error) { localStorage.removeItem('blogbg'); }

// 切换背景函数
// 此处的flag是为了每次读取时都重新存储一次,导致过期时间不稳定
// 如果flag为0则存储,即设置背景. 为1则不存储,即每次加载自动读取背景.
function changeBg(s, flag) {
    let bg = document.getElementById('web_bg')
    if (s.charAt(0) == '#') {
        bg.style.backgroundColor = s
        bg.style.backgroundImage = 'none'
    } else bg.style.backgroundImage = s
    if (!flag) { saveData('blogbg', s) }
}

// 以下为2.0新增内容

// 创建窗口
var winbox = ''

function createWinbox() {
    let div = document.createElement('div')
    document.body.appendChild(div)
    winbox = WinBox({
        id: 'changeBgBox',
        index: 999,
        title: "切换背景",
        x: "center",
        y: "center",
        minwidth: '300px',
        height: "60%",
        background: '#49b1f5',
        onmaximize: () => { div.innerHTML = `<style>body::-webkit-scrollbar {display: none;}div#changeBgBox {width: 100% !important;}</style>` },
        onrestore: () => { div.innerHTML = '' }
    });
    winResize();
    window.addEventListener('resize', winResize)
    // 每一类我放了一个演示，直接往下复制粘贴 a标签 就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义
    winbox.body.innerHTML = `
    <div id="article-container" style="padding:10px;">

    <div class="note info flat">
        点击对应样式即可切换背景。
    </div>

    <div class="note success flat">
        有效期为一天，到期切回默认壁纸。
    </div>

    <p><button onclick="localStorage.removeItem('blogbg');location.reload();" style="background:#5fcdff;display:block;width:100%;padding: 15px 0;border-radius:6px;color:white;"><i class="fa-solid fa-arrows-rotate"></i> 点我恢复默认背景</button></p>
    <h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h2>
     <details class="toggle" style="background-color:white; border: 2px solid black; border-radius: 5px;">
         <summary class="toggle-button" style="padding: 10px; cursor: pointer; font-weight: bold;">查看电脑壁纸</summary>
         <div class="toggle-content">
             <div class="bgbox">
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/dd4aee16880411ebb6edd017c2d2eca2.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/dd4aee16880411ebb6edd017c2d2eca2.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/66a0f1473a0f4ae7850ac8607774eb03.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/66a0f1473a0f4ae7850ac8607774eb03.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/058fe486bd784f28875a7a01f68d09de.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/058fe486bd784f28875a7a01f68d09de.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/c9d3deb2880411ebb6edd017c2d2eca2.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/c9d3deb2880411ebb6edd017c2d2eca2.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/0d73ff1af5c149c2af78a4c7280c9ac9.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/0d73ff1af5c149c2af78a4c7280c9ac9.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/08206a3879f9467f93eb18e279dd2642.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/08206a3879f9467f93eb18e279dd2642.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/14d9904fe2ac4961b203c3eb2f2f467f.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/14d9904fe2ac4961b203c3eb2f2f467f.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/f048e9726518419fa15dd365902500c4.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/f048e9726518419fa15dd365902500c4.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/bab9141327ca48e39abef6229b79cf9c.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/bab9141327ca48e39abef6229b79cf9c.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/a26f66658e014e06aa70e2753742bef3.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/a26f66658e014e06aa70e2753742bef3.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/35d9316f450041b89232893f083a57f1.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/35d9316f450041b89232893f083a57f1.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/6143778327db4d17adbb63c0f6c0a8af.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/6143778327db4d17adbb63c0f6c0a8af.webp)')"></a>
             </div>
         </div>
     </details>
 </div>
 `;   
}

// 适应窗口大小
function winResize() {
    let box = document.querySelector('#changeBgBox')
    if (!box || box.classList.contains('min') || box.classList.contains('max')) return // 2023-02-10更新
    var offsetWid = document.documentElement.clientWidth;
    if (offsetWid <= 768) {
        winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center");
    } else {
        winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center");
    }
}

// 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口
function toggleWinbox() {
    if (document.querySelector('#changeBgBox')) winbox.toggleClass('hide');
    else createWinbox();
}

4.添加自定义css

/* 切换弹窗版 */
/* 由于全屏会出bug，所以直接给他隐藏 */

.winbox {
border-radius: 12px;
overflow: hidden;
}

.wb-full {
display: none;
}

.wb-min {
background-position: center;
}

[data-theme='dark'] .wb-body,
[data-theme='dark'] #changeBgBox {
background: #333 !important;
}

.bgbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
width: 166px;
margin: 10px;
background-size: cover
}

.pimgbox,
.imgbox {
border-radius: 10px;
overflow: hidden;
}

.pimgbox {
height: 240px;
}

.imgbox {
height: 95px;
}

.box {
height: 100px;
}

@media screen and (max-width: 768px) {
/* 背景 */
.pimgbox,
.imgbox,
.box {
    height: 73px;
    width: 135px;
}
.pimgbox {
    height: 205px;
}
/* 2.0新增内容 */    
.wb-min {
    display: none;
}
#changeBgBox .wb-body::-webkit-scrollbar {
    display: none;
}
}

首页文章推荐：MeuiCat

在这里感谢MeuiCat给予的帮助，由于自己的版本与博主的不同，所以会有一些奇怪的问题。以下是解决后的教程。
这里可能和原作者的不太一样。针对自己的喜好，我做出了一些修改。

在 [blogRoot]/themes/butterfly/layout/includes/header/index.pug页面最后的位置新增以下内容

1
2
3

if is_home()
  .banner-random
    .random-list

新建 [blogRoot]/themes/butterfly/source/css/_page/banner-random.styl样式文件，并新增以下内容

.banner-random
    margin: 15px auto 0
    width 100%
    max-width 1170px

    +maxWidth768()
        padding-left: 10px;
        padding-right: 10px;
    
    .random-title
        display: flex
        justify-content: space-between
        align-items: center

        .title
            font-size: 1.25rem
            font-weight: 600
            margin: 0
            min-width: 80px

        .botton-box
            display: flex
            font-weight: 600

            +maxWidth768()
                width: 100%
                justify-content: space-between
                align-items: center

            .refresh
                opacity: .5
                transition: .6s

                +maxWidth768()
                    margin-left: 8px

                &:hover
                    color: var(--icat-blue)
                    opacity: 1

                i
                    margin-right: 6px

                    +maxWidth768()
                        font-size: 18px

                span
                    +maxWidth768()
                        display: none

            .slide
                display: none

                +maxWidth768()
                    display: flex

                i
                    margin-left: 4px
                    font-size: 14px
                    width: 28px
                    height: 28px
                    display: flex
                    align-items: center
                    justify-content: center

    .random-list
        margin-top: 15px
        display: flex

        +maxWidth768()
            overflow-x: scroll
            overflow-y: hidden
            scroll-behavior: smooth
        
        &::-webkit-scrollbar
            display: none

        .post_item
            width: calc(100% / 4 - 8px)
            margin-right: 15px
            border-radius: 8px
            background: var(--card-bg)
            box-shadow: var(--icat-shadow-border)
            transition: .6s
            border: var(--style-border)
            height: 110px
            animation: barrageIn .6s .4s backwards

            +maxWidth768()
                width: 240px
                min-width: 240px

            &:last-child
                margin-right: 0

            &:hover
                background: var(--icat-blue)
                box-shadow: var(--icat-shadow-blue)

                .post_box
                    .post-info
                        opacity: 0

                    .post_description
                        opacity: 1

            a:hover
                color: var(--font-color)

            .post_box
                width: 100%
                height: 100%
                display: flex
                position: relative
                align-items: center
                justify-content: center

                .post-info
                    display: flex
                    align-items: center
                    justify-content: center
                    flex-direction: column
                    padding: 0 15px
                    transition: .6s
                    opacity: 1

                    +maxWidth768()
                        padding: 0 8px

                    .post-title
                        margin: 0
                        font-size: 1rem
                        font-weight: 600
                        line-height: 1.5
                        -webkit-line-clamp: 1
                        overflow: hidden
                        -webkit-box-orient: vertical
                        display: -webkit-box

                    .info-box
                        font-size: 13px
                        color: #858585
                        display: flex

                .post_description
                    position: absolute
                    opacity: 0
                    color: white
                    transition: .6s
                    text-align: center
                    padding: 0 15px
                    line-height: 1.6
                    -webkit-line-clamp: 2
                    overflow: hidden
                    -webkit-box-orient: vertical
                    display: -webkit-box
                    margin: 0

                    +maxWidth768()
                        padding: 0 8px

创建 [blogRoot]/themes/butterfly/scripts/helpers/random-articles.js 文件，并新增以下内容

'use strict'

hexo.extend.generator.register('thePosts', function(locals) {
	const jsonData = locals.posts
		.filter(post => post.random !== false)
		.map(post => {
			const date = new Date(post.date);
			const categories = post.categories.map(category => category.name);
            const formattedDate = date.toISOString().split('T')[0];
			return {
				title: post.title || "暂无标题",
				time: formattedDate,
				categories: categories[0],
				description: post.description || "暂无简介",
                link: post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/')
			};
		});

	return {
		path: 'articles-random.json',
		data: JSON.stringify(jsonData)
	};
});

创建 [blogRoot]/source/js/anxy.js 文件(或写在自建的公共 js 中也可以)，并新增以下内容:

const CACHE_EXPIRATION_TIME = 12 * 60 * 60 * 1000;  // 缓存过期时间，12小时
// 随机文章js
const anxy = {
    getRandomElementsFromArray: function(arr, num) {
        const shuffled = arr.sort(() => 0.5 - Math.random()); // 打乱数组顺序
        return shuffled.slice(0, num); // 返回前num个元素
    },

    renderingPosts: function(data) {
        const randomElements = anxy.getRandomElementsFromArray(data, 4);
        const postsHtml = randomElements.map((i) => `
            <div class="post_item">
                <a class="post_box" title="${i.title}" href="${i.link}" onclick="pjax.loadUrl('${i.link}')">
                    <div class="post-info">
                        <p class="post-title">${i.title}</p>
                        <div class="info-box">
                            <span>${i.time}</span>
                            <span style="margin: 0 6px">|</span>
                            <span>${i.categories}</span>
                        </div>
                    </div>
                    <p class="post_description">${i.description}</p>
                </a>
            </div>`).join('');

        const randomList = document.querySelector(".banner-random>.random-list");
        if (randomList) {
            randomList.innerHTML = postsHtml;
        }
    },

    loadData: function() {
        fetch("/articles-random.json")
            .then(res => res.ok ? res.json() : Promise.reject('请求失败'))
            .then(data => {
                sessionStorage.setItem("postsInfo", JSON.stringify(data));
                sessionStorage.setItem("postsInfoTimestamp", Date.now());
                anxy.renderingPosts(data);
                console.log("随机文章加载成功");
            })
            .catch(err => {
                console.error("随机文章加载失败:", err);
                setTimeout(anxy.loadData, 3000);  // 错误时重试
            });
    },

    RandomPosts: function() {
        const cachedData = sessionStorage.getItem("postsInfo");
        const cachedTimestamp = sessionStorage.getItem("postsInfoTimestamp");

        if (cachedData && cachedTimestamp && (Date.now() - cachedTimestamp < CACHE_EXPIRATION_TIME)) {
            try {
                anxy.renderingPosts(JSON.parse(cachedData));
            } catch (e) {
                console.error("缓存数据解析失败:", e);
                anxy.loadData();  // 如果解析失败，重新加载数据
            }
        } else {
            anxy.loadData();  // 缓存无效或不存在时，加载新数据
        }
    }
};

// 页面加载时加载随机文章
window.addEventListener('load', function() {
    anxy.RandomPosts();  // 确保在页面完全加载后执行
});

// 初始化 pjax
const pjax = new Pjax({
    elements: 'a',
    selectors: ['#pjax-container'],
    cache: true,
    history: true,
    scrollTo: false,
    transition: 'fade',
    transitionTime: 300
});

document.addEventListener('pjax:complete', function () {
    setTimeout(() => anxy.RandomPosts(), 500);  // 等待500ms再渲染随机文章，确保内容渲染完毕
});

Butterfly主题魔改404页面图片背景

修改hexo\themes\butterfly\_config.yml126~139行的内容，将background:后修改为图片url
背景颜色修改一下：hexo\themes\butterfly\source\css\_page\404.styl把里面最后面的 background-color修改为自己喜欢的颜色就好了（这里我默认白色）

if hexo-config('error_404.enable')
  .type-404
    .error-content
      @extend .cardHover
      overflow: hidden
      margin: 0 20px
      height: 360px

      +maxWidth768()
        margin: 0
        height: 500px

      .error-img
        display: inline-block
        overflow: hidden
        width: 50%
        height: 100%

        +maxWidth768()
          width: 100%
          height: 45%

        img
          @extend .imgHover
          background-color: #ffffff

项目启动自定义字符画：Fomalhaut

ASCII字符画生成器见这篇文章：CSDN:在线生成ascii字符画网站字符图案在线生成工具效果预览
替换主题源码：[BlogRoot]\themes\butterfly\scripts\events\welcome.js为以下代码即可：

hexo.on('ready', () => {
  const { version } = require('../../package.json')
  hexo.log.info(`
  ======================================================================
                                                                     
██████  ██    ██ ████████ ████████ ███████ ██████  ███████ ██      ██    ██ 
██   ██ ██    ██    ██       ██    ██      ██   ██ ██      ██       ██  ██  
██████  ██    ██    ██       ██    █████   ██████  █████   ██        ████   
██   ██ ██    ██    ██       ██    ██      ██   ██ ██      ██         ██    
██████   ██████     ██       ██    ███████ ██   ██ ██      ███████    ██    

                            主题版本：${version}
  ======================================================================`)
})

控制台样式自定义（安知鱼）：Fomalhaut

console的高级用法
ASCII字符画生成器见这篇文章：CSDN:在线生成ascii字符画网站字符图案在线生成工具
新建js文件[BlogRoot]\source\js\console.js，并写入如下代码：

var now1 = new Date();

function createtime1() {
    var grt = new Date("11/28/2022 14:00:00"); //此处修改你的建站时间或者网站上线时间
    now1.setTime(now1.getTime() + 250);
    var days = (now1 - grt) / 1000 / 60 / 60 / 24;
    var dnum = Math.floor(days);

    var ascll = [
        `欢迎来到安小歪の小家!`,
        `Future is now 🍭🍭🍭`,
        `
 █████╗ ███╗   ██╗██╗  ██╗██╗ █████╗  ██████╗ ██╗    ██╗ █████╗ ██╗
██╔══██╗████╗  ██║╚██╗██╔╝██║██╔══██╗██╔═══██╗██║    ██║██╔══██╗██║
███████║██╔██╗ ██║ ╚███╔╝ ██║███████║██║   ██║██║ █╗ ██║███████║██║
██╔══██║██║╚██╗██║ ██╔██╗ ██║██╔══██║██║   ██║██║███╗██║██╔══██║██║
██║  ██║██║ ╚████║██╔╝ ██╗██║██║  ██║╚██████╔╝╚███╔███╔╝██║  ██║██║
╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝  ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝
                                                                   
`,
        "小站已经苟活",
        dnum,
        "天啦!",
        "©2022~2025 By 安小歪",
    ];

    setTimeout(
        console.log.bind(
            console,
            `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`,
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            ""
        )
    );
}

createtime1();

function createtime2() {
    var ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为「大聪明」`, `Photo captured: `, ` 🤪 `];

    setTimeout(
        console.log.bind(
            console,
            `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}`,
            "color:white; background-color:#10bcc0",
            "",
            "",
            'background:url("https://cdn.cbd.int/anzhiyu-assets@1.0.11/image/common/tinggge.gif") no-repeat;font-size:450%'
        )
    );

    setTimeout(console.log.bind(console, "%c WELCOME %c 欢迎光临，大聪明", "color:white; background-color:#23c682", ""));

    setTimeout(
        console.warn.bind(
            console,
            "%c ⚡ Powered by 安小歪 %c 你正在访问安小歪の小家",
            "color:white; background-color:#f0ad4e",
            ""
        )
    );

    setTimeout(console.log.bind(console, "%c W23-12 %c 系统监测到你已打开控制台", "color:white; background-color:#4f90d9", ""));
    setTimeout(
        console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中", "color:white; background-color:#d9534f", "")
    );
}
createtime2();

// 重写console方法
console.log = function () { };
console.error = function () { };
console.warn = function () { };

在主题配置文件[BlogRoot]\_config.butterfly.yml中引入该js文件

1
2
3

inject: 
  bottom: 
+    - <script async src="/js/console.js"></script>