Butterfly博客二创集锦

前言：
本篇是使用其他优秀博主教程时延申出来的 idea。目前有很多 Butterfly 主题美化魔改教程，此篇就不重复造轮子。本篇将记录值得的二创瞬间。建议先看教程原贴，因为本篇是原教程的拓展延伸。

点击查看更新日志

更新日志

2021-5-26

404 页面魔改（适配 butterfly 3.7.7 版本）

2021-5-9

404 页面魔改

2021-4-17

svg 图标旋转效果

2021-4-16

横版导航栏二级菜单偏移量修正

2021-4-11

社交图标使用多色 svg

2021-4-10

Gitcalendar 样式微调
哔哔 bber 发布时间格式

食用教程前，建议先看一下《教程&笔记常量申明》，且所有修改对缩进格式等有严格要求。

Gitcalendar 样式微调

预览效果

教程原贴

https://akilar.top/posts/1f9c68c9/

配色

我是用 Win10 自带画图软件手工取的色 🙈

蒂芙尼蓝色调：

1	color: "['#ebedf0', '#cdefec', '#a9e4de', '#1fc7b6', '#65cfc5', '#4dc8bb', '#39bbae', '#319d93', '#278178', '#216962', '#1b5852']"

冷色系温度色调（当前在用）：

1	color: "['rgb(145, 145, 145, 0.2)', '#c6ecc1', '#a0e2bb', '#1fc7b6', '#70c5d3', '#60a2ce', '#507ac9', '#4356c5', '#423cc4', '#5b3abc', '#7138b6']"

页面显示小更改

✅ 11 个颜色梯度块全部显示

✅ 月份、日期分别改成英文简写、数字形式，并全部显示

✅ “提交“改成“摸鱼次数”

✅ 修改提交次数对应色块的逻辑判断

修改<BlogRoot>\themes\butterfly\layout\includes\gitcalendar.pug

#gitcalendar.gitcalendar
  #gitmessage(:style='{top:y+px,left:x+px,position: fixed,zIndex:9999}')
    .angle-wrapper
      span {{span1}} &nbsp;
      span {{span2}} 次上传
  .position-relative
    .border.py-2.graph-before-activity-overview
      .js-gitcalendar-graph.mx-md-2.mx-3.d-flex.flex-column.flex-items-end.flex-xl-items-center.overflow-hidden.pt-1.is-graph-loading.graph-canvas.gitcalendar-graph.height-full.text-center
        #gitcalendarcanvasbox(v-if='simplemode')
          canvas#gitcanvas(style='animation: none;')
        svg.js-gitcalendar-graph-svg(width='100%', viewBox='0 0 770 128', v-if='!simplemode')
          text.month(:x='32 + monthindex*64', y='20', v-for='(month,monthindex) in monthchange') {{month}}
          text.wday(text-anchor='start', dx='0', dy='40')  7
          text.wday(text-anchor='start', dx='0', dy='52.5')  1
          text.wday(text-anchor='start', dx='0', dy='65')  2
          text.wday(text-anchor='start', dx='0', dy='77.5')  3
          text.wday(text-anchor='start', dx='0', dy='90')  4
          text.wday(text-anchor='start', dx='0', dy='102.5')  5
          text.wday(text-anchor='start', dx='0', dy='115') 6
          g(v-for='(weekitem,weekIndex) in data', :transform='\'translate(\'+ (16 + weekIndex*14) + \',\' + \'0)\'')
            rect(@mouseover="selectStyle(dayitem,$event)"  @mouseleave="outStyle()" v-for='(dayitem,dayIndex) in weekitem', :style='{fill:thiscolor(dayitem.count),shapeRendering:crispedges}', :data-score='dayitem.count', :data-date='dayitem.date', x='0', :y=' 30 + dayIndex*13 ', width='11', height='11')
      .contrib-footer.clearfix.mt-1.mx-3.px-3.pb-1
        .float-left.text-gray
          | 数据来源
          a(:href="'https://github.com/'+ user ", target='blank') @{{user}}
        .contrib-legend.text-gray
          | Less
          //- 使11个颜色都显示出来
          ul.legend
            li(:style='{backgroundColor:color[0]}')
            li(:style='{backgroundColor:color[1]}')
            li(:style='{backgroundColor:color[2]}')
            li(:style='{backgroundColor:color[3]}')
            li(:style='{backgroundColor:color[4]}')
            li(:style='{backgroundColor:color[5]}')
            li(:style='{backgroundColor:color[6]}')
            li(:style='{backgroundColor:color[7]}')
            li(:style='{backgroundColor:color[8]}')
            li(:style='{backgroundColor:color[9]}')
            li(:style='{backgroundColor:color[10]}')
          | More

  .contrib-column.contrib-column-first.table-column
    span.text-muted 过去一年摸鱼次数
    span.contrib-number {{total}}
    span.text-muted {{oneyearbeforeday}}&nbsp;-&nbsp;{{thisday}}
  .contrib-column.table-column
    span.text-muted 最近一月摸鱼次数
    span.contrib-number {{thisweekdatacore}}
    span.text-muted {{amonthago}}&nbsp;-&nbsp;{{thisday}}
  .contrib-column.table-column
    span.text-muted 最近一周摸鱼次数
    span.contrib-number {{weekdatacore}}
    span.text-muted {{aweekago}}&nbsp;-&nbsp;{{thisday}}

修改<BlogRoot>\themes\butterfly\layout\includes\gitcalendar-js.pug

script.
  var gitcalendar = new Vue({
    el: '#gitcalendar',
    data: {
      simplemode: !{theme.gitcalendar.simplemode},
      user: '!{theme.gitcalendar.user}',
      fixed: 'fixed',
      px: 'px',
      x: '',
      y: '',
      span1: '',
      span2: '',
      month: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
      monthchange: [],
      oneyearbeforeday: '',
      thisday: '',
      amonthago: '',
      aweekago: '',
      weekdatacore: 0,
      datacore: 0,
      total: 0,
      datadate: '',
      data: [],
      positionplusdata: [],
      firstweek: [],
      lastweek: [],
      beforeweek: [],
      thisweekdatacore: 0,
      mounthbeforeday: 0,
      mounthfirstindex: 0,
      crispedges: 'crispedges',
      thisdayindex: 0,
      amonthagoindex: 0,
      amonthagoweek: [],
      firstdate: [],
      first2date: [],
      montharrbefore: [],
      monthindex: 0,
      color: !{theme.gitcalendar.color}
    },
    methods: {
      selectStyle(data, event) {
        document.querySelector('.angle-wrapper').style.display = 'block'
        this.span1 = data.date;
        this.span2 = data.count;
        this.x = event.clientX - 100;
        this.y = event.clientY - 60
      },
      outStyle() {
        document.querySelector('.angle-wrapper').style.display = 'none'
      }, //-修改逻辑
      thiscolor(x) {
        if (x === 0) {
          return this.color[0]
        } else if (x < 2) {
          return this.color[1]
        } else if (x < 3) {
          return this.color[2]
        } else if (x < 4) {
          return this.color[3]
        } else if (x < 6) {
          return this.color[4]
        } else if (x < 8) {
          return this.color[5]
        } else if (x < 11) {
          return this.color[6]
        } else if (x < 14) {
          return this.color[7]
        } else if (x < 17) {
          return this.color[8]
        } else if (x < 22) {
          return this.color[9]
        } else {
          return this.color[10]
        }
      },
    }
  });
  var apiurl = '!{theme.gitcalendar.apiurl}' ? 'https://!{theme.gitcalendar.apiurl}/api?' : 'https://githubapi.ryanchristian.dev/user/'
  var githubapiurl = apiurl + gitcalendar.user;
  //canvas绘图
  function responsiveChart() {
    let c = document.getElementById("gitcanvas");
    if (c) {
      let cmessage = document.getElementById("gitmessage");
      let ctx = c.getContext("2d");
      c.width = document.getElementById("gitcalendarcanvasbox").offsetWidth;
      let linemaxwitdh = 0.96 * c.width / gitcalendar.data.length;
      c.height = 9 * linemaxwitdh;
      let lineminwitdh = 0.8 * linemaxwitdh;
      let setposition = {
        x: 0.02 * c.width,
        y: 0.025 * c.width
      };
      for (let week in gitcalendar.data) {
        weekdata = gitcalendar.data[week];
        for (let day in weekdata) {
          let dataitem = {
            date: "",
            count: "",
            x: 0,
            y: 0
          };
          gitcalendar.positionplusdata.push(dataitem);
          ctx.fillStyle = gitcalendar.thiscolor(weekdata[day].count);
          setposition.y = Math.round(setposition.y * 100) / 100;
          dataitem.date = weekdata[day].date;
          dataitem.count = weekdata[day].count;
          dataitem.x = setposition.x;
          dataitem.y = setposition.y;
          ctx.fillRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh);
          setposition.y = setposition.y + linemaxwitdh
        };
        setposition.y = 0.025 * c.width;
        setposition.x = setposition.x + linemaxwitdh
      };
      ctx.font = "600  Arial";
      ctx.fillStyle = '#aaa';
      ctx.fillText("7", 0, 1.9 * linemaxwitdh);
      ctx.fillText("1", 0, 2.9 * linemaxwitdh);
      ctx.fillText("2", 0, 3.9 * linemaxwitdh);
      ctx.fillText("3", 0, 4.9 * linemaxwitdh);
      ctx.fillText("4", 0, 5.9 * linemaxwitdh);
      ctx.fillText("5", 0, 6.9 * linemaxwitdh);
      ctx.fillText("6", 0, 7.9 * linemaxwitdh);
      let monthindexlist = c.width / 24;
      for (let index in gitcalendar.monthchange) {
        ctx.fillText(gitcalendar.monthchange[index], monthindexlist, 0.7 * linemaxwitdh);
        monthindexlist = monthindexlist + c.width / 12
      };
      cmessage.onmousemove = function(event) {
        document.querySelector('.angle-wrapper').style.display = 'none'
      };
      c.onmousemove = function(event) {
        document.querySelector('.angle-wrapper').style.display = 'none'
        getMousePos(c, event);
      };

      function getMousePos(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left * (canvas.width / rect.width);
        var y = event.clientY - rect.top * (canvas.height / rect.height);
        //console.log("x:"+x+",y:"+y);
        for (let item of gitcalendar.positionplusdata) {
          let lenthx = x - item.x;
          let lenthy = y - item.y;
          //console.log(lenthx,lenthy);
          if (0 < lenthx && lenthx < lineminwitdh) {
            if (0 < lenthy && lenthy < lineminwitdh) {
              //console.log(item.date,item.count)
              document.querySelector('.angle-wrapper').style.display = 'block'
              gitcalendar.span1 = item.date;
              gitcalendar.span2 = item.count;
              gitcalendar.x = event.clientX - 100;
              gitcalendar.y = event.clientY - 60
            }
          }
          //if(0< x - item.x <lineminwitdh&&0< y - item.y <lineminwitdh){
          //console.log(item.count,item.date);
          //}
        }
      }
    }
  }
  //数据统计算法
  function addlastmonth() {
    if (gitcalendar.thisdayindex === 0) {
      thisweekcore(52);
      thisweekcore(51);
      thisweekcore(50);
      thisweekcore(49);
      thisweekcore(48);
      gitcalendar.thisweekdatacore += gitcalendar.firstdate[6].count;
      gitcalendar.amonthago = gitcalendar.firstdate[6].date
    } else {
      thisweekcore(52);
      thisweekcore(51);
      thisweekcore(50);
      thisweekcore(49);
      thisweek2core();
      gitcalendar.amonthago = gitcalendar.first2date[gitcalendar.thisdayindex - 1].date
    }
  };

  function thisweek2core() {
    for (let i = gitcalendar.thisdayindex - 1; i < gitcalendar.first2date.length; i++) {
      gitcalendar.thisweekdatacore += gitcalendar.first2date[i].count
    }
  };

  function thisweekcore(index) {
    for (let item of gitcalendar.data[index]) {
      gitcalendar.thisweekdatacore += item.count
    }
  };

  function addlastweek() {
    for (let item of gitcalendar.lastweek) {
      gitcalendar.weekdatacore += item.count
    }
  };

  function addbeforeweek() {
    for (let i = gitcalendar.thisdayindex; i < gitcalendar.beforeweek.length; i++) {
      gitcalendar.weekdatacore += gitcalendar.beforeweek[i].count
    }
  };

  function addweek(data) {
    if (gitcalendar.thisdayindex === 6) {
      gitcalendar.aweekago = gitcalendar.lastweek[0].date;
      addlastweek()
    } else {
      lastweek = data.contributions[51];
      gitcalendar.aweekago = lastweek[gitcalendar.thisdayindex + 1].date;
      addlastweek();
      addbeforeweek()
    }
  }

  fetch(githubapiurl)
    .then(data => data.json())
    .then(data => {
      gitcalendar.data = data.contributions;
      gitcalendar.total = data.total;
      gitcalendar.first2date = gitcalendar.data[48];
      gitcalendar.firstdate = gitcalendar.data[47];
      gitcalendar.firstweek = data.contributions[0];
      gitcalendar.lastweek = data.contributions[52];
      gitcalendar.beforeweek = data.contributions[51];
      gitcalendar.thisdayindex = gitcalendar.lastweek.length - 1;
      gitcalendar.thisday = gitcalendar.lastweek[gitcalendar.thisdayindex].date;
      gitcalendar.oneyearbeforeday = gitcalendar.firstweek[0].date;
      gitcalendar.monthindex = gitcalendar.thisday.substring(5, 7) * 1;
      gitcalendar.montharrbefore = gitcalendar.month.splice(gitcalendar.monthindex, 12 - gitcalendar.monthindex);
      gitcalendar.monthchange = gitcalendar.montharrbefore.concat(gitcalendar.month);
      addweek(data);
      addlastmonth();
      responsiveChart();
    })
    .catch(function(error) {
      console.log(error);
    });

  //手机版更换为svg绘制
  if (document.getElementById("gitcalendarcanvasbox").offsetWidth < 500) {
    gitcalendar.simplemode = false
  }

  //当改变窗口大小时重新绘制canvas
  window.onresize = function() {
    if (gitcalendar.simplemode) responsiveChart()
  }

  //解决滚动滑轮时出现的标签显示
  window.onscroll = function() {
    if (document.querySelector('.angle-wrapper')) {
      document.querySelector('.angle-wrapper').style.display = 'none'
    }
  };

Hexo 三连即可看到效果。

哔哔 bber 发布时间格式

看到洪哥 bber 是过去多少天的显示方式，很喜欢且在移动端它和设备显示文字合起来不会占太大空间，但按照洪哥 bber 教程里配出来的是年月日时分秒的时间格式，最后结合洪哥和百度网友 js 代码整出了一个bber.js。

预览效果

教程原贴

https://blog.zhheo.com/p/27be0e44.html

用过去多久来表示时间：

新建<BlogRoot>\themes\butterfly\source\js\bber.js

if (document.querySelector("#bber-loading")) {
  var loading_pic = document.getElementById("bber-loading");
  loading_pic.innerHTML =
    '<span id="moments_loading"><i class="fa fa-spinner fa-spin"></i></span>';
}

if (document.querySelector("#bber")) {
  app
    .auth({
      persistence: "local", //避免与同实例冲突
    })
    .anonymousAuthProvider()
    .signIn()
    .then(() => {
      var bbClass = "#bber";
      $(bbClass).after(
        '<div class="load"><button class="load-btn button-load">加载中……</button></div>'
      );
      const db = app.database();
      const collection = db.collection("talks");
      var count = 0,
        per = 9,
        page = 1;
      collection.count(function (err, res) {
        count = res.total;
        loading_pic.innerHTML = ``;
        $(bbClass).append(
          '<p class="count">共 <span class="count-data">' +
            count +
            "</span> 条</p>"
        );
        getList();
      });
      function getList() {
        if ((page - 1) * per >= count) {
          return;
        }
        var d,
          date,
          resCont = "";
        collection
          .limit(per)
          .skip((page - 1) * per)
          .orderBy("date", "desc")
          .get(function (err, res) {
            res.data.forEach((item) => {
              (d = item.date),
                (data =
                  d.getFullYear() +
                  "/" +
                  (d.getMonth() + 1) +
                  "/" +
                  d.getDate() +
                  " " +
                  d.getHours() +
                  ":" +
                  d.getMinutes() +
                  ":" +
                  d.getSeconds());
              data1 = getDateDiff(data);
              dataTime =
                '<p class="datatime"' +
                'title="' +
                data +
                '">' +
                data1 +
                "</p>";
              dataCont =
                '<p class="datacont">' + urlToLink(item.content) + "</p>";
              var from_icon = "";
              if (item.from.indexOf("iPhone") != -1) {
                from_icon = '<i class="fas fa-mobile-alt"></i>';
              } else if (item.from.indexOf("iPad") != -1) {
                from_icon = '<i class="fas fa-tablet-alt"></i>';
              } else if (item.from.indexOf("MacBook") != -1) {
                from_icon = '<i class="fas fa-laptop"></i>';
              } else if (item.from.indexOf("微信") != -1) {
                from_icon =
                  '<i class="fab fa-weixin" style="font-size: 12px"></i>';
              } else {
                from_icon = '<i class="fas fa-tools"></i>';
              }
              dataFrom = item.from
                ? '<p class="datafrom"><small>' +
                  from_icon +
                  item.from +
                  "</small></p>"
                : "";
              resCont +=
                '<li class="item"><div>' +
                dataTime +
                dataCont +
                dataFrom +
                "</div></li>";
            });
            $(bbClass).append(
              '<section class="timeline page-' +
                page +
                '"><ul><div class="list">' +
                resCont +
                "</div></ul></section>"
            );
            $("button.button-load").text("加载更多");
            // $('html,body').animate({ scrollTop: $('.timeline.page-'+page).offset().top - 20 }, 500)
            if (page * per >= count) {
              $(".load").remove();
              return;
            }
            page++;
            Lately({ target: "#bber .datatime" });
            // $("#bber a[rel!=link]:has(img)").slimbox();//图片灯箱效果
          });
      }
      function getTs(time) {
        var arr = time.split(/[/ :]/),
          _date = new Date(
            arr[0],
            arr[1] - 1,
            arr[2],
            arr[3],
            arr[4],
            arr[5]
          ),
          timeStr = Date.parse(_date);
        return timeStr;
      }
      function getDateDiff(post_modified) {
        // 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
        var curTime = new Date();
        var postTime = new Date(post_modified);
        //部分浏览器不兼容此转换建议所以对此进行补充（指定调用自己定义的函数进行生成发布时间的时间戳）
        //var timeDiff = curTime.getTime() - postTime.getTime();
        //上面一行代码可以换成以下（兼容性的解决）
        var timeDiff = curTime.getTime() - getTs(post_modified);
        // 单位换算
        var min = 60 * 1000;
        var hour = min * 60;
        var day = hour * 24;
        var week = day * 7;
        var month = week * 4;
        var year = month * 12;
        // 计算发布时间距离当前时间的周、天、时、分
        var exceedyear = Math.floor(timeDiff / year);
        var exceedmonth = Math.floor(timeDiff / month);
        var exceedWeek = Math.floor(timeDiff / week);
        var exceedDay = Math.floor(timeDiff / day);
        var exceedHour = Math.floor(timeDiff / hour);
        var exceedMin = Math.floor(timeDiff / min);
        // 最后判断时间差到底是属于哪个区间，然后return

        if (exceedyear < 100 && exceedyear > 0) {
          return "发表于" + exceedyear + "年前";
        } else {
          if (exceedmonth < 12 && exceedmonth > 0) {
            return exceedmonth + "月前";
          } else {
            if (exceedWeek < 4 && exceedWeek > 0) {
              return exceedWeek + "星期前";
            } else {
              if (exceedDay < 7 && exceedDay > 0) {
                return exceedDay + "天前";
              } else {
                if (exceedHour < 24 && exceedHour > 0) {
                  return exceedHour + "小时前";
                } else {
                  if (exceedMin == 0) {
                    return "刚刚发表";
                  } else {
                    return exceedMin + "分钟前";
                  }
                }
              }
            }
          }
        }
      }
      $(".button-load").click(function () {
        $(".button-load").text("加载中……");
        getList();
      });
    })
    .catch((err) => {
      console.log(err);
    });
}

function urlToLink(str) {
  var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
  var re_forpic =
    /\bhttps?:[^:<>"]*\/([^:<>"]*)(\.(jpeg)|(png)|(jpg)|(webp))/g;
  str = str.replace(re_forpic, function (imgurl) {
    return '<a href="' + imgurl + '"><img src="' + imgurl + '" /></a>';
  });
  str = str.replace(re, function (website) {
    return (
      " <a href='" + website + "'rel='noopener' target='_blank'>↘链接↙</a> "
    );
  });
  str = qqWechatEmotionParser(str);
  return str;
}

var $jscomp = $jscomp || {};
$jscomp.scope = {};
$jscomp.arrayIteratorImpl = function (b) {
  var g = 0;
  return function () {
    return g < b.length ? { done: !1, value: b[g++] } : { done: !0 };
  };
};
$jscomp.arrayIterator = function (b) {
  return { next: $jscomp.arrayIteratorImpl(b) };
};
$jscomp.makeIterator = function (b) {
  var g =
    "undefined" != typeof Symbol && Symbol.iterator && b[Symbol.iterator];
  return g ? g.call(b) : $jscomp.arrayIterator(b);
};
(function (b, g) {
  var p = function (h) {
    var d = h.lang || {
      second: "\u79d2",
      minute: "\u5206\u949f",
      hour: "\u5c0f\u65f6",
      day: "\u5929",
      month: "\u4e2a\u6708",
      year: "\u5e74",
      ago: "\u524d",
      error: "NaN",
    };
    h = $jscomp.makeIterator(document.querySelectorAll(h.target || ".time"));
    for (var c = h.next(); !c.done; c = h.next()) {
      c = c.value;
      var a = c.dateTime;
      var e = c.title,
        f = c.innerHTML;
      if (
        !a ||
        isNaN(
          new Date(
            (a = a
              .replace(/(.*)[a-z](.*)\+(.*)/gi, "$1 $2")
              .replace(/-/g, "/"))
          )
        )
      )
        if (e && !isNaN(new Date((e = e.replace(/-/g, "/"))))) a = e;
        else if (f && !isNaN(new Date((f = f.replace(/-/g, "/"))))) a = f;
        else break;
      c.title = a;
      a = new Date(a);
      a = (new Date().getTime() - a.getTime()) / 1e3;
      e = a / 60;
      f = e / 60;
      var k = f / 24,
        l = k / 30,
        m = l / 12;
      c.innerHTML =
        (1 <= m
          ? Math.floor(m) + d.year
          : 1 <= l
          ? Math.floor(l) + d.month
          : 1 <= k
          ? Math.floor(k) + d.day
          : 1 <= f
          ? Math.floor(f) + d.hour
          : 1 <= e
          ? Math.floor(e) + d.minute
          : 1 <= a
          ? Math.floor(a) + d.second
          : d.error) + d.ago;
    }
  };
  var n = (function () {
    return this || (0, eval)("this");
  })();
  "Lately" in n || (n.Lately = p);
})();

修改<BlogRoot>\themes\butterfly\layout\includes\page\bb.pug

    script.
      const app = cloudbase.init({
      env: '一giu我里giao', //这里是你的环境id
      //region: "ap-guangzhou"
      })
-	 script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/zhheo/bber@main/bber.js', data-pjax='')
+	 script(type='text/javascript', src='/js/bber.js', data-pjax='')

Hexo 三连即可看到效果。

参考教程：https://blog.csdn.net/u013008898/article/details/86679568

碎碎念，搭建哔哔过程

现在我转而用 Heson 的哔哔项目了，因为腾讯云莫名其妙不能调用哔哔内容，其实刚开始还是可以的。我前前后后反复找原因，甚至重新按教程搭建了 2 次腾讯云后台还是调用不了，于是我开始猜测是不是主题升级的原因，但我将升级之前代码的 download 下来 hexo s 后居然可以正常显示哔哔内容，很奇怪，但是我都已经费老大心思升级了难不成还退回去？更离谱的还有，我在分析原因的时候，不知道碰了个什么 bb 相关代码，突然能正常显示，过了会又不能显示，最后，还有离谱的事情，我突然发现腾讯云后台权限配置莫名其妙改了，我直接黑人问号，我明明配置好了，什么时候就自动改了，然后我将权限改成管理员能改所有人能看，唉，就能正常显示了嘿嘿，你以为这就万事大吉了？很气，过了一段时间，哔哔内容又不能正常显示，我在想应该是权限的原因吧？结果到腾讯云一看，这回权限老老实实是开的，但不知道又 tm 哪出问题了，我急了我急了，索性我转战叨叨（一个仿哔哔项目），我配置了半天，好不容易快结束，结果，唉，vercel 的 api 突然死活发不了哔哔，问教程博主也无济于事，爬！爷生气了，我还是挺细心的去按照教程操作，结果就这，最后啊，我最终选择了 leancloud 后台的哔哔项目，感谢 heson 大佬，他还做了蜜云版哔哔（可称为情侣哔哔），非常养眼的一个哔哔项目，i 了 i 了，适合虐自己(dog)，但缺点是只能在微信公众号发，现在不支持 IOS 快捷指令，以及增删改查合并一些操作，不过每次发之前想好措辞即可，实在不行打开后台改也是一样，我目前勉强能习惯吧（因为我别无选择，不想再重新试了！Heson 的也挺好）

社交图标使用多色 svg

本小节结合了 Aki 的教程和kangblogs群友的做法。Aki 的教程适合 Butterfly3.7.0 版本以上且只能是导航栏的图标多色显示，而我的需求是社交图标也能多色显示（2021-4-16 现在 Aki 已经写了教程，本篇仅供参考）。

预览效果

教程原贴

https://akilar.top/posts/23fdf850/

修改<BlogRoot>themes\butterfly\layout\includes\header\social.pug

each url, icon in theme.social
  a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank"
  title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
-	 i(class=icon)
+    style(type='text/css').
+      .icon {
+      width: 1em; height: 1em;
+      vertical-align: -0.15em;
+      fill: currentColor;
+      overflow: hidden;
+      }
+    svg.icon(aria-hidden='true')
+      use(xlink:href='#'+icon)

按照原教程配置，记得导入自己阿里图标 symbol 的 js，最后 Hexo 三连即可看到效果。

svg 图标旋转效果

修改<BlogRoot>\themes\butterfly\source\css\_layout\aside.styl在第 85 行左右

      .social-icon
        margin: 0 10px
        color: var(--font-color)
        font-size: 1.4em
        cursor: pointer
+       // svg旋转魔改
+       svg.icon
+         transition: all .3s
+         &:hover
+           transform: rotate(360deg)

Hexo 三连即可看到效果。

横版导航栏二级菜单偏移量修正

如果你自己将洪哥的导航组件居中样式成功扒了下来，恭喜你可以参考这篇，因为你会发现每次更新导航栏内容时都要重新在 CSS 里调整二级导航栏的偏移量，这样会很麻烦。

修改<BlogRoot>\themes\butterfly\layout\includes\header\menu_item.pug在第 30 行左右

      else
        .menus_item
          a.site-page(href='javascript:void(0);')
            if label.split('||')[1]
              - var icon_label = trim(label.split('||')[1])
              if icon_label.substring(0,2)=="fa"
                i.fa-fw(class=icon_label)
              else if icon_label.substring(0,4)=="icon"
                svg.icon(aria-hidden="true")
                  use(xlink:href=`#`+ icon_label)
            span=' '+ trim(label.split('||')[0])
            i.fas.fa-chevron-down.expand(class=sidebarChildHide)
-         ul.menus_item_child
+         ul.menus_item_child(style='right:-' + (Object.keys(value).length)*45 + 'px')

删除<Custom>.css里这一段（若果你扒的时候加了这一行）

-#menus > div.menus_items > div:nth-child(1) > ul {
-  right: -???px !important;
-}
-#menus > div.menus_items > div:nth-child(2) > ul {
-  right: -???px !important;
-}
-#menus > div.menus_items > div:nth-child(3) > ul {
-  right: -???px !important;
-}
......

Hexo 三连即可看到效果

优点：以后更新导航栏内容时不用在 CSS 里调偏移量。缺点：显示效果没有那么居中，当然你很了解相关代码的话可以适当调整menu_item.pug文件里的数值计算关系，对于又有强迫症又菜的我来说还是选择手动调。

404 页面魔改

碎碎念

洪哥在 404 页面加上最新文章的想法非常 👍，一定程度上可留住一些访客，但该教程不适用于我的页面，配置出来 404 页面样式混乱，同时也影响了侧边小组件中的图片样式，而且 404.pug 文件位置也和我的不一样，于是我借着洪哥的思路重新适配了下我的 404 页面。如果你看他的教程配置时失败了，并且不知所措，可以参考下本节，自定义 CSS 文件中一些参数可以自定义调整。

预览效果

传送门 🌀

教程原贴

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

本节教程基于 butterfly3.7.7 版本写的，其他版本请自行测试。

修改<BlogRoot>themes\butterfly\layout\404.pug，直接 copy 过去覆盖即可

- var top_img = theme.error_404.background || theme.default_top_img
- var bg_img = `background-image: url('${url_for(top_img)}')`

#body-wrap.error
  div(style='display: none')
    include ./header/index.pug

  #error-wrap
    .error-content
      .error-img(style=bg_img)
      .error-info
        h1.error_title= '404'
        .error_subtitle= theme.error_404.subtitle
        a.button--animated(href=config.root)
          i.fas.fa-rocket
          = _p('error404.back_button')

  .aside-list-404
    .aside-list-group
      - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
      - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
      - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
        - let link = article.link || article.path
        - let title = article.title || _p('no_title')
        - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
        - let post_cover = article.cover
        .aside-list-item(class=no_cover)
          if post_cover && theme.cover.aside_enable
            a.thumbnail(href=url_for(link) title=title)
              img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
          .content
            a.title(href=url_for(link) title=title)= title
            if theme.aside.card_recent_post.sort === 'updated'
              time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
            else
              time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
      - })

在<Custom>.css文件添加

#error-wrap {
  top: 40%;
}

#error-wrap .error-content .error-info .error_title {
  margin-top: -3rem !important;
}

#error-wrap .error-content {
  box-shadow: none !important;
  border-radius: 12px;
  background: var(--harris-card-bg) !important;
}

.aside-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  bottom: 0px;
  position: absolute;
  padding: 20px;
  width: 100%;
  overflow: scroll;
}

.aside-list .aside-list-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 1500px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .aside-list .aside-list-group {
    margin: 0px 17%; //17% 适合最新文章数为5个，10% 适合6个
  }
}

.aside-list .aside-list-item {
  padding: 10px;
}

.aside-list .aside-list-item img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.3s;
}
.aside-list .aside-list-item img:hover {
  transform: scale(1.1);
}

.aside-list .aside-list-item .thumbnail {
  overflow: hidden;
  width: 230px;
  height: 143px;
  display: flex;
  background: var(--harris-card-bg);
}

.aside-list .aside-list-item .content .title {
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
  padding-top: 10px;
  color: var(--harris-fontcolor);
}

.aside-list .aside-list-item .content time {
  display: none;
}

#error-wrap .error-content .error-info a {
  border-radius: 10px;
  overflow: hidden;
}