-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path9abe.html
1872 lines (1818 loc) · 276 KB
/
9abe.html
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
<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>tag-plugins外挂标签文档 | 伴随的小站</title><meta name="robots" content="noindex"><meta name="keywords" content="hexo"><meta name="author" content="伴随"><meta name="copyright" content="伴随"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#18171d"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="apple-mobile-web-app-title" content="tag-plugins外挂标签文档"><meta name="application-name" content="tag-plugins外挂标签文档"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="#18171d"><meta property="og:type" content="article"><meta property="og:title" content="tag-plugins外挂标签文档"><meta property="og:url" content="https://ctext.top/9abe.html"><meta property="og:site_name" content="伴随的小站"><meta property="og:description" content="段落文本 p 标签语法配置参数样式预览示例源码1&#123;% p 样式参数(参数以空格划分), 文本内容 %&#125; 字体: logo, code 颜色: red,yellow,green,cyan,blue,gray 大小: small, h4, h3, h2, h1, large, hug"><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https://up.ctext.top/article/2024/05/tag.png"><meta property="article:author" content="伴随"><meta property="article:tag"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://up.ctext.top/article/2024/05/tag.png"><meta name="description" content="段落文本 p 标签语法配置参数样式预览示例源码1&#123;% p 样式参数(参数以空格划分), 文本内容 %&#125; 字体: logo, code 颜色: red,yellow,green,cyan,blue,gray 大小: small, h4, h3, h2, h1, large, hug"><link rel="shortcut icon" href="https://up.ctext.top/favicon.svg"><link rel="canonical" href="https://ctext.top/9abe.html"><link rel="preconnect" href="//cdn.cbd.int"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="google-site-verification" content="xxx"/><meta name="baidu-site-verification" content="codeva-ulCeD8b6u5"/><meta name="msvalidate.01" content="xxx"/><meta name="sogou_site_verification" content="YdTw3LB3JQ"/><meta name="360-site-verification" content="5f481d0e3172c0894747aba683bb1191"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.cbd.int/@fortawesome/[email protected]/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/[email protected]/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/@fancyapps/[email protected]/dist/fancybox/fancybox.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/swiper/swiper.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?643616874a8f4f5ed38e6146dfd84820";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = {
linkPageTop: undefined,
peoplecanvas: undefined,
postHeadAiDescription: {"enable":true,"gptName":null,"mode":"tianli","switchBtn":false,"btnLink":null,"randomNum":3,"basicWordCount":1000,"key":"XlJ1hsZTEze","Referer":"/"},
diytitle: {"enable":true,"leaveTitle":"分享使快乐加倍！(´▽｀)","backTitle":"慢慢看~ヾ(•ω•`)o"},
LA51: undefined,
greetingBox: {"enable":true,"default":"晚上好👋","list":[{"greeting":"晚安啦🌙，做个好梦，期待明天的美好！😴💤","startTime":0,"endTime":6},{"greeting":"早上好🌞，新的一天，愿你充满活力和正能量！💪🌈","startTime":6,"endTime":10},{"greeting":"上午好👋，工作/学习加油，期待你的出色表现！🌟📚","startTime":10,"endTime":12},{"greeting":"午餐时间到🍽️，好好吃饭，下午继续加油！🍛💼","startTime":12,"endTime":14},{"greeting":"下午好👋，午后时光，放松心情，享受片刻宁静。☕️💆♀️","startTime":14,"endTime":17},{"greeting":"傍晚好，一天即将结束，为自己点个赞吧！👍🎉","startTime":17,"endTime":19},{"greeting":"晚餐时间啦🍲，享受美食，犒劳一下自己吧！🍽️🥳","startTime":19,"endTime":21},{"greeting":"晚上好🌃，夜晚的时光，放松身心，好好休息吧！🛌💤","startTime":21,"endTime":24}]},
twikooEnvId: '',
commentBarrageConfig:undefined,
music_page_default: "nav_music",
root: '/',
preloader: {"source":3},
friends_vue_info: undefined,
navMusic: true,
mainTone: {"mode":"api","api":"https://color.ctext.top/api?img=","cover_change":true},
authorStatus: {"skills":["🤖️ 数码科技爱好者","🔍 分享与热心帮助","🏠 智能家居小能手","🔨 设计开发一条龙"]},
algolia: undefined,
localSearch: {"path":"/search.xml","preload":true,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简","rightMenuMsgToTraditionalChinese":"转为繁体","rightMenuMsgToSimplifiedChinese":"转为简体"},
noticeOutdate: undefined,
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":330},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
simplehomepage: true,
post: false
},
runtime: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"copy":true,"copyrightEbable":false,"limitCount":50,"languages":{"author":"作者: 伴随","link":"链接: ","source":"来源: 伴随的小站","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。","copySuccess":"复制成功，复制和转载请标注本文地址"}},
lightbox: 'fancybox',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#425AEF","bgDark":"#1f1f1f","position":"top-center"},
source: {
justifiedGallery: {
js: 'https://cdn.cbd.int/[email protected]/dist/fjGallery.min.js',
css: 'https://cdn.cbd.int/[email protected]/dist/fjGallery.css'
}
},
isPhotoFigcaption: false,
islazyload: true,
isAnchor: false,
shortcutKey: undefined,
autoDarkmode: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
configTitle: '伴随的小站',
title: 'tag-plugins外挂标签文档',
postAI: 'true',
pageFillDescription: '段落文本 p, 行内文本 span, 行内文本样式 text, 分栏 tab, 按钮 btns, 按钮 btn, 网站卡片 sites, 单张图片 image, inlineImg 行内图片, 行内图片 inlineimage, label 标签, flink 友链标签, mermaid 图, 复选列表 checkbox, dogeplayer 多吉云播放器, 折叠框 folding, Gallery 相册图库, tag-hide, 链接卡片 link, 单选列表 radio, 上标标签 tip, Note (Bootstrap Callout), 音频 audio, 视频 video, timeline段落文本标签语法配置参数样式预览示例源码样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字行内文本标签语法配置参数样式预览示例源码样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字行内文本样式标签语法样式预览示例源码文本内容文本内容文本内容文本内容文本内容文本内容带下划线的文本带着重号的文本带波浪线的文本带删除线的文本键盘样式的文本密码样式的文本这里没有验证码带下划线的文本带着重号的文本带波浪线的文本带删除线的文本键盘样式的文本密码样式的文本这里没有验证码分栏分栏支持内置阿里图标如果开启了可以使用的图标否则只能使用默内置阿里图标标签语法配置参数样式预览示例源码选项卡块标签的唯一名称不带逗号将在中用作每个标签及其索引号的前缀如果名称中包含空格则对于生成所有空格将由破折号代替仅当前帖子页面的必须是唯一的活动选项卡的索引号如果未指定将选择第一个标签如果为则不会选择任何选项卡可选参数当前选项卡的标题如果未指定标题则带有制表符索引后缀的唯一名称将用作制表符的标题如果未指定标题但指定了图标则标题将为空可选参数图标名称全名看起来像可以指定带空格或不带空格例如和可选参数预设选择第一个默认预设选择没有预设值自定义名只有和名第一个炸弹名字为第一个只有图标没有名字名字预设选择第一个默认预设选择没有预设值自定义名只有和名第一个名字为第一个只有图标没有名字炸弹名字按钮标签语法参数配置样式预览示例源码样式参数标题链接图片或者图标标题链接图片或者图标圆角样式增加文字样式可以在容器内增加标题和描述文字布局方式默认为自动宽度适合视野内只有一两个的情况参数含义宽一点的按钮填充布局自动铺满至少一行多了会换行居中按钮之间是固定间距居中分散等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数如果需要显示类似团队成员之类的一组含有头像的链接或者含有图标的按钮下载源码查看文档圆形图标标题描述图片网格列居中心率管家专业版心率管家免费版如果需要显示类似团队成员之类的一组含有头像的链接或者含有图标的按钮下载源码查看文档圆形图标标题描述图片网格列居中心率管家专业版心率管家免费版按钮标签语法参数配置样式预览示例源码链接按钮文字可选图标可选按钮背景顔色默认时按钮字体和边框顔色时可选按钮样式默认实心留空可选按钮佈局默认为留空可选按钮位置前提是设置了为默认为左边留空可选按钮大小留空参数含义链接按钮文字可选图标如果开启了可以使用的图标否则只能使用默内置图标可选按钮背景顔色默认时按钮字体和边框顔色时可选按钮样式默认实心数留空可选按钮佈局默认为留空可选按钮位置前提是设置了为默认为左边留空数可选按钮大小留空一组按钮调整位置大小居中按钮一组按钮调整位置大小居中按钮网站卡片标签语法样式预览示例源码标题链接截图链接头像链接可选描述可选标题链接截图链接头像链接可选描述可选简约风格这是一段关于这个网站的描述文字这是一段关于这个网站的描述文字单张图片标签语法参数配置样式预览示例源码链接宽度可选高度可选描述可选占位颜色可选图片宽度高度图片描述图片描述需要在主题配置文件中开启图片描述占位背景色添加描述每天下课回宿舍的路没有什么故事指定宽度指定宽度并添加描述每天下课回宿舍的路没有什么故事设置占位背景色优化不同宽度浏览的观感添加描述每天下课回宿舍的路没有什么故事指定宽度指定宽度并添加描述每天下课回宿舍的路没有什么故事设置占位背景色优化不同宽度浏览的观感行内图片标签语法参数配置样式预览示例源码图片链接图片高度限制可选参数含义图片链接图片高度限制可选你看我长得漂亮不我觉得很漂亮你看我长得漂亮不我觉得很漂亮行内图片标签语法参数配置样式预览示例源码图片链接高度可选高度这是一段话这又是一段话这是一段话这又是一段话标签标签语法参数配置样式预览示例源码参数含义文字可选背景颜色默认为臣亮言先帝创业未半而中道崩殂今天下三分益州疲敝此诚危急存亡之秋也然侍衞之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也宫中府中俱为一体陟罚臧否不宜异同若有作奸犯科及为忠善者宜付有司论其刑赏以昭陛下平明之治不宜偏私使内外异法也臣亮言先帝创业未半而中道崩殂今天下三分益州疲敝此诚危急存亡之秋也然侍衞之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也宫中府中俱为一体陟罚臧否不宜异同若有作奸犯科及为忠善者宜付有司论其刑赏以昭陛下平明之治不宜偏私使内外异法也友链标签可在任何界面插入类似友情链接列表效果内容格式与友情链接界面一样支持格式注意数据具有格式要求请注意格式对齐防止被编辑器格式化导致格式错误从而报错标签语法参数配置样式预览示例源码参数含义标题可选友链样式默认为可选友链样式默认为推荐博客安知鱼网站值得推荐的网站视频网站中国最大社交分享平台社交分享平台推荐博客安知鱼生活明朗万物可爱网站值得推荐的网站视频网站中国最大社交分享平台社交分享平台图使用标签可以绘制流程图时序图类别图状态图甘特图和圆形图具体可以查看文档修改主题配置文件标签语法样式预览示例源码内容复选列表标签语法配置参数样式预览示例源码样式参数可选文本支持简单样式颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉多吉云播放器快捷引入多吉云视频标签语法参数配置样式预览示例源码获取与参数含义多吉云视频折叠框折叠框标签语法配置参数样式预览示例源码参数可选标题颜色状态状态填写代表默认打开查看图片测试查看默认打开的折叠框这是一个默认打开的折叠框查看代码测试查看列表测试查看嵌套测试查看嵌套测试查看嵌套测试查看图片测试查看默认打开的折叠框这是一个默认打开的折叠框查看代码测试假装这里有代码块代码块没法嵌套代码块查看列表测试查看嵌套测试查看嵌套测试查看嵌套测试相册图库一个图库集合标签语法参数配置样式预览示例源码相册图库相册本地远程图片格式图片格式图片格式参数名释义可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为参数名释义必须识别词必须远程的链接可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为远程链接的例子有三个参数是必须存在的和可有也可没有这是示例相册图库参数名释义图库名字图库描述链接到对应相册的地址图库封面思维拓展一下相册图库的实质其实就是个快捷方式可以自定义添加描述封面链接那么我们未必要把它当做一个相册完全可以作为一个链接卡片链接到视频友链都是不错的选择相册区别于旧版的相册新的相册会自动根据图片长度进行排版书写也更加方便与格式一样可根据需要插入到相应的无需再自己配置长宽建议在粘贴时故意使用长短大小横竖不一的图片会有更好的效果尺寸完全相同的图片只会平铺输出效果很糟糕本地远程图片格式图片格式图片格式参数名释义可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为参数名释义必须识别词必须远程的链接可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为远程链接的例子有三个参数是必须存在的和可有也可没有这是示例相册图库在六花服务器里留下的足迹哦咧哇哒某种意义上也算自拍吧相册加载更多对于很多同学提问的和相册页的链接问题这里说下我个人的使用习惯一般使用相册图库的话可以在导航栏加一个的使用指令添加里面放相册图库作为封面然后在下面建立相应的文件夹例如若按照这里的示例若欲使用路径访问相册则需要新建并在里面填入相册内容注意本站相册集为单独优化可参考配置相册页面相册图库在六花服务器里留下的足迹哦咧哇哒某种意义上也算自拍吧相册如果你想把一些文字内容隐藏起来并提供按钮让用户点击显示可以使用这个标签外挂请注意内的标签外挂内都不建议有等标题因为会把隐藏内容标题也显示出来而且当滚动屏幕时如果隐藏内容没有显示出来会导致的滚动出现异常在文本里面添加按钮隐藏内容只限文字不能包含英文逗号可用文本内容按钮显示的文字可选按钮的背景颜色可选按钮文字的颜色可选哪个英文字母最酷因为西装裤装酷查看答案门里站着一个人闪哪个英文字母最酷查看答案因为西装裤装酷门里站着一个人闪独立的隐藏内容可以隐藏很多内容包括图片代码块等等不能包含英文逗号可用文本内容按钮显示的文字可选按钮的背景颜色可选按钮文字的颜色可选查看答案查看答案傻子怎么可能有答案查看答案查看答案傻子怎么可能有答案如果你需要展示的内容太多可以把它隐藏在收缩框里需要时再把它展开不能包含英文逗号可用主题安装方法在你的博客根目录里如果想要安装比较新的分支可以链接卡片标签语法样式预览示例源码标题站点描述链接图片链接可选引用站外地址获取网站的图标并显示在你的网页上获取网站的图标并显示在你的网页上单选列表标签语法配置参数样式预览示例源码样式参数可选文本支持简单颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色上标标签主要样式参考自小康的渐变背景标签标签语法配置参数样式预览示例源码参数可选文本内容样式自定义图标支持自定义图标自定义图标通用配置语法格式配置参数样式预览示例源码修改主题配置文件标签外挂有两种用法和只对方法一生效图标需开启主题配置文件中方法一方法二方法一参数用法可选标识不同的标识有不同的配色可选不显示可选可以覆盖配置中的方法二参数用法可选标识不同的标识有不同的配色可选可配置自定义支持图标和主题内置的阿里图标图标需开启主题配置文件中也可以配置可选可以覆盖配置中的方法一样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签方法二图标支持和主题内置的阿里图标使用方法为加上对应的类名图标需开启主题配置文件中默认未开启样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器方法一样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签方法二图标支持和主题内置的阿里图标使用方法为加上对应的类名图标需开启主题配置文件中默认未开启样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器音频标签语法样式预览示例源码音频链接视频标签语法参数配置样式预览示例源码视频链接对其方向列数逗号后面直接写列数支持列宽度宽度宽度宽度宽度宽度标签语法参数配置样式预览示例源码时间线标题可选时间节点标题正文内容时间节点标题正文内容参数含义标题时间线颜色留空时间轴样式如果有插件需要删除并重新安装最新版本设置版本的和不适用于版本如果使用了则需要删除版本的标签在版本中被重命名为版本的置顶改为了并且同样适用于的页面如果使用了插件建议卸载版本默认开启了服务不需要额外处理全局搜索并替换为组件的索引规则有变使用组件的文章内对应的组件名必须是组件的列表名优先显示文章的其次是时间轴样式如果有插件需要删除并重新安装最新版本设置版本的和不适用于版本如果使用了则需要删除版本的标签在版本中被重命名为版本的置顶改为了并且同样适用于的页面如果使用了插件建议卸载版本默认开启了服务不需要额外处理全局搜索并替换为组件的索引规则有变使用组件的文章内对应的组件名必须是组件的列表名优先显示文章的其次是',
isPost: true,
isHome: false,
isHighlightShrink: false,
isToc: true,
postUpdate: '2024-05-31 10:38:47',
postMainColor: '#ea7682',
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: (key, value, ttl) => {
if (ttl === 0) return
const now = Date.now()
const expiry = now + ttl * 86400000
const item = {
value,
expiry
}
localStorage.setItem(key, JSON.stringify(item))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = Date.now()
if (now > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
Object.keys(attr).forEach(key => {
script.setAttribute(key, attr[key])
})
document.head.appendChild(script)
})
win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onerror = reject
link.onload = link.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
link.onload = link.onreadystatechange = null
resolve()
}
document.head.appendChild(link)
})
win.activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#18171d')
}
}
win.activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#f7f9fe')
}
}
const t = saveToLocal.get('theme')
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
if (t === undefined) {
if (isLightMode) activateLightMode()
else if (isDarkMode) activateDarkMode()
else if (isNotSpecified || hasNoSupport) {
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
if (saveToLocal.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
})
} else if (t === 'light') activateLightMode()
else activateDarkMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="/css/font.css"><link rel="stylesheet" href="/css/welcome.css"><link rel="stylesheet" href="/css/imgloaded.css"><link rel="stylesheet" href="/css/hideRolling.css"><link rel="stylesheet" href="/css/countdown.css"><link rel="stylesheet" href="/css/essay-animation.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head><body data-type="anzhiyu"><div id="web_bg"></div><div id="an_music_bg"></div><div id="loading-box" onclick="document.getElementById("loading-box").classList.add("loaded")"><div class="loading-bg"><img class="loading-img nolazyload" alt="加载头像" src="https://up.ctext.top/avatar.png"/><div class="loading-image-dot"></div></div></div><script>const preloader = {
endLoading: () => {
document.getElementById('loading-box').classList.add("loaded");
},
initLoading: () => {
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',()=> { preloader.endLoading() })
setTimeout(function(){preloader.endLoading();},10000)
if (true) {
document.addEventListener('pjax:send', () => { preloader.initLoading() })
document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}</script><link rel="stylesheet" href="https://cdn.cbd.int/[email protected]/progress_bar/progress_bar.css"/><script async="async" src="https://cdn.cbd.int/[email protected]/pace.min.js" data-pace-options="{ "restartOnRequestAfter":false,"eventLag":false}"></script><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><div id="nav-group"><span id="blog_name"><div class="back-home-button"><i class="anzhiyufont anzhiyu-icon-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">关于</div><div class="back-menu-list"><a class="back-menu-item" href="/about/" title="我"><img class="back-menu-item-icon" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://up.ctext.top/ico/orange.svg" alt="我"/><span class="back-menu-item-text">我</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">博客</div><div class="back-menu-list"><a class="back-menu-item" href="/album/" title="我的相册"><img class="back-menu-item-icon" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://up.ctext.top/ico/strawberry.svg" alt="我的相册"/><span class="back-menu-item-text">我的相册</span></a><a class="back-menu-item" href="/essay/" title="记录生活"><img class="back-menu-item-icon" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://up.ctext.top/ico/apple.svg" alt="记录生活"/><span class="back-menu-item-text">记录生活</span></a></div></div></div></div><a id="site-name" href="/" accesskey="h"><div class="title">伴随的小站</div><i class="anzhiyufont anzhiyu-icon-house-chimney"></i></a></span><div class="mask-name-container"><div id="name-container"><a id="page-name" href="javascript:anzhiyu.scrollToDest(0, 500)">PAGE_NAME</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span> 文章</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/"><i class="anzhiyufont anzhiyu-icon-grip-vertical faa-tada" style="font-size: 0.9em;"></i><span> 主页</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/archives/"><i class="anzhiyufont anzhiyu-icon-box-archive faa-tada" style="font-size: 0.9em;"></i><span> 总览</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size: 0.9em;"></i><span> 分类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags faa-tada" style="font-size: 0.9em;"></i><span> 标签</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span> 我的</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/growth.html"><i class="anzhiyufont anzhiyu-icon-heartbeat faa-tada" style="font-size: 0.9em;"></i><span> 博客岁月</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/music/"><i class="anzhiyufont anzhiyu-icon-music faa-tada" style="font-size: 0.9em;"></i><span> 音乐馆</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><i class="anzhiyufont anzhiyu-icon-images faa-tada" style="font-size: 0.9em;"></i><span> 相册集</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span> 小工具</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/air-conditioner/"><i class="anzhiyufont anzhiyu-icon-fan faa-tada" style="font-size: 0.9em;"></i><span> 小空调</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://main.ctext.top/"><i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size: 0.9em;"></i><span> 网址导航</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/gradation/"><i class="anzhiyufont anzhiyu-icon-envelope faa-tada" style="font-size: 0.9em;"></i><span> 渐变背景生成</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/9abe.html"><i class="anzhiyufont anzhiyu-icon-artstation faa-tada" style="font-size: 0.9em;"></i><span> tag-plugins文档</span></a></li><li><a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://map.ctext.top"><i class="anzhiyufont anzhiyu-icon-keyboard faa-tada" style="font-size: 0.9em;"></i><span> 飞车随机选图工具</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><span> 关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><i class="anzhiyufont anzhiyu-icon-paper-plane faa-tada" style="font-size: 0.9em;"></i><span> 关于自己</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()"><i class="anzhiyufont anzhiyu-icon-shoe-prints1 faa-tada" style="font-size: 0.9em;"></i><span> 随便逛逛</span></a></li></ul></div></div></div><div id="nav-right"><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机前往一个文章" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-dice"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" title="搜索🔍" accesskey="s"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span> 搜索</span></a></div><input id="center-console" type="checkbox"/><label class="widget" for="center-console" title="中控台" onclick="anzhiyu.switchConsole();"><i class="left"></i><i class="widget center"></i><i class="widget right"></i></label><div id="console"><div class="console-card-group-reward"><ul class="reward-all console-card"><li class="reward-item"><a href="https://up.ctext.top/pay/wx.png" target="_blank"><img class="post-qr-code-img" alt="微信" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://up.ctext.top/pay/wx.png"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://up.ctext.top/pay/zfb.png" target="_blank"><img class="post-qr-code-img" alt="支付宝" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://up.ctext.top/pay/zfb.png"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments"><div class="card-content"><div class="author-content-item-tips">互动</div><span class="author-content-item-title"> 最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div></div><div class="console-card-group-right"><div class="console-card tags"><div class="card-content"><div class="author-content-item-tips">音乐</div><span class="author-content-item-title">灵魂的碰撞💥</span></div></div><div class="console-card history"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-box-archiv"></i><span>文章</span></div><div class="card-archives"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
<i class="anzhiyufont anzhiyu-icon-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2025/01/"><span class="card-archive-list-date">一月 2025</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/11/"><span class="card-archive-list-date">十一月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">1</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/10/"><span class="card-archive-list-date">十月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/08/"><span class="card-archive-list-date">八月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/07/"><span class="card-archive-list-date">七月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/06/"><span class="card-archive-list-date">六月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">5</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/05/"><span class="card-archive-list-date">五月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2024/04/"><span class="card-archive-list-date">四月 2024</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">3</span><span>篇</span></div></a></li></ul></div><hr/></div></div></div><div class="button-group"><div class="console-btn-item"><a class="darkmode_switchbutton" title="显示模式切换" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-moon"></i></a></div><div class="console-btn-item" id="consoleHideAside" onclick="anzhiyu.hideAsideBtn()" title="边栏显示控制"><a class="asideSwitch"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></a></div><div class="console-btn-item" id="consoleMusic" onclick="anzhiyu.musicToggle()" title="音乐开关"><a class="music-switch"><i class="anzhiyufont anzhiyu-icon-music"></i></a></div></div><div class="console-mask" onclick="anzhiyu.hideConsole()" href="javascript:void(0);"></div></div><div class="nav-button" id="nav-totop"><a class="totopbtn" href="javascript:void(0);"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i><span id="percent" onclick="anzhiyu.scrollToDest(0,500)">0</span></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" title="切换"><i class="anzhiyufont anzhiyu-icon-bars"></i></a></div></div></div></nav><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original">原创</a><span class="post-meta-categories"><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-inbox post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E6%8A%80%E6%9C%AF%E6%95%99%E7%A8%8B/" itemprop="url">技术教程</a></span><span class="article-meta tags"><a class="article-meta__tags" href="/tags/hexo/" tabindex="-1" itemprop="url"> <span> <i class="anzhiyufont anzhiyu-icon-hashtag"></i>hexo</span></a></span></div></div><h1 class="post-title" itemprop="name headline">tag-plugins外挂标签文档</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="anzhiyufont anzhiyu-icon-calendar-days post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" itemprop="dateCreated datePublished" datetime="2024-05-30T02:38:47.000Z" title="发表于 2024-05-30 10:38:47">2024-05-30</time><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-history post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" itemprop="dateCreated datePublished" datetime="2024-05-31T02:38:47.000Z" title="更新于 2024-05-31 10:38:47">2024-05-31</time></span></div><div class="meta-secondline"><span class="post-meta-separator"></span><span class="post-meta-wordcount"><i class="anzhiyufont anzhiyu-icon-file-word post-meta-icon" title="文章字数"></i><span class="post-meta-label" title="文章字数">字数总计:</span><span class="word-count" title="文章字数">11.4k</span><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-clock post-meta-icon" title="阅读时长"></i><span class="post-meta-label" title="阅读时长">阅读时长:</span><span>49分钟</span></span><span class="post-meta-separator"></span><span class="post-meta-pv-cv" id="" data-flag-title="tag-plugins外挂标签文档"><i class="anzhiyufont anzhiyu-icon-fw-eye post-meta-icon"></i><span class="post-meta-label" title="阅读量">阅读量:</span><span id="busuanzi_value_page_pv"><i class="anzhiyufont anzhiyu-icon-spinner anzhiyu-spin"></i></span></span><span class="post-meta-separator"> </span><span class="post-meta-position" title="作者IP属地为北京"><i class="anzhiyufont anzhiyu-icon-location-dot"></i>北京</span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section><div id="post-top-cover"><img class="nolazyload" id="post-top-bg" src="https://up.ctext.top/article/2024/05/tag.png"></div></header><main id="blog-container"><div class="layout" id="content-inner"><div id="post"><div class="post-ai-description"><div class="ai-title"><i class="anzhiyufont anzhiyu-icon-bilibili"></i><div class="ai-title-text">AI-摘要(由百度千帆大模型提供生成摘要能力)</div><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i><i class="anzhiyufont anzhiyu-icon-circle-dot" title="朗读摘要"></i><div id="ai-tag">Tianli GPT</div></div><div class="ai-explanation">AI初始化中...</div><div class="ai-btn-box"><div class="ai-btn-item" id="ccnone">介绍自己 🙈</div><div class="ai-btn-item">生成本文简介 👋</div><div class="ai-btn-item">推荐相关文章 📖</div><div class="ai-btn-item">前往主页 🏠</div><div class="ai-btn-item" id="go-tianli-blog">前往爱发电购买</div></div><script data-pjax src="/js/anzhiyu/ai_abstract.js"></script></div><article class="post-content" id="article-container" itemscope itemtype="https://ctext.top/9abe.html"><header><a class="post-meta-categories" href="/categories/%E6%8A%80%E6%9C%AF%E6%95%99%E7%A8%8B/" itemprop="url">技术教程</a><a href="/tags/hexo/" tabindex="-1" itemprop="url">hexo</a><h1 id="CrawlerTitle" itemprop="name headline">tag-plugins外挂标签文档</h1><span itemprop="author" itemscope itemtype="http://schema.org/Person">伴随</span><time itemprop="dateCreated datePublished" datetime="2024-05-30T02:38:47.000Z" title="发表于 2024-05-30 10:38:47">2024-05-30</time><time itemprop="dateCreated datePublished" datetime="2024-05-31T02:38:47.000Z" title="更新于 2024-05-31 10:38:47">2024-05-31</time></header><h2 id="段落文本-p">段落文本 p</h2>
<div class="tabs" id="p"><ul class="nav-tabs"><button type="button" class="tab " data-href="p-1">标签语法</button><button type="button" class="tab " data-href="p-2">配置参数</button><button type="button" class="tab active" data-href="p-3">样式预览</button><button type="button" class="tab " data-href="p-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="p-1"><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">{% p 样式参数(参数以空格划分), 文本内容 %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="p-2"><ol>
<li>字体: logo, code</li>
<li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li>
<li>大小: small, h4, h3, h2, h1, large, huge, ultra</li>
<li>对齐方向: left, center, right</li>
</ol></div><div class="tab-item-content active" id="p-3"><ul>
<li>彩色文字<br>
在一段话中方便插入各种颜色的标签，包括：<p class='p red'>红色</p>、<p class='p yellow'>黄色</p>、<p class='p green'>绿色</p>、<p class='p cyan'>青色</p>、<p class='p blue'>蓝色</p>、<p class='p gray'>灰色</p>。</li>
<li>超大号文字<br>
文档「开始」页面中的标题部分就是超大号文字。<p class='p center logo large'>Volantis</p>
<p class='p center small'>A Wonderful Theme for Hexo</p>
</li>
</ul></div><div class="tab-item-content" id="p-4"><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></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line"> 在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line"> 文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line"> {% p center logo large, Volantis %}</span><br><span class="line"> {% p center small, A Wonderful Theme for Hexo %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="行内文本-span">行内文本 span</h2>
<div class="tabs" id="span"><ul class="nav-tabs"><button type="button" class="tab " data-href="span-1">标签语法</button><button type="button" class="tab " data-href="span-2">配置参数</button><button type="button" class="tab active" data-href="span-3">样式预览</button><button type="button" class="tab " data-href="span-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="span-1"><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">{% span 样式参数(参数以空格划分), 文本内容 %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="span-2"><ol>
<li>字体: logo, code</li>
<li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li>
<li>大小: small, h4, h3, h2, h1, large, huge, ultra</li>
<li>对齐方向: left, center, right</li>
</ol></div><div class="tab-item-content active" id="span-3"><ul>
<li>彩色文字<br>
在一段话中方便插入各种颜色的标签，包括：<span class='p red'>红色</span>、<span class='p yellow'>黄色</span>、<span class='p green'>绿色</span>、<span class='p cyan'>青色</span>、<span class='p blue'>蓝色</span>、<span class='p gray'>灰色</span>。</li>
<li>超大号文字<br>
文档「开始」页面中的标题部分就是超大号文字。<br>
<span class='p center logo large'>Volantis</span><br>
<span class='p center small'>A Wonderful Theme for Hexo</span></li>
</ul></div><div class="tab-item-content" id="span-4"><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></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line"> 在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line"> 文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line"> {% span center logo large, Volantis %}</span><br><span class="line"> {% span center small, A Wonderful Theme for Hexo %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="行内文本样式-text">行内文本样式 text</h2>
<div class="tabs" id="text"><ul class="nav-tabs"><button type="button" class="tab " data-href="text-1">标签语法</button><button type="button" class="tab active" data-href="text-2">样式预览</button><button type="button" class="tab " data-href="text-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="text-1"><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></pre></td><td class="code"><pre><span class="line">{% u 文本内容 %}</span><br><span class="line">{% emp 文本内容 %}</span><br><span class="line">{% wavy 文本内容 %}</span><br><span class="line">{% del 文本内容 %}</span><br><span class="line">{% kbd 文本内容 %}</span><br><span class="line">{% psw 文本内容 %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="text-2"><ol>
<li>带 <u>下划线</u> 的文本</li>
<li>带 <emp>着重号</emp> 的文本</li>
<li>带 <wavy>波浪线</wavy> 的文本</li>
<li>带 <del>删除线</del> 的文本</li>
<li>键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd></li>
<li>密码样式的文本：<psw>这里没有验证码</psw></li>
</ol></div><div class="tab-item-content" id="text-3"><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></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 带 {% u 下划线 %} 的文本</span><br><span class="line"><span class="bullet">2.</span> 带 {% emp 着重号 %} 的文本</span><br><span class="line"><span class="bullet">3.</span> 带 {% wavy 波浪线 %} 的文本</span><br><span class="line"><span class="bullet">4.</span> 带 {% del 删除线 %} 的文本</span><br><span class="line"><span class="bullet">5.</span> 键盘样式的文本 {% kbd command %} + {% kbd D %}</span><br><span class="line"><span class="bullet">6.</span> 密码样式的文本：{% psw 这里没有验证码 %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="分栏-tab">分栏 tab</h2>
<div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>分栏支持内置阿里图标，如果开启了 <code>fontawesome</code>可以使用 fontawesome 的图标，否则只能使用默内置阿里图标</p>
</div>
<div class="tabs" id="folding"><ul class="nav-tabs"><button type="button" class="tab " data-href="folding-1">标签语法</button><button type="button" class="tab " data-href="folding-2">配置参数</button><button type="button" class="tab active" data-href="folding-3">样式预览</button><button type="button" class="tab " data-href="folding-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><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></pre></td><td class="code"><pre><span class="line">{% tabs Unique name, [index] %}</span><br><span class="line"></span><br><span class="line"><!-- tab [Tab caption] [@icon] --></span><br><span class="line"></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="folding-2"><ol>
<li>Unique name :
<ul>
<li>选项卡块标签的唯一名称，不带逗号。</li>
<li>将在#id 中用作每个标签及其索引号的前缀。</li>
<li>如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。</li>
<li>仅当前帖子/页面的 URL 必须是唯一的！</li>
</ul>
</li>
<li>[index]:
<ul>
<li>活动选项卡的索引号。</li>
<li>如果未指定，将选择第一个标签（1）。</li>
<li>如果 index 为-1，则不会选择任何选项卡。</li>
<li>可选参数。</li>
</ul>
</li>
<li>[Tab caption]:
<ul>
<li>当前选项卡的标题。</li>
<li>如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。</li>
<li>如果未指定标题，但指定了图标，则标题将为空。</li>
<li>可选参数。</li>
</ul>
</li>
<li>[@icon]: - FontAwesome 图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如’Tab caption @icon’ 和 ‘Tab caption@icon’. - 可选参数。</li>
</ol></div><div class="tab-item-content active" id="folding-3"><div class="note primary flat"><p>Demo 1 - 预设选择第一个【默认】</p>
</div>
<div class="tabs" id="test1"><ul class="nav-tabs"><button type="button" class="tab active" data-href="test1-1">test1 1</button><button type="button" class="tab " data-href="test1-2">test1 2</button><button type="button" class="tab " data-href="test1-3">test1 3</button></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content" id="test1-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content" id="test1-3"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<div class="note primary flat"><p>Demo 2 - 预设选择 tabs</p>
</div>
<div class="tabs" id="test2"><ul class="nav-tabs"><button type="button" class="tab " data-href="test2-1">test2 1</button><button type="button" class="tab " data-href="test2-2">test2 2</button><button type="button" class="tab active" data-href="test2-3">test2 3</button></ul><div class="tab-contents"><div class="tab-item-content" id="test2-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content" id="test2-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content active" id="test2-3"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<div class="note primary flat"><p>Demo 3 - 没有预设值</p>
</div>
<div class="tabs" id="test3"><ul class="nav-tabs no-default"><button type="button" class="tab " data-href="test3-1">test3 1</button><button type="button" class="tab " data-href="test3-2">test3 2</button><button type="button" class="tab " data-href="test3-3">test3 3</button></ul><div class="tab-contents"><div class="tab-item-content" id="test3-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content" id="test3-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content" id="test3-3"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<div class="note primary flat"><p>Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名</p>
</div>
<div class="tabs" id="test4"><ul class="nav-tabs"><button type="button" class="tab active" data-href="test4-1">第一个Tab</button><button type="button" class="tab " data-href="test4-2"><i class="anzhiyufont anzhiyu-icon-oranges" style="text-align: center;"></i></button><button type="button" class="tab " data-href="test4-3"><i class="anzhiyufont anzhiyu-icon-oranges"></i>炸弹</button></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p><strong>tab 名字为第一个 Tab</strong></p></div><div class="tab-item-content" id="test4-2"><p><strong>只有图标 没有 Tab 名字</strong></p></div><div class="tab-item-content" id="test4-3"><p><strong>名字+icon</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="tab-item-content" id="folding-4"><div class="note primary flat"><p>Demo 1 - 预设选择第一个【默认】</p>
</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><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></pre></td><td class="code"><pre><span class="line">{% tabs test1 %}</span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure>
<div class="note primary flat"><p>Demo 2 - 预设选择 tabs</p>
</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><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></pre></td><td class="code"><pre><span class="line">{% tabs test2, 3 %}</span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure>
<div class="note primary flat"><p>Demo 3 - 没有预设值</p>
</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><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></pre></td><td class="code"><pre><span class="line">{% tabs test3, -1 %}</span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure>
<div class="note primary flat"><p>Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名</p>
</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><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></pre></td><td class="code"><pre><span class="line">{% tabs test4 %}</span><br><span class="line"></span><br><span class="line"><!-- tab 第一个Tab --></span><br><span class="line"></span><br><span class="line"><span class="strong">**tab 名字为第一个 Tab**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab @fab fa-apple-pay --></span><br><span class="line"></span><br><span class="line"><span class="strong">**只有图标 没有 Tab 名字**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab 炸弹@fas fa-bomb --></span><br><span class="line"></span><br><span class="line"><span class="strong">**名字+icon**</span></span><br><span class="line"></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="按钮-btns">按钮 btns</h2>
<div class="tabs" id="btns"><ul class="nav-tabs"><button type="button" class="tab " data-href="btns-1">标签语法</button><button type="button" class="tab " data-href="btns-2">参数配置</button><button type="button" class="tab active" data-href="btns-3">样式预览</button><button type="button" class="tab " data-href="btns-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="btns-1"><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></pre></td><td class="code"><pre><span class="line">{% btns 样式参数 %}</span><br><span class="line">{% cell 标题, 链接, 图片或者图标 %}</span><br><span class="line">{% cell 标题, 链接, 图片或者图标 %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="btns-2"><ol>
<li>圆角样式：rounded, circle</li>
<li>增加文字样式：可以在容器内增加 <code><b>标题</b> </code>和<code> <p>描述文字</p></code></li>
<li>布局方式：<br>
默认为自动宽度，适合视野内只有一两个的情况。</li>
</ol>
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">wide</td>
<td style="text-align:left">宽一点的按钮</td>
</tr>
<tr>
<td style="text-align:left">fill</td>
<td style="text-align:left">填充布局，自动铺满至少一行，多了会换行</td>
</tr>
<tr>
<td style="text-align:left">center</td>
<td style="text-align:left">居中，按钮之间是固定间距</td>
</tr>
<tr>
<td style="text-align:left">around</td>
<td style="text-align:left">居中分散</td>
</tr>
<tr>
<td style="text-align:left">grid2</td>
<td style="text-align:left">等宽最多 2 列，屏幕变窄会适当减少列数</td>
</tr>
<tr>
<td style="text-align:left">grid3</td>
<td style="text-align:left">等宽最多 3 列，屏幕变窄会适当减少列数</td>
</tr>
<tr>
<td style="text-align:left">grid4</td>
<td style="text-align:left">等宽最多 4 列，屏幕变窄会适当减少列数</td>
</tr>
<tr>
<td style="text-align:left">grid5</td>
<td style="text-align:left">等宽最多 5 列，屏幕变窄会适当减少列数</td>
</tr>
</tbody>
</table></div><div class="tab-item-content active" id="btns-3"><ol>
<li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li>
</ol>
<div class="btns circle grid5">
<a class="button no-text-decoration" target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a>
<a class="button no-text-decoration" target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a>
<a class="button no-text-decoration" target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a>
<a class="button no-text-decoration" target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a>
<a class="button no-text-decoration" target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a>
</div>
<ol start="2">
<li>或者含有图标的按钮：</li>
</ol>
<div class="btns rounded grid5">
<a class="button no-text-decoration" href='/' title='下载源码'><i class='anzhiyufont anzhiyu-icon-bolt'></i>下载源码</a>
<a class="button no-text-decoration" href='/' title='查看文档'><i class='anzhiyufont anzhiyu-icon-book'></i>查看文档</a>
</div>
<ol start="3">
<li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</li>
</ol>
<div class="btns circle center grid5">
<a target="_blank" rel="noopener" href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1' class="no-text-decoration">
<i class='anzhiyufont anzhiyu-icon-heartbeat'></i>
<b>心率管家</b>
<p class='p red'>专业版</p>
<img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a target="_blank" rel="noopener" href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1' class="no-text-decoration">
<i class='anzhiyufont anzhiyu-icon-heartbeat'></i>
<b>心率管家</b>
<p class='p green'>免费版</p>
<img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
</div></div><div class="tab-item-content" id="btns-4"><ol>
<li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li>
</ol>
<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">{% btns circle grid5 %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>或者含有图标的按钮：</li>
</ol>
<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></pre></td><td class="code"><pre><span class="line">{% btns rounded grid5 %}</span><br><span class="line">{% cell 下载源码, /, anzhiyufont anzhiyu-icon-bolt %}</span><br><span class="line">{% cell 查看文档, /, anzhiyufont anzhiyu-icon-book %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</li>
</ol>
<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">{% btns circle center grid5 %}</span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">'https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'</span> <span class="attr">class</span>=<span class="string">"no-text-decoration"</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">'anzhiyufont anzhiyu-icon-heartbeat'</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">i</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">b</span>></span></span>心率管家<span class="language-xml"><span class="tag"></<span class="name">b</span>></span></span></span><br><span class="line">{% p red, 专业版 %}</span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://bu.dusays.com/2023/06/01/64787e2a1347c.png'</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">a</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">'https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'</span> <span class="attr">class</span>=<span class="string">"no-text-decoration"</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">'anzhiyufont anzhiyu-icon-heartbeat'</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">i</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">b</span>></span></span>心率管家<span class="language-xml"><span class="tag"></<span class="name">b</span>></span></span></span><br><span class="line">{% p green, 免费版 %}</span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://bu.dusays.com/2023/06/01/64787e515e261.png'</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">a</span>></span></span></span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="按钮-btn">按钮 btn</h2>
<div class="tabs" id="btn"><ul class="nav-tabs"><button type="button" class="tab " data-href="btn-1">标签语法</button><button type="button" class="tab " data-href="btn-2">参数配置</button><button type="button" class="tab active" data-href="btn-3">样式预览</button><button type="button" class="tab " data-href="btn-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><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><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}</span><br><span class="line"></span><br><span class="line">[url] : 链接</span><br><span class="line">[text] : 按钮文字</span><br><span class="line">[icon] : [可选] 图标</span><br><span class="line">[color] : [可选] 按钮背景顔色(默认 style 时）</span><br><span class="line">按钮字体和边框顔色(outline 时)</span><br><span class="line">default/blue/pink/red/purple/orange/green</span><br><span class="line">[style] : [可选] 按钮样式 默认实心</span><br><span class="line">outline/留空</span><br><span class="line">[layout] : [可选] 按钮佈局 默认为 line</span><br><span class="line">block/留空</span><br><span class="line">[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边</span><br><span class="line">center/right/留空</span><br><span class="line">[size] : [可选] 按钮大小</span><br><span class="line">larger/留空</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="btn-2"><table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">url</td>
<td style="text-align:left">链接</td>
</tr>
<tr>
<td style="text-align:left">text</td>
<td style="text-align:left">按钮文字</td>
</tr>
<tr>
<td style="text-align:left">icon</td>
<td style="text-align:left">[可选] 图标，如果开启了 <code>fontawesome</code>可以使用 fontawesome 的图标，否则只能使用默内置图标</td>
</tr>
<tr>
<td style="text-align:left">color</td>
<td style="text-align:left">[可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green</td>
</tr>
<tr>
<td style="text-align:left">style</td>
<td style="text-align:left">[可选] 按钮样式 默认实心数，outline/留空</td>
</tr>
<tr>
<td style="text-align:left">layout</td>
<td style="text-align:left">[可选] 按钮佈局 默认为 line block/留空</td>
</tr>
<tr>
<td style="text-align:left">position</td>
<td style="text-align:left">[可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空数</td>
</tr>
<tr>
<td style="text-align:left">size</td>
<td style="text-align:left">[可选] 按钮大小 larger/留空</td>
</tr>
</tbody>
</table></div><div class="tab-item-content active" id="btn-3"><ol>
<li>一组按钮</li>
</ol>
<p>This is my website, click the button <a class="btn-anzhiyu " target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><span>AnZhiYu</span></a><br>
This is my website, click the button <a class="btn-anzhiyu " target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>
This is my website, click the button <a class="btn-anzhiyu outline" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><span>AnZhiYu</span></a><br>
This is my website, click the button <a class="btn-anzhiyu outline" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>
This is my website, click the button <a class="btn-anzhiyu larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></p>
<ol start="2">
<li>调整位置/大小</li>
</ol>
<p><a class="btn-anzhiyu block" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>
<a class="btn-anzhiyu block center larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>
<a class="btn-anzhiyu block right outline larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></p>
<ol start="3">
<li>more than one button in center</li>
</ol>
<span>
<a class="btn-anzhiyu larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu blue larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu pink larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu red larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu purple larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu orange larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu green larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
</span>
<ol start="4">
<li>居中按钮</li>
</ol>
<div class="btn-center">
<a class="btn-anzhiyu outline larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu outline blue larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu outline pink larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu outline red larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu outline purple larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu outline orange larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
<a class="btn-anzhiyu outline green larger" target="_blank" rel="noopener" href="https://anheyu.com/"
title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a>
</div></div><div class="tab-item-content" id="btn-4"><ol>
<li>一组按钮</li>
</ol>
<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">This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu %}</span><br><span class="line">This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right %}</span><br><span class="line">This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,,outline %}</span><br><span class="line">This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline %}</span><br><span class="line">This is my website, click the button {% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>调整位置/大小</li>
</ol>
<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></pre></td><td class="code"><pre><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %}</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>more than one button in center</li>
</ol>
<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></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag"><<span class="name">span</span>></span></span></span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,blue larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %}</span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">span</span>></span></span></span><br></pre></td></tr></table></figure>
<ol start="4">
<li>居中按钮</li>
</ol>
<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></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn-center"</span>></span></span></span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline red larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline purple larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline orange larger %}</span><br><span class="line">{% btn 'https://anheyu.com/',AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline green larger %}</span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="网站卡片-sites">网站卡片 sites</h2>
<div class="tabs" id="site"><ul class="nav-tabs"><button type="button" class="tab " data-href="site-1">标签语法</button><button type="button" class="tab active" data-href="site-2">样式预览</button><button type="button" class="tab " data-href="site-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="site-1"><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></pre></td><td class="code"><pre><span class="line">{% sitegroup %}</span><br><span class="line">{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}</span><br><span class="line">{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}</span><br><span class="line">{% endsitegroup %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="site-2"><div class="site-card-group"><a class="site-card" target="_blank" rel="noopener" href="https://xaoxuu.com" data-title=简约风格><div class="wrapper cover"><img class="cover fadeIn" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478965ce6557.webp"/></div><div class="info"><img class="flink-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png"/><span class="site-title">xaoxuu</span></div></a>
<a class="site-card" target="_blank" rel="noopener" href="https://colsrch.top" data-title=这是一段关于这个网站的描述文字><div class="wrapper cover"><img class="cover fadeIn" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"/></div><div class="info"><img class="flink-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg"/><span class="site-title">Colsrch</span></div></a>
<a class="site-card" target="_blank" rel="noopener" href="https://linhk1606.github.io" data-title=这是一段关于这个网站的描述文字><div class="wrapper cover"><img class="cover fadeIn" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478963584621.png"/></div><div class="info"><img class="flink-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478968743368.png"/><span class="site-title">Linhk1606</span></div></a></div></div><div class="tab-item-content" id="site-3"><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">{% sitegroup %}</span><br><span class="line">{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://bu.dusays.com/2023/06/01/6478965ce6557.webp, avatar=https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}</span><br><span class="line">{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://bu.dusays.com/2023/06/01/6478963584621.png, avatar=https://bu.dusays.com/2023/06/01/6478968743368.png, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% endsitegroup %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="单张图片-image">单张图片 image</h2>
<div class="tabs" id="image"><ul class="nav-tabs"><button type="button" class="tab " data-href="image-1">标签语法</button><button type="button" class="tab " data-href="image-2">参数配置</button><button type="button" class="tab active" data-href="image-3">样式预览</button><button type="button" class="tab " data-href="image-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="image-1"><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">{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="image-2"><ol>
<li>图片宽度高度：width=300px, height=32px</li>
<li>图片描述：alt=图片描述（butterfly 需要在主题配置文件中开启图片描述）</li>
<li>占位背景色：bg=#f2f2f2</li>
</ol></div><div class="tab-item-content active" id="image-3"><ol start="4">
<li>添加描述：</li>
</ol>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="每天下课回宿舍的路，没有什么故事。"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div>
<ol start="2">
<li>指定宽度：</li>
</ol>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" style="width:400px;"/></div></div>
<ol start="3">
<li>指定宽度并添加描述：</li>
</ol>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="每天下课回宿舍的路，没有什么故事。" style="width:400px;"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div>
<ol start="4">
<li>设置占位背景色：</li>
</ol>
<div class="img-wrap"><div class="img-bg" style="background:#1D0C04"><img class="img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="优化不同宽度浏览的观感" style="width:400px;"/></div><span class="image-caption">优化不同宽度浏览的观感</span></div></div><div class="tab-item-content" id="image-4"><ol>
<li>添加描述：</li>
</ol>
<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">{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, alt=每天下课回宿舍的路，没有什么故事。 %}</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>指定宽度：</li>
</ol>
<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">{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px %}</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>指定宽度并添加描述：</li>
</ol>
<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">{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}</span><br></pre></td></tr></table></figure>
<ol start="4">
<li>设置占位背景色：</li>
</ol>
<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">{% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="inlineImg-行内图片">inlineImg 行内图片</h2>
<div class="tabs" id="inlineimg"><ul class="nav-tabs"><button type="button" class="tab " data-href="inlineimg-1">标签语法</button><button type="button" class="tab " data-href="inlineimg-2">参数配置</button><button type="button" class="tab active" data-href="inlineimg-3">样式预览</button><button type="button" class="tab " data-href="inlineimg-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimg-1"><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></pre></td><td class="code"><pre><span class="line">{% inlineImg [src] [height] %}</span><br><span class="line"></span><br><span class="line">[src] : 图片链接</span><br><span class="line">[height] ： 图片高度限制【可选】</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="inlineimg-2"><table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">src</td>
<td style="text-align:left">图片链接</td>
</tr>
<tr>
<td style="text-align:left">height</td>
<td style="text-align:left">图片高度限制【可选】</td>
</tr>
</tbody>
</table></div><div class="tab-item-content active" id="inlineimg-3"><p>你看我长得漂亮不</p>
<p><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/64787ded2ca1c.webp" alt=""></p>
<p>我觉得很漂亮 <img class="inline-img" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/64787da5251b3.png" style="height:150px"/></p></div><div class="tab-item-content" id="inlineimg-4"><figure class="highlight plaintext"><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><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="行内图片-inlineimage">行内图片 inlineimage</h2>
<div class="tabs" id="inlineimage"><ul class="nav-tabs"><button type="button" class="tab " data-href="inlineimage-1">标签语法</button><button type="button" class="tab " data-href="inlineimage-2">参数配置</button><button type="button" class="tab active" data-href="inlineimage-3">样式预览</button><button type="button" class="tab " data-href="inlineimage-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimage-1"><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">{% inlineimage 图片链接, height=高度（可选） %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="inlineimage-2"><ol>
<li>高度：height=20px</li>
</ol></div><div class="tab-item-content active" id="inlineimage-3"><p>这是 <img no-lazy class="inline" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/647895232e5d5.webp" style="height:1.5em"/> 一段话。</p>
<p>这又是 <img no-lazy class="inline" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2022/05/19/6285328a83ca7.gif" style="height:40px;"/> 一段话。</p></div><div class="tab-item-content" id="inlineimage-4"><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></pre></td><td class="code"><pre><span class="line">这是 {% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %} 一段话。</span><br><span class="line"></span><br><span class="line">这又是 {% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %} 一段话。</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="label-标签">label 标签</h2>
<div class="tabs" id="label"><ul class="nav-tabs"><button type="button" class="tab " data-href="label-1">标签语法</button><button type="button" class="tab " data-href="label-2">参数配置</button><button type="button" class="tab active" data-href="label-3">样式预览</button><button type="button" class="tab " data-href="label-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="label-1"><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">{% label text color %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="label-2"><table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">text</td>
<td style="text-align:left">文字</td>
</tr>
<tr>
<td style="text-align:left">color</td>
<td style="text-align:left">【可选】背景颜色，默认为 default，default/blue/pink/red/purple/orange/green</td>
</tr>
</tbody>
</table></div><div class="tab-item-content active" id="label-3"><p>臣亮言：<mark class="hl-label default">先帝</mark> 创业未半，而<mark class="hl-label blue">中道崩殂</mark> 。今天下三分，<mark class="hl-label pink">益州疲敝</mark> ，此诚<mark class="hl-label red">危急存亡之秋</mark> 也！然侍衞之臣，不懈于内；<mark class="hl-label purple">忠志之士</mark> ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br>
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有<mark class="hl-label orange">作奸</mark> 、<mark class="hl-label green">犯科</mark> ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</p></div><div class="tab-item-content" id="label-4"><figure class="highlight plaintext"><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">臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。</span><br><span class="line">宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="flink-友链标签">flink 友链标签</h2>
<div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>可在任何界面插入类似<code>友情链接</code>列表效果，内容格式与友情链接界面一样，支持 <code>yml 格式</code>,注意<code>yml数据</code>具有格式要求，请注意格式对齐，防止被编辑器格式化导致格式错误从而报错。</p>
</div>
<div class="tabs" id="btn"><ul class="nav-tabs"><button type="button" class="tab " data-href="btn-1">标签语法</button><button type="button" class="tab " data-href="btn-2">参数配置</button><button type="button" class="tab active" data-href="btn-3">样式预览</button><button type="button" class="tab " data-href="btn-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><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></pre></td><td class="code"><pre><span class="line">{% flink %}</span><br><span class="line">xxxxxx</span><br><span class="line">{% endflink %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="btn-2"><table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">class_name</td>
<td style="text-align:left">h2标题</td>
</tr>
<tr>
<td style="text-align:left">flink_style</td>
<td style="text-align:left">【可选】友链样式，默认为 flexcard，flexcard/anzhiyu</td>
</tr>
<tr>
<td style="text-align:left">link_list</td>
<td style="text-align:left">【可选】友链样式，默认为 flexcard，flexcard/anzhiyu</td>
</tr>
</tbody>
</table></div><div class="tab-item-content active" id="btn-3"><div class="flink"><div class="flink-name">推荐博客</div> <div class="flink-list"><div class="flexcard-flink-list">
<a href="https://anheyu.com/" title="安知鱼" target="_blank" class="flink-list-card cf-friends-link">
<div class="wrapper cover">
<img class="no-lightbox cover fadeIn" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://npm.elemecdn.com/[email protected]/img/post/common/anheyu.com.jpg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="安知鱼" />
</div>
<div class="info">
<img class="no-lightbox cf-friends-avatar flink-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="安知鱼"/>
<span class="flink-sitename cf-friends-name">安知鱼</span>
</div>
</a></div></div><div class="flink-name">网站</div><div class="flink-desc">值得推荐的网站</div> <div class="flink-list"><div class="anzhiyu-flink-list">
<div class="flink-list-item">
<a href="https://www.youtube.com/" title="Youtube" class="cf-friends-link" target="_blank">
<div class="flink-item-icon">
<img class="no-lightbox cf-friends-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Youtube" />
</div>
<div class="flink-item-info">
<div class="flink-item-name">Youtube</div>
<div class="flink-item-desc" title="视频网站">视频网站</div>
</div>
</a>
</div>
<div class="flink-list-item">
<a href="https://www.weibo.com/" title="Weibo" class="cf-friends-link" target="_blank">
<div class="flink-item-icon">
<img class="no-lightbox cf-friends-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Weibo" />
</div>
<div class="flink-item-info">
<div class="flink-item-name">Weibo</div>
<div class="flink-item-desc" title="中国最大社交分享平台">中国最大社交分享平台</div>
</div>
</a>
</div>
<div class="flink-list-item">
<a href="https://twitter.com/" title="Twitter" class="cf-friends-link" target="_blank">
<div class="flink-item-icon">
<img class="no-lightbox cf-friends-avatar" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Twitter" />
</div>
<div class="flink-item-info">
<div class="flink-item-name">Twitter</div>
<div class="flink-item-desc" title="社交分享平台">社交分享平台</div>
</div>
</a>
</div></div></div></div></div><div class="tab-item-content" id="btn-4"><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><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></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">{% flink %}</span><br><span class="line"><span class="bullet">-</span> class<span class="emphasis">_name: 推荐博客</span></span><br><span class="line"><span class="emphasis"> flink_</span>style: flexcard</span><br><span class="line"> link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis"> - name: 安知鱼</span></span><br><span class="line"><span class="emphasis"> link: https://anheyu.com/</span></span><br><span class="line"><span class="emphasis"> avatar: https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg</span></span><br><span class="line"><span class="emphasis"> descr: 生活明朗，万物可爱</span></span><br><span class="line"><span class="emphasis"> siteshot: https://npm.elemecdn.com/[email protected]/img/post/common/anheyu.com.jpg</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- class_</span>name: 网站</span><br><span class="line"> class<span class="emphasis">_desc: 值得推荐的网站</span></span><br><span class="line"><span class="emphasis"> flink_</span>style: anzhiyu</span><br><span class="line"> link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis"> - name: Youtube</span></span><br><span class="line"><span class="emphasis"> link: https://www.youtube.com/</span></span><br><span class="line"><span class="emphasis"> avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"><span class="emphasis"> descr: 视频网站</span></span><br><span class="line"><span class="emphasis"> - name: Weibo</span></span><br><span class="line"><span class="emphasis"> link: https://www.weibo.com/</span></span><br><span class="line"><span class="emphasis"> avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"><span class="emphasis"> descr: 中国最大社交分享平台</span></span><br><span class="line"><span class="emphasis"> - name: Twitter</span></span><br><span class="line"><span class="emphasis"> link: https://twitter.com/</span></span><br><span class="line"><span class="emphasis"> avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"><span class="emphasis"> descr: 社交分享平台</span></span><br><span class="line"><span class="emphasis">{% endflink %}</span></span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="mermaid-图">mermaid 图</h2>
<div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>使用<code>mermaid标签</code>可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看<a target="_blank" rel="noopener" href="https://mermaid.js.org/#/">mermaid文档</a></p>
</div>
<p>修改 <code>主题配置文件</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></pre></td><td class="code"><pre><span class="line"><span class="comment"># mermaid</span></span><br><span class="line"><span class="comment"># see https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line"> <span class="attr">theme:</span></span><br><span class="line"> <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line"> <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure>
<div class="tabs" id="mermaid"><ul class="nav-tabs"><button type="button" class="tab " data-href="mermaid-1">标签语法</button><button type="button" class="tab active" data-href="mermaid-2">样式预览</button><button type="button" class="tab " data-href="mermaid-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="mermaid-1"><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></pre></td><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">内容</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="mermaid-2"><p><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/647889d3a16f8.png" alt="mermaid"></p></div><div class="tab-item-content" id="mermaid-3"><figure class="highlight plaintext"><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">{% mermaid %}</span><br><span class="line">pie</span><br><span class="line"> title Key elements in Product X</span><br><span class="line"> "Calcium" : 42.96</span><br><span class="line"> "Potassium" : 50.05</span><br><span class="line"> "Magnesium" : 10.01</span><br><span class="line"> "Iron" : 5</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="复选列表-checkbox">复选列表 checkbox</h2>
<div class="tabs" id="checkbox"><ul class="nav-tabs"><button type="button" class="tab " data-href="checkbox-1">标签语法</button><button type="button" class="tab " data-href="checkbox-2">配置参数</button><button type="button" class="tab active" data-href="checkbox-3">样式预览</button><button type="button" class="tab " data-href="checkbox-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="checkbox-1"><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">{% checkbox 样式参数（可选）, 文本（支持简单md） %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="checkbox-2"><ol>
<li>样式: plus, minus, times</li>
<li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li>
<li>选中状态: checked</li>
</ol></div><div class="tab-item-content active" id="checkbox-3"><div class='checkbox'><input type="checkbox" />
<p>纯文本测试</p>
</div>
<div class='checkbox checked'><input type="checkbox" checked="checked"/>
<p>支持简单的 <a target="_blank" rel="noopener" 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></div><div class="tab-item-content" id="checkbox-4"><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></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="dogeplayer-多吉云播放器">dogeplayer 多吉云播放器</h2>
<div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>快捷引入<a target="_blank" rel="noopener" href="https://console.dogecloud.com/vod/overview">多吉云视频</a></p>
</div>
<div class="tabs" id="label"><ul class="nav-tabs"><button type="button" class="tab " data-href="label-1">标签语法</button><button type="button" class="tab " data-href="label-2">参数配置</button><button type="button" class="tab active" data-href="label-3">样式预览</button><button type="button" class="tab " data-href="label-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="label-1"><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">{% dogeplayer 4945 ebb742fd1f0b5a7b %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="label-2"><p>获取<code>userId</code>与<code>vcode</code></p>
<p><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/64788b5bad729.webp" alt=""></p>
<table>
<thead>
<tr>
<th style="text-align:left">参数</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">userId</td>
<td style="text-align:left">多吉云userId</td>
</tr>
<tr>
<td style="text-align:left">vcode</td>
<td style="text-align:left">视频vcode</td>
</tr>
</tbody>
</table></div><div class="tab-item-content active" id="label-3"><p><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/64788c12883b8.webp" alt=""></p></div><div class="tab-item-content" id="label-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% dogeplayer 4945 ebb742fd1f0b5a7b %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="折叠框-folding">折叠框 folding</h2>
<div class="note blue anzhiyufont anzhiyu-icon-bullhorn disabled"><p>折叠框folding</p>
</div>
<div class="tabs" id="folding"><ul class="nav-tabs"><button type="button" class="tab " data-href="folding-1">标签语法</button><button type="button" class="tab " data-href="folding-2">配置参数</button><button type="button" class="tab active" data-href="folding-3">样式预览</button><button type="button" class="tab " data-href="folding-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><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></pre></td><td class="code"><pre><span class="line">{% folding 参数（可选）, 标题 %}</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="folding-2"><ol>
<li>颜色：blue, cyan, green, yellow, red</li>
<li>状态：状态填写 open 代表默认打开。</li>
</ol></div><div class="tab-item-content active" id="folding-3"><details class="folding-tag" ><summary> 查看图片测试 </summary>
<div class='content'>
<p><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src="https://bu.dusays.com/2023/06/01/64788d71c832d.webp" alt=""></p>
</div>
</details>
<details class="folding-tag" cyan open><summary> 查看默认打开的折叠框 </summary>
<div class='content'>
<p>这是一个默认打开的折叠框。</p>
</div>
</details>
<details class="folding-tag" green><summary> 查看代码测试 </summary>
<div class='content'>
<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">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br></pre></td></tr></table></figure>
</div>
</details>
<details class="folding-tag" yellow><summary> 查看列表测试 </summary>
<div class='content'>
<ul><li>haha</li><li>hehe</li></ul>
</div>
</details>
<details class="folding-tag" red><summary> 查看嵌套测试 </summary>
<div class='content'>
<details class="folding-tag" blue><summary> 查看嵌套测试2 </summary> <div class='content'> <details class="folding-tag" ><summary> 查看嵌套测试3 </summary> <div class='content'> <p>hahaha <span><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64788cd5a356b.png' style='height:24px'></span></p> </div> </details> </div> </details>
</div>
</details></div><div class="tab-item-content" id="folding-4"><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><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">{% folding 查看图片测试 %}</span><br><span class="line"></span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><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><span class="line"></span><br><span class="line">{% folding green, 查看代码测试 %}</span><br><span class="line">假装这里有代码块（代码块没法嵌套代码块）</span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding yellow, 查看列表测试 %}</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> haha</span><br><span class="line"><span class="bullet">-</span> hehe</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><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 class="language-xml"><span class="tag"><<span class="name">span</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://bu.dusays.com/2023/06/01/64788cd5a356b.png'</span> <span class="attr">style</span>=<span class="string">'height:24px'</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">span</span>></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></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="Gallery-相册图库">Gallery 相册图库</h2>
<p>一个图库集合。</p>
<div class="tabs" id="gallery"><ul class="nav-tabs"><button type="button" class="tab " data-href="gallery-1">标签语法</button><button type="button" class="tab " data-href="gallery-2">参数配置</button><button type="button" class="tab active" data-href="gallery-3">样式预览</button><button type="button" class="tab " data-href="gallery-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="gallery-1"><ol>
<li>
<p>gallerygroup 相册图库</p>
<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"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure>
</li>
<li>
<p>gallery 相册</p>
</li>
</ol>
<div class="tabs" id="gallery相册"><ul class="nav-tabs"><button type="button" class="tab active" data-href="gallery相册-1">本地</button><button type="button" class="tab " data-href="gallery相册-2">远程</button></ul><div class="tab-contents"><div class="tab-item-content active" id="gallery相册-1"><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></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery true,220,10 %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery true,,10 %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数名</th>
<th>释义</th>
</tr>
</thead>
<tbody>
<tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true/false。默认为 <code>false</code>。</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td>
</tr>
</tbody>
</table></div><div class="tab-item-content" id="gallery相册-2"><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">{% gallery url,[link],[lazyload],[rowHeight],[limit] %}</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数名</th>
<th>释义</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>【必须】 识别词</td>
</tr>
<tr>
<td>link</td>
<td>【必须】远程的 json 链接</td>
</tr>
<tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true/false。默认为 <code>false</code>。</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td>
</tr>
</tbody>
</table>
<blockquote>
<p>远程链接 Json 的例子</p>
</blockquote>
<p>有三个参数，<code>url</code>是必须存在的，<code>alt</code> 和 <code>title</code> 可有，也可没有。</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></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0556.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">"IMG_0556.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"title"</span><span class="punctuation">:</span> <span class="string">"这是title"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0472.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">"IMG_0472.jpg"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0453.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">""</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0931.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">""</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>示例</p>
</blockquote>
<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></pre></td><td class="code"><pre><span class="line">{% gallery url,https://xxxx.com/sss.json %}</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery url,https://xxxx.com/sss.json,true,220,10 %}</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery url,https://xxxx.com/sss.json,true,,10 %}</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="tab-item-content" id="gallery-2"><ul>
<li>
<p>gallerygroup 相册图库</p>
<table>
<thead>
<tr>
<th style="text-align:left">参数名</th>
<th style="text-align:left">释义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">图库名字</td>
</tr>
<tr>
<td style="text-align:left">description</td>
<td style="text-align:left">图库描述</td>
</tr>
<tr>
<td style="text-align:left">link</td>
<td style="text-align:left">链接到对应相册的地址</td>
</tr>
<tr>
<td style="text-align:left">img-url</td>
<td style="text-align:left">图库封面</td>
</tr>
</tbody>
</table>
</li>
</ul>
<div class="note info flat"><p>思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。</p>
</div>
<ul>
<li>gallery 相册<br>
区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。<strong>建议在粘贴时故意使用长短、大小、横竖不一的图片</strong>，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）</li>
</ul>
<div class="tabs" id="gallery相册参数"><ul class="nav-tabs"><button type="button" class="tab active" data-href="gallery相册参数-1">本地</button><button type="button" class="tab " data-href="gallery相册参数-2">远程</button></ul><div class="tab-contents"><div class="tab-item-content active" id="gallery相册参数-1"><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></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery true,220,10 %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery true,,10 %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数名</th>
<th>释义</th>
</tr>
</thead>
<tbody>
<tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true/false。默认为 <code>false</code>。</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td>
</tr>
</tbody>
</table></div><div class="tab-item-content" id="gallery相册参数-2"><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">{% gallery url,[link],[lazyload],[rowHeight],[limit] %}</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数名</th>
<th>释义</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>【必须】 识别词</td>
</tr>
<tr>
<td>link</td>
<td>【必须】远程的 json 链接</td>
</tr>
<tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true/false。默认为 <code>false</code>。</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td>
</tr>
</tbody>
</table>
<blockquote>
<p>远程链接 Json 的例子</p>
</blockquote>
<p>有三个参数，<code>url</code>是必须存在的，<code>alt</code> 和 <code>title</code> 可有，也可没有。</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></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0556.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">"IMG_0556.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"title"</span><span class="punctuation">:</span> <span class="string">"这是title"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0472.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">"IMG_0472.jpg"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0453.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">""</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">"https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0931.jpg"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"alt"</span><span class="punctuation">:</span> <span class="string">""</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>示例</p>
</blockquote>
<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></pre></td><td class="code"><pre><span class="line">{% gallery url,https://xxxx.com/sss.json %}</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery url,https://xxxx.com/sss.json,true,220,10 %}</span><br><span class="line">{% endgallery %}</span><br><span class="line"></span><br><span class="line">{% gallery url,https://xxxx.com/sss.json,true,,10 %}</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="tab-item-content active" id="gallery-3"><ul>
<li>gallerygroup 相册图库</li>
</ul>
<div class="gallery-group-main">
<figure class="gallery-group">
<img class="gallery-group-img no-lightbox" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64788f24d05bd.webp' alt="Group Image Gallery">
<figcaption>
<div class="gallery-group-name">MC</div>
<p>在Rikkaの六花服务器里留下的足迹</p>
<a href='/wordScenery/'></a>
</figcaption>
</figure>
<figure class="gallery-group">
<img class="gallery-group-img no-lightbox" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64788f456fc3d.webp' alt="Group Image Gallery">
<figcaption>
<div class="gallery-group-name">Gundam</div>
<p>哦咧哇gundam哒！</p>
<a href='/thousand/'></a>
</figcaption>
</figure>
<figure class="gallery-group">
<img class="gallery-group-img no-lightbox" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onerror="this.onerror=null,this.src="https://up.ctext.top/default_bg.png"" data-lazy-src='https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp' alt="Group Image Gallery">
<figcaption>
<div class="gallery-group-name">I-am-Akilar</div>
<p>某种意义上也算自拍吧</p>
<a href='/wallpaper/'></a>
</figcaption>
</figure>
</div>
<ul>
<li>gallery 相册</li>
</ul>
<div class="gallery">
<div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="220" data-limit="2">
<span class="gallery-data">[{"url":"https://bu.dusays.com/2023/06/01/647896b15759c.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896cabde59.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896ed810b3.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]</span>
</div><button class="gallery-load-more" style="opacity:0">
<span>加载更多</span>
<i class="anzhiyufont anzhiyu-icon-arrow-down"></i>
</button></div></div><div class="tab-item-content" id="gallery-4"><div class="note info flat"><p>对于很多同学提问的<code>gallerygroup</code>和<code>gallery</code>相册页的链接问题。这里说下我个人的使用习惯。<br>
一般使用相册图库的话，可以在导航栏加一个 gallery 的 page(<strong>使用指令<code>hexo new page gallery</code>添加</strong>)，里面放相册图库作为封面。然后在<code>[Blogroot]/source/gallery/</code>下面建立相应的文件夹，例如若按照这里的示例，若欲使用<code>/gallery/MC/</code>路径访问 MC 相册，则需要新建<code>[Blogroot]/source/gallery/MC/index.md</code>，并在里面填入<code>gallery</code>相册内容。</p>
<p>注意 ⚠️：本站相册集为单独优化，可参考<a target="_blank" rel="noopener" href="https://anheyu.com/posts/220c.html">配置相册页面</a>。</p>
</div>
<ol>
<li>
<p>gallerygroup 相册图库</p>
<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"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line"> {% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/wordScenery/' https://bu.dusays.com/2023/06/01/64788f24d05bd.webp %}</span><br><span class="line"> {% galleryGroup Gundam 哦咧哇gundam哒！ '/thousand/' https://bu.dusays.com/2023/06/01/64788f456fc3d.webp %}</span><br><span class="line"> {% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/wallpaper/' https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp %}</span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure>
</li>
<li>
<p>gallery 相册</p>
<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">{% gallery true,,2 %}</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896b15759c.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896cabde59.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647890012b1ec.webp</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
</li>
</ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div>
<h2 id="tag-hide">tag-hide</h2>
<div class="note blue anzhiyufont anzhiyu-icon-bullhorn flat"><p>如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。<br>
请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。</p>
</div>
<div class="tabs" id="tag-hide"><ul class="nav-tabs"><button type="button" class="tab active" data-href="tag-hide-1">inline</button><button type="button" class="tab " data-href="tag-hide-2">Block</button><button type="button" class="tab " data-href="tag-hide-3">Toggle</button></ul><div class="tab-contents"><div class="tab-item-content active" id="tag-hide-1"><p><code>inline</code> 在文本里面添加按钮隐藏内容，只限文字</p>
<p>( content不能包含英文逗号，可用<code>&sbquo;</code>)</p>
<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">{% hideInline content,display,bg,color %}</span><br></pre></td></tr></table></figure>
<ul>
<li>
<p>content: 文本内容</p>
</li>
<li>
<p>display: 按钮显示的文字(可选)</p>
</li>
<li>
<p>bg: 按钮的背景颜色(可选)</p>
</li>
<li>