butterfly即刻短文

布局之前先介绍两个大佬，一个是June，一个是安知鱼，我们即刻短文就是参考这个两个大佬的，自己做了稍稍改动

大佬文章链接地址如下：

June大佬的即刻短文部署方案,https://blog.june-pj.cn/posts/73e89de/

安知鱼大佬的即刻短文部署方案,https://blog.anheyu.com/posts/d50a.html#%E9%93%BE%E6%8E%A5%E5%8D%A1%E7%89%87-link

添加即刻短文page并看效果

1，新增essay页面

在博客根目录[blogRoot]运行hexo n page essay，并修改md文档source/essay/index.md 来生成页面 page

1
2
3
4
5
6
7
8
---
title: 即刻短文
date: 2024-09-7 08:06:17
comments: true
aside: false
top_img: false
type: essay
---

2，添加数据 essay.yml

添加source/_data/essay.yml

多了以下功能

  • content下添加<br>，实现换行

  • bilibili字段，插入BVid即可

    img

1
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
- class_name: 即刻短文
  essay_list:
    - content: 半夜刷到这个视频，给我绷不住了，连夜改了代码，适配了视频，发出来给大伙乐一乐
      bilibili: BV1RD421n7qo
      date: 2024/04/24
    - content:
        GitHub push开启代理： <br>
        git config --global http.proxy http://127.0.0.1:7890 <br>
        git config --global https.proxy http://127.0.0.1:7890 <br>
        关闭代理： <br>
        git config --global --unset http.proxy <br>
        git config --global --unset https.proxy <br>
      date: 2024/01/24 13:00:00
      from: June
    - content: 即刻短文搭起来啦🎉🎉🎉
      date: 2024/01/23 20:00:00
      from: June
    - content:
        IDM激活：<br>
        管理员身份打开PowerShell，<br>
        输入命令：irm https://massgrave.dev/ias | iex
      date: 2024/01/15
      link: https://massgrave.dev/idm-activation-script.html
    - content: 📮²⁰²⁴/₀₁.₀₁ 冬事未眠，祝我们都好在来年
      date: 2024/01/01
      image:
        - https://img.june-pj.cn/img/2024/01/23/6ac9ce1a846dbffe405ff18747fb07c.jpg
        - https://img.june-pj.cn/img/2024/01/23/1d54afeb4ba537ec21d96b8e76f99cb.jpg
        - https://img.june-pj.cn/img/cover.webp
        - https://img.june-pj.cn/img/2024/01/23/09846c94dc67c9455d0364046a71d37.jpg
      location: 深圳
    - content: 太棒啦，找到工作力😋
      image:
        - https://img.june-pj.cn/img/2024/01/23/20240123205614.png
      date: 2023/11/02
      from: June
      location: 长沙
    - content: 最近网易云音乐的会员忘记续费了，但充值活动还没到时间，就想着将就着听会，没想到歌单里蛮多想听的歌听不了，只能试听。这不能忍，直接在网上找到了Spotify，不过稍微有点麻烦。
      date: 2023/05/14
      link: https://blog.june-pj.cn/posts/a39a199/

3， 添加essay.pug

添加[blogRoot]\themes\Butterfly\layout\includes\page\essay.pug。如果需要修改图标，可以转到Font Awesome

1
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
#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(--camelz-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="camelz.commentText(" + `'${contentText}'` + ")", title="评论一下吧")
                                        i.fa-solid.fa-comment
    #bber-tips(style='color: var(--camelz-secondtext);')
        | - 只展示最近50条短文 -

4，修改 page.pug

在\themes\butterfly\layout的page.pug文件里找到case page.type，在其子项里面添加

1
2
3
4
5
6
7
8
9
    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

5，添加essay_page.css到[blogRoot]\source\css

1
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
278
279
280
281
282
283
284
285
286
#page:has(#essay_page) {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: var(--light-grey);
}
#page:has(#essay_page) .page-title {
    display: none;
}
#web_bg ~ .page:has(#essay_page) {
    background: transparent !important;
}
#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: var(--style-border-always);
    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(--camelz-card-bg);
    box-shadow: var(--camelz-shadow-border);
    margin-right: 2%;
}
#bber .timeline #waterfall.show {
    opacity: 1;
}
#bber .timeline #waterfall {
    opacity: 0;
    transition: all 0.3s ease 0s;
}
#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(--camelz-theme-op);
    width: 100%;
    content: linear-gradient(to right, var(--camelz-theme), var(--camelz-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(--camelz-fontcolor);
    font-size: 0.7rem;
    background-color: var(--camelz-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(--camelz);
}

#bber .timeline ul li.bber-item:hover {
    border: var(--style-border-hover);
}

#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(--camelz-main);
    color: var(--camelz-white);
}
#bber .bber-music {
    width: 100%;
    height: 90px;
    margin: 0.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: var(--style-border-always);
    background: var(--camelz-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(--camelz-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(--camelz-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.camelz-pj.cn/img/cover.webp) left 28% / cover no-repeat;
    color: var(--camelz-white);
    overflow: hidden;
    margin-top: 0px;
}
#page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {
    color: var(--camelz-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(--camelz-card-bg);
    color: var(--camelz-fontcolor);
}
#bber .aplayer .aplayer-lrc p {
    color: var(--camelz-fontcolor);
}

6，修改_config.butterfly.yml，开启Pjax

1
2
3
4
5
6
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: true
  exclude:

7，添加essay.js到[blogRoot]\source\js

1
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
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 camelz = {
    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 = camelz.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);
    },
};

camelz.initIndexEssay();
camelz.changeTimeInEssay();
camelz.reflashEssayWaterFall();

window.addEventListener("scroll", essayScroll);

8，添加waterfall.js到[blogRoot]\source\js

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

9，修改_config.butterfly.yml菜单menu，开启essay page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
menu:
   首页: / || fas fa-home
   文章||fa fa-folder:
     全部文章: /archives/ || fas fa-archive
     文章分类: /categories/ || fas fa-folder-open
     文章标签: /tags/ || fas fa-tags
     随机文章: /random/ || fa fa-random
   娱乐||fa fa-play-circle:
     Music: /music/ || fas fa-music
     Movie: /movies/ || fas fa-video
   社交||fas fa-user-plus:
     友人帐: /link/ || fas fa-link
     留言板: /comments/ || far fa-comments
     碎碎念: /essay/ || far fa-comments
#   About: /about/ || fas fa-heart

10，引入上述添加的js和css文件

在_config.butterfly.yml引入添加的js和css文件

1
2
3
4
5
6
7
8
9
10
11
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="/css/essay_page.css">
    - <link rel="stylesheet" href="/css/home_essay_bar.css">
  bottom:
    - <script src="/js/custom.js"></script>
    - <script src="/js/essay.js"></script>
    - <script src="/js/waterfall.js"></script>

11，看效果

1
hexo cl && hexo s

即刻短文添加首页显示

1，添加bbTimeList.pug

添加[blogRoot]\butterfly\layout\includes\bbTimeList.pug，需要自行更换图标icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#main_top.main_top
    #bbTimeList.bbTimeList.container
        i.iconfont.icon-laba.bber-logo
        #bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex="-1")
            #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl("/essay/")`)
                each i in site.data.essay
                    each item, index in i.essay_list
                        if index < 20
                            -
                                var regexBr = /<br\s*\/?>/gi;
                                var contentText = item.content.replace(regexBr, '');
                                contentText += item.image ? ' [图片]' : '';
                                contentText += item.bilibili ? ' [视频]' : '';
                            .li-style.swiper-slide= contentText

2，修改layout.pug

修改[blogRoot]\butterfly\layout\includes\layout.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
···
    #body-wrap(class=pageType)
      include ./header/index.pug
      main#content-inner    /*注意这里要引入
        if (is_home())
          include ./bbTimeList.pug
			
      #content-inner.layout(class=hideAside)  /*注意原本这里的main移动到上侧
        if body
          div!= body
        else
          block content
          
···

3，添加home_essay_bar.css

June大佬自用的样式，多了个main_top（参考Leonus的），自适应宽度

1
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
#main_top {
    z-index: 1;
    max-width: 1200px;
    margin: 2px auto -30px;
    width: 100%;
    padding: 0 10px
}

@media screen and (max-width: 768px) {
    div#main_top {
        padding: 10px 6px 0;
        margin: 0 0 -10px
    }
}

#bbTimeList {
    width: 100%;
    min-height: 50px;
    background: var(--card-bg);
    color: var(--camelz-fontcolor);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-weight: 700;
    border: var(--style-border);
    border-radius: 10px;
    box-shadow: var(--camelz-shadow-lightblack);
}

#bbtalk {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bber-talk {
    width: 100%;
    height: 25px;
    line-height: 25px;
    display: flex;
    flex-direction: column;
}

.bber-logo {
    font-size: 1.5rem !important;
    line-height: 22px;
    transition: all 0.3s ease 0s;
}

#bber-talk .li-style {
    width: 100%;
    max-width: 100%;
    height: 25px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
    font-weight: 700;
    margin: auto;
    cursor: pointer;
    white-space: nowrap;
}

#bbTimeList:hover {
    border: var(--style-border-hover);
    box-shadow: var(--camelz-shadow-main);
}

4，引入 swiper 依赖

在_config.butterfly.yml引入依赖, 如果有使用轮播图插件的话此处无需引入

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css">
  bottom:
    - <script data-pjax src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script>

5，看效果

1
hexo cl && hexo s