butterfly 魔改系列（持续更新）

前置说明

感谢大佬的技术提供，给dalao们递零食✿✿ヽ(°▽°)ノ✿

HCLonely 小康 超逸 会飞的小戈

魔改预览

🎃主题升级，添加css

🍳简单快速：简单上手，快速修改。

📕优雅阅读：对卡片进行不同的透明度设置，实现更优雅的阅读。

🍭背景也面：多种背景随意更换。

👦个性友联：为你的好友设置不同的颜色，炫彩样式等

🆙Pixiv 日榜：瞒足你的渴望

✈️ 还在评论无法及时回复吗？：双系统评论，邮件通知

⏰ 添加了日历视图：在日历上可以查看到当前日历以及所写的文章日历

🎈页脚更炫酷：彩色渐变 footer 喜欢么？

🍟更多好看的等你发现

JS/CSS 如何使用

下面关于各种修改我会直接给出参考代码，你可以每做一个修改都建立一个新的 css/js 文件，也可以将所有的代码都复制到一个 css/js 文件。

JS/CSS 如何引用

此篇文章所说的一切引用（包括 css 和 js ）都可以参考这里。

1. 打开主题配置文件（butterfly.yml ）
2. 定位搜索 inject
3. 其中 head 是用来引入 css 的。bottom 是用来引入js 的。

注：以上方式 2.3.5 版本可用，其他版本请自行查找引入自定义 js 及 css 的地方

页面模板魔改

分类折叠文章

修改模板源码

1. 修改 layout/includes/widget/card_categories.pug,把下面代码覆盖已有的，不出意外是可以的，若你懂pug的话具体看自己喜欢咯！

   查看代码

   if site.categories.length
     if !theme.classify_fold.enable
       .card-widget.card-categories
           .card-content
             .item-headline
               i.fa.fa-folder-open
               span= _p('aside.card_categories')
             !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 })
   
     else
       .card-widget.card-categories
           .card-content
             .item-headline
               i.fa.fa-folder-open
               span= _p('aside.card_categories')
             ul.card-category-list
               mixin displayCategories(parent = undefined) 
                 - site.categories.find({ parent }).sort("name").each(function(category) {
                     - var childCount = site.categories.find({ parent: category._id }).count();              
                     li.card-category-list-item
                       div.card-category-list-link
                         a.card-category-list-name(href=url_for(category.path))= category.name
                         span.card-category-list-count= category.length
                         if childCount > 0
                           i.fa.fa-chevron-left(onclick="classifyclick(this)")
                         else if theme.classify_fold.post
                           i.fa.fa-chevron-left(onclick="classifyclick(this)")
                       
                     if childCount > 0
                       ul.card-category-list.child
                         +displayCategories(category._id)
                     else if theme.classify_fold.post
                       ul.card-post-list.child.card-category-list.child
                         - site.categories.findOne({name: category.name}).posts.forEach(function(post){
                           li.card-post-list-item.card-category-list-item
                             div.card-post-list-link.card-category-list-link
                               a.card-post-name(title=post.title,href=url_for(post.path))= post.title
                         - })
                 - })
   
               +displayCategories()

2. 修改 /css/_layout/aside.styl，找到开始和结束的位置把中间那部分覆盖已有的代码，注意缩进，大约 147 行开始，这个是卡片相关

   查看代码

   以上部分代码省略...
                   color: $light-blue !important
   
               &.no-aside-cover
                 .aside-post_title
                   height: auto
   大约147行，从这里开始：
   
     .card-archives ul.card-archive-list,
     .card-categories ul.card-category-list
       margin: 0
       padding: .2rem 0 0
       list-style: none
   
     .card-archives ul.card-archive-list > .card-archive-list-item,
     .card-categories ul.card-category-list > .card-category-list-item
       padding: .15rem 1rem
       transition: all .5s
   
       &:hover
         padding: .15rem .85rem
         background-color: $light-blue
   
       a
         color: $font-black
   
         span
           display: inline-block
           overflow: hidden
           vertical-align: bottom
           text-overflow: ellipsis
           white-space: nowrap
   
           &:first-child
             width: 80%
   
           &:last-child
             width: 20%
             text-align: right
   
       &.more
         span
           padding-right: .3rem
           width: auto !important
           transition: .5s
   
         &:hover
           span
             padding-right: .6rem
   
     if hexo-config('classify_fold.enable')
       .card-categories ul .card-category-list-name{
         display:inline-block;
         width: 70%
         cursor: pointer
       }
       .card-categories ul .card-category-list-count{
         display:inline-block;
         width: 20%
       }
       .card-categories ul .fa{
         display:inline-block;
         width: 10%
         cursor: pointer
       }
       .card-categories ul ul{
         display: none
       }
   
     .card-categories ul .card-post-name{
       overflow: hidden
       text-overflow: ellipsis
       white-space: nowrap
       display: block
     }
   
     .card-categories
       .card-category-list
         &.child
           padding: 0 0 0 1.2rem
   
   到这里结束
   
     .card-webinfo
       .webinfo
         padding: .2rem 1rem
   
         .webinfo-item
           display: block
   以下部分省略...

3. 适配黑暗模式，修改 source/css/_mode/darkmode.styl，约 187 行处添加以下代码

   if hexo-config('classify_fold.enable')
     .card-categories ul .card-post-name,
     .card-categories ul .card-category-list-name{
       color: alpha(#FFFFFF, .6) !important
     }

js 外挂

适配点击效果，需要增加 js 文件

查看代码

classifyclick = function(classify){
    var expan = $(classify).parent().parent().next();
    var temp = expan
    if(expan.css("display") == "none"){
        $(classify).removeClass("fa-chevron-left")
        $(classify).addClass("fa-chevron-down")
        expan.css('height', '');
        expan.css("display", "block");
        height = expan.height();
        expan.css("height", "0px");
        expan.animate({height: height + 'px'});
        while(temp.parent().hasClass("child")){
            temp.parent().animate({height: temp.parent().height() + height + 'px'})
            temp = temp.parent()
        }
    }
    else{
        $(classify).removeClass("fa-chevron-down")
        $(classify).addClass("fa-chevron-left")
        temp_classify = classify;
        height = expan.height();
        expan.animate({height: '0px'}, {complete: function() {$(temp_classify).parent().parent().next().css("display", "none");}});
        while(temp.parent().hasClass("child")){
            temp.parent().animate({height: (temp.parent().height() - height) + 'px'})
            temp = temp.parent()
        }
    }
}

增加配置

在 butterfly.yml 主题配置文件中，添加以下配置:

classify_fold: # 分类是否折叠
  enable: true # 是否开启
  post: true # 最后一层目录是文章

小康版本的分类卡片折叠

同时引入 css 和 js,注意：这是2.3.5版本的，注意其他版本可能不会适配

查看代码

css

#aside_content
.card-archives
ul.card-archive-list
> .card-archive-list-item
a
span:first-child,
#aside_content
.card-categories
ul.card-category-list
> .card-category-list-item
a
span:first-child {
    width: auto;
    min-width: 50%;
}

js

var card_category_list = document.getElementsByClassName(
    "card-category-list child"
);
var item = document.getElementsByClassName("card-category-list-item");
function toggle(t) {
    var display = t.parentElement.nextSibling.style.display;
    if (display == "none") {
        t.parentElement.nextSibling.style.display = "block";
        t.parentElement.nextSibling.style.height = "100%";
        t.className = t.className.replace("fa-chevron-up", "fa-chevron-down");
    } else {
        t.parentElement.nextSibling.style.display = "none";
        t.className = t.className.replace("fa-chevron-down", "fa-chevron-up");
    }
}

for (var i = 0; i < card_category_list.length; i++) {
    card_category_list[i].style.display = "none";
    card_category_list[i].style.transition = "all 1s";
    card_category_list[i].previousSibling.innerHTML +=
        '<i class="fa fa-chevron-up menus-expand  menus-closed" aria-hidden="true" style="margin-left:20px;" onclick="toggle(this)"></i>';
}

Pixiv 日榜

注意： https://cloud.mokeyjay.com/pixiv 使用的是超能小紫提供的服务，也可以自行搭建，搭建方式请看这里->传送门

Butterfly 主题

1. 在 themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug 文件，文件内容如下：

   .card-widget.card-pixiv
     .card-content
       .item-headline
         i.fa.fa-image(aria-hidden="true")
         span= _p('aside.card_pixiv')
       iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")

2. 编辑 themes\Butterfly\layout\includes\widget\index.pug 文件，在你想要显示的位置插入以下代码（注意要对齐还有不要有空格符）：

   if theme.aside.card_pixiv
          !=partial('includes/widget/card_pixiv', {}, {cache:theme.fragment_cache})

3. 编辑 butterfly.yml 文件，在 card_webinfo 下面添加一行 card_pixiv: true

4. 编辑 themes\Butterfly\languages\zh-CN.yml 文件 (请根据你的网站语言选择)，找到 card_announcement: 公告 , 在下面添加一行 card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

5. 如果不想显示，直接把 butterfly.yml 文件的 card_pixiv: true 改为 card_pixiv: false 即可

其他主题

将以下内容插入到需要显示的地方：

<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:100%;height:380px;margin:0;"></iframe>

文章日历

本方法只适用于 Butterfly 主题！

1. 安装 hexo-generator-calendar 插件

   npm install --save git://github.com/howiefh/hexo-generator-calendar.git

2. 下载 calendar.js 和 languages.js 文件，保存到 themes\Butterfly\source\js 目录

   • calendar.js
   • languages.js

3. 编辑 calendar.js 文件，在文件最后}(jQuery)); 之前添加:

   $(document).ready(function () {
       $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
   });

4. 编辑 butterfly.yml 文件，以下两个你 butterfly.yml

   文件里有哪个就用那个，不要都用！

   • 在 CDN_USE->js 下面添加如下内容：

     - <script src="/js/calendar.js"></script>
     - <script src="/js/languages.js"></script>

   • 在 inject->bottom 下面添加如下内容：

     - <script src="/js/calendar.js"></script>
     - <script src="/js/languages.js"></script>

5. 在 themes\Butterfly\source\css_layout新建 calendar,styl文件 ,然后复制下面代码在文件里即可:

   查看代码

   #calendar
     a
       text-decoration none
   
   .cal-head
     margin-bottom: 15px
     position relative
     height 20px
     padding 8px 6px 2px 6px
   
   .cal-prev,.cal-next
     position absolute
     top 9px
     width 16px
     height 18px
     padding 3px 4px
     border 1px solid transparent
     color #333
     outline 0
   
   .cal-prev
     left 8px
     &:before
       border-right 9px solid #333
   
   .cal-next
     right 8px
     &:before
       border-left 9px solid #333
   
   .cal-prev:before,.cal-next:before
     content ''
     display block
     width 0
     height 0
     border-top 5px solid transparent
     border-bottom 5px solid transparent
   
   .cal-title
     width 120px
     margin 0 auto
     color #333
     font bold 14px/18px Arial
     text-align center
     a
       border 1px solid transparent
       color #9f9f9f
   
   .cal,
   .cal th,
   .cal td
     border 1px solid #d1d1d1
   
   .cal
     display: table
     border-collapse separate
     border-spacing 0
     border-width 1px 0 0 1px
     table-layout fixed
     width 100%
     margin 0
     th
       background #9f9f9f
       color #fff
       border-width 0 1px 1px 0
       font-weight 700
     td
       border-width 0 1px 1px 0
     tbody
       a
         background-color #007acc
         color #fff
         display block
         font-weight 700
       .cal-today
         background-color #66ecfd
         color #fff
     .cal-gray
       color #bbb8b8
   
   [data-theme='dark'] .cal .cal-gray
     color #505050
   
   .cal th,
   .cal td
     font-weight normal
     line-height 2.5625
     padding 0
     text-align center
   
   [data-theme='dark'] .cal .cal-foot
     color #9f9f9f
   
   .cal .cal-foot
     color #2ca6cb
   
   .cal-title a:hover,
   .cal-prev:hover,
   .cal-next:hover,
   .cal .cal-foot:hover,
   .cal .cal-foot:focus,
   .cal tbody a:hover,
   .cal tbody a:focus
     background-color #686868
     color #fff
     cursor pointer

6. 在 themes\Butterfly\layout\includes\widget 文件夹新建 card_calendar.pug 文件，文件内容如下：

   .card-widget.card-calendar
     .card-content
       .item-headline
         i.far.fa-calendar-alt(aria-hidden="true")
         span= _p('aside.card_calendar')
       div.widget-wrap
       div#calendar.widget

7. 编辑 themes\Butterfly\layout\includes\widget\index.pug 文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_calendar
     include ./card_calendar.pug

8. 编辑 butterfly.yml 文件，在 card_webinfo 下面添加一行 card_calendar: true

9. 编辑 themes\Butterfly\languages\zh-CN.yml 文件 (请根据你的网站语言选择)，找到 card_announcement: 公告 , 在下面添加一行 card_calendar: 文章日历 (后面的文本可自定义)

10. 如果不想显示，直接把 butterfly.yml 文件的 card_calendar: true 改为 card_calendar: false 即可

文章统计图表

1. 安装插件

   npm install hexo-charts -S

2. 归档页面
   在主题目录/Butterfly/layout/archive.pug文件的#archive下面添加一行#posts-chart, 新添加的比上一行多缩进两个空格

   block content
     include ./includes/mixins/article-sort.pug
     #archive
       #posts-chart

3. 标签和分类页
   编辑主题目录/Butterfly/layout/page.pug文件，在.tag-cloud下面添加一行#tags-chart，在.category-content下面添加一行#categories-chart，新添加的比上一行多缩进两个空格。

   block content
     if page.type === 'tags'
       .tag-cloud
         #tags-chart

   else if page.type === 'categories'
     .category-content
       #categories-chart

4. 此功能参考自懒人大佬

页脚跳动的心

Butterfly 主题

1. 编辑博客根目录 themes/Butterfly/layout/includes/footer.pug 文件，找到下面的代码：

   .copyright!= `©${theme.since} - ${nowYear} By ${config.author}`

   将其改为下面的代码：

   ©${theme.since} - ${nowYear + ' '}跳动的心 ${config.author}

   将跳动的心替换为下面的代码：

   <i id="heartbeat" class="fa fas fa-heartbeat"></i>

2. 编辑 butterfly.yml 文件，以下两个你 butterfly.yml

   文件里有哪个就用那个，不要都用！

   • 在 CDN_USE->css 下面添加如下内容：

     - https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css

   • 在 inject->head 下面添加如下内容：

     - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

其他主题

1. 将 添加到需要显示的位置

   <i id="heartbeat" class="fa fas fa-heartbeat"></i>

2. 将以下内容添加到 标签内：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

   说明：你也可以自己cdn引用源码，看自己情况吧！

页脚显示网站运行时间

编辑博客根目录/themes/Butterfly/layout/includes/footer.pug 文件，在最后 span=theme.ICP.text 下一行添加以下内容：

#running-time
  script.
    setInterval(()=>{let create_time=Math.round(new Date(Date.UTC(2020,01,03,0,0,0)).getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);

注意 #running-time与上面的if theme.ICP.enable 对齐！要将 Date.UTC (2020,01,03,0,0,0) 改为你网站的起始时间！

其他主题

将以下内容添加到需要显示的位置

<div id="running-time"></div>
<script>setInterval(()=>{let create_time=Math.round(new Date(Date.UTC(2020,01,03,0,0,0)).getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);</script>

随机文章跳转

1. 在博客根目录/scripts(没有请自行创建) 下新建 random.js 文件，内容如下：

   hexo.extend.generator.register('random', function (locals) {
     const config = hexo.config.random || {}
     const posts = []
     for (const post of locals.posts.data) {
       if (post.random !== false) posts.push(post.path)
     }
     return {
       path: config.path || 'random/index.html',
       data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`
     }
   })

   打开 /random/ 就会随机跳转一篇文章

2. 可选配置,可以在_config.yml 添加以下配置：

   可以在_config.yml 添加以下配置：

   若不想随机跳转到某篇文章，那就在这篇文章 Front-matter 添加 random: false

友链样式美化

1. 将themes/Butterfly/layout/flink.pug 原本的文件内容删去，直接负责替换如下内容：

   查看代码

   2.3.5版本

   #page
     .flink#article-container
       each i in site.data.link
         h2= i.class_name
         h4= i.cdescr
         .post-cards
           .md-links
             each item in i.link_list
               .md-links-item(style= item.color ? `--primary-color:${item.color};border-width:${item.width};border-style:${item.style};animation: ${item.custom} ${item.time} infinite alternate; background:${item.background}` : 'border-width:0px;border-style:solid;animation: link_custom 0s infinite alternate;background:0')
                 a.customcolor(href=item.link  title=item.name target="_blank" rel=item.remove ? "external nofollow" : "" style=item.namecolor ? `--namecolor:${item.namecolor}` : '')
                   if theme.lazyload.enable
                     img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name,style=item.rotate ? `--primary-rotate:${item.rotate};--autotime:${item.autotime};` : '--primary-rotate:0deg' class=item.autorotate ? `${item.autorotate}` : '')
                   else
                     img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
                   .md-links-title= item.name 
                   .md-links-des= item.descr
       != page.content
     if page.comments !== false
       include includes/comments/index.pug

   3.0版本

   #page
     .flink#article-container
       if site.data.link
         each i in site.data.link
           if i.class_name
             h2!= i.class_name
             h4= i.class_descr
           if i.class_desc
             .flink-desc!=i.class_desc
           .flink-list
             each item in i.link_list
               .flink-list-item(style= item.color ? `--primary-color:${item.color};border-width:${item.width};border-style:${item.style};animation: ${item.custom} ${item.time} infinite alternate; background:${item.background}` : 'border-width:0px;border-style:solid;animation: link_custom 0s infinite alternate;background:0')
                 a(href=url_for(item.link)  title=item.name target="_blank" rel=item.remove ? "external nofollow" : "" style=item.namecolor ? `--namecolor:${item.namecolor}` : '')
                   if theme.lazyload.enable
                     img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ,style=item.rotate ? `--primary-rotate:${item.rotate};--autotime:${item.autotime};` : '--primary-rotate:0deg' class=item.autorotate ? `${item.autorotate}` : '')
                   else
                     img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                   .flink-item-name= item.name 
                   .flink-item-desc= item.descr
       != page.content
     if page.comments !== false
       include includes/comments/index.pug

2. 在主题配置文件 source/_data/butterfly.yml 添加如下样式

   # 友链接样式
   - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/chuchendjs/cdn/css/friendlink.css">

3. link.yml 如何引入

   查看代码

   class_test:
     class_name: class名
     cdescr: 小字描述支持html标签
     link_list:
       name: 初辰博客
       link: https://chuchendjs.github.io
       avatar: https://cdn.jsdelivr.net/gh/picgo/picgo/bt-sonny.jpg
       descr: 更多效果自行搭配
       # 边框大小 默认为0 
       width: 0px
       # 边框样式 默认 solid
       style: solid
       # 边框颜色 默认淡蓝色 #49b1f5
       color: "#0078e7"
       # 自动旋转 可选值 flash（闪现） link_custom（单色呼吸灯） link_custom1（彩色呼吸灯）
       custom: link_custom1
       # 动画时长设定，默认为0
       time: 4s
       # name的颜色
       namecolor: "#ff9191"
       # descr的颜色
       descolor: "#ff9191"
       # 背景颜色
       background: 0
       # 鼠标悬停旋转角度
       rotate: 360deg
       # 自动旋转 latuo左旋转 rauto右旋转
       autorotate: "lauto"
       # 旋转的周期（时长）
       autotime: 2s
       #移除此链接的权重 0为否 非0为移除
       remove: 0

全局添加吸底音乐APlayer

传送门： 全局添加吸底音乐APlayer

视觉美观

背景

开启需关闭背景图片设置，为不影响美观，建议关闭 js 动态背景。（butterfly.yml->主题的 background 请设置’#efefef’）

移动端优化

/*移动端优化：去除归档、标签、最新文章、公告d等，只保留网站统计*/

@media screen and (max-width: 800px) {
    #aside_content div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

去掉 Banner 图

通过几行 JS 即可实现：

var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
  full_page[0].style.background = "transparent";
}

鼠标样式

将以下代码复制到你所创建的 css 文件即可。

body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

代码解读 你也可以将上面的代码替换你喜欢的鼠标样式即可

鼠标 * 字跟随样式

这个是js实现的效果，可以全局引入，这样就会在整个博客都有这种效果。当然也可以只在某个文章引入。

亲测：全局引入会让整个页面加载起来变慢，所以建议在某个页面单独引入。

1. 全局引入：在butterfly.yml 配置文件

   https://cdn.jsdelivr.net/gh/chuchendjs/HBJC@master/js/mouse_snow.min.js

2. 只在部分文章引入
   将下边内容复制到 markdown 即可。注意：如果你的编辑器为你转化成了代码块，请删掉代码块。因为这是一个 HTML 标签

   <script src='https://cdn.jsdelivr.net/gh/chuchendjs/HBJC@master/js/mouse_snow.min.js'></script>

页脚渐变

可以自己创建css文件在配置文件引入即可

查看代码

/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}
#footer {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#footer:before {
    background-color: rgba(0, 0, 0, 0);
}

滚动条

将以下代码复制到你所创建的 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;
}

手机侧边栏默认不展开

var mobile_sidebar_menus = document.getElementById("mobile-sidebar-menus");
var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
    "menus_item_child"
);
var menus_expand = mobile_sidebar_menus.getElementsByClassName("menus-expand");
for (var i = 0; i < menus_item_child.length; i++) {
    menus_item_child[i].style.display = "none";
    menus_expand[i].className += " menus-closed";
}

阅读模式的背景与字体

阅读模式下会给 body 加一个 class 名

.read-mode{
    /* 字体大小 */
    font-size:17px;
    /* 可以在这里引入自定义字体，具体方法请自行百度css引入字体 */
}
.read-mode #web_bg{
    /* 背景颜色 */
    background:#fdf6e3;
}

mac代码框美化

将 butterfly.yml 的 highlight_theme 配置项改为 mac 后引入下方一个 css 即可

#article-container figure.highlight,
#article-container pre {
    color: #aaa8a3;
    background: #f3f3f3    /*中间代码的背景颜色*/
}

#article-container figure.highlight .highlight-tools {
    color: #e9b125;
    background: #eee
}

#article-container figure.highlight .gutter pre {
    color: hsla(30, 1%, 74%, 0.952);
    background: #f3f3f3
}

#article-container figure.highlight figcaption a {
    color: #f3f3f3 !important
}

移动端优化

移动端优化：去除归档、标签、最新文章、公告等，只保留网站统计

/*移动端优化：去除归档、标签、最新文章、公告等，只保留网站统计*/

@media screen and (max-width: 800px) {
    #aside_content div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

搞笑标题

这里添加的js可能不太友好，自己衡量吧！

加入下面的js即可：

var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/favicon.ico");
        document.title = 'ヽ(●-`Д´-)ノ怎么消失里呢';
        clearTimeout(titleTime);
    } else {
        $('[rel="icon"]').attr('href', "/img/favicon.ico");
        document.title = 'ヾ(Ő∀Ő3)ノ哇，又好啦！' + OriginTitle;
        titleTime = setTimeout(function() {
            document.title = OriginTitle;
        }, 2000);
    }
});

添加top背景视频

此处添加js即可生效，不过会拖慢网站，所以不建议添加，这里给出只是给喜欢的同学添加好吧！

查看代码

//判断移动端设备
browserRedirect();

function browserRedirect() {
   var sUserAgent = navigator.userAgent.toLowerCase();
   var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
   var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
   var bIsMidp = sUserAgent.match(/midp/i) == "midp";
   var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
   var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
   var bIsAndroid = sUserAgent.match(/android/i) == "android";
   var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
   var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
   if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
       var html = "<video loop autoplay style='height: 100%;width: 100%;object-fit: cover;'><source src='你的视频地址'></source></video>";
       /*添加video*/
       document.getElementById("nav").innerHTML += html;

       /*打字效果*/
       var subtitle = document.getElementById('subtitle')
       var i = 0;

       function typing() {
           var timer = 0;
           var str = '加油！欧力给！';
           if (i <= str.length) {
               subtitle.innerHTML = str.slice(0, i++)
               timer = setTimeout(typing, 300)

           } else {
               subtitle.innerHTML = str
               clearTimeout(timer)
           }
       }

       typing()
   }
}

任意元素添加动图

理论上给任意 DOM 元素添加的是ok的，引入一个 css 库即可使用,链接这里直接给出https://cdn.jsdelivr.net/gh/chuchendjs/HBJC@master/css/font-awesome-animation.min.css，具体实现请看这里：动图

背景设置页

实现此功能需要同时引入css,js

1. js代码如下：

   查看代码

   // 获取标签
   // 全局背景div
   var web_bg = document.getElementById("web_bg");
   // 公共父级
   var content_inner = document.getElementById("content-inner");
   // 获取Cookies
   // 透明度
   var opacity = Cookies.get("opacity");
   // 背景
   var bg = Cookies.get("bg");
   // 动画
   var animation = Cookies.get("animation");
   // 背景类型
   var type = Cookies.get("type");
   // 声明遍历 用于记录当前color
   // 设置背景
   if (bg) {
     web_bg.style.background = bg;
     web_bg.setAttribute("data-type", type);
     if (animation) {
       web_bg.style.animation = animation;
     }
   }
   function setColor(opacity) {
     // style="--light_bg_color: rgb(255, 255, 255,.3);--dark_bg_color: rgba(18,18,18,.2);"
     var light_bg_color = "--light_bg_color: rgb(255, 255, 255," + opacity + ");";
     var dark_bg_color = "--dark_bg_color: rgba(18,18,18," + opacity + ");";
     content_inner.setAttribute("style", light_bg_color + dark_bg_color);
   }
   setColor(opacity);

2. css代码：

   查看代码

   #aside_content .card-widget,#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
       background: var(--light_bg_color)
   }
   
   [data-theme=dark] #nav,[data-theme=dark] .layout_page>div:first-child:not(.recent-posts),[data-theme=dark] .layout_post>#post {
       background-color: var(--dark_bg_color)
   }

3. 将以上 js 与 css 全部引入后，新建一个页面。然后在其 index.md 中（正文部分）写入以下：

   查看代码

   <style>@keyframes gradientBG{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100% {background-position: 0% 50%;}}#rightside{display:none;}</style>
   
   > 这个页面是用来测试渐变背景的效果，以及不同透明度的效果。如果你有能力可以直接看 css 样式。否则请返回[Hexo 博客之 butterfly 主题优化更换背景](https://www.antmoe.com/posts/7198453/index.html#附录)复制代码。
   > 阅读体验及个标签样式请自己进行调整。
   
   ## 透明度调节
   
   <center style='margin-bottom:20px' id = 'opt'><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0">透明度0</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.1">透明度0.1</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.2">透明度0.2</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.3">透明度0.3</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.4">透明度0.4</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.5">透明度0.5</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.6">透明度0.6</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.7">透明度0.7</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.8">透明度0.8</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.9">透明度0.9</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="1">透明度1</a></center>
   
   ## 背景调节
   
   <div id='demo_style' style='text-align:center;margin:0 auto;'>
   
   
   ### 渐变类
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: url(&quot;https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png&quot;),linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;margin-bottom:5px;cursor: pointer;">粉蓝色有图片</div>
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;cursor: pointer;">粉蓝色无图片</div>
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);text-align: center;line-height: 200px;cursor: pointer;">美美哒渐变</div>
   
   <div data-type="color" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(90deg,rgba(247,149,51,.1) 0,rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1) 100%);text-align: center;line-height: 200px;cursor: pointer;">博主同款</div>
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);    background-size: 400% 400%;animation: gradientBG 15s ease infinite;text-align: center;line-height: 200px;cursor: pointer;">动态渐变</div>
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);text-align: center;line-height: 200px;cursor: pointer;">紫蓝色渐变</div>
   
   ### 渐变加图片类
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url(https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png),url(https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg)0% 0% / cover;text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">紫蓝色渐变</div>
   
   ### 图片类
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/tool/bing/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">必应壁纸</div>
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元图</div>
   
   <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgblogbg/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元背景图</div>
   
   </div>
   
   ## 测试文章
   
   ### 春
   
   盼望着，盼望着，东风来了，春天的脚步近了。
   
   一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。
   
   小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
   
   桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
   
   “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
   
   雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片这安静而和平的夜。乡下去，小路上，石桥边，撑起伞慢慢走着的人;还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。
   
   天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去，“一年之计在于春”;刚起头儿，有的是工夫，有的是希望。
   
   春天像刚落地的娃娃，从头到脚都是新的，它生长着。
   
   春天像小姑娘，花枝招展的，笑着，走着。
   
   春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。
   
   {% note default icon %}
   default
   {% endnote %}
   
   {% note primary icon %}
   primary
   {% endnote %}
   
   {% note success icon %}
   success
   {% endnote %}
   
   {% note info icon %}
   info
   {% endnote %}
   
   {% note warning icon %}
   warning
   {% endnote %}
   
   {% note danger icon %}
   danger
   {% endnote %}
   
   {% note primary no-icon%}
   
   #### Primary Header**Welcome** to [Hexo!](https://hexo.io)
   
   {% endnote %}
   
   
   <script>var article_container=document.getElementById("demo_style"),opt=document.getElementById("opt");article_container.addEventListener("click",function(e){var t=e.target;"DIV"===t.nodeName&&"bg_test"===t.className&&(web_bg.style.background=t.style.background,web_bg.style.animation=t.style.animation),Cookies.set("bg",t.style.background,{expires:1}),Cookies.set("animation",t.style.animation,{expires:1}),Cookies.set("type",t.getAttribute("data-type"),{expires:1})}),opt.addEventListener("click",function(e){var t=e.target;if("A"===t.nodeName){var a=t.getAttribute("data-opacity");if(a){Cookies.set("opacity",a,{expires:1});var n="--light_bg_color: rgb(255, 255, 255,"+a+");",i="--dark_bg_color: rgba(18,18,18,"+a+");";document.getElementById("content-inner").setAttribute("style",n+i)}}e.preventDefault()});</script>

评论修改

valine 评论小标签以及邮件通知

评论添加博主，小伙伴，访客标签以及评论邮件通知：可以参考我的这篇文章:valine 评论
也可以参考HCLonely Blog 的修改教程

双系统评论支持

1. 修改 pug 模板，位置：\themes\Butterfly\layout\includes\comments\index.pug
   修改内容：将所有的 else if 改为 if。
2. 添加 JS 代码，将以下代码复制到你自己创建的 JS 文件中。

   查看代码

   function switchComment() {
     const t =
         "切换为Gitalk" === $("#switch-comment").attr("title")
           ? "切换为Valine"
           : "切换为Gitalk",
       o = $("#switch-comment>i");
     "none" === $("#gitalk-container").css("display")
       ? $("#vcomment").slideUp("normal", () => {
           $("#gitalk-container").slideDown("normal", () => {
             $("#switch-comment").attr("title", t),
               o.hasClass("fa-toggle-off")
                 ? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
                 : o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
           });
         })
       : $("#gitalk-container").slideUp("normal", () => {
           $("#vcomment").slideDown("normal", () => {
             $("#switch-comment").attr("title", t),
               o.hasClass("fa-toggle-off")
                 ? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
                 : o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
           });
         });
   }
   var commentElement = document.getElementsByClassName("comment_headling")[0];
   if (commentElement != undefined) {
     commentElement.innerHTML +=
       '<a id="switch-comment" href="javascript:void(0);" title="切换为Gitalk" target="_self"><i class="fa fas fa-toggle-off" aria-hidden="true"></i></a>';
     document.getElementById("gitalk-container").style.display = "none";
   }
   $("#switch-comment").click(function () {
     return switchComment(), !1;
   });

   你也可以用现成的：https://cdn.jsdelivr.net/gh/chuchendjs/HexoStaticFile@master/js/switch.min.js

功能扩展

移植Volantis主题的标签

部分修改来源于 Volantis 主题，扩展的标签分别为 Checkbox & Radio、富文本按钮、Folding等
如何添加请移步到 ：butterfly主题添加Volantis主题外挂标签

样式预览：Volantis主题标签预览

渐变 note

默认情况

success

error

warning

查看代码测试

添加css

.tip {
    position: relative;
    color: #fff;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    padding: 6px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    margin-bottom: 20px
}

.tip p {
    margin: 5px 0!important
}

.tip:before {
    background: #20a0ff;
    background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
    background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
    background: linear-gradient(0deg,#0092ff,#20b8ff);
    border-radius: 50%;
    color: #fff;
    content: "\f129";
    font-size: 12px;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24.5px;
    left: -12px;
    top: -12px;
    -webkit-box-shadow: 0 0 0 2.5px #fff;
    box-shadow: 0 0 0 2.5px #fff;
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    text-align: center
}

.btn,.getit a {
    position: relative
}

.well .tip:before {
    -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
    box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
    margin: 0
}

.tip.success {
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
    box-shadow: 0 3px 5px rgba(104,195,59,.5)
}

.tip.success:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
    background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
    background: linear-gradient(0deg,#52bb1d,#95d34b);
    content: "\f00c";
    text-shadow: 0 -1px #61be33
}

.tip.warning {
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5)
}

.tip.warning:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
    background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
    background: linear-gradient(0deg,#ff8f35,#ffc149);
    content: "\f12a";
    text-shadow: 0 -1px #ff953f
}

.tip.error {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
    background: -webkit-linear-gradient(left,#ff4949,#ff7849);
    background: linear-gradient(90deg,#ff4949,#ff7849);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.error:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
    background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
    background: linear-gradient(0deg,#ff3838,#ff7849);
    content: "\f00d";
    text-shadow: 0 -1px #ff4949
}

/*夜间适配*/
[data-theme="dark"] .tip {
    filter: brightness(0.7);
}

/* snote夜间模式 */
[data-theme="dark"] .tip{
  color: #4c4948;
}

示例

<div class='tip' ><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>

note 小标签

绿色

红色

黄色

灰色

蓝色

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

添加css代码

span.inline-tag {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--Color)
}

p.red,
span.red {
    --Color: rgb(233, 30, 100);
    --ColorA: rgba(233, 30, 100, 0.2);
}

p.green,
span.green {
    --Color: rgb(139, 195, 74);
    --ColorA: rgba(139, 195, 74, 0.2);
}

p.blue,
span.blue {
    --Color: rgb(3, 169, 244);
    --ColorA: rgba(3, 169, 244, 0.2);
}

p.yellow,
span.yellow {
    --Color: rgb(255, 193, 7);
    --ColorA: rgba(255, 193, 7, 0.2);
}

p.grey,
span.grey {
    --Color: rgb(76, 76, 76);
    --ColorA: rgba(76, 76, 76, 0.2);
}

p.div-border {
    padding: 10px;
    border: 1px solid var(--Color,#333);
    border-radius: 0.4rem;
    background-color: var(--ColorA, transparent);
}

p.left {
    border-left-width: 5px;
    border-left-color: var(--Color);
}

p.bottom {
    border-bottom-width: 5px;
    border-bottom-color: var(--Color);
}

p.right {
    border-right-width: 5px;
    border-right-color: var(--Color);
}

p.top {
    border-top-width: 5px;
    border-top-color: var(--Color);
}

示例

/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

隐藏按钮

主题自带的隐藏按钮点击后就消失，则不可以再次隐藏。因此要点击后不再消失则需要添加下面一段 css 代码即可。

.hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
    display: inline-block;
}

特殊按钮

样式及使用请参考小康的： https://www.antmoe.com/posts/58a62380/index.html

阿里 Iconfont 图标

参考小康的这篇文章：小康Hexo 博客之优雅使用阿里 iconfont 图标博客

微语

如何添加动态说说，请移步到这里：微语

优化

前言

这里所做的操作升级主题无需再做操作，是不是很开心呢！

地址栏美观

1. 安装 hexo-abbrlink 插件

   npm install hexo-abbrlink --save

2. 编辑 _config.yml 文件，找到 permalink , 改成 permalink: posts/:abbrlink/
   具体可以参考我的:

   #permalink: :year/:month/:day/:title/
   #permalink_defaults:
   permalink: posts/:abbrlink/
   abbrlink:
     alg: crc32 #support crc16(default) and crc32
     rep: dec   #support dec(default) and hex

3. 在文章Page Front-matter 添加自定义 abbrlink ，如 abbrink: vue，但要注意的是：最好是用英文，因为中文可能会出现乱码。若没有自定义 hexo s 运行则会自动添加随机数字码

添加卡通人物

1. 按住装插件

   npm install --save hexo-helper-live2d

2. 下载相应的模型，将 shizuku 更换成你想要的模型名称即可（本人就选shizuku），更多模型选择请点击此处

   npm install live2d-widget-model-shizuku

3. 打开站点目录下的 _config.yml文件，添加如下代码：

   live2d:
   	enable: true
   	scriptFrom: local
   	model: 
   		use: live2d-widget-model-shizuku #模型选择
   	display: 
   		position: right  #模型位置
   		width: 150       #模型宽度
   		height: 300      #模型高度
   	mobile: 
   		show: false      #是否在手机端显示

4. 若不需要卸载或关闭即可，换模型亦是如此

加速博客访问速度

hexo-offline-popup 是一个 hexo 插件， 它可加速你的Hexo网站的加载速度，以及网站内容更新弹窗提示。

1. 安装

   npm i hexo-offline-popup --save

2. 在博客根目录的 _config.yml 中添加如下配置

   # offline config passed to sw-precache.
   service_worker:
     maximumFileSizeToCacheInBytes: 5242880
     staticFileGlobs:
     - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
     stripPrefix: public
     verbose: true

3. 如果你有CDN资源，例：

   - https://unpkg.com/artitalk
   - https://cdn.jsdelivr.net/npm/artitalk

   将此配置添加到根目录的 _config.yml

   service_worker:
     runtimeCaching:
       - urlPattern: /*
         handler: cacheFirst
         options:
           origin: unpkg.com
       - urlPattern: /*
         handler: cacheFirst
         options:
           origin: cdn.jsdelivr.net

4. 上传, 执行该代码激活并使用

   hexo cl && hexo g -d

5. 说明

   该插件仅部署后生效，本地运行不生效

   安装该插件后第一次打开网站不弹窗，后续更新将会弹窗