给你的 Hexo 博客添加灯笼和春联「改进」

0. 背景

你好，我是悦创。

作为大部分修改或魔改 hexo 主题的我，我除了自己的开发还会参考其他大佬的魔改，在我能力与时间范围内我就会实操。

本文仅做整合和部分改进，参考以下两位大佬的博客：

梦爱吃鱼 在群里分享给我：

梦爱吃鱼

这里我先放上原文件的内容，路径：

  • \themes\anzhiyu\layout\includes\loading
  • \themes\anzhiyu\source\css\_global
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
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    .left-panel
      .couplet-container
        .couplet-decor.top
        .couplet 三阳启泰人间喜
        .couplet-decor.bottom
    .center-panel
      .horizontal-scroll
        .couplet-decor.left
        .couplet 鹏程万里
        .couplet-decor.right
    .right-panel
      .couplet-container
        .couplet-decor.top
        .couplet 五福临门大地春
        .couplet-decor.bottom

  //- 添加灯笼到开屏加载页面
  .deng-box1
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 春
      .shui.shui-a
        .shui-c
        .shui-b
  .deng-box2
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 节
      .shui.shui-a
        .shui-c
        .shui-b
  .deng-box3
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 乐
      .shui.shui-a
        .shui-c
        .shui-b
  .deng-box4
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 快
      .shui.shui-a
        .shui-c
        .shui-b

script.
  const preloader = {
    endLoading: () => {
      document.getElementById('loading-box').classList.add("loaded");
    },
    initLoading: () => {
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })
  setTimeout(function(){preloader.endLoading();},10000)
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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
if hexo-config('preloader')
  .loading-bg
    display: flex
    width: 100%
    height: 100%
    position: fixed
    z-index: 1001
    transition: 0.3s
    background: transparent
    pointer-events: none

    .left-panel, .right-panel
      width: 50%
      height: 100%
      background: var(--anzhiyu-background)
      position: fixed
      top: 0
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)
      display: flex
      align-items: center
      justify-content: center

    .couplet-container
      background: rgba(216, 0, 15, 0.8)
      position: relative
      box-shadow: 0 0 20px rgba(220, 143, 3, 0.1)
      border-radius: 30px 30px 5px 5px
      width: 90px
      height: 450px
      display: flex
      align-items: center
      justify-content: center
      border: 4px solid #ffd900d4
      
      // 添加内层边框
      &:before
        content: ""
        position: absolute
        top: 10px
        left: 10px
        right: 10px
        bottom: 10px
        border: 2px solid #ffd900d4
        border-radius: 25px 25px 3px 3px
        opacity: 0.6

      // 添加上下部装饰
      .couplet-decor
        &.top
          position: absolute
          top: -15px
          left: 50%
          transform: translateX(-50%)
          width: 50px
          height: 30px
          background: rgba(216, 0, 15, 0.8)
          border: 4px solid #ffd900d4
          border-radius: 15px 15px 0 0
          &:before
            content: ""
            position: absolute
            top: -12px
            left: 50%
            transform: translateX(-50%)
            width: 20px
            height: 20px
            background: rgba(216, 0, 15, 0.8)
            border: 4px solid #dcbf03
            border-radius: 50%
        &.bottom
          position: absolute
          bottom: -15px
          left: 50%
          transform: translateX(-50%)
          width: 50px
          height: 30px
          background: rgba(216, 0, 15, 0.8)
          border: 4px solid #ffd900d4
          border-radius: 0 0 15px 15px
          &:after
            content: ""
            position: absolute
            bottom: -12px
            left: 50%
            transform: translateX(-50%)
            width: 20px
            height: 20px
            background: rgba(216, 0, 15, 0.8)
            border: 4px solid #ffd900d4
            border-radius: 50%

    .couplet
      color: #ffd900d4
      font-size: 2.5rem
      writing-mode: vertical-rl
      font-family: "华文行楷", cursive
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)
      position: relative
      z-index: 1
      letter-spacing: 15px
      line-height: 1.3
      font-weight: bold
      margin: 0 auto

    .left-panel
      left: 0
      transform: translateX(-100%)
      
    .right-panel
      right: 0
      transform: translateX(100%)

    .center-panel
      position: fixed
      top: 50px
      left: 50%
      transform: translateX(-50%)
      z-index: 2
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)
      
      .horizontal-scroll
        background: rgba(216, 0, 15, 0.8)
        width: 240px
        height: 80px
        border: 4px solid #ffd900d4
        border-radius: 20px
        position: relative
        box-shadow: 0 0 20px rgba(220, 143, 3, 0.1)
        display: flex
        align-items: center
        justify-content: center
        box-sizing: border-box
        padding: 0 25px
        
        // 内层边框
        &:before
          content: ""
          position: absolute
          top: 10px
          left: 10px
          right: 10px
          bottom: 10px
          border: 2px solid #ffd900d4
          border-radius: 25px
          opacity: 0.6
        
        // 左右装饰
        .couplet-decor
          &.left, &.right
            position: absolute
            top: 50%
            transform: translateY(-50%)
            width: 30px
            height: 50px
            background: rgba(216, 0, 15, 0.8)
            border: 4px solid #ffd900d4
            
          &.left
            left: -15px
            border-radius: 15px 0 0 15px
            &:before
              content: ""
              position: absolute
              left: -12px
              top: 50%
              transform: translateY(-50%)
              width: 20px
              height: 20px
              background: rgba(216, 0, 15, 0.8)
              border: 4px solid #ffd900d4
              border-radius: 50%
            
          &.right
            right: -15px
            border-radius: 0 15px 15px 0
            &:after
              content: ""
              position: absolute
              right: -12px
              top: 50%
              transform: translateY(-50%)
              width: 20px
              height: 20px
              background: rgba(216, 0, 15, 0.8)
              border: 4px solid #ffd900d4
              border-radius: 50%

        .couplet
          color: #ffd900d4
          font-size: 2.5rem
          writing-mode: horizontal-tb
          font-family: "华文行楷", cursive
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)
          position: relative
          z-index: 1
          letter-spacing: 0.3em
          font-weight: bold
          text-align: center
          white-space: nowrap
          margin-left: 0.3em;

  #loading-box
    user-select: none
    position: fixed
    z-index: 1001
    width: 100%
    height: 100%
    transition: all 0.3s ease-out
    pointer-events: none
    
    // 默认状态：面板合拢
    .left-panel
      transform: translateX(0)
    .right-panel
      transform: translateX(0)
    
    // 加载完成：面板分开
    &.loaded
      .left-panel
        transform: translateX(-100%)
      .right-panel
        transform: translateX(100%)
      .center-panel
        transform: translateX(-50%) translateY(-200%)

  // 添加灯笼样式
  for num in 1 2 3 4
    .deng-box{num}
      position: fixed
      z-index: 9999
      pointer-events: none

  .deng-box1
    top: -30px
    left: -1px

  .deng-box2
    top: -25px
    left: 184px

  .deng-box3
    top: -28px
    right: 11px

  .deng-box4
    top: -26px
    right: 183px

  .deng
    position: relative
    width: 120px
    height: 90px
    margin: 50px
    background: rgba(216, 0, 15, 0.8)
    border-radius: 50% 50%
    transform-origin: 50% -100px
    animation: swing 3s infinite ease-in-out
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1)

    &:before
      position: absolute
      top: -7px
      left: 29px
      height: 12px
      width: 60px
      content: " "
      display: block
      z-index: 999
      border-radius: 5px 5px 0 0
      border: solid 1px #dc8f03
      background: #ffa500
      background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03)

    &:after
      position: absolute
      bottom: -7px
      left: 10px
      height: 12px
      width: 60px
      content: " "
      display: block
      margin-left: 20px
      border-radius: 0 0 5px 5px
      border: solid 1px #dc8f03
      background: #ffa500
      background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03)

  .deng-a
    width: 100px
    height: 90px
    background: rgba(216, 0, 15, 0.1)
    margin: 12px 8px 8px 10px
    border-radius: 50% 50%
    border: 2px solid #dc8f03

  .deng-b
    width: 45px
    height: 90px
    background: rgba(216, 0, 15, 0.1)
    margin: -2px 8px 8px 26px
    border-radius: 50% 50%
    border: 2px solid #dc8f03

  .xian
    position: absolute
    top: -50px
    left: 60px
    width: 2px
    height: 50px
    background: #dc8f03

  .shui-a
    position: relative
    width: 5px
    height: 20px
    margin: -5px 0 0 59px
    animation: swing 4s infinite ease-in-out
    transform-origin: 50% -45px
    background: #ffa500
    border-radius: 0 0 5px 5px

  .shui-b
    position: absolute
    top: 14px
    left: -2px
    width: 10px
    height: 10px
    background: #dc8f03
    border-radius: 50%

  .shui-c
    position: absolute
    top: 18px
    left: -2px
    width: 10px
    height: 35px
    background: #ffa500
    border-radius: 0 0 0 5px

  .deng-t
    font-family: "华文行楷", Arial, Lucida Grande, Tahoma, sans-serif
    font-size: 3.2rem
    color: #dc8f03
    font-weight: bold
    line-height: 85px
    text-align: center

  @keyframes swing
    0%
      transform: rotate(-10deg)
    50%
      transform: rotate(10deg)
    100%
      transform: rotate(-10deg)

  // 适配暗色模式
  [data-theme='dark']
    .deng
      background: rgba(216, 0, 15, 0.8)
    .deng-a,
    .deng-b
      background: rgba(216, 0, 15, 0.1)

@media screen and (max-width: 768px)
  if hexo-config('preloader')
    // 在移动端隐藏灯笼
    .deng-box1,
    .deng-box2,
    .deng-box3,
    .deng-box4
      display: none !important

两个大佬的实现上略有差别，但是虽然有点“渣”，我各有所爱。

  • 梦爱吃鱼：实现的登陆的间距我很喜欢，但是是全屏加载。我一般喜欢进度条加载，并且不能灵活关闭（虽然，我可以通过改变加载动画来关闭，但显然不是我最想要的）；
  • 琅環书生：可以实现 config 进行配置开关，这个看起来很不错；
琅環书生原文
  • 修改 themes\anzhiyu\layout\includes\layout.pug 文件，新增下列代码，大概是在第 9 行，其实 pug 文件最好使用 pug 语法，我是因为懒，实在不想再转换了，就直接使用 html 了。
1
2
3
4
5
6
html(charset='utf-8' lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
+    if theme.denglong.enable
+      <div class="denglong"><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box4"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div></div>
  body(data-type="anzhiyu")
  • 主题配置文件新增全局开关，在 themes\anzhiyu\_config.yml 文件中，新增下列代码：
1
2
+ denglong:
+   enable: true  #true 开启 false关闭
  • 修改 themes\anzhiyu\layout\includes\loading\fullpage-loading.pug 文件按，新增春联的 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
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    img.loading-img(class='nolazyload' src=url_for(loading_img))
    img.loading-image-dot(class='nolazyload' src=url_for(loading_dot))
+    if theme.duilian.enable
+      div.duilian
+        .left-panel
+          .couplet-container
+            .couplet-decor.top
+            .couplet
+              p=theme.duilian.left_panel
+            .couplet-decor.bottom
+        .center-panel
+          .horizontal-scroll
+            .couplet-decor.left
+            .couplet
+              p=theme.duilian.center_panel
+            .couplet-decor.right
+        .right-panel
+          .couplet-container
+            .couplet-decor.top
+            .couplet
+              p=theme.duilian.right_panel
+            .couplet-decor.bottom
script.
  • 主题配置文件新增全局开关（主要是方便后续进行管理，避免了一直修改 pug 文件的繁琐。true=开启 或者 false 关闭 , 也可以自定义春联的内容（有精力的也可以将其调用春联的 API, 实现每次刷新自动更换春联内容）在 themes\anzhiyu\_config.yml 文件中，新增下列代码：
1
2
3
4
5
+ duilian: 
+   enable: true  #true 开启 false关闭
+   center_panel: 金蛇献瑞
+   left_panel: 天增岁月人增寿
+   right_panel: 春满乾坤福满楼
  • 在 themes\anzhiyu\source\css\ 目录下，新增样式，如 chinese-new-year.css，我将上述灯笼和春联的 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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
/* 新年灯笼🏮 */
.deng-box1 {
    position: fixed;
    top: -30px;
    left: 10px;
    z-index: 9999;
    pointer-events: none;
}
.deng-box2 {
    position: fixed;
    top: -30px;
    right: 10px;
    z-index: 9999;
    pointer-events: none;
}
.deng-box3 {
    position: fixed;
    top: -40px;
    left: -20px;
    z-index: 9998;
    pointer-events: none;
}
.deng-box4 {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 9998;
    pointer-events: none;
}
.deng-box4 .deng, .deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, .8);
    border-radius: 50% 50%;
    transform-origin: 50% -100px;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px #fc903d;
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, .8);
    border-radius: 50% 50%;
    transform-origin: 50% -100px;
    animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px #fa6c00;
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, .1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, .1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    animation: swing 4s infinite ease-in-out;
    transform-origin: 50% -45px;
    background: orange;
    border-radius: 0 0 5px 5px;
}
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: orange;
    border-radius: 0 0 0 5px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: orange;
    background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
}
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: orange;
    background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
}
.deng-t {
    font-family: chengrongguangke, 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
    font-size: 4.5rem;
    color: #dc8f03;
    font-weight: 500;
    line-height: 85px;
    text-align: center;
    margin: 0 0 0 -16px;
}
.night .deng-box2,
.night .deng-box4,
.night .deng-t {
    background: 0 0!important;
}
@-moz-keyframes swing {
    0% { -moz-transform: rotate(-10deg); }
    50% { -moz-transform: rotate(10deg); }
    100% { -moz-transform: rotate(-10deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}


/* 对联 */
.loading-bg .duilian .left-panel,
.loading-bg .duilian .right-panel {
  width: 40%;
  height: 100%;
  position: fixed;
  top: 40px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-bg .duilian .couplet-container {
  background: rgba(216,0,15,0.8);
  position: relative;
  box-shadow: 0 0 20px rgba(220,143,3,0.1);
  border-radius: 30px 30px 5px 5px;
  width: 90px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255,217,0,0.831);
}
.loading-bg .duilian .couplet-container:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid rgba(255,217,0,0.831);
  border-radius: 25px 25px 3px 3px;
  opacity: 0.6;
}
.loading-bg .duilian .couplet-container .couplet-decor.top {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 15px 15px 0 0;
}
.loading-bg .duilian .couplet-container .couplet-decor.top:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid #dcbf03;
  border-radius: 50%;
}
.loading-bg .duilian .couplet-container .couplet-decor.bottom {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 0 0 15px 15px;
}
.loading-bg .duilian .couplet-container .couplet-decor.bottom:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 50%;
}
.loading-bg .duilian .couplet {
  color: rgba(255,217,0,0.831);
  font-size: 2.5rem;
  writing-mode: vertical-rl;
  font-family: "华文行楷", cursive;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  letter-spacing: 15px;
  line-height: 1.3;
  font-weight: bold;
  margin: 0 auto;
}
.loading-bg .duilian .left-panel {
  left: 0;
  /* transform: translateX(-100%); */
}
.loading-bg .duilian .right-panel {
  right: 0;
  /* transform: translateX(100%); */
}
.loading-bg .duilian .center-panel {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.loading-bg .duilian .center-panel .horizontal-scroll {
  background: rgba(216,0,15,0.8);
  width: 240px;
  height: 80px;
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 20px;
  position: relative;
  box-shadow: 0 0 20px rgba(220,143,3,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 25px;
}
.loading-bg .duilian .center-panel .horizontal-scroll:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid rgba(255,217,0,0.831);
  border-radius: 25px;
  opacity: 0.6;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.left,
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 50px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.left {
  left: -15px;
  border-radius: 15px 0 0 15px;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.left:before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 50%;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.right {
  right: -15px;
  border-radius: 0 15px 15px 0;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet-decor.right:after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: rgba(216,0,15,0.8);
  border: 4px solid rgba(255,217,0,0.831);
  border-radius: 50%;
}
.loading-bg .duilian .center-panel .horizontal-scroll .couplet {
  color: rgba(255,217,0,0.831);
  font-size: 2.5rem;
  writing-mode: horizontal-tb;
  font-family: "华文行楷", cursive;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  letter-spacing: 0.3em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  margin-left: 0.3em;
}

总之，我要结合起来进行使用。

1. 实现

1.1. 首先将 琅環书生 和 梦爱吃鱼 举办一下“领证仪式😂”

将琅環书生的 html 改写成 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
38
if theme.denglong.enable
  .denglong
    .deng-box1
      .deng
        .xian
        .deng-a
          .deng-b
            .deng-t 新
        .shui.shui-a
          .shui-c
          .shui-b
    .deng-box2
      .deng
        .xian
        .deng-a
          .deng-b
            .deng-t 年
        .shui.shui-a
          .shui-c
          .shui-b
    .deng-box3
      .deng
        .xian
        .deng-a
          .deng-b
            .deng-t 快
        .shui.shui-a
          .shui-c
          .shui-b
    .deng-box4
      .deng
        .xian
        .deng-a
          .deng-b
            .deng-t 乐
        .shui.shui-a
          .shui-c
          .shui-b

将梦爱吃鱼的 CSS 代码适配上面的 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
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
.denglong {
  pointer-events: none;
}

.deng-box1 {
  position: fixed;
  z-index: 9999;
  top: -30px;
  left: -1px;
}

.deng-box2 {
  position: fixed;
  z-index: 9999;
  top: -25px;
  left: 184px;
}

.deng-box3 {
  position: fixed;
  z-index: 9999;
  top: -28px;
  right: 11px;
}

.deng-box4 {
  position: fixed;
  z-index: 9999;
  top: -26px;
  right: 183px;
}

.deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: rgba(216, 0, 15, 0.8);
  border-radius: 50%;
  transform-origin: 50% -100px;
  animation: swing 3s infinite ease-in-out;
  box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng:before {
  position: absolute;
  top: -7px;
  left: 29px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  z-index: 999;
  border-radius: 5px 5px 0 0;
  border: solid 1px #dc8f03;
  background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng:after {
  position: absolute;
  bottom: -7px;
  left: 10px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  margin-left: 20px;
  border-radius: 0 0 5px 5px;
  border: solid 1px #dc8f03;
  background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng-a {
  width: 100px;
  height: 90px;
  background: rgba(216, 0, 15, 0.1);
  margin: 12px 8px 8px 10px;
  border-radius: 50%;
  border: 2px solid #dc8f03;
}

.deng-b {
  width: 45px;
  height: 90px;
  background: rgba(216, 0, 15, 0.1);
  margin: -2px 8px 8px 26px;
  border-radius: 50%;
  border: 2px solid #dc8f03;
}

.xian {
  position: absolute;
  top: -50px;
  left: 60px;
  width: 2px;
  height: 50px;
  background: #dc8f03;
}

.shui-a {
  position: relative;
  width: 5px;
  height: 20px;
  margin: -5px 0 0 59px;
  animation: swing 4s infinite ease-in-out;
  transform-origin: 50% -45px;
  background: #ffa500;
  border-radius: 0 0 5px 5px;
}

.shui-b {
  position: absolute;
  top: 14px;
  left: -2px;
  width: 10px;
  height: 10px;
  background: #dc8f03;
  border-radius: 50%;
}

.shui-c {
  position: absolute;
  top: 18px;
  left: -2px;
  width: 10px;
  height: 35px;
  background: #ffa500;
  border-radius: 0 0 0 5px;
}

.deng-t {
  font-family: "华文行楷", Arial, Lucida Grande, Tahoma, sans-serif;
  font-size: 3.2rem;
  color: #dc8f03;
  font-weight: bold;
  line-height: 85px;
  text-align: center;
}

@keyframes swing {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

/* 适配暗色模式 */
[data-theme="dark"] .deng {
  background: rgba(216, 0, 15, 0.8);
}

[data-theme="dark"] .deng-a,
[data-theme="dark"] .deng-b {
  background: rgba(216, 0, 15, 0.1);
}

@media screen and (max-width: 768px) {
  .deng-box1,
  .deng-box2,
  .deng-box3,
  .deng-box4 {
    display: none !important;
  }
}

1.2. 改进「直接抄作业部分」

为了让主题支持通过配置指定四个字，可以改写 Pug 模板以动态生成文字内容，同时在 theme.denglong 配置中增加 text 参数，用于定义要显示的四个字。以下是具体实现步骤和代码：

  • 修改后的主题配置：
  • Path: _config.anzhiyu.yml
1
2
3
denglong:
  enable: true  # true 开启 false 关闭
  text: "新年快乐"  # 配置灯笼的四个字
  • 修改后的 Pug 模板
  • Path: /themes/anzhiyu/layout/includes/layout.pug

通过循环读取配置中的 text，动态生成灯笼内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
if theme.denglong.enable
  - const denglongText = theme.denglong.text || "新年快乐"; // 如果未配置，默认显示“新年快乐”
  .denglong
    each char, index in denglongText
      div(class=`deng-box${index + 1}`)
        .deng
          .xian
          .deng-a
            .deng-b
              .deng-t= char
          .shui.shui-a
            .shui-c
            .shui-b

安知鱼主题的朋友，可以直接 copy 使用即可！

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
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
      if theme.denglong.enable
        - const denglongText = theme.denglong.text || "新年快乐"; // 如果未配置，默认显示“新年快乐”
        .denglong
          each char, index in denglongText
            div(class=`deng-box${index + 1}`)
              .deng
                .xian
                .deng-a
                  .deng-b
                    .deng-t= char
                .shui.shui-a
                  .shui-c
                  .shui-b


  body(data-type="anzhiyu")
    #web_bg
    #an_music_bg
    if theme.preloader.enable
      !=partial('includes/loading/index', {}, {cache: true})
    if (theme.mourn.enable && is_home_first_page())
      include ./mourn.pug
    if page.type !== '404'
      #body-wrap(class=pageType)
        include ./header/index.pug
        main#blog-container
          if (is_home())
            include ./bbTimeList.pug
          if is_current("/")
            include ./top/top.pug
          if page.top_single
            - let background = page.top_single_background
            - let tip = page.top_single_tip
            - let subTitle = page.top_single_subtitle
            - let btn_link = page.top_single_btn_link
            - let btn_text = page.top_single_btn_text
            #single_top
              .author-content.author-content-item.single(style=`${background ? `background: url(${background}) top / cover no-repeat;` : ""}`)
                .card-content
                  .author-content-item-tips=subTitle
                  span.author-content-item-title=page.title
                  .content-bottom
                    .tips=tip
                  .banner-button-group
                    a.banner-button(onclick=`pjax.loadUrl("${url_for(btn_link ? btn_link : '/about')}")`)
                      i.anzhiyufont.anzhiyu-icon-arrow-circle-right(style='font-size: 1.5rem')
                      span.banner-button-text=btn_text ? btn_text : "关于我"

          #content-inner.layout(class=hideAside)
            if body
              div!= body
            else
              block content
              if theme.aside.enable && page.aside !== false
                include widget/index.pug

        - var footerBg = theme.footer_bg
        if (footerBg)
          if (footerBg === true)
            - var footer_bg = bg_img
          else
            - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
        else
          - var footer_bg = ''

        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})
        
        if (theme.agreementPopup && theme.agreementPopup.enable && is_home_first_page())
          - let agreementPopupUrl = theme.agreementPopup.url
          script(defer).
            var hasShownPopup = sessionStorage.getItem('sessionNegotiatePopupShown');

            if (!hasShownPopup) {
              setTimeout(() => {
                anzhiyuPopupManager && anzhiyuPopupManager.enqueuePopup('协议提醒助手', '查看本站为你的个人隐私做出的努力', '#{agreementPopupUrl}', 4000);
                sessionStorage.setItem('sessionNegotiatePopupShown', 'true');
              }, 1000);
            }

    else
      include ./404.pug

    !=partial('includes/sidebar', {}, {cache: true})

    if theme.shortcutKey.enable
      !=partial('includes/shortcutKey', {}, {cache: true})
    include ./rightside.pug

    if (theme.nav_music.enable || theme.nav_music.console_widescreen_music)
      include ./music.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
    !=partial('includes/anzhiyu/rightmenu', {}, {cache:true})
    include ./additional-js.pug

    //- 弹窗通知
    !=partial('includes/popup/index', {}, {cache: true})
  • CSS 代码
  • Path: /source/static/css/chinese-new-year.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
/* 新年灯笼🏮 */
.denglong {
    pointer-events: none;
  }
  
  .deng-box1 {
    position: fixed;
    z-index: 9999;
    top: -30px;
    left: -1px;
  }
  
  .deng-box2 {
    position: fixed;
    z-index: 9999;
    top: -25px;
    left: 184px;
  }
  
  .deng-box3 {
    position: fixed;
    z-index: 9999;
    top: -28px;
    right: 11px;
  }
  
  .deng-box4 {
    position: fixed;
    z-index: 9999;
    top: -26px;
    right: 183px;
  }
  
  .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50%;
    transform-origin: 50% -100px;
    animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  }
  
  .deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  }
  
  .deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  }
  
  .deng-a {
    width: 100px;
    height: 90px;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 10px;
    border-radius: 50%;
    border: 2px solid #dc8f03;
  }
  
  .deng-b {
    width: 45px;
    height: 90px;
    background: rgba(216, 0, 15, 0.1);
    margin: -2px 8px 8px 26px;
    border-radius: 50%;
    border: 2px solid #dc8f03;
  }
  
  .xian {
    position: absolute;
    top: -50px;
    left: 60px;
    width: 2px;
    height: 50px;
    background: #dc8f03;
  }
  
  .shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    animation: swing 4s infinite ease-in-out;
    transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
  }
  
  .shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
  }
  
  .shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
  }
  
  .deng-t {
    font-family: "华文行楷", Arial, Lucida Grande, Tahoma, sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
  }
  
  @keyframes swing {
    0% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
    100% {
      transform: rotate(-10deg);
    }
  }
  
  /* 适配暗色模式 */
  [data-theme="dark"] .deng {
    background: rgba(216, 0, 15, 0.8);
  }
  
  [data-theme="dark"] .deng-a,
  [data-theme="dark"] .deng-b {
    background: rgba(216, 0, 15, 0.1);
  }
  
  @media screen and (max-width: 768px) {
    .deng-box1,
    .deng-box2,
    .deng-box3,
    .deng-box4 {
      display: none !important;
    }
  }

2. 关于春联

对于春联，原本两位大佬都是在全屏加载动画时实现的，但是我个人不喜欢全屏加载，故而这里我就不改进实现，以后也有可能别中样式实现。有需要的网友可以留言评论，我酌情添加！

🪧
公众号：AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦，包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Web、Linux」，全部都是一对一教学：一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然，还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线，随时响应！微信：Jiabcdefh

C++ 信息奥赛题解，长期更新！长期招收一对一中小学信息奥赛集训，莆田、厦门地区有机会线下上门，其他地区线上。微信：Jiabcdefh

方法一：QQ

方法二：微信：Jiabcdefh