前言：

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

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

H2Gitcalendar 样式微调

预览效果

教程原贴

H3配色

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

蒂芙尼蓝色调：

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

H3页面显示小更改

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

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

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

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

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

   jade

   #gitcalendar.gitcalendar #gitmessage(:style='{top:y+px,left:x+px,position: fixed,zIndex:9999}') .angle-wrapper span {{span1}}   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}} - {{thisday}} .contrib-column.table-column span.text-muted 最近一月摸鱼次数 span.contrib-number {{thisweekdatacore}} span.text-muted {{amonthago}} - {{thisday}} .contrib-column.table-column span.text-muted 最近一周摸鱼次数 span.contrib-number {{weekdatacore}} span.text-muted {{aweekago}} - {{thisday}}

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

   jade

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

3. Hexo 三连即可看到效果。

H2哔哔 bber 发布时间格式

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

预览效果

教程原贴

用过去多久来表示时间：

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

   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); })();

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

   diff

   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='')

3. Hexo 三连即可看到效果。

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

H2社交图标使用多色 svg

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

预览效果

教程原贴

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

   diff

   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)

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

H3svg 图标旋转效果

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

   diff

   .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)

2. Hexo 三连即可看到效果。

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

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

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

   diff

   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')

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

   diff

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

3. Hexo 三连即可看到效果

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

H2404 页面魔改

预览效果

教程原贴

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

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

   jade

   - 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)] - })

2. 在<Custom>.css文件添加

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

3. Hexo 三连即可看到效果。

结束语：

若是有疑问或建议欢迎留言。若想 get 本篇未记录的同款，请先查看更新手账，手账记录了本站 2021-01-23 以来几乎所有美化魔改微调的更新历史，且参考过他人的更新都附带有教程链接。若更新手账未记录，那么请自行F12