-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
526 lines (253 loc) · 175 KB
/
search.xml
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
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>博客网站域名更换</title>
<link href="/post/987c43c1.html"/>
<url>/post/987c43c1.html</url>
<content type="html"><![CDATA[<p>域名已经更换，新域名 blog.onestarg.com</p>]]></content>
<categories>
<category> 博客相关 </category>
</categories>
<tags>
<tag> 博客 </tag>
<tag> 域名 </tag>
</tags>
</entry>
<entry>
<title>用Vercel部署Meting-API，防止音乐播放器有时无法播放</title>
<link href="/post/94d87788.html"/>
<url>/post/94d87788.html</url>
<content type="html"><![CDATA[<p>很长一段时间没碰博客了，我就是蓝狗一条，实在是太懈怠了。原本是打算等搬完家后就把样式整个修改下风格，但一长时间不碰，就动力不足，更加上几年没怎么在家待，回来后各种事情。</p><p>前面没事打开看过一两次，发现meting的api又挂了，但又没完全挂。QQ音乐无法播放，但网易云音乐的还没问题，还是自己部署个api备用着吧。我又是老白嫖怪了，发现可以用vercel部署后那更开心了。</p><p><strong>比如这样：</strong></p><p><img src="https://s2.loli.net/2023/10/20/Vz3rBx5ITgHkhpt.png" alt="错误信息"></p><h2 id="部署到Vercel"><a href="#部署到Vercel" class="headerlink" title="部署到Vercel"></a>部署到Vercel</h2><p>项目链接：</p><a class="tag-Link" target="_blank" href="https://github.com/imsyy/Meting-API"> <div class="tag-link-tips">引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/github.com/imsyy/Meting-API.png);"></div> <div class="tag-link-right"> <div class="tag-link-title">Meting-API</div> <div class="tag-link-sitename">imsyy</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a><p>其实项目里操作已经写得很清楚了，点击Deploy后一直下一步即可。</p><p><img src="https://s2.loli.net/2023/10/20/9wQpVHXehaDBmIW.png" alt="image-20231020231010065"></p><p>部署好后，在设置里可以用自己的域名解析，速度更快些。</p><p><img src="https://s2.loli.net/2023/10/20/fPTgcH7L4kzJOh9.png" alt="image-20231020231650656"></p><h2 id="替换meting的js文件"><a href="#替换meting的js文件" class="headerlink" title="替换meting的js文件"></a>替换meting的js文件</h2><p>如果是部署在国内的话不用替换，部署到vercel上时需要替换下。</p><a class="tag-Link" target="_blank" href="https://pan.baidu.com/s/17zqmvWXBOgpp2_qB5DPytA"> <div class="tag-link-tips">引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/pan.baidu.com/s/17zqmvWXBOgpp2_qB5DPytA.png);"></div> <div class="tag-link-right"> <div class="tag-link-title">Meting文件</div> <div class="tag-link-sitename">叶椰子</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a><p>提取码：wdhc</p><p>下载下来后打开，Ctrl+F 搜索 <a href="https://xx/">https://xx</a> 找到这个位置，把 <a href="https://xxx.xxxxx.cn/">https://xxx.xxxxx.cn</a> 替换成你自己的域名。</p><p><img src="https://s2.loli.net/2023/10/20/q3WX6cv7OhUM5u1.png" alt="image-20231020233135303"></p><p>然后就没有然后了，操作下来很简单。</p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 音乐 </tag>
<tag> Aplayer </tag>
</tags>
</entry>
<entry>
<title>音乐页面样式分享，给博客音乐播放页面增加一份不一样的优雅感</title>
<link href="/post/abd735f.html"/>
<url>/post/abd735f.html</url>
<content type="html"><![CDATA[<p>博客到现在一直没写什么内容，这应该才是第一篇文章，音乐页面原本也是参照洪哥样式排版的，最近想给音乐播放页换个样式，我自己又比较用QQ音乐多些，于是仿了QQ音乐页面样式。</p><p>先看下大概的展示效果吧，感觉还行。</p><p><strong>电脑上效果</strong></p><p><img src="https://s2.loli.net/2023/02/08/6zETLYBv8J4Um9c.jpg" alt="image-20230208174225657"></p><p><strong>手机上效果</strong></p><p><img src="https://s2.loli.net/2023/02/08/Pdz79T2VKn3J5Ux.jpg" alt="image-20230208174456810"></p><p>实际展示效果的话可以<a href="https://www.yeooe.cn/music/">点击这里</a>去看看，下面开始放我的样式吧。</p><h2 id="添加结构"><a href="#添加结构" class="headerlink" title="添加结构"></a>添加结构</h2><p>在<code>themes\butterfly\layout\includes\page</code>路径下新建<code>eomusic.pug</code></p><figure class="highlight diff"><table><tr><td class="code"><pre><span class="line">#eoMusic-page</span><br><span class="line"> #eo-music.aplayer.aplayer-withlrc.aplayer-withlist(data-id=歌单id, data-server=平台, data-type='playlist', data-fixed='false', data-autoplay='false')</span><br></pre></td></tr></table></figure><p>然后在<code>themes\butterfly\layout\page.pug</code>中引入<code>eomusic.pug</code></p><figure class="highlight diff"><table><tr><td class="code"><pre><span class="line">block content</span><br><span class="line"> #page</span><br><span class="line"> if top_img <span class="comment">=== false</span></span><br><span class="line"> h1.page-title= page.title</span><br><span class="line"> case page.type</span><br><span class="line"> when 'tags'</span><br><span class="line"> include includes/page/tags.pug</span><br><span class="line"> when 'link'</span><br><span class="line"> include includes/page/mylink.pug</span><br><span class="line"><span class="addition">+ //- 音乐页</span></span><br><span class="line"><span class="addition">+ when 'music'</span></span><br><span class="line"><span class="addition">+ include includes/page/eomusic.pug</span></span><br></pre></td></tr></table></figure><p>也可以不用像我上面那样添加，直接在你music页面的<code>.md</code>markdown文档里插入标签，就不用创建pug结构，比如像下面这样。我只是这种页面相关的，习惯用pug。</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"eoMusic-page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"aplayer aplayer-withlrc aplayer-withlist"</span> <span class="attr">id</span>=<span class="string">"eo-music"</span> <span class="attr">data-id</span>=<span class="string">"你的歌单id"</span> <span class="attr">data-server</span>=<span class="string">"音乐平台"</span> <span class="attr">data-type</span>=<span class="string">"playlist"</span> <span class="attr">data-fixed</span>=<span class="string">"false"</span> <span class="attr">data-autoplay</span>=<span class="string">"false"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2 id="添加CSS样式"><a href="#添加CSS样式" class="headerlink" title="添加CSS样式"></a>添加CSS样式</h2><p>在<code>source\css</code>里新建<code>music.css</code>后复制下面样式粘贴进去，再主题引入就可以</p><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#eoMusic-page</span> {</span><br><span class="line"> <span class="attribute">margin-top</span>: -<span class="number">60px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eoMusic-page</span> <span class="selector-id">#eo-music</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-direction</span>: row-reverse;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"> <span class="attribute">border</span>: none;</span><br><span class="line"> <span class="attribute">box-shadow</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.bgCls</span> {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">63px</span>);</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line"> <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line"> <span class="attribute">background-size</span>: cover;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 信息 */</span></span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-body</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">40%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">75vh</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-pic</span> {</span><br><span class="line"> <span class="attribute">float</span>: none;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">180px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">20px</span> <span class="number">0</span> <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span>{</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">height</span>: auto;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">15px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-title</span>, <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-author</span>{</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">calc</span>(<span class="number">100vh</span> - <span class="number">660px</span>);</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">80px</span>;</span><br><span class="line"> -webkit-<span class="attribute">mask-image</span>: <span class="built_in">linear-gradient</span>(to bottom,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#0000</span>,<span class="number">#0000</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span>{</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span>{</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1500px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">50px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">160px</span> <span class="number">0px</span> <span class="number">150px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-thumb</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: none;</span><br><span class="line"> <span class="attribute">transform</span>: none;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-played</span> {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 控制器 */</span></span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-back</span>, <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-play</span>, <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-forward</span> {</span><br><span class="line"> <span class="attribute">display</span>: inline;</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-menu</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">21px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-end;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-volume-wrap</span> <span class="selector-class">.aplayer-volume-bar-wrap</span> {</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">8px</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> {</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: -<span class="number">8px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">15px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-back</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-play</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">40px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-forward</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">80px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon</span> path {</span><br><span class="line"> fill: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">opacity</span>: .<span class="number">8</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon</span> path<span class="selector-pseudo">:hover</span> {</span><br><span class="line"> fill: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 歌曲列表 */</span></span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-list</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">60%</span>;</span><br><span class="line"> <span class="attribute">max-height</span>: none <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span> {</span><br><span class="line"> <span class="attribute">max-height</span>: <span class="number">75vh</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="comment">/* height: 100%; */</span></span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">25px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>::-webkit-scrollbar-thumb {</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> / <span class="number">20%</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> {</span><br><span class="line"> <span class="attribute">border-top</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">233</span> <span class="number">233</span> <span class="number">233</span> / <span class="number">0%</span>);</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> <span class="selector-tag">span</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> {</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">255</span> <span class="number">255</span> <span class="number">255</span> / <span class="number">20%</span>);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">255</span> <span class="number">255</span> <span class="number">255</span> / <span class="number">20%</span>);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> <span class="selector-class">.aplayer-list-cur</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-author</span> {</span><br><span class="line"> <span class="attribute">opacity</span>: .<span class="number">6</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* **** 移动端样式 ***** */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) { </span><br><span class="line"> <span class="comment">/* 歌曲列表 */</span></span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-list</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1002</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: -<span class="number">76%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--sidebar-bg);</span><br><span class="line"> <span class="attribute">height</span>: auto;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">15px</span> <span class="number">15px</span> <span class="number">0px</span> <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">0px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-list</span><span class="selector-class">.aplayer-list-hide</span> {</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0%</span> <span class="meta">!important</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span> {</span><br><span class="line"> <span class="attribute">max-height</span>: <span class="number">60vh</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">10px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> <span class="selector-tag">span</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-title</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#33a673</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> <span class="selector-tag">span</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-title</span>{</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">55%</span>;</span><br><span class="line"> <span class="attribute">width</span>: auto;</span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> -webkit-line-clamp: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> -webkit-box-orient: vertical;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-author</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">width</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">35%</span>;</span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> -webkit-line-clamp: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> -webkit-box-orient: vertical;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-author</span> {</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">15px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">/* 歌词信息 */</span></span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-body</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="comment">/* height: auto; */</span></span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> {</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">40px</span>;</span><br><span class="line"> <span class="comment">/* height: 400%; */</span></span><br><span class="line"> <span class="attribute">height</span>: auto;</span><br><span class="line"> <span class="attribute">max-height</span>: <span class="number">200%</span>;</span><br><span class="line"> <span class="attribute">min-height</span>: <span class="number">100%</span>;</span><br><span class="line"> -webkit-<span class="attribute">mask-image</span>: <span class="built_in">linear-gradient</span>(to bottom,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#000</span>,<span class="number">#0000</span>,<span class="number">#0000</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span><span class="selector-class">.aplayer-lrc-current</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#33a673</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">/* 控制按键和进度条 */</span></span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> {</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">100px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">30px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> {</span><br><span class="line"> <span class="attribute">bottom</span>: -<span class="number">40px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: -<span class="number">33px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> <span class="selector-class">.aplayer-dtime</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">30px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> <span class="selector-class">.aplayer-ptime</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">35px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-back</span> {</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">110px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-play</span> {</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-forward</span> {</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">110px</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-order</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">22px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-loop</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">25px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#eo-music</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-menu</span> {</span><br><span class="line"> <span class="attribute">display</span>: inline;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">90px</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>到这里其实就已经差不多了，可以刷新看下样式，如果有不一样的地方可以F12大法查看是否因为自己以前的样式覆盖了。</p><h3 id="bug更新说明"><a href="#bug更新说明" class="headerlink" title="bug更新说明"></a>bug更新说明</h3><p>按照上面老样式粘贴后歌曲选中会出现错位的bug，歌曲不多就不明显，歌曲几十上百就会比较明显影响了。</p><p>因为当时样式<code>li</code>标签<code>border</code>的直接<code>none</code>了，这会使盒子大小不对，播放插件的计算偏移大小就会出错不准确，歌曲越多，就会偏移数值出错越大。</p><p>前面文章内容里已经更新，可以使用，已经按老样式添加的可以按照下面样式位置修改。</p><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#eo-music</span> <span class="selector-tag">ol</span>><span class="selector-tag">li</span> {</span><br><span class="line"> <span class="attribute">border-top</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">233</span> <span class="number">233</span> <span class="number">233</span> / <span class="number">0%</span>);</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="添加JS"><a href="#添加JS" class="headerlink" title="添加JS"></a>添加JS</h2><p>和我一样歌曲切换后会自动改变背景的话需要添加，你也可以自己优化下代码，我一般是能跑就行。</p><p>在<code>source\js</code>路径下新建<code>music.js</code>然后主题引入，或者丢到一个任意自己的js文件里都可以。</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> urlinfo = <span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">pathname</span>;</span><br><span class="line"><span class="keyword">var</span> overtime;</span><br><span class="line"></span><br><span class="line"><span class="title function_">qq_musicpage</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">qq_musicpage</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (urlinfo != <span class="string">'/music/'</span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#web_bg"</span>).<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">"bgCls"</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'web_bg'</span>).<span class="property">style</span>.<span class="property">backgroundImage</span> = <span class="string">'none'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'footer'</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">'flex'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">'pace-running'</span>)[<span class="number">0</span>].<span class="property">style</span>.<span class="property">background</span> = <span class="string">'var(--global-bg)'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">'body'</span>)[<span class="number">0</span>].<span class="property">style</span>.<span class="property">background</span> = <span class="string">'var(--global-bg)'</span>;</span><br><span class="line"></span><br><span class="line"> <span class="built_in">clearInterval</span>(overtime);</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#web_bg"</span>).<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">"bgCls"</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'footer'</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">'none'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'content-inner'</span>).<span class="property">style</span>.<span class="property">background</span> = <span class="string">'none'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'page'</span>).<span class="property">style</span>.<span class="property">margin</span> = <span class="string">'auto'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'page'</span>).<span class="property">style</span>.<span class="property">background</span> = <span class="string">'rgba(0,0,0,0)'</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">'body'</span>)[<span class="number">0</span>].<span class="property">style</span>.<span class="property">background</span> = <span class="string">'#0d0d0d'</span>;</span><br><span class="line"></span><br><span class="line"> overtime = <span class="variable language_">window</span>.<span class="built_in">setInterval</span>(<span class="string">'setOverTime()'</span>, <span class="string">'500'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">onmousedown</span> = <span class="keyword">function</span>(<span class="params">event</span>) {</span><br><span class="line"> <span class="keyword">if</span> (event.<span class="property">button</span> == <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">var</span> targ = event.<span class="property">target</span>; </span><br><span class="line"> <span class="keyword">var</span> tname = targ.<span class="property">tagName</span>; </span><br><span class="line"> <span class="keyword">var</span> tClassname = targ.<span class="property">classList</span>[<span class="number">1</span>];</span><br><span class="line"> <span class="keyword">var</span> tidname = targ.<span class="property">id</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (urlinfo == <span class="string">'/music/'</span>){</span><br><span class="line"> <span class="keyword">if</span> (tname == <span class="string">'svg'</span>) {</span><br><span class="line"> <span class="keyword">var</span> tsvg = targ.<span class="property">parentNode</span>;</span><br><span class="line"> <span class="keyword">if</span>(tsvg.<span class="property">classList</span>[<span class="number">1</span>] == <span class="string">'aplayer-icon-menu'</span> || tClassname == <span class="string">'aplayer-icon-menu'</span>) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'menu-mask'</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">"block"</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'menu-mask'</span>).<span class="property">style</span>.<span class="property">animation</span> = <span class="string">"0.5s ease 0s 1 normal none running to_show"</span>;</span><br><span class="line"> }, <span class="number">100</span>);</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span> (tname == <span class="string">'path'</span>) {</span><br><span class="line"> <span class="keyword">var</span> tpath = targ.<span class="property">parentNode</span>;</span><br><span class="line"> <span class="keyword">var</span> tpath2 = tpath.<span class="property">parentNode</span>;</span><br><span class="line"> <span class="keyword">if</span>(tpath2.<span class="property">classList</span>[<span class="number">1</span>] == <span class="string">'aplayer-icon-menu'</span>) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'menu-mask'</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">"block"</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'menu-mask'</span>).<span class="property">style</span>.<span class="property">animation</span> = <span class="string">"0.5s ease 0s 1 normal none running to_show"</span>;</span><br><span class="line"> }, <span class="number">100</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (tidname == <span class="string">'menu-mask'</span>) {</span><br><span class="line"> <span class="keyword">var</span> domHtml = <span class="title function_">domAplyerList</span>();</span><br><span class="line"> domHtml.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">"aplayer-list-hide"</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">domAplyerList</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> htmldom = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'eo-music'</span>);</span><br><span class="line"> <span class="keyword">var</span> htmldom2 = htmldom.<span class="property">childNodes</span>[<span class="number">3</span>];</span><br><span class="line"> <span class="keyword">return</span> htmldom2;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">setOverTime</span>(<span class="params"></span>) {</span><br><span class="line"> imgs = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'eo-music'</span>).<span class="title function_">getElementsByClassName</span>(<span class="string">'aplayer-pic'</span>)[<span class="number">0</span>].<span class="property">style</span>.<span class="property">backgroundImage</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'web_bg'</span>).<span class="property">style</span>.<span class="property">backgroundImage</span> = imgs;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>到这里就和我一样了，喜欢我这个样式的小伙伴可以试试。</p><h3 id="最后祝大家新年健康，财源滚滚。🧨🎉🥳"><a href="#最后祝大家新年健康，财源滚滚。🧨🎉🥳" class="headerlink" title="最后祝大家新年健康，财源滚滚。🧨🎉🥳"></a>最后祝大家新年健康，财源滚滚。🧨🎉🥳</h3>]]></content>
<categories>
<category> 博客魔改 </category>
</categories>
<tags>
<tag> 音乐 </tag>
<tag> Aplayer </tag>
<tag> 魔改 </tag>
</tags>
</entry>
<entry>
<title>新年第一篇水文，给博客营造过年氛围效果，来点生活仪式感</title>
<link href="/post/a31b36b.html"/>
<url>/post/a31b36b.html</url>
<content type="html"><![CDATA[<p>2023的第一篇水文，果然过年还是有点氛围仪式感更有意思，就是麻烦了点。换主题配色的时候才发现以前堆的屎山是真的臭，改个色痛苦要死，当时是只管能跑起来，什么样式和代码都没优化，跑起来后又懒得去调整。</p><p>新年氛围我网站一共就用了三个效果，一个是导航顶部的摆动灯笼，一个是下雪，再有一个就是烟花动画。</p><h2 id="摆动的灯笼"><a href="#摆动的灯笼" class="headerlink" title="摆动的灯笼"></a>摆动的灯笼</h2><p><strong>创建灯笼dom</strong></p><p>在<code>themes\butterfly\layout\includes\header</code>下新建<code>lantern.pug</code></p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">#lantern</span><br><span class="line"> //- 灯笼1</span><br><span class="line"> .deng-box</span><br><span class="line"> .deng</span><br><span class="line"> .xian</span><br><span class="line"> .deng-a</span><br><span class="line"> .deng-b</span><br><span class="line"> .deng-t 新</span><br><span class="line"> .shui.shui-a</span><br><span class="line"> .shui-c</span><br><span class="line"> .shui-b</span><br><span class="line"> //- 灯笼2 </span><br><span class="line"> .deng-box1</span><br><span class="line"> .deng</span><br><span class="line"> .xian</span><br><span class="line"> .deng-a</span><br><span class="line"> .deng-b</span><br><span class="line"> .deng-t 年</span><br><span class="line"> .shui.shui-a</span><br><span class="line"> .shui-c</span><br><span class="line"> .shui-b</span><br><span class="line"> //- 灯笼3</span><br><span class="line"> .deng-box2</span><br><span class="line"> .deng</span><br><span class="line"> .xian</span><br><span class="line"> .deng-a</span><br><span class="line"> .deng-b</span><br><span class="line"> .deng-t 康</span><br><span class="line"> .shui.shui-a</span><br><span class="line"> .shui-c</span><br><span class="line"> .shui-b</span><br><span class="line"> //- 灯笼4</span><br><span class="line"> .deng-box3</span><br><span class="line"> .deng</span><br><span class="line"> .xian</span><br><span class="line"> .deng-a</span><br><span class="line"> .deng-b</span><br><span class="line"> .deng-t 健</span><br><span class="line"> .shui.shui-a</span><br><span class="line"> .shui-c</span><br><span class="line"> .shui-b</span><br></pre></td></tr></table></figure><p><strong>引入到页面</strong></p><p>在<code>themes\butterfly\layout\includes\header\index.pug</code>中引入新建的<code>lantern.pug</code></p><figure class="highlight diff"><table><tr><td class="code"><pre><span class="line">header#page-header(class=isHomeClass style=bg_img)</span><br><span class="line"> include ./nav.pug</span><br><span class="line"></span><br><span class="line"> //- 添加节日氛围灯笼</span><br><span class="line"><span class="addition">+ include ./lantern.pug</span></span><br><span class="line"></span><br><span class="line"> if is_post()</span><br><span class="line"> #coverdiv.coverdiv.loaded</span><br><span class="line"> img#post-cover(src=url_for(top_img) alt='cover' oncontextmenu="return false;" ondragstart="return false;")</span><br><span class="line"></span><br><span class="line"> if top_img !== false</span><br><span class="line"> if is_post()</span><br><span class="line"> include ./post-info.pug</span><br></pre></td></tr></table></figure><p><strong>CSS样式</strong></p><p>在<code>source\css</code>下新建<code>newYear.css</code>，也可以放到已经引入的css文件里，不过放到新建一个css文件里，氛围样式更好统一管理。</p><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-attr">[data-theme=light]</span> {</span><br><span class="line"> <span class="attr">--lantern-red</span>: <span class="built_in">rgba</span>(<span class="number">171</span>, <span class="number">17</span>, <span class="number">28</span>, <span class="number">0.8</span>);</span><br><span class="line"> <span class="attr">--lantern-yellow</span>: <span class="built_in">linear-gradient</span>(to right, <span class="number">#dc8f03</span>, <span class="number">#ffc069</span>, <span class="number">#dc8f03</span>, <span class="number">#ffc069</span>, <span class="number">#dc8f03</span>);</span><br><span class="line"> <span class="attr">--lantern-fontcolor</span>: <span class="number">#e7ac5c</span>;</span><br><span class="line"> <span class="attr">--lantern-box</span>: -<span class="number">5px</span> <span class="number">5px</span> <span class="number">50px</span> <span class="number">4px</span> <span class="built_in">rgb</span>(<span class="number">250</span> <span class="number">108</span> <span class="number">0</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-attr">[data-theme=dark]</span> {</span><br><span class="line"> <span class="attr">--lantern-red</span>: <span class="built_in">rgba</span>(<span class="number">157</span>, <span class="number">26</span>, <span class="number">26</span>, <span class="number">0.8</span>);</span><br><span class="line"> <span class="attr">--lantern-yellow</span>: <span class="built_in">linear-gradient</span>(to right, <span class="number">#b1770e</span>, <span class="number">#e3a653</span>, <span class="number">#b1770e</span>, <span class="number">#e3a653</span>, <span class="number">#b1770e</span>);</span><br><span class="line"> <span class="attr">--lantern-fontcolor</span>: <span class="number">#d59339</span>;</span><br><span class="line"> <span class="attr">--lantern-box</span>: -<span class="number">5px</span> <span class="number">5px</span> <span class="number">30px</span> <span class="number">4px</span> <span class="built_in">rgb</span>(<span class="number">197</span> <span class="number">114</span> <span class="number">51</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 节日灯笼 */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) {</span><br><span class="line"> <span class="selector-id">#lantern</span> {</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng-box</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">left</span>: -<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng-box1</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng-box2</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">right</span>: -<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng-box3</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.nav-fixed</span> <span class="selector-class">.deng-box</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">left</span>: -<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.nav-fixed</span> <span class="selector-class">.deng-box1</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.nav-fixed</span> <span class="selector-class">.deng-box2</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">right</span>: -<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.nav-fixed</span> <span class="selector-class">.deng-box3</span> {</span><br><span class="line"> <span class="attribute">position</span>: fixed;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.deng-box1</span> <span class="selector-class">.deng</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d8000f</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--lantern-red);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> -webkit-<span class="attribute">transform-origin</span>: <span class="number">50%</span> -<span class="number">100px</span>;</span><br><span class="line"> -webkit-<span class="attribute">animation</span>: swing <span class="number">5s</span> infinite ease-in-out;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--lantern-box);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng-box2</span> <span class="selector-class">.deng</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d8000f</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--lantern-red);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> -webkit-<span class="attribute">transform-origin</span>: <span class="number">50%</span> -<span class="number">100px</span>;</span><br><span class="line"> -webkit-<span class="attribute">animation</span>: swing <span class="number">5s</span> infinite ease-in-out;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--lantern-box);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng-box3</span> <span class="selector-class">.deng</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d8000f</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--lantern-red);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> -webkit-<span class="attribute">transform-origin</span>: <span class="number">50%</span> -<span class="number">100px</span>;</span><br><span class="line"> -webkit-<span class="attribute">animation</span>: swing <span class="number">3s</span> infinite ease-in-out;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--lantern-box);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.deng</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d8000f</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--lantern-red);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> -webkit-<span class="attribute">transform-origin</span>: <span class="number">50%</span> -<span class="number">100px</span>;</span><br><span class="line"> -webkit-<span class="attribute">animation</span>: swing <span class="number">3s</span> infinite ease-in-out;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--lantern-box);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.deng-a</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d8000f</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">216</span>, <span class="number">0</span>, <span class="number">15</span>, <span class="number">0.1</span>);</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">12px</span> <span class="number">8px</span> <span class="number">8px</span> <span class="number">8px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#dc8f03</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.deng-b</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">45px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d8000f</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">216</span>, <span class="number">0</span>, <span class="number">15</span>, <span class="number">0.1</span>);</span><br><span class="line"> <span class="attribute">margin</span>: -<span class="number">4px</span> <span class="number">8px</span> <span class="number">8px</span> <span class="number">26px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#dc8f03</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.xian</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#dc8f03</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shui-a</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: -<span class="number">5px</span> <span class="number">0</span> <span class="number">0</span> <span class="number">59px</span>;</span><br><span class="line"> -webkit-<span class="attribute">animation</span>: swing <span class="number">4s</span> infinite ease-in-out;</span><br><span class="line"> -webkit-<span class="attribute">transform-origin</span>: <span class="number">50%</span> -<span class="number">45px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shui-b</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">left</span>: -<span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#dc8f03</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shui-c</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">left</span>: -<span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.deng</span><span class="selector-pseudo">:before</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">7px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">29px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">" "</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span> <span class="number">5px</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: solid <span class="number">1px</span> <span class="number">#dc8f03</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--lantern-yellow);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.deng</span><span class="selector-pseudo">:after</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">bottom</span>: -<span class="number">7px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">" "</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border</span>: solid <span class="number">1px</span> <span class="number">#dc8f03</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#ffa500</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--lantern-yellow);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.deng-t</span> {</span><br><span class="line"> <span class="attribute">font-family</span>: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">3.2rem</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--lantern-fontcolor);</span><br><span class="line"> <span class="attribute">font-weight</span>: bold;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">85px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.night</span> <span class="selector-class">.deng-t</span>, </span><br><span class="line"><span class="selector-class">.night</span> <span class="selector-class">.deng-box</span>, </span><br><span class="line"><span class="selector-class">.night</span> <span class="selector-class">.deng-box1</span> {</span><br><span class="line"> <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@-moz-keyframes</span> swing {</span><br><span class="line"> <span class="number">0%</span> {</span><br><span class="line"> -moz-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">10deg</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">50%</span> {</span><br><span class="line"> -moz-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">10deg</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span> {</span><br><span class="line"> -moz-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">10deg</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> swing {</span><br><span class="line"> <span class="number">0%</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">10deg</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">50%</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">10deg</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="number">100%</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">10deg</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="下雪动画"><a href="#下雪动画" class="headerlink" title="下雪动画"></a>下雪动画</h2><p><strong>添加dom</strong></p><p>在<code>themes\butterfly\layout\includes\header\index.pug</code>中添加结构</p><figure class="highlight diff"><table><tr><td class="code"><pre><span class="line">header#page-header(class=isHomeClass style=bg_img)</span><br><span class="line"> include ./nav.pug</span><br><span class="line"></span><br><span class="line"> //- 添加节日氛围灯笼</span><br><span class="line"> include ./lantern.pug</span><br><span class="line"> //- 添加下雪动画</span><br><span class="line"><span class="addition">+ #snowflake</span></span><br><span class="line"><span class="addition">+ - for (var a = 0; a < 199; a++)</span></span><br><span class="line"><span class="addition">+ .snow</span></span><br><span class="line"></span><br><span class="line"> if is_post()</span><br><span class="line"> #coverdiv.coverdiv.loaded</span><br><span class="line"> img#post-cover(src=url_for(top_img) alt='cover' oncontextmenu="return false;" ondragstart="return false;")</span><br><span class="line"></span><br><span class="line"> if top_img !== false</span><br><span class="line"> if is_post()</span><br><span class="line"> include ./post-info.pug</span><br></pre></td></tr></table></figure><p><strong>CSS样式</strong></p><p>因为样式内容太长，所以把样式文件单独上传百度网盘里了，下载后放到<code>source\css</code>文件夹里，然后主题配置<code>_config.butterfly.yml</code>引入样式文件</p><p><a href="https://pan.baidu.com/s/1P0O5WcFFRYe14wdtaH11XA">点击下载</a> 提取码：rjq1</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/snow.css"></span></span><br></pre></td></tr></table></figure><h2 id="烟花动画"><a href="#烟花动画" class="headerlink" title="烟花动画"></a>烟花动画</h2><p><strong>添加dom</strong></p><figure class="highlight diff"><table><tr><td class="code"><pre><span class="line">header#page-header(class=isHomeClass style=bg_img)</span><br><span class="line"> include ./nav.pug</span><br><span class="line"></span><br><span class="line"> //- 添加节日氛围灯笼</span><br><span class="line"> include ./lantern.pug</span><br><span class="line"> //- 添加下雪动画</span><br><span class="line"> #snowflake</span><br><span class="line"> - for (var a = 0; a < 199; a++)</span><br><span class="line"> .snow</span><br><span class="line"> //- 添加烟花动画</span><br><span class="line"><span class="addition">+ #canvas</span></span><br><span class="line"><span class="addition">+ - var num = 20;</span></span><br><span class="line"><span class="addition">+ - for (var i = 0; i < num; i++) {</span></span><br><span class="line"><span class="addition">+ div(class="pattern"+i+" fireworks fire"+i) </span></span><br><span class="line"><span class="addition">+ .ring_1</span></span><br><span class="line"><span class="addition">+ .ring_2</span></span><br><span class="line"><span class="addition">+ - }</span></span><br><span class="line"></span><br><span class="line"> if is_post()</span><br><span class="line"> #coverdiv.coverdiv.loaded</span><br><span class="line"> img#post-cover(src=url_for(top_img) alt='cover' oncontextmenu="return false;" ondragstart="return false;")</span><br><span class="line"></span><br><span class="line"> if top_img !== false</span><br><span class="line"> if is_post()</span><br><span class="line"> include ./post-info.pug</span><br></pre></td></tr></table></figure><p><strong>CSS样式</strong></p><p>因为样式内容太长，所以把样式文件单独上传百度网盘里了，下载后放到<code>source\css</code>文件夹里，然后主题配置<code>_config.butterfly.yml</code>引入样式文件</p><p><a href="https://pan.baidu.com/s/1aDEJkzrfVAb3wBvdB9rsgQ">点击下载</a> 提取码：7mi8</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/fireworks.css"></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 博客魔改 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 网页前端 </tag>
</tags>
</entry>
<entry>
<title>省略繁杂的操作步骤，一键生成动态火焰效果</title>
<link href="/post/b6905cca.html"/>
<url>/post/b6905cca.html</url>
<content type="html"><![CDATA[<p>以前没用插件的时候都是自己耗费大半天时间去做动效，简单点的位置移动一类的还好做，不过一旦动作比较大或者复杂的就很难达成想要的效果。</p><p>这个动态火焰效果以前也弄过，只不过是通过截取火焰燃烧的视频，然后转换为gif动态图。虽然也能达到一定效果，但是局限比较大，不能随心换背景配合搭配使用。不多说，先上动作插件的链接吧。</p><a class="tag-Link" target="_blank" href="https://pan.baidu.com/s/1-V0DTu1Iw-VdK617eiQnvg"> <div class="tag-link-tips">引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/pan.baidu.com/s/1-V0DTu1Iw-VdK617eiQnvg.png);"></div> <div class="tag-link-right"> <div class="tag-link-title">提取码：hg1g</div> <div class="tag-link-sitename">叶椰子</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a><h2 id="安装动作插件"><a href="#安装动作插件" class="headerlink" title="安装动作插件"></a>安装动作插件</h2><p>将下载好的文件解压后找到后缀 .atn 格式文件，将他拖拽到 Photoshop 空白界面里面就会自动安装上。</p><p><img src="https://s2.loli.net/2022/11/17/dlvMhQxFbmToGi8.png" alt="image-20221117165740872"></p><p>导入成功后随便找一张图，然后打开动作面板就可以看见刚刚导入的动作。如果没有找到动作选项，需要到窗口 -> 动作 给勾选上。</p><p><img src="https://s2.loli.net/2022/11/17/hLDjMoS9zu7apHT.png" alt="image-20221117170859531"></p><h2 id="使用动作插件"><a href="#使用动作插件" class="headerlink" title="使用动作插件"></a>使用动作插件</h2><p>打开动作面板，选中动作插件后点击下方三角图标启动动作。</p><p><img src="https://s2.loli.net/2022/11/17/pghMwGmT92Psxrv.png" alt="image-20221117172514258"></p><p>然后会弹出窗口，选择资源包里的效果素材，就在解压文件的包里面。在效果素材里选择一个燃烧效果，不同文件夹里，效果不同，可以自己随自己喜欢，选好后点击打开，就开始生成效果。</p><p><img src="https://s2.loli.net/2022/11/17/XY9Jyvhli3MQk7P.png" alt="image-20221117172821171"></p><p>生成完成后点击时间轴的播放按钮就可以看见效果如何，第一次执行可能会需要一小会。</p><p><img src="https://s2.loli.net/2022/11/17/sYG7UMv5TFx3wdb.png" alt="image-20221117173226439"></p><p>选中生成后的效果图层 Ctrl+t 可以根据自己需求调整位置和大小范围</p><p><img src="https://s2.loli.net/2022/11/17/pOs7KEx12Hfohdb.png" alt="image-20221117173637421"></p><p>调整到自己满意的大小效果后就可以导出保存为gif格式，完成效果图就像下面一样（图床上传大小要求限制，压缩比较狠）。</p><p><img src="https://s2.loli.net/2022/11/17/GCNSeM2d5i6xsW4.gif" alt="image-20221117175932255"></p>]]></content>
<categories>
<category> 实用教程 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> Photoshop </tag>
<tag> 干货 </tag>
</tags>
</entry>
<entry>
<title>群晖NAS去除端口号直接访问，不用再记住每个繁杂端口号</title>
<link href="/post/6df4fc40.html"/>
<url>/post/6df4fc40.html</url>
<content type="html"><![CDATA[<p>前面弄了个黑群晖，就买了个硬盘用上了nas，虽然是黑户。加端口号访问最开始还没感觉多麻烦，但是后面随着用的东西多了起来，家里端口转发的端口也就多了起来。</p><p>为了减少记住繁杂的各个服务端口号，于是就查询各种方法，最后只有这个方法暂时满足且能使用。虽然现在不用这个方法，但保不齐什么时候需要用到，记录下来备忘。</p><p><strong>说明</strong>：因为ipv4公网ip的443和80端口被运营商封闭，只能通过ipv6实现</p><h2 id="先在域名解析里添加一条地址解析"><a href="#先在域名解析里添加一条地址解析" class="headerlink" title="先在域名解析里添加一条地址解析"></a>先在域名解析里添加一条地址解析</h2><ul><li>主机记录：可以填写www或者随意填写nas等二级域名名称（最好别乱填写，不然容易记混淆）</li><li>记录类型：AAAA</li><li>记录值：ipv6地址</li></ul><p><img src="https://s2.loli.net/2022/11/16/j5Qp2I6hKZNB3ls.png" alt="image-20221116232350005"></p><h2 id="群晖后台里添加反向代理"><a href="#群晖后台里添加反向代理" class="headerlink" title="群晖后台里添加反向代理"></a>群晖后台里添加反向代理</h2><p>描述就是备注名称，随意填写。</p><ul><li>来源和目的地-协议：因为我用的是dsm的https端口，所以都选择https</li><li>来源主机名：xxx.xxxxx.cn，xxx表示可以自己随意填写二级域名名称</li><li>来源端口号：必须填写 443</li><li>目的地主机名：必须和步骤一里面域名解析添加的名称相同</li><li>目的地端口号：必须填写 dsm 里面的端口号</li></ul><p><img src="https://s2.loli.net/2022/11/17/uFGZM8zEbXo75jq.png" alt="image-20221117002326639"></p><p>通过https访问后，如果出现不安全提示，说明需要给来源主机名的域名添加ssl证书</p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> NAS </tag>
<tag> 群晖 </tag>
</tags>
</entry>
<entry>
<title>Hexo中隐藏指定文章，并使它们仅通过只有知道链接的才可以访问隐藏文章</title>
<link href="/post/3180c6a1.html"/>
<url>/post/3180c6a1.html</url>
<content type="html"><![CDATA[<p>前面用heo方案隐藏文章试了下，如洪哥所言会首页隐藏了，但任然会计数，首页隐藏位置会一片空白。这样的话比较影响页面内容的展示和美观，所以最后还是换插件了。</p><p>我的需求并不高，只要首页不显示隐藏的文章，并且不影响布局就可以。我用的插件是 hexo-hide-posts，可以在博客中隐藏指定文章，并只能通过文章的链接来访问，也可以让所有隐藏的文章在特定页面可见。</p><p>当一篇文章设置为隐藏时，不会出现在任何列表中（包括首页、存档、分类页面、标签页面、Feed、站点地图等），也不会被搜索引擎索引（前提是搜索引擎遵守 noindex 标签）。</p><a class="tag-Link" target="_blank" href="https://github.com/prinsss/hexo-hide-posts/blob/master/README_ZH.md"> <div class="tag-link-tips">引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/github.com/prinsss/hexo-hide-posts/blob/master/README_ZH.md.png);"></div> <div class="tag-link-right"> <div class="tag-link-title">hexo-hide-posts</div> <div class="tag-link-sitename">prinsss</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">$ npm install hexo-hide-posts --save</span><br></pre></td></tr></table></figure><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><p>在文章的 <a href="https://hexo.io/docs/front-matter">front-matter</a> 中添加 <code>hidden: true</code> 即可隐藏文章。比如隐藏了<code>source/_posts/lorem-ipsum.md</code> 这篇文章：</p><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 'Lorem Ipsum'</span><br><span class="line">date: '2019/8/10 11:45:14'</span><br><span class="line">hidden: true</span><br><span class="line">---</span><br><span class="line">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br></pre></td></tr></table></figure><p>完成设置后即可发现首页和其他分类上文章都被隐藏了，但可以通过<code>https://hexo.test/lorem-ipsum/</code> 链接访问它。（如果想要完全隐藏一篇文章，可以直接将其设置为<a href="https://hexo.io/zh-cn/docs/writing.html#%E8%8D%89%E7%A8%BF">草稿</a>）</p><p>可以在命令行运行 <code>hexo hidden:list</code> 来获取当前所有的已隐藏文章列表。插件也在 <a href="https://hexo.io/api/locals">Local Variables</a> 中添加了 <code>all_posts</code> 和 <code>hidden_posts</code> 变量，供自定义主题使用。</p><h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><p>在站点 <code>_config.yml</code> 中添加如下配置：</p><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"># hexo-hide-posts</span><br><span class="line">hide_posts:</span><br><span class="line"> enable: true</span><br><span class="line"> # 可以改成其他你喜欢的名字</span><br><span class="line"> filter: hidden</span><br><span class="line"> # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见</span><br><span class="line"> # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.</span><br><span class="line"> public_generators: []</span><br><span class="line"> # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录</span><br><span class="line"> noindex: true</span><br></pre></td></tr></table></figure><p>比如：设置 <code>filter: secret</code> 之后，你就可以在 front-matter 中使用 <code>secret: true</code> 来隐藏文章了。</p><p><strong>注意</strong>：不是所有插件注册的 generator 名称都与其插件名称相同。比如 <a href="https://github.com/next-theme/hexo-generator-searchdb">hexo-generator-searchdb</a> 插件，其注册的 generator 名称就是 <code>xml</code> 和 <code>json</code>，而非 <code>searchdb</code>。因此，在填写 <code>public_generators</code> 参数时要注意使用插件实际注册的 generator 名称（可以查阅对应插件的源码来获取准确的注册名）。</p>]]></content>
<categories>
<category> 转载内容 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客插件 </tag>
</tags>
</entry>
<entry>
<title>利用AI快速去除背景上的路人或者其他杂物信息，暂为记录配合使用流程，还无法使用</title>
<link href="/post/a256aade.html"/>
<url>/post/a256aade.html</url>
<content type="html"><![CDATA[<p>前面有次朋友和家里人去游玩回来后，发给我四五张照片让我帮忙把照片里多余的去掉一下，虽然也单独通过Photoshop给完成了处理，但处理过程麻烦不是一星半点。</p><p>不过人少或者简单内容这种还好处理，如果人物或者过多，那处理起来实在是太麻烦了，甚至根本达不到理想效果，于是后面开始查询有没有方便快捷的方式。</p><p>在一天逛油管的时候首页推荐了一个教程视频，通过Photoshop配合DALL-A网站AI处理后的背景效果很不错。不过DALL-A国内暂时无法使用，所以这篇文章只是个人备忘记录流程。如果感兴趣，可以自行搜索看下DALL-A生成后的照片效果。</p><h2 id="先在Photoshop里简单处理"><a href="#先在Photoshop里简单处理" class="headerlink" title="先在Photoshop里简单处理"></a>先在Photoshop里简单处理</h2><p>打开Photoshop后对照片后面要处理的部分，例如：要去掉的路人、杂物、路灯、电线，进行擦除处理，这些擦除的地方后面要用AI来把擦除掉的部分生成没有人的背景。</p><p><img src="https://s2.loli.net/2022/11/13/j72rJgdlm6vIteS.png" alt="擦除前后对比"></p><p>然后需要需要对擦除后的照片做一个正方形大小裁切处理，因为DALL-E中只会处理 1024*1024像素的范围区域，所以为了更快速的处理，先做一个裁切。</p><p><img src="https://s2.loli.net/2022/11/13/fnYJpkW13c5EFjG.png" alt="裁切处理后"></p><p>然后把裁切处理后的图片另存为PNG格式</p><h2 id="DALL-A中处理"><a href="#DALL-A中处理" class="headerlink" title="DALL-A中处理"></a>DALL-A中处理</h2><p>网站需要注册后使用，注册完成后第一个月可以获得50张图片免费额度，后面每月可以获得15张免费额度。</p><p>做完上面步骤后就可以到DALL-A网站中进行处理了，下方卡片就是这个网站的网址。不过目前部分国家无法使用，遗憾的是国内目前就在暂时无法使用行列中</p><a class="tag-Link" target="_blank" href="https://openai.com/dall-e-2/"> <div class="tag-link-tips">引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/openai.com/dall-e-2/.png);"></div> <div class="tag-link-right"> <div class="tag-link-title">DALL-A</div> <div class="tag-link-sitename">叶椰子</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a><p>登录后显示无法使用，只有等后续开放地区后再自己实际测试了，如果效果不错那也可以省略不少事。</p><p><img src="https://s2.loli.net/2022/11/13/VFiIHa9sDh6BEYz.png" alt="所在地区无法使用"></p>]]></content>
<categories>
<category> 实用教程 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> Photoshop </tag>
</tags>
</entry>
<entry>
<title>WordPress 如何通过插件实现密码保护文章的内容</title>
<link href="/post/f90d58df.html"/>
<url>/post/f90d58df.html</url>
<content type="html"><![CDATA[<p>对于像WordPress这样的流行内容管理系统，安全性至关重要。有时候我们发布的内容不一定希望所有的人都可以看到，比如某些相册图片、某些个人隐私、某些只对一部分人可以查看的内容等，保护的措施有很多种，简单分享下通过密码保护的一些方法</p><h2 id="保护整篇文章-x2F-页面"><a href="#保护整篇文章-x2F-页面" class="headerlink" title="保护整篇文章/页面"></a>保护整篇文章/页面</h2><p>WordPress内置有设置选项，在文章或页面的编辑器的右边【发布】这个模块下，有一个“公开”选项，这里就可以设置通过密码访问，然后当有人在前台访问这篇文章的时候，就需要输入密码。</p><h2 id="保护文章-x2F-页面的一小部分"><a href="#保护文章-x2F-页面的一小部分" class="headerlink" title="保护文章/页面的一小部分"></a>保护文章/页面的一小部分</h2><p>有时候，我们可能不需要保护整篇文章，而是文章的一些部分，我们可以借住 Passster 插件来实现。</p><p>Passster 插件允许用户使用密码保护页面或文章的一部分。可以通过简码来包含要保护的内容，用户访问的时候将看到一个输入密码的表单，如果密码正确，受保护的内容会显示出来。支持在一篇文章设置多个保护的部分，也可以设置Cookie有效时间，支持Ajax加载，还可以设置为验证码保护！</p><p>访问前台页面就可以看到输入密码或验证码（如果你设置的是验证码保护）访问的表单。</p><p>更多的介绍和使用方法，请看插件主页：<a href="https://wordpress.org/plugins/content-protector/">https://wordpress.org/plugins/content-protector/</a></p><h2 id="保护某些分类下的文章"><a href="#保护某些分类下的文章" class="headerlink" title="保护某些分类下的文章"></a>保护某些分类下的文章</h2><p>虽然 WordPress 自身可以给单篇文章添加密码保护，但是如果需要将整个或多个分类下的文章都添加密码保护，一篇篇添加密码太耗时间了，可以试试 Access Category Password 插件，可以给某个或多个分类下的文章添加密码保护，访问受限制的分类下的文章（内容和摘要）都必须输入正确的密码。</p><p>当然了，该插件同样可以限制通过feed订阅网站内容的用户，在feed中，如果是受限制的分类的文章，就会替换为所设置的提示内容。</p><h2 id="保护整个网站"><a href="#保护整个网站" class="headerlink" title="保护整个网站"></a>保护整个网站</h2><p>要保护整个网站的所有文章，可以使用 Password Protected 插件，它是使用单个密码快速保护WordPress网站的一种非常简单的方法。此插件仅保护你的WordPress内容。它不保护上传的图像或文件，因此如果输入图像文件中的确切网址，它仍然可以访问的。当访问网站时，就会要求输入密码。</p><p>你可以通过设置选项进行一些设置</p><p>更多信息，请访问插件主页：<a href="https://wordpress.org/plugins/password-protected/">https://wordpress.org/plugins/password-protected/</a></p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
<tag> 文章加密 </tag>
</tags>
</entry>
<entry>
<title>Win系统状态栏美化，状态栏居中、状态栏透明以及动画效果</title>
<link href="/post/7a652553.html"/>
<url>/post/7a652553.html</url>
<content type="html"><![CDATA[<p>Win11以下系统没有任务栏居中显示，不过看见苹果mac上漂亮的界面也会想体验试一下，其实win系统上也有几款软件可以实现和mac上差不多的效果，比如我知道的就有一款叫MyDockFinder，我要求没有那么多，简单居中一下就可以，就没有使用。</p><h3 id="状态栏"><a href="#状态栏" class="headerlink" title="状态栏"></a>状态栏</h3><ul><li>TranslucentTB：状态栏透明设置</li><li>FalconX：状态栏任务居中和透明</li><li>TaskbarX：状态栏任务居中和透明</li></ul><p>上面三个软件可以根据自己需要选择，我自己用的是TaskbarX。</p><p><strong>以下是TaskbarX的一些设置：</strong></p><p><img src="https://s2.loli.net/2022/07/30/7Owiso2G5aqm9yR.png" alt="image-20220730004313222"></p><p><img src="https://s2.loli.net/2022/07/30/NtXdDwHQkU8TfeS.png" alt="image-20220730004347858"></p><p><img src="https://s2.loli.net/2022/07/30/APdkuTySqri3vNI.png" alt="image-20220730004415825"></p><p><img src="https://s2.loli.net/2022/07/30/Sp2BUhqYAvLJl5O.png" alt="image-20220730004452612"></p><p><img src="https://s2.loli.net/2022/07/30/fbDRnQPkdsBI9GT.png" alt="image-20220730004545814"></p><p><img src="https://s2.loli.net/2022/07/30/M35ATxYueVoUtmj.png" alt="image-20220730004627690"></p><p>最后推荐一款很不错的动态壁纸软件，感兴趣的可以去搜索一下</p><p>wallpaper engine：动态壁纸 - steam商店购买</p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> 美化 </tag>
<tag> 状态栏 </tag>
<tag> Win系统 </tag>
</tags>
</entry>
<entry>
<title>hexo部署博客错误合集：后续遇到更多问题会持续更新</title>
<link href="/post/54037a15.html"/>
<url>/post/54037a15.html</url>
<content type="html"><![CDATA[<p>记录一些部署博客和日常使用遇到的一些错误信息，备忘记录一下，不定时更新</p><h2 id="错误一"><a href="#错误一" class="headerlink" title="错误一"></a>错误一</h2><p>hexo部署网站博客时执行：hexo clean && hexo g && hexo d，结果最后一步报错：ERROR Deployer not found: git</p><h3 id="解决方法："><a href="#解决方法：" class="headerlink" title="解决方法："></a>解决方法：</h3><ol><li>sudo install – save hexo-deployer-git</li><li>然后再运行执行即可</li></ol><h2 id="错误二"><a href="#错误二" class="headerlink" title="错误二"></a>错误二</h2><p>显示信息：extends includes/layout.pug block content include includes/recent-posts.pug include includes/partial</p><h3 id="解决方法：-1"><a href="#解决方法：-1" class="headerlink" title="解决方法："></a>解决方法：</h3><p>执行如下命令</p><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive</span><br></pre></td></tr></table></figure><p>清除缓存：<code>hexo clean</code></p><p>生成静态文件即可：<code>hexo g</code></p><p><img src="https://s2.loli.net/2022/07/30/9QfcxnXgoD5423u.png" alt="image-20220730004954029"></p><h2 id="错误三"><a href="#错误三" class="headerlink" title="错误三"></a>错误三</h2><p>执行 hexo d 上传 github 的时候出现下面信息：</p><p><img src="https://s2.loli.net/2022/07/30/UsQza4eODo62GNH.png" alt="image-20220730005024039"></p><h3 id="解决方法：-2"><a href="#解决方法：-2" class="headerlink" title="解决方法："></a>解决方法：</h3><p>这个提示是网络问题，重新执行 hexo d 就可以，直到上传成功。</p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> hexo错误合集 </tag>
<tag> 报错 </tag>
</tags>
</entry>
<entry>
<title>WordPress 给自己网站在输入框位置添加输入动画效果</title>
<link href="/post/c453542f.html"/>
<url>/post/c453542f.html</url>
<content type="html"><![CDATA[<p>有时候会感觉自己网站输入太单调，可以加点输入的动画效果，也可以带来点新鲜感，虽然我自己不是很喜欢太花哨，但指不定什么时候就用上了呢，以此备用。</p><h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><p>将以下代码粘贴到页面的 <strong>页尾脚本</strong> 即可生效</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><script></span><br><span class="line">(<span class="keyword">function</span> <span class="title function_">webpackUniversalModuleDefinition</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">exports</span> === <span class="string">"object"</span> && <span class="keyword">typeof</span> <span class="variable language_">module</span> === <span class="string">"object"</span>) {</span><br><span class="line"> <span class="variable language_">module</span>.<span class="property">exports</span> = <span class="title function_">b</span>()</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> define === <span class="string">"function"</span> && define.<span class="property">amd</span>) {</span><br><span class="line"> <span class="title function_">define</span>([], b)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">exports</span> === <span class="string">"object"</span>) {</span><br><span class="line"> <span class="built_in">exports</span>[<span class="string">"POWERMODE"</span>] = <span class="title function_">b</span>()</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> a[<span class="string">"POWERMODE"</span>] = <span class="title function_">b</span>()</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})(<span class="variable language_">this</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (<span class="keyword">function</span>(<span class="params">a</span>) {</span><br><span class="line"> <span class="keyword">var</span> b = {};</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">c</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">if</span> (b[e]) {</span><br><span class="line"> <span class="keyword">return</span> b[e].<span class="property">exports</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> d = b[e] = {</span><br><span class="line"> <span class="attr">exports</span>: {},</span><br><span class="line"> <span class="attr">id</span>: e,</span><br><span class="line"> <span class="attr">loaded</span>: <span class="literal">false</span></span><br><span class="line"> };</span><br><span class="line"> a[e].<span class="title function_">call</span>(d.<span class="property">exports</span>, d, d.<span class="property">exports</span>, c);</span><br><span class="line"> d.<span class="property">loaded</span> = <span class="literal">true</span>;</span><br><span class="line"> <span class="keyword">return</span> d.<span class="property">exports</span></span><br><span class="line"> }</span><br><span class="line"> c.<span class="property">m</span> = a;</span><br><span class="line"> c.<span class="property">c</span> = b;</span><br><span class="line"> c.<span class="property">p</span> = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">c</span>(<span class="number">0</span>)</span><br><span class="line"> })([<span class="keyword">function</span>(<span class="params">c, g, b</span>) {</span><br><span class="line"> <span class="keyword">var</span> d = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">"canvas"</span>);</span><br><span class="line"> d.<span class="property">width</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span>;</span><br><span class="line"> d.<span class="property">height</span> = <span class="variable language_">window</span>.<span class="property">innerHeight</span>;</span><br><span class="line"> d.<span class="property">style</span>.<span class="property">cssText</span> = <span class="string">"position:fixed;top:0;left:0;pointer-events:none;z-index:999999"</span>;</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">"resize"</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> d.<span class="property">width</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span>;</span><br><span class="line"> d.<span class="property">height</span> = <span class="variable language_">window</span>.<span class="property">innerHeight</span></span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(d);</span><br><span class="line"> <span class="keyword">var</span> a = d.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span><br><span class="line"> <span class="keyword">var</span> n = [];</span><br><span class="line"> <span class="keyword">var</span> j = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> k = <span class="number">120</span>;</span><br><span class="line"> <span class="keyword">var</span> f = k;</span><br><span class="line"> <span class="keyword">var</span> p = <span class="literal">false</span>;</span><br><span class="line"> o.<span class="property">shake</span> = <span class="literal">true</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">l</span>(<span class="params">r, q</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">random</span>() * (q - r) + r</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">m</span>(<span class="params">r</span>) {</span><br><span class="line"> <span class="keyword">if</span> (o.<span class="property">colorful</span>) {</span><br><span class="line"> <span class="keyword">var</span> q = <span class="title function_">l</span>(<span class="number">0</span>, <span class="number">360</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"hsla("</span> + <span class="title function_">l</span>(q - <span class="number">10</span>, q + <span class="number">10</span>) + <span class="string">", 100%, "</span> + <span class="title function_">l</span>(<span class="number">50</span>, <span class="number">80</span>) + <span class="string">"%, "</span> + <span class="number">1</span> + <span class="string">")"</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(r).<span class="property">color</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">e</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> t = <span class="variable language_">document</span>.<span class="property">activeElement</span>;</span><br><span class="line"> <span class="keyword">var</span> v;</span><br><span class="line"> <span class="keyword">if</span> (t.<span class="property">tagName</span> === <span class="string">"TEXTAREA"</span> || (t.<span class="property">tagName</span> === <span class="string">"INPUT"</span> && t.<span class="title function_">getAttribute</span>(<span class="string">"type"</span>) === <span class="string">"text"</span>)) {</span><br><span class="line"> <span class="keyword">var</span> u = <span class="title function_">b</span>(<span class="number">1</span>)(t, t.<span class="property">selectionStart</span>);</span><br><span class="line"> v = t.<span class="title function_">getBoundingClientRect</span>();</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">x</span>: u.<span class="property">left</span> + v.<span class="property">left</span>,</span><br><span class="line"> <span class="attr">y</span>: u.<span class="property">top</span> + v.<span class="property">top</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="title function_">m</span>(t)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> s = <span class="variable language_">window</span>.<span class="title function_">getSelection</span>();</span><br><span class="line"> <span class="keyword">if</span> (s.<span class="property">rangeCount</span>) {</span><br><span class="line"> <span class="keyword">var</span> q = s.<span class="title function_">getRangeAt</span>(<span class="number">0</span>);</span><br><span class="line"> <span class="keyword">var</span> r = q.<span class="property">startContainer</span>;</span><br><span class="line"> <span class="keyword">if</span> (r.<span class="property">nodeType</span> === <span class="variable language_">document</span>.<span class="property">TEXT_NODE</span>) {</span><br><span class="line"> r = r.<span class="property">parentNode</span></span><br><span class="line"> }</span><br><span class="line"> v = q.<span class="title function_">getBoundingClientRect</span>();</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">x</span>: v.<span class="property">left</span>,</span><br><span class="line"> <span class="attr">y</span>: v.<span class="property">top</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="title function_">m</span>(r)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">x</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">y</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">"transparent"</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">h</span>(<span class="params">q, s, r</span>) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">x</span>: q,</span><br><span class="line"> <span class="attr">y</span>: s,</span><br><span class="line"> <span class="attr">alpha</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">color</span>: r,</span><br><span class="line"> <span class="attr">velocity</span>: {</span><br><span class="line"> <span class="attr">x</span>: -<span class="number">1</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">2</span>,</span><br><span class="line"> <span class="attr">y</span>: -<span class="number">3.5</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">2</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">o</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> t = <span class="title function_">e</span>();</span><br><span class="line"> <span class="keyword">var</span> s = <span class="number">5</span> + <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">10</span>);</span><br><span class="line"> <span class="keyword">while</span> (s--) {</span><br><span class="line"> n[j] = <span class="title function_">h</span>(t.<span class="property">x</span>, t.<span class="property">y</span>, t.<span class="property">color</span>);</span><br><span class="line"> j = (j + <span class="number">1</span>) % <span class="number">500</span></span><br><span class="line"> }</span><br><span class="line"> f = k;</span><br><span class="line"> <span class="keyword">if</span> (!p) {</span><br><span class="line"> <span class="title function_">requestAnimationFrame</span>(i)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (o.<span class="property">shake</span>) {</span><br><span class="line"> <span class="keyword">var</span> r = <span class="number">1</span> + <span class="number">2</span> * <span class="title class_">Math</span>.<span class="title function_">random</span>();</span><br><span class="line"> <span class="keyword">var</span> q = r * (<span class="title class_">Math</span>.<span class="title function_">random</span>() > <span class="number">0.5</span> ? -<span class="number">1</span> : <span class="number">1</span>);</span><br><span class="line"> <span class="keyword">var</span> u = r * (<span class="title class_">Math</span>.<span class="title function_">random</span>() > <span class="number">0.5</span> ? -<span class="number">1</span> : <span class="number">1</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">marginLeft</span> = q + <span class="string">"px"</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">marginTop</span> = u + <span class="string">"px"</span>;</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">marginLeft</span> = <span class="string">""</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">marginTop</span> = <span class="string">""</span></span><br><span class="line"> }, <span class="number">75</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> o.<span class="property">colorful</span> = <span class="literal">false</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">i</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (f > <span class="number">0</span>) {</span><br><span class="line"> <span class="title function_">requestAnimationFrame</span>(i);</span><br><span class="line"> f--;</span><br><span class="line"> p = <span class="literal">true</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> p = <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> a.<span class="title function_">clearRect</span>(<span class="number">0</span>, <span class="number">0</span>, d.<span class="property">width</span>, d.<span class="property">height</span>);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> q = <span class="number">0</span>; q < n.<span class="property">length</span>; ++q) {</span><br><span class="line"> <span class="keyword">var</span> r = n[q];</span><br><span class="line"> <span class="keyword">if</span> (r.<span class="property">alpha</span> <= <span class="number">0.1</span>) {</span><br><span class="line"> <span class="keyword">continue</span></span><br><span class="line"> }</span><br><span class="line"> r.<span class="property">velocity</span>.<span class="property">y</span> += <span class="number">0.075</span>;</span><br><span class="line"> r.<span class="property">x</span> += r.<span class="property">velocity</span>.<span class="property">x</span>;</span><br><span class="line"> r.<span class="property">y</span> += r.<span class="property">velocity</span>.<span class="property">y</span>;</span><br><span class="line"> r.<span class="property">alpha</span> *= <span class="number">0.96</span>;</span><br><span class="line"> a.<span class="property">globalAlpha</span> = r.<span class="property">alpha</span>;</span><br><span class="line"> a.<span class="property">fillStyle</span> = r.<span class="property">color</span>;</span><br><span class="line"> a.<span class="title function_">fillRect</span>(<span class="title class_">Math</span>.<span class="title function_">round</span>(r.<span class="property">x</span> - <span class="number">1.5</span>), <span class="title class_">Math</span>.<span class="title function_">round</span>(r.<span class="property">y</span> - <span class="number">1.5</span>), <span class="number">3</span>, <span class="number">3</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">requestAnimationFrame</span>(i);</span><br><span class="line"> c.<span class="property">exports</span> = o</span><br><span class="line"> }, <span class="keyword">function</span>(<span class="params">b, a</span>) {</span><br><span class="line"> (<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> d = [<span class="string">"direction"</span>, <span class="string">"boxSizing"</span>, <span class="string">"width"</span>, <span class="string">"height"</span>, <span class="string">"overflowX"</span>, <span class="string">"overflowY"</span>, <span class="string">"borderTopWidth"</span>, <span class="string">"borderRightWidth"</span>, <span class="string">"borderBottomWidth"</span>, <span class="string">"borderLeftWidth"</span>, <span class="string">"borderStyle"</span>, <span class="string">"paddingTop"</span>, <span class="string">"paddingRight"</span>, <span class="string">"paddingBottom"</span>, <span class="string">"paddingLeft"</span>, <span class="string">"fontStyle"</span>, <span class="string">"fontVariant"</span>, <span class="string">"fontWeight"</span>, <span class="string">"fontStretch"</span>, <span class="string">"fontSize"</span>, <span class="string">"fontSizeAdjust"</span>, <span class="string">"lineHeight"</span>, <span class="string">"fontFamily"</span>, <span class="string">"textAlign"</span>, <span class="string">"textTransform"</span>, <span class="string">"textIndent"</span>, <span class="string">"textDecoration"</span>, <span class="string">"letterSpacing"</span>, <span class="string">"wordSpacing"</span>, <span class="string">"tabSize"</span>, <span class="string">"MozTabSize"</span>];</span><br><span class="line"> <span class="keyword">var</span> e = <span class="variable language_">window</span>.<span class="property">mozInnerScreenX</span> != <span class="literal">null</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">c</span>(<span class="params">k, l, o</span>) {</span><br><span class="line"> <span class="keyword">var</span> h = o && o.<span class="property">debug</span> || <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">if</span> (h) {</span><br><span class="line"> <span class="keyword">var</span> i = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#input-textarea-caret-position-mirror-div"</span>);</span><br><span class="line"> <span class="keyword">if</span> (i) {</span><br><span class="line"> i.<span class="property">parentNode</span>.<span class="title function_">removeChild</span>(i)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> f = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">"div"</span>);</span><br><span class="line"> f.<span class="property">id</span> = <span class="string">"input-textarea-caret-position-mirror-div"</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(f);</span><br><span class="line"> <span class="keyword">var</span> g = f.<span class="property">style</span>;</span><br><span class="line"> <span class="keyword">var</span> j = <span class="variable language_">window</span>.<span class="property">getComputedStyle</span> ? <span class="title function_">getComputedStyle</span>(k) : k.<span class="property">currentStyle</span>;</span><br><span class="line"> g.<span class="property">whiteSpace</span> = <span class="string">"pre-wrap"</span>;</span><br><span class="line"> <span class="keyword">if</span> (k.<span class="property">nodeName</span> !== <span class="string">"INPUT"</span>) {</span><br><span class="line"> g.<span class="property">wordWrap</span> = <span class="string">"break-word"</span></span><br><span class="line"> }</span><br><span class="line"> g.<span class="property">position</span> = <span class="string">"absolute"</span>;</span><br><span class="line"> <span class="keyword">if</span> (!h) {</span><br><span class="line"> g.<span class="property">visibility</span> = <span class="string">"hidden"</span></span><br><span class="line"> }</span><br><span class="line"> d.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">p</span>) {</span><br><span class="line"> g[p] = j[p]</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">if</span> (e) {</span><br><span class="line"> <span class="keyword">if</span> (k.<span class="property">scrollHeight</span> > <span class="built_in">parseInt</span>(j.<span class="property">height</span>)) {</span><br><span class="line"> g.<span class="property">overflowY</span> = <span class="string">"scroll"</span></span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> g.<span class="property">overflow</span> = <span class="string">"hidden"</span></span><br><span class="line"> }</span><br><span class="line"> f.<span class="property">textContent</span> = k.<span class="property">value</span>.<span class="title function_">substring</span>(<span class="number">0</span>, l);</span><br><span class="line"> <span class="keyword">if</span> (k.<span class="property">nodeName</span> === <span class="string">"INPUT"</span>) {</span><br><span class="line"> f.<span class="property">textContent</span> = f.<span class="property">textContent</span>.<span class="title function_">replace</span>(<span class="regexp">/\s/g</span>, <span class="string">"\u00a0"</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> n = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">"span"</span>);</span><br><span class="line"> n.<span class="property">textContent</span> = k.<span class="property">value</span>.<span class="title function_">substring</span>(l) || <span class="string">"."</span>;</span><br><span class="line"> f.<span class="title function_">appendChild</span>(n);</span><br><span class="line"> <span class="keyword">var</span> m = {</span><br><span class="line"> <span class="attr">top</span>: n.<span class="property">offsetTop</span> + <span class="built_in">parseInt</span>(j[<span class="string">"borderTopWidth"</span>]),</span><br><span class="line"> <span class="attr">left</span>: n.<span class="property">offsetLeft</span> + <span class="built_in">parseInt</span>(j[<span class="string">"borderLeftWidth"</span>])</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">if</span> (h) {</span><br><span class="line"> n.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">"#aaa"</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(f)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> m</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> b != <span class="string">"undefined"</span> && <span class="keyword">typeof</span> b.<span class="property">exports</span> != <span class="string">"undefined"</span>) {</span><br><span class="line"> b.<span class="property">exports</span> = c</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">getCaretCoordinates</span> = c</span><br><span class="line"> }</span><br><span class="line"> }())</span><br><span class="line"> }])</span><br><span class="line">});</span><br><span class="line"><span class="variable constant_">POWERMODE</span>.<span class="property">colorful</span> = <span class="literal">true</span>;</span><br><span class="line"><span class="variable constant_">POWERMODE</span>.<span class="property">shake</span> = <span class="literal">false</span>;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">addEventListener</span>(<span class="string">"input"</span>, <span class="variable constant_">POWERMODE</span>);</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h2 id="效果截图"><a href="#效果截图" class="headerlink" title="效果截图"></a>效果截图</h2><p><img src="https://s2.loli.net/2022/07/30/tnPsXdpCI8NWQhv.png" alt="image-20220730002529646"></p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> 输入特效 </tag>
</tags>
</entry>
<entry>
<title>WordPress 解决 Argon 主题只能点击标题进入文章</title>
<link href="/post/3c7546ed.html"/>
<url>/post/3c7546ed.html</url>
<content type="html"><![CDATA[<h3 id="步骤一：找到相对应文章列表卡片布局"><a href="#步骤一：找到相对应文章列表卡片布局" class="headerlink" title="步骤一：找到相对应文章列表卡片布局"></a>步骤一：找到相对应文章列表卡片布局</h3><p><img src="https://s2.loli.net/2022/07/30/5WrPhB8GAJYvOdC.png" alt="image-20220730002245475"></p><h3 id="步骤二：进入不同的preview-php文件"><a href="#步骤二：进入不同的preview-php文件" class="headerlink" title="步骤二：进入不同的preview.php文件"></a>步骤二：进入不同的preview.php文件</h3><p><img src="https://s2.loli.net/2022/07/30/bVtqUgl7eOFhMiL.png" alt="image-20220730002316294"></p><p>找到class=”post-content”，在后面添加如下代码：</p><figure class="highlight php"><table><tr><td class="code"><pre><span class="line">onclick=<span class="string">"window.location.href='<?php the_permalink(); ?>'"</span> style=<span class="string">"cursor: pointer"</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
<tag> Argon主题 </tag>
</tags>
</entry>
<entry>
<title>WordPress 实现评论后可见文章隐藏的内容</title>
<link href="/post/3d4b9dcb.html"/>
<url>/post/3d4b9dcb.html</url>
<content type="html"><![CDATA[<p>wordpress在实际运营的过程中往往需要用到很多功能，在能不安装插件的情况下本来还是不喜欢安装插件，可以通过PHP来实现回复可见的功能新增</p><h2 id="添加教程"><a href="#添加教程" class="headerlink" title="添加教程"></a>添加教程</h2><ol><li><p>首先进入wordpress后台 ->> 外观 ->> 主题文件编辑器，选择当前启用主题下的functions.php文件</p></li><li><p>将如下代码添加进functions.php中即可实现回复可见</p></li></ol><h2 id="添加如下代码："><a href="#添加如下代码：" class="headerlink" title="添加如下代码："></a>添加如下代码：</h2><figure class="highlight php"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 添加回复可见功能 */</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">reply_to_read</span>(<span class="params"><span class="variable">$atts</span>,<span class="variable">$content</span>=<span class="literal">null</span></span>)</span>{</span><br><span class="line"> <span class="title function_ invoke__">extract</span>(<span class="title function_ invoke__">shortcode_atts</span>(<span class="keyword">array</span>(<span class="string">"notice"</span>=><span class="string">'<span class="reply-to-read" style="font-size:16px; letter-spacing:3px; font-weight:bold; background-color:#f7f7f7; padding:10px;text-align: center;width:100%; color:#272727; border-radius:8px; border-style:dotted; border-width:2px; border-color:#959595; display:block;">此处内容需要<a style="color:#f5365c;" href="'</span>. <span class="title function_ invoke__">get_permalink</span>().<span class="string">'#respond" title="评论本文">评论本文</a>后<a style="color:#f5365c;" href="javascript:window.location.reload();" title="刷新">刷新本页</a>才能查看.</span>'</span>),<span class="variable">$atts</span>));</span><br><span class="line"> <span class="variable">$email</span>=<span class="literal">null</span>;</span><br><span class="line"> <span class="variable">$user_ID</span>=(<span class="keyword">int</span>)<span class="title function_ invoke__">wp_get_current_user</span>()->ID;</span><br><span class="line"> <span class="keyword">if</span>(<span class="variable">$user_ID</span>><span class="number">0</span>){</span><br><span class="line"> <span class="variable">$email</span> = <span class="title function_ invoke__">get_userdata</span>(<span class="variable">$user_ID</span>)->user_email; <span class="comment">//如果用户已登录,从登录信息中获取email</span></span><br><span class="line"><span class="comment">//对博主直接显示内容 </span></span><br><span class="line"> <span class="variable">$admin_email</span> = <span class="string">"1240312603@qq.com"</span>; <span class="comment">//博主Email </span></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable">$email</span> == <span class="variable">$admin_email</span>) { </span><br><span class="line"> <span class="keyword">return</span> <span class="variable">$content</span>; </span><br><span class="line"> } </span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">isset</span>(<span class="variable">$_COOKIE</span>[<span class="string">'comment_author_email_'</span>.COOKIEHASH])){</span><br><span class="line"> <span class="variable">$email</span>=<span class="title function_ invoke__">str_replace</span>(<span class="string">'%40'</span>,<span class="string">'@'</span>,<span class="variable">$_COOKIE</span>[<span class="string">'comment_author_email_'</span>.COOKIEHASH]); <span class="comment">//如果用户未登录但电脑上有本站的Cookie信息，从Cookie里读取email</span></span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="variable">$notice</span>; <span class="comment">//无法获取email，直接返回提示信息</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">empty</span>(<span class="variable">$email</span>)){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable">$notice</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">global</span> <span class="variable">$wpdb</span>;</span><br><span class="line"> <span class="variable">$post_id</span>=<span class="title function_ invoke__">get_the_ID</span>(); <span class="comment">//文章的ID</span></span><br><span class="line"> <span class="variable">$query</span>=<span class="string">"SELECT `comment_ID` FROM <span class="subst">{$wpdb->comments}</span> WHERE `comment_post_ID`=<span class="subst">{$post_id}</span> and `comment_approved`='1' and `comment_author_email`='<span class="subst">{$email}</span>' LIMIT 1"</span>;</span><br><span class="line"> <span class="keyword">if</span>(<span class="variable">$wpdb</span>-><span class="title function_ invoke__">get_results</span>(<span class="variable">$query</span>)){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable">$content</span>; <span class="comment">//查询到对应的已经审核通过的评论则返回内容</span></span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="variable">$notice</span>; <span class="comment">//否则返回提示信息</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><span class="title function_ invoke__">add_shortcode</span>(<span class="string">'reply'</span>, <span class="string">'reply_to_read'</span>);</span><br></pre></td></tr></table></figure><h2 id="短代码填写规范"><a href="#短代码填写规范" class="headerlink" title="短代码填写规范"></a>短代码填写规范</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">[reply]你希望评论回复可见的内容[/reply]</span><br></pre></td></tr></table></figure><h2 id="实现效果如下"><a href="#实现效果如下" class="headerlink" title="实现效果如下"></a>实现效果如下</h2><p><img src="https://s2.loli.net/2022/07/30/IoW56pRJQ7YkAG9.png" alt="image-20220730002044963"></p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
</tags>
</entry>
<entry>
<title>WordPress侧边栏插件Content Aware Sidebars</title>
<link href="/post/d513bb89.html"/>
<url>/post/d513bb89.html</url>
<content type="html"><![CDATA[<p>Lightweight Widget Area Plugin - Content Aware Sidebars（简称CAS）是迄今为止最快、最强大的WordPress侧边栏插件，几秒钟就能够创建一个定制的小部件区域。而且可以无限个侧边栏和小部件区域，我们可以在不同条件下替换主题侧栏，或者使用短代码插入小部件区域。使用多合一侧边栏管理器，可以轻松激活或停用小部件区域，甚至可以安排在特定时间出现。</p><h3 id="Content-Aware-Sidebars插件的设置和使用"><a href="#Content-Aware-Sidebars插件的设置和使用" class="headerlink" title="Content Aware Sidebars插件的设置和使用"></a>Content Aware Sidebars插件的设置和使用</h3><p>WordPress后台 >> Content Aware即可进入该插件的设置和使用页面，第一次使用会要求授予对方一些权限，直接点击【跳过】即可。</p><h3 id="新建侧边栏"><a href="#新建侧边栏" class="headerlink" title="新建侧边栏"></a>新建侧边栏</h3><p>WordPress后台 >> Content Aware >> 新建 >> 输入侧边栏标题，在哪里展示中可以选择展示位置，具体如下图：</p><p><img src="https://s2.loli.net/2022/07/30/b2fEVuwWJ7XacIK.png" alt="image-20220730002922381"></p><p>然后可以选择所有文章或某篇文章，按作者也是一样，同时还可以设置行动、设计、时间表、选项等，最后点击【创建(Create)】按键即可成功创建一个侧边栏。</p><h3 id="所有侧边栏管理"><a href="#所有侧边栏管理" class="headerlink" title="所有侧边栏管理"></a>所有侧边栏管理</h3><p>WordPress后台 >> Content Aware >> 全部侧边栏，这里可以看到所有的侧边栏，可以点击 “状态” 下方的按键让侧边栏处于启用状态或者禁用状态，也可以点击 “小工具” 下方的数字进入到小工具页面添加/修改/删除小工具。</p><p><img src="https://s2.loli.net/2022/07/30/L3KPrglExeSWU9i.png" alt="image-20220730002949687"></p><h3 id="为侧边栏添加小工具"><a href="#为侧边栏添加小工具" class="headerlink" title="为侧边栏添加小工具"></a>为侧边栏添加小工具</h3><p>WordPress后台 >> 外观 >> 小工具，即可看到前面创建的侧边栏，然后和平时一样将某些小工具添加到侧边栏中即可。</p><p><img src="https://s2.loli.net/2022/07/30/hukA2Jv9RlHcdgX.png" alt="image-20220730003035012"></p><h3 id="为文章添加不同的侧边栏"><a href="#为文章添加不同的侧边栏" class="headerlink" title="为文章添加不同的侧边栏"></a>为文章添加不同的侧边栏</h3><p>WordPress后台 >> 发布新文章（页面）或者编辑文字（页面），在编辑页面可以看到有一个 “Sidebars - Quick Select” 模块，可以为每篇文章选择不一样的侧边栏。</p><p><img src="https://s2.loli.net/2022/07/30/3yuirSWCftDNvn9.png" alt="image-20220730003111676"></p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>WordPress的Lightweight Widget Area Plugin - Content Aware Sidebars这款插件非常强大，可以为每一篇文章每一个页面都设置不一样的侧边栏。如果仅仅是想实现文章和页面使用不一样的侧边栏，那其实没有安装这款插件的必要，因为一般主题都有这个功能。就算没有，自己编辑主题中的sidebar.php文件也可以实现。</p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
<tag> 侧边栏 </tag>
</tags>
</entry>
<entry>
<title>4款 WordPress 需要密码才能访问网站的插件，密码查看内容</title>
<link href="/post/cc149db5.html"/>
<url>/post/cc149db5.html</url>
<content type="html"><![CDATA[<p>4款WordPress密码访问插件，从部分内容、分类目录到整个网站都可以实现密码访问后查看内容的功能。如果你要整篇文章输入密码才可访问的话，直接使用WordPress自带的功能就可以了，文章选项处可以设置密码。</p><h2 id="Access-Category-Password"><a href="#Access-Category-Password" class="headerlink" title="Access Category Password"></a>Access Category Password</h2><p><strong>Access Category Password</strong>翻译过来叫做<strong>访问分类密码</strong>，很明显，它的功能就是给分类设置密码，该分类的文章只有<strong>输入正确的密码才能查看内容</strong>。</p><p><strong>描述</strong></p><p>通过设置密码来要限制分类目录下的文章访问。这些帖子的内容和摘录已替换为密码表单，用户可以填写正确的密码以获取访问权限。可以自定义需要密码时显示的提示语。</p><p><strong>功能</strong></p><ul><li>在会话或Cookie身份验证之间选择</li><li>设定密码</li><li>设置要密码保护的分类</li><li>可选用户组免密码访问</li><li>可选摘要内容是否加密</li><li>在密码前显示自定义摘录</li><li>设置密码框前的显示消息</li><li>在密码字段中设置占位符</li><li>输入错误密码时的错误消息提示</li><li>自定义验证按钮文字</li><li>可以自定义密码保护样式</li><li>可用语言：英语（1.5），法语（1.5），简体中文（感谢Changmeng Hu，1.4），德语（1.4）。</li></ul><p>该插件使用php Sessions（更安全）或Cookie（不太安全）来记住经过身份验证的用户。密码在存储之前已加密。常规提要内容将被过滤，以避免显示受限类别帖子的内容。</p><h2 id="Passster"><a href="#Passster" class="headerlink" title="Passster"></a>Passster</h2><p>Passster – Password Protection是一个文章部分内容需要密码访问的插件，高级版可以实现更多保护内容，使用Passster可以实现<a href="https://blog.naibabiji.com/skill/weixin-guan-zhu-ke-jian.html">WordPress网站微信关注回后可见和阅读更多功能方法</a>的功能。</p><p>Passster是通过文章插入短码来实现部分内容加密，可以生成多个不同密码的短码。</p><p><strong>描述</strong></p><p>Passster是保护部分文章内容的完整解决方案。使用简单的简码，并使用密码和验证码限制您的内容。</p><p><strong>特征</strong></p><ul><li>用密码限制内容</li><li>用验证码限制内容</li><li>支持页面构建器插件</li><li>轻松生成简码</li><li>使用Cookie进行更长时间的访问</li><li>根据简码自定义标题，说明文字，占位符和按钮标签。</li></ul><h2 id="Password-Protected"><a href="#Password-Protected" class="headerlink" title="Password Protected"></a>Password Protected</h2><p>如果你想<strong>WordPress整个网站都需要输入密码访问</strong>，那么这款Password Protected插件能够满足你的要求。</p><p>Password Protected插用密码保护你的整个网站。要查看网站内容，访客必须输入密码。关键的是，该插件完全免费，而且设置支持中文语言。</p><ul><li>后台设置可选管理员或者已登录用户不用输入密码直接访问。</li><li>允许设置白名单IP列表，无需密码访问。</li><li>允许设置记住我，避免下次输入密码。</li><li>可自行设置记住我有效期。</li></ul><h2 id="Password-for-WP"><a href="#Password-for-WP" class="headerlink" title="Password for WP"></a>Password for WP</h2><p>这款Password for WP和上面介绍的Password Protected功能类似，不过它多了一个友好提示，你可以自己设置需要输入密码时的提示语，不用直接一个密码框，用户体验上相对要好一点点。</p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
<tag> 文章保护 </tag>
<tag> 密码加锁 </tag>
</tags>
</entry>
<entry>
<title>WordPress 头像显示问题设置</title>
<link href="/post/2f51713d.html"/>
<url>/post/2f51713d.html</url>
<content type="html"><![CDATA[<p>wordpress头像问题备忘</p><h2 id="自定义用户评论默认头像"><a href="#自定义用户评论默认头像" class="headerlink" title="自定义用户评论默认头像"></a>自定义用户评论默认头像</h2><p>WordPress的默认头像可以在 后台 —-> 设置 —–> 讨论里设置用户评论时的头像显示，不过自带的几种图标很多时候不是如自己意的。但可以通过代码自定义方式来设置默认头像。在主题的 functions.php 最下面添加下面的代码。</p><figure class="highlight php"><table><tr><td class="code"><pre><span class="line"><span class="comment">//修改默认头像</span></span><br><span class="line"><span class="title function_ invoke__">add_filter</span>(<span class="string">'avatar_defaults'</span>, <span class="string">'default_avatar'</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">default_avatar</span>(<span class="params"><span class="variable">$avatar_defaults</span></span>) </span>{</span><br><span class="line"><span class="variable">$myavatar</span> = <span class="string">'https://i.loli.net/2020/07/19/idoODqFrH4XW7J5.jpg'</span>; <span class="comment">// 此处替换自己的图骗url路径</span></span><br><span class="line"><span class="variable">$avatar_defaults</span>[<span class="variable">$myavatar</span>] = <span class="string">"默认头像"</span>; <span class="comment">// 图片的描述名称，可以自己更改</span></span><br><span class="line"><span class="keyword">return</span> <span class="variable">$avatar_defaults</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>图片替换地址可以用自己qq邮箱头像地址，或者可以注册Gravatar后上传头像，然后复制头像地址后替换 更改完后点击更新文件保存，就可以在 后台 —–> 设置 -> 讨论 下看到新增的头像，将其设置为默认即可：<br><img src="https://s2.loli.net/2022/07/30/hnIbijyqESuPeQ1.png" alt="image-20220730001056493"></p><h2 id="Gravatar默认头像不显示解决方法"><a href="#Gravatar默认头像不显示解决方法" class="headerlink" title="Gravatar默认头像不显示解决方法"></a>Gravatar默认头像不显示解决方法</h2><p>如果不想安装插件，将以下代码添加到使用主题的 functions.php 文件中即可：</p><figure class="highlight php"><table><tr><td class="code"><pre><span class="line"><span class="comment">////// Gravatar 头像不显示解决 /////</span></span><br><span class="line"><span class="title function_ invoke__">add_filter</span>(<span class="string">'get_avatar'</span>, function (<span class="variable">$avatar</span>) {</span><br><span class="line"><span class="keyword">return</span> <span class="title function_ invoke__">str_replace</span>([</span><br><span class="line"><span class="string">'www.gravatar.com/avatar/'</span>,</span><br><span class="line"><span class="string">'0.gravatar.com/avatar/'</span>,</span><br><span class="line"><span class="string">'1.gravatar.com/avatar/'</span>,</span><br><span class="line"><span class="string">'2.gravatar.com/avatar/'</span>,</span><br><span class="line"><span class="string">'secure.gravatar.com/avatar/'</span>,</span><br><span class="line"><span class="string">'cn.gravatar.com/avatar/'</span></span><br><span class="line">], <span class="string">'sdn.geekzu.org/avatar/'</span>, <span class="variable">$avatar</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>如果你的主题自带有 Gravatar 头像本地缓存功能，使用以上方法后前台的 Gravatar 头像还是无法显示，请找到该缓存头像的代码，将 Gravatar 头像的镜像服务器地址如 secure.gravatar.com/avatar/之类的手动修改为其他镜像服务器地址，然后找到保存缓存头像的文件夹并将其中的所有头像文件删除，刷新访问相应前台站点，头像就可以正常显示了。</p><h2 id="Argon-主题不显示QQ图像问题"><a href="#Argon-主题不显示QQ图像问题" class="headerlink" title="Argon 主题不显示QQ图像问题"></a>Argon 主题不显示QQ图像问题</h2><p>Argon主题输入QQ邮箱后依然不能访问QQ头像问题 继续打开主题文件functions.php，按住CTRL + F 查找 $_POST[‘qq’]</p><p><img src="https://s2.loli.net/2022/07/30/8gsdzKx32GObyXT.png" alt="image-20220730001900782"></p><p>在$_POST[‘qq’] = 后面替换为 $_POST[’email’]</p><p><img src="https://s2.loli.net/2022/07/30/vSY3qx62ntzECUu.png" alt="image-20220730001924791"></p><p>这样用户不论输入QQ还是邮箱都会提取QQ头像正常显示，但有一个缺点就是，如果用户输入一个不存在的QQ号和邮箱，会显示QQ的默认头像，怎么选择就看个人需求了 此段内容摘至 <a href="https://wangwangyz.site/archives/837">突突本秃 </a></p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
</tags>
</entry>
<entry>
<title>Butterfly主题配置，如何使用阿里矢量图标库，可以自定义图标大小</title>
<link href="/post/433af2ad.html"/>
<url>/post/433af2ad.html</url>
<content type="html"><![CDATA[<p>在阅读了butterfly主题配置的官方文档之后，发现其对使用阿里图标库方法的描述存在一些不足，比如不能自定义图标的大小。下面说一下另一种方法：</p><h2 id="注册iconfont并配置字体图标"><a href="#注册iconfont并配置字体图标" class="headerlink" title="注册iconfont并配置字体图标"></a>注册iconfont并配置字体图标</h2><p>新建项目之后，将图标添加到自己的项目中</p><p><img src="https://s2.loli.net/2022/07/30/TxNdoFl729VEwZr.png" alt="image-20220730005244072"></p><p>点击Font class中的链接，复制下来</p><p><img src="https://s2.loli.net/2022/07/30/umjpHVLBk3STDhU.png" alt="image-20220730005308685"></p><p>新建font.css文件</p><p>在/source目录下新建文件夹 source/css，新建文件font.css，然后将刚刚复制的代码粘贴进去</p><p><img src="https://s2.loli.net/2022/07/30/pyrD1lmsugw54FL.png" alt="image-20220730005406019"></p><p><img src="https://s2.loli.net/2022/07/30/mtcMe6f5gd8sp3X.png" alt="image-20220730005420352"></p><p>修改_config.butterfly.yml文件中的inject</p><p>在_config.butterfly.yml文件中找到inject，按如图所示设置</p><p><img src="https://s2.loli.net/2022/07/30/GxWSJ9Csl3NR6hV.png" alt="image-20220730005453727"></p><p>引用格式 iconfont icon名字，如图所示</p><p><img src="https://s2.loli.net/2022/07/30/eVtH8xNO5IwzGqM.png" alt="image-20220730005619551"></p><p>至此图标已经可以正常显示</p><h2 id="修改字体图标大小"><a href="#修改字体图标大小" class="headerlink" title="修改字体图标大小"></a>修改字体图标大小</h2><p>如果觉得显示效果偏小，可以修改font.css文件里的font-size属性，默认是16px，改成22px，然后看下效果</p><p><img src="https://s2.loli.net/2022/07/30/wPMZfFVCsANKJkx.png" alt="image-20220730005648984"></p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> 图标 </tag>
<tag> Butterfly主题 </tag>
</tags>
</entry>
<entry>
<title>WordPress备份还原插件All-in-One WP Migration使用教程</title>
<link href="/post/43e91362.html"/>
<url>/post/43e91362.html</url>
<content type="html"><![CDATA[<p>说到网站备份，可能会觉得非常麻烦，给大家分享一款超级简单的WordPress备份还原插件：All-in-One WP Migration，以及如何使用All-in-One WP Migration备份和还原网站数据。</p><p>使用此修改的免費旧版本，虽可破除档案大小限制达到搬家目的，但毕竟新版本是升级且修正过BUG的，故未免此旧版本风险：如備份不全、失真或失敗，购买正版是值得的。</p><h2 id="较新的版本方法"><a href="#较新的版本方法" class="headerlink" title="较新的版本方法"></a>较新的版本方法</h2><h3 id="All-in-One-WP-Migration介绍"><a href="#All-in-One-WP-Migration介绍" class="headerlink" title="All-in-One WP Migration介绍"></a>All-in-One WP Migration介绍</h3><p>All-in-One WP Migration可以让你无需技术知识就可以导出您的WordPress网站，包括数据库，媒体文件，插件和主题。在导出数据过程中你还可以选择不导出哪些数据。即便你是使用手机也可以操作All-in-One WP Migration对网站进行备份或者还原。</p><h3 id="All-in-One-WP-Migration具有以下优点"><a href="#All-in-One-WP-Migration具有以下优点" class="headerlink" title="All-in-One WP Migration具有以下优点"></a>All-in-One WP Migration具有以下优点</h3><ol><li>操作简单，只需要点击几次鼠标就可以完成；</li><li>不限制服务器和操作系统；</li><li>绕过服务器文件大小限制，采用2MB的块来导入数据；</li><li>不依赖任何php扩展；</li><li>支持mysql和mysqli</li><li>WordPress 3.3版本以后的都支持；</li><li>支持导出备份到本地或者云。</li></ol><h3 id="All-in-One-WP-Migration的缺点"><a href="#All-in-One-WP-Migration的缺点" class="headerlink" title="All-in-One WP Migration的缺点"></a>All-in-One WP Migration的缺点</h3><ol><li>导出的备份是特有格式，其他插件不兼容；</li><li>有上传大小限制（需要付费，可轻松破解）；</li><li>导出到云为收费项目。</li></ol><h3 id="All-in-One-WP-Migration下载"><a href="#All-in-One-WP-Migration下载" class="headerlink" title="All-in-One WP Migration下载"></a>All-in-One WP Migration下载</h3><p><strong>官方地址：</strong><a href="https://cn.wordpress.org/plugins/all-in-one-wp-migration/">https://cn.wordpress.org/plugins/all-in-one-wp-migration/</a></p><p><strong>百度网盘地址：</strong><a href="https://pan.baidu.com/s/1-H6pJgxIQB4w_Rt8GWLYqQ">https://pan.baidu.com/s/1-H6pJgxIQB4w_Rt8GWLYqQ</a> 提取码：yqdm</p><p><strong>蓝奏云地址：</strong><a href="https://iqzx.lanzoui.com/iq1Bgp295ij">https://iqzx.lanzoui.com/iq1Bgp295ij</a></p><h3 id="All-in-One-WP-Migration使用教程"><a href="#All-in-One-WP-Migration使用教程" class="headerlink" title="All-in-One WP Migration使用教程"></a>All-in-One WP Migration使用教程</h3><p><strong>安装好All-in-One WP Migration后启用插件，进入菜单选择导出，如下图：</strong></p><p><img src="https://s2.loli.net/2022/07/30/yex5iTpKsYBM4g6.png" alt="image-20220730003344051"></p><p> <strong>不一会儿就会给你打包完毕，提示文件大小，点击按钮可以下载到本地</strong></p><p><img src="https://s2.loli.net/2022/07/30/HFZaiL5NTUjR1xp.png" alt="image-20220730003400502"></p><p>在新服务器搭建好一个全新的WordPress站点，并且安装好All-in-One WP Migration插件</p><p>点击导入，然后你会发现大小限制为了50MB.我们来修改一下</p><p><img src="https://s2.loli.net/2022/07/30/4KDniNoTl1AfXVU.png" alt="image-20220730003426980"></p><h3 id="修改All-in-One-WP-Migration-50MB大小限制"><a href="#修改All-in-One-WP-Migration-50MB大小限制" class="headerlink" title="修改All-in-One WP Migration 50MB大小限制"></a>修改All-in-One WP Migration 50MB大小限制</h3><p>1 – 在左侧菜单选择插件编辑器，然后选择All-in-One WP Migration，点击constants.php文件。</p><p>2 – 搜索<code>AI1WM_MAX_FILE_SIZE</code>，把后面的内容修改成<code>4294967296</code>，想要更大就自己改，例如<code>4294967296 * 9</code></p><p><img src="https://s2.loli.net/2022/07/30/U8EpjrH1g7IV9hN.png" alt="image-20220730003501993"></p><p>3 – 修改好后更新插件文件，<strong>下载下面的扩展然后安装</strong>。不放心文件安全你也可以自己点击导入界面的获得无限制按钮去插件官网下载这个扩展。（虽然官方好像没有放上去了）</p><ul><li><p>all-in-one-wp-migration-file-extension（蓝奏云）：</p><p><strong>下载地址：</strong><a href="https://iqzx.lanzoui.com/ilCWkp29nhg">https://iqzx.lanzoui.com/ilCWkp29nhg</a></p></li><li><p>百度网盘：</p><p><strong>下载地址：</strong><a href="https://pan.baidu.com/s/1K9H9SievfBIt8bULTluXww">https://pan.baidu.com/s/1K9H9SievfBIt8bULTluXww</a> 提取码：tunf</p></li></ul><p>4 – 再次回到导入站点界面，上传大小限制就已经变化了。</p><p><img src="https://s2.loli.net/2022/07/30/xqcIlZV5YRvpL7C.png" alt="image-20220730003615754"></p><p>5 – 选择你备份的文件导入，导入完毕会出现下面图的提示：</p><p><img src="https://s2.loli.net/2022/07/30/p54w6ASKoFVJ1u2.png" alt="image-20220730003636284"></p><p>6 – 导入完毕，网站备份就已经恢复成功了。</p><p><img src="https://s2.loli.net/2022/07/30/BArhzDn4y1Of2xR.png" alt="image-20220730003650611"></p><h2 id="更老版本方法，但更简单"><a href="#更老版本方法，但更简单" class="headerlink" title="更老版本方法，但更简单"></a>更老版本方法，但更简单</h2><p>旧版本All-in-One WP Migration 6.77版下载(已修改內容可上传最大128GB，直接下载安裝使用即可)</p><p>WP后台安装此6.77版本后，系统会不停出現插件需升级提示，不用去理会它，且千万不要升级，一旦升级成最新版，则会立马失去可以上传大档案(>256MB)的能力，除非您想购买终生授权版。</p><p>作为应急就一直保留旧版吧！个人最佳做法在于搬家或备份还原完成后就刪除此插件，需用時再下载安装即可，一直提醒要升级也是很烦的！</p><p><strong>下载地址：</strong><a href="https://lcmstan.net/wp-content/uploads/all-in-one-wp-migration_6.77.zip">https://lcmstan.net/wp-content/uploads/all-in-one-wp-migration_6.77.zip</a></p>]]></content>
<categories>
<category> 经验分享 </category>
</categories>
<tags>
<tag> wordpress </tag>
<tag> 备份还原 </tag>
<tag> 教程 </tag>
</tags>
</entry>
</search>