butterfly魔改合集

本网页迄今为止所有魔改部分的合集

以后都集中在这篇文章，免得翻来翻去麻烦

首页卡片分类栏

点击查看

今天搞了一个首页分类栏，用的店长大佬的插件，参考这篇文章，效果如图

image-20221212165742261

开始！

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

1
npm install hexo-butterfly-categories-card --save

添加配置信息，以下为写法示例
在站点配置文件_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://npm.elemecdn.com/akilar-candyassets/image/cover1.webp
    - descr: 玩转Win10
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover2.webp
    - descr: 长篇小说连载
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover3.webp
    - descr: 个人日记
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover4.webp
    - descr: 诗词歌赋
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover5.webp
    - descr: 杂谈教程
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover6.webp
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

参数释义

参数备选值/类型释义
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链接后自主修改

完成啦，店长太强啦！

改动

在店长的基础上，做了一些css上的改动，使得看起来更流畅

具体改动参考https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/categorybar.css

除了css，还关掉了pjax的跳转，修改[Blogroot]\node_modules\hexo-butterfly-categories-card\lib\html.pug

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
- var prow = 190 * row + 'px'
- var mrow = 160 * row + 'px'

if (column === 'odd')
  style.
    li.categoryBar-list-item{width:32.3%;}.categoryBar-list{max-height: #{prow};overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: #{mrow};}}
else if (column === 'even')
  style.
    li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: #{prow};overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: #{mrow};}}
.recent-post-item(style='height:auto;width:100%;padding:0px;')
  #categoryBar
    ul.categoryBar-list
      if pjaxenable
        each cl in categories_list
          li.categoryBar-list-item(style=`background:url(` + cl.cover + `);`)  
            a.categoryBar-list-link(onclick=`pjax.loadUrl("` + cl.path + `");` href='javascript:void(0);'  )= cl.name
            span.categoryBar-list-count= cl.length
            span.categoryBar-list-descr= cl.descr
      else
        each cl in categories_list
          li.categoryBar-list-item(style=`background:url(` + cl.cover + `);`)  
            a.categoryBar-list-link(href=cl.path)= cl.name
            span.categoryBar-list-count= cl.length
            span.categoryBar-list-descr= cl.descr

修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- var prow = 190 * row + 'px'
- var mrow = 160 * row + 'px'

if (column === 'odd')
  style.
    li.categoryBar-list-item{width:32.3%;}.categoryBar-list{max-height: #{prow};overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: #{mrow};}}
else if (column === 'even')
  style.
    li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: #{prow};overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: #{mrow};}}
.recent-post-item(style='height:auto;width:100%;padding:0px;')
  #categoryBar
    ul.categoryBar-list
      each cl in categories_list
        li.categoryBar-list-item(style=`background:url(` + cl.cover + `);`)  
          a.categoryBar-list-link(href=cl.path)= cl.name
          span.categoryBar-list-count= cl.length
          span.categoryBar-list-descr= cl.descr

首页置顶滚动栏

点击查看

用的还是店长大佬的插件，参考这篇文章，效果如图

image-20221212170114108

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

1
npm install hexo-butterfly-swiper --save

添加配置信息，以下为写法示例
在站点配置文件_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初始化方法
参数备选值/类型释义
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 #置顶轮播图顺序，非负整数，数字越大越靠前
---

完成啦，店长太强啦！

改动

把pjax的功能给关了，找到[Blogroot]\node_modules\hexo-butterfly-swiper\index.js第33行

1
2
3
// 集体声明配置项
  const data = {
    pjaxenable: hexo.theme.config.pjax.enable,

改为

1
2
3
// 集体声明配置项
  const data = {
    pjaxenable: false,

文章自定义背景图

点击查看

在实现一图流之后，每个文章页面都没有了封面，并且都是一样的背景页，实在有点难看

于是参考了店长大人的文章来实现每次在写作时通过font-matter自定义文章背景图的效果

记录一下修改的代码和过程，免得出bug不好恢复

开始！

修改[Blogroot]\themes\butterfly\layout\includes\layout.pug,

1
2
3
4
5
6
7
8
if theme.background
  if page.background
    #web_bg(style=`background:rgb(0 0 0 / 40%) url(`+ page.background + `);background-blend-mode: darken;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
  else
    if page.cover
      #web_bg(style=`background:rgb(0 0 0 / 40%) url(`+ page.cover + `);background-blend-mode: darken;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
    else 
      #web_bg

这段代码的逻辑是如果文章设置了background标签，则设置背景为background标签的值(url)，

否则，检查文章是否设置了cover标签，则设置背景为cover标签的值(url)，

如果都没有，则设置成默认背景(与首页保持一致)。

这样，我们在每次写文章时候，可以设置background的值为想要的背景图，比如

1
2
3
4
5
title: butterfly自定义文章背景
tags: hexo建站教程
categories: 技术相关
cover:
background: 'https://zoulicheng.oss-cn-shanghai.aliyuncs.com/img/arknights.jpg'

有时候文章设置了封面但是不想用封面做背景图，比如

1
2
3
4
5
title: 蓝莲花-许巍
tags: 关于吉他我知道的不多
categories: 生活相关
cover: https://zoulicheng.oss-cn-shanghai.aliyuncs.com/ScreShot/蓝莲花.png
background: https://zoulicheng.oss-cn-shanghai.aliyuncs.com/img/arknights.jpg

那么封面和背景会优先为background的值

pjax设置

为了实现期望的效果，这里还要再把#web_bg加到pjax选择器中。
修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug

1
2
3
4
5
6
7
8
9
10
11
script(src=url_for(theme.CDN.pjax))
script.
  let pjaxSelectors = [
    'title',
    '#config-diff',
    '#body-wrap',
    '#rightside-config-hide',
    '#rightside-config-show',
    '#web_bg',
    '.js-pjax'
  ]

文章页面顶部标题

点击查看

文章顶部标题太白了不好看，改成黑色加粗

修改前

image-20221201164643284

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

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
// 已修改 post-info文章头部大标题
#post-info
  .post-title
    @extend .limit-more-line
    margin-bottom: 8px
    font-weight: bold;
    color: #000000; //修改颜色
    font-weight: normal
    font-size: 4.5em
    line-height: 1.5
    -webkit-line-clamp: 3

    +maxWidth768()
      font-size: 2.1em

    .post-edit-link
      padding-left: 10px

  #post-meta
    color: #000000 //修改颜色
    font-size: 120% //修改大小

    +minWidth768()
      > .meta-secondline
        > span:first-child
          display: none

    +maxWidth768()
      font-size: 90%

      > .meta-firstline,
      > .meta-secondline
        display: inline

    .post-meta
      &-separator
        margin: 0 5px

      &-icon
        margin-right: 4px

      &-label
        if hexo-config('post_meta.post.label')
          margin-right: 4px
        else
          display: none

    a
      color: #000000; //修改颜色
      transition: all .3s ease-out

      &:hover
        color: #b9b9b9 //修改颜色
        text-decoration: underline

    if hexo-config('post_meta.post.date_format') == 'relative'
      time
        display: none

修改后

image-20221201172522290

变大变粗！

感觉还是不够清晰，等找到新字体再进一步修改

twikoo评论美化

点击查看

给twikoo评论区加了一个输入提醒，在昵称提示输入QQ号信息

参考的Leonus大佬的文章

效果预览

image-20221125232940872

image-20221125233005036

开始！

在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
/* 评论区美化 输入提醒 */
/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
  content: '输入QQ号会自动获取昵称和头像';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
  content: '收到回复将会发送到您的邮箱';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(4):before {
  content: '可以通过昵称访问您的网站';
}

/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
  display: block;
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
  /* 先隐藏起来 */
  display: none;
  /* 绝对定位 */
  position: absolute;
  /* 向上移动60像素 */
  top: -60px;
  /* 文字强制不换行，防止left:50%导致的文字换行 */
  white-space: nowrap;
  /* 圆角 */
  border-radius: 10px;
  /* 距离左边50% */
  left: 50%;
  /* 然后再向左边挪动自身的一半，即可实现居中 */
  transform: translate(-50%);
  /* 填充 */
  padding: 14px 18px;
  background: #444;
  color: #fff;
  z-index:100;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
  display: none;
  content: '';
  position: absolute;
  /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
  我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
  border: 12px solid transparent;
  border-top-color: #444;
  left: 50%;
  transform: translate(-50%, -48px);
}
/* 输入提醒结束 */

就是这么简单！

twikoo评论移动端适配

点击查看

我们在使用手机访问自己的网站时候，评论区的默认样式是这样的

QQ图片20221203233146

都挤在一起了根本没法看！

于是开始自己改造移动端评论区样式

最终效果

QQ图片20221203233318

但是这个按钮实在不知道怎么自适应高度，有没有大佬能教教我

上代码！在自定义的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
/* 移动端适配评论 */
@media screen and (max-width: 768px){
  .el-input.el-input--small.el-input-group.el-input-group--prepend{
      width: auto;
      height: auto;
      flex-direction: column;
      margin-left: 0 !important;
      margin-top: 0.5rem;
  }
  
  .tk-meta-input{
    flex-direction: column;
    position: relative;
  }

  
  .el-button.tk-send.el-button--primary.el-button--small{
    border-radius: 13px !important;
    height: 91px;
    width: 70px;
    margin-top: 0 !important;
  }
  }
  /* 移动端适配评论结束 */

结束！访问手机端看效果。

安知鱼同款loading动画

点击查看

抄的安知鱼大佬的~~抄的洪哥的~~loading动画，在此记录一下魔改流程，免得以后出bug不好恢复

效果预览

image-20221212230321243

loading动画，开始！

将themes/butterfly/source/css/_layout/loading.styl替换为以下代码，其中颜色代码注意换成自己的。

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
if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #979797;
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #f7f9fe;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

替换themes/butterfly/layout/includes/loading/loading.pug, 其中图片注意换成自己的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    div.loading-img
    .loading-image-dot

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

在合适的地方加上自定义 css, 其中 background 的 url 即为 loading 的图片地址。我的是custom.css

1
2
3
4
.loading-img {
  background: url(https://zoulicheng.oss-cn-shanghai.aliyuncs.com/img/quin.jpg) no-repeat center center;
  background-size: cover;
}

加入顶部加载条

同样参考的一个大佬的博客

引入 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
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
/* 顶部进度条 */
.pace {
  pointer-events: none;
  user-select: none;
  z-index: 2;
  position: fixed;
  margin: auto;
  top: 4px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 6rem;
  background: #eaecf2;
  overflow: hidden;
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: 0.3s ease-in;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}

.pace .pace-progress {
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  position: fixed;
  z-index: 2;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #49b1f5;
  background: linear-gradient(
    to right,
    rgb(18, 194, 233),
    rgb(196, 113, 237),
    rgb(246, 79, 89)
  );
  animation: gradient 2s ease infinite;
  background-size: 200%;
}
/* 顶部进度条 */

引入 JS（inject注入）

1
<script src="https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/pace.min.js"></script>

网站左下角音乐播放器

点击查看

参考这个视频，目前正在探索如何魔改中

首页动态分类栏(heo大佬版本)

点击查看

抄的洪哥的动态分类栏，在此记录一下魔改流程，免得以后出bug不好恢复

效果

image-20221123200047320

image-20221123200115814

开始！

新建文件：themes/butterfly/layout/includes/categoryBar.pug

1
2
3
4
5
6
7
8
9
#category-bar
    .category-bar-items#category-bar-items
        .category-bar-item(id='首页')
            a(href="/") 首页
        .category-bar-item(id='技术相关')
            a(href="/categories/技术相关/") 技术相关
        .category-bar-item(id='生活相关')
            a(href="/categories/生活相关/") 生活相关
    a.category-bar-more(href="/categories/") 更多

我们需要在首页和分类的页面引用我们的分类条

编辑themes/butterfly/layout/index.pug

在+postUI上一行添加include includes/categoryBar.pug

1
2
3
4
5
6
7
8
extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    include includes/categoryBar.pug
    +postUI
    include includes/pagination.pug

我们在分类页也需要引用。

编辑themes/butterfly/layout/category.pug，在#category下方添加以下代码

1
2
3
4
5
#category
  .category-in-bar
    .category-in-bar-tips
      | 分类
    include includes/categoryBar.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
      .category-in-bar
        .category-in-bar-tips
          | 分类
        include includes/categoryBar.pug
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug

本地引入洪哥的css和js

在本地引入，方便自己改，新建一个HeoCSS.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
:root{
    --heo-white: #fff;
    --heo-black: #000;
    --heo-none: rgba(0,0,0,0);
    --heo-gray: #999999;
    --heo-yellow: #ffc93e;
    --heo-main: var(--heo-theme);
    --heo-main-op: var(--heo-theme-op);
    --heo-shadow-theme: 0 8px 12px -3px var(--heo-theme-op);
    --heo-shadow-main: 0 8px 12px -3px var(--heo-main-op);
    --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234,.20);
    --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255,.20);
    --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0,.05);
    --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62,.12);
    --heo-shadow-red: 0 8px 12px -3px #ee7d7936;
    --heo-shadow-green: 0 8px 12px -3px #87ee7936;
    --heo-logo-color: linear-gradient(215deg,#4584ff 30%,#ff7676 70%);
    --style-border: 1px solid var(--heo-card-border);
    --style-border-hover: 1px solid var(--heo-theme);
  }
  
  ::selection {
    background: var(--heo-fontcolor);
    color: var(--heo-background);
  }
  
  [data-theme=light] {
    --heo-theme: #425AEF;
    --heo-theme-op: #4259ef23;
    --heo-blue: #425AEF;
    --heo-red: #D8213C;
    --heo-pink: #FF7C7C;
    --heo-green: #57bd6a;
    --heo-fontcolor: #363636;
    --heo-background: #f7f9fe;
    --heo-reverse: #000;
    --heo-maskbg: rgba(255, 255, 255, 0.6);
    --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
    --heo-hovertext: var(--heo-theme);
    --heo-ahoverbg: #F7F7FA;
    --heo-lighttext: var(--heo-main);
    --heo-secondtext: rgba(60, 60, 67, 0.6);
    --heo-scrollbar: rgba(60, 60, 67, 0.4);
    --heo-card-btn-bg: #edf0f7;
    --heo-post-blockquote-bg: #fafcff;
    --heo-post-tabs-bg: #f2f5f8;
    --heo-secondbg: #edf0f7;
    --heo-shadow-nav:0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --heo-card-bg: #fff;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-card-border: #e3e8f7;
  }
  
  [data-theme=dark] {
    --heo-theme: #0084FF;
    --heo-theme-op: #0084FF23;
    --heo-blue: #0084FF;
    --heo-red: #FF3842;
    --heo-pink: #FF7C7C;
    --heo-green: #57bd6a;
    --heo-fontcolor: #F7F7FA;
    --heo-background: #18171d;
    --heo-reverse: #fff;
    --heo-maskbg: rgba(0,0,0, 0.6);
    --heo-maskbgdeep: rgba(0,0,0, 0.85);
    --heo-hovertext: #0A84FF;
    --heo-ahoverbg: #fff;
    --heo-lighttext: #f2b94b;
    --heo-secondtext: #a1a2b8;
    --heo-scrollbar: rgba(200, 200, 223, 0.4);
    --heo-card-btn-bg: #30343f;
    --heo-post-blockquote-bg: #000;
    --heo-post-tabs-bg: #121212;
    --heo-secondbg: #30343f;
    --heo-shadow-nav:0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --heo-card-bg: #1d1b26;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --heo-card-border: #42444a;
  }
  
  @media screen and (max-width: 768px){
    :root{
      --style-border: 0px solid var(--heo-card-border);
      --style-border-hover: 0px solid var(--heo-theme);
    }
  }
  
  /* 首页分类条展示 */
  #category-bar{
      padding: 0.2rem .5rem 0.2rem 0.5rem;
      background: var(--heo-card-bg);
      border-radius: 12px;
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-bottom: 1rem;
      border: var(--style-border);
      font-size: 20px;
    }
    
    @media screen and (max-width: 768px){
      #category-bar{
        border-radius: 0;
      }
    }
    
    #category #category-bar{
      padding: 0;
      border: none;
    }
    
    #category a.category-bar-item.select a{
      display: none;
    }
    
    .category-in-bar{
      display: flex;
      white-space: nowrap;
    }
    
    .category-in-bar-tips{
      margin-right: 1rem;
    }
    
    .category-bar-items{
      white-space: nowrap;
      overflow-x: scroll;
      display: flex;
      width: 100rem;
    }
    
    
    
    .category-bar-items::-webkit-scrollbar{
      display: none;
    }
    
    .category-bar-item a{
      padding: 0.3rem 0.5rem;
      margin: 0 0.25rem;
      font-weight: bold;
      border-radius: 12px;
      color: #363636;
    }
    
    .category-bar-item:hover a{
      background: var(--heo-main);
      color: var(--heo-white);
    }
    
    .category-bar-item.select a {
      background: var(--heo-main);
      color: var(--heo-white);
      border-radius: 12px;
    }
    
    .category-bar-more{
      margin-left: 1rem;
      margin-right: 1rem;
      font-weight: bold;
      color: #363636;
    }

HeoJS.js

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
categoriesBarActive()
topCategoriesBarScroll()

//分类条
function categoriesBarActive(){
  var urlinfo = window.location.pathname;
  urlinfo = decodeURIComponent(urlinfo)
  console.log(urlinfo);
  //判断是否是首页
  if (urlinfo == '/'){
    if (document.querySelector('#category-bar')){
      document.getElementById('首页').classList.add("select")
    }
  }else {
    // 验证是否是分类链接
    var pattern = /\/categories\/.*?\//;
    var patbool = pattern.test(urlinfo);
    console.log(patbool);
    // 获取当前的分类
    if (patbool) {
      var valuegroup = urlinfo.split("/");
      console.log(valuegroup[2]);
      // 获取当前分类
      var nowCategorie = valuegroup[2];
      if (document.querySelector('#category-bar')){
        document.getElementById(nowCategorie).classList.add("select");
      }
    }
  }
  
}

//鼠标控制横向滚动
function topCategoriesBarScroll(){
  if (document.getElementById("category-bar-items")){
    let xscroll = document.getElementById("category-bar-items");
  xscroll.addEventListener("mousewheel", function (e) {
    //计算鼠标滚轮滚动的距离
    let v = -e.wheelDelta / 2;
    xscroll.scrollLeft += v;
    //阻止浏览器默认方法
    e.preventDefault();
}, false);
  }
}

在_config.butterfly.yml文件中找到inject，插入如下代码

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/HeoCSS.css" media="defer" onload="this.media='all'">
    - <script defer src="https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/HeoJS.js"></script>
    # - <link rel="stylesheet" href="/css/custom.css" >
    # 注意href替换成自己的cdn

注意

如果你开启了pjax功能

需要额外在themes/butterfly/source/js/main.js中修改以下代码

1
2
3
4
5
6
7
8
// 初始化header
const initAdjust = () => {
  adjustMenu(true)
  $nav.classList.add('show')
  //自己加入的代码
  console.log('调用成功！')
  categoriesBarActive()
}

或者在上一步引入Heo.js时，参考如下格式

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/HeoCSS.css" media="defer" onload="this.media='all'">
    - <script async data-pjax src="https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/HeoJS.js"></script>
    # - <link rel="stylesheet" href="/css/custom.css" >
    # 注意href替换成自己的cdn

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

点击查看

本站使用了风车样式

1
2
3
4
5
6
beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"

首页双栏布局

点击查看

效果

没有图片啦啦啦啦

参考小冰大佬的文章

安装插件

1
2
3
4
5
npm i hexo-butterfly-article-double-row --save

# 或者

cnpm i hexo-butterfly-article-double-row --save

新增网站根目录_config 配置项 (不是主题的)：

1
2
butterfly_article_double_row:
  enable: true

结束，啦啦啦

未完待续。。。

点击查看

未完待续。。。

没有图片啦啦啦啦