hexo-butterfly主题修改记录

前提设置

自定义js

路径添加文件，[blogRoot]/themes/butterfly/source/js/myself_settings.js

再修改主题配置文件[blogRoot]/themes/butterfly/_config.yml，按照下面引入 （一定是bottom，否则可能出现dom不完全导致js报错） （如果直接用已有的就别加了）

如果使用pjax建议加上 data-pjax

inject:
  head:
    - ....
  bottom:
    - <script type="text/javascript" src="/js/myself_settings.js"></script>
    #  - <script data-pjax type="text/javascript" src="/js/myself_settings.js"></script>

自定义css

在路径添加文件，[blogRoot]/themes/butterfly/source/css/myself_settings.css

修改主题配置文件[blogRoot]/themes/butterfly/_config.yml

inject:
  head:
    - <link rel="stylesheet" href="/css/myself_settings.css">
  bottom:
    - ...

jq or jquery的引入

引入方式与js相同。

修改过程

Hexo Butterfly宽屏适配指北

侧边栏卡片适配

css文件内容，侧边栏宽度设置及自动适配。

/*侧边栏适配*/
.aside-content{
    max-width:312px;
    min-width:300px;
}
.recent-posts{
  width:auto!important;
}
/*添加的自动适配*/
@media screen and (max-width: 900px){
    .aside-content{
        max-width:none!important;
    }
}

分页适配

css文件内容，设置归档，页面，分类，标签页的宽度，隐藏page页右边栏而非主页。


#archive,#page,#category,#tag{
    width:100%;
}
.page:not(.page.home) .aside-content{
    display: none;
}

继续优化

修改 [blogRoot]\themes\butterfly\layout\includes\layout.pug

 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- - var pageType = is_post() ? 'post' : 'page'
+ - var pageType = is_home() ? 'page home' : is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  ...



首页卡片适配

css文件内容，首页卡片适配，双栏效果（添加自适应功能）。

/*首页卡片适配，双栏效果（添加自适应功能）*/
@media screen and (min-width: 1200px) {
    #recent-posts{
        margin-top:-1rem;  /*头部为空时抵消间隔，若有磁贴或日历请注释掉该行*/
        align-content:flex-start;
        display: flex;
        flex-wrap: wrap; /*规定灵活的项目在必要的时候拆行或拆列。*/
        justify-content: space-between; /*。*/
    }
    #recent-posts > .recent-post-item {
      /*max-height:324px;*/  /*文章容器最大高度*/
      margin-top: 1rem; /*最小间距*/
      display: inline-block;
      height:auto; /*高度自动*/
      width:49%;/*文章容器容器宽度*/
    }
    #recent-posts > .recent-post-item .post_cover {
      width: 100%; /*图片封面宽度*/
        height: 200px;/*图片封面高度*/
    }
    #recent-posts > .recent-post-item .post_cover img.post_bg {
      width: 100%;/*图片宽度*/
      height: 100%;/*图片高度*/
    }
    #recent-posts > .recent-post-item {
  
      -webkit-flex-direction: column; /*容器内部纵向排列*/
      -ms-flex-direction: column; /*容器内部纵向排列*/
      flex-direction: column; /*容器内部纵向排列*/
  
    }
    #recent-posts > .recent-post-item .left_radius {
        border-radius: 8px 8px 0 0;/*圆角修改*/
    }
    #recent-posts > .recent-post-item .right_radius {
        border-radius: 8px 8px 0 0;/*圆角修改*/
    }
    .recent-post-item{
        height:auto !important;/*容器高度自动*/
    }
  
    .recent-post-info {
  
      padding: 0 40px;/*容器内部文字左右间距*/
      margin-top: 1em;/*容器内部文字上间距*/
      width: 100%!important;/*容器宽度*/
    }
    #recent-posts > .recent-post-item > .recent-post-info > .article-title {
        -webkit-line-clamp: 1;/*控制标题的行数*/
        margin-top: 0.3rem; /*控制标题的上间距*/
        margin-bottom: 0.3rem;/*控制标题的下间距*/
        font-size: 1.2em; /*控制标题的字体大小*/
        line-height: 1.4;/*控制标题的行高*/
   
    }
    #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap {
        margin-bottom: 1rem;/*控制标题meta信息的底部间距*/
    }
}

打开 [blogRoot]\themes\Butterfly\layout\includes\mixins\post-ui.pug,更换代码块位置。

mixin postUI(posts)
  each article , index in page.posts.data
    .recent-post-item
      -
      ...
        a.article-title(href=url_for(link) title=title)= title
+        case theme.index_post_content.method
+          when false
+            - break
+          when 1
+            .content!= article.description
+          when 2
+            if article.description
+              .content!= 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 += ' ...' : ''
+              .content!= 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 += ' ...' : ''
+            .content!= expert
        .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 |
          ...

        //- Display the article introduction on homepage
-        case theme.index_post_content.method
-          when false
-            - break
-          when 1
-            .content!= article.description
-          when 2
-            if article.description
-              .content!= 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 += ' ...' : ''
-              .content!= 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 += ' ...' : ''
-            .content!= expert

    if theme.ad && theme.ad.index
      ...

友链界面适配

css文件内容

/*让一行显示更多的友链图标：*/
.flink-list-item{
    width:calc(100% / 4 - 15px)!important;
}
@media screen and (max-width: 1250px) {
    .flink-list-item{
        width:calc(100% / 3 - 15px)!important;
    }
}

导航栏的修改

分离搜索栏与菜单栏

为了方便管理，我们要让搜索栏在最右侧，而其它元素居中，这时我们需要修改一下pug,并删除了搜索图标的文字span=' '+_p('search.title')。

修改[blogRoot]\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
    
  #menus
-    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
-      #search-button
-        a.site-page.social-icon.search(href="javascript:void(0);")
-          i.fas.fa-search.fa-fw
-          span=' '+_p('search.title')
    !=partial('includes/header/menu_item', {}, {cache: true})
+    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
+      #search-button
+        a.site-page.social-icon.search(href="javascript:void(0);")
+          i.fas.fa-search.fa-fw
-    #toggle-menu
-      a.site-page(href="javascript:void(0);")
-        i.fas.fa-bars.fa-fw
+      #toggle-menu
+        a.site-page(href="javascript:void(0);")
+          i.fas.fa-bars.fa-fw



导航栏居中

css代码段内容


#nav .menus_items {
/* display: inline; 这个带不带都可以，本来就是inline */
position: absolute;
width: fit-content;
left: 50%;
transform: translateX(-50%);
}

子菜单横向布局

自定义css代码块

.menus_item_child li:not(#sidebar-menus li){
    float: left;
    border-radius: 6px!important;
    -webkit-border-radius: 6px!important;
    -moz-border-radius: 6px!important;
    -ms-border-radius: 6px!important;
    -o-border-radius: 6px!important;
}
.menus_item_child:not(#sidebar-menus ul){
  /*
    left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调
  改为：*/
  left:50%;
  translate:-50%;
}

网站标题添加动画

自定义css代码块

.site-name::before{
    opacity: 0;
    background-color: var(--lyx-theme)!important;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    position:absolute;
    top:0!important;
    right:0!important;
    width:100%;
    height:100%;
    content: "\f015";
    box-shadow: 0 0 5px var(--lyx-theme);
    font-family: "Font Awesome 6 Free";
    text-align: center;
    color:white;
    line-height:34px;/*如果有溢出或者垂直不居中的现象微调一下这个参数*/
    font-size: 18px;/*根据个人喜好*/
}
.site-name:hover::before{
    opacity: 1;
    scale:1.03;
}
.site-name{
    position: relative;
    font-size: 24px; /*一定要把字体调大点，否则效果惨不忍睹！*/
}
:root{
    --lyx-theme:#ed709b /*我的主题色*/
}

runtime

butterfly主题配置文件增改

footer:
  owner:
    enable: false
    since: 2021
-  custom_text: 
+  custom_text: <div id="runtime"></div>
  copyright: false # Copyright of theme and framework

自定义js代码块

setInterval(() => {
    // let create_time = Math.round(new Date('2021-10-15 00:00:00').getTime() / 1000); //在此行修改建站时间
    // 有苹果用户发现safari浏览器不能正常运行，百度了一下发现是格式化的问题，改成下面这种应该就可以了。感谢反馈。
    let create_time = Math.round(new Date('2021/10/15 00:00:00').getTime() / 1000); //在此行修改建站时间
    let timestamp = Math.round((new Date().getTime()) / 1000);
    let second = timestamp - create_time;
    let time = new Array(0, 0, 0, 0, 0);

    var nol = function(h) {
        return h > 9 ? h : '0' + h;
    }
    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] = nol(parseInt(second / 3600));
        second %= 3600;
    }
    if (second >= 60) {
        time[3] = nol(parseInt(second / 60));
        second %= 60;
    }
    if (second >= 0) {
        time[4] = nol(second);
    }
    let currentTimeHtml = ""
    if (time[0] != 0) {
        currentTimeHtml += time[0] + ' YEAR '
    }
    currentTimeHtml += time[1] + ' DAYS ' + time[2] + ' : ' + time[3] + ' : ' + time[4];
    document.getElementById("runtime").innerHTML = currentTimeHtml;
}, 1000);

自定义css代码块

/*runtime设置*/
div#runtime {
    width: fit-content;
    color: #fff;
    padding: 0 10px;
    border-radius: 10px;
    /*background-color: rgba(0, 0, 0, 0.7);*/
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

[data-theme="dark"] div#runtime {
    color: #fff;
    /*box-shadow: 0 0 5px rgba(28, 69, 218, 0.71);*/
}

card_announcement添加welcome模块

定位到市级

获取apikey

进入腾讯位置服务应用管理界面，点击创建应用，应用名称和类型随便填。在新创建的应用中点击添加key，产品选择WebServiceAPI，域名白名单填自己的域名或不填。把得到的key记下。如果开启白名单记得把localhost也加上。

引入博客、编写定制化js

主题配置文件中加入代码块

inject:
	head:
		- <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script>

自定义js代码块

API接入和距离计算（记得替换key的内容）：

//get请求
$.ajax({
    type: 'get',
    url: 'https://apis.map.qq.com/ws/location/v1/ip',
    data: {
        key: '你获取的key',
        output: 'jsonp',
    },
    dataType: 'jsonp',
    success: function (res) {
        ipLoacation = res;
        showWelcome();
    }
})

//根据经纬度计算两点距离(点1经度,点1纬度,点2经度,点2纬度)
function getDistance(e1, n1, e2, n2) {
    const R = 6371
    const { sin, cos, asin, PI, hypot } = Math

    let getPoint = (e, n) => {
        e *= PI / 180
        n *= PI / 180
        return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
    }

    let a = getPoint(e1, n1)
    let b = getPoint(e2, n2)
    let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
    let r = asin(c / 2) * 2 * R
    return Math.round(r);
}

定制化JS：

//根据自己的需求定制
function showWelcome() {
    if (!document.getElementById("welcome-info")) return

    let dist = getDistance(110.84721, 35.97053, ipLoacation.result.location.lng, ipLoacation.result.location.lat); //这里记录你自己的经纬度

    let pos = ipLoacation.result.ad_info.nation;
    let posdesc;
    //根据国家、省份、城市信息自定义欢迎语
    //海外地区不支持省份及城市信息
    switch (ipLoacation.result.ad_info.nation) {
        case "日本":
            posdesc = "よろしく，一起去看樱花吗？";
            break;
        case "美国":
            posdesc = "Make America Great Again!";
            break;
        case "英国":
            posdesc = "想同你一起夜乘伦敦眼！";
            break;
        case "俄罗斯":
            posdesc = "干了这瓶伏特加！";
            break;
        case "法国":
            posdesc = "C'est La Vie";
            break;
        case "德国":
            posdesc = "Die Zeit verging im Fluge.";
            break;
        case "澳大利亚":
            posdesc = "一起去大堡礁吧！";
            break;
        case "加拿大":
            posdesc = "拾起一片枫叶赠予你";
            break;
        case "中国":
            pos = ipLoacation.result.ad_info.province + " " + ipLoacation.result.ad_info.city;
            switch (ipLoacation.result.ad_info.province) {
                case "北京市":
                    pos = "北京市";
                    posdesc = "北——京——欢迎你~~~";
                    break;
                case "天津市":
                    pos = "天津市";
                    posdesc = "讲段相声吧。";
                    break;
                case "重庆市":
                    pos = "重庆市";
                    posdesc = "高德地图:已到达重庆，下面交给百度地图导航。"
                    break;
                case "河北省":
                    posdesc = "山势巍巍成壁垒，天下雄关。铁马金戈由此向，无限江山。";
                    break;
                case "山西省":
                    posdesc = "展开坐具长三尺，已占山河五百余。";
                    break;
                case "内蒙古自治区":
                    posdesc = "天苍苍，野茫茫，风吹草低见牛羊。";
                    break;
                case "辽宁省":
                    posdesc = "我想吃烤鸡架！";
                    break;
                case "吉林省":
                    posdesc = "状元阁就是东北烧烤之王。";
                    break;
                case "黑龙江省":
                    posdesc = "很喜欢哈尔滨大剧院。";
                    break;
                case "上海市":
                    pos = "上海市";
                    posdesc = "众所周知，中国只有两个城市。";
                    break;
                case "江苏省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "南京市":
                            posdesc = "欢迎来自安徽省南京市的小伙伴。";
                            break;
                        case "苏州市":
                            posdesc = "上有天堂，下有苏杭。";
                            break;
                        case "泰州市":
                            posdesc = "这里也是我的故乡。";
                            break;
                        default:
                            posdesc = "散装是必须要散装的。";
                            break;
                    }
                    break;
                case "浙江省":
                    posdesc = "东风渐绿西湖柳，雁已还人未南归。";
                    break;
                case "河南省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "郑州市":
                            posdesc = "豫州之域，天地之中";
                            break;
                        case "南阳市":
                            posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                            break;
                        case "驻马店市":
                            posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                            break;
                        case "开封市":
                            posdesc = "刚正不阿包青天";
                            break;
                        case "洛阳市":
                            posdesc = "洛阳牡丹甲天下";
                            break;
                        default:
                            posdesc = "可否带我品尝河南烩面啦？";
                            break;
                    }
                    break;
                case "安徽省":
                    posdesc = "蚌埠住了，芜湖起飞。";
                    break;
                case "福建省":
                    posdesc = "井邑白云间，岩城远带山。";
                    break;
                case "江西省":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色。";
                    break;
                case "山东省":
                    posdesc = "遥望齐州九点烟，一泓海水杯中泻。";
                    break;
                case "湖北省":
                    posdesc = "来碗热干面！";
                    break;
                case "湖南省":
                    posdesc = "74751，长沙斯塔克。";
                    break;
                case "广东省":
                    posdesc = "老板来两斤福建人。";
                    break;
                case "广西壮族自治区":
                    posdesc = "桂林山水甲天下。";
                    break;
                case "海南省":
                    posdesc = "朝观日出逐白浪，夕看云起收霞光。";
                    break;
                case "四川省":
                    posdesc = "康康川妹子。";
                    break;
                case "贵州省":
                    posdesc = "茅台，学生，再塞200。";
                    break;
                case "云南省":
                    posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天。";
                    break;
                case "西藏自治区":
                    posdesc = "躺在茫茫草原上，仰望蓝天。";
                    break;
                case "陕西省":
                    posdesc = "来份臊子面加馍。";
                    break;
                case "甘肃省":
                    posdesc = "羌笛何须怨杨柳，春风不度玉门关。";
                    break;
                case "青海省":
                    posdesc = "牛肉干和老酸奶都好好吃。";
                    break;
                case "宁夏回族自治区":
                    posdesc = "大漠孤烟直，长河落日圆。";
                    break;
                case "新疆维吾尔自治区":
                    posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风。";
                    break;
                case "台湾省":
                    posdesc = "我在这头，大陆在那头。";
                    break;
                case "香港特别行政区":
                    pos = "香港特别行政区";
                    posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉。";
                    break;
                case "澳门特别行政区":
                    pos = "澳门特别行政区";
                    posdesc = "性感荷官，在线发牌。";
                    break;
                default:
                    posdesc = "社会主义大法好。";
                    break;
            }
            break;
        default:
            posdesc = "带我去你的国家逛逛吧。";
            break;
    }

    //判断时间
    let timeChange;
    let date = new Date();
    if (date.getHours()>= 5 && date.getHours() < 11) timeChange = "<span>上午好</span>，一日之计在于晨，早起的虫儿被鸟吃丫~";
    else if (date.getHours()>= 1 && date.getHours() < 13) timeChange = "<span>中午好</span>，该摸鱼吃午饭了";
    else if (date.getHours() >= 13 && date.getHours() < 15) timeChange = "<span>下午好</span>，懒懒地睡个午觉吧！";
    else if (date.getHours() >= 15 && date.getHours() < 16) timeChange = "<span>三点几啦</span>，饮茶先啦！";
    else if (date.getHours() >= 16 && date.getHours() < 19) timeChange = "<span>夕阳无限好！</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>晚上好</span>，夜生活嗨起来！";
    else timeChange = "夜深了，早点休息，少熬夜";

    //自定义文本需要放的位置
    document.getElementById("welcome-info").innerHTML = `欢迎来自<span>${pos}</span>的小伙伴，${timeChange}<br>你距离半步多约有<span>${dist}</span>公里，${posdesc}`;
}


样式修改

/theme/butterfly/latout/includes/widget/card_announcement.pug：

if theme.aside.card_announcement.enable
  .card-widget.card-announcement
    .item-headline
      i.fas.fa-bullhorn.fa-shake
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
+    #welcome-info

自定义css代码块

/*公告栏定制*/
:root {
    --ichika-color: #49A6E9;
}

/* 公告&欢迎页 */
.card-announcement {
    line-height:30px;
    font-size:16px;
}

.card-announcement .item-headline span{
    margin-left: 9px;
}

.card-announcement span{
    font-weight:bold;
    font-size:20px!important;
    color:var(--ichika-color);
}

定位到县级

个人图片背景

自定义css代码块

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

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

H1-H6图标风车样式效果魔改教程

自定义css代码块

/* 文章页H1-H6图标样式效果 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 1.6s linear infinite;
  animation: ccc 1.6s linear infinite;
}
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}

#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;
  }

  #content-inner.layout h1:hover,
  #content-inner.layout h2:hover,
  #content-inner.layout h3:hover,
  #content-inner.layout h4:hover,
  #content-inner.layout h5:hover,
  #content-inner.layout h6:hover {
    color: #3b70fc;
  }
  #content-inner.layout h1:hover::before,
  #content-inner.layout h2:hover::before,
  #content-inner.layout h3:hover::before,
  #content-inner.layout h4:hover::before,
  #content-inner.layout h5:hover::before,
  #content-inner.layout h6:hover::before {
    color: #3b70fc;
    -webkit-animation: ccc 3.2s linear infinite;
    animation: ccc 3.2s linear infinite;
  }


/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
    animation: fa-spin 5s linear infinite;
  }

手机端菜单栏列表优化

自定义css代码块

/*手机导航栏列表优化*/
#nav .menus_items .menus_item .menus_item_child li{
  display: inline-block;
}

音乐播放器(失败)

修改主题配置文件

aplayerInject:
  enable: true
  per_page: true
  

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" type="text/css">
  bottom:
+    - <div id="nav-music" onclick="rootlex.musicToggle()"><div id="nav-music-hoverTips">音乐已暂停</div><meting-js id="2600942006" server="netease" type="playlist" mutex="true" preload="none" data-lrctype="0" order="list"></meting-js></div>
    - <script data-pjax src="/js/waterfall.js"></script>
    - <script data-pjax src="/js/custom.js"></script>

添加自定义css代码块

/* 颜色 */
:root {
  --rootlex-theme-op: #4259ef23;
  --rootlex-white: #fff;
  --rootlex-black: #000;
  --rootlex-none: rgba(0, 0, 0, 0);
  --rootlex-gray: #999999;
  --rootlex-yellow: #ffc93e;
  --rootlex-border-radius: 15px;
  --rootlex-main: var(--rootlex-theme);
  --rootlex-main-op: var(--rootlex-theme-op);
  --rootlex-shadow-theme: 0 8px 12px -3px var(--rootlex-theme-op);
  --rootlex-shadow-main: 0 8px 12px -3px var(--rootlex-main-op);
  --rootlex-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
  --rootlex-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
  --rootlex-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
  --rootlex-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
  --rootlex-shadow-red: 0 8px 12px -3px #ee7d7936;
  --rootlex-shadow-green: 0 8px 12px -3px #87ee7936;
  --rootlex-shadow-border: 0 8px 16px -4px #2c2d300c;
  --rootlex-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
  --style-border: 1px solid var(--rootlex-card-border);
  --rootlex-blue-main: #425aef;
  --style-border-hover: 1px solid var(--rootlex-main);
  --style-border-dashed: 1px dashed var(--rootlex-theme-op);
  --style-border-avatar: 4px solid var(--rootlex-background);
  --style-border-always: 1px solid var(--rootlex-card-border);
  --rootlex-white-acrylic1: #fefeff !important;
  --rootlex-white-acrylic2: #fcfdff !important;
  --rootlex-black-acrylic2: #08080a !important;
  --rootlex-black-acrylic1: #0b0b0e !important;
}

[data-theme='light'] {
  --rootlex-theme: #425aef;
  --rootlex-theme-op: #4259ef23;
  --rootlex-blue: #425aef;
  --rootlex-red: #d8213c;
  --rootlex-pink: #ff7c7c;
  --rootlex-green: #57bd6a;
  --rootlex-fontcolor: #363636;
  --rootlex-background: #f7f9fe;
  --rootlex-reverse: #000;
  --rootlex-maskbg: rgba(255, 255, 255, 0.6);
  --rootlex-maskbgdeep: rgba(255, 255, 255, 0.85);
  --rootlex-hovertext: var(--rootlex-theme);
  --rootlex-ahoverbg: #f7f7fa;
  --rootlex-lighttext: var(--rootlex-main);
  --rootlex-secondtext: rgba(60, 60, 67, 0.6);
  --rootlex-scrollbar: rgba(60, 60, 67, 0.4);
  --rootlex-card-btn-bg: #edf0f7;
  --rootlex-post-blockquote-bg: #fafcff;
  --rootlex-post-tabs-bg: #f2f5f8;
  --rootlex-secondbg: #edf0f7;
  --rootlex-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --rootlex-card-bg: #fff;
  --rootlex-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --rootlex-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --rootlex-card-border: #c0c6d8;
}

[data-theme='dark'] {
  --rootlex-theme: #0084ff;
  --rootlex-theme-op: #0084ff23;
  --rootlex-blue: #0084ff;
  --rootlex-red: #ff3842;
  --rootlex-pink: #ff7c7c;
  --rootlex-green: #57bd6a;
  --rootlex-fontcolor: #f7f7fa;
  --rootlex-background: #18171d;
  --rootlex-reverse: #fff;
  --rootlex-maskbg: rgba(0, 0, 0, 0.6);
  --rootlex-maskbgdeep: rgba(0, 0, 0, 0.85);
  --rootlex-hovertext: #0a84ff;
  --rootlex-ahoverbg: #fff;
  --rootlex-lighttext: #f2b94b;
  --rootlex-secondtext: #a1a2b8;
  --rootlex-scrollbar: rgba(200, 200, 223, 0.4);
  --rootlex-card-btn-bg: #30343f;
  --rootlex-post-blockquote-bg: #000;
  --rootlex-post-tabs-bg: #121212;
  --rootlex-secondbg: #30343f;
  --rootlex-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
  --rootlex-card-bg: #1d1b26;
  --rootlex-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --rootlex-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --rootlex-card-border: #42444a;
}

/*播放器样式*/
@media screen and (max-width: 1300px) {
    #nav-music {
        display: none !important;
    }
}

#nav-music {
    display: flex;
    align-items: center;
    z-index: 1001;
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: pointer;
    transition: 0.3s;
    transform-origin: left bottom;
    box-shadow: var(--rootlex-shadow-border);
    border-radius: 40px;
    overflow: hidden;
}

#nav-music:active {
    transform: scale(0.97);
}

#nav-music.playing {
    box-shadow: 0 0 12px -3px var(--rootlex-none);
    -webkit-animation: playingShadow 5s linear infinite;
}

@-webkit-keyframes playingShadow {
    0% {
        box-shadow: 0 0 12px -3px var(--rootlex-none);
    }

    50% {
        box-shadow: 0 0 12px 0 var(--rootlex-main);
    }

    100% {
        box-shadow: 0 0 12px -3px var(--rootlex-none);
    }
}

#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
    height: 25px;
    width: 25px;
    border-radius: 40px;
    z-index: 1;
    transition: 0.3s;
    -webkit-transform: rotate(0deg) scale(1);
    border: var(--style-border-always);
    -webkit-animation: changeright 24s linear infinite;
    animation-play-state: paused;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
    box-shadow: 0 0 14px #ffffffa6;
    -webkit-transform: rotate(0deg) scale(1.1);
    border-color: var(--rootlex-white);
    animation-play-state: running;
}

@-webkit-keyframes changeright {

    0% {
        -webkit-transform: rotate(0deg) scale(1.1);
        box-shadow: 0 0 2px #ffffff00;
    }

    25% {
        -webkit-transform: rotate(90deg) scale(1.1);
        box-shadow: 0 0 14px #ffffff;
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        box-shadow: 0 0 2px #ffffff00;
    }

    75% {
        -webkit-transform: rotate(270deg) scale(1.1);
        box-shadow: 0 0 14px #ffffff;
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1.1);
        box-shadow: 0 0 2px #ffffff00;
    }
}

#nav-music .aplayer.aplayer-withlrc .aplayer-info {
    height: 100%;
    color: var(--rootlex-fontcolor);
    margin-left: 8px;
    padding: 0;
    display: flex;
    align-items: center;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
    color: var(--rootlex-white);
}

#nav-music #nav-music-hoverTips {
    color: var(--rootlex-white);
    background: var(--rootlex-main);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 40px;
    opacity: 0;
    font-size: 12px;
    z-index: 2;
    pointer-events: none;
    transition: 0.3s;
}

#nav-music:hover:not(.playing) #nav-music-hoverTips {
    opacity: 1;
}

#nav-music.playing #nav-music-hoverTips {
    opacity: 0;
}

#nav-music .aplayer {
    background: var(--card-bg);
    border-radius: 60px;
    height: 41px;
    display: flex;
    margin: 0;
    pointer-events: none;
    transition: 0.3s;
    border: var(--style-border);
    box-shadow: none;
    width: auto !important;
}

#nav-music.playing .aplayer {
    background: #0084ffdd;
    border: var(--style-border-hover);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#nav-music .aplayer .aplayer-notice {
    display: none;
}

#nav-music .aplayer .aplayer-miniswitcher {
    display: none;
}

#nav-music .aplayer .aplayer-body {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px 0 8px;
    height: 100%;
    width: 100%;
}

#nav-music .aplayer .aplayer-pic .aplayer-play {
    opacity: 0;
}

#nav-music .aplayer-list {
    display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0;
    z-index: 1;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
    display: none;
}

#nav-music .aplayer.aplayer-withlist .aplayer-info {
    border: none;
    display: flex !important;
}

#nav-music .aplayer .aplayer-pic div {
    border: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
    cursor: pointer;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
}

#nav-music .aplayer .aplayer-info .aplayer-controller {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    margin: 0;
    padding: 0;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    height: 100%;
    background: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 100%;
    opacity: 0.1;
    background-color: var(--rootlex-white) !important;
    -webkit-animation: lightBar 5s ease infinite;
    animation-play-state: paused;
}

#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    animation-play-state: running;
}

@-webkit-keyframes lightBar {

    0% {
        opacity: 0.1;
    }

    60% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.1;
    }
}


/* 歌词 */
#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
    width: 0;
    opacity: 0;
    transition: 0.3s;
    margin-left: 8px;
    margin-top: -2px;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc {
    width: 200px;
    margin-bottom: 0;
    opacity: 1;
}

#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
    color: var(--rootlex-white);
    border: none;
}

#nav-music .aplayer .aplayer-lrc:after,
#nav-music .aplayer .aplayer-lrc:before {
    display: none;
}

#nav-music .aplayer .aplayer-lrc p {
    color: #ffffffb3;
}

添加自定义js

//音乐播放
var rootlex = {
    musicToggle: function(){
        if (rootlex_musicPlaying) {
            document.querySelector("#nav-music").classList.remove("playing");
            rootlex_musicPlaying = false;
            document.querySelector('meting-js').aplayer.pause();
        }else {
            document.querySelector("#nav-music").classList.add("playing");
            rootlex_musicPlaying = true;
            document.querySelector('meting-js').aplayer.play();
        }
    },
}

插件安装

gulp压缩加速

教程

安装脚本

gulp插件

npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件

压缩html

npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev
# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法

压缩css

npm install gulp-clean-css --save-dev

压缩js（gulp-terser)

npm install gulp-terser --save-dev

压缩字体包（没有安装），仅支持ttf格式。

npm install gulp-fontmin --save-dev

根目录创建gulpfile.js脚本，路径[Blogroot]\gulpfile.js。

脚本内容

//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
//下方是字体压缩插件
//var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(terser())
    .pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseBooleanAttributes: true,
            //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            //删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            //删除<style>和<link>的 type="text/css"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});
//压缩字体
/*function minifyFont(text, cb) {
  gulp
    .src('./public/fonts/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
    .on('end', cb);
}*/

gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务（无字体版）
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html'
))
/*原版
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html','mini-font'
))
*/

swiper bar

插件

npm install hexo-butterfly-swiper --save

站点配置文件

# 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初始化方法

wowjs特效

安装

npm install hexo-butterfly-wowjs --save

主题配置文件添加配置项

# wowjs
# see https://www.npmjs.com/package/hexo-butterfly-wowjs
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 1.5s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 200ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 30 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
      delay: 200ms
    # - class: flink-list-card
    #   style: wowpanels
    - class: flink-list-card
      style: animate__flipInY
      duration: 3s
    - class: flink-list-card
      style: animate__animated
      duration: 3s
    - class: article-sort-item
      style: animate__slideInRight
      duration: 1.5s
    - class: site-card
      style: animate__flipInY
      duration: 3s
    - class: site-card
      style: animate__animated
      duration: 3s
  animate_css: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js

Tag Plugins Plus

安装

npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

站点配置文件

# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

音乐播放器

npm install --save hexo-tag-aplayer

固定链接abbr