所有有修改的魔改代码，只需要去掉前面的 + 即可，不需要调整相关代码的缩进，而-的那一行直接删除即可

更新 Hexo 及插件和主题

点击查看参考教程

如何更新Hexo及插件的版本？如何更新主题版本？

https://blog.zhheo.com/p/6d1f1f98.html

Butterfly 安装文档(一) 快速开始

https://butterfly.js.org/posts/21cfbf15/#%E5%8D%87%E7%B4%9A%E5%BB%BA%E8%AD%B0

点击查看步骤

更新时需要提前做好备份，更新后出现问题可以退回

更新 Butterfly 主题前，提前备份好原有主题文件夹的代码
- Butterfly 仓库源码将源码下载后，覆盖 themes\butterfly 文件夹，然后把新的配置文件更新到根目录下自己创建的 _config.butterfly.yml 中，同时需要重新修改相当多的魔改内容（因为更新主题源代码覆盖掉了自己的魔改内容）

使用 npm update 可以自动更新插件和 Hexo 版本

通过 npm outdated 可以检查 Hexo 和插件的最新版本
- 然后修改 package.json，将插件名称所对应的版本号更改为要更新的版本号
- 使用 npm install --save，开始更新插件

侧边栏天气卡片

点击查看参考教程

Butterfly主题的一些侧边栏插件

https://yisous.xyz/posts/4ae2ec41/#2天气插件

点击查看步骤

前往和风天气开发平台，创建天气标准插件，调整好样式后，点击最下面的生成代码，这里需要登录或者注册账号
生成代码后，只需要保留 WIDGET 部分

创建 themes\butterfly\layout\includes\widget\card_weather.pug

// 本小站的插件样式代码
.card-widget.card-weather(style='width:100%,height:270px')
.item-headline
  i(class="fas fa-cloud-sun")
  span="天气"
#he-plugin-standard
script.
  WIDGET = {
    "CONFIG": {
      "layout": "2",
      "width": 270,
      "height": 270,
      "background": "5",
      "dataColor": "000000",
      "language": "zh",
      "key": "!{theme.aside.card_weather.key}"
    }
  }
script(src='https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0')

修改 themes\butterfly\layout\includes\widget\index.pug

  #aside-content.aside-content
  //- post
  if is_post()
    ...
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      ...
# 请注意，添加的位置表明了在侧边栏的优先级顺序，也可以在 post 这里不添加
+      !=partial('includes/widget/card_weather', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        ...
        !=partial('includes/widget/card_ad', {}, {cache: true})
    
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
    ...
# 请注意，添加的位置表明了在侧边栏的优先级顺序
+    !=partial('includes/widget/card_weather', {}, {cache: true})
    .sticky_layout
      if showToc
        include ./card_post_toc.pug
      ...
      ...

在 _config.butterfly.yml 中的 aside 下添加 card_weather 配置

aside:
  enable: true
  ...
  card_weather:
    enable: true
    key: #你开始获取的key

在 css 文件中添加

#he-plugin-standard{
    width:100%!important;
    margin-bottom:20px!important;
}
.wv-lt-location>a,
.wv-lt-location>span,
.wv-n-h-now-tmp>span,
.wv-n-h-now-txt>span,
.wv-n-h-now-rain>a,
.wv-n-h-now-rain>span,
.wv-f-forecast-date>a,
.wv-f-a {
  color: var(--font-color) !important;
  font-family: 'HYTMR', 'Microsoft Yahei', 'PingFang SC', 'SimSun' !important;
  font-size: 14px;
}

.wv-n-h-now-aqi-item {
  display: none;
}

友链样式美化

点击查看参考教程

Friend Link Card Beautify

https://akilar.top/posts/57291286/

点击查看步骤

直接照着参考教程进行的魔改

可以在 source/link 下的 index.md 文件中添加自己的友链，方便别人引用，内容会出现在友链页面的最后

- name: SuburbiaXX
  link: https://suburbiaxx.fun/
  avatar: https://pic.imgdb.cn/item/641c531ea682492fcc0713a3.jpg
  description: 努力空想的摆烂小孩
  siteshot: https://pic.imgdb.cn/item/6582efb0c458853aef03d900.webp

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

点击查看参考教程

hexo-abbrlink 插件

https://github.com/rozbo/hexo-abbrlink

点击查看步骤

安装插件
npm install hexo-abbrlink --save

在 _config.yml 中添加配置

# abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32 进制
  rep: hex        #support dec(default) and hex  算法
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  ## Generate categories from directory-tree
  ## depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
    enable: true  #true(default)
    depth:        #3(default)
    over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.

文章页 H1-H6 图标风车样式效果

点击查看参考教程

butterfly 重装日记 - 文章页 H1-H6 图标风车样式效果

https://blog.anheyu.com/posts/sdxhu.html#%E6%96%87%E7%AB%A0%E9%A1%B5-H1-H6-%E5%9B%BE%E6%A0%87%E9%A3%8E%E8%BD%A6%E6%A0%B7%E5%BC%8F%E6%95%88%E6%9E%9C

点击查看步骤

直接照着参考教程进行的魔改

改完之后，在 css 上调整了一下风车的样式，为了让风车更加靠近文字，取消了所有的 margin-left 样式

/* 小风车颜色、大小 */
#content-inner.layout h1::before {
  color: #ef50a8;
-  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}

#content-inner.layout h2::before {
  color: #fb7061;
-  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}

#content-inner.layout h3::before {
  color: #ffbf00;
-  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}

#content-inner.layout h4::before {
  color: #a9e000;
-  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}

#content-inner.layout h5::before {
  color: #57c850;
-  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}

#content-inner.layout h6::before {
  color: #5ec1e0;
-  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}

文章顶部波浪效果

点击查看参考教程

波浪特效添加到 butterfly 主题 Bannar

https://snowtafir.top/posts/2022bn5s.html

butterfly文章顶部添加波浪效果

https://blog.anheyu.com/posts/98c4.html

点击查看步骤

直接照着参考教程进行的魔改

侧边栏电子时钟

点击查看参考教程

给butterfly添加侧边栏电子钟

https://blog.anheyu.com/posts/fc18.html

点击查看步骤

直接照着参考教程进行的魔改

建议申请和风天气应用的 key 和高德地图的 key
- 和风天气应用的 key 和之前导航栏和风天气插件的 key 不一样

loading 加载动画

点击查看参考教程

Heo同款loading动画

https://blog.anheyu.com/posts/52d8.html

点击查看步骤

直接照着参考教程进行的魔改

异步加载

点击查看参考教程

Hexo异步加载方案

https://akilar.top/posts/615d5ede/

速度优化-css预加载

https://uu.sssu.us/archives/47635/

点击查看步骤

直接照着参考教程进行的魔改

拿捏不准的异步加载情况可以在测试的时候都试试

网站恶搞标题

点击查看参考教程

博客魔改教程总结(五) - 网站恶搞标题

https://www.fomal.cc/posts/d1927166.html#%E7%BD%91%E7%AB%99%E6%81%B6%E6%90%9E%E6%A0%87%E9%A2%98

点击查看步骤

直接照着参考教程进行的魔改

本小站的配置如下

// 动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {// 离开当前页面时标签显示内容
    document.title = '😶‍🌫️离去不必挽留~';
    clearTimeout(titleTime);
  } else {// 返回当前页面时标签显示内容
    document.title = '✨归来仍存欣喜~';
    titleTime = setTimeout(function () {// 两秒后变回正常标题
      document.title = OriginTitile;
    }, 2000);
  }
});

algolia 搜索

点击查看参考教程

hexo butterfly 主题添加 algolia 搜索

https://cloud.tencent.com/developer/article/2229499

站内搜索用 Algolia

https://www.zhihu.com/question/46822587/answer/308411949

网站添加Algolia全文索引

https://www.nowcoder.com/discuss/522957618034278400

algolia的简单美化和优化记录

https://blog.leonus.cn/2022/algolia.html

Hexo Butterfly Algolia 搜索的使用

https://blog.ccknbc.cc/posts/hexo-butterfly-algolia

点击查看步骤

直接照着参考教程进行的魔改

主要参考的是最后一个链接教程
本小站的配置如下，此处需要注意，如果配置一切正常，但是在最后使用 hexo algolia 指令时报错了，有可能是因为 fields 参数中配置的内容过多，导致超出了长度限制，此时需要将 fields 中的内容进行删减（本人亲身踩坑）

出现问题也可以去 algolia 的 dashboard 中看看 Index 的上传情况，根据更多的报错来进行调整

<!-- _config.butterfly.yml 中 -->
# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 6
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到${hits}条结果（用时${time} ms）"

<!-- _config.yml 中 -->
# algolia config
algolia:
  appId: "..."  // 此处需要填写自己的 appId
  apiKey: "..." // 此处需要填写自己的 apiKey
  adminApiKey: "..."  // 此处需要填写自己的 adminApiKey
  chunkSize: 5000
  indexName: "..."  // 此处需要填写自己的 indexName
  fields:
    - content:strip:truncate,0,500
    - description:strip
    - title
    - path

导航栏

点击查看参考教程

关于Butterfly的导航栏的一些教程

https://yisous.xyz/posts/895003b5/

Butterfly的魔改教程：导航栏魔改美化

https://meuicat.com/blog/1/

博客魔改教程总结(五) - 导航栏魔改增强版(LYX)

https://www.fomal.cc/posts/d1927166.html#%E5%AF%BC%E8%88%AA%E6%A0%8F%E9%AD%94%E6%94%B9%E5%A2%9E%E5%BC%BA%E7%89%88(LYX)

点击查看步骤

直接照着参考教程进行的魔改

参考了大佬们的许多教程，主要是参考了第一个链接的教程

图形统计

点击查看参考教程

Hexo 博客文章统计图

https://blog.eurkon.com/post/1213ef82.html

点击查看步骤

直接照着参考教程进行的魔改

侧边栏归档修改

点击查看参考教程

侧边栏归档修改

https://blog.anheyu.com/posts/sdxhu.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%BD%92%E6%A1%A3%E4%BF%AE%E6%94%B9

点击查看步骤

直接照着参考教程进行的魔改

侧边栏标签修改

点击查看参考教程

侧边栏标签修改

https://blog.anheyu.com/posts/sdxhu.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%A0%87%E7%AD%BE%E4%BF%AE%E6%94%B9

点击查看步骤

对应 tag 的数量角标没出现的话，需要把 _config.butterfly.yml 中 aside -> card_tags -> color 改成 true

时间轴生肖

点击查看参考教程

Archive Beautify

https://akilar.top/posts/22257072/

点击查看步骤

直接照着参考教程进行的魔改

侧边栏个人卡片

点击查看参考教程

Archive Beautify

https://blog.anheyu.com/posts/sdxhu.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E4%B8%AA%E4%BA%BA%E5%8D%A1%E7%89%87%E6%B8%90%E5%8F%98%E8%89%B2

点击查看步骤

直接照着参考教程进行的魔改

本小站的 css 配置

/* 侧边栏个人卡片 */
#aside-content>.card-widget.card-info {
  background: linear-gradient(-45deg, #bbd2c5, #90b6cc, #b6bcd6, #bfc1cf);
  background-size: 400%;
  box-shadow: rgba(0, 0, 0, 0.05);
  animation: gradient 20s ease infinite;
  position: relative;
  color: #fff;
}

.site-data>a .headline,
.site-data>a .length-num {
  color: #fff;
}

页脚徽标

点击查看参考教程

Add Github Badge

https://akilar.top/posts/e87ad7f8/

点击查看步骤

直接照着参考教程进行的魔改

本小站直接在 \themes\butterfly\layout\includes\footer.pug 中的合适位置添加了页脚徽标，配置如下（这里没有放上备案信息的徽标情况，按需添加即可）

<p>
  <a style="margin-inline:5px;text-decoration:none;" target="_blank" href="https://hexo.io/">
    <img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为 Hexo">
  </a>
  <a style="margin-inline:5px;text-decoration:none;" target="_blank" href="https://butterfly.js.org/">
    <img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用 butterfly">
  </a>
  <a style="margin-inline:5px;text-decoration:none;" target="_blank" href="https://www.jsdelivr.com/">
    <img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用 JsDelivr 为静态资源提供 CDN 加速">
  </a>
  <a style="margin-inline:5px;text-decoration:none;" target="_blank" href="https://github.com/">
    <img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由 Github 托管">
  </a>
  <a style="margin-inline:5px;text-decoration:none;" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
    <img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可">
  </a>
</p>

备案信息的徽标图片，则可以通过图片转成 base64，然后直接在页脚徽标中使用

外挂标签 plus

点击查看参考教程

Tag Plugins Plus

https://akilar.top/posts/615e2dec/

Hexo的Butterfly魔改教程：网址卡片外置标签

https://blog.zhheo.com/p/ccaf9148.html

点击查看步骤

针对外挂标签的 url，修改了 node_modules\hexo-butterfly-tag-plugins-plus\index.js 中 link.js 部分的内容

//link.js
// {% link title, url %}
// {% link title, url, img %}
hexo.extend.tag.register('link', function(args) {
  var configtemp = hexo.config.tag_plugins || hexo.theme.config.tag_plugins
  args = args.join(' ').split(',')
  let text = ''
  let url = ''
  let img = ''
  if (args.length < 2) {
    return
  } else if (args.length == 2) {
    text = args[0].trim()
    url = args[1].trim()
  } else if (args.length == 3) {
    text = args[0].trim()
    url = args[1].trim()
    img = args[2].trim()
  }
  let result = '';
  // 发现如果不套一层 div 在其它可渲染 md 的容器中容易被分解
  result += '<div class="tag link"><a class="link-card" title="' + text + '" href="' + url + '">';
  // left
  result += '<div class="left">';
  result += '<img src="' + (img || configtemp.link.placeholder) + '"/>';
  result += '</div>';
  // right
  result += '<div class="right"><p class="text">' + text + '</p><p class="url">' + url + '</p></div>';
+  result += '<i class="fa-solid fa-arrow-right"></i>';
  result += '</a></div>';

  return result;
});

因为一般不用到网站的图标爬取（参考 zhheo 的 blog），因为有些网站没有图标，于是将 akilar 的 hexo-butterfly-tag-plugins-plus 中的 css 配置注释，手动 down 下来然后在 _config.butterfly.yml 中 inject 引入方便魔改，修改了 #article-container a.link-card 等，具体如下

#article-container a.link-card {
+  width: 100%;
  margin: 0.25rem auto;
  background: #f6f6f6;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-align: center;
-  min-width: 200px;
-  max-width: 361px;
  color: #444;
  border-radius: 12px;
  text-decoration: none;
}

#article-container a.link-card p {
+  text-align: left;
  margin: 0;
}

#article-container a.link-card p.url {
  flex-shrink: 0;
  color: rgba(68, 68, 68, 0.65);
  font-size: 13px;
+  display: block; /* 确保元素是块级元素 */
+  max-width: 300px; /* 设置最大宽度，根据需要调整 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

+#article-container a.link-card i {
+  font-size: x-large;
+  margin-left: auto;
+  margin-right: 35px;
}

系列文章

点击查看步骤

butterfly 自带了 series，但是在每一页的文章的传送门中并没有指向当前位置的功能，直接在 \themes\butterfly\scripts\tag\series.js 中进行魔改，在生成列表的过程中进行判断即可

// 做了特判，如果当前页面的路径和系列文章的路径一致，则在 li 的内容后面添加标记
let result = ''
seriesArr.forEach(ele => {
- result += `<li><a href="${urlFor(ele.path)}" title="${ele.title}">${ele.title}</a></li>`
+  if (this.path === ele.path) {
+    result += `<li><a href="${urlFor(ele.path)}" title="${ele.title}">${ele.title}</a><span style="color: #ff8c00; font-weight: bold">&emsp;&emsp;&emsp;&emsp;⇦当前位置📌</span></li>`
+  } else {
+    result += `<li><a href="${urlFor(ele.path)}" title="${ele.title}">${ele.title}</a></li>`
+  }
})

首页文章卡片布局

点击查看参考教程

双栏布局首页卡片魔改教程

https://akilar.top/posts/d6b69c49/

代码

https://github.com/fomalhaut1998/hexo-theme-Fomalhaut/blob/main/themes/butterfly/source/css/_index_card_style/slidecard.styl

点击查看步骤

参照教程进行的魔改发现 slidecard.styl 样式出现了点问题，便去找了一些其他的教程，最终使用了 fomalhaut 的代码作为基础进行魔改

魔改了 slidecard.styl 中的样式

//default color:
:root
  --recent-post-bgcolor: rgba(247, 252, 254, 0.5)  //默认背景
  --article-content-bgcolor: rgba(110, 155, 197, 0.8) //描述版块背景
  --recent-post-arrow: #3271ae //箭头配色
  --recent-post-cover-shadow: transparent//封面遮罩层配色，建议和默认值的颜色相对应。
  --recent-post-transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)  //动画效果。不了解的不要改动
[data-theme="dark"]
  --recent-post-bgcolor: rgba(35,35,35,0.5)
  --article-content-bgcolor: rgba(153, 153, 154, 0.9)
  --recent-post-arrow: #f8fbf8
  --recent-post-cover-shadow: transparent
// 默认的首页卡片容器布局
.recent-posts
  padding 0 15px 0 15px
  height fit-content
  .recent-post-item
    margin-bottom 15px
    width 100%
    background var(--recent-post-bgcolor)
    overflow hidden
    border-radius 15px
    .recent-post-content
      display flex
      background var(--recent-post-bgcolor)
      position relative
      .recent-post-cover
        display flex
        background transparent
      .recent-post-info
        display flex
        background transparent
        flex-direction column
        justify-content center
        align-items center
        .article-title
          height 50%
          display: flex
          text-align: center
          align-items: center
          justify-content: flex-end
          flex-direction: column
          .article-title-link
            color: var(--text-highlight-color)
            transition: all .2s ease-in-out
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            &:hover
              color: $text-hover
        .recent-post-meta
          height 50%
          display: flex
          text-align: center
          align-items: center
          justify-content: flex-start
          flex-direction: column
          .article-meta-wrap
            color #969797
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            a
              color: var(--text-highlight-color)
              transition: all .2s ease-in-out
              color #969797
              &:hover
                color: $text-hover
      .article-content
        display flex
        text-align: center
        flex-direction row
        align-items center
        justify-content center
        .article-content-text
          display -webkit-box
          -webkit-box-orient vertical
          text-overflow: ellipsis
          overflow hidden
          color #fff
          text-shadow 1px 2px 3px #000
          &::before
            content "❝"
            font-size 20px
          &::after
            content "❞"
            font-size 20px
    &.ads-wrap
      display: block !important
      height: auto !important
// PC端滑动卡片样式
@media screen and (min-width:1069px)
  .recent-posts
    padding 0 15px 0 15px
    .recent-post-item
      .recent-post-content
        position relative
        height 200px
        width 100%
        transition var(--recent-post-transition)
        &:hover
          .recent-post-cover-shadow
            width 10.1%
            transition var(--recent-post-transition)
          .recent-post-cover
            width 10%
            transition var(--recent-post-transition)
          .article-content
            width calc(30% + 80px)
            transition var(--recent-post-transition)
            .article-content-text
              opacity 1
          .recent-post-arrow
            transition var(--recent-post-transition)
        .recent-post-cover-shadow
          z-index: 1
          transition var(--recent-post-transition)
          position: absolute
          height 200px
          width 40%
        .recent-post-cover
          height 200px
          width 40%
          transition var(--recent-post-transition)
          img
            border-radius 15px
            height 100%
            width 100%
            object-fit cover

        .recent-post-info
          height 200px
          width calc(60% - 80px)
          .article-title
            margin: 0px 40px
            font-size 24px
            .article-title-link
              -webkit-line-clamp: 2;
          .recent-post-meta
            margin: 0px 20px
            .article-meta-wrap
              font-size 12px
              -webkit-line-clamp: 3;
        .article-content
          height 200px
          width 90px
          background var(--article-content-bgcolor)
          transition var(--recent-post-transition)
          .article-content-text
            -webkit-line-clamp 4
            transition: var(--recent-post-transition)
            opacity 0
        .recent-post-arrow
          transition var(--recent-post-transition)
          display block
          position absolute
          height 20px
          width 8px
          background var(--recent-post-arrow)
        &.both,
        &.right
          .recent-post-cover-shadow
            left 0
            background linear-gradient(to left, var(--recent-post-cover-shadow), transparent)
          .recent-post-cover
            order: 1
          .recent-post-info
            order: 2
          .article-content
            order: 3
            clip-path polygon(0 50%, 80px 0, 100% 0, 100% 100%, 80px 100%)
            .article-content-text
              margin 20px 40px 20px 80px
          .recent-post-arrow
            order: 4
            left calc(100% - 80px)
            top calc(50% - 10px)
            clip-path polygon(0 10px, 8px 0, 8px 20px)
          &:hover
            .recent-post-arrow
              left calc(100% - 40px)
        &.left
          .recent-post-cover-shadow
            right 0
            background linear-gradient(to right, var(--recent-post-cover-shadow), transparent)
          .recent-post-cover
            order: 4
          .recent-post-info
            order: 3
          .article-content
            order: 2
            clip-path polygon(100% 50%,calc(100% - 80px) 100%,0 100%,0 0,calc(100% - 80px) 0)
            .article-content-text
              margin 20px 80px 20px 40px
          .recent-post-arrow
            order: 1
            left 72px
            top calc(50% - 10px)
            clip-path polygon(0 0, 8px 10px, 0 20px)
          &:hover
            .recent-post-arrow
              left 32px
// 双栏布局卡片自适应适配
@media screen and (min-width:572px) and (max-width:1068px)
  .recent-posts
    padding 0 15px 0 15px
    display flex
    flex-direction row
    flex-wrap wrap
    .recent-post-item
      border-radius 15px
      overflow hidden
      width 47%
      margin 0px 3% 20px 0px
    nav#pagination
      width: 100%
// 手机端单栏布局自适应适配
@media screen and (max-width:572px)
  .recent-posts
    padding 0 15px 0 15px
    .recent-post-item
      border-radius 15px
      overflow hidden
        
// 手机端及双栏卡片样式
@media screen and (max-width:1068px)
  .recent-posts
    .recent-post-item
      .recent-post-content
        flex-direction column
        flex-wrap nowrap
        align-items center
        max-height 350px
        height: auto 
        width 100%
        .recent-post-cover
          width 100%
          height 200px
          clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
          img
            height 200px
            width 100%
            object-fit cover
        .recent-post-info
          height 150px
          width 100%
          padding 0px 25px 5px 25px
          .article-title
            margin: 0px 40px
            font-size 18px
            .article-title-link
              -webkit-line-clamp: 2;
          .recent-post-meta
            margin: 0px 20px
            .article-meta-wrap
              font-size 12px
              -webkit-line-clamp: 3;
        .article-content
          position absolute
          height 200px
          width 100%
          background rgba(25,25,25,0.5)
          clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
          .article-content-text
            -webkit-line-clamp 3
            font-size 16px
            margin 0px 25px 30px 25px
        .recent-post-arrow
          display block
          background var(--article-content-bgcolor)
          position absolute
          height 10px
          width 20px
          clip-path polygon(0 0,100% 0,50% 100%)
          top 20px

在教程的基础上修改了 post-ui.pug 中的内容，使其小标签间距更合理

mixin postUI(posts)
each article , index in page.posts.data
  .recent-post-item
    -
      let link = article.link || article.path
      let title = article.title || _p('no_title')
      const position = theme.cover.position
      let leftOrRight = position === 'both'
        ? index%2 == 0 ? 'left' : 'right'
        : position === 'left' ? 'left' : 'right'
      let post_cover = article.cover
      let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
    -
    .recent-post-content(class=leftOrRight)
      .recent-post-cover
        img.article-cover(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
      .recent-post-info
        if (numberone !== 1 && is_current('/') && (!article.top || (article.new && article.top)))
          span.newPost 最新
          - var numberone = 1
        a.article-title(href=url_for(link) title=title)
          .article-title-link= title
        .recent-post-meta                
          .article-meta-wrap
            if (is_home() && (article.top || article.sticky > 0))
              span.article-meta
                i.fas.fa-thumbtack.sticky
                span.sticky= _p('sticky')
                span.article-meta-separator  | 
            if (theme.post_meta.page.date_type)
              span.post-meta-date
                if (theme.post_meta.page.date_type === 'both')
                  i.far.fa-calendar-alt
                  span.article-meta-label=" " + _p('post.created') + " "
                  time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
                  span.article-meta-separator  | 
                  i.fas.fa-history                  
                  span.article-meta-label=" " + _p('post.updated') + " "
                  time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
                else
                  - let data_type_updated = theme.post_meta.page.date_type === 'updated'
                  - let date_type = data_type_updated ? 'updated' : 'date'
                  - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
                  - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
                  i(class=date_icon)
                  span.article-meta-label=date_title
                  time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
            if (theme.post_meta.page.categories && article.categories.data.length > 0)
              span.article-meta
                span.article-meta-separator  | 
                i.fas.fa-inbox
                each item, index in article.categories.data
                  a(href=url_for(item.path)).article-meta__categories #[=" " + item.name + " "]
                  if (index < article.categories.data.length - 1)
                    i.fas.fa-angle-right.article-meta-link
            if (theme.post_meta.page.tags && article.tags.data.length > 0)
              span.article-meta.tags
                span.article-meta-separator  | 
                i.fas.fa-tag
                each item, index in article.tags.data
                  a(href=url_for(item.path)).article-meta__tags #[=" " + item.name + " "]
                  if (index < article.tags.data.length - 1)
                    span.article-meta-link #[=' • ']
            
            mixin countBlockInIndex
              - needLoadCountJs = true
              span.article-meta
                span.article-meta-separator  | 
                i.fas.fa-comments
                if block
                  block
                span.article-meta-label= ' ' + _p('card_post_count')
            
            if theme.comments.card_post_count
              case theme.comments.use[0]
                when 'Disqus'
                  +countBlockInIndex
                    a(href=full_url_for(link) + '#disqus_thread')
                      i.fa-solid.fa-spinner.fa-spin
                when 'Disqusjs'
                  +countBlockInIndex
                    a(href=full_url_for(link) + '#disqusjs')
                      span.disqus-comment-count(data-disqus-url=full_url_for(link))
                        i.fa-solid.fa-spinner.fa-spin
                when 'Valine'
                  +countBlockInIndex
                    a(href=url_for(link) + '#post-comment')
                      span.valine-comment-count(data-xid=url_for(link))
                        i.fa-solid.fa-spinner.fa-spin
                when 'Waline'
                  +countBlockInIndex
                    a(href=url_for(link) + '#post-comment')
                      span.waline-comment-count(id=url_for(link))
                        i.fa-solid.fa-spinner.fa-spin
                when 'Twikoo'
                  +countBlockInIndex
                    a.twikoo-count(href=url_for(link) + '#post-comment')
                      i.fa-solid.fa-spinner.fa-spin
                when 'Facebook Comments'
                  +countBlockInIndex
                    a(href=url_for(link) + '#post-comment')
                      span.fb-comments-count(data-href=urlNoIndex(article.permalink))
                when 'Remark42'
                  +countBlockInIndex
                    a(href=url_for(link) + '#post-comment')
                      span.remark42__counter(data-url=urlNoIndex(article.permalink))
                        i.fa-solid.fa-spinner.fa-spin
                when 'Artalk'
                  +countBlockInIndex
                    a(href=url_for(link) + '#post-comment')
                      span.artalk-count(data-page-key=url_for(link))
                        i.fa-solid.fa-spinner.fa-spin      
      a.article-content(href=url_for(link) title=title)
        //- Display the article introduction on homepage
        case theme.index_post_content.method
          when false
            - break
          when 1
            .article-content-text!= article.description
          when 2
            if article.description
              .article-content-text!= article.description
            else
              - const content = strip_html(article.content)
              - let expert = content.substring(0, theme.index_post_content.length) 
              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
              .article-content-text!= expert
          default
            - const content = strip_html(article.content)
            - let expert = content.substring(0, theme.index_post_content.length) 
            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .article-content-text!= expert      
      .recent-post-arrow

  if theme.ad && theme.ad.index
    if (index + 1) % 3 == 0
      .recent-post-item.ads-wrap!=theme.ad.index

文章卡片加上最新标识

点击查看参考教程

Butterfly文章卡片加上最新文章标志

https://www.qcqx.cn/article/2ed7d622.html

点击查看步骤

直接照着参考教程进行的魔改

基于首页文章卡片布局基础上进行的魔改

侧边栏最近文章修改

点击查看参考教程

侧边栏最近文章修改

https://blog.anheyu.com/posts/sdxhu.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%9C%80%E8%BF%91%E6%96%87%E7%AB%A0%E4%BF%AE%E6%94%B9

点击查看步骤

直接照着参考教程进行的魔改

页脚计时器

点击查看参考教程

Fomalhaut🥝页脚计时器

https://fomal.cc#workboard

Fomalhaut🥝页脚计时器代码

https://github.com/fomalhaut1998/hexo-theme-Fomalhaut/blob/main/source/js/fomal.js

点击查看步骤

在 \themes\butterfly\layout\includes\footer.pug 中添加一个 #workboard 容器

创建一个 foot_timer.js 文件，利用 js 定时器进行计时并且实现按照秒的刷新

var now = new Date();
console.log(now);
function createtime() {
    // 当前时间
    now.setTime(now.getTime() + 1000);
    // 网站诞生时间
    var grt = new Date("09/04/2022 00:00:00");
    var days = (now - grt) / 1e3 / 60 / 60 / 24,
        dnum = Math.floor(days),
        hours = (now - grt) / 1e3 / 60 / 60 - 24 * dnum,
        hnum = Math.floor(hours);
    1 == String(hnum).length && (hnum = "0" + hnum);
    var minutes = (now - grt) / 1e3 / 60 - 1440 * dnum - 60 * hnum,
        mnum = Math.floor(minutes);
    1 == String(mnum).length && (mnum = "0" + mnum);
    var seconds = (now - grt) / 1e3 - 86400 * dnum - 3600 * hnum - 60 * mnum,
        snum = Math.round(seconds);
    1 == String(snum).length && (snum = "0" + snum);
    let currentTimeHtml = "";
    (currentTimeHtml = `<div style="font-size:13px;font-weight:bold">自 2022-9 以来，小站苟活了 ${dnum} 天 ${hnum} 小时 ${mnum} 分 ${snum} 秒 <i id="heartbeat" class='fas fa-heartbeat'></i></div>`),
        document.getElementById("workboard") &&
            (document.getElementById("workboard").innerHTML = currentTimeHtml);
}
// 设置重复执行函数，周期1000ms
setInterval(() => {
    createtime();
}, 1000);

/* 页脚心跳 css 动画 */
@keyframes iconAnimate {
  0%,
  100% {
    transform: scale(0.9);
    /* 动画开始和结束时图标保持原始大小 */
  }
  15% {
    transform: scale(1.3);
    /* 快速跳动到较大大小 */
  }
  30% {
    transform: scale(0.9);
    /* 返回原始大小 */
  }
  45%,
  60% {
    transform: scale(1.1);
    /* 较小的第二次跳动 */
  }
  70% {
    transform: scale(0.9);
    /* 再次返回原始大小 */
  }
}

#heartbeat {
  color: red;
  animation: iconAnimate 1.5s cubic-bezier(0.5, 0.1, 0.1, 1) infinite;
}

右侧滚动条

点击查看步骤

将 themes\butterfly\source\css_global\index.styl 进行修改

// 在 54 行左右，去掉掉原有的滚动条样式
// scrollbar - chrome/safari
-*::-webkit-scrollbar
-  width: 5px
-  height: 5px

-*::-webkit-scrollbar-thumb
-  background: var(--scrollbar-color)

-*::-webkit-scrollbar-track
-  background-color: transparent

// scrollbar - firefox
-*
-  scrollbar-width: thin
-  scrollbar-color: var(--scrollbar-color) transparent

在自己的 css 文件中写入新的滚动条样式

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  /* border-radius: 2em; */
}
::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(45deg,
      rgba(255, 255, 255, 0.4) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      transparent 75%,
      transparent);
  /* border-radius: 2em; */
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
::-moz-selection {
  color: #fff;
  background-color: #49b1f5;
}

代码块样式调整

点击查看步骤

\themes\butterfly\source\css\_highlight\theme.styl 中，调整对应的 $highlight-addition = #4CAF50

头图模糊效果

点击查看步骤

有些压缩过后的头图颗粒感非常明显，打算通过模糊进行处理，在自身的 css 文件中添加如下代码

/* 对背景图应用模糊效果，此处不模糊主页的头图 */
#footer::before,
#page-header:not(.full_page):before {
  backdrop-filter: blur(5px);
}

gulp 压缩静态资源

点击查看参考教程

使用gulp压缩博客静态资源

https://akilar.top/posts/49b73b87/

网站性能优化的一些小技巧

https://www.fomal.cc/posts/b48804d5.html

点击查看步骤

直接照着参考教程进行的魔改

lazyload(未使用)

点击查看参考教程

butterfly控制特定图片懒加载

https://blog.anheyu.com/posts/192f.html

字体魔改(未使用)

点击查看参考教程

Butterfly 如何优雅的改字体

https://imbhj.com/posts/25c13146/

文章加密(未使用)

点击查看参考教程

文章加密

https://easyhexo.com/3-Plugins-use-and-config/3-4-hexo-blog-encrypt/#%E5%BC%80%E5%A7%8B

文章加密 npm

https://www.npmjs.com/package/hexo-blog-encrypt

文章加密 github

https://github.com/D0n9X1n/hexo-blog-encrypt

顶部加载条(弃用)

点击查看参考教程

给Butterfly加上顶部加载条

https://www.qcqx.cn/article/13d6481a.html

点击查看步骤

已经在 loading 加载动画中实现

底部备案号(弃用)

点击查看参考教程

【hexo】butterfly主题添加备案信息

https://cloud.tencent.com/developer/article/2285800?areaSource=102001.17&traceId=isNC_P2k9orVGQwmldEvn

点击查看步骤

在页脚徽标中实现

改为使用页脚徽标后，同样在 footer.pug 中修改，参考本文的页脚徽标部分

顶部天气小组件(弃用)

点击查看参考教程

Hexo在顶部增加天气小部件

https://cnhuazhu.top/butterfly/2021/02/24/Hexo%E9%AD%94%E6%94%B9/Hexo%E5%9C%A8%E9%A1%B6%E9%83%A8%E5%A2%9E%E5%8A%A0%E5%A4%A9%E6%B0%94%E5%B0%8F%E9%83%A8%E4%BB%B6/

点击查看步骤

发现只会在页面初次加载中生成，可能和修改了导航栏有关，遂弃用，改用侧边栏的天气卡片

前往和风天气开发平台，创建天气简约插件，调整好样式后，点击最下面的生成代码，这里需要登录或者注册账号

在 \themes\butterfly\source\js 下创建 weather.js 文件，将生成的代码粘贴进去

// 本小站的插件样式代码
WIDGET = {
  "CONFIG": {
    "modules": "201",//改变显示顺序的012是温度、城市、图标  
    "background": "5",
    "tmpColor": "9ecbff",
    "tmpSize": "17",
    "cityColor": "9ecbff",
    "citySize": "17",
    "aqiColor": "9ecbff",
    "aqiSize": "17",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "14px 10px 10px 10px",
    "shadow": "1",
    "language": "zh",
    "borderRadius": "10",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "..." // 此处需要填写自己的和风天气 key
  }
}

在主题配置文件 _config.butterfly.yml 中的 inject 的 bottom 中引入 weather.js 文件

- <script async src="/js/weather.js"></script>  # 天气插件
- <script async src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>  # 天气插件官方js

在 themes\butterfly\layout\includes\header 文件夹下的 nav.pug 文件中添加天气插件的位置

nav#nav
  span#blog-info
    a(href=url_for('/') title=config.title)
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo))
      if theme.nav.display_title
        span.site-name=config.title
+  #he-plugin-simple
  #menus