Butterfly博客二创集锦
前言:
本篇是使用其他优秀博主教程时延申出来的 idea。目前有很多 Butterfly 主题美化魔改教程,此篇就不重复造轮子。本篇将记录值得的二创瞬间。建议先看教程原贴,因为本篇是原教程的拓展延伸。
点击查看更新日志
更新日志
- 404 页面魔改(适配 butterfly 3.7.7 版本)
- 404 页面魔改
- svg 图标旋转效果
- 横版导航栏二级菜单偏移量修正
- 社交图标使用多色 svg
Gitcalendar 样式微调
哔哔 bber 发布时间格式
Gitcalendar 样式微调
预览效果
配色
我是用 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
Code1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54#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}}修改
<BlogRoot>\themes\butterfly\layout\includes\gitcalendar-js.pug
Code1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260script.
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
。
预览效果
用过去多久来表示时间:
新建
<BlogRoot>\themes\butterfly\source\js\bber.js
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278if (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
diff1
2
3
4
5
6
7script.
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 已经写了教程,本篇仅供参考)。
预览效果
修改
<BlogRoot>themes\butterfly\layout\includes\header\social.pug
diff1
2
3
4
5
6
7
8
9
10
11
12
13each 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 行左右diff1
2
3
4
5
6
7
8
9
10.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 行左右diff1
2
3
4
5
6
7
8
9
10
11
12
13
14else
.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
里这一段(若果你扒的时候加了这一行)diff1
2
3
4
5
6
7
8
9
10-#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 文件中一些参数可以自定义调整。
预览效果
修改
<BlogRoot>themes\butterfly\layout\404.pug
,直接 copy 过去覆盖即可Code1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37- 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
文件添加css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81#error-wrap {
top: 40%;
}
#error-wrap .error-content .error-info .error_title {
margin-top: -3rem ;
}
#error-wrap .error-content {
box-shadow: none ;
border-radius: 12px;
background: var(--harris-card-bg) ;
}
.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;
}Hexo 三连即可看到效果。
结束语:
若是有疑问或建议欢迎留言。若想 get 本篇未记录的同款,请先查看更新手账,手账记录了本站 2021-01-23 以来几乎所有美化魔改微调的更新历史,且参考过他人的更新都附带有教程链接。若更新手账未记录,那么请自行
F12