[二创]在你的Butterfly上部署哔哔吧！
序言
改前须知
其实咱这都不叫二创了，
美化的时候需要修改网站的源文件、添加样式、js之类的，需要一点基础，可以参考
本教程针对Butterfly4.13，Anzhiyu主题请自行查找Bing，Ariasaka主题可以看June大佬的
效果
步骤
创建页面
在git bash中运行命令hexo new page "essay"
打开[BlogRoot]\source\essay\index.md，填写一下配置---
title: 闲言碎语-记录美好生活（＾∀＾●）ﾉｼ
date: 2024-07-18 19:13:59
aside: false
type: essay
---
配置说说
在[BlogRoot]\source\_data\目录创建essay.yml，这里给出一个模版，大家可以按照这些来实现填写你的说说- class_name: 即刻短文
essay_list:
- content: 即刻短文搭起来啦🎉🎉🎉
date: 2024/07/19 15:52:50
from: Hantafrog
location: 广州
- content: 太难了，出这么多Bug终于搭好了😭
date: 2024/07/19 15:53:19
from: Hantafrog
link: https://exef-star.github.io/essay
location: 广州
- content: 还是可以的😂
date: 2024/07/19
from: Hantafrog
image:
- https://pic.imgdb.cn/item/66921dadd9c307b7e9da1e0e.png
location: 广州
- content: 又出Bug了，好好好，就你叫瀑布流是吧￣へ￣
date: 2024/07/20
from: Hantafrog
image:
- https://s21.ax1x.com/2024/07/20/pkTsqFs.png
location: 广州
- content: 很抽象的一首歌(歌名)，好听(●ˇ∀ˇ●)
date: 2024/07/21
from: Hantafrog
link: https://music.163.com/#/song?id=448741213
location: 广州
定义页面
在[blogRoot]\themes\Butterfly\layout\includes\page\创建essay.pug#essay_page
#bber
section.timeline.page-1
ul#waterfall.list
each i in site.data.essay
each item, index in i.essay_list
if index < 50
li.bber-item
.bber-content
p.datacont!= item.content
if item.image
.bber-container-img
if item.image.length === 1
a.bber-content-img-one(href=item.image[0], target="_blank", data-fancybox="gallery", data-caption="")
img(src=item.image[0])
else
each iten, indey in item.image
a.bber-content-img(href=item.image[indey], target="_blank", data-fancybox="gallery", data-caption="")
img(src=item.image[indey])
.bber-content-noimg
.bber-content-noimg
.bber-content-noimg
if item.aplayer
.bber-music
.aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type="song" data-order="list" data-preload="none" data-autoplay="false" data-mutex="true" data-theme='var(--june-main)')
if item.bilibili
div.aspect-ratio
iframe(src="https://player.bilibili.com/player.html?bvid="+ item.bilibili +"&&page=1&as_wide=1&high_quality=1&danmaku=0&autoplay=false", scrolling="no", border="0", frameborder="no", framespacing="0", high_quality="1", danmaku="1", allowfullscreen="true")
hr
.bber-bottom
.bber-info
.bber-info-time
- var datedata = new Date(item.date).toISOString()
i.far.fa-clock
time.datatime(datetime= item.date)= datedata
if item.link
a.bber-content-link(target="_blank", title="跳转到短文指引的链接", href=item.link, rel="external nofollow")
i.fas.fa-link
| 链接
if item.from
.bber-info-from
i.fas.fa-fire
span=item.from
if item.location
.bber-info-from
i.fas.fa-location-dot
span=item.location
-
var regexBr = /<br\s*\/?>/gi;
var contentText = item.content.replace(regexBr, '');
.bber-reply(onclick="june.commentText(" + `'${contentText}'` + ")", title="评论一下吧")
i.fa-solid.fa-comment
#bber-tips(style='color: var(--june-secondtext);')
| - 只展示最近50条短文 -
修改文件
修改[blogRoot]\themes\butterfly\layout\page.pugextends includes/layout.pug
block content
#page
if top_img === false
h1.page-title= page.title
case page.type
+ when 'essay'
+ include includes/page/essay.pug
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
default
include includes/page/default-page.pug
if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
!=partial('includes/third-party/comments/index', {}, {cache: true})
添加CSS
在[blogRoot]\themes\butterfly\source\css\添加essay_page.css
这里与June大佬的css相比没有瀑布流的css，在Butterfly4.13版本测试发现瀑布流部分的css会导致pug不显示，遂删除瀑布流css就会正常了
#page:has(#essay_page) { |
最后记得在
_config.butterfly.yml中的inject引入inject: |
添加JS
在[blogRoot]\themes\butterfly\source\js\添加essay.js和waterfall.js
essay.js
var percentFlag = false; // 节流阀 |
waterfall.jsfunction waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0;
}
function c(a) {
return a + "px";
}
function d(a) {
return parseFloat(a.style.top);
}
function e(a) {
return parseFloat(a.style.left);
}
function f(a) {
return a.clientWidth;
}
function g(a) {
return a.clientHeight;
}
function h(a) {
return d(a) + g(a) + b("Bottom", a);
}
function i(a) {
return e(a) + f(a) + b("Right", a);
}
function j(a) {
a = a.sort(function (a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
});
}
function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function (a) {
return (a.style.position = "absolute"), a;
});
a.style.position = "relative";
var m = [];
l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
(p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
(p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
}
最后别忘了在_config.butterfly.yml中的inject引入这两个jsinject:
bottom:
···
- <script src="/js/essay.js"></script>
- <script src="/js/waterfall.js"></script>
到这里就结束了，别忘了来上Hexo三连hexo cl&&hexo g&&hexo s
🍀全站使用Cloudflare🍀
🍁请勿滥用资源🍁
