-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathsearch.xml
More file actions
1321 lines (633 loc) · 724 KB
/
search.xml
File metadata and controls
1321 lines (633 loc) · 724 KB
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
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>通过json生成talk-card</title>
<link href="/post/getjson/talk/"/>
<url>/post/getjson/talk/</url>
<content type="html"><![CDATA[<blockquote><p>支持<code>v3.2.5+</code> 通过本地（source文件夹下）或者远程json文件，生成talk-card标签集</p></blockquote><p>json文件格式如下:</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://pic1.zhimg.com/80/v2-03a22891ccba9bccf6424dfd7cbf4be7_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"坚持是雄壮的，因为坚持是由于百般地敲打而磨练出来的;坚持是甘甜的，因为无畏的与不倒的毅力早已在心中播下了胜利的种子😂"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://github.com/yuang01/hexo-theme-bamboo"</span>,</span><br><span class="line"> <span class="attr">"date"</span>: <span class="string">"2023-03-20 14:50"</span>,</span><br><span class="line"> <span class="attr">"musicId"</span>: <span class="string">"1343283719"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-b44931ea513e5f7b3b06f2703f79653c_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"坚持下去便可胜利。只要心还在，梦想还在，我们还可以坚持直至胜利。没有过不去的坎，只要害怕的心。莫害怕，抓住希望便可突破困境找到方向😂"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://baidu.com"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-b44931ea513e5f7b3b06f2703f79653c_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"理想是帆，坚持是桨。当然，不是每个拼搏者都能踏上胜利的通途，即使你不幸失败了，不要紧的，不要有“明朝散发弄扁舟”的失意。因为你依然是精神领域的胜利者，你依然是当之无愧的英雄，你依然可以昂首阔步的面对这一切：“天空不容我，但我已飞过!"</span>,</span><br><span class="line"> <span class="attr">"date"</span>: <span class="string">"2023-03-20"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-b44931ea513e5f7b3b06f2703f79653c_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"漫漫长路，你愿一人独撑，忍受着孤独与寂寞，承受着体力与肉体的压榨，只任汗水溶于泪水，可脚步却从不停歇。好样的，纵然得不了桂冠，可坚持的你，定会博得最后的掌声"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://baidu.com"</span>,</span><br><span class="line"> <span class="attr">"date"</span>: <span class="string">"2023-03-20"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-b44931ea513e5f7b3b06f2703f79653c_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"漫漫长路，你愿一人独撑，忍受着孤独与寂寞，承受着体力与肉体的压榨，只任汗水溶于泪水，可脚步却从不停歇。好样的，纵然得不了桂冠，可坚持的你，定会博得最后的掌声"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://baidu.com"</span>,</span><br><span class="line"> <span class="attr">"date"</span>: <span class="string">"2023-03-20"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-b44931ea513e5f7b3b06f2703f79653c_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"漫漫长路，你愿一人独撑，忍受着孤独与寂寞，承受着体力与肉体的压榨，只任汗水溶于泪水，可脚步却从不停歇。好样的，纵然得不了桂冠，可坚持的你，定会博得最后的掌声"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://baidu.com"</span>,</span><br><span class="line"> <span class="attr">"date"</span>: <span class="string">"2023-03-20"</span></span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p><code>url</code> 字段可以替换为<code>href</code>字段，表示要跳转的地址<br><code>text</code> 字段可以替换为<code>content</code>，表示文本内容<br><code>img</code> 字段可以替换为<code>image</code>，表示图片地址<br><code>date</code> 字段可以替换为<code>datetime</code>或者<code>time</code>，表示日期<br><code>musicId</code> 表示网易云单曲的id，只支持网易云，并且是单曲的id</p><p>例如： <a href="https://yuang01.github.io/myjson/talk.json">https://yuang01.github.io/myjson/talk.json</a></p><blockquote><p>注意，一个json只展示前三十个</p></blockquote><h2 id="本地"><a href="#本地" class="headerlink" title="本地"></a>本地</h2><div class="getJsonTalk-api" api="/myjson/talk.json" isRegular="3"></div><h3 id="写法"><a href="#写法" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getTalkOnline /myjson/talk.json %}</span><br></pre></td></tr></table></figure><h2 id="jsdelivr远程"><a href="#jsdelivr远程" class="headerlink" title="jsdelivr远程"></a>jsdelivr远程</h2><div class="getJsonTalk-api" api="https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/talk.json" isRegular="3"></div><h3 id="写法-1"><a href="#写法-1" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getTalkOnline https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/talk.json %}</span><br></pre></td></tr></table></figure><h2 id="github远程"><a href="#github远程" class="headerlink" title="github远程"></a>github远程</h2><div class="getJsonTalk-api" api="https://yuang01.github.io/myjson/talk.json" isRegular="3"></div><h3 id="写法-2"><a href="#写法-2" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getTalkOnline https://yuang01.github.io/myjson/talk.json %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 标签 </category>
<category> json </category>
</categories>
<tags>
<tag> tag </tag>
<tag> json </tag>
</tags>
</entry>
<entry>
<title>通过json生成site-card</title>
<link href="/post/getjson/site/"/>
<url>/post/getjson/site/</url>
<content type="html"><![CDATA[<blockquote><p>支持<code>v3.2.2+</code> 通过本地（source文件夹下）或者远程json文件，生成site-card标签集</p></blockquote><p>json文件格式如下:</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">"yuang01"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/"</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/img/avatar.jpg"</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">"https://picx.zhimg.com/80/v2-d7666d074ec59ca4cf14f15c5f891643_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">"hexo主题bamboo"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">"yuang01"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/"</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/img/avatar.jpg"</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">"https://pic1.zhimg.com/80/v2-d27db7c61bbe3ecb8d493d31bf835b28_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">"hexo主题bamboo"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">"yuang01"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/"</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/img/avatar.jpg"</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">"https://picx.zhimg.com/80/v2-17001eba7a69aea9477299f8140e12ab_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">"hexo主题bamboo"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">"yuang01"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/"</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/img/avatar.jpg"</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">"https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">"hexo主题bamboo"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">"yuang01"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/"</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/img/avatar.jpg"</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">"https://pic1.zhimg.com/80/v2-034e77303e502886d0ea6130f44127ed_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">"hexo主题bamboo"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">"yuang01"</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/"</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">"https://hexo-theme-bamboo.netlify.app/img/avatar.jpg"</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">"https://picx.zhimg.com/80/v2-1781005004b2681e722e68aab7bf68c3_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">"hexo主题bamboo"</span></span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p><code>url</code> 字段可以替换为<code>href</code>字段，表示要跳转的地址<br><code>title</code> 字段可以替换为<code>name</code>，表示名称<br><code>avatar</code> 字段可以替换为<code>touxiang</code>，表示头像<br><code>screenshot</code> 字段可以替换为<code>cover</code>，表示封面图片<br><code>description</code> 字段可以替换为<code>desc</code>，表示描述</p><p>例如： <a href="https://yuang01.github.io/myjson/site.json">https://yuang01.github.io/myjson/site.json</a></p><h2 id="本地"><a href="#本地" class="headerlink" title="本地"></a>本地</h2><div class="getJsonSite-api" api="/myjson/site.json" isRegular="4"></div><h3 id="写法"><a href="#写法" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getSiteOnline /myjson/site.json %}</span><br></pre></td></tr></table></figure><h2 id="jsdelivr远程"><a href="#jsdelivr远程" class="headerlink" title="jsdelivr远程"></a>jsdelivr远程</h2><div class="getJsonSite-api" api="https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/site.json" isRegular="4"></div><h3 id="写法-1"><a href="#写法-1" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getSiteOnline https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/site.json %}</span><br></pre></td></tr></table></figure><h2 id="github远程"><a href="#github远程" class="headerlink" title="github远程"></a>github远程</h2><div class="getJsonSite-api" api="https://yuang01.github.io/myjson/site.json" isRegular="4"></div><h3 id="写法-2"><a href="#写法-2" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getSiteOnline https://yuang01.github.io/myjson/site.json %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 标签 </category>
<category> json </category>
</categories>
<tags>
<tag> tag </tag>
<tag> json </tag>
</tags>
</entry>
<entry>
<title>通过json生成图片集</title>
<link href="/post/getjson/photo/"/>
<url>/post/getjson/photo/</url>
<content type="html"><![CDATA[<blockquote><p>通过本地（source文件夹下）或者远程json文件，生成图片集</p></blockquote><p>json文件格式如下:</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://pic1.zhimg.com/80/v2-03a22891ccba9bccf6424dfd7cbf4be7_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"alt"</span>: <span class="string">"我是描述1"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-b44931ea513e5f7b3b06f2703f79653c_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"alt"</span>: <span class="string">"我是描述2"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-9c50d3af0bc62a0e8b6e89e24c769317_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"alt"</span>: <span class="string">"我是描述3"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://picx.zhimg.com/80/v2-85c31120acff76826ab53ea8934ef4bb_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"alt"</span>: <span class="string">"我是描述4"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"alt"</span>: <span class="string">"我是描述5"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"img"</span>: <span class="string">"https://pic4.zhimg.com/80/v2-83ea273b88e119d9615aed0d89aad4ab_1440w.webp"</span>,</span><br><span class="line"> <span class="attr">"alt"</span>: <span class="string">"我是描述6"</span></span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p><code>img</code> 字段可以替换为<code>url</code>或者<code>imgurl</code>字段，表示图片链接<br><code>alt</code> 字段可以替换为<code>title</code>, 表示描述<br>例如： <a href="https://yuang01.github.io/myjson/photo.json">https://yuang01.github.io/myjson/photo.json</a></p><h2 id="本地"><a href="#本地" class="headerlink" title="本地"></a>本地</h2><div class="getJsonPhoto-api" api="/myjson/photo.json" isRegular=""></div><h3 id="写法"><a href="#写法" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getPhotoOnline /myjson/photo.json %}</span><br></pre></td></tr></table></figure><h2 id="jsdelivr远程"><a href="#jsdelivr远程" class="headerlink" title="jsdelivr远程"></a>jsdelivr远程</h2><div class="getJsonPhoto-api" api="https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/photo.json" isRegular=""></div><h3 id="写法-1"><a href="#写法-1" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getPhotoOnline https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/photo.json %}</span><br></pre></td></tr></table></figure><h2 id="github远程"><a href="#github远程" class="headerlink" title="github远程"></a>github远程</h2><div class="getJsonPhoto-api" api="https://yuang01.github.io/myjson/photo.json" isRegular=""></div><h3 id="写法-2"><a href="#写法-2" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getPhotoOnline https://yuang01.github.io/myjson/photo.json %}</span><br></pre></td></tr></table></figure><h2 id="有规则的排列"><a href="#有规则的排列" class="headerlink" title="有规则的排列"></a>有规则的排列</h2><div class="getJsonPhoto-api" api="https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/photo.json" isRegular="regular"></div><h3 id="写法-3"><a href="#写法-3" class="headerlink" title="写法"></a>写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getPhotoOnline https://cdn.jsdelivr.net/gh/yuang01/CDN@main/file/photo.json, regular %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 标签 </category>
<category> json </category>
</categories>
<tags>
<tag> tag </tag>
<tag> json </tag>
</tags>
</entry>
<entry>
<title>如何更新主题</title>
<link href="/post/updatetheme/index/"/>
<url>/post/updatetheme/index/</url>
<content type="html"><![CDATA[<p>其实学会更新主题还是一个蛮重要的技能的。<br>首先建议下载<a href="https://code.visualstudio.com/">vscode</a>编辑器，这个编辑器确实好用。然后下载<a href="https://git-scm.com/">git</a>（这个应该都有下载吧）</p><p>假如我们改了这个文件的这一行，文件颜色会变成<span style="color:#c49a5a">黄色</span>，更改的行的左边也会有<span style="color:#1d7091">蓝色</span>提示<br>更改的内容为<code>软件架构说明, 我这这个位置的后面加了一句话</code><br><img src="/img/updatetheme01.png" class="lazyload placeholder" data-srcset="/img/updatetheme01.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""></p><p>更改的文件就比如是更改的主题配置文件，更改的行就像是更改的配置文件的某一行或者某几行<br>使用命令<code>git status</code>也能看到我们更改了哪些文件。<br><img src="/img/updatetheme02.png" class="lazyload placeholder" data-srcset="/img/updatetheme02.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""><br>使用命令<code>git diff 更改的文件名</code>也可以看到更改的行的变化<br><img src="/img/updatetheme03.png" class="lazyload placeholder" data-srcset="/img/updatetheme03.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""></p><p>当然上面的步骤你不理会也行，因为只是看文件改动了哪里</p><p>接着我们将所有更改的文件添加到暂存区，点击加号<br><img src="/img/updatetheme04.png" class="lazyload placeholder" data-srcset="/img/updatetheme04.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""><br><span style="color:red">或者</span>使用命令<code>git add .</code> 后面的.代表项目已被更改的所有文件</p><p><img src="/img/updatetheme05.png" class="lazyload placeholder" data-srcset="/img/updatetheme05.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""><br>通过点击加号或者使用git add .将我们的文件添加到了暂存区域了</p><p>接着我们将暂存区的文件添加到本地仓库中，然后点击上面的对勾之后，会弹出一个文件，我们在这里随便写上一段话，表示我更改了这个文件的目的，然后ctrl+s即可<br><img src="/img/updatetheme06.png" class="lazyload placeholder" data-srcset="/img/updatetheme06.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""></p><p><span style="color:red">或者</span>使用命令<code>git commit -m"我是一段话用来描述更改的目的"</code> 将暂存区的文件添加到本地仓库中 </p><p><img src="/img/updatetheme07.png" class="lazyload placeholder" data-srcset="/img/updatetheme07.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""></p><p>接着我们拉取远程代码，使用<code>git pull</code>命令或者使用vscode的拉取按钮<br><img src="/img/updatetheme08.png" class="lazyload placeholder" data-srcset="/img/updatetheme08.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""><br>然后我们会发现出现了冲突,分成上面一块和下面一块，上面一块表示我的更改内容，下面一块表示别人更改的内容<br><img src="/img/updatetheme09.png" class="lazyload placeholder" data-srcset="/img/updatetheme09.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""></p><p>此时我们采用传入的更改，点击上面图片中箭头标明的第二个按钮，就主题来说，这个别人指的是博主我，采用博主的更改。或者直接将上面这块代码和========给删了，保留下面这一块的代码</p><p>点击按钮之后我们的代码就成了最新的代码<br><img src="/img/updatetheme10.png" class="lazyload placeholder" data-srcset="/img/updatetheme10.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt=""></p><p><code>软件架构说明，我也更改了呀，我也要在这里改呢，啦啦啦</code> 这段话是博主我做的更改，而<code>软件架构说明, 我这这个位置的后面加了一句话</code>是你做的更改，采用博主的更改即可，这样冲突就解决完成啦，代码也是最新的代码啦，此时主题更新成功。</p><p>这个在工作中也是必须要学会的git基本技能，因为你有些时候并不是一个人在改动一个项目，所以你需要学会这个简单的技能。从更新主题开始做起!!!</p>]]></content>
</entry>
<entry>
<title>netlify部署博客</title>
<link href="/post/netlify/"/>
<url>/post/netlify/</url>
<content type="html"><![CDATA[<h2 id="netlify部署"><a href="#netlify部署" class="headerlink" title="netlify部署"></a>netlify部署</h2><p>github.io访问速度太慢，gitee.io还需要实名制，还要手持身份证，对未成年很不友善</p><p>我们可以将博客运行在<code>netlify</code>上，个人觉得访问速度还蛮快的, 比我花50块买的服务器还快， 操作也是超级的简单，两分钟搞定。</p><div class="tagLink"><a class="link-card" title="netlify官网" href="https://app.netlify.com/"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp)"></span><div class="left"><img src="https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">netlify官网</p><p class="url">https://app.netlify.com/</p></div></a></div><ol><li>直接使用github登录</li><li>登陆成功之后点击<code>New site from Git</code>按钮</li><li>然后选择github仓库</li><li>如果你关联的github是你的博客源代码仓库，则需要在<code>Build settings</code>里将<code>Build command</code>设置为<code>hexo generate</code>, 将<code>Publish directory</code>设置为<code>/public</code>，然后点击deploy按钮<br>如果你关联的仓库的代码是编译之后的博客代码，则直接点deploy按钮即可</li><li>发布完成后，你可以自定义netlify分配的域名前缀。或者关联自己阿里云等域名厂商购买的域名，然后还可以开启https</li></ol><p>我在<code>netlify</code>部署的博客地址：</p><div class="tagLink"><a class="link-card" title="hexo-theme-bamboo" href="https://hexo-theme-bamboo.netlify.app/"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp)"></span><div class="left"><img src="https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">hexo-theme-bamboo</p><p class="url">https://hexo-theme-bamboo.netlify.app/</p></div></a></div><p>如果我写的不清楚的话，可以百度<code>hexo netlify</code>查询</p>]]></content>
</entry>
<entry>
<title>增加获取图片标签</title>
<link href="/post/getphoto/"/>
<url>/post/getphoto/</url>
<content type="html"><![CDATA[<p><code>v3.1.2</code>新增获取图片标签<br>使用方法如下<br>在根目录下的<code>source</code>文件夹创建任意存放图片的文件夹，例如创建一个叫做<code>myImg</code>的文件夹，然后将任意图片放入<code>source/myImg</code>文件夹下，然后使用标签就能将<code>myImg</code>文件夹下的所有图片显示在页面上了。</p><blockquote><p>需要注意的是，跟file标签一样，需要在根目录下的<code>source</code>文件夹下创建图片文件夹</p></blockquote><h2 id="事例"><a href="#事例" class="headerlink" title="事例"></a>事例</h2><div class="waterfall-picture-container"><div class="gallery stretch" col="2"><p><img src="/myImg/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /><img src="/myImg/v2-5f7cb7e900b9dcf5354c3d4d2c5cc3c2_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-5f7cb7e900b9dcf5354c3d4d2c5cc3c2_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /></p></div><div class="gallery stretch" col="3"><p><img src="/myImg/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /><img src="/myImg/v2-e434e3a2888fb4efb1844845b8791d1f_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-e434e3a2888fb4efb1844845b8791d1f_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /><img src="/myImg/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /></p></div></div><h2 id="写法"><a href="#写法" class="headerlink" title="写法"></a>写法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getPhoto myImg %}</span><br></pre></td></tr></table></figure><p>然后使用<code>hexo clean && hexo s</code>命令重启服务就能看到效果啦</p><h2 id="一行两个，有规则的排列"><a href="#一行两个，有规则的排列" class="headerlink" title="一行两个，有规则的排列"></a>一行两个，有规则的排列</h2><div class="waterfall-picture-container"><div class="gallery stretch" col="2"><p><img src="/myImg/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /><img src="/myImg/v2-5f7cb7e900b9dcf5354c3d4d2c5cc3c2_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-5f7cb7e900b9dcf5354c3d4d2c5cc3c2_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /></p></div><div class="gallery stretch" col="2"><p><img src="/myImg/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /><img src="/myImg/v2-e434e3a2888fb4efb1844845b8791d1f_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-e434e3a2888fb4efb1844845b8791d1f_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /></p></div><div class="gallery stretch" col="1"><p><img src="/myImg/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="/myImg/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" /></p></div></div><h2 id="写法-1"><a href="#写法-1" class="headerlink" title="写法"></a>写法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% getPhoto myImg, regular %}</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>关于我页面写法</title>
<link href="/post/new-about/index/"/>
<url>/post/new-about/index/</url>
<content type="html"><</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code">{% endgallery %}</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code">## 我的相册</span></span><br><span class="line"><span class="code">{% swiper width:fill %}</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code">{% endswiper %}</span></span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>markdown样式优化</title>
<link href="/post/markdown/index/"/>
<url>/post/markdown/index/</url>
<content type="html"><![CDATA[<h1 id="这是标题这是标题"><a href="#这是标题这是标题" class="headerlink" title="这是标题这是标题"></a>这是标题这是标题</h1><h2 id="这是标题"><a href="#这是标题" class="headerlink" title="这是标题"></a>这是标题</h2><p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p><h1 id="这是标题-1"><a href="#这是标题-1" class="headerlink" title="这是标题"></a>这是标题</h1><p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hello world</span><br></pre></td></tr></table></figure><p><code>test</code> <code>test</code> <code>test</code></p><h2 id="这是标题-2"><a href="#这是标题-2" class="headerlink" title="这是标题"></a>这是标题</h2><p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p><h3 id="我是标题3"><a href="#我是标题3" class="headerlink" title="我是标题3"></a>我是标题3</h3><h4 id="我是标题4"><a href="#我是标题4" class="headerlink" title="我是标题4"></a>我是标题4</h4><ul><li>第一项</li><li>第二项</li><li>第三项</li><li>第一项</li><li>第二项</li><li>第三项</li></ul><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol><table><thead><tr><th>表头</th><th>表头</th></tr></thead><tbody><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></tbody></table><p><a href="https://www.baidu.com">链接到百度</a><br><a href="https://www.baidu.com">链接到百度</a><br><a href="https://www.baidu.com">链接到百度</a> </p><p><img src="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p><blockquote><p>区域块</p></blockquote><hr><hr><h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p><code>v3.0.8</code>开始，不再有关于我页面的配置项，关于我改用md的写法，具体请看更多->关于我页面</p>]]></content>
<categories>
<category> markdown </category>
</categories>
<tags>
<tag> markdown </tag>
</tags>
</entry>
<entry>
<title>音乐播放器失效问题</title>
<link href="/post/music/index/"/>
<url>/post/music/index/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="主题自带的播放器1jwjq5i3hno">主题自带的播放器</h2><br/><p>前些天主题自带的音乐播放器(左下角)失效了，这是因为播放器依赖的是<code>meting.js</code>，而<code>meting.js</code>的api挂了，但也说不定过几天就好了，如果一直不好的话可以自己搭建，具体请看他的github：</p><div class="tagLink"><a class="link-card" title="MetingJs" href="https://github.com/metowolf/MetingJS"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">MetingJs</p><p class="url">https://github.com/metowolf/MetingJS</p></div></a></div><h2 class="bamboo-h " id="导入外部播放器25dyu6r8t41">导入外部播放器</h2><br/><p>当然，自带的音乐播放器并不是唯一，也可以自定义音乐播放器，例如下面的播放器</p><div class="tagLink"><a class="link-card" title="懒耗子播放器" href="https://player.lzti.com/"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">懒耗子播放器</p><p class="url">https://player.lzti.com/</p></div></a></div><p>我用的是他的免注册demo版本。具体操作步骤如下：<br>在主题配置文件<code>_config.yml</code>里，找到<code>import</code>配置项，导入js即可</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 自己嵌入css或者script</span></span><br><span class="line"><span class="attr">import:</span></span><br><span class="line"> <span class="attr">script:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">defer</span> <span class="string">src="https://player.lzti.com/api/player/demo"</span> <span class="string">id="myhk"</span> <span class="string">key="demo"</span> <span class="string">skin="player"</span> <span class="string">lr="l"</span> <span class="string">m="1"></script></span></span><br></pre></td></tr></table></figure><blockquote><p>注意， script标签一定要带上 <code>defer</code>属性, 因为这个播放器依赖<code>jquery</code>，如果不加<code>defer</code>的话，则会在jquery.js加载之前加载，就会报错。</p></blockquote><p>然后刷新页面就能看到效果了，当然你也可以不用<code>demo</code>版本，直接登录注册，然后使用自己的网易云或者qq音乐歌单。</p><h2 class="bamboo-h " id="其他18vgtke91rd">其他</h2><br/><p>其实我一开始发现的是一个叫做<code>明月浩空</code>的播放器，跟<code>懒耗子</code>一样，也不知道谁是真的，我不管，能用就行,但是<code>明月浩空</code>播放器，播放音乐的时候，歌词出现严重错位，所以我就用了<code>懒耗子</code>，这里附上<code>明月浩空</code>播放器网址:</p><div class="tagLink"><a class="link-card" title="明月浩空播放器" href="https://myhkw.com/"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-c2d78ddec37aabf737bcfe1d58f6813d_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">明月浩空播放器</p><p class="url">https://myhkw.com/</p></div></a></div>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> 音乐 </tag>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>新增酷炫按钮和预加载动画</title>
<link href="/post/btn-preloader/"/>
<url>/post/btn-preloader/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="按钮事例2l3nuv2j170">按钮事例</h2><br/><span class='btn center cool-1'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-1, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-2'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-2, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-3'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-3, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-4'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-4, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-5'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-5, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-6'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-6, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-7'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-7, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-8'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-8, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-9'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-9, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-10'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-10, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-11'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-11, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-12'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-12, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-13'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-13, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-14'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-14, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><span class='btn center cool-15'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center cool-15, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="预加载动画事例1povm2pg6z6">预加载动画事例</h2><br/><h3 id="预加载1"><a href="#预加载1" class="headerlink" title="预加载1"></a>预加载1</h3><p><img src="https://pic4.zhimg.com/80/v2-dad20599c5d9aac009d224817ad2d3f7_1440w.webp" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-dad20599c5d9aac009d224817ad2d3f7_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载1"></p><h3 id="预加载2"><a href="#预加载2" class="headerlink" title="预加载2"></a>预加载2</h3><p><img src="https://pic1.zhimg.com/80/v2-929a308b7edd0c3717ce0c149dadee1a_1440w.png" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-929a308b7edd0c3717ce0c149dadee1a_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载2"></p><h3 id="预加载3"><a href="#预加载3" class="headerlink" title="预加载3"></a>预加载3</h3><p><img src="https://pic1.zhimg.com/80/v2-22457e493abcafa8fcc62e09b85a13fb_1440w.png?source=d16d100b" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-22457e493abcafa8fcc62e09b85a13fb_1440w.png?source=d16d100b" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载3"></p><h3 id="预加载4"><a href="#预加载4" class="headerlink" title="预加载4"></a>预加载4</h3><p><img src="https://pic1.zhimg.com/80/v2-adab5e1f2cce70ffbec035806c051876_1440w.png" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-adab5e1f2cce70ffbec035806c051876_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载4"></p><h3 id="预加载5"><a href="#预加载5" class="headerlink" title="预加载5"></a>预加载5</h3><p><img src="https://picx.zhimg.com/80/v2-e28bb5daa0be09cf0a8ba14f1af108ed_1440w.png" class="lazyload placeholder" data-srcset="https://picx.zhimg.com/80/v2-e28bb5daa0be09cf0a8ba14f1af108ed_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载5"></p><h3 id="预加载6"><a href="#预加载6" class="headerlink" title="预加载6"></a>预加载6</h3><p><img src="https://picx.zhimg.com/80/v2-6590a47d9e553c19e19ba17da20dffe9_1440w.png" class="lazyload placeholder" data-srcset="https://picx.zhimg.com/80/v2-6590a47d9e553c19e19ba17da20dffe9_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载6"></p><h3 id="预加载7"><a href="#预加载7" class="headerlink" title="预加载7"></a>预加载7</h3><p><img src="https://pic1.zhimg.com/80/v2-3376436eb071cc51dea8f665425f9ae8_1440w.png" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-3376436eb071cc51dea8f665425f9ae8_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载7"></p><h3 id="预加载8"><a href="#预加载8" class="headerlink" title="预加载8"></a>预加载8</h3><p><img src="https://pic1.zhimg.com/80/v2-da152216cf0d5e95f67df5e482ed12e5_1440w.png" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-da152216cf0d5e95f67df5e482ed12e5_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载8"></p><h3 id="预加载9"><a href="#预加载9" class="headerlink" title="预加载9"></a>预加载9</h3><p><img src="https://picx.zhimg.com/80/v2-c3b21779ba22a3f9cb8d71e635fac3d3_1440w.png" class="lazyload placeholder" data-srcset="https://picx.zhimg.com/80/v2-c3b21779ba22a3f9cb8d71e635fac3d3_1440w.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="预加载9"></p><p>在主题<code>_config.yml</code>中设置<code>type</code>属性即可，1到9</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 页面刷新时预加载动画</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">type:</span> <span class="number">9</span> <span class="comment"># 1/2/3/4/5/6/7/8/9</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> 按钮 </tag>
<tag> 预加载 </tag>
</tags>
</entry>
<entry>
<title>首页github日历</title>
<link href="/post/side/githubcalendar/"/>
<url>/post/side/githubcalendar/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="更改首页github日历1raanuqbdsy">更改首页github日历</h2><br/><p>侧边栏那篇文章中有写怎么添加首页github日历，但是那个方法的api挂了。。。又找到一个方法，比较简单。<br>但是没有之前的强大，还可以。<br>来自于这个项目：</p><div class="tagLink"><a class="link-card" title="github日历图片" href="https://github.com/2016rshah/githubchart-api"><span class="link-card-backdrop" style="background-image: url(https://pic1.zhimg.com/v2-8c7a66c107ee925238b5e0ecb4cf1b58_b.jpg)"></span><div class="left"><img src="https://pic1.zhimg.com/v2-8c7a66c107ee925238b5e0ecb4cf1b58_b.jpg" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/v2-8c7a66c107ee925238b5e0ecb4cf1b58_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">github日历图片</p><p class="url">https://github.com/2016rshah/githubchart-api</p></div></a></div><p>直接一行代码搞定</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">no-lazy</span> <span class="attr">width</span>=<span class="string">"100%"</span> <span class="attr">hright</span>=<span class="string">"300px"</span> <span class="attr">src</span>=<span class="string">"https://ghchart.rshah.org/42b983/yuang01"</span> <span class="attr">alt</span>=<span class="string">"yuang01 github"</span> /></span></span><br></pre></td></tr></table></figure><p><code>https://ghchart.rshah.org/42b983/yuang01</code>: 42b983代表颜色，yuang01是自己的github名称</p><h2 class="bamboo-h-b" id="展示效果x62o18zap1" style="color:!important">展示效果</h2><div></div><img no-lazy width="100%" hright="300px" src="https://ghchart.rshah.org/42b983/yuang01" alt="yuang01 github" /><p>首页侧边栏这样写就能将github日历加进去了</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">my_github_container</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">my_github_container</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">Github日历</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fa-solid</span> <span class="string">fa-calendar-days</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#42b983'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">https://github.com/yuang01</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <img no-lazy width="100%" hright="300px" src="https://ghchart.rshah.org/42b983/yuang01" alt="yuang01 github" /></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="其他2mlp5oycb6o">其他</h2><br/><p>顺便说一下，我的首页的微博热搜和历史记录用的也是网上的免费api，可以bing或者谷歌搜索随机免费api等关键字搜索，例如这个网站：</p><div class="tagLink"><a class="link-card" title="随机免费api" href="https://api.vvhan.com/"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-13656a105aaa2116cb33a8a70be0b1e9_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-13656a105aaa2116cb33a8a70be0b1e9_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-13656a105aaa2116cb33a8a70be0b1e9_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">随机免费api</p><p class="url">https://api.vvhan.com/</p></div></a></div>]]></content>
<categories>
<category> 侧边栏 </category>
</categories>
<tags>
<tag> side </tag>
</tags>
</entry>
<entry>
<title>轮播-swiper</title>
<link href="/post/swiper/"/>
<url>/post/swiper/</url>
<content type="html"><![CDATA[<h2 id="文章轮播图"><a href="#文章轮播图" class="headerlink" title="文章轮播图"></a>文章轮播图</h2><blockquote><p>这次新增了一个文章轮播图插件和beaudar评论，beaudar评论在配置文件里将<code>beaudar.on</code>设为true，然后将仓库设置为自己的github仓库即可。<br>beaudar：<a href="https://beaudar.lipk.org/">https://beaudar.lipk.org/</a></p></blockquote><p>言归正传:</p><h2 class="bamboo-h " id="轮播事例1r6aiup2sg9">轮播事例</h2><br/><h3 class="bamboo-h-b" id="展示多个，宽度最小8u18h2hsuqo" style="color:#ffa502!important">展示多个，宽度最小</h3><div></div><div class="tag-plugin post-swiper-container" width="multiple"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述111</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述22222</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述33333</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述44444</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述55555</p><img no-lazy class="swiper-slide-img" src="https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div><h3 class="bamboo-h-b" id="事例代码1yuc5m8dav5" style="color:#ff6348!important">事例代码</h3><div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% swiper width:multiple %}</span><br><span class="line">![<span class="string">图片描述111</span>](<span class="link">https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述22222</span>](<span class="link">https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述33333</span>](<span class="link">https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述44444</span>](<span class="link">https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述55555</span>](<span class="link">https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg</span>)</span><br><span class="line">{% endswiper %}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="默认1wb9t2c7ydz" style="color:#ffa502!important">默认</h3><div></div><div class="tag-plugin post-swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div><h3 class="bamboo-h-b" id="事例代码2449jud8izg" style="color:#ff6348!important">事例代码</h3><div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% swiper %}</span><br><span class="line">![<span class="string">图片描述</span>](<span class="link">https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述</span>](<span class="link">https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述</span>](<span class="link">https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg</span>)</span><br><span class="line">{% endswiper %}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="展示一个，填充整个容器24p9j21oj5t" style="color:#ffa502!important">展示一个，填充整个容器</h3><div></div><div class="tag-plugin post-swiper-container" width="fill"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">图片描述</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div><h3 class="bamboo-h-b" id="事例代码1qmutd9i1ly" style="color:#ff6348!important">事例代码</h3><div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% swiper width:fill %}</span><br><span class="line">![<span class="string">图片描述</span>](<span class="link">https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述</span>](<span class="link">https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg</span>)</span><br><span class="line">![<span class="string">图片描述</span>](<span class="link">https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg</span>)</span><br><span class="line">{% endswiper %}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="无描述文字42e7yllch38" style="color:#ffa502!important">无描述文字</h3><div></div><div class="tag-plugin post-swiper-container" width="multiple"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown"></p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown"></p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown"></p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown"></p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown"></p><img no-lazy class="swiper-slide-img" src="https://pica.zhimg.com/80/v2-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div><h3 class="bamboo-h-b" id="事例代码23r2w71pe1p" style="color:#ff6348!important">事例代码</h3><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{<span class="string">%</span> <span class="string">swiper</span> <span class="string">width:multiple</span> <span class="string">%</span>}</span><br><span class="line"><span class="type">![](https://pic2.zhimg.com/80/v2</span><span class="string">-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg)</span></span><br><span class="line"><span class="type">![](https://pic1.zhimg.com/80/v2</span><span class="string">-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg)</span></span><br><span class="line"><span class="type">![](https://pic1.zhimg.com/80/v2</span><span class="string">-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg)</span></span><br><span class="line"><span class="type">![](https://pic1.zhimg.com/80/v2</span><span class="string">-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg)</span></span><br><span class="line"><span class="type">![](https://pica.zhimg.com/80/v2</span><span class="string">-dff5af5b4e0331e3b9c22ef1004d88c8_1440w.jpg)</span></span><br><span class="line">{<span class="string">%</span> <span class="string">endswiper</span> <span class="string">%</span>}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="跳转链接6356583ioc0" style="color:#ffa502!important">跳转链接</h3><div></div><blockquote><p>使用原生img标签，加上href属性即可，例如点击图片跳转到百度，则加上href=”<a href="https://baidu.com"">https://baidu.com"</a> 属性</p></blockquote><div class="tag-plugin post-swiper-container" width="fill"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="https://baidu.com"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">跳转百度</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="https://github.com/yuang01/hexo-theme-bamboo"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转github</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="https://juejin.cn/"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转到掘金社区</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="/"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转到首页</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div><div class="tag-plugin post-swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="https://baidu.com"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转百度</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="https://github.com/yuang01/hexo-theme-bamboo"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转github</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="https://juejin.cn/"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转到掘金社区</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="/"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">点击跳转到首页</p><img no-lazy class="swiper-slide-img" src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div><h3 class="bamboo-h-b" id="事例代码2fere8d9pc7" style="color:#ff6348!important">事例代码</h3><div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">{% swiper width:fill %}</span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"https://baidu.com"</span> <span class="attr">alt</span>=<span class="string">"点击跳转百度"</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"https://github.com/yuang01/hexo-theme-bamboo"</span> <span class="attr">alt</span>=<span class="string">"点击跳转github"</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"https://juejin.cn/"</span> <span class="attr">alt</span>=<span class="string">"点击跳转到掘金社区"</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"/"</span> <span class="attr">alt</span>=<span class="string">"点击跳转到首页"</span>></span></span></span><br><span class="line">{% endswiper %}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">{% swiper %}</span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic2.zhimg.com/80/v2-b72c5a1840b763674a5a1744cb49f08b_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"https://baidu.com"</span> <span class="attr">alt</span>=<span class="string">"点击跳转百度"</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic1.zhimg.com/80/v2-9a1f1ad66d08747642c1b66727fea9f6_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"https://github.com/yuang01/hexo-theme-bamboo"</span> <span class="attr">alt</span>=<span class="string">"点击跳转github"</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"https://juejin.cn/"</span> <span class="attr">alt</span>=<span class="string">"点击跳转到掘金社区"</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg"</span> <span class="attr">href</span>=<span class="string">"/"</span> <span class="attr">alt</span>=<span class="string">"点击跳转到首页"</span>></span></span></span><br><span class="line">{% endswiper %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>主题config配置项简介</title>
<link href="/post/hexo-theme-bamboo/page/"/>
<url>/post/hexo-theme-bamboo/page/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h-b" id="主题字体图标使用的是1s90zgbu7a2" style="color:#895546!important">主题字体图标使用的是</h2><div></div><div class="tagLink"><a class="link-card" title="Font Awesome" href="https://fontawesome.com/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-3662254b76e2cb640449555df2543e44_1440w.jpg)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-3662254b76e2cb640449555df2543e44_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-3662254b76e2cb640449555df2543e44_1440w.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">Font Awesome</p><p class="url">https://fontawesome.com/</p></div></a></div><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa-solid fa-person"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line">取 fa-solid fa-person</span><br></pre></td></tr></table></figure><p>Emoji表情不需要，也不推荐安装其他插件，推荐这个网站，直接复制粘贴就能显示在<code>IOS</code>，<code>Android</code>，<code>OSX</code>和<code>Windows</code>系统上。</p><blockquote><p>这里推荐一个<a href="https://copy.emojiall.com/zh-hans/">Emoji网站</a></p></blockquote><h2 class="bamboo-h-b" id="图片地址1372q1fl62o" style="color:#ff7f50!important">图片地址</h2><div></div><p><code>_config.yml</code>里使用到的图片地址，例如<code>logo</code>参数：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">logo:</span> <span class="string">http://xxx.png</span> <span class="comment"># 为空则不显示</span></span><br></pre></td></tr></table></figure><p>我们可以使用线上地址, 也可以使用本地地址<br>首先在<code>source</code>文件夹(根目录下的source文件夹)下创建<code>img</code>文件夹，然后引入：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">logo:</span> <span class="string">/img/1.jpg</span> <span class="comment"># 为空则不显示</span></span><br></pre></td></tr></table></figure><p>注意<code>source</code>是根目录下的，不是主题文件夹下的，主题文件夹不用管<br>当然，文章里面引用本地地址也行的，例如</p><figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![<span class="string">图片描述</span>](<span class="link">/img/full.png</span>)</span><br></pre></td></tr></table></figure><h2 class="bamboo-h-b" id="菜单4p76w5i2nt" style="color:#eccc68!important">菜单</h2><div></div><p>一开始菜单是注释掉的，我们只需要取消注释就行了，注释是考虑到有些人用<code>npm</code>下载主题.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line"> <span class="attr">Home:</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fa</span> <span class="string">fa-home</span></span><br></pre></td></tr></table></figure><p>编辑器里面有取消注释的快捷键，例如<code>vscode</code>使用的是 <kbd>Ctrl</kbd> + <kbd>/</kbd><br><code>#</code>代表注释</p><h2 class="bamboo-h-b" id="首页轮播图mhpdtvjxlq" style="color:#ff6b81!important">首页轮播图</h2><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">swiper:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span> <span class="comment"># 设置为false, 则首页不显示轮播图</span></span><br></pre></td></tr></table></figure><p>设置false则不显示首页轮播图<br>在文章中设置<code>swiper: true</code>，会将该篇文章放在首页轮播图中：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">Bamboo主题-主题config配置项简介（二）</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2022-07-16 </span><span class="number">12</span><span class="string">:21</span></span><br><span class="line"><span class="attr">swiper:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">swiperImg:</span> <span class="string">https://pica.zhimg.com/80/v2-4dc929a46e9fb56c13911592af0be9dc_1440w.jpg?source=1940ef5c</span></span><br><span class="line"><span class="attr">excerpt:</span> <span class="string">'描述'</span></span><br><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="string">文章内容</span></span><br></pre></td></tr></table></figure><p>当然，如果没有文章设置<code>swiper: true</code>，则首页轮播图显示默认内容：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">swiper:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span> <span class="comment"># 设置为false, 则首页不显示轮播图</span></span><br><span class="line"> <span class="attr">defaultImg:</span> <span class="string">'https://pic3.zhimg.com/80/v2-7e6795a0b7b4fbe87b0a388b8a052f78_1440w.jpg'</span> <span class="comment"># 图片，没有则随机选取</span></span><br><span class="line"> <span class="attr">defaultVideo:</span> <span class="string">'/video/quanji.mp4'</span> <span class="comment"># video，min-width:992px show</span></span><br><span class="line"> <span class="attr">defaultTile:</span> <span class="string">'竹子'</span> <span class="comment"># 标题</span></span><br><span class="line"> <span class="attr">defaultDesc:</span> [<span class="string">'千磨万击还坚劲'</span>, <span class="string">'任尔东西南北风'</span>] <span class="comment">#描 述，例如 ['煮酒洗净尘嚣，论知交', '万般付之一笑，共偕老']</span></span><br><span class="line"> <span class="attr">defaultLeftBtnText:</span> <span class="string">'阅读文档'</span> <span class="comment"># 左边按钮文字, 空字符串则不显示</span></span><br><span class="line"> <span class="attr">defaultRightBtnText:</span> <span class="string">'下载主题'</span> <span class="comment"># 右边按钮的文字，空字符串则不显示</span></span><br></pre></td></tr></table></figure><p><code>defaultImg</code>代表默认图片，<code>defaultVideo</code>代表默认视频，这两个值都设置的话，则在pc端显示视频，手机端显示图片。</p><h2 class="bamboo-h-b" id="轮播图样式ag6w27bajig" style="color:#ff6b81!important">轮播图样式</h2><div></div><p>下面的图片是放在图床上的，可能加载有点慢</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">swiper:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span> <span class="comment"># 设置为false, 则首页不显示轮播图</span></span><br><span class="line"> <span class="comment"># 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">imgwidthFull:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># 整个轮播图宽高都是100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">full:</span> <span class="literal">true</span> <span class="comment"># full 优先级大于 imgwidthFull/bothSideTransparent</span></span><br><span class="line"> <span class="comment"># 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明</span></span><br><span class="line"> <span class="attr">bothSideTransparent:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>如果这样设置，则轮播图全屏显示:<br><img src="https://pic1.zhimg.com/80/v2-4ece87ab462f56348c4c811ce92b45e0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-4ece87ab462f56348c4c811ce92b45e0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="全屏显示"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">swiper:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span> <span class="comment"># 设置为false, 则首页不显示轮播图</span></span><br><span class="line"> <span class="comment"># 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">imgwidthFull:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># 整个轮播图宽高都是100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">full:</span> <span class="literal">false</span> <span class="comment"># full 优先级大于 imgwidthFull/bothSideTransparent</span></span><br><span class="line"> <span class="comment"># 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明</span></span><br><span class="line"> <span class="attr">bothSideTransparent:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>如果这样设置，则这样显示:<br><img src="https://pic4.zhimg.com/80/v2-1dd554903686109133be658b11aa23cf_1440w.webp" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-1dd554903686109133be658b11aa23cf_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="轮播图"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">swiper:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span> <span class="comment"># 设置为false, 则首页不显示轮播图</span></span><br><span class="line"> <span class="comment"># 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">imgwidthFull:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># 整个轮播图宽高都是100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">full:</span> <span class="literal">false</span> <span class="comment"># full 优先级大于 imgwidthFull/bothSideTransparent</span></span><br><span class="line"> <span class="comment"># 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明</span></span><br><span class="line"> <span class="attr">bothSideTransparent:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>如果这样设置，则这样显示:<br><img src="https://pic4.zhimg.com/80/v2-85a8cebd321b95b1a93bbe888d4e29ef_1440w.webp" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-85a8cebd321b95b1a93bbe888d4e29ef_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="轮播图"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">swiper:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span> <span class="comment"># 设置为false, 则首页不显示轮播图</span></span><br><span class="line"> <span class="comment"># 图片只有宽度为100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">imgwidthFull:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># 整个轮播图宽高都是100% (轮播图的文字和按钮只能居中显示)</span></span><br><span class="line"> <span class="attr">full:</span> <span class="literal">false</span> <span class="comment"># full 优先级大于 imgwidthFull/bothSideTransparent</span></span><br><span class="line"> <span class="comment"># 两边透明，imgwidthFull/full: false的时候，设置该值为true，则两边的模糊效果为透明</span></span><br><span class="line"> <span class="attr">bothSideTransparent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>如果这样设置，则这样显示:<br><img src="https://pic2.zhimg.com/80/v2-f7b6bc9b3d803dcffb839c690fbab795_1440w.webp" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f7b6bc9b3d803dcffb839c690fbab795_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="轮播图"></p><h2 class="bamboo-h-b" id="音乐a7imimq4bn4" style="color:#ffa502!important">音乐</h2><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">music:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">server:</span> <span class="string">tencent</span> <span class="comment">#require music platform: netease, tencent, kugou, xiami, baidu</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">song</span> <span class="comment">#require song, playlist, album, search, artist</span></span><br><span class="line"> <span class="attr">id:</span> <span class="string">0020dKPG3mp0GT</span> <span class="comment">#require song id / playlist id / album id / search keyword</span></span><br></pre></td></tr></table></figure><p><code>server</code>代表音乐平台，<code>netease</code>代表网易云, <code>tencent</code>代表qq音乐<br><code>type</code>代表歌曲类别，<code>song</code>代表单曲, <code>playlist</code>代表歌单<br><code>id</code>代表歌曲或者歌单的id，例如网易云的歌单地址<code>https://music.163.com/#/playlist?id=2788431035</code>, 后面的id就是这个。</p><blockquote><p>本主题切换页面，音乐不会间断的哦</p></blockquote><h2 class="bamboo-h-b" id="评论2gdqkzc52sx" style="color:#7bed9f!important">评论</h2><div></div><p>博主用的评论是<code>utterance</code>, <a href="https://utteranc.es/">https://utteranc.es/</a> github授权一下就行。很简单。</p><p>主题集成了<code>utterance</code>, <code>valine</code>, <code>waline</code>， <code>livere</code>, <code>gitalk</code>, <code>giscus</code> ,<code>gitment</code>, <code>beaudar</code>, <code>twikoo</code>, <code>changyan</code>这些评论<br>需要注意的是<code>changyan</code>我并没有测试哈，因为好像要依赖网站备案…..<br><code>gitment</code>的官方都不维护了，不推荐用gitment了，所以<code>changyan</code>和<code>gitment</code>我都不推荐使用</p><h2 class="bamboo-h-b" id="主题颜色更改1vwhs2tnn8k" style="color:#1e90ff!important">主题颜色更改</h2><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 主题颜色</span></span><br><span class="line"><span class="comment"># 主题颜色</span></span><br><span class="line"><span class="attr">color_scheme:</span></span><br><span class="line"> <span class="comment"># ------------</span></span><br><span class="line"> <span class="comment"># 通用颜色</span></span><br><span class="line"> <span class="attr">common:</span></span><br><span class="line"> <span class="comment"># 主题色</span></span><br><span class="line"> <span class="attr">theme:</span> <span class="string">'#42b983'</span></span><br></pre></td></tr></table></figure><p>改这个<code>theme</code>就行了</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">bgFloor:</span> <span class="string">'url("https://pic2.zhimg.com/80/v2-a90e3e9f544549e244355039b96bd606_1440w.jpg")</span></span><br></pre></td></tr></table></figure><p><code>bgFloor</code>指的是博客首页的背景图片或者背景颜色</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">bgImg:</span> <span class="string">'https://pica.zhimg.com/80/v2-292e6340491bd97f9d014d6be3371c04_1440w.jpg'</span></span><br></pre></td></tr></table></figure><p><code>bgImg</code>指的是文章页面的背景图片或者背景颜色，也可以在文章里面单独配置</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">headerMenuBackgroundColor:</span> <span class="string">'rgba(66, 185, 133, 0.8)'</span></span><br></pre></td></tr></table></figure><p><code>headerMenuBackgroundColor</code>值得是导航的背景颜色</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">footer:</span></span><br><span class="line"> <span class="comment"># 为空则使用 theme主题色，写法: rgba(268, 264, 269, 0.8) or #42b983 or red or 也可以是渐变颜色 linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%) or 也可以是url("图片地址")</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'rgba(66, 185, 133, 0.8)'</span> </span><br></pre></td></tr></table></figure><p><code>footer.background</code>值得页脚的背景颜色</p><h2 class="bamboo-h-b" id="页脚1jx03tylp2g" style="color:#3B3B98!important">页脚</h2><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">site_footer:</span></span><br><span class="line"> <span class="attr">custom:</span> <span class="comment"># 根据需要自行取消注释，label: 'markdown格式'，会在下面继续增加内容</span></span><br><span class="line"> <span class="comment"># - label: '<br>'</span></span><br><span class="line"> <span class="comment"># - label: '[Hello World](http://baidu.com)'</span></span><br></pre></td></tr></table></figure><p>可以通过页脚的<code>custom</code>来向下自定义markdown内容<br>也可以向中间插入内容:<br>假如说你想在 social和 copyright中间加一个自定义内容, 可以这样写 layout: [social, aaa ,copyright, busuanzi, custom], 然后在下面写上aaa: ‘markdown格式’, aaa这个名称随便取</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">layout:</span> [<span class="string">social</span>, <span class="string">aaa</span>, <span class="string">copyright</span>, <span class="string">custom</span>]</span><br><span class="line"><span class="attr">social:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-rss</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/atom.xml</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">mailto:xxxxxxxxx@qq.com</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">https://github.com/yuang01/hexo-theme-bamboo</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-qq</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=xxxxxxxxx</span></span><br><span class="line"><span class="attr">aaa:</span> <span class="string">'自定义内容'</span></span><br><span class="line"><span class="attr">copyright:</span> <span class="string">'Copyright © 2019 - 2020 <a href="https://github.com/yuang01">yuang01</a> | Powered by <a href="https://hexo.io/zh-cn/docs/">Hexo</a> | Theme <a href="https://github.com/yuang01/theme">Bamboo</a> '</span></span><br></pre></td></tr></table></figure><h2 class="bamboo-h-b" id="图片懒加载31pk3be20wg" style="color:#D6A2E8!important">图片懒加载</h2><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">lazyload:</span></span><br><span class="line"> <span class="attr">loadingImg:</span> <span class="string">https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp</span></span><br></pre></td></tr></table></figure><p>通过<code>lazyload.loadingImg</code>指定loading图片</p><h2 class="bamboo-h-b" id="引入js或者css文件24vhet30z1m" style="color:#FC427B!important">引入js或者css文件</h2><div></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">import:</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="comment"># - <link href="xxx.css" rel="stylesheet"></span></span><br><span class="line"> <span class="attr">script:</span> </span><br><span class="line"> <span class="comment"># - <script src="/bubbly-bg/index.js"></script></span></span><br></pre></td></tr></table></figure><p>通过<code>import</code>参数引入js或者css.</p><p>其实配置项搞那么多是想更加自定义一点，配置项你都不用去管他的，只是说你想去改某个东西你就去改它。</p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> hexo-theme-bamboo </tag>
</tags>
</entry>
<entry>
<title>首页添加弹幕</title>
<link href="/post/danmu/index/"/>
<url>/post/danmu/index/</url>
<content type="html"><![CDATA[<p>首页添加弹幕</p><ol><li>首先引入弹幕插件css和js，再导入自己编写的js，弹幕插件主题已经有了，所以引入就行，但是引入主题已经有的js和css只能在侧边栏模块里面引入；<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">mymusic</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">mymusic</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">超好听的好吗😙</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fa-solid</span> <span class="string">fa-music</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#00AEEC'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">https://www.bilibili.com/video/BV1Da411n793?vd_source=79ce7c1b6f96c8b5a7ae552cc9be5225</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <iframe src="//player.bilibili.com/player.html?aid=215901212&bvid=BV1Da411n793&cid=772894060&page=1" scrolling="no" border="0" width="100%" height="476" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></span></span><br><span class="line"><span class="string"> <link href="/js/danmu/barrager.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> <script src="/js/danmu/jquery.barrager.js"></script></span></span><br><span class="line"><span class="string"> <script src="/danmu/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure>主要引入上面的这三个文件:<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string"><link</span> <span class="string">href="/js/danmu/barrager.css"</span> <span class="string">rel="stylesheet"></span></span><br><span class="line"><span class="string"><script</span> <span class="string">src="/js/danmu/jquery.barrager.js"></script></span></span><br><span class="line"><span class="string"><script</span> <span class="string">src="/danmu/index.js"></script></span></span><br></pre></td></tr></table></figure>不懂侧边栏的，可以去侧边栏文章看看，如何新建首页侧边栏</li></ol><div class="tagLink"><a class="link-card" title="侧边栏" href="/post/hexo-theme-bamboo/sidebar/"><span class="link-card-backdrop" style="background-image: url(https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg)"></span><div class="left"><img src="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-e012e11ff2cd3270df046e3cd4fb9fbe_1440w.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">侧边栏</p><p class="url">/post/hexo-theme-bamboo/sidebar/</p></div></a></div><p>上面引入的三个文件中, 有一个叫做<code>/danmu/index.js</code>的文件需要我们自己编写和创建的：<br>在根目录的<code>source</code>文件夹下创建<code>danmu/index.js</code>文件:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 真是闲的蛋疼 0.0....</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">renderData</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> homeDanmuArr = [</span><br><span class="line"> {</span><br><span class="line"> img: <span class="string">"http://120.48.121.186/medias/logo.png"</span>, <span class="comment">//图片</span></span><br><span class="line"> info: <span class="string">"欢迎访问bamboo主题"</span>, <span class="comment">//文字</span></span><br><span class="line"> href: <span class="string">"https://yuang01.github.io/"</span>, <span class="comment">//链接</span></span><br><span class="line"> close: <span class="literal">true</span>, <span class="comment">//显示关闭按钮</span></span><br><span class="line"> speed: <span class="number">15</span>, <span class="comment">//延迟,单位秒,默认6</span></span><br><span class="line"> color: <span class="string">"#42b983"</span>, <span class="comment">//颜色,默认白色</span></span><br><span class="line"> old_ie_color: <span class="string">"#000000"</span>, <span class="comment">//ie低版兼容色,不能与网页背景相同,默认黑色</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> img: <span class="string">"http://120.48.121.186/medias/logo.png"</span>, <span class="comment">//图片</span></span><br><span class="line"> info: <span class="string">"国内可以访问http://120.48.121.186"</span>, <span class="comment">//文字</span></span><br><span class="line"> href: <span class="string">"http://120.48.121.186"</span>, <span class="comment">//链接</span></span><br><span class="line"> close: <span class="literal">true</span>, <span class="comment">//显示关闭按钮</span></span><br><span class="line"> speed: <span class="number">15</span>, <span class="comment">//延迟,单位秒,默认6</span></span><br><span class="line"> color: <span class="string">"blue"</span>, <span class="comment">//颜色,默认白色</span></span><br><span class="line"> old_ie_color: <span class="string">"#000000"</span>, <span class="comment">//ie低版兼容色,不能与网页背景相同,默认黑色</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> img: <span class="string">"http://120.48.121.186/medias/logo.png"</span>, <span class="comment">//图片</span></span><br><span class="line"> info: <span class="string">"国内可以访问http://120.48.121.186"</span>, <span class="comment">//文字</span></span><br><span class="line"> href: <span class="string">"http://120.48.121.186"</span>, <span class="comment">//链接</span></span><br><span class="line"> close: <span class="literal">true</span>, <span class="comment">//显示关闭按钮</span></span><br><span class="line"> speed: <span class="number">12</span>, <span class="comment">//延迟,单位秒,默认6</span></span><br><span class="line"> color: <span class="string">"red"</span>, <span class="comment">//颜色,默认白色</span></span><br><span class="line"> old_ie_color: <span class="string">"#000000"</span>, <span class="comment">//ie低版兼容色,不能与网页背景相同,默认黑色</span></span><br><span class="line"> },</span><br><span class="line"> ];</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="number">20</span>; i++) { <span class="comment">// 生成 20 个 {}, 前三个已经写好，后面17个，通过请求api赋值</span></span><br><span class="line"> homeDanmuArr[i] = homeDanmuArr[i] ? homeDanmuArr[i] : {<span class="attr">speed</span>: <span class="number">12</span>};</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> homeDanmuArr;</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">homeDanmuFn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> data = renderData();</span><br><span class="line"> <span class="comment">//每条弹幕发送间隔</span></span><br><span class="line"> <span class="keyword">let</span> homelooper_time = <span class="number">3</span> * <span class="number">1000</span>;</span><br><span class="line"> <span class="keyword">let</span> items = data;</span><br><span class="line"> <span class="comment">//弹幕总数</span></span><br><span class="line"> <span class="keyword">let</span> total = data.length;</span><br><span class="line"> <span class="comment">//是否首次执行</span></span><br><span class="line"> <span class="keyword">let</span> run_once = <span class="literal">true</span>;</span><br><span class="line"> <span class="comment">//弹幕索引</span></span><br><span class="line"> <span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line"> <span class="comment">//先执行一次</span></span><br><span class="line"> barrager();</span><br><span class="line"> <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">barrager</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (run_once) {</span><br><span class="line"> <span class="comment">//如果是首次执行,则设置一个定时器,并且把首次执行置为false</span></span><br><span class="line"> homelooper = <span class="built_in">setInterval</span>(barrager, homelooper_time);</span><br><span class="line"> run_once = <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//发布一个弹幕</span></span><br><span class="line"> <span class="keyword">const</span> responseImg = <span class="keyword">await</span> fetch(<span class="string">'https://api.btstu.cn/sjtx/api.php?lx=c1&format=json'</span>);</span><br><span class="line"> <span class="keyword">const</span> imgJson = <span class="keyword">await</span> responseImg.json();</span><br><span class="line"> <span class="keyword">const</span> responseInfo = <span class="keyword">await</span> fetch(<span class="string">'https://api.vvhan.com/api/ian?type=json'</span>);</span><br><span class="line"> <span class="keyword">const</span> infoJson = <span class="keyword">await</span> responseInfo.json();</span><br><span class="line"> <span class="comment">// 随机头像api</span></span><br><span class="line"> items[index].img = imgJson.imgurl;</span><br><span class="line"> <span class="comment">// 随机一言</span></span><br><span class="line"> index > <span class="number">2</span> && (items[index].info = infoJson.ishan);</span><br><span class="line"> $(<span class="string">"body"</span>).barrager(items[index]);</span><br><span class="line"> <span class="comment">//索引自增</span></span><br><span class="line"> index++;</span><br><span class="line"> <span class="comment">//所有弹幕发布完毕，清除计时器。</span></span><br><span class="line"> <span class="keyword">if</span> (index == total) {</span><br><span class="line"> <span class="built_in">clearInterval</span>(homelooper);</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">homeDanmuFn();</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'pjax:send'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (homelooper) {</span><br><span class="line"> <span class="built_in">clearInterval</span>(homelooper);</span><br><span class="line"> $.fn.barrager.removeAll();</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>然后大功告成，弹幕内容请求的随机一言api</p><p>最后预览地址：<a href="http://120.48.121.186/">http://120.48.121.186/</a></p>]]></content>
<categories>
<category> 首页添加弹幕 </category>
</categories>
<tags>
<tag> 首页添加弹幕 </tag>
</tags>
</entry>
<entry>
<title>制作简历（关于我）和404页面</title>
<link href="/post/custom/resume-404/"/>
<url>/post/custom/resume-404/</url>
<content type="html"><![CDATA[<h2 id="简历（或者叫关于我页面）"><a href="#简历（或者叫关于我页面）" class="headerlink" title="简历（或者叫关于我页面）"></a>简历（或者叫关于我页面）</h2><p>首先在<code>source</code>(根目录下的source)文件夹下创建<code>resume/index.md</code>文件，然后如下页面写法:</p><div class="tagLink"><a class="link-card" title="简历页面" href="/resume"><span class="link-card-backdrop" style="background-image: url(https://s3-us-west-1.amazonaws.com/files.delesign/assets/condo.svg)"></span><div class="left"><img src="https://s3-us-west-1.amazonaws.com/files.delesign/assets/condo.svg" class="lazyload placeholder" data-srcset="https://s3-us-west-1.amazonaws.com/files.delesign/assets/condo.svg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">简历页面</p><p class="url">/resume</p></div></a></div><p>最底下有源码</p><h2 id="配置404页面"><a href="#配置404页面" class="headerlink" title="配置404页面"></a>配置404页面</h2><p>首先在<code>source</code>(根目录下的source)文件夹下创建<code>404.md</code>文件, 然后写入：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">'页面未找到'</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2019-11-23 21:10:10</span></span><br><span class="line"><span class="attr">onlyTitle:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">toc:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">donate:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">share:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">copyright:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">img:</span> <span class="string">https://pic3.zhimg.com/80/378da4d6e6ac67c5bcd1d63d76f65d81_1440w.jpg?source=1940ef5c</span></span><br><span class="line"><span class="attr">imgTop:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">bgImg:</span> <span class="string">https://pic2.zhimg.com/v2-b19815c3780fe949adcee6693721087d_b.jpg</span></span><br><span class="line"><span class="meta">---</span></span><br><span class="line">{<span class="string">%</span> <span class="string">p</span> <span class="string">center</span> <span class="string">large</span>, <span class="number">404</span> <span class="string">%</span>}</span><br><span class="line">{<span class="string">%</span> <span class="string">p</span> <span class="string">center</span> <span class="string">large</span>, <span class="string">很抱歉，您访问的页面不存在</span> <span class="string">%</span>}</span><br><span class="line">{<span class="string">%</span> <span class="string">p</span> <span class="string">center</span> <span class="string">small</span>, <span class="string">可能是输入地址有误或该地址已被删除</span> <span class="string">%</span>}</span><br><span class="line"></span><br><span class="line">{<span class="string">%</span> <span class="string">btn</span> <span class="string">center</span> <span class="string">large</span>, <span class="string">返回首页</span>, <span class="string">/</span>, <span class="string">fa</span> <span class="string">fa-home</span> <span class="string">%</span>}</span><br></pre></td></tr></table></figure><p>本地测试访问：<a href="http://localhost:4000/404.html">http://localhost:4000/404.html</a></p><p>效果（example）：</p><div class="tagLink"><a class="link-card" title="404页面" href="https://yuang01.github.io/12"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-596ae74ed6efb408915dbd3260c22d81_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-596ae74ed6efb408915dbd3260c22d81_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-596ae74ed6efb408915dbd3260c22d81_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">404页面</p><p class="url">https://yuang01.github.io/12</p></div></a></div>]]></content>
<categories>
<category> 简历 </category>
<category> 404 </category>
</categories>
<tags>
<tag> 简历 </tag>
<tag> 404 </tag>
</tags>
</entry>
<entry>
<title>自定义live2d</title>
<link href="/post/custom/live2d/"/>
<url>/post/custom/live2d/</url>
<content type="html"><![CDATA[<p>主题自带的live2d，也就是左下角人物，使用的是下面这个项目</p><div class="tagLink"><a class="link-card" title="live2d-widget" href="https://github.com/stevenjoezhang/live2d-widget"><span class="link-card-backdrop" style="background-image: url(https://pic1.zhimg.com/80/v2-d22efe6f645f50ee0519bd5c7ce791fa_1440w.jpg)"></span><div class="left"><img src="https://pic1.zhimg.com/80/v2-d22efe6f645f50ee0519bd5c7ce791fa_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-d22efe6f645f50ee0519bd5c7ce791fa_1440w.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">live2d-widget</p><p class="url">https://github.com/stevenjoezhang/live2d-widget</p></div></a></div><p>如果不把这个项目放入服务器上，然后引用js的话，会导致live2d人物图片<code>显示不出来</code>，可能是受到<code>jsdelivr</code>的限制。如果你有服务器的话不妨可以折腾一下</p><hr><p>如果上面主题自带的live2d显示不出来的话，可以使用我下面的方法.</p><p>首先需要在配置文件里将主题自带的<code>live2d</code>给关闭:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># live-2d(左下角动画人物)</span></span><br><span class="line"><span class="attr">live2d:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">false</span> <span class="comment"># 控制显示或者隐藏</span></span><br></pre></td></tr></table></figure><ol><li>首先在<code>source</code>文件夹(根目录下的source文件夹)下创建<code>live2d/index.js</code>文件，写入以下内容:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">L2Dwidget.init({</span><br><span class="line"> model: {</span><br><span class="line"> jsonPath:</span><br><span class="line"> <span class="string">"https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json"</span>,</span><br><span class="line"> scale: <span class="number">1</span>,</span><br><span class="line"> },</span><br><span class="line"> display: {</span><br><span class="line"> position: <span class="string">"left"</span>, <span class="comment">//模型的表现位置</span></span><br><span class="line"> width: <span class="number">150</span>, <span class="comment">//模型的宽度</span></span><br><span class="line"> height: <span class="number">300</span>, <span class="comment">//模型的高度</span></span><br><span class="line"> hOffset: -<span class="number">50</span>, <span class="comment">// 向左向右偏移</span></span><br><span class="line"> vOffset: -<span class="number">150</span>, <span class="comment">// 向上向下偏移, 根据情况可以自己调整数值</span></span><br><span class="line"> },</span><br><span class="line"> mobile: {</span><br><span class="line"> show: <span class="literal">false</span>, <span class="comment">// 手机端不显示</span></span><br><span class="line"> scale: <span class="number">0.5</span>,</span><br><span class="line"> },</span><br><span class="line"> react: {</span><br><span class="line"> opacityDefault: <span class="number">1</span>, <span class="comment">//模型默认透明度</span></span><br><span class="line"> opacityOnHover: <span class="number">0.2</span>,</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li>然后找到主题的配置文件<code>_config.yml</code>，找到<code>import</code>, 将两个js引进去：<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">import:</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="comment"># - <link href="xxx.css" rel="stylesheet"></span></span><br><span class="line"> <span class="attr">script:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="/live2d/index.js"></script></span></span><br></pre></td></tr></table></figure></li></ol><p>然后就能显示左下角的live2d了，这个方法是看的这个文章：</p><div class="tagLink"><a class="link-card" title="live2d" href="https://blog.csdn.net/linshuhe1/article/details/94903871"><span class="link-card-backdrop" style="background-image: url(https://img-home.csdnimg.cn/images/20201124032511.png)"></span><div class="left"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" class="lazyload placeholder" data-srcset="https://img-home.csdnimg.cn/images/20201124032511.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">live2d</p><p class="url">https://blog.csdn.net/linshuhe1/article/details/94903871</p></div></a></div><p>可以阅读这个文章，<code>更改模型</code>。<br>最后效果如图:<br><img src="/img/swiper1.png" class="lazyload placeholder" data-srcset="/img/swiper1.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="live2d"></p><p>当然，还有网上说的<code>hexo-helper-live2d</code>这个插件，你们也可以试试，也是加载live2d的。可以百度这个插件，然后配置。</p>]]></content>
<categories>
<category> 自定义 </category>
</categories>
<tags>
<tag> 自定义 </tag>
</tags>
</entry>
<entry>
<title>自定义css之导航和页脚高斯模糊</title>
<link href="/post/custom/menu/"/>
<url>/post/custom/menu/</url>
<content type="html"><![CDATA[<p>我看到挺多人导航都是默认的那种颜色，没有透明度，我自己感觉导航和页脚背景有一定的透明好看点，我先说一下透明度怎么搞，因为背景模糊效果的前提是先背景透明。</p><ol><li>头部导航透明:<br>打开主题配置文件<code>_config.yml</code>, 找到主题颜色哪里，也就是<code>color_scheme.common.headerMenuBackgroundColor</code>, 这个<code>headerMenuBackgroundColor</code>就是设置头部导航的值，我们将它设置为<code>rgba(66, 185, 133, 0.8)</code>, 此时我们头部就是绿色透明的了，0.8就是透明度，数值越小越透明，0.8前面的三个值就是rgb颜色值。会css的应该知道的哦</li></ol><ol start="2"><li>底部页脚透明：<br>同样我们找到<code>color_scheme.footer.background</code>, 将<code>background</code>的值同样改为<code>rgba(66, 185, 133, 0.8)</code>, 这个时候页脚也变透明了。</li></ol><ol start="3"><li>头部导航和页脚高斯模糊<br>其实很简单，一行代码搞定<br>首先我们需要在<code>source</code>文件夹下创建<code>custom/menu.css</code>文件，内容如下<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#navHeader</span>,</span><br><span class="line"><span class="selector-id">#j-fish-skip</span>,</span><br><span class="line"><span class="selector-class">.footer</span> {</span><br><span class="line"> <span class="attribute">backdrop-filter</span>: <span class="built_in">saturate</span>(<span class="number">120%</span>) <span class="built_in">blur</span>(<span class="number">5px</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>就是设置这个<code>backdrop-filter</code>属性就行了，这个属性具体可以百度。</li></ol><p>然后将创建好的css导入进去:<br>找到主题配置文件<code>_config.yml</code>中的<code>import</code>，将css导进去：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">import:</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">href="/custom/menu.css"</span> <span class="string">rel="stylesheet"></span></span><br></pre></td></tr></table></figure><p>上面的<code>source</code>文件夹和主题<code>themes</code>文件夹<code>同级</code>，也就是最外面(根目录下)的那个<code>source</code>文件夹，不是主题里的，这样就不会动源码。<br>至此，头部导航和页脚的模糊效果就完成了，效果如图：</p><h3 id="模糊效果："><a href="#模糊效果：" class="headerlink" title="模糊效果："></a>模糊效果：</h3><p><img src="/img/1654780436716.jpg" class="lazyload placeholder" data-srcset="/img/1654780436716.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="模糊"></p><h3 id="透明效果："><a href="#透明效果：" class="headerlink" title="透明效果："></a>透明效果：</h3><p><img src="/img/1654780591672.png" class="lazyload placeholder" data-srcset="/img/1654780591672.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="透明"></p><p>差别不大，看个人喜好</p>]]></content>
<categories>
<category> 自定义css </category>
</categories>
<tags>
<tag> 自定义css </tag>
</tags>
</entry>
<entry>
<title>自定义css之头部图片透明</title>
<link href="/post/custom/index/"/>
<url>/post/custom/index/</url>
<content type="html"><![CDATA[<p>其实我们是可以自定义css的，例如我把文章详情页上面文章名称后面的背景变透明，也是可以办到的。<br>如图所示：<br><img src="/img/1654773163161.png" class="lazyload placeholder" data-srcset="/img/1654773163161.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="头部透明"></p><p>步骤如下：<br>首先说明：下面的<code>source</code>文件夹和主题<code>themes</code>文件夹<code>同级</code>，也就是最外面(根目录下)的那个<code>source</code>文件夹，不是主题里的，这样就不会动源码</p><ol><li>首先我们在<code>source</code>文件夹下创建<code>custom/index.css</code>, 内容如下:<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.post-detail-header</span> {</span><br><span class="line"> <span class="attribute">background-image</span>: none<span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: transparent<span class="meta">!important</span>;</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.post-detail-header-mask</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 class="selector-id">#appBgSwiper</span> {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.8</span>);</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">3</span>)<span class="meta">!important</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>这里的<code>!important</code>就是权重值更高的意思。</li></ol><p>2.引入我们创建好的css<br>打开主题配置文件<code>_config.yml</code>, 找到<code>import</code>, 引入css</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 自己嵌入css或者script</span></span><br><span class="line"><span class="attr">import:</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">href="/custom/index.css"</span> <span class="string">rel="stylesheet"></span></span><br><span class="line"> <span class="bullet">-</span> </span><br><span class="line"> <span class="attr">script:</span> </span><br><span class="line"> <span class="comment"># - <script src="xxx.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> </span><br><span class="line"> <span class="bullet">-</span> </span><br></pre></td></tr></table></figure><p>背景图片则使用参数<code>bgImg</code>指定, 例如:</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">自定义css之头部图片透明</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2022-06-09 18:56:20</span></span><br><span class="line"><span class="attr">tags:</span> [<span class="string">'自定义css'</span>]</span><br><span class="line"><span class="attr">categories:</span> [<span class="string">自定义css</span>]</span><br><span class="line"><span class="attr">swiper:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">img:</span> <span class="string">https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg</span></span><br><span class="line"><span class="attr">bgImg:</span> <span class="string">https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><p><code>bgImg</code>还可以是数组哦，数组的话额背景图片轮播显示, 例如:</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">bgImg:</span> [</span><br><span class="line"> <span class="string">'https://pica.zhimg.com/80/v2-292e6340491bd97f9d014d6be3371c04_1440w.jpg'</span>,</span><br><span class="line"> <span class="string">'https://pica.zhimg.com/80/v2-9659f2305acb80f25ced33aa980092c1_1440w.jpg'</span>,</span><br><span class="line"> <span class="string">'https://api.btstu.cn/sjbz/api.php'</span>,</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p><code>bgImg</code>不仅可以在文章里面单独配，还可以在主题配置文件里面<code>全局</code>指定。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">bgImgTransition: 'fade' # fade, scale, translate-fade,</span><br></pre></td></tr></table></figure><p><code>bgImgTransition</code>表示背景图片切换特效, 可以在单独文章页面使用，也可以在主题配置文件里面<code>全局</code>指定。</p><p>然后就ok啦,大功告成</p><p>这个效果还可以和<code>添加动态背景</code>效果一起使用哦</p><div class="tagLink"><a class="link-card" title="动态背景bubbly" href="/post/bubbly-bg/index/"><span class="link-card-backdrop" style="background-image: url(https://pica.zhimg.com/80/v2-dff764a1e0655154dd561022211fe11a_1440w.webp)"></span><div class="left"><img src="https://pica.zhimg.com/80/v2-dff764a1e0655154dd561022211fe11a_1440w.webp" class="lazyload placeholder" data-srcset="https://pica.zhimg.com/80/v2-dff764a1e0655154dd561022211fe11a_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">动态背景bubbly</p><p class="url">/post/bubbly-bg/index/</p></div></a></div>]]></content>
<categories>
<category> 自定义css </category>
</categories>
<tags>
<tag> 自定义css </tag>
</tags>
</entry>
<entry>
<title>给bamboo添加动态背景</title>
<link href="/post/bubbly-bg/index/"/>
<url>/post/bubbly-bg/index/</url>
<content type="html"><![CDATA[<h2 id="给bamboo添加动态背景"><a href="#给bamboo添加动态背景" class="headerlink" title="给bamboo添加动态背景"></a>给bamboo添加动态背景</h2><blockquote><p>首先说一下，这个和添加右上角梅花那篇文章一样，是没有放到主题配置项里让自己配置的，而是通过我接下来的步骤，自己动手实现，两分钟就能实现。</p></blockquote><ol><li>首先打开主题下的配置文件<code>_config.yml</code>，找到<code>import</code>，并引入js:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span>:</span><br><span class="line"> link:</span><br><span class="line"> - <span class="xml"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"/bubbly-bg/bubbly.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>></span></span></span><br><span class="line"><span class="xml"> script: </span></span><br><span class="line"><span class="xml"> - <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/bubbly-bg/bubbly.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> - <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/bubbly-bg/index.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure></li><li>接着在<code>source</code>文件夹下创建<code>bubbly-bg/bubbly.js</code>文件: 内容如下:<details ><summary pointer> bubbly.js </summary> <div class='content'> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">"use strict"</span>;</span><br><span class="line"><span class="built_in">window</span>.bubbly = <span class="function"><span class="keyword">function</span> (<span class="params">t</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> n = t || {},</span><br><span class="line"> o = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.random();</span><br><span class="line"> },</span><br><span class="line"> r = n.canvas || <span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>),</span><br><span class="line"> e = r.width,</span><br><span class="line"> a = r.height;</span><br><span class="line"> r.className = <span class="string">'bubbly-bg-canvas'</span>;</span><br><span class="line"> <span class="literal">null</span> === r.parentNode &&</span><br><span class="line"> (r.setAttribute(</span><br><span class="line"> <span class="string">"style"</span>,</span><br><span class="line"> <span class="string">"position:fixed;z-index:-1;left:0;top:0;min-width:100vw;min-height:100vh;"</span></span><br><span class="line"> ),</span><br><span class="line"> (e = r.width = <span class="built_in">window</span>.innerWidth),</span><br><span class="line"> (a = r.height = <span class="built_in">window</span>.innerHeight),</span><br><span class="line"> <span class="built_in">document</span>.body.appendChild(r));</span><br><span class="line"> <span class="keyword">var</span> i = r.getContext(<span class="string">"2d"</span>);</span><br><span class="line"> (i.shadowColor = n.shadowColor || <span class="string">"#fff"</span>), (i.shadowBlur = n.blur || <span class="number">4</span>);</span><br><span class="line"> <span class="keyword">var</span> l = i.createLinearGradient(<span class="number">0</span>, <span class="number">0</span>, e, a);</span><br><span class="line"> l.addColorStop(<span class="number">0</span>, n.colorStart || <span class="string">"#2AE"</span>),</span><br><span class="line"> l.addColorStop(<span class="number">1</span>, n.colorStop || <span class="string">"#17B"</span>);</span><br><span class="line"> <span class="keyword">for</span> (</span><br><span class="line"> <span class="keyword">var</span> c = n.bubbles || <span class="built_in">Math</span>.floor(<span class="number">0.02</span> * (e + a)), u = [], d = <span class="number">0</span>;</span><br><span class="line"> d < c;</span><br><span class="line"> d++</span><br><span class="line"> )</span><br><span class="line"> u.push({</span><br><span class="line"> f: (</span><br><span class="line"> n.bubbleFunc ||</span><br><span class="line"> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"hsla(0, 0%, 100%, "</span> + <span class="number">0.1</span> * o() + <span class="string">")"</span>;</span><br><span class="line"> }</span><br><span class="line"> ).call(),</span><br><span class="line"> x: o() * e,</span><br><span class="line"> y: o() * a,</span><br><span class="line"> r: (</span><br><span class="line"> n.radiusFunc ||</span><br><span class="line"> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="number">4</span> + (o() * e) / <span class="number">25</span>;</span><br><span class="line"> }</span><br><span class="line"> ).call(),</span><br><span class="line"> a: (</span><br><span class="line"> n.angleFunc ||</span><br><span class="line"> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> o() * <span class="built_in">Math</span>.PI * <span class="number">2</span>;</span><br><span class="line"> }</span><br><span class="line"> ).call(),</span><br><span class="line"> v: (</span><br><span class="line"> n.velocityFunc ||</span><br><span class="line"> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="number">0.1</span> + <span class="number">0.5</span> * o();</span><br><span class="line"> }</span><br><span class="line"> ).call(),</span><br><span class="line"> });</span><br><span class="line"> !(<span class="function"><span class="keyword">function</span> <span class="title">t</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="literal">null</span> === r.parentNode) <span class="keyword">return</span> cancelAnimationFrame(t);</span><br><span class="line"> !<span class="number">1</span> !== n.animate && requestAnimationFrame(t),</span><br><span class="line"> (i.globalCompositeOperation = <span class="string">"source-over"</span>),</span><br><span class="line"> (i.fillStyle = l),</span><br><span class="line"> i.fillRect(<span class="number">0</span>, <span class="number">0</span>, e, a),</span><br><span class="line"> (i.globalCompositeOperation = n.compose || <span class="string">"lighter"</span>),</span><br><span class="line"> u.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">t</span>) </span>{</span><br><span class="line"> i.beginPath(),</span><br><span class="line"> i.arc(t.x, t.y, t.r, <span class="number">0</span>, <span class="number">2</span> * <span class="built_in">Math</span>.PI),</span><br><span class="line"> (i.fillStyle = t.f),</span><br><span class="line"> i.fill(),</span><br><span class="line"> (t.x += <span class="built_in">Math</span>.cos(t.a) * t.v),</span><br><span class="line"> (t.y += <span class="built_in">Math</span>.sin(t.a) * t.v),</span><br><span class="line"> t.x - t.r > e && (t.x = -t.r),</span><br><span class="line"> t.x + t.r < <span class="number">0</span> && (t.x = e + t.r),</span><br><span class="line"> t.y - t.r > a && (t.y = -t.r),</span><br><span class="line"> t.y + t.r < <span class="number">0</span> && (t.y = a + t.r);</span><br><span class="line"> });</span><br><span class="line"> })();</span><br><span class="line">};</span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details></li></ol><ol start="3"><li>接着在<code>source</code>文件夹下创建<code>bubbly-bg/index.js</code>文件: 内容如下:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"DOMContentLoaded"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="comment">// 这个表示在html加载完成后执行</span></span><br><span class="line"> bubbly({</span><br><span class="line"> colorStart: <span class="string">'#fff4e6'</span>,</span><br><span class="line"> colorStop: <span class="string">'#ffe9e4'</span>,</span><br><span class="line"> blur:<span class="number">1</span>,</span><br><span class="line"> compose: <span class="string">'source-over'</span>,</span><br><span class="line"> bubbleFunc:<span class="function">() =></span> <span class="string">`hsla(<span class="subst">${<span class="built_in">Math</span>.random() * <span class="number">50</span>}</span>, 100%, 50%, .3)`</span></span><br><span class="line"> });</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li>接着在<code>source</code>文件夹下创建<code>bubbly-bg/bubbly.css</code>文件: 内容如下:<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 动态背景--变暗 1最亮，数值越小越暗*/</span></span><br><span class="line"><span class="selector-class">.bubbly-bg-canvas</span> {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.8</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 暗黑模式下 */</span></span><br><span class="line"><span class="selector-class">.darkModel</span> <span class="selector-class">.bubbly-bg-canvas</span> {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.3</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>加css的目的是让这个动态背景变暗</li></ol><p>最后重启服务<code>hexo clean</code> && <code>hexo s</code></p><p>这样动态背景就完成啦，是不是很简单呢。</p><p>当然你还可以更改第三步自己创建的js代码参数，实现不同的动态背景, 具体参数请阅读：</p><div class="tagLink"><a class="link-card" title="动态背景bubbly" href="https://github.com/tipsy/bubbly-bg"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-35dfcd9a852899c04af544542bc5dd04_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-35dfcd9a852899c04af544542bc5dd04_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-35dfcd9a852899c04af544542bc5dd04_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">动态背景bubbly</p><p class="url">https://github.com/tipsy/bubbly-bg</p></div></a></div><p>demo：</p><div class="tagLink"><a class="link-card" title="demo" href="https://tipsy.github.io/bubbly-bg/"><span class="link-card-backdrop" style="background-image: url(https://pic4.zhimg.com/80/v2-ea6cbfd4d87942cfcce27006ee698aa1_1440w.webp)"></span><div class="left"><img src="https://pic4.zhimg.com/80/v2-ea6cbfd4d87942cfcce27006ee698aa1_1440w.webp" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-ea6cbfd4d87942cfcce27006ee698aa1_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">demo</p><p class="url">https://tipsy.github.io/bubbly-bg/</p></div></a></div><p>效果如图所示：<br><img src="/img/bubbly-bg01.png" class="lazyload placeholder" data-srcset="/img/bubbly-bg01.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="动态背景"><br><img src="/img/bubbly-bg2.png" class="lazyload placeholder" data-srcset="/img/bubbly-bg2.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="动态背景"><br><img src="/img/bubbly-bg3.png" class="lazyload placeholder" data-srcset="/img/bubbly-bg3.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="动态背景"><br><img src="/img/bubbly-bg4.png" class="lazyload placeholder" data-srcset="/img/bubbly-bg4.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="动态背景"><br><img src="/img/bubbly-bg5.png" class="lazyload placeholder" data-srcset="/img/bubbly-bg5.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="动态背景"></p><p>假如我把第三步自己创建的js的参数更改如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"DOMContentLoaded"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> bubbly({});</span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure><p>则显示效果如下图所示:<br><img src="/img/bubbly-bg06.png" class="lazyload placeholder" data-srcset="/img/bubbly-bg06.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="动态背景"></p><p>如果喜欢，可以动手试试哦，不需要改源码.</p>]]></content>
<categories>
<category> 动态背景 </category>
</categories>
<tags>
<tag> 动态背景 </tag>
</tags>
</entry>
<entry>
<title>给bamboo添加右上角梅花</title>
<link href="/post/meihua/index/"/>
<url>/post/meihua/index/</url>
<content type="html"><![CDATA[<p>页脚游动的鱼，轮播图底部的波浪 在主题<code>v2.7.5</code>版本已经加到主题里去了</p><p>右上角的梅花特效，首先在<code>source</code>文件夹下创建<code>meihua/index.js</code>文件，文件内容如下</p><details ><summary pointer> 梅花js </summary> <div class='content'> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> encode_version = <span class="string">"sojson.v5"</span>,</span><br><span class="line"> qafcw = <span class="string">"__0x6b909"</span>,</span><br><span class="line"> __0x6b909 = [</span><br><span class="line"> <span class="string">"w6kSRg=="</span>,</span><br><span class="line"> <span class="string">"ED7ChT3DsQ=="</span>,</span><br><span class="line"> <span class="string">"woTDjsOuVQ=="</span>,</span><br><span class="line"> <span class="string">"OhnDmsKLERY9wr7Du8OKfg=="</span>,</span><br><span class="line"> <span class="string">"w6DDssOowrw+wqfCsQ/DocOEU8OK"</span>,</span><br><span class="line"> <span class="string">"woDCl8Klw54="</span>,</span><br><span class="line"> <span class="string">"woJEaWPDmwc="</span>,</span><br><span class="line"> <span class="string">"dQMQCh7CmRkZGTRXw44="</span>,</span><br><span class="line"> <span class="string">"Hx7Dukle"</span>,</span><br><span class="line"> <span class="string">"wovDrMKweRU="</span>,</span><br><span class="line"> <span class="string">"OQrDscKQwqk="</span>,</span><br><span class="line"> <span class="string">"wrXDgsKNUTY="</span>,</span><br><span class="line"> <span class="string">"HcKSw4Id"</span>,</span><br><span class="line"> <span class="string">"wpTCv2rDgsKfH2fDsSc="</span>,</span><br><span class="line"> <span class="string">"NEjDmcOndA=="</span>,</span><br><span class="line"> <span class="string">"OgoNJQHDjRkVF3wEw5gywqIsw7t8w7TCu196ScKidcOQRSI8wpfCicOpw60Sw4LDn8KcwrbCpCowwqdfw7kGwrlnAcKuJMOiwq1Cw7oSwo11EMOcw6fDvcKvEUTCkcKTwp3DhX9Xw6FYwosKwp7DqMOiwrRDw4EJw4Q+XEjDn8OLUXpXQ28pwrrDrcOwwrPDjwlJw53CscK6ScKFwoheO3IpJi46wog="</span>,</span><br><span class="line"> <span class="string">"wqwEwp4o"</span>,</span><br><span class="line"> <span class="string">"C8KYw54QcsKzwp/CkCnCuMOvGsOzBCQ="</span>,</span><br><span class="line"> ];</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">_0xff0fac, _0x54e69d</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> _0x3d8b6b = <span class="function"><span class="keyword">function</span> (<span class="params">_0x5b6f58</span>) </span>{</span><br><span class="line"> <span class="keyword">while</span> (--_0x5b6f58) {</span><br><span class="line"> _0xff0fac[<span class="string">"push"</span>](_0xff0fac[<span class="string">"shift"</span>]());</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> _0x3d8b6b(++_0x54e69d);</span><br><span class="line">})(__0x6b909, <span class="number">0xb1</span>);</span><br><span class="line"><span class="keyword">var</span> _0x44c1 = <span class="function"><span class="keyword">function</span> (<span class="params">_0x2f061c, _0xeeaff2</span>) </span>{</span><br><span class="line"> _0x2f061c = _0x2f061c - <span class="number">0x0</span>;</span><br><span class="line"> <span class="keyword">var</span> _0x189570 = __0x6b909[_0x2f061c];</span><br><span class="line"> <span class="keyword">if</span> (_0x44c1[<span class="string">"initialized"</span>] === <span class="literal">undefined</span>) {</span><br><span class="line"> (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> _0x4bb824 =</span><br><span class="line"> <span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">"undefined"</span></span><br><span class="line"> ? <span class="built_in">window</span></span><br><span class="line"> : <span class="keyword">typeof</span> process === <span class="string">"object"</span> &&</span><br><span class="line"> <span class="keyword">typeof</span> <span class="built_in">require</span> === <span class="string">"function"</span> &&</span><br><span class="line"> <span class="keyword">typeof</span> <span class="built_in">global</span> === <span class="string">"object"</span></span><br><span class="line"> ? <span class="built_in">global</span></span><br><span class="line"> : <span class="built_in">this</span>;</span><br><span class="line"> <span class="keyword">var</span> _0x140280 =</span><br><span class="line"> <span class="string">"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="</span>;</span><br><span class="line"> _0x4bb824[<span class="string">"atob"</span>] ||</span><br><span class="line"> (_0x4bb824[<span class="string">"atob"</span>] = <span class="function"><span class="keyword">function</span> (<span class="params">_0xee5aa8</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> _0x1cd39d = <span class="built_in">String</span>(_0xee5aa8)[<span class="string">"replace"</span>](<span class="regexp">/=+$/</span>, <span class="string">""</span>);</span><br><span class="line"> <span class="keyword">for</span> (</span><br><span class="line"> <span class="keyword">var</span> _0x4bc64f = <span class="number">0x0</span>,</span><br><span class="line"> _0x4c6ea3,</span><br><span class="line"> _0x7c5afe,</span><br><span class="line"> _0x585a23 = <span class="number">0x0</span>,</span><br><span class="line"> _0x43ee63 = <span class="string">""</span>;</span><br><span class="line"> (_0x7c5afe = _0x1cd39d[<span class="string">"charAt"</span>](_0x585a23++));</span><br><span class="line"> ~_0x7c5afe &&</span><br><span class="line"> ((_0x4c6ea3 =</span><br><span class="line"> _0x4bc64f % <span class="number">0x4</span> ? _0x4c6ea3 * <span class="number">0x40</span> + _0x7c5afe : _0x7c5afe),</span><br><span class="line"> _0x4bc64f++ % <span class="number">0x4</span>)</span><br><span class="line"> ? (_0x43ee63 += <span class="built_in">String</span>[<span class="string">"fromCharCode"</span>](</span><br><span class="line"> <span class="number">0xff</span> & (_0x4c6ea3 >> ((-<span class="number">0x2</span> * _0x4bc64f) & <span class="number">0x6</span>))</span><br><span class="line"> ))</span><br><span class="line"> : <span class="number">0x0</span></span><br><span class="line"> ) {</span><br><span class="line"> _0x7c5afe = _0x140280[<span class="string">"indexOf"</span>](_0x7c5afe);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> _0x43ee63;</span><br><span class="line"> });</span><br><span class="line"> })();</span><br><span class="line"> <span class="keyword">var</span> _0x4fb300 = <span class="function"><span class="keyword">function</span> (<span class="params">_0x5cd1f6, _0x413d9c</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> _0x74de7b = [],</span><br><span class="line"> _0x4b6e1e = <span class="number">0x0</span>,</span><br><span class="line"> _0x3cb8f2,</span><br><span class="line"> _0x3556c3 = <span class="string">""</span>,</span><br><span class="line"> _0x23f0ee = <span class="string">""</span>;</span><br><span class="line"> _0x5cd1f6 = atob(_0x5cd1f6);</span><br><span class="line"> <span class="keyword">for</span> (</span><br><span class="line"> <span class="keyword">var</span> _0x3ee9ae = <span class="number">0x0</span>, _0x3cf54e = _0x5cd1f6[<span class="string">"length"</span>];</span><br><span class="line"> _0x3ee9ae < _0x3cf54e;</span><br><span class="line"> _0x3ee9ae++</span><br><span class="line"> ) {</span><br><span class="line"> _0x23f0ee +=</span><br><span class="line"> <span class="string">"%"</span> +</span><br><span class="line"> (<span class="string">"00"</span> + _0x5cd1f6[<span class="string">"charCodeAt"</span>](_0x3ee9ae)[<span class="string">"toString"</span>](<span class="number">0x10</span>))[</span><br><span class="line"> <span class="string">"slice"</span></span><br><span class="line"> ](-<span class="number">0x2</span>);</span><br><span class="line"> }</span><br><span class="line"> _0x5cd1f6 = <span class="built_in">decodeURIComponent</span>(_0x23f0ee);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> _0x3cd09c = <span class="number">0x0</span>; _0x3cd09c < <span class="number">0x100</span>; _0x3cd09c++) {</span><br><span class="line"> _0x74de7b[_0x3cd09c] = _0x3cd09c;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">for</span> (_0x3cd09c = <span class="number">0x0</span>; _0x3cd09c < <span class="number">0x100</span>; _0x3cd09c++) {</span><br><span class="line"> _0x4b6e1e =</span><br><span class="line"> (_0x4b6e1e +</span><br><span class="line"> _0x74de7b[_0x3cd09c] +</span><br><span class="line"> _0x413d9c[<span class="string">"charCodeAt"</span>](_0x3cd09c % _0x413d9c[<span class="string">"length"</span>])) %</span><br><span class="line"> <span class="number">0x100</span>;</span><br><span class="line"> _0x3cb8f2 = _0x74de7b[_0x3cd09c];</span><br><span class="line"> _0x74de7b[_0x3cd09c] = _0x74de7b[_0x4b6e1e];</span><br><span class="line"> _0x74de7b[_0x4b6e1e] = _0x3cb8f2;</span><br><span class="line"> }</span><br><span class="line"> _0x3cd09c = <span class="number">0x0</span>;</span><br><span class="line"> _0x4b6e1e = <span class="number">0x0</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> _0x59a51e = <span class="number">0x0</span>; _0x59a51e < _0x5cd1f6[<span class="string">"length"</span>]; _0x59a51e++) {</span><br><span class="line"> _0x3cd09c = (_0x3cd09c + <span class="number">0x1</span>) % <span class="number">0x100</span>;</span><br><span class="line"> _0x4b6e1e = (_0x4b6e1e + _0x74de7b[_0x3cd09c]) % <span class="number">0x100</span>;</span><br><span class="line"> _0x3cb8f2 = _0x74de7b[_0x3cd09c];</span><br><span class="line"> _0x74de7b[_0x3cd09c] = _0x74de7b[_0x4b6e1e];</span><br><span class="line"> _0x74de7b[_0x4b6e1e] = _0x3cb8f2;</span><br><span class="line"> _0x3556c3 += <span class="built_in">String</span>[<span class="string">"fromCharCode"</span>](</span><br><span class="line"> _0x5cd1f6[<span class="string">"charCodeAt"</span>](_0x59a51e) ^</span><br><span class="line"> _0x74de7b[(_0x74de7b[_0x3cd09c] + _0x74de7b[_0x4b6e1e]) % <span class="number">0x100</span>]</span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> _0x3556c3;</span><br><span class="line"> };</span><br><span class="line"> _0x44c1[<span class="string">"rc4"</span>] = _0x4fb300;</span><br><span class="line"> _0x44c1[<span class="string">"data"</span>] = {};</span><br><span class="line"> _0x44c1[<span class="string">"initialized"</span>] = !![];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> _0x45d974 = _0x44c1[<span class="string">"data"</span>][_0x2f061c];</span><br><span class="line"> <span class="keyword">if</span> (_0x45d974 === <span class="literal">undefined</span>) {</span><br><span class="line"> <span class="keyword">if</span> (_0x44c1[<span class="string">"once"</span>] === <span class="literal">undefined</span>) {</span><br><span class="line"> _0x44c1[<span class="string">"once"</span>] = !![];</span><br><span class="line"> }</span><br><span class="line"> _0x189570 = _0x44c1[<span class="string">"rc4"</span>](_0x189570, _0xeeaff2);</span><br><span class="line"> _0x44c1[<span class="string">"data"</span>][_0x2f061c] = _0x189570;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> _0x189570 = _0x45d974;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> _0x189570;</span><br><span class="line">};</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hanApiMeihua</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> _0x37935d = {</span><br><span class="line"> dzqhN: <span class="string">"div"</span>,</span><br><span class="line"> HDwlC: _0x44c1(<span class="string">"0x0"</span>, <span class="string">"*Y1q"</span>),</span><br><span class="line"> WRSha: _0x44c1(<span class="string">"0x1"</span>, <span class="string">"[r8s"</span>),</span><br><span class="line"> TkMnm: _0x44c1(<span class="string">"0x2"</span>, <span class="string">"dF[H"</span>),</span><br><span class="line"> BQzkt: _0x44c1(<span class="string">"0x3"</span>, <span class="string">"p&Zu"</span>),</span><br><span class="line"> jEpFN: <span class="string">"https://ohan.gitee.io/HanKu/HanJs/HanMeiHua.js"</span>,</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> _0x3e52ed = <span class="built_in">document</span>[<span class="string">"createElement"</span>](_0x37935d[<span class="string">"dzqhN"</span>]);</span><br><span class="line"> _0x3e52ed[<span class="string">"innerHTML"</span>] = _0x37935d[_0x44c1(<span class="string">"0x4"</span>, <span class="string">"bwUb"</span>)];</span><br><span class="line"> <span class="built_in">document</span>[_0x44c1(<span class="string">"0x5"</span>, <span class="string">"p]kJ"</span>)][_0x44c1(<span class="string">"0x6"</span>, <span class="string">"!eqS"</span>)](_0x3e52ed);</span><br><span class="line"> <span class="built_in">document</span>[<span class="string">"body"</span>][_0x44c1(<span class="string">"0x7"</span>, <span class="string">"YKdc"</span>)](</span><br><span class="line"> _0x3e52ed,</span><br><span class="line"> <span class="built_in">document</span>[_0x44c1(<span class="string">"0x8"</span>, <span class="string">"5FyT"</span>)][<span class="string">"firstElementChild"</span>]</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">var</span> _0x59d96e = <span class="built_in">document</span>[<span class="string">"createElement"</span>](_0x44c1(<span class="string">"0x9"</span>, <span class="string">"9DEG"</span>));</span><br><span class="line"> _0x59d96e[_0x44c1(<span class="string">"0xa"</span>, <span class="string">"*Y1q"</span>)](</span><br><span class="line"> _0x37935d[_0x44c1(<span class="string">"0xb"</span>, <span class="string">"fnJ("</span>)],</span><br><span class="line"> _0x37935d[_0x44c1(<span class="string">"0xc"</span>, <span class="string">"0Od6"</span>)]</span><br><span class="line"> );</span><br><span class="line"> _0x59d96e[_0x44c1(<span class="string">"0xa"</span>, <span class="string">"*Y1q"</span>)](</span><br><span class="line"> _0x37935d[_0x44c1(<span class="string">"0xd"</span>, <span class="string">"1c0b"</span>)],</span><br><span class="line"> _0x37935d[_0x44c1(<span class="string">"0xe"</span>, <span class="string">"0Od6"</span>)]</span><br><span class="line"> );</span><br><span class="line"> <span class="built_in">document</span>[_0x44c1(<span class="string">"0xf"</span>, <span class="string">"dF[H"</span>)][<span class="string">"appendChild"</span>](_0x59d96e);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">window</span>[<span class="string">"onload"</span>] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> hanApiMeihua();</span><br><span class="line">};</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"pjax:send"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> ($(<span class="string">".hansApi-snowfall-flakes"</span>).length) {</span><br><span class="line"> $(<span class="string">".hansApi-snowfall-flakes"</span>).remove();</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"pjax:complete"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (!$(<span class="string">".hansApi-snowfall-flakes"</span>).length) {</span><br><span class="line"> hanApiMeihua();</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="keyword">if</span> (</span><br><span class="line"> !(</span><br><span class="line"> <span class="keyword">typeof</span> encode_version !== _0x44c1(<span class="string">"0x10"</span>, <span class="string">"YjES"</span>) &&</span><br><span class="line"> encode_version === <span class="string">"sojson.v5"</span></span><br><span class="line"> )</span><br><span class="line">) {</span><br><span class="line"> <span class="built_in">window</span>[_0x44c1(<span class="string">"0x11"</span>, <span class="string">"f(0D"</span>)](<span class="string">"不能删除sojson.v5"</span>);</span><br><span class="line">}</span><br><span class="line">encode_version = <span class="string">"sojson.v5"</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details><p>这个js里面有很多混淆转译字符，我也是从别人那扒下来的，扒下来就这样，自己稍微改了一点，适配了主题</p><p>js创建好之后，打开主题配置文件<code>_config.yml</code>，找到<code>import</code>，然后这样写</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 自己嵌入css或者script</span></span><br><span class="line"><span class="attr">import:</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="comment"># - <link src"xxx.css"></link></span></span><br><span class="line"> <span class="bullet">-</span> </span><br><span class="line"> <span class="bullet">-</span> </span><br><span class="line"> <span class="attr">script:</span> </span><br><span class="line"> <span class="comment"># - <script src="xxx.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="/meihua/index.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> </span><br><span class="line"></span><br></pre></td></tr></table></figure><p>这样，梅花js就导进去了，至此，梅花就出现在了页面上的右上角</p>]]></content>
<categories>
<category> 梅花 </category>
</categories>
<tags>
<tag> 梅花 </tag>
</tags>
</entry>
<entry>
<title>文章设置topImg</title>
<link href="/post/imgtop/"/>
<url>/post/imgtop/</url>
<content type="html"><![CDATA[<blockquote><p>支持版本为v2.7.0+</p></blockquote><p>在文章中设置<code>imgTop: false</code>，则不显示顶部图片</p><p>如果首页轮播图不想要的话，则在主题<code>config.yml</code>中将<code>swiper.on</code>设置为false即可</p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>新增mermaid</title>
<link href="/post/mermaid/index/"/>
<url>/post/mermaid/index/</url>
<content type="html"><![CDATA[<blockquote><p>支持2.6.5+</p></blockquote><h2 id="事例："><a href="#事例：" class="headerlink" title="事例："></a>事例：</h2><div class="mermaid">pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5</div><div class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D;</div><p>写法：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">{<span class="string">%</span> <span class="string">mermaid</span> <span class="string">%</span>}</span><br><span class="line"><span class="string">pie</span></span><br><span class="line"> <span class="string">title</span> <span class="string">Key</span> <span class="string">elements</span> <span class="string">in</span> <span class="string">Product</span> <span class="string">X</span></span><br><span class="line"> <span class="string">"Calcium"</span> <span class="string">:</span> <span class="number">42.96</span></span><br><span class="line"> <span class="string">"Potassium"</span> <span class="string">:</span> <span class="number">50.05</span></span><br><span class="line"> <span class="string">"Magnesium"</span> <span class="string">:</span> <span class="number">10.01</span></span><br><span class="line"> <span class="string">"Iron"</span> <span class="string">:</span> <span class="number">5</span></span><br><span class="line">{<span class="string">%</span> <span class="string">endmermaid</span> <span class="string">%</span>}</span><br><span class="line"></span><br><span class="line">{<span class="string">%</span> <span class="string">mermaid</span> <span class="string">%</span>}</span><br><span class="line"><span class="string">graph</span> <span class="string">TD;</span></span><br><span class="line"> <span class="string">A-->B;</span></span><br><span class="line"> <span class="string">A-->C;</span></span><br><span class="line"> <span class="string">B-->D;</span></span><br><span class="line"> <span class="string">C-->D;</span></span><br><span class="line">{<span class="string">%</span> <span class="string">endmermaid</span> <span class="string">%</span>}</span><br></pre></td></tr></table></figure><div class="tagLink"><a class="link-card" title="mermaid" href="https://github.com/mermaid-js/mermaid"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">mermaid</p><p class="url">https://github.com/mermaid-js/mermaid</p></div></a></div>]]></content>
<categories>
<category> mermaid </category>
</categories>
<tags>
<tag> mermaid </tag>
</tags>
</entry>
<entry>
<title>新增mathjax</title>
<link href="/post/mathjax/index/"/>
<url>/post/mathjax/index/</url>
<content type="html"><![CDATA[<p>在文章中设置<code>mathjax: true</code>即可</p><blockquote><p>需要v2.6.4+版本</p></blockquote><h2 id="事例："><a href="#事例：" class="headerlink" title="事例："></a>事例：</h2><p>$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$</p><h2 id="写法"><a href="#写法" class="headerlink" title="写法:"></a>写法:</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> mathjax </category>
</categories>
<tags>
<tag> mathjax </tag>
</tags>
</entry>
<entry>
<title>侧边栏</title>
<link href="/post/hexo-theme-bamboo/sidebar/"/>
<url>/post/hexo-theme-bamboo/sidebar/</url>
<content type="html"><![CDATA[<h2 id="默认的侧边栏"><a href="#默认的侧边栏" class="headerlink" title="默认的侧边栏"></a>默认的侧边栏</h2><p>在主题的<code>config.yml</code>文件中配置</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># sidebar侧边栏</span></span><br><span class="line"><span class="attr">sidebar:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">left</span> <span class="comment"># left right</span></span><br><span class="line"> <span class="attr">widget_library:</span></span><br><span class="line"> <span class="attr">side_blogger:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">http://api.btstu.cn/sjtx/api.php?lx=c1&format=images</span></span><br><span class="line"> <span class="attr">shape:</span> <span class="string">rectangle</span> <span class="comment"># circle, rectangle</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/about/</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">青墨书晚风</span></span><br><span class="line"> <span class="attr">subtitle:</span> <span class="string">我是副标题</span></span><br><span class="line"> <span class="attr">jinrishici:</span> <span class="literal">true</span> <span class="comment"># Poetry Today. You can set a string, and it will be displayed when loading fails.</span></span><br><span class="line"> <span class="attr">fontFammily:</span> <span class="string">Long</span> <span class="string">Cang,cursive</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">order:</span> <span class="comment"># 卡片排序, 数值越小，越在上面</span></span><br><span class="line"> <span class="attr">social:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-rss</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/atom.xml</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">mailto:me@xxx.com</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">https://github.com/yuang01/hexo-theme-bamboo</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-qq</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=你的qq号码</span></span><br><span class="line"> <span class="comment"># ---------------------------------------</span></span><br><span class="line"> <span class="comment"># category widget</span></span><br><span class="line"> <span class="attr">side_category:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">order:</span> <span class="comment"># 卡片排序(widget都有)，任意数字，数字小的在上面</span></span><br><span class="line"> <span class="attr">header:</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="comment"># 标题字体颜色</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">文章分类</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/blog/categories/</span></span><br><span class="line"> <span class="comment"># ---------------------------------------</span></span><br><span class="line"> <span class="comment"># tagcloud widget</span></span><br><span class="line"> <span class="attr">side_tagcloud:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">order:</span> </span><br><span class="line"> <span class="attr">header:</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line"> <span class="attr">icon_color:</span> </span><br><span class="line"> <span class="attr">title:</span> <span class="string">热门标签</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/tags/</span></span><br><span class="line"> <span class="attr">min_font:</span> <span class="number">14</span></span><br><span class="line"> <span class="attr">max_font:</span> <span class="number">24</span></span><br><span class="line"> <span class="attr">color:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">start_color:</span> <span class="string">'#999'</span></span><br><span class="line"> <span class="attr">end_color:</span> <span class="string">'#555'</span></span><br><span class="line"> <span class="comment"># ---------------------------------------</span></span><br><span class="line"> <span class="comment"># recent_post widget</span></span><br><span class="line"> <span class="attr">side_recent_post:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">5</span></span><br><span class="line"> <span class="attr">sort:</span> <span class="string">update</span> <span class="comment"># date</span></span><br><span class="line"> <span class="attr">order:</span> </span><br><span class="line"> <span class="attr">header:</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-book</span></span><br><span class="line"> <span class="attr">icon_color:</span> </span><br><span class="line"> <span class="attr">title:</span> <span class="string">最新文章</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">/tags/</span></span><br><span class="line"> <span class="comment"># ---------------------------------------</span></span><br><span class="line"> <span class="comment"># side_archives widget</span></span><br><span class="line"> <span class="attr">side_archives:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">monthly</span> <span class="comment"># yearly or monthly or yearly</span></span><br><span class="line"> <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span> <span class="comment"># eg: YYYY年MM月 or YYYY</span></span><br><span class="line"> <span class="attr">timeOrder:</span> <span class="number">-1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending 时间排序</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line"> <span class="attr">order:</span> <span class="comment"># widget order 卡片排序</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">header:</span> </span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">red</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">归档</span></span><br><span class="line"> <span class="comment"># ---------------------------------------</span></span><br><span class="line"> <span class="comment"># side_webinfo widget</span></span><br><span class="line"> <span class="attr">side_webinfo:</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">order:</span> </span><br><span class="line"> <span class="attr">header:</span> </span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-chart-line</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">站点信息</span></span><br><span class="line"> <span class="attr">type:</span></span><br><span class="line"> <span class="attr">article:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">'文章数目：'</span></span><br><span class="line"> <span class="attr">unit:</span> <span class="string">'篇'</span></span><br><span class="line"> <span class="attr">runtime:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">data:</span> <span class="string">'2020/01/01'</span> <span class="comment"># 填写建站日期</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">'已运行时间：'</span></span><br><span class="line"> <span class="attr">unit:</span> <span class="string">'天'</span></span><br><span class="line"> <span class="attr">wordcount:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">'本站总字数：'</span> <span class="comment"># 需要启用 wordcount</span></span><br><span class="line"> <span class="attr">unit:</span> <span class="string">'字'</span></span><br><span class="line"> <span class="attr">visitcounter:</span></span><br><span class="line"> <span class="attr">service:</span> <span class="string">busuanzi</span> <span class="comment"># only busuanzi</span></span><br><span class="line"> <span class="attr">siteuv:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">'本站访客数：'</span></span><br><span class="line"> <span class="attr">unit:</span> <span class="string">'人'</span></span><br><span class="line"> <span class="attr">sitepv:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">'本站总访问量：'</span></span><br><span class="line"> <span class="attr">unit:</span> <span class="string">'次'</span></span><br><span class="line"> <span class="attr">lastupd:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">friendlyShow:</span> <span class="literal">true</span> <span class="comment"># 更友好的时间显示</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">'最后活动时间：'</span></span><br><span class="line"> <span class="attr">unit:</span> <span class="string">'日'</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="widget-排序"><a href="#widget-排序" class="headerlink" title="widget 排序"></a>widget 排序</h2><p>只需要配置 <code>order</code>就行。（使用了 Flex 佈局的 order 屬性)，值越小越靠前(靠上)</p><h2 id="自定义侧边栏"><a href="#自定义侧边栏" class="headerlink" title="自定义侧边栏"></a>自定义侧边栏</h2><h3 id="创建-widget-yml"><a href="#创建-widget-yml" class="headerlink" title="创建 widget.yml"></a>创建 widget.yml</h3><p>在Hexo博客目錄中的<code>source/_data</code>（如果沒有 _data 文件夾，请自行创建），創建一個文件 <code>widget.yml</code></p><h3 id="格式"><a href="#格式" class="headerlink" title="格式"></a>格式</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># widget_library 里面的不会出现在sticky区域，也就是不会粘贴在左侧 </span></span><br><span class="line"><span class="attr">widget_library:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">test_a</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">test_a</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">0</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">这个widget不会粘贴</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-weibo</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'haha'</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># widget_library_sticky 里面的会出现在sticky区域，会粘贴在左侧</span></span><br><span class="line"><span class="attr">widget_library_sticky:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">testWidget</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">testWidget</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">微博热搜</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-weibo</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'xixi'</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># home_widget里面的内容会出现在座右铭那一个栏目里面</span></span><br><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">welcome</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">welcome</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">欢迎</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'针不戳'</span></span><br></pre></td></tr></table></figure><h3 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h3><table><thead><tr><th>参数</th><th>解释</th></tr></thead><tbody><tr><td>class_name</td><td>所创建的 widget 父类 class 名</td></tr><tr><td>id_name</td><td>所创建的 widget 父类 id 名</td></tr><tr><td>order</td><td>所创建的 widget 排序 （可选）</td></tr><tr><td>name</td><td>所创建的 widget 名称</td></tr><tr><td>icon</td><td>所创建的 widget 头部的字体图标</td></tr><tr><td>icon_color</td><td>所创建的 widget 头部的字体图标的颜色</td></tr><tr><td>url</td><td>所创建的 widget 头部点击跳转的链接</td></tr><tr><td>background</td><td>所创建的 widget 的背景颜色</td></tr><tr><td>html</td><td>所创建的 widget 的相关代码</td></tr></tbody></table><p><img src="https://img13.360buyimg.com/ddimg/jfs/t1/107680/18/15213/224894/6152abeaEce548e69/07ad3d88aa190531.png" class="lazyload placeholder" data-srcset="https://img13.360buyimg.com/ddimg/jfs/t1/107680/18/15213/224894/6152abeaEce548e69/07ad3d88aa190531.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="结构"></p><p>生成的代码为</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"widget test_a"</span> <span class="attr">id</span>=<span class="string">"test_a"</span> <span class="attr">style</span>=<span class="string">"order: 0;background: #fff"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #d63130"</span> <span class="attr">target</span>=<span class="string">"_blank"</span> <span class="attr">rel</span>=<span class="string">"noopener"</span> <span class="attr">href</span>=<span class="string">"http://baidu.com"</span> <span class="attr">data-pjax-state</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fab fa-weibo fa-fw"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>></span><span class="tag"></<span class="name">i</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"name"</span>></span>这个widget不会粘贴<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span>></span></span><br><span class="line"> haha</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><p>如果你需要对添加的 widget 进行 UI 调整，请自行添加 css 到 inject 去。</p><h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><h4 id="首页添加github日历"><a href="#首页添加github日历" class="headerlink" title="首页添加github日历"></a>首页添加github日历</h4><p>例如我在``里添加一个github日历，首先我在<code>source</code>文件夹下创建一个js文件<code>/githubcalendar/index.js</code>, js代码如下:</p><details ><summary pointer> github日历js </summary> <div class='content'> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> github_canlendar = <span class="function">(<span class="params">git_user, git_color</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> git_githubapiurl = <span class="string">"https://python-github-calendar-api.vercel.app/api?"</span> + git_user;</span><br><span class="line"> <span class="keyword">var</span> git_fixed = <span class="string">'fixed'</span>;</span><br><span class="line"> <span class="keyword">var</span> git_px = <span class="string">'px'</span>;</span><br><span class="line"> <span class="keyword">var</span> git_month = [<span class="string">'一月'</span>, <span class="string">'二月'</span>, <span class="string">'三月'</span>, <span class="string">'四月'</span>, <span class="string">'五月'</span>, <span class="string">'六月'</span>, <span class="string">'七月'</span>, <span class="string">'八月'</span>, <span class="string">'九月'</span>, <span class="string">'十月'</span>, <span class="string">'十一月'</span>, <span class="string">'十二月'</span>];</span><br><span class="line"> <span class="keyword">var</span> git_monthchange = [];</span><br><span class="line"> <span class="keyword">var</span> git_oneyearbeforeday = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_thisday = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_amonthago = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_aweekago = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_weekdatacore = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_datacore = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_total = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_datadate = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_git_data = [];</span><br><span class="line"> <span class="keyword">var</span> git_positionplusdata = [];</span><br><span class="line"> <span class="keyword">var</span> git_firstweek = [];</span><br><span class="line"> <span class="keyword">var</span> git_lastweek = [];</span><br><span class="line"> <span class="keyword">var</span> git_beforeweek = [];</span><br><span class="line"> <span class="keyword">var</span> git_thisweekdatacore = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_mounthbeforeday = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_mounthfirstindex = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_crispedges = <span class="string">'crispedges'</span>;</span><br><span class="line"> <span class="keyword">var</span> git_thisdayindex = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_amonthagoindex = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> git_amonthagoweek = [];</span><br><span class="line"> <span class="keyword">var</span> git_firstdate = [];</span><br><span class="line"> <span class="keyword">var</span> git_first2date = [];</span><br><span class="line"> <span class="keyword">var</span> git_montharrbefore = [];</span><br><span class="line"> <span class="keyword">var</span> git_monthindex = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> retinaCanvas = <span class="function">(<span class="params">canvas, context, ratio</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (ratio > <span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">var</span> canvasWidth = canvas.width;</span><br><span class="line"> <span class="keyword">var</span> canvasHeight = canvas.height;</span><br><span class="line"> canvas.width = canvasWidth * ratio;</span><br><span class="line"> canvas.height = canvasHeight * ratio;</span><br><span class="line"> canvas.style.width = <span class="string">'100%'</span>;</span><br><span class="line"> canvas.style.height = canvasHeight + <span class="string">'px'</span>;</span><br><span class="line"> context.scale(ratio, ratio);</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">responsiveChart</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> ratio = <span class="built_in">window</span>.devicePixelRatio || <span class="number">1</span></span><br><span class="line"> <span class="keyword">var</span> git_tooltip_container = <span class="built_in">document</span>.getElementById(<span class="string">'git_tooltip_container'</span>);</span><br><span class="line"> <span class="keyword">var</span> git_x = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_y = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_span1 = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> git_span2 = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> c = <span class="built_in">document</span>.getElementById(<span class="string">"gitcanvas"</span>);</span><br><span class="line"> c.style.width = <span class="string">'100%'</span>;</span><br><span class="line"> c.style.height = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> cmessage = <span class="built_in">document</span>.getElementById(<span class="string">"gitmessage"</span>);</span><br><span class="line"> <span class="keyword">var</span> ctx = c.getContext(<span class="string">"2d"</span>);</span><br><span class="line"> width = c.width = <span class="built_in">document</span>.getElementById(<span class="string">"gitcalendarcanvasbox"</span>).offsetWidth;</span><br><span class="line"> height = c.height = <span class="number">9</span> * <span class="number">0.96</span> * c.width / git_data.length;</span><br><span class="line"> retinaCanvas(c,ctx, ratio)</span><br><span class="line"> <span class="keyword">var</span> linemaxwitdh = height/ <span class="number">9</span>;</span><br><span class="line"> <span class="keyword">var</span> lineminwitdh = <span class="number">0.8</span> * linemaxwitdh;</span><br><span class="line"> <span class="keyword">var</span> setposition = {<span class="attr">x</span>: <span class="number">0.02</span> * width, <span class="attr">y</span>: <span class="number">0.025</span> * width};</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> week <span class="keyword">in</span> git_data) {</span><br><span class="line"> weekdata = git_data[week];</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> day <span class="keyword">in</span> weekdata) {</span><br><span class="line"> <span class="keyword">var</span> dataitem = {<span class="attr">date</span>: <span class="string">""</span>, <span class="attr">count</span>: <span class="string">""</span>, <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span>};</span><br><span class="line"> git_positionplusdata.push(dataitem);</span><br><span class="line"> ctx.fillStyle = git_thiscolor(git_color, weekdata[day].count);</span><br><span class="line"> setposition.y = <span class="built_in">Math</span>.round(setposition.y * <span class="number">100</span>) / <span class="number">100</span>;</span><br><span class="line"> dataitem.date = weekdata[day].date;</span><br><span class="line"> dataitem.count = weekdata[day].count;</span><br><span class="line"> dataitem.x = setposition.x;</span><br><span class="line"> dataitem.y = setposition.y;</span><br><span class="line"> ctx.fillRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh);</span><br><span class="line"> setposition.y = setposition.y + linemaxwitdh</span><br><span class="line"> }</span><br><span class="line"> setposition.y = <span class="number">0.025</span> * width;</span><br><span class="line"> setposition.x = setposition.x + linemaxwitdh</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.body.clientWidth > <span class="number">700</span>) {</span><br><span class="line"> ctx.font = <span class="string">"600 Arial"</span>;</span><br><span class="line"> ctx.fillStyle = <span class="string">'#aaa'</span>;</span><br><span class="line"> ctx.fillText(<span class="string">"日"</span>, <span class="number">0</span>, <span class="number">1.9</span> * linemaxwitdh);</span><br><span class="line"> ctx.fillText(<span class="string">"二"</span>, <span class="number">0</span>, <span class="number">3.9</span> * linemaxwitdh);</span><br><span class="line"> ctx.fillText(<span class="string">"四"</span>, <span class="number">0</span>, <span class="number">5.9</span> * linemaxwitdh);</span><br><span class="line"> ctx.fillText(<span class="string">"六"</span>, <span class="number">0</span>, <span class="number">7.9</span> * linemaxwitdh);</span><br><span class="line"> <span class="keyword">var</span> monthindexlist = width / <span class="number">24</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> index <span class="keyword">in</span> git_monthchange) {</span><br><span class="line"> ctx.fillText(git_monthchange[index], monthindexlist, <span class="number">0.7</span> * linemaxwitdh);</span><br><span class="line"> monthindexlist = monthindexlist + width / <span class="number">12</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> c.onmousemove = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.querySelector(<span class="string">'.gitmessage'</span>)) {</span><br><span class="line"> git_tooltip_container.innerHTML = <span class="string">""</span></span><br><span class="line"> }</span><br><span class="line"> getMousePos(c, event)</span><br><span class="line"> };</span><br><span class="line"> git_tooltip_container.onmousemove = <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.querySelector(<span class="string">'.gitmessage'</span>)) {</span><br><span class="line"> git_tooltip_container.innerHTML = <span class="string">""</span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">getMousePos</span>(<span class="params">canvas, event</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> rect = canvas.getBoundingClientRect();</span><br><span class="line"> <span class="keyword">var</span> x = event.clientX - rect.left * (canvas.width / rect.width);</span><br><span class="line"> <span class="keyword">var</span> y = event.clientY - rect.top * (canvas.height / rect.height);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> item <span class="keyword">of</span> git_positionplusdata) {</span><br><span class="line"> <span class="keyword">var</span> lenthx = x - item.x;</span><br><span class="line"> <span class="keyword">var</span> lenthy = y - item.y;</span><br><span class="line"> <span class="keyword">if</span> (<span class="number">0</span> < lenthx && lenthx < lineminwitdh) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="number">0</span> < lenthy && lenthy < lineminwitdh) {</span><br><span class="line"> git_span1 = item.date;</span><br><span class="line"> git_span2 = item.count;</span><br><span class="line"> git_x = event.clientX - <span class="number">100</span>;</span><br><span class="line"> git_y = event.clientY - <span class="number">60</span>;</span><br><span class="line"> html = tooltip_html(git_x, git_y, git_span1, git_span2);</span><br><span class="line"> append_div_gitcalendar(git_tooltip_container, html)</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><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">addlastmonth</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (git_thisdayindex === <span class="number">0</span>) {</span><br><span class="line"> thisweekcore(<span class="number">52</span>);</span><br><span class="line"> thisweekcore(<span class="number">51</span>);</span><br><span class="line"> thisweekcore(<span class="number">50</span>);</span><br><span class="line"> thisweekcore(<span class="number">49</span>);</span><br><span class="line"> thisweekcore(<span class="number">48</span>);</span><br><span class="line"> git_thisweekdatacore += git_firstdate[<span class="number">6</span>].count;</span><br><span class="line"> git_amonthago = git_firstdate[<span class="number">6</span>].date</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> thisweekcore(<span class="number">52</span>);</span><br><span class="line"> thisweekcore(<span class="number">51</span>);</span><br><span class="line"> thisweekcore(<span class="number">50</span>);</span><br><span class="line"> thisweekcore(<span class="number">49</span>);</span><br><span class="line"> thisweek2core();</span><br><span class="line"> git_amonthago = git_first2date[git_thisdayindex - <span class="number">1</span>].date</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">thisweek2core</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = git_thisdayindex - <span class="number">1</span>; i < git_first2date.length; i++) {</span><br><span class="line"> git_thisweekdatacore += git_first2date[i].count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">thisweekcore</span>(<span class="params">index</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> item <span class="keyword">of</span> git_data[index]) {</span><br><span class="line"> git_thisweekdatacore += item.count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">addlastweek</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> item <span class="keyword">of</span> git_lastweek) {</span><br><span class="line"> git_weekdatacore += item.count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">addbeforeweek</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = git_thisdayindex; i < git_beforeweek.length; i++) {</span><br><span class="line"> git_weekdatacore += git_beforeweek[i].count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">addweek</span>(<span class="params">data</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (git_thisdayindex === <span class="number">6</span>) {</span><br><span class="line"> git_aweekago = git_lastweek[<span class="number">0</span>].date;</span><br><span class="line"> addlastweek()</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> lastweek = data.contributions[<span class="number">51</span>];</span><br><span class="line"> git_aweekago = lastweek[git_thisdayindex + <span class="number">1</span>].date;</span><br><span class="line"> addlastweek();</span><br><span class="line"> addbeforeweek()</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> fetch(git_githubapiurl).then(<span class="function"><span class="params">data</span> =></span> data.json()).then(<span class="function"><span class="params">data</span> =></span> {</span><br><span class="line"> git_data = data.contributions;</span><br><span class="line"> git_total = data.total;</span><br><span class="line"> git_first2date = git_data[<span class="number">48</span>];</span><br><span class="line"> git_firstdate = git_data[<span class="number">47</span>];</span><br><span class="line"> git_firstweek = data.contributions[<span class="number">0</span>];</span><br><span class="line"> git_lastweek = data.contributions[<span class="number">52</span>];</span><br><span class="line"> git_beforeweek = data.contributions[<span class="number">51</span>];</span><br><span class="line"> git_thisdayindex = git_lastweek.length - <span class="number">1</span>;</span><br><span class="line"> git_thisday = git_lastweek[git_thisdayindex].date;</span><br><span class="line"> git_oneyearbeforeday = git_firstweek[<span class="number">0</span>].date;</span><br><span class="line"> git_monthindex = git_thisday.substring(<span class="number">5</span>, <span class="number">7</span>) * <span class="number">1</span>;</span><br><span class="line"> git_montharrbefore = git_month.splice(git_monthindex, <span class="number">12</span> - git_monthindex);</span><br><span class="line"> git_monthchange = git_montharrbefore.concat(git_month);</span><br><span class="line"> addweek(data);</span><br><span class="line"> addlastmonth();</span><br><span class="line"> <span class="keyword">var</span> html = github_main_box(git_monthchange, git_data, git_user, git_color, git_total, git_thisweekdatacore, git_weekdatacore, git_oneyearbeforeday, git_thisday, git_aweekago, git_amonthago);</span><br><span class="line"> append_div_gitcalendar(github_container, html);</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">document</span>.getElementById(<span class="string">'github_loading'</span>)){</span><br><span class="line"> <span class="built_in">document</span>.getElementById(<span class="string">'github_loading'</span>).remove()};</span><br><span class="line"> responsiveChart()</span><br><span class="line"> }).catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(error)</span><br><span class="line"> });</span><br><span class="line"> <span class="built_in">window</span>.addEventListener(<span class="string">'resize'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.getElementById(<span class="string">'gitcanvas'</span>)) {</span><br><span class="line"> responsiveChart()</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">window</span>.addEventListener(<span class="string">'scroll'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.querySelector(<span class="string">'.gitmessage'</span>)) {</span><br><span class="line"> git_tooltip_container.innerHTML = <span class="string">""</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">var</span> git_thiscolor = <span class="function">(<span class="params">color, x</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (x === <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">var</span> i = <span class="built_in">parseInt</span>(x / <span class="number">2</span>);</span><br><span class="line"> <span class="keyword">return</span> color[<span class="number">0</span>]</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (x < <span class="number">2</span>) {</span><br><span class="line"> <span class="keyword">return</span> color[<span class="number">1</span>]</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (x < <span class="number">20</span>) {</span><br><span class="line"> <span class="keyword">var</span> i = <span class="built_in">parseInt</span>(x / <span class="number">2</span>);</span><br><span class="line"> <span class="keyword">return</span> color[i]</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> color[<span class="number">9</span>]</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> tooltip_html = <span class="function">(<span class="params">x, y, span1, span2</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> html = <span class="string">''</span>;</span><br><span class="line"> html += <span class="string">'<div class="gitmessage" style="top:'</span> + y + <span class="string">'px;left:'</span> + x + <span class="string">'px;position: fixed;z-index:9999"><div class="angle-wrapper" style="display:block;"><span>'</span> + span1 + <span class="string">'&nbsp;</span><span>'</span> + span2 + <span class="string">' 次上传</span></div></div>'</span>;</span><br><span class="line"> <span class="keyword">return</span> html</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> github_canvas_box = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">var</span> html = <span class="string">'<div id="gitcalendarcanvasbox"> <canvas id="gitcanvas" style="animation: none;"></canvas></div>'</span>;</span><br><span class="line"> <span class="keyword">return</span> html</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> github_info_box = <span class="function">(<span class="params">user, color</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> html = <span class="string">''</span>;</span><br><span class="line"> html += <span class="string">'<div id="git_tooltip_container"></div><div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1"><div class="float-left text-gray">数据来源 <a href="https://github.com/'</span> + user + <span class="string">'" target="blank">@'</span> + user + <span class="string">'</a></div><div class="contrib-legend text-gray">Less <ul class="legend"><li style="background-color:'</span> + color[<span class="number">0</span>] + <span class="string">'"></li><li style="background-color:'</span> + color[<span class="number">2</span>] + <span class="string">'"></li><li style="background-color:'</span> + color[<span class="number">4</span>] + <span class="string">'"></li><li style="background-color:'</span> + color[<span class="number">6</span>] + <span class="string">'"></li><li style="background-color:'</span> + color[<span class="number">8</span>] + <span class="string">'"></li></ul>More </div></div>'</span>;</span><br><span class="line"> <span class="keyword">return</span> html</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> github_main_box = <span class="function">(<span class="params">monthchange, git_data, user, color, total, thisweekdatacore, weekdatacore, oneyearbeforeday, thisday, aweekago, amonthago</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> html = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">var</span> canvasbox = github_canvas_box();</span><br><span class="line"> <span class="keyword">var</span> infobox = github_info_box(user, color);</span><br><span class="line"> <span class="keyword">var</span> style = github_main_style();</span><br><span class="line"> html += <span class="string">'<div class="position-relative"><div class="border py-2 graph-before-activity-overview"><div class="js-gitcalendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas gitcalendar-graph height-full text-center">'</span> + canvasbox + <span class="string">'</div>'</span> + infobox + <span class="string">'</div></div>'</span>;</span><br><span class="line"> html += <span class="string">'<div style="display:flex;width:100%"><div class="contrib-column contrib-column-first table-column"><span class="text-muted">过去一年提交</span><span class="contrib-number">'</span> + total + <span class="string">'</span><span class="text-muted">'</span> + oneyearbeforeday + <span class="string">'&nbsp;-&nbsp;'</span> + thisday + <span class="string">'</span></div><div class="contrib-column table-column"><span class="text-muted">最近一月提交</span><span class="contrib-number">'</span> + thisweekdatacore + <span class="string">'</span><span class="text-muted">'</span> + amonthago + <span class="string">'&nbsp;-&nbsp;'</span> + thisday + <span class="string">'</span></div><div class="contrib-column table-column"><span class="text-muted">最近一周提交</span><span class="contrib-number">'</span> + weekdatacore + <span class="string">'</span><span class="text-muted">'</span> + aweekago + <span class="string">'&nbsp;-&nbsp;'</span> + thisday + <span class="string">'</span></div></div>'</span> + style;</span><br><span class="line"> <span class="keyword">return</span> html</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">var</span> github_main_style = <span class="function">() =></span> {</span><br><span class="line"> style = <span class="string">'<style>#github_container{text-align:center;margin:0 auto;width:100%;display:flex;display:-webkit-flex;justify-content:center;align-items:center;flex-wrap:wrap;}.gitcalendar-graph text.wday,.gitcalendar-graph text.month{font-size:10px;fill:#aaa;}.contrib-legend{text-align:right;padding:0 14px 10px 0;display:inline-block;float:right;}.contrib-legend .legend{display:inline-block;list-style:none;margin:0 5px;position:relative;bottom:-1px;padding:0;}.contrib-legend .legend li{display:inline-block;width:10px;height:10px;}.text-small{font-size:12px;color:#767676;}.gitcalendar-graph{padding:15px 0 0;text-align:center;}.contrib-column{text-align:center;border-left:1px solid #ddd;border-top:1px solid #ddd;font-size:11px;}.contrib-column-first{border-left:0;}.table-column{padding:10px;display:table-cell;flex:1;vertical-align:top;}.contrib-number{font-weight:300;line-height:1.3em;font-size:24px;display:block;}.gitcalendar img.spinner{width:70px;margin-top:50px;min-height:70px;}.monospace{text-align:center;color:#000;font-family:monospace;}.monospace a{color:#1D75AB;text-decoration:none;}.contrib-footer{font-size:11px;padding:0 10px 12px;text-align:left;width:100%;box-sizing:border-box;height:26px;}.left.text-muted{float:left;margin-left:9px;color:#767676;}.left.text-muted a{color:#4078c0;text-decoration:none;}.left.text-muted a:hover,.monospace a:hover{text-decoration:underline;}h2.f4.text-normal.mb-3{display:none;}.float-left.text-gray{float:left;}#user-activity-overview{display:none;}.day-tooltip{white-space:nowrap;position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.85);border-radius:3px;display:none;pointer-events:none;}.day-tooltip strong{color:#dfe2e5;}.day-tooltip.is-visible{display:block;}.day-tooltip:after{position:absolute;bottom:-10px;left:50%;width:5px;height:5px;box-sizing:border-box;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.85)}.position-relative{width:100%;}@media screen and (max-width:650px){.contrib-column{display:none}}.angle-wrapper{z-index:9999;display:inline;width:200px;height:40px;position:relative;padding:5px 0;background:rgba(0,0,0,0.8);border-radius:8px;text-align:center;color:white;}.angle-box{position:fixed;padding:10px}.angle-wrapper span{padding-bottom:1em;}.angle-wrapper:before{content:"";width:0;height:0;border:10px solid transparent;border-top-color:rgba(0,0,0,0.8);position:absolute;left:47.5%;top:100%;}</style>'</span>;</span><br><span class="line"> <span class="keyword">return</span> style</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> append_div_gitcalendar = <span class="function">(<span class="params">parent, text</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> text === <span class="string">'string'</span>) {</span><br><span class="line"> <span class="keyword">var</span> temp = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>);</span><br><span class="line"> temp.innerHTML = text;</span><br><span class="line"> <span class="keyword">var</span> frag = <span class="built_in">document</span>.createDocumentFragment();</span><br><span class="line"> <span class="keyword">while</span> (temp.firstChild) {</span><br><span class="line"> frag.appendChild(temp.firstChild)</span><br><span class="line"> }</span><br><span class="line"> parent.appendChild(frag)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> parent.appendChild(text)</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> loading_git = <span class="function">(<span class="params">color</span>) =></span> {</span><br><span class="line"> loading = <span class="string">'<div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="'</span> + color + <span class="string">'" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div>'</span>;</span><br><span class="line"> <span class="keyword">return</span> loading</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> git_user = <span class="string">'yuang01'</span>;</span><br><span class="line"> <span class="keyword">var</span> github_container = <span class="built_in">document</span>.getElementById(<span class="string">'github_container'</span>);</span><br><span class="line"> <span class="keyword">var</span> github_loading = <span class="built_in">document</span>.getElementById(<span class="string">'github_loading'</span>);</span><br><span class="line"> <span class="keyword">var</span> git_purple = [<span class="string">'#ebedf0'</span>, <span class="string">'#fdcdec'</span>, <span class="string">'#fc9bd9'</span>, <span class="string">'#fa6ac5'</span>, <span class="string">'#f838b2'</span>, <span class="string">'#f5089f'</span>, <span class="string">'#c4067e'</span>, <span class="string">'#92055e'</span>, <span class="string">'#540336'</span>, <span class="string">'#48022f'</span>, <span class="string">'#30021f'</span>,];</span><br><span class="line"> <span class="keyword">var</span> git_green = [<span class="string">'#ebedf0'</span>, <span class="string">'#f0fff4'</span>, <span class="string">'#dcffe4'</span>, <span class="string">'#bef5cb'</span>, <span class="string">'#85e89d'</span>, <span class="string">'#34d058'</span>, <span class="string">'#28a745'</span>, <span class="string">'#22863a'</span>, <span class="string">'#176f2c'</span>, <span class="string">'#165c26'</span>, <span class="string">'#144620'</span>];</span><br><span class="line"> <span class="keyword">var</span> git_blue = [<span class="string">'#ebedf0'</span>, <span class="string">'#f1f8ff'</span>, <span class="string">'#dbedff'</span>, <span class="string">'#c8e1ff'</span>, <span class="string">'#79b8ff'</span>, <span class="string">'#2188ff'</span>, <span class="string">'#0366d6'</span>, <span class="string">'#005cc5'</span>, <span class="string">'#044289'</span>, <span class="string">'#032f62'</span>, <span class="string">'#05264c'</span>,];</span><br><span class="line"> <span class="keyword">var</span> git_color = git_green;</span><br><span class="line"> <span class="keyword">if</span> (github_container) {</span><br><span class="line"> append_div_gitcalendar(github_container, loading_git(git_color[<span class="number">4</span>]));</span><br><span class="line"> github_canlendar(git_user, git_color)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'nonono'</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></pre></td></tr></table></figure> </div> </details><p>将 <code>272</code>行的<code>git_user</code>改为你自己的用户名<br>然后在 自定义侧边栏的<code>home_widget</code>中写入以下内容:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">my_github_container</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">my_github_container</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">测试日历</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="github_container"></div></span></span><br><span class="line"><span class="string"> <script defer data-pjax src="/githubcalendar/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><p>然后就会在首页出现github日历图<br><img src="https://img13.360buyimg.com/ddimg/jfs/t1/209326/24/2496/37863/6152b6d3E7762f687/3438ceef175cbc59.png" class="lazyload placeholder" data-srcset="https://img13.360buyimg.com/ddimg/jfs/t1/209326/24/2496/37863/6152b6d3E7762f687/3438ceef175cbc59.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="github日历图"></p><h3 id="添加IP签名档"><a href="#添加IP签名档" class="headerlink" title="添加IP签名档"></a>添加IP签名档</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">welcome</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">welcome</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">欢迎</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'<img src="https://api.amogu.cn/api/ipimg/" style="width:100%">'</span></span><br></pre></td></tr></table></figure><p><img src="https://img11.360buyimg.com/ddimg/jfs/t1/209759/11/2601/1358816/6152bb30E44fe6be5/96861371c579252e.png" class="lazyload placeholder" data-srcset="https://img11.360buyimg.com/ddimg/jfs/t1/209759/11/2601/1358816/6152bb30E44fe6be5/96861371c579252e.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="IP签名档"></p><h3 id="添加轮播图"><a href="#添加轮播图" class="headerlink" title="添加轮播图"></a>添加轮播图</h3><p>同样在<code>source</code>文件夹下创建<code>mySwiper/index.js</code>和<code>mySwiper/index.css</code>文件，然后创建<code>mySwiper/img</code>文件夹，用于存放图片，轮播图嘛，肯定要图片。</p><details ><summary pointer> mySwiper/index.js </summary> <div class='content'> <p>js用vue写的，因为主题已经引入了vue版本的swiper轮播图插件, 当然你也可以引入jquery插件，用jquery来写，都可以的。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/</span></span><br><span class="line"><span class="comment">// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">"#mySwiper"</span>,</span><br><span class="line"> data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> swiperOption: {</span><br><span class="line"> direction: <span class="string">"vertical"</span>, <span class="comment">// 这个是竖着的</span></span><br><span class="line"> slidesPerView: <span class="number">1</span>,</span><br><span class="line"> spaceBetween: <span class="number">30</span>,</span><br><span class="line"> mousewheel: <span class="literal">true</span>,</span><br><span class="line"> <span class="comment">// 注释上面的四个，则水平方向轮播</span></span><br><span class="line"> pagination: {</span><br><span class="line"> el: <span class="string">".swiper-pagination"</span>,</span><br><span class="line"> clickable: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 注释掉上面这个，则不显示小点点</span></span><br><span class="line"> loop: <span class="literal">true</span>, <span class="comment">// 循环</span></span><br><span class="line"> autoplay: {</span><br><span class="line"> delay: <span class="number">2500</span>,</span><br><span class="line"> disableOnInteraction: <span class="literal">false</span>,</span><br><span class="line"> }, <span class="comment">// 自动播放,注释掉则不自动播放</span></span><br><span class="line"> on: {</span><br><span class="line"> init: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> swiperAnimateCache(<span class="built_in">this</span>); <span class="comment">//隐藏动画元素</span></span><br><span class="line"> swiperAnimate(<span class="built_in">this</span>); <span class="comment">//初始化完成开始动画</span></span><br><span class="line"> },</span><br><span class="line"> slideChangeTransitionEnd: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> swiperAnimate(<span class="built_in">this</span>); <span class="comment">//每个slide切换结束时也运行当前slide动画</span></span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// or data-swiper-parallax="-100"</span></span><br><span class="line"> <span class="comment">// 上面是文字动画效果，注释则取消文字动画，动画效果参见 https://www.swiper.com.cn/usage/animate/index.html</span></span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> computed: {</span><br><span class="line"> <span class="function"><span class="title">swiper</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.$refs.myswiper.$swiper;</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> <span class="comment">// 鼠标移入停止轮播</span></span><br><span class="line"> <span class="function"><span class="title">stopAutoPlay</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.swiperOption.autoplay && <span class="built_in">this</span>.swiper.autoplay.stop();</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 鼠标移出开始轮播</span></span><br><span class="line"> <span class="function"><span class="title">startAutoPlay</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.swiperOption.autoplay && <span class="built_in">this</span>.swiper.autoplay.start();</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details><details ><summary pointer> mySwiper/index.css </summary> <div class='content'> <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="selector-class">.myswiper</span> <span class="selector-class">.swiper-slide</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.myswiper</span> <span class="selector-class">.swiper-slide</span> <span class="selector-tag">p</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50px</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">9999</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-class">.myswiper</span> <span class="selector-class">.swiper-slide</span> <span class="selector-tag">a</span><span class="selector-class">.toPath</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</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-class">.myswiper</span> <span class="selector-class">.swiper-slide</span> <span class="selector-tag">h2</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">10px</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">9999</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.myswiper</span> <span class="selector-class">.swiper-slide</span> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.8</span>); <span class="comment">/* 图片变暗 ,字体看得清 */</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.myswiper</span><span class="selector-class">.swiper-container-vertical</span> <span class="selector-class">.swiper-pagination-bullet-active</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 暗黑模式样式在 .darkModel { } 类下 */</span></span><br><span class="line"><span class="comment">/* 例如 </span></span><br><span class="line"><span class="comment"> .darkModel .aaa {</span></span><br><span class="line"><span class="comment"> color: #c9d1d9;</span></span><br><span class="line"><span class="comment"> }</span></span><br><span class="line"><span class="comment">} */</span></span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details><p>最后在自定义侧边栏的<code>home_widget</code>写上</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">test2_swiper</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">test2_swiper</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">测试轮播图</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="mySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()"></span></span><br><span class="line"><span class="string"> <swiper class="myswiper" ref="myswiper" style="height:350px;" :options="swiperOption"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/2.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述哦</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/3.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题2</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述2</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/4.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题3</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述3</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/5.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题4</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述4</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://api.dujin.org/pic/ghibli/" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题5</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述5</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/7.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题6</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述6</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <!-- 如果你想继续增加轮播图，继续在下面写<swiper-slide>我是内容</swiper-slide>就行了 --></span></span><br><span class="line"><span class="string"> <div class="swiper-pagination" slot="pagination"></div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> </swiper></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer src="/mySwiper/index.js"></script></span></span><br><span class="line"><span class="string"> <link href="/mySwiper/index.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><p>注意，请自行修改a链接地址和图片地址和标题名称和描述</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">swiper-slide</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://baidu.com"</span> <span class="attr">class</span>=<span class="string">"toPath"</span>></span> <span class="comment"><!-- a链接地址 --></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"no-lazy"</span> <span class="attr">src</span>=<span class="string">"/mySwiper/img/2.jpg"</span> <span class="attr">style</span>=<span class="string">"width:100%;height:100%;object-fit: cover;"</span>></span> <span class="comment"><!-- 图片地址 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"ani"</span> <span class="attr">swiper-animate-effect</span>=<span class="string">"fadeInDown"</span> <span class="attr">swiper-animate-duration</span>=<span class="string">"0.5s"</span> <span class="attr">swiper-animate-delay</span>=<span class="string">"0.3s"</span>></span>我是标题<span class="tag"></<span class="name">h2</span>></span> <span class="comment"><!-- 修改标题名称 --></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"ani"</span> <span class="attr">swiper-animate-effect</span>=<span class="string">"fadeInDown"</span> <span class="attr">swiper-animate-duration</span>=<span class="string">"0.5s"</span> <span class="attr">swiper-animate-delay</span>=<span class="string">"0.3s"</span>></span>我是描述哦<span class="tag"></<span class="name">p</span>></span> <span class="comment"><!-- 修改描述 --></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">swiper-slide</span>></span></span><br></pre></td></tr></table></figure><p>如果你想加轮播图或者删除轮播图，则增加或者删除上面这个模块就行了，这样，一个轮播图就放在了首页。<br><img src="https://img12.360buyimg.com/ddimg/jfs/t1/157070/18/25566/1656690/6152dc57E2b0f3df1/0b6c5731c4138a28.png" class="lazyload placeholder" data-srcset="https://img12.360buyimg.com/ddimg/jfs/t1/157070/18/25566/1656690/6152dc57E2b0f3df1/0b6c5731c4138a28.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="自定义轮播图"></p><h3 id="横向滚动特效"><a href="#横向滚动特效" class="headerlink" title="横向滚动特效"></a>横向滚动特效</h3><p>首先需要在<code>source</code>文件夹下创建<code>bli/index.js</code>和<code>bli/index.css</code>文件</p><details ><summary pointer> bli/index.js </summary> <div class='content'> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 主题已经默认cdn引入了vue-seamless-scroll插件</span></span><br><span class="line"><span class="comment">// https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/01-basic.html</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">"#myBli"</span>, <span class="comment">// el不要是最外面的id_name，应该是html: ''里的div的id</span></span><br><span class="line"> data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> content: [],</span><br><span class="line"> listData: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>],</span><br><span class="line"> classOption: {</span><br><span class="line"> limitMoveNum: <span class="number">2</span>,</span><br><span class="line"> direction: <span class="number">3</span>,</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> methods: {},</span><br><span class="line">});</span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details><details ><summary pointer> bli/index.css </summary> <div class='content'> <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#myBli</span> <span class="selector-class">.warp</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#myBli</span> <span class="selector-class">.warp</span> <span class="selector-tag">ul</span> {</span><br><span class="line"> <span class="attribute">list-style</span>: none;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#myBli</span> <span class="selector-class">.warp</span> <span class="selector-tag">ul</span><span class="selector-class">.ul-item</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#myBli</span> <span class="selector-class">.warp</span> <span class="selector-tag">ul</span><span class="selector-class">.ul-item</span> <span class="selector-class">.li-item</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">120px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#999</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#myBli</span> <span class="selector-class">.warp</span> <span class="selector-tag">ul</span><span class="selector-class">.ul-item</span> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover;</span><br><span class="line">}</span><br></pre></td></tr></table></figure> </div> </details><p>最后在自定义侧边栏的<code>home_widget</code>中加入以下内容:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">mybilibili</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">mybilibili</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">测试bli</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="myBli"></span></span><br><span class="line"><span class="string"> <vue-seamless-scroll</span></span><br><span class="line"><span class="string"> :data="listData"</span></span><br><span class="line"><span class="string"> :class-option="classOption"</span></span><br><span class="line"><span class="string"> class="warp"</span></span><br><span class="line"><span class="string"> ></span></span><br><span class="line"><span class="string"> <ul class="ul-item" style="width:720px;"></span></span><br><span class="line"><span class="string"> <!-- 在这里改, 手动修改a连接的href值和img的src值, 如果你会进阶，你可以使用v-for, 或者数据使用动态数据--></span></span><br><span class="line"><span class="string"> </span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"> <!-- 在这里结束 --></span></span><br><span class="line"><span class="string"> </ul></span></span><br><span class="line"><span class="string"> </vue-seamless-scroll></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer src="/bli/index.js"></script></span></span><br><span class="line"><span class="string"> <link href="/bli/index.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><p>同样，自行修改上面a标签的链接和图片地址，至此横向滚动特效完成。</p><blockquote><p>注意，使用vue写法的话，图片需要带上class=”no-lazy”，否则可能加载不出来，，js原生或者jquery不需要带</p></blockquote><p><img src="https://img13.360buyimg.com/ddimg/jfs/t1/204201/29/8717/1295226/6152de69E4b27f8fe/3442e5daeb9dbdb6.png" class="lazyload placeholder" data-srcset="https://img13.360buyimg.com/ddimg/jfs/t1/204201/29/8717/1295226/6152de69E4b27f8fe/3442e5daeb9dbdb6.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="横向滚动特效"></p><h3 id="侧边栏增加微博热搜"><a href="#侧边栏增加微博热搜" class="headerlink" title="侧边栏增加微博热搜"></a>侧边栏增加微博热搜</h3><p>同样同样，在<code>source</code>文件夹下创建<code>weibo/index.js</code>和<code>weibo/index.css</code>文件</p><details ><summary pointer> weibo/index.js </summary> <div class='content'> <p>又是vue写的，哈哈，随便用啥写</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">"#myWeibo"</span>, <span class="comment">// el不要是最外面的id_name，应该是html: ''里的div的id</span></span><br><span class="line"> data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> content: [],</span><br><span class="line"> classOption: {</span><br><span class="line"> singleHeight: <span class="number">30</span>,</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">created</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.getWeiboList();</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> <span class="comment">// 请求开源api, 获取历史上的今天数据</span></span><br><span class="line"> <span class="function"><span class="title">getWeiboList</span>(<span class="params"></span>)</span> {</span><br><span class="line"> fetch(<span class="string">"https://tenapi.cn/resou/"</span>, {</span><br><span class="line"> method: <span class="string">"GET"</span>, <span class="comment">// *GET, POST, PUT, DELETE, etc.</span></span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> res.json();</span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function">(<span class="params">data</span>) =></span> {</span><br><span class="line"> <span class="built_in">this</span>.content = data.list;</span><br><span class="line"> })</span><br><span class="line"> .catch(<span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"err"</span>, err);</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">});</span><br></pre></td></tr></table></figure> </div> </details><details ><summary pointer> weibo/index.css </summary> <div class='content'> <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.weibo-container</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.weibo-container</span> <span class="selector-class">.left</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.weibo-container</span> <span class="selector-class">.name</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> <span class="attribute">-webkit-box-orient</span>: vertical;</span><br><span class="line"> <span class="attribute">-webkit-line-clamp</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#myWeibo</span> <span class="selector-class">.warp</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.weibo-container</span> <span class="selector-class">.order</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fe962e</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.weibo-container</span> <span class="selector-class">.name</span> <span class="selector-tag">a</span>{</span><br><span class="line"> <span class="attribute">color</span>: black;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.weibo-container</span> <span class="selector-class">.name</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">text-decoration</span>: underline;</span><br><span class="line"> <span class="attribute">color</span>: red;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.weibo-container</span> <span class="selector-class">.red</span> {</span><br><span class="line"> <span class="attribute">color</span>: red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure> </div> </details><p>最后在自定义侧边栏的<code>widget_library_sticky</code>或者<code>widget_library</code>中加入html,</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widget_library_sticky:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">testWidget</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">testWidget</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">微博热搜</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-weibo</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="myWeibo"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <!-- 如果不要滚动，则去掉 vue-seamless-scroll标签就行了，这个插件使用cdn向左向右滚动好像有问题 --></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <vue-seamless-scroll</span></span><br><span class="line"><span class="string"> :data="content"</span></span><br><span class="line"><span class="string"> :class-option="classOption"</span></span><br><span class="line"><span class="string"> class="warp"</span></span><br><span class="line"><span class="string"> ></span></span><br><span class="line"><span class="string"> <div class="weibo-container" v-for="(item, index) in content" :key="index"></span></span><br><span class="line"><span class="string"> <div class="left"></span></span><br><span class="line"><span class="string"> <div class="order" :class="{ red: index<=2 }"><span class="template-variable">{{index + 1}}</span></div></span></span><br><span class="line"><span class="string"> <div class="name"><a :href="item.url" target="_blank"><span class="template-variable">{{item.name}}</span></a></div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div class="hot"><span class="template-variable">{{item.hot}}</span></div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </vue-seamless-scroll></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer src="/weibo/index.js"></script></span></span><br><span class="line"><span class="string"> <link href="/weibo/index.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><p>这样，热搜侧边栏也弄好了，如果不要热搜榜滚动的话，自己去掉<code><vue-seamless-scroll></vue-seamless-scroll></code>这个html标签就行了</p><h3 id="历史上的今天"><a href="#历史上的今天" class="headerlink" title="历史上的今天"></a>历史上的今天</h3><p>嘿嘿，同样要在<code>source</code>文件夹下创建<code>historyToday/index.js</code>文件，好吧，我写累了</p><details ><summary pointer> historyToday/index.js </summary> <div class='content'> <p>又是vue.js写的，无所谓，不需要看懂, 复制粘贴就行</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/</span></span><br><span class="line"><span class="comment">// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">"#myHistorySwiper"</span>, <span class="comment">// el不要是最外面的id_name，应该是html: ''里的div的id</span></span><br><span class="line"> data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> swiperOption: {</span><br><span class="line"> effect: <span class="string">"cube"</span>, <span class="comment">// 轮播特效</span></span><br><span class="line"> loop: <span class="literal">true</span>, <span class="comment">// 循环</span></span><br><span class="line"> autoplay: {</span><br><span class="line"> delay: <span class="number">2500</span>,</span><br><span class="line"> disableOnInteraction: <span class="literal">false</span>,</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> content: [],</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> computed: {</span><br><span class="line"> <span class="function"><span class="title">swiper</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.$refs.myhistoryswiper.$swiper;</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">created</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.getHistoryList();</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> <span class="comment">// 鼠标移入停止轮播</span></span><br><span class="line"> <span class="function"><span class="title">stopAutoPlay</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.swiperOption.autoplay && <span class="built_in">this</span>.swiper.autoplay.stop();</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 鼠标移出开始轮播</span></span><br><span class="line"> <span class="function"><span class="title">startAutoPlay</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.swiperOption.autoplay && <span class="built_in">this</span>.swiper.autoplay.start();</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 请求开源api, 获取历史上的今天数据</span></span><br><span class="line"> <span class="function"><span class="title">getHistoryList</span>(<span class="params"></span>)</span> {</span><br><span class="line"> fetch(<span class="string">"https://tenapi.cn/lishi/?format=json"</span>, {</span><br><span class="line"> method: <span class="string">"GET"</span>, <span class="comment">// *GET, POST, PUT, DELETE, etc.</span></span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> res.json();</span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function">(<span class="params">data</span>) =></span> {</span><br><span class="line"> <span class="built_in">this</span>.content = data.content;</span><br><span class="line"> })</span><br><span class="line"> .catch(<span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"err"</span>, err);</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></pre></td></tr></table></figure> </div> </details><p>最后在自定义侧边栏的<code>widget_library_sticky</code>或者<code>widget_library</code>中加入html,</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widget_library_sticky:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">historyToday</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">historyToday</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">历史上的今天</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-calendar-week</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="myHistorySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()"></span></span><br><span class="line"><span class="string"> <swiper class="myhistoryswiper" ref="myhistoryswiper" style="height:80px;" :options="swiperOption"></span></span><br><span class="line"><span class="string"> <swiper-slide v-for="(item, index) in content" :key="index"></span></span><br><span class="line"><span class="string"> <span class="template-variable">{{item}}</span></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"> </swiper></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <script defer src="/historyToday/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><p>这样历史上的今天就完成了<br><img src="https://img10.360buyimg.com/ddimg/jfs/t1/207640/15/2697/1253849/6152e283Ec5fbadf5/f7cf99b009c9c8dc.png" class="lazyload placeholder" data-srcset="https://img10.360buyimg.com/ddimg/jfs/t1/207640/15/2697/1253849/6152e283Ec5fbadf5/f7cf99b009c9c8dc.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="历史上的今天"></p><h3 id="恋爱墙"><a href="#恋爱墙" class="headerlink" title="恋爱墙"></a>恋爱墙</h3><p>在<code>source</code>文件夹下创建<code>love/index.js</code>文件</p><details ><summary pointer> love/index.js </summary> <div class='content'> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> htmer_time = <span class="built_in">document</span>.getElementById(<span class="string">"htmer_time"</span>);</span><br><span class="line"><span class="keyword">var</span> htmer_time_time = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setTime</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> create_time = <span class="built_in">Math</span>.round(</span><br><span class="line"> <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="built_in">Date</span>.UTC(<span class="number">2018</span>, <span class="number">10</span>, <span class="number">26</span>, <span class="number">6</span>, <span class="number">45</span>, <span class="number">0</span>)).getTime() / <span class="number">1000</span></span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">var</span> timestamp = <span class="built_in">Math</span>.round(</span><br><span class="line"> (<span class="keyword">new</span> <span class="built_in">Date</span>().getTime() + <span class="number">8</span> * <span class="number">60</span> * <span class="number">60</span> * <span class="number">1000</span>) / <span class="number">1000</span></span><br><span class="line"> );</span><br><span class="line"> currentTime = secondToDate(timestamp - create_time);</span><br><span class="line"> currentTimeHtml =</span><br><span class="line"> currentTime[<span class="number">0</span>] +</span><br><span class="line"> <span class="string">" 年 "</span> +</span><br><span class="line"> currentTime[<span class="number">1</span>] +</span><br><span class="line"> <span class="string">" 天 "</span> +</span><br><span class="line"> currentTime[<span class="number">2</span>] +</span><br><span class="line"> <span class="string">" 时 "</span> +</span><br><span class="line"> currentTime[<span class="number">3</span>] +</span><br><span class="line"> <span class="string">" 分 "</span> +</span><br><span class="line"> currentTime[<span class="number">4</span>] +</span><br><span class="line"> <span class="string">" 秒"</span>;</span><br><span class="line"> htmer_time.innerHTML = currentTimeHtml;</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">secondToDate</span>(<span class="params">second</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (!second) {</span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> time = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">0</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="keyword">if</span> (second >= <span class="number">365</span> * <span class="number">24</span> * <span class="number">3600</span>) {</span><br><span class="line"> time[<span class="number">0</span>] = <span class="built_in">parseInt</span>(second / (<span class="number">365</span> * <span class="number">24</span> * <span class="number">3600</span>));</span><br><span class="line"> second %= <span class="number">365</span> * <span class="number">24</span> * <span class="number">3600</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (second >= <span class="number">24</span> * <span class="number">3600</span>) {</span><br><span class="line"> time[<span class="number">1</span>] = <span class="built_in">parseInt</span>(second / (<span class="number">24</span> * <span class="number">3600</span>));</span><br><span class="line"> second %= <span class="number">24</span> * <span class="number">3600</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (second >= <span class="number">3600</span>) {</span><br><span class="line"> time[<span class="number">2</span>] = <span class="built_in">parseInt</span>(second / <span class="number">3600</span>);</span><br><span class="line"> second %= <span class="number">3600</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (second >= <span class="number">60</span>) {</span><br><span class="line"> time[<span class="number">3</span>] = <span class="built_in">parseInt</span>(second / <span class="number">60</span>);</span><br><span class="line"> second %= <span class="number">60</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (second > <span class="number">0</span>) {</span><br><span class="line"> time[<span class="number">4</span>] = second;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> time;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (htmer_time) {</span><br><span class="line"> htmer_time_time = <span class="built_in">setInterval</span>(setTime, <span class="number">1000</span>);</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">clearInterval</span>(htmer_time_time);</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details><p>在第6行修改时间就行了，改成你自己想要开始的时间，这里是2018年10月26号开始的<br>最后在自定义侧边栏的<code>widget_library_sticky</code>或者<code>widget_library</code>中加入html</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widget_library_sticky:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">testLove</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">testLove</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">恋爱墙</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> </span></span><br><span class="line"><span class="string"> <div style="text-align: center;"></span></span><br><span class="line"><span class="string"> <img src="https://a-oss.zmki.cn/20190601/img_9879.jpg"</span></span><br><span class="line"><span class="string"> style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /></span></span><br><span class="line"><span class="string"> <svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"</span></span><br><span class="line"><span class="string"> class="my-face"></span></span><br><span class="line"><span class="string"> <path</span></span><br><span class="line"><span class="string"> d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"</span></span><br><span class="line"><span class="string"> fill="#515151" /></span></span><br><span class="line"><span class="string"> </svg></span></span><br><span class="line"><span class="string"> <img src="https://a-oss.zmki.cn/20190601/img_9878.jpg"</span></span><br><span class="line"><span class="string"> style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br /></span></span><br><span class="line"><span class="string"> <span id="htmer_time"></span></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer data-pjax src="/love/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br></pre></td></tr></table></figure><p>这样，恋爱墙就完成了，但是，除了修改时间，你还可以把两张图片地址也修改成你自己的图片地址<br><img src="https://img13.360buyimg.com/ddimg/jfs/t1/207293/17/2693/1405780/6152e217Ebfe5263a/f2bb2529adb8de88.png" class="lazyload placeholder" data-srcset="https://img13.360buyimg.com/ddimg/jfs/t1/207293/17/2693/1405780/6152e217Ebfe5263a/f2bb2529adb8de88.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="恋爱墙"></p><p>这几个模块就相当于给你一个容器，你可以自己往里面方html，然后放js，css，放一些自己的插件，vue.js,jquery.js，原生js都可以，只是提供一个容器，你可以自己搞更好看更好玩的扩展，如果你懒得折腾，用我上面写的扩展（自定义侧边栏）也挺好的。</p><p>最后我将我的<code>source/_data/widget.yml</code>写法贴下来,如下所示</p><blockquote><p>注意：所有script标签带上defer属性 <code><script defer src="xxx.js"></script></code></p></blockquote><details ><summary pointer> source/_data/widget.yml </summary> <div class='content'> <figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">widget_library:</span></span><br><span class="line"></span><br><span class="line"><span class="attr">widget_library_sticky:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">testWidget</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">testWidget</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">微博热搜</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-weibo</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="myWeibo"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <!-- 如果不要滚动，则去掉 vue-seamless-scroll标签就行了，这个插件使用cdn向左向右滚动好像有问题 --></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <vue-seamless-scroll</span></span><br><span class="line"><span class="string"> :data="content"</span></span><br><span class="line"><span class="string"> :class-option="classOption"</span></span><br><span class="line"><span class="string"> class="warp"</span></span><br><span class="line"><span class="string"> ></span></span><br><span class="line"><span class="string"> <div class="weibo-container" v-for="(item, index) in content" :key="index"></span></span><br><span class="line"><span class="string"> <div class="left"></span></span><br><span class="line"><span class="string"> <div class="order" :class="{ red: index<=2 }"><span class="template-variable">{{index + 1}}</span></div></span></span><br><span class="line"><span class="string"> <div class="name"><a :href="item.url" target="_blank"><span class="template-variable">{{item.name}}</span></a></div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div class="hot"><span class="template-variable">{{item.hot}}</span></div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </vue-seamless-scroll></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer src="/weibo/index.js"></script></span></span><br><span class="line"><span class="string"> <link href="/weibo/index.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> '</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">historyToday</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">historyToday</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">历史上的今天</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-calendar-week</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="myHistorySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()"></span></span><br><span class="line"><span class="string"> <swiper class="myhistoryswiper" ref="myhistoryswiper" style="height:80px;" :options="swiperOption"></span></span><br><span class="line"><span class="string"> <swiper-slide v-for="(item, index) in content" :key="index"></span></span><br><span class="line"><span class="string"> <span class="template-variable">{{item}}</span></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"> </swiper></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <script defer src="/historyToday/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">testLove</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">testLove</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">恋爱墙</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">'#d63130'</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> </span></span><br><span class="line"><span class="string"> <div style="text-align: center;"></span></span><br><span class="line"><span class="string"> <img src="https://a-oss.zmki.cn/20190601/img_9879.jpg"</span></span><br><span class="line"><span class="string"> style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /></span></span><br><span class="line"><span class="string"> <svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"</span></span><br><span class="line"><span class="string"> class="my-face"></span></span><br><span class="line"><span class="string"> <path</span></span><br><span class="line"><span class="string"> d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"</span></span><br><span class="line"><span class="string"> fill="#515151" /></span></span><br><span class="line"><span class="string"> </svg></span></span><br><span class="line"><span class="string"> <img src="https://a-oss.zmki.cn/20190601/img_9878.jpg"</span></span><br><span class="line"><span class="string"> style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br /></span></span><br><span class="line"><span class="string"> <span id="htmer_time"></span></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer data-pjax src="/love/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br><span class="line"></span><br><span class="line"><span class="attr">home_widget:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">welcome</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">welcome</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">欢迎</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'<img src="https://api.amogu.cn/api/ipimg/" style="width:100%">'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">my_github_container</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">my_github_container</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">测试日历</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="github_container"></div></span></span><br><span class="line"><span class="string"> <script defer data-pjax src="/githubcalendar/index.js"></script></span></span><br><span class="line"><span class="string"> '</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">test2</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">test2</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">测试轮播图</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="mySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()"></span></span><br><span class="line"><span class="string"> <swiper class="myswiper" ref="myswiper" style="height:350px;" :options="swiperOption"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/2.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述哦</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/3.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题2</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述2</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/4.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题3</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述3</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/5.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题4</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述4</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://api.dujin.org/pic/ghibli/" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题5</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述5</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <swiper-slide></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com" class="toPath"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="/mySwiper/img/7.jpg" style="width:100%;height:100%;object-fit: cover;"></span></span><br><span class="line"><span class="string"> <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题6</h2></span></span><br><span class="line"><span class="string"> <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述6</p></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </swiper-slide></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <!-- 如果你想继续增加轮播图，继续在下面写<swiper-slide>我是内容</swiper-slide>就行了 --></span></span><br><span class="line"><span class="string"> <div class="swiper-pagination" slot="pagination"></div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> </swiper></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer src="/mySwiper/index.js"></script></span></span><br><span class="line"><span class="string"> <link href="/mySwiper/index.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> '</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">mybilibili</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">mybilibili</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">测试bli</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br><span class="line"> <span class="attr">icon_color:</span> <span class="string">blue</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://baidu.com</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#fff'</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">'</span></span><br><span class="line"><span class="string"> <div id="myBli"></span></span><br><span class="line"><span class="string"> <vue-seamless-scroll</span></span><br><span class="line"><span class="string"> :data="listData"</span></span><br><span class="line"><span class="string"> :class-option="classOption"</span></span><br><span class="line"><span class="string"> class="warp"</span></span><br><span class="line"><span class="string"> ></span></span><br><span class="line"><span class="string"> <ul class="ul-item" style="width:720px;"></span></span><br><span class="line"><span class="string"> <!-- 在这里改, 手动修改a连接的href值和img的src值, 如果你会进阶，你可以使用v-for, 或者数据使用动态数据--></span></span><br><span class="line"><span class="string"> </span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <li class="li-item"></span></span><br><span class="line"><span class="string"> <a href="http://baidu.com"></span></span><br><span class="line"><span class="string"> <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg"></span></span><br><span class="line"><span class="string"> </a></span></span><br><span class="line"><span class="string"> </li></span></span><br><span class="line"><span class="string"> <!-- 在这里结束 --></span></span><br><span class="line"><span class="string"> </ul></span></span><br><span class="line"><span class="string"> </vue-seamless-scroll></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <script defer src="/bli/index.js"></script></span></span><br><span class="line"><span class="string"> <link href="/bli/index.css" rel="stylesheet"></span></span><br><span class="line"><span class="string"> '</span></span><br><span class="line"></span><br></pre></td></tr></table></figure> </div> </details>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> sidebar </tag>
</tags>
</entry>
<entry>
<title>getFiles文件获取</title>
<link href="/post/getfiles/"/>
<url>/post/getfiles/</url>
<content type="html"><![CDATA[<h2 id="会把某个文件夹下的文件显示在页面上。"><a href="#会把某个文件夹下的文件显示在页面上。" class="headerlink" title="会把某个文件夹下的文件显示在页面上。"></a>会把某个文件夹下的文件显示在页面上。</h2><p>例如我在<code>source</code>文件夹下，创建了一个叫做<code>img</code>的文件夹，把<code>img</code>的文件夹下的文件显示在页面上。</p><blockquote><p>注意： 必须要在<code>source</code>文件夹下，文件夹名称可以随便取，下面事例中<code>文件夹</code>名称叫<code>img</code><br>该标签需要主题版本为 <code>2.3.6+</code></p></blockquote><h2 id="获取img文件夹下的-txt-pdf文件"><a href="#获取img文件夹下的-txt-pdf文件" class="headerlink" title="获取img文件夹下的.txt .pdf文件"></a>获取<code>img</code>文件夹下的.txt .pdf文件</h2><div class="link-group"><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="test.pdf" href="/img/test.pdf"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">test.pdf</p><p class="url">/img/test.pdf</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="test2.txt" href="/img/test2.txt"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">test2.txt</p><p class="url">/img/test2.txt</p></div></a></div></div><h2 id="获取img文件夹下的-png文件"><a href="#获取img文件夹下的-png文件" class="headerlink" title="获取img文件夹下的.png文件"></a>获取<code>img</code>文件夹下的.png文件</h2><div class="link-group"><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654773163161.png" href="/img/1654773163161.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654773163161.png</p><p class="url">/img/1654773163161.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654780591672.png" href="/img/1654780591672.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654780591672.png</p><p class="url">/img/1654780591672.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="ayu.png" href="/img/ayu.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">ayu.png</p><p class="url">/img/ayu.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="base.png" href="/img/base.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">base.png</p><p class="url">/img/base.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="base2.png" href="/img/base2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">base2.png</p><p class="url">/img/base2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg.png" href="/img/bubbly-bg.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg.png</p><p class="url">/img/bubbly-bg.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg01.png" href="/img/bubbly-bg01.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg01.png</p><p class="url">/img/bubbly-bg01.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg06.png" href="/img/bubbly-bg06.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg06.png</p><p class="url">/img/bubbly-bg06.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg2.png" href="/img/bubbly-bg2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg2.png</p><p class="url">/img/bubbly-bg2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg3.png" href="/img/bubbly-bg3.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg3.png</p><p class="url">/img/bubbly-bg3.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg4.png" href="/img/bubbly-bg4.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg4.png</p><p class="url">/img/bubbly-bg4.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg5.png" href="/img/bubbly-bg5.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg5.png</p><p class="url">/img/bubbly-bg5.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="full.png" href="/img/full.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">full.png</p><p class="url">/img/full.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="full2.png" href="/img/full2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">full2.png</p><p class="url">/img/full2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper1.png" href="/img/swiper1.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper1.png</p><p class="url">/img/swiper1.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper2.png" href="/img/swiper2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper2.png</p><p class="url">/img/swiper2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper3.png" href="/img/swiper3.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper3.png</p><p class="url">/img/swiper3.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper4.png" href="/img/swiper4.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper4.png</p><p class="url">/img/swiper4.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="text-center.png" href="/img/text-center.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text-center.png</p><p class="url">/img/text-center.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="text-center2.png" href="/img/text-center2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text-center2.png</p><p class="url">/img/text-center2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme01.png" href="/img/updatetheme01.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme01.png</p><p class="url">/img/updatetheme01.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme02.png" href="/img/updatetheme02.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme02.png</p><p class="url">/img/updatetheme02.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme03.png" href="/img/updatetheme03.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme03.png</p><p class="url">/img/updatetheme03.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme04.png" href="/img/updatetheme04.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme04.png</p><p class="url">/img/updatetheme04.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme05.png" href="/img/updatetheme05.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme05.png</p><p class="url">/img/updatetheme05.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme06.png" href="/img/updatetheme06.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme06.png</p><p class="url">/img/updatetheme06.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme07.png" href="/img/updatetheme07.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme07.png</p><p class="url">/img/updatetheme07.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme08.png" href="/img/updatetheme08.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme08.png</p><p class="url">/img/updatetheme08.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme09.png" href="/img/updatetheme09.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme09.png</p><p class="url">/img/updatetheme09.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme10.png" href="/img/updatetheme10.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme10.png</p><p class="url">/img/updatetheme10.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="width-full.png" href="/img/width-full.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">width-full.png</p><p class="url">/img/width-full.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="width-full2.png" href="/img/width-full2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">width-full2.png</p><p class="url">/img/width-full2.png</p></div></a></div></div><h2 id="获取img文件夹下的-gif文件"><a href="#获取img文件夹下的-gif文件" class="headerlink" title="获取img文件夹下的.gif文件"></a>获取<code>img</code>文件夹下的.gif文件</h2><div class="link-group"><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="8.gif" href="/img/8.gif"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">8.gif</p><p class="url">/img/8.gif</p></div></a></div></div><h2 id="获取img文件夹下的所有文件"><a href="#获取img文件夹下的所有文件" class="headerlink" title="获取img文件夹下的所有文件"></a>获取<code>img</code>文件夹下的所有文件</h2><div class="link-group"><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1.jpg" href="/img/1.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1.jpg</p><p class="url">/img/1.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654773163161.png" href="/img/1654773163161.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654773163161.png</p><p class="url">/img/1654773163161.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654780436716.jpg" href="/img/1654780436716.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654780436716.jpg</p><p class="url">/img/1654780436716.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654780591672.png" href="/img/1654780591672.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654780591672.png</p><p class="url">/img/1654780591672.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="2.jpg" href="/img/2.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">2.jpg</p><p class="url">/img/2.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="3.jpg" href="/img/3.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">3.jpg</p><p class="url">/img/3.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="4.jpg" href="/img/4.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">4.jpg</p><p class="url">/img/4.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="5.jpg" href="/img/5.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">5.jpg</p><p class="url">/img/5.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="6.jpg" href="/img/6.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">6.jpg</p><p class="url">/img/6.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="7.jpg" href="/img/7.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">7.jpg</p><p class="url">/img/7.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="8.gif" href="/img/8.gif"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">8.gif</p><p class="url">/img/8.gif</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="avatar.jpg" href="/img/avatar.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">avatar.jpg</p><p class="url">/img/avatar.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="ayu.png" href="/img/ayu.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">ayu.png</p><p class="url">/img/ayu.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="base.png" href="/img/base.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">base.png</p><p class="url">/img/base.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="base2.png" href="/img/base2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">base2.png</p><p class="url">/img/base2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg.png" href="/img/bubbly-bg.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg.png</p><p class="url">/img/bubbly-bg.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg01.png" href="/img/bubbly-bg01.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg01.png</p><p class="url">/img/bubbly-bg01.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg06.png" href="/img/bubbly-bg06.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg06.png</p><p class="url">/img/bubbly-bg06.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg2.png" href="/img/bubbly-bg2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg2.png</p><p class="url">/img/bubbly-bg2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg3.png" href="/img/bubbly-bg3.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg3.png</p><p class="url">/img/bubbly-bg3.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg4.png" href="/img/bubbly-bg4.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg4.png</p><p class="url">/img/bubbly-bg4.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg5.png" href="/img/bubbly-bg5.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg5.png</p><p class="url">/img/bubbly-bg5.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="full.png" href="/img/full.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">full.png</p><p class="url">/img/full.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="full2.png" href="/img/full2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">full2.png</p><p class="url">/img/full2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="school.jpg" href="/img/school.jpg"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">school.jpg</p><p class="url">/img/school.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper1.png" href="/img/swiper1.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper1.png</p><p class="url">/img/swiper1.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper2.png" href="/img/swiper2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper2.png</p><p class="url">/img/swiper2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper3.png" href="/img/swiper3.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper3.png</p><p class="url">/img/swiper3.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper4.png" href="/img/swiper4.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper4.png</p><p class="url">/img/swiper4.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="test.pdf" href="/img/test.pdf"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">test.pdf</p><p class="url">/img/test.pdf</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="test2.txt" href="/img/test2.txt"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">test2.txt</p><p class="url">/img/test2.txt</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="text-center.png" href="/img/text-center.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text-center.png</p><p class="url">/img/text-center.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="text-center2.png" href="/img/text-center2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text-center2.png</p><p class="url">/img/text-center2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme01.png" href="/img/updatetheme01.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme01.png</p><p class="url">/img/updatetheme01.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme02.png" href="/img/updatetheme02.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme02.png</p><p class="url">/img/updatetheme02.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme03.png" href="/img/updatetheme03.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme03.png</p><p class="url">/img/updatetheme03.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme04.png" href="/img/updatetheme04.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme04.png</p><p class="url">/img/updatetheme04.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme05.png" href="/img/updatetheme05.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme05.png</p><p class="url">/img/updatetheme05.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme06.png" href="/img/updatetheme06.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme06.png</p><p class="url">/img/updatetheme06.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme07.png" href="/img/updatetheme07.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme07.png</p><p class="url">/img/updatetheme07.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme08.png" href="/img/updatetheme08.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme08.png</p><p class="url">/img/updatetheme08.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme09.png" href="/img/updatetheme09.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme09.png</p><p class="url">/img/updatetheme09.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme10.png" href="/img/updatetheme10.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme10.png</p><p class="url">/img/updatetheme10.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="width-full.png" href="/img/width-full.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">width-full.png</p><p class="url">/img/width-full.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="width-full2.png" href="/img/width-full2.png"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" class="lazyload placeholder" data-srcset="https://img.51miz.com/Element/00/37/79/59/10df0417_E377959_b7bb9dfa.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">width-full2.png</p><p class="url">/img/width-full2.png</p></div></a></div></div><h2 id="获取img文件夹下的所有文件，并指定左侧图片"><a href="#获取img文件夹下的所有文件，并指定左侧图片" class="headerlink" title="获取img文件夹下的所有文件，并指定左侧图片"></a>获取<code>img</code>文件夹下的所有文件，并指定左侧图片</h2><div class="link-group"><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1.jpg" href="/img/1.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1.jpg</p><p class="url">/img/1.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654773163161.png" href="/img/1654773163161.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654773163161.png</p><p class="url">/img/1654773163161.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654780436716.jpg" href="/img/1654780436716.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654780436716.jpg</p><p class="url">/img/1654780436716.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="1654780591672.png" href="/img/1654780591672.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">1654780591672.png</p><p class="url">/img/1654780591672.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="2.jpg" href="/img/2.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">2.jpg</p><p class="url">/img/2.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="3.jpg" href="/img/3.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">3.jpg</p><p class="url">/img/3.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="4.jpg" href="/img/4.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">4.jpg</p><p class="url">/img/4.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="5.jpg" href="/img/5.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">5.jpg</p><p class="url">/img/5.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="6.jpg" href="/img/6.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">6.jpg</p><p class="url">/img/6.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="7.jpg" href="/img/7.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">7.jpg</p><p class="url">/img/7.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="8.gif" href="/img/8.gif"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">8.gif</p><p class="url">/img/8.gif</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="avatar.jpg" href="/img/avatar.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">avatar.jpg</p><p class="url">/img/avatar.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="ayu.png" href="/img/ayu.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">ayu.png</p><p class="url">/img/ayu.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="base.png" href="/img/base.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">base.png</p><p class="url">/img/base.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="base2.png" href="/img/base2.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">base2.png</p><p class="url">/img/base2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg.png" href="/img/bubbly-bg.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg.png</p><p class="url">/img/bubbly-bg.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg01.png" href="/img/bubbly-bg01.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg01.png</p><p class="url">/img/bubbly-bg01.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg06.png" href="/img/bubbly-bg06.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg06.png</p><p class="url">/img/bubbly-bg06.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg2.png" href="/img/bubbly-bg2.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg2.png</p><p class="url">/img/bubbly-bg2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg3.png" href="/img/bubbly-bg3.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg3.png</p><p class="url">/img/bubbly-bg3.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg4.png" href="/img/bubbly-bg4.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg4.png</p><p class="url">/img/bubbly-bg4.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="bubbly-bg5.png" href="/img/bubbly-bg5.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">bubbly-bg5.png</p><p class="url">/img/bubbly-bg5.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="full.png" href="/img/full.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">full.png</p><p class="url">/img/full.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="full2.png" href="/img/full2.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">full2.png</p><p class="url">/img/full2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="school.jpg" href="/img/school.jpg"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">school.jpg</p><p class="url">/img/school.jpg</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper1.png" href="/img/swiper1.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper1.png</p><p class="url">/img/swiper1.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper2.png" href="/img/swiper2.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper2.png</p><p class="url">/img/swiper2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper3.png" href="/img/swiper3.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper3.png</p><p class="url">/img/swiper3.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="swiper4.png" href="/img/swiper4.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">swiper4.png</p><p class="url">/img/swiper4.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="test.pdf" href="/img/test.pdf"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">test.pdf</p><p class="url">/img/test.pdf</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="test2.txt" href="/img/test2.txt"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">test2.txt</p><p class="url">/img/test2.txt</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="text-center.png" href="/img/text-center.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text-center.png</p><p class="url">/img/text-center.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="text-center2.png" href="/img/text-center2.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text-center2.png</p><p class="url">/img/text-center2.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme01.png" href="/img/updatetheme01.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme01.png</p><p class="url">/img/updatetheme01.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme02.png" href="/img/updatetheme02.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme02.png</p><p class="url">/img/updatetheme02.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme03.png" href="/img/updatetheme03.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme03.png</p><p class="url">/img/updatetheme03.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme04.png" href="/img/updatetheme04.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme04.png</p><p class="url">/img/updatetheme04.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme05.png" href="/img/updatetheme05.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme05.png</p><p class="url">/img/updatetheme05.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme06.png" href="/img/updatetheme06.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme06.png</p><p class="url">/img/updatetheme06.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme07.png" href="/img/updatetheme07.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme07.png</p><p class="url">/img/updatetheme07.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme08.png" href="/img/updatetheme08.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme08.png</p><p class="url">/img/updatetheme08.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme09.png" href="/img/updatetheme09.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme09.png</p><p class="url">/img/updatetheme09.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="updatetheme10.png" href="/img/updatetheme10.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">updatetheme10.png</p><p class="url">/img/updatetheme10.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="width-full.png" href="/img/width-full.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">width-full.png</p><p class="url">/img/width-full.png</p></div></a></div><div class="tagLink"><a class="link-card" no-pjax target="_blank" title="width-full2.png" href="/img/width-full2.png"><span class="link-card-backdrop" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7)"></span><div class="left"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" class="lazyload placeholder" data-srcset="https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">width-full2.png</p><p class="url">/img/width-full2.png</p></div></a></div></div><h2 id="上述事例写法"><a href="#上述事例写法" class="headerlink" title="上述事例写法"></a>上述事例写法</h2><figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">## 获取`img`文件夹下的.txt .pdf文件</span></span><br><span class="line">{% getFiles img, txt pdf, %}</span><br><span class="line"><span class="section">## 获取`img`文件夹下的.png文件</span></span><br><span class="line">{% getFiles img, png %}</span><br><span class="line"><span class="section">## 获取`img`文件夹下的.gif文件</span></span><br><span class="line">{% getFiles img, gif %}</span><br><span class="line"><span class="section">## 获取`img`文件夹下的所有文件</span></span><br><span class="line">{% getFiles img %}</span><br><span class="line"><span class="section">## 获取`img`文件夹下的所有文件，并指定左侧图片</span></span><br><span class="line">{% getFiles img, '', https://tse3-mm.cn.bing.net/th/id/OIP-C.oGbjgWNX4DBXyKf0P<span class="emphasis">_xOmwHaHa?w=212&h=188&c=7&o=5&dpr=1.24&pid=1.7 %}</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>基本配置（一）</title>
<link href="/post/hexo-theme-bamboo-new/"/>
<url>/post/hexo-theme-bamboo-new/</url>
<content type="html"><![CDATA[<p>这是一款<span class='p large red'>H</span><span class='p large green'>E</span><span class='p large blue'>X</span><span class='p large info'>O</span>主题。</p><blockquote><p>有问题去<a href="https://github.com/yuang01/hexo-theme-bamboo/issues">提issues</a> 或者 <a href="/messageBoard">留言板</a>留言，建议提issues</p></blockquote><p>国内访问：<a href="https://hexo-theme-bamboo.netlify.app">https://hexo-theme-bamboo.netlify.app</a> （github比较慢的话，可以访问这个地址预览）</p><h2 class="bamboo-h " id="下载294bnesze15">下载</h2><br/><p>首先你需要有一个<a href="https://hexo.io/zh-cn/">Hexo</a>，按照官网的方法，很容易的就能创建一个hexo博客。</p><div class="tagLink"><a class="link-card" title="Hexo" href="https://hexo.io/zh-cn/"><span class="link-card-backdrop" style="background-image: url(https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg)"></span><div class="left"><img src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" class="lazyload placeholder" data-srcset="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">Hexo</p><p class="url">https://hexo.io/zh-cn/</p></div></a></div><div class="tabs" id="tab-id"><ul class="nav-tabs"><li class="tab active"><a class="#tab-id-1">Github安装</a></li><li class="tab"><a class="#tab-id-2">Gitee安装</a></li><li class="tab"><a class="#tab-id-3">npm安装</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tab-id-1"><p>当你有了hexo博客之后，进入<code>themes</code>文件夹下使用 <code>Git clone</code> 命令来下载:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/yuang01/hexo-theme-bamboo.git</span><br></pre></td></tr></table></figure><div class="tagLink"><a class="link-card" title="hexo-theme-bamboo" href="https://github.com/yuang01/hexo-theme-bamboo"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-fb4f1a018af1e161b8d851dc02513419_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-fb4f1a018af1e161b8d851dc02513419_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-fb4f1a018af1e161b8d851dc02513419_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">hexo-theme-bamboo</p><p class="url">https://github.com/yuang01/hexo-theme-bamboo</p></div></a></div><p>或者点击下载zip包，解压放入<code>themes</code>文件夹下<br><span class='btn center large'><a class="button" href='https://github.com/yuang01/hexo-theme-bamboo/archive/dev.zip' title='开始下载'><i class='fa fa-download'></i>开始下载</a></span></p></div><div class="tab-pane" id="tab-id-2"><p>当你有了hexo博客之后，进入<code>themes</code>文件夹下使用 <code>Git clone</code> 命令来下载:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://gitee.com/yuang01/hexo-theme-bamboo.git</span><br></pre></td></tr></table></figure><div class="tagLink"><a class="link-card" title="hexo-theme-bamboo" href="https://gitee.com/yuang01/hexo-theme-bamboo"><span class="link-card-backdrop" style="background-image: url(https://img10.360buyimg.com/ddimg/jfs/t1/154000/26/17136/4231/601cb685E622bcee5/1a923dacb1d98f64.jpg)"></span><div class="left"><img src="https://img10.360buyimg.com/ddimg/jfs/t1/154000/26/17136/4231/601cb685E622bcee5/1a923dacb1d98f64.jpg" class="lazyload placeholder" data-srcset="https://img10.360buyimg.com/ddimg/jfs/t1/154000/26/17136/4231/601cb685E622bcee5/1a923dacb1d98f64.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">hexo-theme-bamboo</p><p class="url">https://gitee.com/yuang01/hexo-theme-bamboo</p></div></a></div>或者点击下载zip包，解压放入`themes`文件夹下<span class='btn center large'><a class="button" href='https://gitee.com/yuang01/hexo-theme-bamboo/repository/archive/dev.zip' title='开始下载'><i class='fa fa-download'></i>开始下载</a></span></div><div class="tab-pane" id="tab-id-3"><div class="note info"><p>此方法只支持Hexo在5.0.0版本以上<br><strong>通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成</strong></p></div>在你的博客根目录里<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo<span class="literal">-theme</span><span class="literal">-bamboo</span></span><br></pre></td></tr></table></figure><div class="note success"><p>升级方法：在博客根目录下，运行 <code>npm update hexo-theme-bamboo</code></p></div><h4 id="应用主题"><a href="#应用主题" class="headerlink" title="应用主题"></a>应用主题</h4><p>修改hexo根目录下的站点配置文件<code>_config.yml</code>，把主题改为<code>bamboo</code></p><p>接着在hexo根目录下新建文件<code>_config.bamboo.yml</code>,从<code>node_modules</code>文件夹下找到<code>hexo-theme-bamboo</code>文件夹下的<code>_config.yml</code>，将里面的内容复制到<code>_config.bamboo.yml</code>文件中即可，在<code>_config.bamboo.yml</code>文件中对主题进行配置</p></div></div></div><h2 class="bamboo-h " id="基本配置1e7ptlbvd5p">基本配置</h2><br/><h3 id="切换主题"><a href="#切换主题" class="headerlink" title="切换主题"></a>切换主题</h3><p>修改 Hexo 根目录下的 <code>_config.yml</code> 的 <code>theme</code> 的值：<code>theme: hexo-theme-bamboo</code></p><h4 id="config-yml-文件的其它修改建议"><a href="#config-yml-文件的其它修改建议" class="headerlink" title="_config.yml 文件的其它修改建议"></a><code>_config.yml</code> 文件的其它修改建议</h4><ul><li>请修改 <code>_config.yml</code> 的 <code>url</code> 的值为你的网站主 <code>URL</code>（如：<code>http://xxx.github.io</code>）。<code>author</code>值改为你的名称（如：yuang），<code>description</code>值随便写一段描述（如：千磨万击还坚劲，任尔东西南北风）</li><li>如果你是中文用户，则建议修改 <code>language</code> 的值为 <code>zh-CN</code>。</li></ul><h3 id="代码高亮"><a href="#代码高亮" class="headerlink" title="代码高亮"></a>代码高亮</h3><p>本主题支持三种代码高亮方式，前两种是hexo内置的<code>highlight</code>和<code>prismjs</code>，后一种是使用的插件<code>hexo-prism-plugin</code>。三种方式看个人喜好选择一种作为高亮</p><div class="tabs" id="tab-id"><ul class="nav-tabs"><li class="tab active"><a class="#tab-id-1">highlight (默认)</a></li><li class="tab"><a class="#tab-id-2">prismjs</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tab-id-1"><p>首先需要在<span class='pbg success'>根目录下的_config.yml 文件中</span>，将<code>highlight</code>的<code>enable</code>设置为true，这样就开启了highlight的代码高亮，默认这个是开启的。然后你可以在<span class='pbg success'>本主题目录下的_config.yml 文件中</span>通过<code>highlight</code>参数，自定义代码高亮颜色，如下所示</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://github.com/chriskempson/tomorrow-theme</span></span><br><span class="line"><span class="attr">highlight:</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">'#2d2d2d'</span></span><br><span class="line"> <span class="attr">currentLine:</span> <span class="string">'#393939'</span></span><br><span class="line"> <span class="attr">selection:</span> <span class="string">'#515151'</span></span><br><span class="line"> <span class="attr">foreground:</span> <span class="string">'#cccccc'</span></span><br><span class="line"> <span class="attr">comment:</span> <span class="string">'#999999'</span></span><br><span class="line"> <span class="attr">red:</span> <span class="string">'#f2777a'</span></span><br><span class="line"> <span class="attr">orange:</span> <span class="string">'#f99157'</span></span><br><span class="line"> <span class="attr">yellow:</span> <span class="string">'#ffcc66'</span></span><br><span class="line"> <span class="attr">green:</span> <span class="string">'#99cc99'</span></span><br><span class="line"> <span class="attr">aqua:</span> <span class="string">'#66cccc'</span></span><br><span class="line"> <span class="attr">blue:</span> <span class="string">'#6699cc'</span></span><br><span class="line"> <span class="attr">purple:</span> <span class="string">'#cc99cc'</span></span><br></pre></td></tr></table></figure></div><div class="tab-pane" id="tab-id-2"><p>请先确保你的<code>hexo版本为5.0</code>以上,在根目录下的<code>package.json</code>中可以查看hexo的版本。如果不是5.0.以上，请先升级，例如在根目录下使用如下命令，这个下载的版本号是5.3.0版本，你可以指定下载最新的版本</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo@5.3.0</span><br></pre></td></tr></table></figure><p>首先需要在<span class='pbg info'>根目录下的_config.yml 文件中</span>，将<code>highlight</code>的<code>enable</code>设置为false，然后<br>将<code>prismjs</code>的<code>enable</code>设置为true，如下所示</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">prismjs:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">tab_replace:</span> <span class="string">''</span></span><br></pre></td></tr></table></figure><p>最后可以通过<span class='pbg info'>本主题目录下的_config.yml 文件中</span><code>prismjs</code>参数来选择主题<br>例如:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">prismjs:</span></span><br><span class="line"> <span class="attr">theme:</span> <span class="string">'default'</span> <span class="comment"># default, coy, dark, funky, okaidia, solarizedlight, tomorrow, twilight</span></span><br></pre></td></tr></table></figure><p>另外，当你使用的是<code>prismjs</code>作为代码高亮的话,你还可以在单独的文章中设置代码高亮主题，这样可以实现不同的页面，有不同的代码高亮主题，文章中设置代码如下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">title:</span> <span class="string">Hexo主题--Bamboo介绍</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2021-01-5</span> <span class="number">23</span><span class="string">:28</span></span><br><span class="line"><span class="attr">swiper:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">swiperImg:</span> <span class="string">'/medias/11.jpg'</span></span><br><span class="line"><span class="attr">img:</span> <span class="string">'/medias/7.jpg'</span></span><br><span class="line"><span class="attr">categories:</span> <span class="string">前端</span></span><br><span class="line"><span class="attr">tags:</span> [<span class="string">Hexo</span>, <span class="string">hexo-theme-bamboo</span>]</span><br><span class="line"><span class="attr">top:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">prismjs:</span> <span class="string">dark</span> <span class="comment"># 设置该篇文章的代码高亮主题为dark</span></span><br></pre></td></tr></table></figure></div></div></div><h3 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h3><p>本主题中还使用到了 <a href="https://github.com/wzpan/hexo-generator-search">hexo-generator-search</a> 的 Hexo 插件来做内容搜索，安装命令如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-search --save</span><br></pre></td></tr></table></figure><p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line"> <span class="attr">field:</span> <span class="string">post</span></span><br></pre></td></tr></table></figure><p>在主题文件夹下的<code>_config.yml</code>文件中设置<code>search</code>为true或者false控制显示隐藏</p><h3 id="新建分类-categories-页"><a href="#新建分类-categories-页" class="headerlink" title="新建分类 categories 页"></a>新建分类 categories 页</h3><p><code>categories</code> 页是用来展示所有分类的页面，也就是导航上的分类页面，如果在你的博客 <code>source</code> 目录下还没有 <code>categories/index.md</code> 文件，那么你就需要手动或者使用命令新建一个，命令如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page <span class="string">"categories"</span></span><br></pre></td></tr></table></figure><p>编辑你刚刚新建的页面文件 <code>/source/categories/index.md</code>，<strong>至少需要以下内容</strong>：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">categories</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2020-09-14 15:30:30</span></span><br><span class="line"><span class="attr">type:</span> <span class="string">"categories"</span></span><br><span class="line"><span class="attr">layout:</span> <span class="string">"categories"</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><h3 id="新建标签-tags-页"><a href="#新建标签-tags-页" class="headerlink" title="新建标签 tags 页"></a>新建标签 tags 页</h3><p><code>tags</code> 页是用来展示所有标签的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>tags/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page <span class="string">"tags"</span></span><br></pre></td></tr></table></figure><p>编辑你刚刚新建的页面文件 <code>/source/tags/index.md</code>，<strong>至少需要以下内容</strong>：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">tags</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2020-09-14 15:30:30</span></span><br><span class="line"><span class="attr">type:</span> <span class="string">"tags"</span></span><br><span class="line"><span class="attr">layout:</span> <span class="string">"tags"</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><h3 id="新建友情链接-friends-页"><a href="#新建友情链接-friends-页" class="headerlink" title="新建友情链接 friends 页"></a>新建友情链接 friends 页</h3><p><code>friends</code> 页是用来展示<strong>友情连接</strong>信息的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>friends/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page <span class="string">"friends"</span></span><br></pre></td></tr></table></figure><p>编辑你刚刚新建的页面文件 <code>/source/friends/index.md</code></p><div class="tabs" id="tab-id"><ul class="nav-tabs"><li class="tab active"><a class="#tab-id-1">通过json文件生成</a></li><li class="tab"><a class="#tab-id-2">通过github issue动态获取</a></li><li class="tab"><a class="#tab-id-3">或者固定的友链地址</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tab-id-1"><blockquote><p>该功能需要主题版本为<code>3.2.2+</code></p></blockquote><div class="tagLink"><a class="link-card" title="通过json生成site-card标签" href="/post/getjson/site/"><span class="link-card-backdrop" style="background-image: url(https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp)"></span><div class="left"><img src="https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp" class="lazyload placeholder" data-srcset="https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">通过json生成site-card标签</p><p class="url">/post/getjson/site/</p></div></a></div></div><div class="tab-pane" id="tab-id-2"><blockquote><p>该功能需要主题版本为<code>2.1.5+</code></p></blockquote><p>这时候会生成<code>source/friends/index.md</code>文件，在md文件里自定义写友链就行了。然后你可以阅读下面这篇文章，使用<code>github</code>或者<code>gitee</code>来生成友链</p><div class="tagLink"><a class="link-card" title="issues-sites标签" href="/post/issuessites/"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">issues-sites标签</p><p class="url">/post/issuessites/</p></div></a></div></div><div class="tab-pane" id="tab-id-3"><p>如果你不会用json生成site-card标签或者使用github issue标签当做友链页面，你也可以创建一个.md文件，通过如下标签将友链地址写成固定的也是可以的</p><div class="tagLink"><a class="link-card" title="site-card" href="/post/site-card/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">site-card</p><p class="url">/post/site-card/</p></div></a></div></div></div></div><h3 id="新建关于我-about-页"><a href="#新建关于我-about-页" class="headerlink" title="新建关于我 about 页"></a>新建关于我 about 页</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page <span class="string">"about"</span></span><br></pre></td></tr></table></figure><p>然后参考：</p><div class="tagLink"><a class="link-card" title="site-card" href="/post/new-about/index/"><span class="link-card-backdrop" style="background-image: url(https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp)"></span><div class="left"><img src="https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" class="lazyload placeholder" data-srcset="https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">site-card</p><p class="url">/post/new-about/index/</p></div></a></div><h3 id="新建图库页面"><a href="#新建图库页面" class="headerlink" title="新建图库页面"></a>新建图库页面</h3><p>跟上面这些页面一样，自己新建md页面，然后使用下面三种标签即可快速生成图库页面<br>首先使用分组标签</p><div class="tagLink"><a class="link-card" title="gallerygroup标签" href="/post/gallerygroup/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">gallerygroup标签</p><p class="url">/post/gallerygroup/</p></div></a></div><p>然后新建图库详情页面，然后使用下面两种标签中的任意一种：</p><div class="tagLink"><a class="link-card" title="gallery标签" href="/post/gallery/"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/80/v2-29e78b52051ce542adf6d786d61fbd19_1440w.webp)"></span><div class="left"><img src="https://pic2.zhimg.com/80/v2-29e78b52051ce542adf6d786d61fbd19_1440w.webp" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-29e78b52051ce542adf6d786d61fbd19_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">gallery标签</p><p class="url">/post/gallery/</p></div></a></div><div class="tagLink"><a class="link-card" title="通过文件夹获取图片标签" href="/post/getphoto/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">通过文件夹获取图片标签</p><p class="url">/post/getphoto/</p></div></a></div><div class="tagLink"><a class="link-card" title="通过json获取图片集" href="/post/getjson/photo/"><span class="link-card-backdrop" style="background-image: url(https://pic1.zhimg.com/80/v2-5312b20fe7fd3fbc62218e1027865551_1440w.webp)"></span><div class="left"><img src="https://pic1.zhimg.com/80/v2-5312b20fe7fd3fbc62218e1027865551_1440w.webp" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-5312b20fe7fd3fbc62218e1027865551_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">通过json获取图片集</p><p class="url">/post/getjson/photo/</p></div></a></div><h3 id="中文链接转拼音（可选的）"><a href="#中文链接转拼音（可选的）" class="headerlink" title="中文链接转拼音（可选的）"></a>中文链接转拼音（可选的）</h3><p>如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 <code>SEO</code>，且 <code>gitment</code> 评论对中文链接也不支持。我们可以用 <a href="https://github.com/viko16/hexo-permalink-pinyin">hexo-permalink-pinyin</a> Hexo 插件使在生成文章时生成中文拼音的永久链接。<br>安装命令如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo-permalink-pinyin --save</span><br></pre></td></tr></table></figure><p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">permalink_pinyin:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">separator:</span> <span class="string">'-'</span> <span class="comment"># default: '-'</span></span><br></pre></td></tr></table></figure><blockquote><p><strong>注</strong>：除了此插件外，<a href="https://github.com/rozbo/hexo-abbrlink">hexo-abbrlink</a> 插件也可以生成非中文的链接。</p></blockquote><h3 id="添加-RSS-订阅支持（可选的）"><a href="#添加-RSS-订阅支持（可选的）" class="headerlink" title="添加 RSS 订阅支持（可选的）"></a>添加 RSS 订阅支持（可选的）</h3><p>本主题中还使用到了 <a href="https://github.com/hexojs/hexo-generator-feed">hexo-generator-feed</a> 的 Hexo 插件来做 <code>RSS</code>，安装命令如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure><p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">feed:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">atom</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">atom.xml</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">20</span></span><br><span class="line"> <span class="attr">hub:</span></span><br><span class="line"> <span class="attr">content:</span></span><br><span class="line"> <span class="attr">content_limit:</span> <span class="number">140</span></span><br><span class="line"> <span class="attr">content_limit_delim:</span> <span class="string">' '</span></span><br><span class="line"> <span class="attr">order_by:</span> <span class="string">-date</span></span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="Pjax23vb1lykl58">Pjax</h2><br/><p>页面不刷新跳转，音乐可以不间断播放。关闭则跳转页面时候刷新页面</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">pjax:</span></span><br><span class="line"> <span class="attr">on:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">animation:</span> <span class="string">circle</span> <span class="comment"># false, nprogress, circle</span></span><br><span class="line"> <span class="attr">animationColor:</span> <span class="string">'orangered'</span> <span class="comment"># animation为 nprogress时候的动画颜色, red or #000 ...</span></span><br><span class="line"> <span class="attr">cacheBust:</span> <span class="literal">false</span> <span class="comment"># url 地址追加时间戳，用以避免浏览器缓存</span></span><br><span class="line"> <span class="attr">timeout:</span> <span class="number">5000</span> <span class="comment"># The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.</span></span><br><span class="line"> <span class="attr">banUrl:</span> <span class="comment"># 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取</span></span><br><span class="line"> <span class="comment"># - '/xxx' </span></span><br><span class="line"> <span class="comment"># - '/xxx' </span></span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="博主源码19akyepah7o">博主源码</h2><br/><p>不是主题源码，是这个网站的源码, 可以作为参考。</p><div class="tagLink"><a class="link-card" title="本站源码" href="https://github.com/yuang01/yuang01.github.io/tree/hexo"><span class="link-card-backdrop" style="background-image: url(https://pic2.zhimg.com/v2-fb4f1a018af1e161b8d851dc02513419_b.jpg)"></span><div class="left"><img src="https://pic2.zhimg.com/v2-fb4f1a018af1e161b8d851dc02513419_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-fb4f1a018af1e161b8d851dc02513419_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">本站源码</p><p class="url">https://github.com/yuang01/yuang01.github.io/tree/hexo</p></div></a></div>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> hexo-theme-bamboo </tag>
</tags>
</entry>
<entry>
<title>Front-matter介绍</title>
<link href="/post/hexo-theme-bamboo/front-matter/"/>
<url>/post/hexo-theme-bamboo/front-matter/</url>
<content type="html"><![CDATA[<p>这个指的是你在你的文章页面里面写的参数，针对的是这一篇文章，例如</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">Hexo主题--Bamboo介绍</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2020-09-14 </span><span class="number">14</span><span class="string">:06</span></span><br><span class="line"><span class="attr">swiper:</span> <span class="literal">true</span> <span class="comment"># 将改文章放入轮播图中</span></span><br><span class="line"><span class="attr">swiperImg:</span> <span class="string">'/medias/1.jpg'</span> <span class="comment"># 该文章在轮播图中的图片，可以是本地目录下图片也可以是http://xxx图片</span></span><br><span class="line"><span class="attr">img:</span> <span class="string">'/medias/1.jpg'</span> <span class="comment"># 该文章图片，可以是本地目录下图片也可以是http://xxx图片</span></span><br><span class="line"><span class="attr">categories:</span> <span class="string">前端</span></span><br><span class="line"><span class="attr">tags:</span> [<span class="string">Hexo</span>, <span class="string">hexo-theme-bamboo</span>]</span><br><span class="line"><span class="attr">top:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><p><code>Front-matter</code> 选项中的所有内容均为<strong>非必填</strong>的。但我仍然建议至少填写 <code>title</code> 和 <code>date</code> 的值。</p><table><thead><tr><th>配置选项</th><th>默认值</th><th>描述</th></tr></thead><tbody><tr><td>title</td><td><code>Markdown</code> 的文件标题</td><td>文章标题，强烈建议填写此选项</td></tr><tr><td>date</td><td>文件创建时的日期时间</td><td>发布时间，强烈建议填写此选项，且最好保证全局唯一</td></tr><tr><td>swiper</td><td>false</td><td>表示该文章是否需要加入到首页轮播封面中</td></tr><tr><td>swiperImg</td><td>无</td><td>表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片</td></tr><tr><td>swiperDesc</td><td>无</td><td>表示该文章在首页轮播封面需要显示的文字描述（摘要），如果没有，则使用<code>excerpt</code>，如果<code>excerpt</code>也没有，则取文章内容</td></tr><tr><td>img</td><td>无</td><td>文章特征图，该文章显示的图片，没有则默认使用文章的特色图片</td></tr><tr><td>excerpt</td><td>无</td><td>文章描述（摘要），该文章在首页的描述文字，如果没有，则取<code>swiperDesc</code>,如果<code>swiperDesc</code>也没有，则取文章内容（优先取<code><!-- more --></code>上面的内容）</td></tr><tr><td>top</td><td>false</td><td>将该值设为true，则将该篇文章显示在首页的置顶栏目中</td></tr><tr><td>toc</td><td>true</td><td>将该值设为false，则该篇文章不显示右侧目录</td></tr><tr><td>tocOpen</td><td>true</td><td>将该值设为false，则该篇文章右侧目录默认收缩</td></tr><tr><td>onlyTitle</td><td>false</td><td>文章详情页头部是否只显示标题，不显示日期等信息</td></tr><tr><td>comments</td><td>true</td><td>将该值设为false，则该篇文章不显示评论</td></tr><tr><td>share</td><td>true</td><td>将该值设为false，则该篇文章不显示分享按钮</td></tr><tr><td>copyright</td><td>true</td><td>将该值设为false，则该篇文章不显示版权声明</td></tr><tr><td>donate</td><td>true</td><td>将该值设为false，则该篇文章不显示打赏按钮</td></tr><tr><td>bgImg</td><td>-</td><td>单独为这篇文章设置背景图片或者背景颜色，可以是数组，数组里面放图片链接，可以是字符串，字符串里面是颜色值，空值则背景颜色透明</td></tr><tr><td>bgImgTransition</td><td>fade</td><td>该篇文章的bgImg设置为数组,该值表示背景图片切换的动画, 有三种值（fade, scale, translate-fade）</td></tr><tr><td>bgImgDelay</td><td>180000(三分钟)</td><td>该篇文章的bgImg设置为数组,该值表示背景图片切换的延迟时间,</td></tr><tr><td>categories</td><td>无</td><td>文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类</td></tr><tr><td>prismjs</td><td>无</td><td>如果使用的是hexo自带的prismjs代码高亮，通过设置该值为该篇文章设置不同的代码高亮主题（default, coy, dark, funky, okaidia, solarizedlight, tomorrow, twilight）</td></tr><tr><td>tags</td><td>无</td><td>文章标签，一篇文章可以多个标签</td></tr><tr><td>mathjax</td><td>false</td><td>mathjax公式</td></tr><tr><td>imgTop</td><td>true</td><td>设置为<code>false</code>则文章和自定义页面顶部不要图片</td></tr></tbody></table>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> hexo-theme-bamboo </tag>
</tags>
</entry>
<entry>
<title>Bamboo主题-内置标签</title>
<link href="/post/hexo-theme-bamboo/tags/"/>
<url>/post/hexo-theme-bamboo/tags/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="内置标签9dcvy4f204">内置标签</h2><br/><div class="note info"><p><strong>提示</strong></p><p>使用该功能，请先将hexo版本升级到5.0.0以上，在根目录下的<code>package.json</code>文件中可查看hexo的版本号</p></div><div class="link-group"><div class="tagLink"><a class="link-card" title="按钮" href="/post/btn/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">按钮</p><p class="url">/post/btn/</p></div></a></div><div class="tagLink"><a class="link-card" title="audio音频" href="/post/audio/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">audio音频</p><p class="url">/post/audio/</p></div></a></div><div class="tagLink"><a class="link-card" title="folding折叠" href="/post/folding/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">folding折叠</p><p class="url">/post/folding/</p></div></a></div><div class="tagLink"><a class="link-card" title="checkbox多选" href="/post/checkbox/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">checkbox多选</p><p class="url">/post/checkbox/</p></div></a></div><div class="tagLink"><a class="link-card" title="github卡片" href="/post/ghcard/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">github卡片</p><p class="url">/post/ghcard/</p></div></a></div><div class="tagLink"><a class="link-card" title="gallery图片" href="/post/gallery/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">gallery图片</p><p class="url">/post/gallery/</p></div></a></div><div class="tagLink"><a class="link-card" title="galleryGroup图片" href="/post/gallerygroup/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">galleryGroup图片</p><p class="url">/post/gallerygroup/</p></div></a></div><div class="tagLink"><a class="link-card" title="inlineimage和image图片" href="/post/inlineimage/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">inlineimage和image图片</p><p class="url">/post/inlineimage/</p></div></a></div><div class="tagLink"><a class="link-card" title="link标签" href="/post/link/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">link标签</p><p class="url">/post/link/</p></div></a></div><div class="tagLink"><a class="link-card" title="note标签" href="/post/note/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">note标签</p><p class="url">/post/note/</p></div></a></div><div class="tagLink"><a class="link-card" title="段落文本P" href="/post/p/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">段落文本P</p><p class="url">/post/p/</p></div></a></div><div class="tagLink"><a class="link-card" title="单选按钮" href="/post/radio/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">单选按钮</p><p class="url">/post/radio/</p></div></a></div><div class="tagLink"><a class="link-card" title="文本高亮pbg" href="/post/pbg/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">文本高亮pbg</p><p class="url">/post/pbg/</p></div></a></div><div class="tagLink"><a class="link-card" title="site-cardb标签" href="/post/site-card/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">site-cardb标签</p><p class="url">/post/site-card/</p></div></a></div><div class="tagLink"><a class="link-card" title="tab标签" href="/post/tab/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">tab标签</p><p class="url">/post/tab/</p></div></a></div><div class="tagLink"><a class="link-card" title="span文字颜色" href="/post/span/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">span文字颜色</p><p class="url">/post/span/</p></div></a></div><div class="tagLink"><a class="link-card" title="timeline时间线" href="/post/timeline/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">timeline时间线</p><p class="url">/post/timeline/</p></div></a></div><div class="tagLink"><a class="link-card" title="text文本样式标签" href="/post/text/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">text文本样式标签</p><p class="url">/post/text/</p></div></a></div><div class="tagLink"><a class="link-card" title="video视频" href="/post/video/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">video视频</p><p class="url">/post/video/</p></div></a></div><div class="tagLink"><a class="link-card" title="title标题" href="/post/title/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">title标题</p><p class="url">/post/title/</p></div></a></div><div class="tagLink"><a class="link-card" title="noteblock标签" href="/post/noteblock/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">noteblock标签</p><p class="url">/post/noteblock/</p></div></a></div><div class="tagLink"><a class="link-card" title="progress标签" href="/post/progress/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">progress标签</p><p class="url">/post/progress/</p></div></a></div><div class="tagLink"><a class="link-card" title="issuesSites标签" href="/post/issuessites/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">issuesSites标签</p><p class="url">/post/issuessites/</p></div></a></div><div class="tagLink"><a class="link-card" title="issuesTimeline标签" href="/post/issuestimeline/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">issuesTimeline标签</p><p class="url">/post/issuestimeline/</p></div></a></div><div class="tagLink"><a class="link-card" title="getFiles文件获取标签" href="/post/getfiles/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">getFiles文件获取标签</p><p class="url">/post/getfiles/</p></div></a></div><div class="tagLink"><a class="link-card" title="mermaid流程图标签" href="/post/mermaid/index/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">mermaid流程图标签</p><p class="url">/post/mermaid/index/</p></div></a></div><div class="tagLink"><a class="link-card" title="mathjax公式" href="/post/mathjax/index/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">mathjax公式</p><p class="url">/post/mathjax/index/</p></div></a></div><div class="tagLink"><a class="link-card" title="酷炫按钮" href="/post/btn-preloader/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">酷炫按钮</p><p class="url">/post/btn-preloader/</p></div></a></div><div class="tagLink"><a class="link-card" title="轮播图swiper" href="/post/swiper/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">轮播图swiper</p><p class="url">/post/swiper/</p></div></a></div><div class="tagLink"><a class="link-card" title="通过文件夹获取图片标签getPhoto" href="/post/getphoto/"><span class="link-card-backdrop" style="background-image: url(https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp)"></span><div class="left"><img src="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-e5c15010b8ba4608a1974403a02a2da0_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">通过文件夹获取图片标签getPhoto</p><p class="url">/post/getphoto/</p></div></a></div><div class="tagLink"><a class="link-card" title="通过json获取图片集" href="/post/getjson/photo/"><span class="link-card-backdrop" style="background-image: url(https://pic1.zhimg.com/80/v2-5312b20fe7fd3fbc62218e1027865551_1440w.webp)"></span><div class="left"><img src="https://pic1.zhimg.com/80/v2-5312b20fe7fd3fbc62218e1027865551_1440w.webp" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-5312b20fe7fd3fbc62218e1027865551_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">通过json获取图片集</p><p class="url">/post/getjson/photo/</p></div></a></div><div class="tagLink"><a class="link-card" title="通过json生成site-card标签" href="/post/getjson/site/"><span class="link-card-backdrop" style="background-image: url(https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp)"></span><div class="left"><img src="https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp" class="lazyload placeholder" data-srcset="https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">通过json生成site-card标签</p><p class="url">/post/getjson/site/</p></div></a></div><div class="tagLink"><a class="link-card" title="talk-card标签" href="/post/getjson/talk/"><span class="link-card-backdrop" style="background-image: url(https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp)"></span><div class="left"><img src="https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp" class="lazyload placeholder" data-srcset="https://picx.zhimg.com/80/v2-3486dae2687982e8a141c23d922b9936_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">talk-card标签</p><p class="url">/post/getjson/talk/</p></div></a></div></div><p>可通过如下参数配置基本颜色和默认图片</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tag标签 按钮，文本高亮等等..</span></span><br><span class="line"><span class="attr">tag_plugins:</span></span><br><span class="line"> <span class="comment"># 所有标签用到的颜色值，可自行修改</span></span><br><span class="line"> <span class="attr">warningColor:</span> <span class="string">'#e6a23c'</span></span><br><span class="line"> <span class="attr">dangerColor:</span> <span class="string">'#f66'</span></span><br><span class="line"> <span class="attr">successColor:</span> <span class="string">'#67c23a'</span></span><br><span class="line"> <span class="attr">infoColor:</span> <span class="string">'#409eff'</span></span><br><span class="line"> <span class="attr">yellow:</span> <span class="string">'#f9ed69'</span></span><br><span class="line"> <span class="attr">red:</span> <span class="string">'#f47983'</span></span><br><span class="line"> <span class="attr">green:</span> <span class="string">'#16a951'</span></span><br><span class="line"> <span class="attr">blue:</span> <span class="string">'#177cb0'</span></span><br><span class="line"> <span class="attr">cyan:</span> <span class="string">'#00e09e'</span></span><br><span class="line"> <span class="comment"># link标签的左侧默认图片</span></span><br><span class="line"> <span class="attr">linkImg:</span> <span class="string">'https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg'</span></span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="结语ajhr4z3mak0">结语</h2><br/><p>你都看到这了，诺 <img no-lazy class="inline" src="https://img10.360buyimg.com/ddimg/jfs/t1/153554/13/17636/9218/601cc240Eaa721783/72f7a6d04e586fb6.jpg" style="height:80px;"/> 太棒了。</p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> hexo-theme-bamboo </tag>
</tags>
</entry>
<entry>
<title>issues-sites标签</title>
<link href="/post/issuessites/"/>
<url>/post/issuessites/</url>
<content type="html"><![CDATA[<p>该标签会去拿到某个repo仓库的issue内容，用<code>sites标签</code>的形式显示出来，可以用做网站的<code>友链</code>功能<br>该标签和<code>issues-timeline</code>标签都适用于<code>github</code>和<code>gitee</code></p><h2 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h2><p>issue里面需要有JSON代码块：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"title"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"url"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"avatar"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"screenshot"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">""</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="Github写法"><a href="#Github写法" class="headerlink" title="Github写法"></a>Github写法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% issues sites | api=https://api.github.com/repos/yuang01/friends/issues?sort=updated&state=open&page=1&per<span class="emphasis">_page=100&labels=active %}</span></span><br></pre></td></tr></table></figure><h2 id="Gitee写法"><a href="#Gitee写法" class="headerlink" title="Gitee写法"></a>Gitee写法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% issues sites | api=https://gitee.com/api/v5/repos/yuang01/friends/issues?sort=updated&state=open&page=1&per<span class="emphasis">_page=100&labels=active %}</span></span><br></pre></td></tr></table></figure><p><code>yuang01</code>: 用户名，<code>friends</code>: 仓库名<br>上例中的 <code>labels=active</code> 参数可以控制默认的 issue 不显示，只有自己审核通过添加了 <code>active</code> 标签之后才会显示。上述示例对应的仓库链接：</p><div class="link-group"><div class="tagLink"><a class="link-card" title="yuang01/friends (Github)" href="https://github.com/yuang01/friends/issues"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">yuang01/friends (Github)</p><p class="url">https://github.com/yuang01/friends/issues</p></div></a></div><div class="tagLink"><a class="link-card" title="yuang01/friends (Gitee)" href="https://gitee.com/yuang01/friends/issues"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">yuang01/friends (Gitee)</p><p class="url">https://gitee.com/yuang01/friends/issues</p></div></a></div></div><h2 id="效果-Github-example"><a href="#效果-Github-example" class="headerlink" title="效果(Github example)"></a>效果(Github example)</h2><div class="issues-api sites"api="https://api.github.com/repos/yuang01/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active"></div><h2 id="效果-Gitee-example"><a href="#效果-Gitee-example" class="headerlink" title="效果(Gitee example)"></a>效果(Gitee example)</h2><div class="issues-api sites"api="https://gitee.com/api/v5/repos/yuang01/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active"></div><h2 id="分组显示"><a href="#分组显示" class="headerlink" title="分组显示"></a>分组显示</h2><p>sites 类型的 issues 默认不分组，如果需要分组，可指定分组依据「key」，和分组白名单「value1」「value2」等，例如：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">group=version:v4,v3,v2</span><br></pre></td></tr></table></figure><p>这个参数的作用就是，筛选出 JSON 中包含 <code>"version": "v4"</code> 或者 <code>"version": "v3"</code> 或者 <code>"version": "v2"</code> 的数据，并分组显示。</p><h2 id="分组写法"><a href="#分组写法" class="headerlink" title="分组写法"></a>分组写法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% issues sites | api=https://api.github.com/repos/yuang01/examples/issues?sort=updated&state=open&page=1&per<span class="emphasis">_page=100 | group=version:版本：v3.0,版本：v2.0,版本：v1.0 %}</span></span><br></pre></td></tr></table></figure><p>比较长，鼠标往后拖<br>分组示例对应的仓库链接：</p><div class="tagLink"><a class="link-card" title="yuang01/examples (Github)" href="https://github.com/yuang01/examples/issues"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">yuang01/examples (Github)</p><p class="url">https://github.com/yuang01/examples/issues</p></div></a></div><h2 id="分组效果-example"><a href="#分组效果-example" class="headerlink" title="分组效果(example)"></a>分组效果(example)</h2><div class="issues-api sites"api="https://api.github.com/repos/yuang01/examples/issues?sort=updated&state=open&page=1&per_page=100"group="version:版本：v3.0,版本：v2.0,版本：v1.0"></div>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>issues-timeline标签</title>
<link href="/post/issuestimeline/"/>
<url>/post/issuestimeline/</url>
<content type="html"><![CDATA[<p>该标签会去拿到某个repo仓库的issue内容，用<code>timeline标签</code>的形式显示出来</p><h2 id="写法"><a href="#写法" class="headerlink" title="写法"></a>写法</h2><h3 id="github"><a href="#github" class="headerlink" title="github"></a>github</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% issues timeline | api=https://api.github.com/repos/yuang01/hexo-theme-bamboo/issues?sort=updated&state=closed&page=1&per<span class="emphasis">_page=100 %}</span></span><br></pre></td></tr></table></figure><blockquote><p>api=xxx:<br><code>yuang01</code>是我的github<code>用户名</code>，<code>hexo-theme-bamboo</code>是我的<code>仓库名</code>，<code>state=closed</code>，表示拿到状态为<code>close</code>的issue，根据自己实际情况更改</p></blockquote><h3 id="Gitee"><a href="#Gitee" class="headerlink" title="Gitee"></a>Gitee</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% issues timeline | api=https://gitee.com/api/v5/repos/yuang01/yuang01/issues %}</span><br></pre></td></tr></table></figure><blockquote><p>api=xxx:<br><code>yuang01</code>是我的gitee<code>用户名</code>，<code>yuang01</code>是我gitee的<code>仓库名</code>，其他参数请见文档</p></blockquote><h3 id="issue-api"><a href="#issue-api" class="headerlink" title="issue api"></a>issue api</h3><div class="link-group"><div class="tagLink"><a class="link-card" title="github的开放api" href="https://docs.github.com/cn/rest/overview/resources-in-the-rest-api"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">github的开放api</p><p class="url">https://docs.github.com/cn/rest/overview/resources-in-the-rest-api</p></div></a></div><div class="tagLink"><a class="link-card" title="gitee的开放api" href="https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoIssues"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">gitee的开放api</p><p class="url">https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoIssues</p></div></a></div></div><h3 id="repo仓库"><a href="#repo仓库" class="headerlink" title="repo仓库"></a>repo仓库</h3><p>下面的效果是来自于这这两个仓库的issue</p><div class="link-group"><div class="tagLink"><a class="link-card" title="hexo-theme-bamboo (Github)" href="https://github.com/yuang01/hexo-theme-bamboo/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">hexo-theme-bamboo (Github)</p><p class="url">https://github.com/yuang01/hexo-theme-bamboo/issues?q=is%3Aissue+is%3Aclosed+sort%3Aupdated-desc</p></div></a></div><div class="tagLink"><a class="link-card" title="yuang01 (Gitee)" href="https://gitee.com/yuang01/yuang01/issues"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">yuang01 (Gitee)</p><p class="url">https://gitee.com/yuang01/yuang01/issues</p></div></a></div></div><h2 id="Github效果-example"><a href="#Github效果-example" class="headerlink" title="Github效果(example)"></a>Github效果(example)</h2><div class="issues-api timeline"api="https://api.github.com/repos/yuang01/hexo-theme-bamboo/issues?sort=updated&state=closed&page=1&per_page=100"></div><h2 id="Gitee效果-example"><a href="#Gitee效果-example" class="headerlink" title="Gitee效果(example)"></a>Gitee效果(example)</h2><div class="issues-api timeline"api="https://gitee.com/api/v5/repos/yuang01/yuang01/issues"></div>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>galleryGroup图片</title>
<link href="/post/gallerygroup/"/>
<url>/post/gallerygroup/</url>
<content type="html"><![CDATA[<div class="note info"><p><strong>提示</strong></p><p>使用该标签请先将主题下的<code>_config.yml</code>中的<code>fancybox</code>设置为<code>true</code></p></div><h2 class="bamboo-h " id="galleryGroup图片示例1xa4u1178zr">galleryGroup图片示例</h2><br/><div class="gallery-group-main"> <figure class="gallery-group"> <img class="gallery-group-img" src='https://pic1.zhimg.com/80/v2-23c3820e8abfb1cef689531af2dc6d09_1440w.jpg?source=1940ef5c' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">壁纸</div> <p>收藏的一些壁纸</p> <a href='/gallery/bizhi'></a> </figcaption> </figure> <figure class="gallery-group"> <img class="gallery-group-img" src='https://pic1.zhimg.com/80/v2-8d542d68cbbf0e5f503da9e3f72b8447_1440w.jpg?source=1940ef5c' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">古典图片</div> <p>中国古典图片</p> <a href='/gallery/gudian'></a> </figcaption> </figure> <figure class="gallery-group"> <img class="gallery-group-img" src='https://pic1.zhimg.com/80/v2-56164ef0695767475935c9e019c594ae_1440w.jpg?source=1940ef5c' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">风景</div> <p>风景图片</p> <a href='/gallery/fengjing'></a> </figcaption> </figure> </div><h3 id="上述示例代码"><a href="#上述示例代码" class="headerlink" title="上述示例代码"></a>上述示例代码</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span><br><span class="line"> {% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/bizhi' https://pic1.zhimg.com/80/v2-23c3820e8abfb1cef689531af2dc6d09_1440w.jpg?source=1940ef5c %}</span><br><span class="line"> {% galleryGroup '古典图片' '中国古典图片' '/gallery/gudian' https://pic1.zhimg.com/80/v2-8d542d68cbbf0e5f503da9e3f72b8447_1440w.jpg?source=1940ef5c %}</span><br><span class="line"> {% galleryGroup '风景' '风景图片' '/gallery/fengjing' https://pic1.zhimg.com/80/v2-56164ef0695767475935c9e019c594ae_1440w.jpg?source=1940ef5c %}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>进度条</title>
<link href="/post/progress/"/>
<url>/post/progress/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="进度条示例5vafgy5i0e">进度条示例</h2><br/><div class="note info"><p>该标签适用版本为<code>1.8.1</code>及以上</p></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-danger" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-info" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-success" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-warning" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-primary" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><p>自定义颜色(Custom colors)</p><div class="note info"><p>该标签适用版本为<code>2.0.7+</code>及以上</p></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped" style="background-color: #000!important; width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped" style="background-color: #2f54eb!important; width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><p>进度条测试</p></div></div><h3 id="上述示例代码"><a href="#上述示例代码" class="headerlink" title="上述示例代码"></a>上述示例代码</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% progress 70 danger 进度条测试 %}</span><br><span class="line">{% progress 60 info 进度条测试 %}</span><br><span class="line">{% progress 60 success 进度条测试 %}</span><br><span class="line">{% progress 60 warning 进度条测试 %}</span><br><span class="line">{% progress 60 primary 进度条测试 %}</span><br><span class="line">自定义颜色(Custom colors)</span><br><span class="line">{% progress 60 #000 进度条测试 %}</span><br><span class="line">{% progress 60 #2f54eb 进度条测试 %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="圆形进度条示例1i2himt8ynb">圆形进度条示例</h2><br/><div class="note info"><p>该标签适用版本为<code>2.0.7+</code>及以上</p></div> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="#f66" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 245.04422698000383px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-danger"> <p>进度条测试</p> </div> </div> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="#409eff" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 163.36281798666926px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-info"> <p>进度条测试</p> </div> </div> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="#67c23a" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 326.7256359733385px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-success"> <p>进度条测试</p> </div> </div> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="#e6a23c" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 408.4070449666731px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-warning"> <p>进度条测试</p> </div> </div> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="rgba(251, 71, 59, 0.8)" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 81.68140899333463px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-primary"> <p>进度条测试</p> </div> </div><p>自定义颜色(Custom colors)</p> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="#12e9e9" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 245.04422698000383px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-#12e9e9"> <p>70%</p> </div> </div> <div class="bamboo-circle" style="height: 136px;"> <svg width="136" height="136" viewBox="0 0 272 272"> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke="#f3f3f3" stroke-width="12" fill-opacity="0"></path> <path d="M 136,136 m 0,-130 a 130,130 0 1 1 0,260 a 130,130 0 1 1 0,-260" stroke-linecap="round" stroke="skyblue" stroke-width="12" fill-opacity="0" style="stroke-dasharray: 816.8140899333462px 816.8140899333462px; stroke-dashoffset: 245.04422698000383px; transition:stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"></path> </svg> <div class="bamboo-circle-content bamboo-circle-skyblue"> <p>70%</p> </div> </div><h3 id="上述示例代码-1"><a href="#上述示例代码-1" class="headerlink" title="上述示例代码"></a>上述示例代码</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% progressCircle 70 danger 进度条测试 %}</span><br><span class="line">{% progressCircle 80 info 进度条测试 %}</span><br><span class="line">{% progressCircle 60 success 进度条测试 %}</span><br><span class="line">{% progressCircle 50 warning 进度条测试 %}</span><br><span class="line">{% progressCircle 90 primary 进度条测试 %}</span><br><span class="line">自定义颜色(Custom colors)</span><br><span class="line">{% progressCircle 70 #12e9e9 70% %}</span><br><span class="line">{% progressCircle 70 skyblue 70% %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>按钮</title>
<link href="/post/btn/"/>
<url>/post/btn/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="融入段落中按钮2b863ta3yuh">融入段落中按钮</h2><br/><p>不设置任何参数的 <span class='btn'><a class="button" href='/' title='按钮'>按钮</a></span> 适合融入段落中。</p><p>不设置任何参数的 <span class='btn warning'><a class="button" href='/' title='按钮'>按钮</a></span> 适合融入段落中。</p><p>不设置任何参数的 <span class='btn info'><a class="button" href='/' title='按钮'>按钮</a></span> 适合融入段落中。</p><p>不设置任何参数的 <span class='btn success'><a class="button" href='/' title='按钮'>按钮</a></span> 适合融入段落中。</p><p>不设置任何参数的 <span class='btn danger'><a class="button" href='/' title='按钮'>按钮</a></span> 适合融入段落中。</p><h2 id="上述实例源码"><a href="#上述实例源码" class="headerlink" title="上述实例源码"></a>上述实例源码</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。</span><br><span class="line"></span><br><span class="line">不设置任何参数的 {% btn warning, 按钮, / %} 适合融入段落中。</span><br><span class="line"></span><br><span class="line">不设置任何参数的 {% btn info, 按钮, / %} 适合融入段落中。</span><br><span class="line"></span><br><span class="line">不设置任何参数的 {% btn success, 按钮, / %} 适合融入段落中。</span><br><span class="line"></span><br><span class="line">不设置任何参数的 {% btn danger, 按钮, / %} 适合融入段落中。</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="空心和实心按钮7k1g0ukig7">空心和实心按钮</h2><br/><span class='btn hollow'><a class="button" href='https://baidu.com' title='示例博客'><i class='fa fa-qq'></i>示例博客</a></span><span class='btn solid'><a class="button" href='https://baidu.com' title='示例博客'><i class='fa fa-weixin'></i>示例博客</a></span><h2 id="上述实例源码-1"><a href="#上述实例源码-1" class="headerlink" title="上述实例源码"></a>上述实例源码</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% btn hollow, 示例博客, https://baidu.com, fa fa-qq %}</span><br><span class="line">{% btn solid, 示例博客, https://baidu.com, fa fa-weixin %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="大点的按钮和样式2mxyn6uan50">大点的按钮和样式</h2><br/><span class='btn center large'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><h2 id="上述实例源码-2"><a href="#上述实例源码-2" class="headerlink" title="上述实例源码"></a>上述实例源码</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center large, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="环形按钮2e9xuermxcn">环形按钮</h2><br/><span class='btn center large round solid'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><h2 id="上述实例源码-3"><a href="#上述实例源码-3" class="headerlink" title="上述实例源码"></a>上述实例源码</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% btn center large round solid, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="warning等颜色按钮8szk8bomqvs">warning等颜色按钮</h2><br/><span class='btn large round solid warning'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large round solid info'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large round solid success'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large round solid danger'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large solid success'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><h2 id="上述实例源码-4"><a href="#上述实例源码-4" class="headerlink" title="上述实例源码"></a>上述实例源码</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% btn large round solid warning, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large round solid info, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large round solid success, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large round solid danger, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large solid success, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="warning等颜色空心按钮2ugee8f169g">warning等颜色空心按钮</h2><br/><span class='btn large warning hollow'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large info hollow'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large success hollow'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn large danger hollow'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn success hollow'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><h2 id="上述实例源码-5"><a href="#上述实例源码-5" class="headerlink" title="上述实例源码"></a>上述实例源码</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% btn large warning hollow, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large info hollow, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large success hollow, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn large danger hollow, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn success hollow, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="warning等颜色空心环形居中按钮4koiab37k54">warning等颜色空心环形居中按钮</h2><br/><span class='btn large danger hollow center round'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><span class='btn danger hollow center round'><a class="button" href='https://baidu.com' title='开始使用'><i class='fa fa-download'></i>开始使用</a></span><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% btn large danger hollow center round, 开始使用, https://baidu.com, fa fa-download %}</span><br><span class="line">{% btn danger hollow center round, 开始使用, https://baidu.com, fa fa-download %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="带有头像和名称的按钮476o56tr4b6">带有头像和名称的按钮</h2><br/><h3 class="bamboo-h-b" id="一行两个1xon9hzexdp" style="color:!important">一行两个</h3><div></div><div class="btns circle grid2"> <a class="button" href='https://baidu.com' title='草帽海贼团'><img src='https://img2.woyaogexing.com/2021/01/30/007e3777e7e64c4aae95ae812708a7bf!400x400.jpeg'>草帽海贼团</a><a class="button" href='https://baidu.com' title='小绵羊'><img src='https://img2.woyaogexing.com/2021/01/30/4c59f9dd4aae421fae21344aec8c7b60!400x400.jpeg'>小绵羊</a><a class="button" href='https://baidu.com' title='沫兮'><img src='https://img2.woyaogexing.com/2021/01/30/1b2aec116f0b49c682badc5befd43905!400x400.jpeg'>沫兮</a><a class="button" href='https://baidu.com' title='凯爹'><img src='https://p.qqan.com/up/2021-1/16112058848478910.jpg'>凯爹</a><a class="button" href='https://baidu.com' title='阿离'><img src='https://p.qqan.com/up/2021-1/16118869719896010.jpg'>阿离</a><a class="button" href='https://baidu.com' title='韩信'><img src='https://p.qqan.com/up/2021-1/16118869704182020.jpg'>韩信</a> </div><h3 id="上述实例源码-6"><a href="#上述实例源码-6" class="headerlink" title="上述实例源码"></a>上述实例源码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle grid2 %}</span><br><span class="line"> {% cell 草帽海贼团, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/007e3777e7e64c4aae95ae812708a7bf!400x400.jpeg %}</span><br><span class="line"> {% cell 小绵羊, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/4c59f9dd4aae421fae21344aec8c7b60!400x400.jpeg %}</span><br><span class="line"> {% cell 沫兮, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/1b2aec116f0b49c682badc5befd43905!400x400.jpeg %}</span><br><span class="line"> {% cell 凯爹, https://baidu.com, https://p.qqan.com/up/2021-1/16112058848478910.jpg %}</span><br><span class="line"> {% cell 阿离, https://baidu.com, https://p.qqan.com/up/2021-1/16118869719896010.jpg %}</span><br><span class="line"> {% cell 韩信, https://baidu.com, https://p.qqan.com/up/2021-1/16118869704182020.jpg %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="一行三个541nxtk6sl4" style="color:!important">一行三个</h3><div></div><div class="btns circle grid3"> <a class="button" href='https://baidu.com' title='QQ头像'><img src='http://q1.qlogo.cn/g?b=qq&nk=1730241541&s=640'>QQ头像</a><a class="button" href='https://baidu.com' title='随机动漫头像'><img src='http://api.btstu.cn/sjtx/api.php?lx=c1&format=images'>随机动漫头像</a><a class="button" href='https://baidu.com' title='随机男生头像'><img src='http://api.btstu.cn/sjtx/api.php?lx=a1&format=images'>随机男生头像</a><a class="button" href='https://baidu.com' title='随机女生头像'><img src='http://api.btstu.cn/sjtx/api.php?lx=b1&format=images'>随机女生头像</a><a class="button" href='https://baidu.com' title='随机动漫女头像'><img src='http://api.btstu.cn/sjtx/api.php?lx=c2&format=images'>随机动漫女头像</a><a class="button" href='https://baidu.com' title='随机动漫男头像'><img src='http://api.btstu.cn/sjtx/api.php?lx=c3&format=images'>随机动漫男头像</a> </div><h3 id="上述实例源码-7"><a href="#上述实例源码-7" class="headerlink" title="上述实例源码"></a>上述实例源码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle grid3 %}</span><br><span class="line"> {% cell QQ头像, https://baidu.com, http://q1.qlogo.cn/g?b=qq&nk=1730241541&s=640 %}</span><br><span class="line"> {% cell 随机动漫头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c1&format=images %}</span><br><span class="line"> {% cell 随机男生头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=a1&format=images %}</span><br><span class="line"> {% cell 随机女生头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=b1&format=images %}</span><br><span class="line"> {% cell 随机动漫女头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c2&format=images %}</span><br><span class="line"> {% cell 随机动漫男头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c3&format=images %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="一行四个1t832yra8wf" style="color:!important">一行四个</h3><div></div><div class="btns circle grid4"> <a class="button" href='https://baidu.com' title='随机Github头像'><img src='https://api.prodless.com/avatar.png'>随机Github头像</a><a class="button" href='https://baidu.com' title='随机Github头像'><img src='https://api.prodless.com/avatar.png'>随机Github头像</a><a class="button" href='https://baidu.com' title='随机Github头像'><img src='https://api.prodless.com/avatar.png'>随机Github头像</a><a class="button" href='https://baidu.com' title='随机Github头像'><img src='https://api.prodless.com/avatar.png'>随机Github头像</a><a class="button" href='https://baidu.com' title='随机Github头像'><img src='https://api.prodless.com/avatar.png'>随机Github头像</a> </div><h3 id="上述实例源码-8"><a href="#上述实例源码-8" class="headerlink" title="上述实例源码"></a>上述实例源码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle grid4 %}</span><br><span class="line"> {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}</span><br><span class="line"> {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}</span><br><span class="line"> {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}</span><br><span class="line"> {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}</span><br><span class="line"> {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h3 class="bamboo-h-b" id="一行五个gz7tv7g6zy" style="color:!important">一行五个</h3><div></div><div class="btns circle grid5"> <a class="button" href='https://baidu.com' title='随机头像'><img src='https://picsum.photos/200'>随机头像</a><a class="button" href='https://baidu.com' title='随机头像id'><img src='https://picsum.photos/id/1/200'>随机头像id</a><a class="button" href='https://baidu.com' title='随机头像id'><img src='https://picsum.photos/id/2/200'>随机头像id</a><a class="button" href='https://baidu.com' title='随机头像id'><img src='https://picsum.photos/id/3/200'>随机头像id</a><a class="button" href='https://baidu.com' title='随机头像id'><img src='https://picsum.photos/id/4/200'>随机头像id</a> </div><div class="btns circle grid5"> <a class="button" href='https://baidu.com' title='随机风景'><img src='https://api.ixiaowai.cn/gqapi/gqapi.php'>随机风景</a><a class="button" href='https://baidu.com' title='随机风景'><img src='https://api.ixiaowai.cn/gqapi/gqapi.php'>随机风景</a><a class="button" href='https://baidu.com' title='随机风景'><img src='https://api.ixiaowai.cn/gqapi/gqapi.php'>随机风景</a><a class="button" href='https://baidu.com' title='随机风景'><img src='https://api.ixiaowai.cn/gqapi/gqapi.php'>随机风景</a><a class="button" href='https://baidu.com' title='随机风景'><img src='https://api.ixiaowai.cn/gqapi/gqapi.php'>随机风景</a> </div><h3 id="上述实例源码-9"><a href="#上述实例源码-9" class="headerlink" title="上述实例源码"></a>上述实例源码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle grid5 %}</span><br><span class="line"> {% cell 随机头像, https://baidu.com, https://picsum.photos/200 %}</span><br><span class="line"> {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/1/200 %}</span><br><span class="line"> {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/2/200 %}</span><br><span class="line"> {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/3/200 %}</span><br><span class="line"> {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/4/200 %}</span><br><span class="line">{% endbtns %}</span><br><span class="line"></span><br><span class="line">{% btns circle grid5 %}</span><br><span class="line"> {% cell 随机风景, https://baidu.com, https://api.ixiaowai.cn/gqapi/gqapi.php %}</span><br><span class="line"> {% cell 随机风景, https://baidu.com, https://api.ixiaowai.cn/gqapi/gqapi.php %}</span><br><span class="line"> {% cell 随机风景, https://baidu.com, https://api.ixiaowai.cn/gqapi/gqapi.php %}</span><br><span class="line"> {% cell 随机风景, https://baidu.com, https://api.ixiaowai.cn/gqapi/gqapi.php %}</span><br><span class="line"> {% cell 随机风景, https://baidu.com, https://api.ixiaowai.cn/gqapi/gqapi.php %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h-b" id="环形图标按钮11n83ifltwz" style="color:!important">环形图标按钮</h2><div></div><div class="btns rounded grid5"> <a class="button" href='/' title='下载源码'><i class='fa fa-download'></i>下载源码</a><a class="button" href='/' title='查看文档'><i class='fa fa-book'></i>查看文档</a> </div><h3 id="上述事例代码"><a href="#上述事例代码" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% btns rounded grid5 %}</span><br><span class="line"> {% cell 下载源码, /, fa fa-download %}</span><br><span class="line"> {% cell 查看文档, /, fa fa-book %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h-b" id="环形图标居中按钮16cp7ec8rd3" style="color:!important">环形图标居中按钮</h2><div></div><div class="btns rounded grid5 center"> <a class="button" href='/' title='下载源码'><i class='fa fa-download'></i>下载源码</a><a class="button" href='/' title='查看文档'><i class='fa fa-book'></i>查看文档</a> </div><h3 id="上述事例代码-1"><a href="#上述事例代码-1" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% btns rounded grid5 center %}</span><br><span class="line"> {% cell 下载源码, /, fa fa-download %}</span><br><span class="line"> {% cell 查看文档, /, fa fa-book %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h-b" id="环形图标填充按钮rrn1twwftc" style="color:!important">环形图标填充按钮</h2><div></div><div class="btns rounded grid5 fill"> <a class="button" href='/' title='下载源码'><i class='fa fa-download'></i>下载源码</a><a class="button" href='/' title='查看文档'><i class='fa fa-book'></i>查看文档</a> </div><h3 id="上述事例代码-2"><a href="#上述事例代码-2" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% btns rounded grid5 fill %}</span><br><span class="line"> {% cell 下载源码, /, fa fa-download %}</span><br><span class="line"> {% cell 查看文档, /, fa fa-book %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h-b" id="圆形图标按钮15qlpqw9knl" style="color:!important">圆形图标按钮</h2><div></div><div class="btns circle center grid5"> <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fa fa-apple'></i> <b>这个是微信</b> <p class='p red'>微信</p> <img src='/medias/wx.jpg'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fa fa-apple'></i> <b>这个是支付宝</b> <p class='p green'>支付宝</p> <img src='/medias/zfb.jpg'></a> </div><h3 id="上述示例代码"><a href="#上述示例代码" class="headerlink" title="上述示例代码"></a>上述示例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle center grid5 %}</span><br><span class="line"> <a href=<span class="string">'https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'</span>></span><br><span class="line"> <i class=<span class="string">'fa fa-apple'</span>></i></span><br><span class="line"> <b>这个是微信</b></span><br><span class="line"> {% p red, 微信 %}</span><br><span class="line"> <img src=<span class="string">'/medias/wx.jpg'</span>></span><br><span class="line"> </a></span><br><span class="line"> <a href=<span class="string">'https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'</span>></span><br><span class="line"> <i class=<span class="string">'fa fa-apple'</span>></i></span><br><span class="line"> <b>这个是支付宝</b></span><br><span class="line"> {% p green, 支付宝 %}</span><br><span class="line"> <img src=<span class="string">'/medias/zfb.jpg'</span>></span><br><span class="line"> </a></span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>audio音频</title>
<link href="/post/audio/"/>
<url>/post/audio/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="事例1dley8gw3xq">事例</h2><br/><div class="audio"><audio controls preload><source src='http://qiniu.cunzhuang.top/%E5%85%AD%E5%93%B2%20-%20%E4%BD%A0%E7%9A%84%E5%BF%83%E6%98%AF%E5%90%A6%E4%B9%9F%E6%9C%89%E6%88%91%E7%9A%84%E5%90%8D.mp3' type='audio/mp3'>Your browser does not support the audio tag.</audio></div><h2 class="bamboo-h " id="写法1dgisffpe0w">写法</h2><br/><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% audio http://qiniu.cunzhuang.top/%E5%85%AD%E5%93%B2%20-%20%E4%BD%A0%E7%9A%84%E5%BF%83%E6%98%AF%E5%90%A6%E4%B9%9F%E6%9C%89%E6%88%91%E7%9A%84%E5%90%8D.mp3 %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>checkbox</title>
<link href="/post/checkbox/"/>
<url>/post/checkbox/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="进度条示例23v8ar4l1s7">进度条示例</h2><br/><div class='checkbox'><input type="checkbox" /> <p>纯文本测试</p> </div><div class='checkbox checked'><input type="checkbox" checked="checked"/> <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p> </div><div class='checkbox red'><input type="checkbox" /> <p>支持自定义颜色</p> </div><div class='checkbox green checked'><input type="checkbox" checked="checked"/> <p>绿色 + 默认选中</p> </div><div class='checkbox yellow checked'><input type="checkbox" checked="checked"/> <p>黄色 + 默认选中</p> </div><div class='checkbox cyan checked'><input type="checkbox" checked="checked"/> <p>青色 + 默认选中</p> </div><div class='checkbox blue checked'><input type="checkbox" checked="checked"/> <p>蓝色 + 默认选中</p> </div><div class='checkbox plus green checked'><input type="checkbox" checked="checked"/> <p>增加</p> </div><div class='checkbox minus yellow checked'><input type="checkbox" checked="checked"/> <p>减少</p> </div><div class='checkbox times red checked'><input type="checkbox" checked="checked"/> <p>叉</p> </div><h3 id="上述实例代码"><a href="#上述实例代码" class="headerlink" title="上述实例代码"></a>上述实例代码</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">{% checkbox 纯文本测试 %}</span><br><span class="line">{% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %}</span><br><span class="line">{% checkbox red, 支持自定义颜色 %}</span><br><span class="line">{% checkbox green checked, 绿色 + 默认选中 %}</span><br><span class="line">{% checkbox yellow checked, 黄色 + 默认选中 %}</span><br><span class="line">{% checkbox cyan checked, 青色 + 默认选中 %}</span><br><span class="line">{% checkbox blue checked, 蓝色 + 默认选中 %}</span><br><span class="line">{% checkbox plus green checked, 增加 %}</span><br><span class="line">{% checkbox minus yellow checked, 减少 %}</span><br><span class="line">{% checkbox times red checked, 叉 %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>folding折叠</title>
<link href="/post/folding/"/>
<url>/post/folding/</url>
<content type="html"><</span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="cyan青色-默认打开h0inrir9wu">cyan青色-默认打开</h2><br/><details cyan open><summary pointer> 查看默认打开的折叠框 </summary> <div class='content'> <p>这是一个默认打开的折叠框。</p> </div> </details><h3 id="上述事例代码-1"><a href="#上述事例代码-1" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% folding cyan open, 查看默认打开的折叠框 %}</span><br><span class="line"></span><br><span class="line"> 这是一个默认打开的折叠框。</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="查看代码67wex7mk3sk">查看代码</h2><br/><details green><summary pointer> 查看代码测试 </summary> <div class='content'> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install xxx</span><br></pre></td></tr></table></figure> </div> </details><h3 id="上述事例代码-2"><a href="#上述事例代码-2" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% folding green, 查看代码测试 %}</span><br><span class="line">这里写代码高亮部分</span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="查看列表4b26pxevc8">查看列表</h2><br/><details yellow><summary pointer> 查看列表测试 </summary> <div class='content'> <ul><li>haha</li><li>hehe</li></ul> </div> </details><h3 id="上述事例代码-3"><a href="#上述事例代码-3" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% folding yellow, 查看列表测试 %}</span><br><span class="line"></span><br><span class="line"> - haha</span><br><span class="line"> - hehe</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="查看嵌套1r8wxqe7dv6">查看嵌套</h2><br/><details red><summary pointer> 查看嵌套测试 </summary> <div class='content'> <details blue><summary pointer> 查看嵌套测试2 </summary> <div class='content'> <details ><summary pointer> 查看嵌套测试3 </summary> <div class='content'> <p>hahaha <span><img src='https://image.dbbqb.com/202101221115/7cdd741907c2ea150d054d24c4da6594/4d0G' ></span></p> </div> </details> </div> </details> </div> </details><h3 id="上述事例代码-4"><a href="#上述事例代码-4" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% folding red, 查看嵌套测试 %}</span><br><span class="line"></span><br><span class="line">{% folding blue, 查看嵌套测试2 %}</span><br><span class="line"></span><br><span class="line">{% folding 查看嵌套测试3 %}</span><br><span class="line"></span><br><span class="line">hahaha <span><img src=<span class="string">'https://image.dbbqb.com/202101221115/7cdd741907c2ea150d054d24c4da6594/4d0G'</span> ></span></span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>gallery图片</title>
<link href="/post/gallery/"/>
<url>/post/gallery/</url>
<content type="html"><![CDATA[<div class="note info"><p><strong>提示</strong></p><p>使用该标签请先将主题下的<code>_config.yml</code>中的<code>fancybox</code>设置为<code>true</code></p></div><h2 class="bamboo-h " id="一行一个图片25bey7vw5lg">一行一个图片</h2><br/><div class="gallery "> <p><img src="https://pic4.zhimg.com/80/v2-515859a54d7c9b89c070c6132dff4527_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-515859a54d7c9b89c070c6132dff4527_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><h3 id="上述事例代码"><a href="#上述事例代码" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">![图片描述](https://pic4.zhimg.com/80/v2-515859a54d7c9b89c070c6132dff4527_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="一行多个图片（不换行）1g544h579fa">一行多个图片（不换行）</h2><br/><div class="gallery "> <p><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><h3 id="上述事例代码-1"><a href="#上述事例代码-1" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="多行多个图片（每行2～8个图片）214pj20acyb">多行多个图片（每行2～8个图片）</h2><br/><p>多行多个图片（每行2～8个图片）</p><div class="gallery stretch" col='4'> <p><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><h3 id="上述事例代码-2"><a href="#上述事例代码-2" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% gallery stretch, 4 %}</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure><p>多行多个图片（每行2～8个图片）</p><div class="gallery stretch" col='8'> <p><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic4.zhimg.com/80/v2-d191b620ff97a55b634786528206002a_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-d191b620ff97a55b634786528206002a_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic4.zhimg.com/80/v2-d191b620ff97a55b634786528206002a_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-d191b620ff97a55b634786528206002a_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><h3 id="上述事例代码-3"><a href="#上述事例代码-3" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">多行多个图片（每行2～8个图片）</span><br><span class="line">{% gallery stretch, 8 %}</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic4.zhimg.com/80/v2-d191b620ff97a55b634786528206002a_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic4.zhimg.com/80/v2-d191b620ff97a55b634786528206002a_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-d0fe3a2cc79628c6a017f0066d4dee63_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic4.zhimg.com/80/v2-f7d6c7021cff3e23d8481faec2048890_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="组合使用294fgverbzl">组合使用</h2><br/><div class="gallery "> <p><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><div class="gallery "> <p><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><div class="gallery "> <p><img src="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"><br><img src="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="图片描述"></p> </div><h3 id="上述事例代码-4"><a href="#上述事例代码-4" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br><span class="line">{% gallery %}</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br><span class="line">{% gallery %}</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?<span class="built_in">source</span>=1940ef5c)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>Github卡片</title>
<link href="/post/ghcard/"/>
<url>/post/ghcard/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="Github用户卡片1squ6gyrwm5">Github用户卡片</h2><br/><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a><h3 id="上述示例代码"><a href="#上述示例代码" class="headerlink" title="上述示例代码"></a>上述示例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% ghcard yuang01 %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="表格中加入用户卡片2mdpetf1s9c">表格中加入用户卡片</h2><br/><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=vue&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=vue&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=buefy&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=buefy&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=solarized-light&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=solarized-light&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=onedark&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=onedark&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=solarized-dark&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=solarized-dark&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=algolia&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=algolia&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01"><img src="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=calm&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/?username=yuang01&theme=calm&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td></tr></tbody></table><h3 id="上述示例代码-1"><a href="#上述示例代码-1" class="headerlink" title="上述示例代码"></a>上述示例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">| {% ghcard yuang01 %} | {% ghcard yuang01, theme=vue %} |</span><br><span class="line">| -- | -- |</span><br><span class="line">| {% ghcard yuang01, theme=buefy %} | {% ghcard yuang01, theme=solarized-light %} |</span><br><span class="line">| {% ghcard yuang01, theme=onedark %} | {% ghcard yuang01, theme=solarized-dark %} |</span><br><span class="line">| {% ghcard yuang01, theme=algolia %} | {% ghcard yuang01, theme=calm %} |</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="单个项目卡片ovdehulvtc">单个项目卡片</h2><br/><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a><h3 id="上述事例代码"><a href="#上述事例代码" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% ghcard yuang01/hexo-theme-bamboo %}</span><br><span class="line">{% ghcard yuang01/hexo-theme-bamboo %}</span><br><span class="line">{% ghcard yuang01/hexo-theme-bamboo %}</span><br><span class="line">{% ghcard yuang01/hexo-theme-bamboo %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="表格中加入单个项目卡片d8is4ub3uyo">表格中加入单个项目卡片</h2><br/><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=vue&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=vue&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=buefy&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=buefy&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=solarized-light&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=solarized-light&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=onedark&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=onedark&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=solarized-dark&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=solarized-dark&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=algolia&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=algolia&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yuang01/hexo-theme-bamboo"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=calm&show_owner=true" class="lazyload placeholder" data-srcset="https://github-readme-stats.vercel.app/api/pin/?username=yuang01&repo=hexo-theme-bamboo&theme=calm&show_owner=true" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></a></td></tr></tbody></table><h3 id="上述事例代码-1"><a href="#上述事例代码-1" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| {% ghcard yuang01/hexo-theme-bamboo %} | {% ghcard yuang01/hexo-theme-bamboo, theme=vue %} |</span><br><span class="line">| -- | -- |</span><br><span class="line">| {% ghcard yuang01/hexo-theme-bamboo, theme=buefy %} | {% ghcard yuang01/hexo-theme-bamboo, theme=solarized-light %} |</span><br><span class="line">| {% ghcard yuang01/hexo-theme-bamboo, theme=onedark %} | {% ghcard yuang01/hexo-theme-bamboo, theme=solarized-dark %} |</span><br><span class="line">| {% ghcard yuang01/hexo-theme-bamboo, theme=algolia %} | {% ghcard yuang01/hexo-theme-bamboo, theme=calm %} |</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>lineImage标签</title>
<link href="/post/inlineimage/"/>
<url>/post/inlineimage/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="段落中插入图片64lu9s0ji3">段落中插入图片</h2><br/><p>这是 <img no-lazy class="inline" src="http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif" style="height:1.5em"/> 一段话。</p><p>这又是 <img no-lazy class="inline" src="http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif" style="height:40px;"/> 一段话。</p><p>这又是 <img no-lazy class="inline" src="http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif" style="height:100px;"/> 一段话。</p><h3 id="上述事例代码"><a href="#上述事例代码" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">这是 {% inlineimage http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif %} 一段话。</span><br><span class="line"></span><br><span class="line">这又是 {% inlineimage http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif, height=40px %} 一段话。</span><br><span class="line"></span><br><span class="line">这又是 {% inlineimage http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif, height=100px %} 一段话。</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="自定义图片并添加描述2wzp03pmbp">自定义图片并添加描述</h2><br/><div class="img-wrap"><div class="img-bg"><img class="img lazyload placeholder" src="https://pic1.zhimg.com/80/v2-5fe6be356ddda4afe6063b0682edfead_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic1.zhimg.com/80/v2-5fe6be356ddda4afe6063b0682edfead_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="自定义图片"/></div><span class="image-caption">自定义图片</span></div><h3 id="上述事例代码-1"><a href="#上述事例代码-1" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://pic1.zhimg.com/80/v2-5fe6be356ddda4afe6063b0682edfead_1440w.jpg?<span class="built_in">source</span>=1940ef5c, alt=自定义图片 %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="指定宽度24hx0piryob">指定宽度</h2><br/><div class="img-wrap"><div class="img-bg"><img class="img lazyload placeholder" src="https://pic3.zhimg.com/80/v2-08d7fdf0201e560c22a2e9d9c2c040f6_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-08d7fdf0201e560c22a2e9d9c2c040f6_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="指定宽度" style="width:400px;"/></div><span class="image-caption">指定宽度</span></div><h3 id="上述事例代码-2"><a href="#上述事例代码-2" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://pic3.zhimg.com/80/v2-08d7fdf0201e560c22a2e9d9c2c040f6_1440w.jpg?<span class="built_in">source</span>=1940ef5c, width=400px, alt=指定宽度 %}</span><br></pre></td></tr></table></figure><h2 class="bamboo-h " id="设置占位背景色52g5ini89hs">设置占位背景色</h2><br/><div class="img-wrap"><div class="img-bg" style="background:#1D0C04"><img class="img lazyload placeholder" src="https://pic3.zhimg.com/80/v2-c18a3b0f2e82533d6c47e72e085aca0b_1440w.jpg?source=1940ef5c" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-c18a3b0f2e82533d6c47e72e085aca0b_1440w.jpg?source=1940ef5c" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="设置占位背景色" style="width:400px;"/></div><span class="image-caption">设置占位背景色</span></div><h3 id="上述事例代码-3"><a href="#上述事例代码-3" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://pic3.zhimg.com/80/v2-c18a3b0f2e82533d6c47e72e085aca0b_1440w.jpg?<span class="built_in">source</span>=1940ef5c, width=400px, <span class="built_in">bg</span>=<span class="comment">#1D0C04, alt=设置占位背景色 %}</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>link标签</title>
<link href="/post/link/"/>
<url>/post/link/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="超链接标签247idhuilq0">超链接标签</h2><br/><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div><h3 id="上述事例代码"><a href="#上述事例代码" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br><span class="line"></span><br><span class="line">{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br></pre></td></tr></table></figure><div class="link-group"><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div></div><h3 id="上述事例代码-1"><a href="#上述事例代码-1" class="headerlink" title="上述事例代码"></a>上述事例代码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">{% linkgroup %}</span><br><span class="line">{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br><span class="line"></span><br><span class="line">{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br><span class="line"></span><br><span class="line">{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br><span class="line"></span><br><span class="line">{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br><span class="line">{% endlinkgroup %}</span><br></pre></td></tr></table></figure><blockquote><p>v2.8.7更新</p></blockquote><p>另一种写法</p><div class="tagLink"><a class="link-card" title="点击跳转到百度" href="http://www.baidu.com"><span class="link-card-backdrop" style="background-image: url(https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg)"></span><div class="left"><img src="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" class="lazyload placeholder" data-srcset="https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">点击跳转到百度</p><p class="url">http://www.baidu.com</p></div></a></div><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% link 点击跳转到百度:: http://www.baidu.com:: https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> tag </tag>
</tags>
</entry>
<entry>
<title>Note标签</title>
<link href="/post/note/"/>
<url>/post/note/</url>
<content type="html"><![CDATA[<h2 class="bamboo-h " id="note演示效果2mwqcmhhyh0">note演示效果</h2><br/><blockquote><p>markdown默认写法，左边框颜色，随着主题色改变</p></blockquote><div class="note "><p>我有一只小毛驴，我从来都不骑。</p></div><div class="note quote"><p>适合引用一段话</p></div><div class="note warning"><p>这是一个警告</p></div><div class="note danger"><p>这是一个错误</p></div><div class="note success"><p>这是一个成功</p></div><div class="note info"><p>这是一个信息</p></div><h3 id="上述事例源码"><a href="#上述事例源码" class="headerlink" title="上述事例源码"></a>上述事例源码</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="quote">> markdown默认写法，左边框颜色，随着主题色改变</span></span><br><span class="line"></span><br><span class="line">{% note, 我有一只小毛驴，我从来都不骑。 %}</span><br><span class="line"></span><br><span class="line">{% note quote, 适合引用一段话 %}</span><br><span class="line"></span><br><span class="line">{% note warning, 这是一个警告 %}</span><br><span class="line"></span><br><span class="line">{% note danger, 这是一个错误 %}</span><br><span class="line"></span><br><span class="line">{% note success, 这是一个成功 %}</span><br><span class="line"></span><br><span class="line">{% note info, 这是一个信息 %}</span><br><span class="line"></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>