效果图

首页

essay页

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

大佬文章链接地址如下：

June大佬的即刻短文部署方案

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

安知鱼大佬的即刻短文部署方案

https://blog.anheyu.com/posts/c248.html

本文颜色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
/* 颜色 */
:root {
  --camelz-theme-op: #4259ef23;
  --camelz-gray-op: #9999992b;
  --camelz-theme-top: var(--camelz-theme);
  --camelz-white: #fff;
  --camelz-white-op: rgba(255, 255, 255, 0.2);
  --camelz-black: #000;
  --camelz-black-op: rgba(0, 0, 0, 0.2);
  --camelz-none: rgba(0, 0, 0, 0);
  --camelz-gray: #999999;
  --camelz-yellow: #ffc93e;
  --camelz-border-radius: 8px;
  --camelz-main: var(--camelz-theme);
  --camelz-main-op: var(--camelz-theme-op);
  --camelz-shadow-theme: 0 8px 12px -3px var(--camelz-theme-op);
  --camelz-shadow-main: 0 8px 12px -3px var(--camelz-main-op);
  --camelz-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
  --camelz-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
  --camelz-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
  --camelz-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
  --camelz-shadow-red: 0 8px 12px -3px #ee7d7936;
  --camelz-shadow-green: 0 8px 12px -3px #87ee7936;
  --camelz-shadow-border: 0 8px 16px -4px #2c2d300c;
  --camelz-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
  --camelz-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
  --style-border: 1px solid var(--camelz-card-border);
  --camelz-blue-main: #3b70fc;
  --style-border-hover: 1px solid var(--camelz-main);
  --style-border-dashed: 1px dashed var(--camelz-theme-op);
  --style-border-avatar: 4px solid var(--camelz-background);
  --style-border-always: 1px solid var(--camelz-card-border);
  --style-border-none: 1px solid transparent;
  --camelz-white-acrylic1: #fefeff !important;
  --camelz-white-acrylic2: #fcfdff !important;
  --camelz-black-acrylic2: #08080a !important;
  --camelz-black-acrylic1: #0b0b0e !important;
  --camelz-main-none: #b8b8b800 !important;
}

[data-theme="light"] {
  --camelz-theme: #3b70fc;
  --camelz-theme-deep: #1856fb;
  --camelz-theme-op: #4259ef23;
  --camelz-blue: #3b70fc;
  --camelz-red: #d8213c;
  --camelz-pink: #ff7c7c;
  --camelz-green: #57bd6a;
  --camelz-fontcolor: #363636;
  --camelz-background: #f7f9fe;
  --camelz-reverse: #000;
  --camelz-maskbg: rgba(255, 255, 255, 0.6);
  --camelz-maskbgdeep: rgba(255, 255, 255, 0.85);
  --camelz-hovertext: var(--camelz-theme);
  --camelz-ahoverbg: #f7f7fa;
  --camelz-lighttext: var(--camelz-main);
  --camelz-secondtext: rgba(60, 60, 67, 0.6);
  --camelz-scrollbar: rgba(60, 60, 67, 0.4);
  --camelz-card-btn-bg: #edf0f7;
  --camelz-post-blockquote-bg: #fafcff;
  --camelz-post-tabs-bg: #f2f5f8;
  --camelz-secondbg: #f1f3f8;
  --camelz-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --camelz-card-bg: #fff;
  --camelz-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --camelz-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --camelz-card-border: #e3e8f7;
}

[data-theme="dark"] {
  --global-bg: #191919;
  --camelz-theme: #0084ff;
  --camelz-theme-deep: #0076e5;
  --camelz-theme-op: #0084ff23;
  --camelz-blue: #0084ff;
  --camelz-red: #ff3842;
  --camelz-pink: #ff7c7c;
  --camelz-green: #57bd6a;
  --camelz-fontcolor: #f7f7fa;
  --camelz-background: #18171d;
  --camelz-reverse: #fff;
  --camelz-maskbg: rgba(0, 0, 0, 0.6);
  --camelz-maskbgdeep: rgba(0, 0, 0, 0.85);
  --camelz-hovertext: #0a84ff;
  --camelz-ahoverbg: #fff;
  --camelz-lighttext: #f2b94b;
  --camelz-secondtext: #a1a2b8;
  --camelz-scrollbar: rgba(200, 200, 223, 0.4);
  --camelz-card-btn-bg: #30343f;
  --camelz-post-blockquote-bg: #000;
  --camelz-post-tabs-bg: #121212;
  --camelz-secondbg: #30343f;
  --camelz-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
  --camelz-card-bg: #1d1b26;
  --camelz-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --camelz-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --camelz-card-border: #42444a;
}

添加即刻短文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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
- class_name: 即刻短文
  essay_list:
    - content: 完美解决essay时间问题，把essay.js里的GLOBAL_CONFIG.date_suffix 全部改成 GLOBAL_CONFIG.dateSuffix 就恢复正常了，谢谢大佬mosiv指点！！！
      date: 2024/09/28 23:34:00
      from: 駝駱仧
      link: https://blog.camelz.site/essay/
    - content: 经过测试发现应该是时间定义有问题，essay.yml只能写今天之前1月月的内容，一个月内的统统不能显示，搞不懂为什么，有大佬知道吗？
      date: 2024/08/13 18:00:00
      link: /music/
      from: 駝駱仧
    - content: 2024年也可以，估计是时间格式的问题，应该是要严格按这个格式 “2024/09/01 08:00:00” 操作才行,或“2024/09/01”
      date: 2024/08/13 08:00:00
      link: /music/
      from: 駝駱仧
    - content: 搞是搞好了，也会轮播了，但时间不能动，文章有不能添加，一添加essay页就没内容了，啥意思？
      date: 2024/08/25
      link: https://blog.camelz.cloudns.ch/essay/
    - content: 瞎逼逼
      date: 2024/08/23 08:00:00
      from: 駝駱仧
    - content: 什么植物？
      date: 2024/08/23 10:00:00
      image:
        - https://pic-bed1.xiagao.site//2024/image-20240719204248284.png
    - content: 测试
      date: 2024/08/19
    - content: 测试2
      date: 2024/08/20
      image:
        - https://pic-bed1.xiagao.site//2024/image-20240719204203278.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204248284.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204346603.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204425987.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204512739.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204346603.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204425987.png
        - https://pic-bed1.xiagao.site//2024/image-20240719204512739.png
    - content: 歌曲推荐
      date: 2024/08/25
      aplayer:
        server: tencent
        id: 001FGQba3i10mw
    - content: 看是不是真的不可以设置2022年之后
      date: 2024/08/27 08:00:00
      link: /music/
      from: 駝駱仧
    - content: 设置2024年看行不行
      date: 2024/08/26 08:00:00
      link: /music/
      from: 駝駱仧
    - content: 来个2024年看行不行
      date: 2024/08/01 08:00:00
      link: /music/
      from: 駝駱仧
    - content: 再试了一下，确实是不能把时间设置为一个月内，咋搞？
      date: 2024/08/11 08:11:00
      link: /about/
      from: 駝駱仧
    - content: 9-27新的测试
      date: "2024-09-27"
      from: 駝駱仧
    - content: 9-28测试
      date: 2024/09/28 23:30:00
      from: 駝駱仧

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
55
56
57
58
59
60
61
62
63
64
65
#essay_page
  .author-content.author-content-item.essayPage.single
    .card-content
      .author-content-item-tips 即刻短文
      span.author-content-item-title 咸鱼的日常生活。
      .content-bottom
        .tips 使用 即刻短文静态部署版 构建
      .banner-button-group
        a.banner-button(onclick='pjax.loadUrl("/about/")', data-pjax-state)
          i.fas.fa-circle-right(style='font-size: 1.5rem')
          span.banner-button-text 关于我
  #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], style="max-width: 100%; height: auto; display: block; margin: 0 auto;")
                                                  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
287
288
289
290
291
292
293
294
295
296
#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(--theme-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 {
  object-fit: cover;
  max-height: 100%;
  border-radius: 12px;
}

#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 .datacont {
  order: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--camelz-fontcolor);
  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%;
}

#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 .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: 15rem;
  background: url(https://pic-bed1.xiagao.site/2024/image-20240719204346603.png) left 28% / cover no-repeat;
  border-radius: 12px;
  color: var(--camelz-white);
  overflow: hidden;
  margin-top: 0px;
  position: relative;
}
.author-content-item-tips {
	font-size: 12px;
	margin-left: 10px;
	margin-top: 10px;
}
.author-content-item-title {
	font-size: 30px;
	margin-left: 10px;
}
.content-bottom {
	position: absolute;
	bottom: 10px;
	margin-bottom: 10px;
	font-size: 17px;
	margin-left: 10px;
}

.banner-button-group {
	position: absolute;
	bottom: 35px;
	right: 18px;
	display: flex;
	justify-content: flex-end;
	font-size: 20px;
	margin-right: 20px;
}
#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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// 节流阀
var percentFlag = false;

// 防抖函数，优化滚动事件的频繁触发
function debounce(fn, delay) {
    let timer;
    return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

// 优化后的滚动处理函数
function essayScroll() {
    let scrollTop = document.documentElement.scrollTop || window.pageYOffset; // 当前滚动位置
    const waterfallResult = scrollTop % document.documentElement.clientHeight; // 滚动的视口高度余数

    if (
        !percentFlag &&
        waterfallResult + 100 >= document.documentElement.clientHeight &&
        document.querySelector("#waterfall")
    ) {
        waterfall("#waterfall"); // 直接调用瀑布流函数，不再使用 setTimeout
    } else {
        waterfall("#waterfall");
    }

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

    if (p && (p.offsetTop + p.offsetHeight / 2 < scrollBottom || 90 < waterfallResult)) {
        percentFlag = true;
    }
}

// 直接使用原生 replaceAll
function replaceAll(str, find, replace) {
    return str.replaceAll(find, replace);
}

// 优化后的 camelz 对象
var camelz = {
    diffDate: function (date, more = false) {
        const dateNow = new Date();
        const datePost = new Date(date);
        const dateDiff = dateNow - datePost;

        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.dateSuffix.day;
            } else if (hourCount >= 1) {
                result = parseInt(hourCount) + " " + GLOBAL_CONFIG.dateSuffix.hour;
            } else if (minuteCount >= 1) {
                result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.dateSuffix.min;
            } else {
                result = GLOBAL_CONFIG.dateSuffix.just;
            }
        } else {
            result = parseInt(dateDiff / day);
        }
        return result;
    },
    changeTimeInEssay: function () {
        document.querySelector("#bber") &&
        document.querySelectorAll("#bber time").forEach(function (timeElement) {
            const datetime = timeElement.getAttribute("datetime");
            timeElement.innerText = camelz.diffDate(datetime, true);
            timeElement.style.display = "inline";
        });
    },
    reflashEssayWaterFall: function () {
        document.querySelector("#waterfall") &&
        requestAnimationFrame(function () {
            waterfall("#waterfall");
            document.getElementById("waterfall").classList.add("show");
        });
    },
    commentText: function (txt = "好棒！") {
        const postCommentDom = document.querySelector("#post-comment");
        const domTop = postCommentDom.offsetTop;
        window.scrollTo(0, domTop - 80);

        function setText() {
            requestAnimationFrame(() => {
                const input = document.querySelector(".el-textarea__inner");
                if (!input) return setText();
                
                let evt = new Event("input", { bubbles: true });
                let inputValue = replaceAll(txt, "\n", "\n> ");
                input.value = `> ${inputValue}\n\n`;
                input.dispatchEvent(evt);
                input.focus();
                input.setSelectionRange(-1, -1);

                const commentTips = document.getElementById("comment-tips");
                if (commentTips) {
                    commentTips.classList.add("show");
                }
            });
        }
        setText();
    },
    initIndexEssay: function () {
        setTimeout(() => {
            const essayBarSwiper = new Swiper(".essay_bar_swiper_container", {
                passiveListeners: true,
                direction: "vertical",
                loop: true,
                autoplay: {
                    disableOnInteraction: true,
                    delay: 3000,
                },
                mousewheel: true,
            });

            const essayBarContainer = document.getElementById("bbtalk");
            if (essayBarContainer) {
                essayBarContainer.onmouseenter = function () {
                    essayBarSwiper.autoplay.stop();
                };
                essayBarContainer.onmouseleave = function () {
                    essayBarSwiper.autoplay.start();
                };
            }
        }, 100);
    },
};

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

// 使用防抖优化的滚动事件监听器
window.addEventListener("scroll", debounce(essayScroll, 200));

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
12
13
14
# 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">
    - <link rel="stylesheet" href="/css/swiper.min.css">
    - <link rel="stylesheet" href="/css/progress_bar.css">
  bottom:
    - <script async data-pjax src="/js/custom.js"></script>
    - <script async data-pjax src="/js/essay.js"></script>
    - <script async data-pjax src="/js/waterfall.js"></script>
    - <script data-pjax src="/js/swiper.min.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.fa.fa-angle-double-right
        #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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
···

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
    if theme.preloader.enable
      !=partial('includes/loading/index', {}, {cache: true})

    if theme.background
      #web_bg(style=getBgPath(theme.background))
      
    !=partial('includes/sidebar', {}, {cache: true})

    #body-wrap(class=pageType)
      include ./header/index.pug
+      main#blog-container  /*注意这里要引入
+        if (is_home())
+          include ./bbTimeList.pug

      #content-inner.layout(class=hideAside)  /*注意原本这里的main移动到上侧
        if body
          div!= body
        else
          block content
          if theme.aside.enable && page.aside !== false
            include widget/index.pug

      - const footerBg = theme.footer_img
      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache: true})

    include ./rightside.pug
    include ./additional-js.pug
···

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: 1400px;
    margin: 2px auto -30px;
    width: 100%;
    padding: 0 15px
}

@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