ButterFly 主题美化日记

本文记录了本站博客主题 ButterFly 全部的美化教程

点击查看更新记录

添加 Cherry 樱花雨背景特效

站内教程索引：

添加 Cherry 樱花雨背景特效

/post/736f6468.html/

引入 Iconfont 阿里图标矢量库

站内教程索引：

引入 Iconfont 阿里图标矢量库

/post/3ab4ab8f.html/

站内教程索引：

使用 Shields.io 美化 Footer

/post/623e5e60.html/

站内教程索引：

Menu 添加 Iconfont 多彩图标

/post/a543f113.html/

自定义 Loading 黏性加载动画

站内教程索引：

自定义 Loading 黏性加载动画

/post/acd421de.html/

标签 Tag 右上角添加章数

点击查看教程

修改 [Blogroot]\themes\butterfly\scripts\helpers\page.js,在约第 52 行处:

source.forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
    style += ` color: ${color}`
-    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
  })

引入 Aplayer 音乐播放器

站内教程索引：

引入 Aplayer 音乐播放器

/post/c94d89e8.html/

Twikoo 评论块气泡风格魔改美化

点击查看教程

新建 [Blogroot]\themes\butterfly\source\css\_cyan\twikoo.styl

// 评论样式美化
.tk-comments{
  // 评论框高度
  .tk-submit{
    background: var(--cyan-card-bg);
    border-radius: 8px;
    padding: 20px 20px 10px;
    .el-textarea__inner{
      height: 100px !important
    }
  }
  .tk-comments-container{
    margin-top: 20px;
    .tk-comments-title{
      margin-bottom: 0
    }
    & > .tk-comment{
      position: relative;
      &::before{
        position: absolute;
        content: '';
        border-bottom: var(--cyan-border-dashed);
        left: 0;
        bottom: -0.5rem;
        width: 100%;
      }
    }
  }
  // 评论内容
  .tk-comment {
    background: var(--cyan-card-bg);
    border-radius: 8px;
    padding: 10px;
    .tk-avatar{
      margin-top: 2.3rem;
    }
    .tk-main {
      .tk-row {
        justify-content: flex-start
        .tk-action{
          &-link{
            cursor: pointer
            color: var(--cyan-theme-color)
          }
          .tk-action-icon{
            color: var(--cyan-theme-color)
          }
        }
        .tk-actions{
          margin-left: 0;
          cursor: pointer
        }
        .tk-meta{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .tk-tag{
            border-radius: 4px !important;
          }
        }
      }
      .tk-content{
        position: relative;
        border: var(--cyan-border)
        border-radius: 8px;
        padding: 10px 20px;
        overflow: inherit;
        &::before,&::after{
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          top: 10px;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: var(--cyan-border)
        }
        &::before{
          left: -10px;
          border-right-width: 10px;
        }
        &::after{
          left: -8px
          border-right-width: 10px;
          border-right-color: var(--cyan-card-bg);
        }
        pre{
          word-wrap: break-word;
          white-space: pre-wrap;
        }
      }
      .tk-extras {
        .tk-extra{
          padding: 4px 12px 4px 8px;
          border: var(--cyan-border);
          border-radius: 6px;
          margin-right: 0.4rem
        }
      }
      .tk-expand{
        border: var(--cyan-border);
        transition: .35s all;
        border-radius: 6px;
        &:hover{  
          color:var(--cyan-white);
          background: var(--cyan-theme-color)
        }
      }
      .tk-replies{
        .tk-comment{
          &.tk-master{
            flex-direction: row-reverse;
            justify-content: flex-start;
            padding-right: 0;
            padding-left: 0
            .tk-row {
              justify-content: flex-start
              flex-direction: row-reverse;
            }
            .tk-meta{
              display: flex;
              flex-direction: row-reverse;
              gap: 5px;
              margin-left: 0.5em
            }
            .tk-content{
              &::before,&::after{
                border-left: var(--cyan-border);
                border-right: none;
              }
              &::before{
                left: auto;
                right: -10px;
                border-left-width: 10px;
              }
              &::after{
                left: auto;
                right: -8px;
                border-left-width: 10px;
                border-left-color: var(--cyan-card-bg);
              }
            }
            .tk-avatar{
              width: 2.5rem;
              height: 2.5rem
              margin-right: 0;
              margin-left: 1rem
              .tk-avatar-img{
                width: 2.5rem;
                height: 2.5rem
              }
            }
          }
        }
      }
    }
  }
}

修改 [Blogroot]\themes\butterfly\source\css\index.styl

1
2
3

@import '_tags/*'
@import '_mode/*'
+     @import '_cyan/*';

可以在此基础上根据个人风格调整。

使用 Hexo-abbrlink 生成唯一文章链接

站内教程索引：

使用 Hexo-abbrlink 生成唯一文章链接

/post/8acce9aa.html/

留言板爱心❤️ 信封✉️ 动画

站内教程索引：

留言板爱心❤️ 信封✉️ 动画

/post/442df491.html/

站内教程索引：

Friend Link 友链样式魔改

/post/35d76de1.html/

引入 Wow.js Animation 动画

站内教程索引：

引入 Wow.js Animation 动画

/post/b380412b.html/

侧边栏归档样式修改

点击查看教程

新建 [Blogroot]\themes\butterfly\source\css\custom\index.css:

/* 侧边栏分类 */
#aside-content .card-archives ul.card-archive-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

li.card-archive-list-item {
  width: 100%;
  flex: 0 0 48%;
}

span.card-archive-list-count {
  width: auto;
  text-align: left;
  font-size: 1.2rem;
  line-height: .9;
  font-weight: 700;
}

span.card-archive-list-count-unit {
  width: auto;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}

#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a {
  border-radius: 8px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  align-content: space-between;
  border: 1px solid var(--cyan-theme-color);
}

#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a:hover {
  background-color: var(--cyan-theme-color);
  color: #fff;
}