[二创]在你的Butterfly上部署哔哔吧！

序言

改前须知

其实咱这都不叫二创了，June转载安知鱼的，我又转载June大佬的。都不用叫三创了，叫奥创得了(●'◡'●)

美化的时候需要修改网站的源文件、添加样式、js之类的，需要一点基础，可以参考

Hexo博客添加自定义css和js文件

https://b.leonus.cn/2022/custom.html

本教程针对Butterfly4.13，Anzhiyu主题请自行查找Bing，Ariasaka主题可以看June大佬的

Butterfly即刻短文

https://blog.june-pj.cn/posts/73e89de/

效果

步骤

创建页面

在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.pug

extends 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) {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}
#page:has(#essay_page) .page-title {
    display: none;
}
#web_bg ~ .page:has(#essay_page) {
    background: var(--june-background);
}
#bber .bber-container-img {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
#bber .bber-container-img .bber-content-noimg {
    width: calc(100% / 4 - 5px);
}

#bber .bber-content-img img,
#bber .bber-content-img-one img {
    object-fit: cover;
    max-height: 100%;
    border-radius: 12px;
    width: 100%;
}

#bber .bber-content-img {
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    position: relative;
    width: calc(100% / 4 - 5px);
    margin-bottom: 10px;
}

#bber .bber-content-img-one {
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}


#bber .bber-content .datacont {
    order: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--font-color);
    width: 100%;
    line-height: 1.38;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    text-align: justify;
}
#bber p {
    margin: 0px;
}
#bber div.bber-content {
    display: flex;
    flex-flow: wrap;
    border-radius: 12px;
    width: 100%;
    height: 100%;
}
#bber .timeline ul li.bber-item {
    position: relative;
    width: 32%;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 1rem 1rem 0.5rem;
    transition: all 0.3s ease 0s;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--june-card-bg);
    box-shadow: var(--june-shadow-border);
    margin-right: 2%;
}
#bber ul.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
#bber {
    margin-top: 1rem;
    width: 100%;
}
#bber > section > ul > li.bber-item {
    margin-bottom: 1rem;
}

#bber-tips {
    font-size: 14px;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

#bber .timeline ul li.bber-item hr {
    display: flex;
    position: relative;
    margin: 8px 0px;
    border: 1px dashed var(--june-theme-op);
    width: 100%;
    content: linear-gradient(to right, var(--june-theme), var(--june-theme));
}

#bber .bber-info {
    display: flex;
    align-items: center;
}

#bber > section > ul > li > div .bber-info-time,
#bber > section > ul > li > div .bber-info-from {
    color: var(--june-fontcolor);
    font-size: 0.7rem;
    background-color: var(--june-gray-op);
    padding: 0px 8px;
    border-radius: 20px;
    cursor: default;
    display: flex;
    align-items: center;
}

#bber .bber-info .far.fa-clock {
    margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-from span,
#bber > section > ul > li > div .bber-info-from {
    margin-left: 4px;
}

#bber .bber-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

#bber .bber-bottom .bber-reply {
    cursor: pointer;
}

#bber .bber-bottom .bber-reply :hover{
    color: var(--june);
}

#bber .timeline ul li.bber-item:hover {
    border: 1px solid #000;
}

#bber .bber-content-link {
    display: flex;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    align-items: center;
    background-color: rgba(245, 108, 108, 0.13);
    color: rgb(245, 108, 108);
    padding: 0px 8px;
    border-radius: 20px;
}
#bber .bber-content-link i {
    margin-right: 3px;
}
#bber .bber-content-link:hover {
    background-color: var(--june-main);
    color: var(--june-white);
}
#bber .bber-music {
    width: 100%;
    height: 90px;
    margin: 0.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: var(--style-border-always);
    background: var(--june-secondbg);
}
#bber .aplayer {
    margin: 0;
}

#bber .aplayer.aplayer-withlrc .aplayer-pic {
    height: 82px;
    width: 82px;
    margin: 4px;
    border-radius: 4px;
}
.bber-music .aplayer.aplayer-withlrc .aplayer-info {
    padding: 5px 7px 0;
}
#bber .aplayer .aplayer-info .aplayer-music {
    height: 23px;
}
#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--june-fontcolor);
}

#bber .aplayer .aplayer-info .aplayer-controller {
    align-items: center;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    padding: 0;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: initial;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    background: var(--june-gray);
    height: 8px;
    border-radius: 12px;
    transition: 0.3s;
    overflow: hidden;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    height: 100%;
    border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 100%;
    border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    display: none;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: initial;
}

/* 顶部样式 */
.author-content.author-content-item.essayPage {
    height: 19rem;
    background: url(https://img.june-pj.cn/img/cover.webp) left 28% / cover no-repeat;
    color: var(--june-white);
    overflow: hidden;
    margin-top: 0px;
}
#page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {
    color: var(--june-white);
    border-radius: 20px !important;
}

/* 响应式 */
@media screen and (max-width: 1300px) {
    #bber .timeline ul li.bber-item {
        width: 49%;
        margin-right: 1%;
    }
}
@media screen and (max-width: 768px) {
    #bber .timeline ul li.bber-item {
        width: 100%;
        margin-right: 0px;
    }
}
[data-theme="dark"] #bber .bber-music .aplayer,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
    background: var(--june-card-bg);
    color: var(--june-fontcolor);
}
#bber .aplayer .aplayer-lrc p {
    color: var(--june-fontcolor);
}

最后记得在_config.butterfly.yml中的inject引入

inject:
   head:
   ···
   - <link rel="stylesheet" href="/css/essay_page.css">

添加JS

在[blogRoot]\themes\butterfly\source\js\添加essay.js和waterfall.js

essay.js

var percentFlag = false; // 节流阀
function essayScroll() {
    let a = document.documentElement.scrollTop || window.pageYOffset; // 当前滚动位置
    const waterfallResult = a % document.documentElement.clientHeight; // 滚动的视口高度余数

    if (
        !percentFlag &&
        waterfallResult + 100 >= document.documentElement.clientHeight &&
        document.querySelector("#waterfall")
    ) {
        setTimeout(() => {
            waterfall("#waterfall");
        }, 500);
    } else {
        setTimeout(() => {
            document.querySelector("#waterfall") && waterfall("#waterfall");
        }, 500);
    }

    const r = window.scrollY + document.documentElement.clientHeight;
    let p = document.getElementById("post-comment") || document.getElementById("footer");

    (p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
    return e.split(n).join(t);
}
var june = {
    diffDate: function (d, more = false) {
        const dateNow = new Date();
        const datePost = new Date(d);
        const dateDiff = dateNow.getTime() - datePost.getTime();
        const minute = 1000 * 60;
        const hour = minute * 60;
        const day = hour * 24;
        const month = day * 30;

        let result;
        if (more) {
            const monthCount = dateDiff / month;
            const dayCount = dateDiff / day;
            const hourCount = dateDiff / hour;
            const minuteCount = dateDiff / minute;

            if (monthCount >= 1) {
                result = datePost.toLocaleDateString().replace(/\//g, "-");
            } else if (dayCount >= 1) {
                result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
            } else if (hourCount >= 1) {
                result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
            } else if (minuteCount >= 1) {
                result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
            } else {
                result = GLOBAL_CONFIG.date_suffix.just;
            }
        } else {
            result = parseInt(dateDiff / day);
        }
        return result;
    },
    changeTimeInEssay: function () {
        document.querySelector("#bber") &&
        document.querySelectorAll("#bber time").forEach(function (e) {
            var t = e,
                datetime = t.getAttribute("datetime");
            (t.innerText = june.diffDate(datetime, true)), (t.style.display = "inline");
        });
    },
    reflashEssayWaterFall: function () {
        document.querySelector("#waterfall") &&
        setTimeout(function () {
            waterfall("#waterfall");
            document.getElementById("waterfall").classList.add("show");
        }, 500);
    },
    commentText: function (txt) {
        const postCommentDom = document.querySelector("#post-comment");
        var domTop = postCommentDom.offsetTop;
        window.scrollTo(0, domTop - 80);
        if (txt == "undefined" || txt == "null") txt = "好棒！";
        function setText() {
            setTimeout(() => {
                var input = document.getElementsByClassName("el-textarea__inner")[0];
                if (!input) setText();
                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("input", true, true);
                let inputValue = replaceAll(txt, "\n", "\n> ");
                input.value = "> " + inputValue + "\n\n";
                input.dispatchEvent(evt);
                input.focus();
                input.setSelectionRange(-1, -1);
                if (document.getElementById("comment-tips")) {
                    document.getElementById("comment-tips").classList.add("show");
                }
            }, 100);
        }
        setText();
    },
    initIndexEssay: function () {
        setTimeout(() => {
            let essay_bar_swiper = new Swiper(".essay_bar_swiper_container", {
                passiveListeners: true,
                direction: "vertical",
                loop: true,
                autoplay: {
                    disableOnInteraction: true,
                    delay: 3000,
                },
                mousewheel: true,
            });

            let essay_bar_comtainer = document.getElementById("bbtalk");
            if (essay_bar_comtainer !== null) {
                essay_bar_comtainer.onmouseenter = function () {
                    essay_bar_swiper.autoplay.stop();
                };
                essay_bar_comtainer.onmouseleave = function () {
                    essay_bar_swiper.autoplay.start();
                };
            }
        }, 100);
    },
};

june.initIndexEssay();
june.changeTimeInEssay();
june.reflashEssayWaterFall();

window.addEventListener("scroll", essayScroll);

waterfall.js

function 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引入这两个js

inject:
   bottom:
   ···
   - <script src="/js/essay.js"></script>
   - <script src="/js/waterfall.js"></script>

到这里就结束了，别忘了来上Hexo三连

hexo cl&&hexo g&&hexo s