-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
320 lines (154 loc) · 379 KB
/
Copy pathsearch.xml
File metadata and controls
320 lines (154 loc) · 379 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>浅聊漫展</title>
<link href="/posts/5154/"/>
<url>/posts/5154/</url>
<content type="html"><![CDATA[<p>老实说，漫展本应是同好之间纯粹交流的场所。</p><p>早期的漫展条件朴素，没有精致的布景，也没有铺天面的商业推广。但那时愿意去出cos的人，大多是真心喜欢某个角色。不为流量，不赶潮流，支撑他们的是对作品的热爱，以及遇到同好时那种无需多言的热情。</p><p>今天再看，情况复杂了许多。一部分coser并非出于对角色的喜爱，而是为了博取关注或追赶流行。与此同时，一个令人不安的现象出现了：如果一个长相不太符合主流审美的coser，素颜、未修图就把照片发到网上，往往不出半小时，就可能被截图挂到微博或小红书上，任人嘲讽。漫展的外来者也增多了——他们并不关心作品，只是来看“乐子”或评判颜值。这种现象很难完全阻止，也并非全是恶意，但客观上，它让漫展的氛围一点点变得苛刻。</p><p>漫展本有它纯粹而独特的魅力。在那个大多数参与者都是真心热爱者的年代，官方对二次元文化的管控相对宽松。正是通过漫展，许多爱好者直接或间接地推动了二次元文化的传播。日漫以及其他日本二次元作品，借此走进了成千上万年轻人的视野——那是很多人记忆中的“黄金时代”。</p><p>后来，出于文化安全、产业发展等多重考虑，官方更倾向于支持国产动画与漫画，投入大量资源扶持本土作品，例如《哪吒之魔童降世》《龙族》和《时光代理人》等（这里不作具体评判，仅举例）。相比之下，日漫在国内获得的支持明显减少。随着审核制度的收紧，大量日漫事实上回到了“大航海时代”——正版平台引进的番剧数量下降，已有的作品常被删减或遮挡，同步播出越来越难，不少作品最终只能依赖民间字幕组传播。<br>客观地说，官方扶持国产、限制日漫的初衷有合理之处——希望本土文化产业链成长起来。然而这一政策导向产生的客观后果是：漫展上“纯粹为爱发电”的日漫同好比例下降了，取而代之的是更具商业色彩的国漫IP推广，以及前来打卡的网红与路人。当热爱被政策风向和流量逻辑重新洗牌，漫展的味道自然慢慢变了。</p><p>这种变化并非一朝一夕发生。当资源持续向国产IP倾斜，漫展主办方出于商业考量，会更倾向于引入有政策支持和资本推动的国漫项目。久而久之，日漫同好能在漫展上获得的认同感和交流空间被压缩。那些曾经“为爱发电”的核心群体参与热情下降，取而代之的是更多跟风而来的普通观众。这很难说谁对谁错，更多是一种结构性的趋势。</p><p>与此同时，漫展的大众化也带来了风气上的摩擦。偷拍、容貌焦虑、恶意嘲讽等现象时有发生。一个普通学生想要出一次cos，可能要顶着被挂到网上评头论足的巨大心理压力。这些问题的根源很复杂——社交媒体的放大效应、大众对小众文化的不理解，以及漫展本身从“小圈子”走向“公共场合”后的水土不服，都难辞其咎。但不可否认的是，当“热爱”不再是参与的首要门槛，漫展的氛围自然会变得嘈杂。</p><p>然而，如果因此彻底否定漫展，同样有失公允。每次舆论热议漫展乱象的同时，也总能看到一些让人心头一暖的报道。比如，有人在场馆内突发疾病，身边穿着cos服的陌生人会毫不犹豫地伸出援手；遇到自然灾害时，漫展社群也常常自发组织援助。这些细节说明，无论外部环境如何变化，那些真正热爱这个圈子的人，心底那份善意与热血并没有消失。</p><p>写到这里，我必须承认：以上观察基于个人视角，难免有限，也未必全面。但就我所见，漫展的风气确实在变化——有让人遗憾的地方，也有值得保留希望的理由。政策导向短期内很难逆转，日漫的处境也很难回到从前。但只要还有人因为真心热爱一个角色而去出cos，因为看到陌生人倒地而去救助，这个圈子就不至于完全变质。希望有一天，那个美好的乌托邦能真实存在。</p><div style="display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;"> <div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2026/05/30/6a1a997cbe0fc.jpeg" alt="图片来源BV1os411f7oH" style="width:400px;"/></div><span class="image-caption">图片来源BV1os411f7oH</span></div> <div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2026/05/30/6a1a997f081d6.jpeg" style="width:400px;"/></div></div></div>]]></content>
<categories>
<category> 生活日常 </category>
</categories>
<tags>
<tag> 日常 </tag>
</tags>
</entry>
<entry>
<title>《悲惨世界·下》句子摘抄</title>
<link href="/posts/c7k1/"/>
<url>/posts/c7k1/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>上册摘抄：<a href="/posts/d5a3/">《悲惨世界·上》句子摘抄</a><br>封面图：<a href="https://www.pixiv.net/artworks/133142880">https://www.pixiv.net/artworks/133142880</a></p><h2 id="书籍版本信息"><a href="#书籍版本信息" class="headerlink" title="书籍版本信息"></a>书籍版本信息</h2><p><strong>书名</strong>：悲惨世界<br><strong>作者</strong>：[法]维克多·雨果<br><strong>译者</strong>：李玉名<br><strong>出版社</strong>：中国文联出版社<br><strong>ISBN</strong>：9787519004668<br><strong>字数</strong>：933千字<br><strong>版次</strong>：2015-9-1<br><strong>版号</strong>：2025-5-7</p><h2 id="句子摘抄"><a href="#句子摘抄" class="headerlink" title="句子摘抄"></a>句子摘抄</h2><ul><li><p>城市如森林，也有最凶恶最可怕的东西藏匿的洞穴；只不过城市里隐藏的东西凶残、邪恶而短小，也就是说丑恶；森林里隐藏的东西凶残、野性而伟壮，也就是说美观。同为巢穴，但是兽穴胜于人穴，岩洞优于破屋。 <code>p713</code></p></li><li><p>陋室、地穴、深坑，这是一些穷苦人在社会建筑匍匐的最底层，但还不是墓穴，而是墓室的前室；世间，富人往往将最富丽堂皇的东西陈列在候见厅，而与之毗邻的阴间，死亡似乎把最破败不堪的东西摆在前室。<code>p716</code></p></li><li><p>人权，就是正义和真理。<br>人权的特性，就是永葆美好和春节。既成事实，如果极少包含或者根本不包含人权，那么即使表面上最为需要，即使最为当代人所接受，随着时间的延伸，也必定要变成畸形的、丑恶的、甚至怪诞的。<br>人权和事实的这种斗争，从人类社会之初延续至今。结束决斗，让纯洁思想和人类实际相融合，以和平方式让人权和事实相互渗透，这就是圣贤的工作。<code>p789</code></p></li><li><p>革命一时黯然失色，但绝不会退位。当然，我们也不要过分吹嘘。革命同样会出错，而且出过严重错误。<code>p793</code></p></li><li><p>在历史里，善良是稀有的珍珠，因而在我们看来，善良的人几乎总要排在伟大的人前面。<code>p799</code></p></li><li><p>旧党自恃奉天承运，把住继承权不放，认为革命既然是由反抗的权利产生出来的，那么人们就有权反抗革命。大谬不然。革命恰恰是反抗的反面，任何革命只要正常完成，本身就包含了合法性；革命，有时会被假革命者玷污，尽管玷污，也要坚持到底，尽管沾了鲜血，也要生存下去。革命不是偶然现象，而是应时而生的。一场革命就是由伪归真。有革命，因为革命乃必有。<code>p801</code></p></li><li><p>思想是智慧的活动，幻想是欲念的行动。用幻想取代思想，无异于将毒物当成食物。<code>p823</code></p></li><li><p>一个民族或一个省份使用的语言，固然值得重视，但是还有更值得重视和研究的东西，那就是受苦受难的人所讲的语言。<code>p938</code></p></li><li><p>战争只能以其目的定性，既谈不上外战，也谈不上内战，只有正义和非正义之分。只要人类还没有进入大同世界，战争就可能是必要的，至少，急促的未来推动着拖延的过去的那种战争是必要的。那种战争有什么可指责的呢？唯有用来扼杀人权、进步、理智、文明和真理的时候，战争才变得可耻，利剑才变成匕首，无论内战还是外战，都是非正义的，统统是犯罪。<code>p938</code></p></li></ul>]]></content>
<categories>
<category> 生活日常 </category>
</categories>
<tags>
<tag> 书籍 </tag>
<tag> 摘抄 </tag>
<tag> 生活 </tag>
</tags>
</entry>
<entry>
<title>博客侧边栏倒计时组件改进</title>
<link href="/posts/c2de/"/>
<url>/posts/c2de/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><div class="note info no-icon flat"><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.bsgun.cn/posts/68c5cdb9/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">给主题侧边栏添加倒计时</div> <div class="tag-link-sitename">梦爱吃鱼</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div>起因是在刚开始实装梦爱吃鱼的这个侧边栏倒计时时，发现必须填写准确的节日日期，比如如果填写春节的话，每年都需要修改一次第二年的春节日期，虽然不麻烦但也容易忘记，既然如此不如做成全自动的，省事省心<p>由于我能力不够所以使用了AI，关于这点还请原谅>_<，代码不一定最好，如果有问题和建议请在评论区指出，谢谢 qwq<br>封面图：<a href="https://www.pixiv.net/artworks/76954172">https://www.pixiv.net/artworks/76954172</a></p></div><div class="note danger modern"><p>该教程适用于 anzhiyu 主题，其他主题未测试</p></div><h2 id="修改的功能"><a href="#修改的功能" class="headerlink" title="修改的功能"></a>修改的功能</h2><ol><li>支持跨年计算<br>原本只是计算当前年份的节日，实际测试当节日已经过去时会出现负数<br>改为自动判断节日是否已过，如果已过则自动计算下一年的节日时间</li><li>使用 API 获取节假日<br>原教程需要手动在代码中维护节日日期<br>优化后通过节假日 API 自动获取节日信息，实现每年节假日更新</li></ol><div class="note warning modern"><p>使用 API 而非本地填写日期的话会有 API 失效导致无法使用的风险，请在实装前明确这点，担心失效的话可以用回原本的方法</p></div><ol start="3"><li>自动寻找最近节日<br>原本只能固定倒计时某一个节日，比如春节<br>现在则是遍历节日列表，自动计算距离当前时间最近的还没过的节日并显示倒计时</li></ol><h2 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h2><div class="note info modern"><p>以下教程基于原教程结构进行，仅修改倒计时逻辑部分</p></div><h4 id="创建-countdown-js-文件"><a href="#创建-countdown-js-文件" class="headerlink" title="创建 countdown.js 文件"></a>创建 countdown.js 文件</h4><ul><li>在博客根目录<code>source</code>文件夹下创建<code>js</code>文件夹，然后在<code>js</code>文件夹下创建<code>countdown.js</code>文件(也可以放在其他地方)</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">CountdownTimer</span> = (<span class="function">() =></span> {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> timer = <span class="literal">null</span></span><br><span class="line"> <span class="keyword">let</span> cachedHoliday = <span class="literal">null</span></span><br><span class="line"> <span class="keyword">let</span> dom = {}</span><br><span class="line"> <span class="keyword">let</span> styleInjected = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> config = {</span><br><span class="line"> <span class="attr">units</span>: {</span><br><span class="line"> <span class="attr">day</span>: { <span class="attr">text</span>: <span class="string">"今日"</span>, <span class="attr">unit</span>: <span class="string">"小时"</span> },</span><br><span class="line"> <span class="attr">week</span>: { <span class="attr">text</span>: <span class="string">"本周"</span>, <span class="attr">unit</span>: <span class="string">"天"</span> },</span><br><span class="line"> <span class="attr">month</span>: { <span class="attr">text</span>: <span class="string">"本月"</span>, <span class="attr">unit</span>: <span class="string">"天"</span> },</span><br><span class="line"> <span class="attr">year</span>: { <span class="attr">text</span>: <span class="string">"本年"</span>, <span class="attr">unit</span>: <span class="string">"天"</span> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">initDOM</span>(<span class="params"></span>) {</span><br><span class="line"> dom = {</span><br><span class="line"> <span class="attr">eventName</span>: <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"eventName"</span>),</span><br><span class="line"> <span class="attr">eventDate</span>: <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"eventDate"</span>),</span><br><span class="line"> <span class="attr">daysUntil</span>: <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"daysUntil"</span>),</span><br><span class="line"> <span class="attr">countRight</span>: <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"countRight"</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">isLeapYear</span>(<span class="params">year</span>) {</span><br><span class="line"> <span class="keyword">return</span> (year % <span class="number">4</span> === <span class="number">0</span> && year % <span class="number">100</span> !== <span class="number">0</span>) || (year % <span class="number">400</span> === <span class="number">0</span>)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">getCalculators</span>(<span class="params">now</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"></span><br><span class="line"> <span class="attr">day</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> hours = now.<span class="title function_">getHours</span>()</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">remaining</span>: <span class="number">24</span> - hours,</span><br><span class="line"> <span class="attr">percentage</span>: (hours / <span class="number">24</span>) * <span class="number">100</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> <span class="attr">week</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> day = now.<span class="title function_">getDay</span>()</span><br><span class="line"> <span class="keyword">const</span> passed = day === <span class="number">0</span> ? <span class="number">6</span> : day - <span class="number">1</span></span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">remaining</span>: <span class="number">6</span> - passed,</span><br><span class="line"> <span class="attr">percentage</span>: ((passed + <span class="number">1</span>) / <span class="number">7</span>) * <span class="number">100</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> <span class="attr">month</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> total = <span class="keyword">new</span> <span class="title class_">Date</span>(now.<span class="title function_">getFullYear</span>(), now.<span class="title function_">getMonth</span>() + <span class="number">1</span>, <span class="number">0</span>).<span class="title function_">getDate</span>()</span><br><span class="line"> <span class="keyword">const</span> passed = now.<span class="title function_">getDate</span>() - <span class="number">1</span></span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">remaining</span>: total - passed,</span><br><span class="line"> <span class="attr">percentage</span>: (passed / total) * <span class="number">100</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> <span class="attr">year</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> year = now.<span class="title function_">getFullYear</span>()</span><br><span class="line"> <span class="keyword">const</span> start = <span class="keyword">new</span> <span class="title class_">Date</span>(year, <span class="number">0</span>, <span class="number">1</span>)</span><br><span class="line"> <span class="keyword">const</span> total = <span class="title function_">isLeapYear</span>(year) ? <span class="number">366</span> : <span class="number">365</span></span><br><span class="line"> <span class="keyword">const</span> passed = <span class="title class_">Math</span>.<span class="title function_">floor</span>((now - start) / <span class="number">86400000</span>)</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">remaining</span>: total - passed,</span><br><span class="line"> <span class="attr">percentage</span>: (passed / total) * <span class="number">100</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">fetchHoliday</span>(<span class="params">year</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">fetch</span>(<span class="string">`https://timor.tech/api/holiday/year/<span class="subst">${year}</span>/`</span>)</span><br><span class="line"> <span class="keyword">const</span> data = <span class="keyword">await</span> res.<span class="title function_">json</span>()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> holidays = []</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> data.<span class="property">holiday</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> h = data.<span class="property">holiday</span>[key]</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (h.<span class="property">holiday</span>) {</span><br><span class="line"> holidays.<span class="title function_">push</span>({</span><br><span class="line"> <span class="attr">name</span>: h.<span class="property">name</span>,</span><br><span class="line"> <span class="attr">date</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(h.<span class="property">date</span>)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> holidays.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =></span> a.<span class="property">date</span> - b.<span class="property">date</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> holidays</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">getNextHoliday</span>(<span class="params"></span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (cachedHoliday) <span class="keyword">return</span> cachedHoliday</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> today = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"> today.<span class="title function_">setHours</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> year = today.<span class="title function_">getFullYear</span>()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> list = <span class="keyword">await</span> <span class="title function_">fetchHoliday</span>(year)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> h <span class="keyword">of</span> list) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> d = <span class="keyword">new</span> <span class="title class_">Date</span>(h.<span class="property">date</span>)</span><br><span class="line"> d.<span class="title function_">setHours</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (d >= today) {</span><br><span class="line"> cachedHoliday = h</span><br><span class="line"> <span class="keyword">return</span> h</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> nextYearList = <span class="keyword">await</span> <span class="title function_">fetchHoliday</span>(year + <span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"> cachedHoliday = nextYearList[<span class="number">0</span>]</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> cachedHoliday</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">injectStyles</span>(<span class="params"></span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (styleInjected) <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> styles = <span class="string">`</span></span><br><span class="line"><span class="string"> .card-countdown .item-content { display:flex; }</span></span><br><span class="line"><span class="string"> .cd-count-left { position:relative; display:flex; flex-direction:column; margin-right:.8rem; line-height:1.5; align-items:center; justify-content:center; }</span></span><br><span class="line"><span class="string"> .cd-count-left .cd-text { font-size:14px; }</span></span><br><span class="line"><span class="string"> .cd-count-left .cd-name { font-weight:bold; font-size:18px; }</span></span><br><span class="line"><span class="string"> .cd-count-left .cd-time { font-size:30px; font-weight:bold; color:var(--anzhiyu-main); }</span></span><br><span class="line"><span class="string"> .cd-count-left .cd-date { font-size:12px; opacity:.6; }</span></span><br><span class="line"><span class="string"> .cd-count-left::after { content:""; position:absolute; right:-.8rem; width:2px; height:80%; background-color:var(--anzhiyu-main); opacity:.5; }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .cd-count-right { flex:1; margin-left:.8rem; display:flex; flex-direction:column; justify-content:space-between; }</span></span><br><span class="line"><span class="string"> .cd-count-item { display:flex; flex-direction:row; align-items:center; height:24px; }</span></span><br><span class="line"><span class="string"> .cd-item-name { font-size:14px; margin-right:.8rem; white-space:nowrap; }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .cd-item-progress { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:space-between; height:100%; width:100%; border-radius:8px; background-color:var(--anzhiyu-background); overflow:hidden; }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .cd-progress-bar { height:100%; border-radius:8px; background-color:var(--anzhiyu-main); }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .cd-percentage, .cd-remaining { position:absolute; font-size:12px; margin:0 6px; transition:opacity .3s ease-in-out, transform .3s ease-in-out; }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .cd-many { color:#fff; }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .cd-remaining { opacity:0; transform:translateX(10px); }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .card-countdown .item-content:hover .cd-remaining { transform:translateX(0); opacity:1; }</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> .card-countdown .item-content:hover .cd-percentage { transform:translateX(-10px); opacity:0; }</span></span><br><span class="line"><span class="string"> `</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> styleSheet = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">"style"</span>)</span><br><span class="line"> styleSheet.<span class="property">id</span> = <span class="string">"countdown-style"</span></span><br><span class="line"> styleSheet.<span class="property">textContent</span> = styles</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">head</span>.<span class="title function_">appendChild</span>(styleSheet)</span><br><span class="line"></span><br><span class="line"> styleInjected = <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">updateCountdown</span>(<span class="params"></span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!dom.<span class="property">eventName</span>) <span class="keyword">return</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> target = <span class="keyword">await</span> <span class="title function_">getNextHoliday</span>()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> today = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"> today.<span class="title function_">setHours</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> targetDate = <span class="keyword">new</span> <span class="title class_">Date</span>(target.<span class="property">date</span>)</span><br><span class="line"> targetDate.<span class="title function_">setHours</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> days = <span class="title class_">Math</span>.<span class="title function_">round</span>((targetDate - today) / <span class="number">86400000</span>)</span><br><span class="line"></span><br><span class="line"> dom.<span class="property">eventName</span>.<span class="property">textContent</span> = target.<span class="property">name</span></span><br><span class="line"> dom.<span class="property">eventDate</span>.<span class="property">textContent</span> = targetDate.<span class="title function_">toLocaleDateString</span>(<span class="string">'zh-CN'</span>)</span><br><span class="line"> dom.<span class="property">daysUntil</span>.<span class="property">textContent</span> = days</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> calculators = <span class="title function_">getCalculators</span>(now)</span><br><span class="line"></span><br><span class="line"> dom.<span class="property">countRight</span>.<span class="property">innerHTML</span> = <span class="title class_">Object</span>.<span class="title function_">entries</span>(config.<span class="property">units</span>)</span><br><span class="line"> .<span class="title function_">map</span>(<span class="function">(<span class="params">[key,{text,unit}]</span>)=></span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> {remaining,percentage} = calculators[key]()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string"> <div class="cd-count-item"></span></span><br><span class="line"><span class="string"> <div class="cd-item-name"><span class="subst">${text}</span></div></span></span><br><span class="line"><span class="string"> <div class="cd-item-progress"></span></span><br><span class="line"><span class="string"> <div class="cd-progress-bar" style="width:<span class="subst">${percentage}</span>%;opacity:<span class="subst">${percentage/<span class="number">100</span>}</span>"></div></span></span><br><span class="line"><span class="string"> <span class="cd-percentage <span class="subst">${percentage>=<span class="number">46</span>?<span class="string">'cd-many'</span>:<span class="string">''</span>}</span>"><span class="subst">${percentage.toFixed(<span class="number">2</span>)}</span>%</span></span></span><br><span class="line"><span class="string"> <span class="cd-remaining <span class="subst">${percentage>=<span class="number">60</span>?<span class="string">'cd-many'</span>:<span class="string">''</span>}</span>"></span></span><br><span class="line"><span class="string"> <span class="cd-tip">还剩</span><span class="subst">${remaining}</span><span class="cd-tip"><span class="subst">${unit}</span></span></span></span><br><span class="line"><span class="string"> </span></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> `</span></span><br><span class="line"> }).<span class="title function_">join</span>(<span class="string">''</span>)</span><br><span class="line"></span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"></span><br><span class="line"> dom.<span class="property">eventName</span>.<span class="property">textContent</span> = <span class="string">"节日"</span></span><br><span class="line"> dom.<span class="property">eventDate</span>.<span class="property">textContent</span> = <span class="string">"--"</span></span><br><span class="line"> dom.<span class="property">daysUntil</span>.<span class="property">textContent</span> = <span class="string">"--"</span></span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">start</span>(<span class="params"></span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (timer) <span class="built_in">clearInterval</span>(timer)</span><br><span class="line"></span><br><span class="line"> <span class="title function_">initDOM</span>()</span><br><span class="line"></span><br><span class="line"> <span class="title function_">injectStyles</span>()</span><br><span class="line"></span><br><span class="line"> <span class="title function_">updateCountdown</span>()</span><br><span class="line"></span><br><span class="line"> timer = <span class="built_in">setInterval</span>(updateCountdown,<span class="number">600000</span>)</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">"DOMContentLoaded"</span>, start)</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">"pjax:complete"</span>, start)</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">"pjax:send"</span>, <span class="function">()=></span> timer && <span class="built_in">clearInterval</span>(timer))</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> { start }</span><br><span class="line"></span><br><span class="line">})()</span><br></pre></td></tr></table></figure><h4 id="添加组件配置"><a href="#添加组件配置" class="headerlink" title="添加组件配置"></a>添加组件配置</h4><ul><li>在<code>source</code>中创建<code>_data/widget.yml</code>文件，复制粘贴下面的代码</li></ul><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">top:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">card-countdown</span></span><br><span class="line"> <span class="attr">id_name:</span></span><br><span class="line"> <span class="attr">name:</span></span><br><span class="line"> <span class="attr">icon:</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> <div class="cd-count-left"></span></span><br><span class="line"><span class="string"> <span class="cd-text">距离</span></span></span><br><span class="line"><span class="string"> <span class="cd-name" id="eventName"></span></span></span><br><span class="line"><span class="string"> <span class="cd-time" id="daysUntil"></span></span></span><br><span class="line"><span class="string"> <span class="cd-date" id="eventDate"></span></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div id="countRight" class="cd-count-right"></div></span></span><br></pre></td></tr></table></figure><h4 id="引入-JS-文件"><a href="#引入-JS-文件" class="headerlink" title="引入 JS 文件"></a>引入 JS 文件</h4><p>在<code>_config.anzhiyu.yml</code>文件的<code>inject</code>配置项的<code>bottom</code>中引入 JS</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></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="comment"># 自定义css</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">bottom:</span></span><br><span class="line"> <span class="comment"># 自定义js</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="/js/countdown.js"></script></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> anzhiyu </tag>
<tag> 魔改 </tag>
<tag> Hexo </tag>
</tags>
</entry>
<entry>
<title>『自用备份』安知鱼主题标签 Tag Plugins</title>
<link href="/posts/o721/"/>
<url>/posts/o721/</url>
<content type="html"><![CDATA[<div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p><code>AnZhiYu</code>主题中大部分标签移植于<a href="https://akilar.top/">店长</a>的 <a href="https://www.npmjs.com/package/hexo-butterfly-tag-plugins-plus">hexo-butterfly-tag-plugins-plus</a>，转载请注明来自<a href="https://blog.anheyu.com/">安知鱼</a><br>封面图：<a href="https://www.pixiv.net/artworks/114533002">https://www.pixiv.net/artworks/114533002</a></p></div><h2 id="段落文本-p"><a href="#段落文本-p" class="headerlink" title="段落文本 p"></a>段落文本 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"><a href="#行内文本-span" class="headerlink" title="行内文本 span"></a>行内文本 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"><a href="#行内文本样式-text" class="headerlink" title="行内文本样式 text"></a>行内文本样式 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"><a href="#分栏-tab" class="headerlink" title="分栏 tab"></a>分栏 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"><a href="#按钮-btns" class="headerlink" title="按钮 btns"></a>按钮 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 align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">wide</td><td align="left">宽一点的按钮</td></tr><tr><td align="left">fill</td><td align="left">填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td align="left">center</td><td align="left">居中，按钮之间是固定间距</td></tr><tr><td align="left">around</td><td align="left">居中分散</td></tr><tr><td align="left">grid2</td><td align="left">等宽最多 2 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid3</td><td align="left">等宽最多 3 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid4</td><td align="left">等宽最多 4 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid5</td><td 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" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img 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 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='https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a 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='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"><a href="#按钮-btn" class="headerlink" title="按钮 btn"></a>按钮 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 align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">url</td><td align="left">链接</td></tr><tr><td align="left">text</td><td align="left">按钮文字</td></tr><tr><td align="left">icon</td><td align="left">[可选] 图标，如果开启了 <code>fontawesome</code>可以使用 fontawesome 的图标，否则只能使用默内置图标</td></tr><tr><td align="left">color</td><td align="left">[可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green</td></tr><tr><td align="left">style</td><td align="left">[可选] 按钮样式 默认实心数，outline/留空</td></tr><tr><td align="left">layout</td><td align="left">[可选] 按钮佈局 默认为 line block/留空</td></tr><tr><td align="left">position</td><td align="left">[可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空数</td></tr><tr><td align="left">size</td><td 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 " href="https://anheyu.com/" title="AnZhiYu"><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu " 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" href="https://anheyu.com/" title="AnZhiYu"><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu outline" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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"><a href="#网站卡片-sites" class="headerlink" title="网站卡片 sites"></a>网站卡片 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" href="https://xaoxuu.com" data-title=简约风格><div class="wrapper cover"><img class="cover fadeIn" src="https://bu.dusays.com/2023/06/01/6478965ce6557.webp"/></div><div class="info"><img class="flink-avatar" src="https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png"/><span class="site-title">xaoxuu</span></div></a><a class="site-card" href="https://colsrch.top" data-title=这是一段关于这个网站的描述文字><div class="wrapper cover"><img class="cover fadeIn" src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"/></div><div class="info"><img class="flink-avatar" src="https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg"/><span class="site-title">Colsrch</span></div></a><a class="site-card" href="https://linhk1606.github.io" data-title=这是一段关于这个网站的描述文字><div class="wrapper cover"><img class="cover fadeIn" src="https://bu.dusays.com/2023/06/01/6478963584621.png"/></div><div class="info"><img class="flink-avatar" 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"><a href="#单张图片-image" class="headerlink" title="单张图片 image"></a>单张图片 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="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="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="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="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-行内图片"><a href="#inlineImg-行内图片" class="headerlink" title="inlineImg 行内图片"></a>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 align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">src</td><td align="left">图片链接</td></tr><tr><td align="left">height</td><td align="left">图片高度限制【可选】</td></tr></tbody></table></div><div class="tab-item-content active" id="inlineimg-3"><p>你看我长得漂亮不</p><p><img src="https://bu.dusays.com/2023/06/01/64787ded2ca1c.webp"></p><p>我觉得很漂亮 <img class="inline-img" 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"><a href="#行内图片-inlineimage" class="headerlink" title="行内图片 inlineimage"></a>行内图片 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="https://bu.dusays.com/2023/06/01/647895232e5d5.webp" style="height:1.5em"/> 一段话。</p><p>这又是 <img no-lazy class="inline" 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-标签"><a href="#label-标签" class="headerlink" title="label 标签"></a>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 align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">text</td><td align="left">文字</td></tr><tr><td align="left">color</td><td 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="timeline"><a href="#timeline" class="headerlink" title="timeline"></a>timeline</h2><div class="tabs" id="timeline"><ul class="nav-tabs"><button type="button" class="tab " data-href="timeline-1">标签语法</button><button type="button" class="tab " data-href="timeline-2">参数配置</button><button type="button" class="tab active" data-href="timeline-3">样式预览</button><button type="button" class="tab " data-href="timeline-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="timeline-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></pre></td><td class="code"><pre><span class="line">{% timeline title,color %}</span><br><span class="line"></span><br><span class="line"><!-- timeline title --></span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line"><!-- endtimeline --></span><br><span class="line"><!-- timeline title --></span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="timeline-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">title</td><td align="left">标题/时间线</td></tr><tr><td align="left">color</td><td align="left">timeline 颜色，default(留空) / blue / pink / red / purple / orange / green</td></tr></tbody></table></div><div class="tab-item-content active" id="timeline-3"><ol><li><p>默认颜色</p><div class="timeline undefined"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>blue</p><div class="timeline blue"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>pink</p><div class="timeline pink"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>red</p><div class="timeline red"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>purple</p><div class="timeline purple"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>orange</p><div class="timeline orange"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>green</p><div class="timeline green"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li></ol></div><div class="tab-item-content" id="timeline-4"><ol><li>默认颜色</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022 %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><ol start="2"><li>blue</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022,blue %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><ol start="3"><li>pink</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022,pink %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><ol start="4"><li>red</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022,red %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><ol start="5"><li>purple</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022,purple %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><ol start="6"><li>orange</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022,orange %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><ol start="7"><li>green</li></ol><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></pre></td><td class="code"><pre><span class="line">{% timeline 2022,green %}</span><br><span class="line"><!-- timeline 01-02 --></span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</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-友链标签"><a href="#flink-友链标签" class="headerlink" title="flink 友链标签"></a>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 align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">class_name</td><td align="left">h2标题</td></tr><tr><td align="left">flink_style</td><td align="left">【可选】友链样式，默认为 flexcard，flexcard/anzhiyu</td></tr><tr><td align="left">link_list</td><td 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="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/anheyu.com.jpg" onerror='this.onerror=null;this.src="https://bu.dusays.com/2024/06/20/6673caa5bca18.gif"' alt="安知鱼" /> </div> <div class="info"> <img class="no-lightbox cf-friends-avatar flink-avatar" src="https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg" onerror='this.onerror=null;this.src="https://bu.dusays.com/2024/06/20/6673caa5bca18.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="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="https://bu.dusays.com/2024/06/20/6673caa5bca18.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="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="https://bu.dusays.com/2024/06/20/6673caa5bca18.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="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="https://bu.dusays.com/2024/06/20/6673caa5bca18.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/anzhiyu-blog@1.1.6/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-图"><a href="#mermaid-图" class="headerlink" title="mermaid 图"></a>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 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="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"><a href="#复选列表-checkbox" class="headerlink" title="复选列表 checkbox"></a>复选列表 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 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-多吉云播放器"><a href="#dogeplayer-多吉云播放器" class="headerlink" title="dogeplayer 多吉云播放器"></a>dogeplayer 多吉云播放器</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>快捷引入<a 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="https://bu.dusays.com/2023/06/01/64788b5bad729.webp"></p><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">userId</td><td align="left">多吉云userId</td></tr><tr><td align="left">vcode</td><td align="left">视频vcode</td></tr></tbody></table></div><div class="tab-item-content active" id="label-3"><p><img src="https://bu.dusays.com/2023/06/01/64788c12883b8.webp"></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"><a href="#折叠框-folding" class="headerlink" title="折叠框 folding"></a>折叠框 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="https://bu.dusays.com/2023/06/01/64788d71c832d.webp"></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='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-相册图库"><a href="#Gallery-相册图库" class="headerlink" title="Gallery 相册图库"></a>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 align="left">参数名</th><th align="left">释义</th></tr></thead><tbody><tr><td align="left">name</td><td align="left">图库名字</td></tr><tr><td align="left">description</td><td align="left">图库描述</td></tr><tr><td align="left">link</td><td align="left">链接到对应相册的地址</td></tr><tr><td align="left">img-url</td><td 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='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='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='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 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"><a href="#tag-hide" class="headerlink" title="tag-hide"></a>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><p>color: 按钮文字的颜色(可选)</p></li></ul><blockquote><p>Demo</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></pre></td><td class="code"><pre><span class="line">哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}</span><br><span class="line"></span><br><span class="line">门里站着一个人? {% hideInline 闪 %}</span><br></pre></td></tr></table></figure><p>哪个英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button" style="background-color: #FF7242;color: #fff">查看答案<br> </button><span class="hide-content">因为西装裤(C装酷)</span></span></p><p>门里站着一个人? <span class="hide-inline"><button type="button" class="hide-button" style="">Click<br> </button><span class="hide-content">闪</span></span></p></div><div class="tab-item-content" id="tag-hide-2"><p><code>block</code>独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等</p><p>( display 不能包含英文逗号，可用<code>&sbquo;</code>)</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></pre></td><td class="code"><pre><span class="line">{% hideBlock display,bg,color %}</span><br><span class="line">content</span><br><span class="line">{% endhideBlock %}</span><br></pre></td></tr></table></figure><ul><li><p>content: 文本内容</p></li><li><p>display: 按钮显示的文字(可选)</p></li><li><p>bg: 按钮的背景颜色(可选)</p></li><li><p>color: 按钮文字的颜色(可选)</p></li></ul><blockquote><p>Demo</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></pre></td><td class="code"><pre><span class="line">查看答案</span><br><span class="line">{% hideBlock 查看答案 %}</span><br><span class="line">傻子，怎么可能有答案</span><br><span class="line">{% endhideBlock %}</span><br></pre></td></tr></table></figure><p>查看答案</p><div class="hide-block"><button type="button" class="hide-button" style="">查看答案 </button><div class="hide-content"><p>傻子，怎么可能有答案</p></div></div></div><div class="tab-item-content" id="tag-hide-3"><p>如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。</p><p>( display 不能包含英文逗号，可用<code>&sbquo;</code>)</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></pre></td><td class="code"><pre><span class="line">{% hideToggle display,bg,color %}</span><br><span class="line">content</span><br><span class="line">{% endhideToggle %}</span><br></pre></td></tr></table></figure><blockquote><p>Demo</p></blockquote><details class="toggle" ><summary class="toggle-button" style="">AnZhiYu主题安装方法</summary><div class="toggle-content"><p>在你的博客根目录里</p><p>git clone -b master <a href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git">https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git</a> themes/anzhiyu</p><p>如果想要安装比较新的dev分支，可以</p><p>git clone -b dev <a href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git">https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git</a> themes/anzhiyu</p></div></details></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="链接卡片-link"><a href="#链接卡片-link" class="headerlink" title="链接卡片 link"></a>链接卡片 link</h2><div class="tabs" id="link"><ul class="nav-tabs"><button type="button" class="tab " data-href="link-1">标签语法</button><button type="button" class="tab active" data-href="link-2">样式预览</button><button type="button" class="tab " data-href="link-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="link-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">{% link 标题, 站点描述, 链接, 图片链接（可选） %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="link-2"><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/owen0o0/getFavicon"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">获取网站的Favicon图标并显示在你的网页上</div> <div class="tag-link-sitename">owen0o0</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div></div><div class="tab-item-content" id="link-3"><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">{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}</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="单选列表-radio"><a href="#单选列表-radio" class="headerlink" title="单选列表 radio"></a>单选列表 radio</h2><div class="tabs" id="radio"><ul class="nav-tabs"><button type="button" class="tab " data-href="radio-1">标签语法</button><button type="button" class="tab " data-href="radio-2">配置参数</button><button type="button" class="tab active" data-href="radio-3">样式预览</button><button type="button" class="tab " data-href="radio-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="radio-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">{% radio 样式参数（可选）, 文本（支持简单md） %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="radio-2"><ol><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="radio-3"><div class='checkbox'><input type="radio" /> <p>纯文本测试</p> </div> <div class='checkbox checked'><input type="radio" checked="checked"/> <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p> </div> <div class='checkbox red'><input type="radio" /> <p>支持自定义颜色</p> </div> <div class='checkbox green'><input type="radio" /> <p>绿色</p> </div> <div class='checkbox yellow'><input type="radio" /> <p>黄色</p> </div> <div class='checkbox cyan'><input type="radio" /> <p>青色</p> </div> <div class='checkbox blue'><input type="radio" /> <p>蓝色</p> </div></div><div class="tab-item-content" id="radio-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></pre></td><td class="code"><pre><span class="line">{% radio 纯文本测试 %}</span><br><span class="line">{% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %}</span><br><span class="line">{% radio red, 支持自定义颜色 %}</span><br><span class="line">{% radio green, 绿色 %}</span><br><span class="line">{% radio yellow, 黄色 %}</span><br><span class="line">{% radio cyan, 青色 %}</span><br><span class="line">{% radio blue, 蓝色 %}</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="上标标签-tip"><a href="#上标标签-tip" class="headerlink" title="上标标签 tip"></a>上标标签 tip</h2><div class="tip cogs"><p>主要样式参考自<a href="https://www.antmoe.com/posts/3b43914f/">小康的 butterfly 渐变背景标签</a></p></div><div class="tabs" id="tip"><ul class="nav-tabs"><button type="button" class="tab " data-href="tip-1">标签语法</button><button type="button" class="tab " data-href="tip-2">配置参数</button><button type="button" class="tab active" data-href="tip-3">样式预览</button><button type="button" class="tab " data-href="tip-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="tip-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">{% tip [参数，可选] %}文本内容{% endtip %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="tip-2"><ol><li>样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li>自定义图标: 支持 fontawesome。</li></ol></div><div class="tab-item-content active" id="tip-3"><div class="tip "><p>default</p></div><div class="tip info"><p>info</p></div><div class="tip success"><p>success</p></div><div class="tip error"><p>error</p></div><div class="tip warning"><p>warning</p></div><div class="tip bolt"><p>bolt</p></div><div class="tip ban"><p>ban</p></div><div class="tip home"><p>home</p></div><div class="tip sync"><p>sync</p></div><div class="tip cogs"><p>cogs</p></div><div class="tip key"><p>key</p></div><div class="tip bell"><p>bell</p></div><div class="tip fa-atom"><p>自定义 font awesome 图标</p></div></div><div class="tab-item-content" id="tip-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></pre></td><td class="code"><pre><span class="line">{% tip %}default{% endtip %}</span><br><span class="line">{% tip info %}info{% endtip %}</span><br><span class="line">{% tip success %}success{% endtip %}</span><br><span class="line">{% tip error %}error{% endtip %}</span><br><span class="line">{% tip warning %}warning{% endtip %}</span><br><span class="line">{% tip bolt %}bolt{% endtip %}</span><br><span class="line">{% tip ban %}ban{% endtip %}</span><br><span class="line">{% tip home %}home{% endtip %}</span><br><span class="line">{% tip sync %}sync{% endtip %}</span><br><span class="line">{% tip cogs %}cogs{% endtip %}</span><br><span class="line">{% tip key %}key{% endtip %}</span><br><span class="line">{% tip bell %}bell{% endtip %}</span><br><span class="line">{% tip fa-atom %}自定义 font awesome 图标{% endtip %}</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="Note-Bootstrap-Callout"><a href="#Note-Bootstrap-Callout" class="headerlink" title="Note (Bootstrap Callout)"></a>Note (Bootstrap Callout)</h2><div class="tabs" id="note"><ul class="nav-tabs"><button type="button" class="tab " data-href="note-1">通用配置</button><button type="button" class="tab " data-href="note-2">语法格式</button><button type="button" class="tab " data-href="note-3">配置参数</button><button type="button" class="tab active" data-href="note-4">样式预览</button><button type="button" class="tab " data-href="note-5">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="note-1"><p>修改主题配置文件</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line"> <span class="comment"># Note tag style values:</span></span><br><span class="line"> <span class="comment"># - simple bs-callout old alert style. Default.</span></span><br><span class="line"> <span class="comment"># - modern bs-callout new (v2-v3) alert style.</span></span><br><span class="line"> <span class="comment"># - flat flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line"> <span class="comment"># - disabled disable all CSS styles import of note tag.</span></span><br><span class="line"> <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line"> <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line"> <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line"> <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line"> <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><p><code>Note</code>标签外挂有两种用法。<code>icons</code>和<code>light_bg_offset</code>只对方法一生效。</p><p><code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code></p></div><div class="tab-item-content" id="note-2"><p><code>方法一</code></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></pre></td><td class="code"><pre><span class="line">{% note [class] [no-icon] [style] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure><p><code>方法二</code></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></pre></td><td class="code"><pre><span class="line">{% note [color] [icon] [style] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="note-3"><p><code>方法一</code></p><table><thead><tr><th align="left">参数</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">【可选】标识，不同的标识有不同的配色<br>（ default / primary / success / info / warning / danger ）</td></tr><tr><td align="left">no-icon</td><td align="left">【可选】不显示 icon</td></tr><tr><td align="left">style</td><td align="left">【可选】可以覆盖配置中的 style<br>（simple/modern/flat/disabled）</td></tr></tbody></table><p><code>方法二</code></p><table><thead><tr><th align="left">参数</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">【可选】标识，不同的标识有不同的配色<br>（ default / blue / pink / red / purple / orange / green ）</td></tr><tr><td align="left">no-icon</td><td align="left">【可选】可配置自定义 icon (支持 fontawesome 图标和主题内置的阿里图标,<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>, 也可以配置 no-icon )</td></tr><tr><td align="left">style</td><td align="left">【可选】可以覆盖配置中的 style<br>（simple/modern/flat/disabled）</td></tr></tbody></table></div><div class="tab-item-content active" id="note-4"><p><code>方法一</code></p><ol><li><code>simple</code>样式</li></ol><div class="note simple"><p>默认 提示块标签</p></div><div class="note default simple"><p>default 提示块标签</p></div><div class="note primary simple"><p>primary 提示块标签</p></div><div class="note success simple"><p>success 提示块标签</p></div><div class="note info simple"><p>info 提示块标签</p></div><div class="note warning simple"><p>warning 提示块标签</p></div><div class="note danger simple"><p>danger 提示块标签</p></div><ol start="2"><li><code>modern</code>样式</li></ol><div class="note modern"><p>默认 提示块标签</p></div><div class="note default modern"><p>default 提示块标签</p></div><div class="note primary modern"><p>primary 提示块标签</p></div><div class="note success modern"><p>success 提示块标签</p></div><div class="note info modern"><p>info 提示块标签</p></div><div class="note warning modern"><p>warning 提示块标签</p></div><div class="note danger modern"><p>danger 提示块标签</p></div><ol start="3"><li><code>flat</code>样式</li></ol><div class="note flat"><p>默认 提示块标签</p></div><div class="note default flat"><p>default 提示块标签</p></div><div class="note primary flat"><p>primary 提示块标签</p></div><div class="note success flat"><p>success 提示块标签</p></div><div class="note info flat"><p>info 提示块标签</p></div><div class="note warning flat"><p>warning 提示块标签</p></div><div class="note danger flat"><p>danger 提示块标签</p></div><ol start="4"><li><code>disabled</code>样式</li></ol><div class="note disabled"><p>默认 提示块标签</p></div><div class="note default disabled"><p>default 提示块标签</p></div><div class="note primary disabled"><p>primary 提示块标签</p></div><div class="note success disabled"><p>success 提示块标签</p></div><div class="note info disabled"><p>info 提示块标签</p></div><div class="note warning disabled"><p>warning 提示块标签</p></div><div class="note danger disabled"><p>danger 提示块标签</p></div><ol start="5"><li><code>no-icon</code>样式</li></ol><div class="note no-icon flat"><p>默认 提示块标签</p></div><div class="note default no-icon flat"><p>default 提示块标签</p></div><div class="note primary no-icon flat"><p>primary 提示块标签</p></div><div class="note success no-icon flat"><p>success 提示块标签</p></div><div class="note info no-icon flat"><p>info 提示块标签</p></div><div class="note warning no-icon flat"><p>warning 提示块标签</p></div><div class="note danger no-icon flat"><p>danger 提示块标签</p></div><p><code>方法二</code></p><p>图标支持 <code>fontawesome</code> 和 <code>主题内置的阿里图标</code>，使用方法为加上对应的类名，<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>，默认未开启 fontawesome</p><ol><li>simple 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket simple"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram simple"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan simple"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao simple"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi simple"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train simple"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2022 年快到了….</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan simple"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏器</p></div><ol start="2"><li>modern 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket modern"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn modern"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram modern"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan modern"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao modern"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi modern"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train modern"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan modern"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="3"><li>flat 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn flat"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram flat"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan flat"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi flat"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train flat"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan flat"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="4"><li>disabled 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket disabled"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn disabled"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram disabled"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan disabled"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao disabled"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi disabled"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train disabled"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan disabled"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="5"><li>no-icon 样式</li></ol><div class="note no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue no-icon flat"><p>2021 年快到了….</p></div><div class="note pink no-icon flat"><p>小心开车 安全至上</p></div><div class="note red no-icon flat"><p>这是三片呢？还是四片？</p></div><div class="note orange no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple no-icon flat"><p>剪刀石头布</p></div><div class="note green no-icon flat"><p>前端最讨厌的浏览器</p></div></div><div class="tab-item-content" id="note-5"><p><code>方法一</code></p><ol><li><code>simple</code>样式</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">{% note simple %}默认 提示块标签{% endnote %}</span><br><span class="line">{% note default simple %}default 提示块标签{% endnote %}</span><br><span class="line">{% note primary simple %}primary 提示块标签{% endnote %}</span><br><span class="line">{% note success simple %}success 提示块标签{% endnote %}</span><br><span class="line">{% note info simple %}info 提示块标签{% endnote %}</span><br><span class="line">{% note warning simple %}warning 提示块标签{% endnote %}</span><br><span class="line">{% note danger simple %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure><ol start="2"><li><code>modern</code>样式</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">{% note modern %}默认 提示块标签{% endnote %}</span><br><span class="line">{% note default modern %}default 提示块标签{% endnote %}</span><br><span class="line">{% note primary modern %}primary 提示块标签{% endnote %}</span><br><span class="line">{% note success modern %}success 提示块标签{% endnote %}</span><br><span class="line">{% note info modern %}info 提示块标签{% endnote %}</span><br><span class="line">{% note warning modern %}warning 提示块标签{% endnote %}</span><br><span class="line">{% note danger modern %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure><ol start="3"><li><code>flat</code>样式</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">{% note flat %}默认 提示块标签{% endnote %}</span><br><span class="line">{% note default flat %}default 提示块标签{% endnote %}</span><br><span class="line">{% note primary flat %}primary 提示块标签{% endnote %}</span><br><span class="line">{% note success flat %}success 提示块标签{% endnote %}</span><br><span class="line">{% note info flat %}info 提示块标签{% endnote %}</span><br><span class="line">{% note warning flat %}warning 提示块标签{% endnote %}</span><br><span class="line">{% note danger flat %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure><ol start="4"><li><code>disabled</code>样式</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">{% note disabled %}默认 提示块标签{% endnote %}</span><br><span class="line">{% note default disabled %}default 提示块标签{% endnote %}</span><br><span class="line">{% note primary disabled %}primary 提示块标签{% endnote %}</span><br><span class="line">{% note success disabled %}success 提示块标签{% endnote %}</span><br><span class="line">{% note info disabled %}info 提示块标签{% endnote %}</span><br><span class="line">{% note warning disabled %}warning 提示块标签{% endnote %}</span><br><span class="line">{% note danger disabled %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure><ol start="5"><li><code>no-icon</code>样式</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">{% note no-icon %}默认 提示块标签{% endnote %}</span><br><span class="line">{% note default no-icon %}default 提示块标签{% endnote %}</span><br><span class="line">{% note primary no-icon %}primary 提示块标签{% endnote %}</span><br><span class="line">{% note success no-icon %}success 提示块标签{% endnote %}</span><br><span class="line">{% note info no-icon %}info 提示块标签{% endnote %}</span><br><span class="line">{% note warning no-icon %}warning 提示块标签{% endnote %}</span><br><span class="line">{% note danger no-icon %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure><p><code>方法二</code></p><p>图标支持 <code>fontawesome</code> 和 <code>主题内置的阿里图标</code>，使用方法为加上对应的类名，<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>，默认未开启 fontawesome</p><ol><li><p>simple 样式<br><code>主题内置阿里图标</code></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></pre></td><td class="code"><pre><span class="line">{% note 'anzhiyufont anzhiyu-icon-rocket' simple %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' simple %}2022 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'anzhiyufont anzhiyu-icon-instagram' simple %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'anzhiyufont anzhiyu-icon-fan' simple%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'anzhiyufont anzhiyu-icon-dengpao' simple %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' simple %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train' simple %}前端最讨厌的浏览器{% endnote %}</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</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></pre></td><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'fas fa-bullhorn' simple %}2022 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'icon-fan' simple%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p>modern 样式<br><code>主题内置阿里图标</code></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></pre></td><td class="code"><pre><span class="line">{% note 'anzhiyufont anzhiyu-icon-rocket' modern %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' modern %}2022 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'anzhiyufont anzhiyu-icon-instagram' modern %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'anzhiyufont anzhiyu-icon-fan' modern%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'anzhiyufont anzhiyu-icon-dengpao' modern %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' modern %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train' modern %}前端最讨厌的浏览器{% endnote %}</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</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></pre></td><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'fas fa-bullhorn' modern %}2021 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'icon-fan' modern%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p>flat 样式<br><code>主题内置阿里图标</code></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></pre></td><td class="code"><pre><span class="line">{% note 'anzhiyufont anzhiyu-icon-rocket' flat %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' flat %}2022 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'anzhiyufont anzhiyu-icon-instagram' flat %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'anzhiyufont anzhiyu-icon-fan' flat%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'anzhiyufont anzhiyu-icon-dengpao' flat %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' flat %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train' flat %}前端最讨厌的浏览器{% endnote %}</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</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></pre></td><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'fas fa-bullhorn' flat %}2021 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'icon-fan' flat%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p>disabled 样式<br><code>主题内置阿里图标</code></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></pre></td><td class="code"><pre><span class="line">{% note 'anzhiyufont anzhiyu-icon-rocket' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' disabled %}2022 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'anzhiyufont anzhiyu-icon-instagram' disabled %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'anzhiyufont anzhiyu-icon-fan' disabled%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'anzhiyufont anzhiyu-icon-dengpao' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' disabled %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train' disabled %}前端最讨厌的浏览器{% endnote %}</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</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></pre></td><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue 'fas fa-bullhorn' disabled %}2021 年快到了....{% endnote %}</span><br><span class="line">{% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red 'icon-fan' disabled %}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p>no-icon 样式</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></pre></td><td class="code"><pre><span class="line">{% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note blue no-icon %}2021 年快到了....{% endnote %}</span><br><span class="line">{% note pink no-icon %}小心开车 安全至上{% endnote %}</span><br><span class="line">{% note red no-icon %}这是三片呢？还是四片？{% endnote %}</span><br><span class="line">{% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line">{% note purple no-icon %}剪刀石头布{% endnote %}</span><br><span class="line">{% note green no-icon %}前端最讨厌的浏览器{% endnote %}</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="音频-audio"><a href="#音频-audio" class="headerlink" title="音频 audio"></a>音频 audio</h2><div class="tabs" id="audio"><ul class="nav-tabs"><button type="button" class="tab " data-href="audio-1">标签语法</button><button type="button" class="tab active" data-href="audio-2">样式预览</button><button type="button" class="tab " data-href="audio-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="audio-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">{% audio 音频链接 %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="audio-2"><div class="audio"><audio controls preload><source src='https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3' type='audio/mp3'>Your browser does not support the audio tag.</audio></div></div><div class="tab-item-content" id="audio-3"><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">{% audio https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 %}</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="视频-video"><a href="#视频-video" class="headerlink" title="视频 video"></a>视频 video</h2><div class="tabs" id="video"><ul class="nav-tabs"><button type="button" class="tab " data-href="video-1">标签语法</button><button type="button" class="tab " data-href="video-2">参数配置</button><button type="button" class="tab active" data-href="video-3">样式预览</button><button type="button" class="tab " data-href="video-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="video-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">{% video 视频链接 %}</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="video-2"><ol><li>对其方向：left, center, right</li><li>列数：逗号后面直接写列数，支持 1 ～ 4 列。</li></ol></div><div class="tab-item-content active" id="video-3"><ol start="3"><li>100%宽度</li></ol><p><img src="https://bu.dusays.com/2023/06/01/6478a1eeb1386.png" alt="100%宽度"></p><ol start="2"><li>50%宽度</li></ol><p><img src="https://bu.dusays.com/2023/06/01/6478a20a5f242.png" alt="50%宽度"></p><ol start="3"><li>25%宽度</li></ol><p><img src="https://bu.dusays.com/2023/06/01/6478a22b26088.png" alt="25%宽度"></p></div><div class="tab-item-content" id="video-4"><ol><li>100%宽度</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">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br></pre></td></tr></table></figure><ol start="2"><li>50%宽度</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></pre></td><td class="code"><pre><span class="line">{% videos, 2 %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% endvideos %}</span><br></pre></td></tr></table></figure><ol start="3"><li>25%宽度</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></pre></td><td class="code"><pre><span class="line">{% videos, 4 %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% endvideos %}</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>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> anzhiyu </tag>
<tag> Hexo </tag>
</tags>
</entry>
<entry>
<title>《悲惨世界·上》句子摘抄</title>
<link href="/posts/d5a3/"/>
<url>/posts/d5a3/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近突然对西方一些中世纪或近代的文学作品比较感兴趣，买了几本名著回来读，我不知道自己是不是受到了异世界番剧中常见的奇幻架空中世纪背景的影响。总而言之，本文内容如标题所言，是我在第二次阅读过程中对《悲惨世界·上》部分句子的摘抄，但这些句子不都是好句，然后我给摘抄的每个句子都按顺序标注了具体的页码，方便查找。<br>下册摘抄：<a href="/posts/c7k1/">《悲惨世界·下》句子摘抄</a><br>封面图：<a href="https://www.pixiv.net/artworks/93124671">https://www.pixiv.net/artworks/93124671</a></p><h2 id="书籍版本信息"><a href="#书籍版本信息" class="headerlink" title="书籍版本信息"></a>书籍版本信息</h2><p><strong>书名</strong>：悲惨世界<br><strong>作者</strong>：[法]维克多·雨果<br><strong>译者</strong>：李玉名<br><strong>出版社</strong>：中国文联出版社<br><strong>ISBN</strong>：9787519004668<br><strong>字数</strong>：933千字<br><strong>版次</strong>：2015-9-1<br><strong>版号</strong>：2025-5-7</p><h2 id="句子摘抄"><a href="#句子摘抄" class="headerlink" title="句子摘抄"></a>句子摘抄</h2><ul><li><p>人有肉体，这对人来说，既是负担又是诱惑。人拖着肉体，又屈从于肉体。<code>p14</code></p></li><li><p>成为圣贤，那是极其特殊的；做个正义者，倒是为人的准则。你们尽可徘徊、怯懦，尽可犯错误，但是要做个正义者。<code>p14</code></p></li><li><p>尽量少犯错误，这也是为人的准绳。不出一点儿差错，这是天使的梦想。生在尘世，就难免有错。过错是一种地心吸力。<code>p14</code></p></li><li><p>女人、孩子、仆役、弱者、穷人和愚昧的人有过失，那就是丈夫、父亲、主人、强者、富人和学者的过错。<code>p14</code></p></li><li><p>社会不提供免费教育是有罪的，应当为它制造的黑暗负责。这颗灵魂充满了黑暗，必然要产生罪恶。有罪的人并不是犯罪的人，而是制造黑暗的人。<code>p14</code></p></li><li><p>最好看的祭坛，那是不幸者因得到安慰而感谢上帝的一颗心灵。<code>p22</code></p></li><li><p>美，同适用一样有用……也许更有用处。<code>p24</code></p></li><li><p>永远也不要害怕盗贼和凶手。那是身体的危险，小危险。还是惧我们自身吧。偏见，就是盗贼；恶习，就是凶手。巨大的危险在我们自身。<code>p28</code></p></li><li><p>我是说，人有个暴君，也就是愚昧。我投票结束这个暴君的通知。这个暴君产生的王权是伪权威，而科学才是真权威。人只应当由科学来统治。<code>p40</code></p></li><li><p>童真就是它本身的王冠。童真无需殿下的头衔。无论贵为王孙公子，还是贱民为花子乞儿，童真都同样是崇高的。<code>p42</code></p></li><li><p>是啊，进步的野蛮行为叫做革命。这种行为一结束，人们就能认识这一点：人类受到粗暴对待，但是前进了。<code>p45</code></p></li><li><p>进步应当信仰上帝，不能由不信教的人来扬善。无神论者是人类糟糕的带路人。<code>p45</code></p></li><li><p>无限是存在的，就在那里。如果无限没有我了，那么我就是它的止境，它也就不是无限了，换句话说，它就不存在了。然而，它存在，因此，它有一个我。无限的这个我，就是上帝。<code>p45</code></p></li><li><p>飞黄腾达，是一件相当丑恶的东西。它貌似才能，实为欺世盗名的冒牌货。在大众的眼里，成功和出人头地几乎是一码事。成功，这个才能的假象，有一个上当者：历史。唯独尤维纳利斯和塔西佗对此有微词。在当今时代，有一种几乎是正宗的哲学，到成功的门下甘为仆役，穿上成功的号服，卑躬屈膝地效命。飞黄腾达吧，这就是学说，风云得意就意味本事才干。你中了彩票，就被视为一个精明的人。谁得势谁就受人尊敬。生来命好，什么都不成问题。交上好运，其余的也就顺理成章了。只要万事亨通，就能身价百倍。除了反响要延续上百年的五六个重大例外，当今推崇的仅仅是短视。镀金即真金。谁撞上大运没关系，只要飞黄腾达就是好家伙。俗物犹如一个老那喀索斯，自我欣赏而又为俗物鼓掌。无论什么人，无论在什么方面，只要达到目的，就立刻赢得众人喝彩，被夸为旷世奇才，被誉为摩西、埃斯库勒斯、但丁、米开朗琪罗，或者拿破仑。一个公证人摇身一变成议员；一个假高乃依写了一部假的《提里达特》；一名太监居然掌握整个后宫；一个从军的小市民偶尔打了一个划时代的大胜仗；一名药剂师发明了纸板鞋底，当成皮底鞋卖给桑布尔-默兹军队，挣了四十万利弗尔年金；一个货郎娶了高利贷，这一公一母生下七八百万；一名传教士因为摇唇鼓舌而当上主教；一个大户人家的总管退职时成为巨富，便被擢用为财政大臣。上述种种，世人都称作天才，如同说穆斯克东的嘴脸非常俊美，克洛狄乌斯的仪表十分庄严。他们把烂泥塘中鸭子的爪印，同苍穹上的星辰混为一谈。<code>p53</code></p></li><li><p>城市腐化人，因而使人变得凶残。山林和海洋使人变得粗野，激发野性而一般不摧毁人性。<code>p85</code></p></li><li><p>历史一向忽视所有这类有特色的事情；这也在所难免，历史总要被无穷无尽所侵占。然而，这些细节还是有用处的，——人们总是不当地把这称为小事，其实人类并无小事，正如植物没有小叶一样。世世代代的面貌，是由岁岁年年的表情组合而成的。<code>p120</code></p></li><li><p>这下死了。若是懂得利用，这可是好东西。荨麻幼嫩的时候，叶子是很好吃的蔬菜。老荨麻有纤维，跟亚麻和芝麻一样。荨麻布能比得上亚麻布。荨麻剁一剁可以喂鸡鸭，搅碎了可以喂牛羊。荨麻籽掺在饲料里，能让牲口的皮毛光亮；荨麻根汁用盐调和，便成为一种非常好看的黄色颜料。此外，这也是极好的草料，每年能收割两茬。可是，荨麻生长需要什么呢？只要一点点土地，不用管理，也不用种植。只是它的籽边熟边落，不容易收获罢了。稍微花点力气，荨麻就成为有用的东西；根本不管，它就变成有害的东西，于是就铲除。多少人类似荨麻！他沉吟一下，又补充说，“朋友们，记住这一点：世上既没有莠草，也没有坏人。只有糟糕的庄稼人。”<code>p166</code></p></li><li><p>在精神的眼睛看来，人心比任何地方都更炫目，也更黑暗；精神的眼请所注视的任何东西，也没有人心这样可怕，这样复杂，这样神秘，这样无边无际。有一种比海洋更宏大的景象，那就是天空；还有一种比天空更宏大的景象，那就是人的内心世界。<br>以人心为题作诗，哪管只描述一个人，哪管只描述一个最微贱的人，那也会将所有史诗汇人一部更高最终的史诗。人心是妄念、贪婪和图谋的混杂，是梦想的熔炉，是可耻意念的渊薮，也是诡诈的魔窟、欲望的战场。在某种时刻，透过一个思索的人苍白的脸，观察后面，观察内心，观察隐晦。外表沉默的下面，却有荷马史诗中的那种巨人的搏斗，有弥尔顿诗中的那种神龙蛇怪的混杂成群成群的鬼魂，有但丁诗中的那种螺旋形的幻视。每人负载的这种无限，虽然幽深莫测，但总是用来衡量自已头脑的意愿和生活的行为，而且总是大失所望。<code>p219</code></p></li><li><p>只有在黑暗的地下才能发现钻石，也只有在深沉的思想里才能发现真理。<code>p229</code></p></li><li><p>要知道，有壮举的人，确信在民众里总能找到肯为他效力的人。<code>p276</code></p></li><li><p>一个人只要在故乡来来往往，就总以为那些街道与自己无关，那些窗户、那些屋顶和那些门都不算什么，那些墙壁非常生疏，那些树木也无足轻重，没有踏进去的房舍则毫无用处，脚下所踏的路石也不过是石块而已。后来一旦背井离乡，就会发觉自己珍视那些街道，怀念那些屋顶和门窗，离不开那些墙壁，热爱那些树木，没有踏进去的房舍天天要出入。而且，自己的五脏六腑、血液和心脏，都留在那些铺路的石块之间了。<code>p426</code></p></li><li><p>危难关头总有闪光，有时令我们头晕目眩，有时叫我们心明眼净。<code>p435</code></p></li><li><p>人类最神圣的慷慨，是为别人赎罪。<code>p542</code></p></li><li><p>人类的全部罪恶，都是从儿童的流浪生活开始的。可以说，在任何大城市里，一个流浪儿就是一个毁掉的成人，儿童放任自流，就要不可避免地染上社会的种种恶习，丧失天生的诚实和良心，几乎无处不是如此。<code>p553</code></p></li><li><p>社会上一切善行义举，都是科学、文学、艺术和教育放射的光芒。培养人，培养人。开启他们的心智，好让他们给你温暖。全民教育的光辉问题，迟早要以绝对真理的不可抗拒的威力提出来。<code>p559</code></p></li><li><p>人到青春的这个年龄，心胸充满了冲天的自豪，而他却总要低头去瞧脚上磨出洞的靴子，体验到了穷困的不公正的耻辱和刺心的羞惭。可赞而又可怕的考验，考验出来，意志薄弱的人会变得无耻卑鄙，意志坚强的人则变得超凡脱俗。穷困是一个熔炉，每当命运需要一个坏蛋或一个神人，就把一个人投进去。<br>须知在细小的搏斗中，会有许多伟大的行动。在黑暗中对付生计和丑恶的致命侵犯，要步步防卫，表现出坚忍不拔而又鲜为人知的勇敢。高尚而隐秘的胜利，不为人所见，不能扬名，也没有鼓乐欢迎。生活、不幸、孤独、遗弃、穷困，无一不是战场，无一不产生英雄；无名英雄，有时比著名的英雄更伟大。<br>罕见的坚强性格就是这样创造出来的；穷困，几乎总是后母，有时还是亲娘；困苦往往孕育心灵和精神的力量；艰苦是志气的奶母；不幸是哺育高尚之人的好乳汁。<code>p652</code></p></li></ul>]]></content>
<categories>
<category> 生活日常 </category>
</categories>
<tags>
<tag> 书籍 </tag>
<tag> 摘抄 </tag>
<tag> 生活 </tag>
</tags>
</entry>
<entry>
<title>对无职转生的评价及资源分享</title>
<link href="/posts/d904/"/>
<url>/posts/d904/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>这是一篇关于我自己对无职转生这部作品的观后评价和相关的资源分享，在文中有大量涉及剧透的内容，阅读前请考虑清楚是否要读这篇文章(/ω＼)<br>评价中不可避免会含有我自己的主观成分，做不到完全客观，我更倾向于支持这部作品，如您对本作品持否定态度，请轻点喷谢谢qwq<br>资源分享部分的资源全部是网络上传播的资源，本站只记录并转载，任何资源的存储均与本站无关，各位朋友如有能力请一定要支持正版资源。如您是版权方或相关人员，不希望这些资源分享出现在本站，请通过邮箱<a href="mailto:2955321963@qq.com">2955321963@qq.com</a>与我联系，我将会与您沟通并删除相应资源的分享<br>封面图：<a href="https://www.pixiv.net/artworks/104099159">https://www.pixiv.net/artworks/104099159</a></p><h2 id="评价"><a href="#评价" class="headerlink" title="评价"></a>评价</h2><p>在开始评价之前，我认为简要介绍一下有关这部番的信息是有必要的。</p><p>无职转生，全称《無職転生 ～異世界行ったら本気だす～》，原作轻小说由不讲理不求人（理不尽な孫の手）在网站“成为小说家吧”发布。截至本文发布前，该作品有漫画、动画、游戏等衍生作品，动画在<a href="https://bangumi.tv/">bangumi</a>评分7.9。这部作品主要讲了一个NEET被大运创死，带着前世记忆转生到充满剑与魔法的异世界，成为少年鲁迪乌斯·格雷拉特。在洛琪希的培养下，他决心在新人生中不再虚度光阴，自幼刻苦钻研魔法与剑术。后因”转移灾害”，他与艾莉丝一同被传送至危险的魔大陆。在漫长的归乡旅途中，他们结识了魔族战士瑞杰路德，共同克服重重困难。返回人类领地后，鲁迪乌斯进入魔法大学深造，与失散的希露菲重逢并结为夫妻。之后鲁迪在救自己母亲时因遭遇意外父亲不幸死亡，而他也失去了一只手臂，但同时也娶了第二位妻子洛琪希。后因人神的威胁，鲁迪被迫与龙神战斗，随后失败，鲁迪不得不成为龙神的手下（看到后面才感慨怎么能有这么好的老板啊），同时也在战斗后娶了磨练剑技归来的艾莉丝为第三位妻子（致敬传奇上锁匠艾莉丝）。随着人魔大战的阴云笼罩世界，鲁迪乌斯不断磨练自己的实力，为守护家人与和平而战，最后，鲁迪乌斯·格雷拉特圆满地结束了他的一生，后世影响深远。</p><p>无职转生这部作品，从制作水平上来说的话，第一季是两季中当之无愧的第一，之后第二季制作水平较第一季下降了一些，这点从第一季初见龙老板时鲁迪的岩炮弹发射场景和第二季学院里与巴迪冈迪决斗时的岩炮弹发射可以看出，此外第二季还有较第一季更多的静态场景。从网上搜集信息来看，这可能不是资金问题而是制作团队人才流失的问题。</p><p>作为一部异世界题材的番，它并没有选择走与其他异世界厕纸一样，即转生到异世界后拥有各种技能或是特殊能力，番剧节奏快，最后草草收笔的公式化打法，而是用很多篇幅和缓慢的叙事节奏来构建一个宏大完整的世界观，从魔法体系到各类种族，从剑术流派到社会系统等。《无职转生》的核心很明显，从第一季前几集就能体现出来：重点描述一个前世失败者，在异世界从婴儿开始，出生、成长、冒险、恋爱结婚、衰老到死亡的全过程，这种题材很少见，大部分作品可能只是描写主角前几个阶段的经历，而不是完整呈现人物的整个人生。</p><p>关于无职转生的人物形象构建，在动画中的配音很好的体现了鲁迪的内心想法，在与他人的对话时使用的是转生过后鲁迪乌斯的声音，而描述人物心理活动时则是用回前世的声线，这样的配音别有趣味，也更突出他前世的性格特征，让鲁迪的人物形象更加丰满。说回主角鲁迪乌斯，他前世的悲惨经历曾让他一蹶不振，宅在家里打游戏度日。转生后，在老师洛琪希的教导、家人的陪伴和自身的反思下，他成功克服了自己懦弱的性格缺陷，重新萌发了对生活的期望过去软弱的我已经死了(祥子音)，可以说，缺少了任何一个契机，鲁迪乌斯都有可能在异世界继续颓废下去。并且不只是鲁迪，洛琪希同样也有与鲁迪相似的童年阴影，在某种程度上鲁迪和洛琪希时互相成就的，在开始时鲁迪因洛琪希而不再颓废，故他将洛琪希作为人生最重要的老师来对待，而在中后期鲁迪娶了洛琪希，给了她陪伴和温暖。由此看来，不只是主角个人的人物描写丰富，其他觉得同样是各具特色，拥有独特的个人经历，都是“立体的”。在我看到洛琪希拯救鲁迪心灵的时候，我被深深触动了，鲁迪在上学期间因善举或出于正义而遭到校园霸凌（现实中日本那边校园霸凌确实是个很严重的问题），洛琪希对鲁迪的教诲和拯救，深深刻印在我的脑海里————我也被洛琪希拯救了。我释怀了，我不再关心太多别人对我的看法，将自己真实的一面展露出来，即使社交环境依旧糟糕，但我觉得只要做好自己就行了。博主网名和本站取名都与洛琪希有关，也是出于我对洛琪希的深深的尊敬和喜爱。</p><p>扯远了，说回这部作品吸引我的地方，我觉得除了人物描写的详细和成功的塑造，也有对于世界观的详细构建上，即对背景的描写丰富。在动画中关于背景的线索是层层递进的，不是一次性将历史（人神与龙神的世仇、转移事件、人魔大战等）铺张开来，而是穿插在与不同种族人的对话、阅读书籍后逐渐了解等等之中，到最后，才构成了我们读者看到的这个宏大世界。</p><p>当然，谈论了这么久的优点，我们也该谈谈《无职转生》这部作品的缺陷和不足了。首当其冲的就是不少观众诟病的道德三观问题，如在前期鲁迪头戴内裤猥琐的笑容、偷走洛琪希胖次等。除了主角鲁迪好色外，保罗在冒险时期的经历也同样令人咋舌，并且保罗在结婚成家后还出轨了。这些点，都让不少新观众难以接受，选择直接退坑并转而抨击批评该作品。站在我自己立场上，我承认这部作品的作者和动画制作组对于这些三观问题的处理并不够到位，会令不少观众反感，但我们也不应断章取义，看几集就拉黑贬低一部作品同样不合适。</p><p>除了道德三观的问题外，无职转生的叙事节奏在某些地方较冗长缓慢。如在学院篇里，对于鲁迪学园生活的描写至少用了四五集，可能制作组本意是想要通过详细的日常描写来写出鲁迪的魔法实力或是完善世界观（？），我认为这里是有些多余了，适度删减一些可能会更好，当然这只是个人鄙见罢了。</p><p>无职转生的这些缺点，对于我这种喜爱这部番剧的人来说可能是可以接受甚至当成作品特色来看待的，但对大众来说不接受的可能更多。从网上对无职转生的舆论两边倒就能看出，不少观众还是反对的，在这些评论中，不乏一些极端的，比如仗着自己看番阅历高就去抨击其他番的“二次元婆罗门”、没完整看过整部番看了一个小时剪辑就对着角色瞎评论搏眼球搏流量的“云小鬼”等等，他们的评论脱离了对作品本身内容的评价，而是转为了对他人乃至对不同文化社区的攻击了，这诚然是不对的。任何作品都有优缺点，没有绝对的神作，也没有绝对的粪作，别人的评价终究是别人自己，自己没有切身体会是不能完全理解的，只有读者亲自读完、看完的，深刻理解了作品的内涵，进而才能确定自己对这部作品的评价高低。</p><p>在2021年的时候，B站动画区的事件想必大家都知道，即使没有也略有耳闻了，这里先大致复盘一下再做评价：2021年B站买下《无职转生》独播权，播出四集后就有3千万播放，在一切看似顺利时，知名up主LexBurner前脚刚在视频里吹捧无职转生，后脚就在直播里对无职转生及其粉丝进行尖酸刻薄的批评甚至辱骂，之后在众多无职转生粉丝的猛烈攻击下死不悔改，依然嘲讽，甚至从对无职转生粉丝的批判转到了对整个二次元社区的批判，由于这次事态严重性，B站很快就下架了这部作品并处罚了Lex 2000w的罚款，这次事件后最重要的是，国家对引进动画采取了“先审后播”制度的处理，B站动画区从此走上下坡路。</p><p>对Lex事件我不想说什么，我毕竟是在这次事件后一两年后才入坑无职的，没有经历自然也就没有评论的资格。我所见到的，只有被整改过后的动画区，Lex事件对整个动画社区来说都是灾难性的打击，不只是B站，很多资源平台也遭到清算，即使是能正常播出，其尺度和内容也存在更严格的监管，比如B站《约会大作战 第一季》更是被删减到只剩下六集。我不对审核制度做任何评价，我只是个看番的，划定圈子圈地为王的行为对我来说影响不大。对于动画区我感到一些惋惜，不少前辈为动画区做的努力因这件事而灰飞烟灭了，但前路漫漫，过去的再怎么回想也只是回忆，我们还是专注眼前，就像本站描述的「昨日之书已合，今日之页当以“真本事”为墨。」那样做吧。</p><h2 id="资源分享（持续收录更新）"><a href="#资源分享（持续收录更新）" class="headerlink" title="资源分享（持续收录更新）"></a>资源分享（持续收录更新）</h2><h4 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h4><p>无职转生全集BD 4k超分辨率</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.pixiv.net/artworks/104099159"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">夸克网盘</div> <div class="tag-link-sitename"></div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><p>无职转生 4k超分辨率</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://pan.quark.cn/s/adfc4ded3733#/list/share/3c13cb09aac04141b43cb6330b7fcc3b"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">夸克网盘</div> <div class="tag-link-sitename"></div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h4 id="小说"><a href="#小说" class="headerlink" title="小说"></a>小说</h4><p>无职转生～到了异世界就拿出真本事～</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.wenku8.net/novel/1/1587/index.htm"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">轻小说文库</div> <div class="tag-link-sitename"></div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><p>无职转生～蛇足篇～</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.wenku8.net/novel/3/3765/index.htm"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">轻小说文库</div> <div class="tag-link-sitename"></div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><blockquote><p>博主对这个网站的界面简洁表示支持，但是对其提供的配色不是很满意，故用AI写了个简单的油猴脚本，直接将该网站的背景填充为深灰色，使用白色字体，这样看上去就舒服多了，在暗处看也不会觉得很刺眼，我把脚本放在下面，需要的自取。</p></blockquote><details class="folding-tag" ><summary> 效果演示及脚本内容 </summary> <div class='content'> <p>默认白底黑字</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/04/68e0a88dabef5.png"/></div></div>脚本修改后深灰底白字<div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/04/68e0a897403ec.png"/></div></div>脚本内容<figure class="highlight javascript"><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 class="comment">// ==UserScript==</span></span><br><span class="line"><span class="comment">// @name Modify Background and Value Colors on Refresh (for wenku8.net)</span></span><br><span class="line"><span class="comment">// @namespace http://tampermonkey.net/</span></span><br><span class="line"><span class="comment">// @version 0.1</span></span><br><span class="line"><span class="comment">// @description 只有在 https://www.wenku8.net/novel/xxx 网站生效，修改 background-color 和 value 的颜色</span></span><br><span class="line"><span class="comment">// @author Roxy_Magic</span></span><br><span class="line"><span class="comment">// @match https://www.wenku8.net/novel/*</span></span><br><span class="line"><span class="comment">// @grant none</span></span><br><span class="line"><span class="comment">// ==/UserScript==</span></span><br><span class="line"></span><br><span class="line">(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="string">'use strict'</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 修改所有背景颜色为 #17181C</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'*'</span>).<span class="title function_">forEach</span>(<span class="function"><span class="params">element</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> bgColor = <span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(element).<span class="property">backgroundColor</span>;</span><br><span class="line"> <span class="keyword">if</span> (bgColor === <span class="string">'rgb(246, 246, 246)'</span> || bgColor === <span class="string">'#f6f6f6'</span>) {</span><br><span class="line"> element.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">'#393939'</span>;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 修改所有 value 为 #17181C</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'input, textarea'</span>).<span class="title function_">forEach</span>(<span class="function"><span class="params">input</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (input.<span class="property">value</span> === <span class="string">'#f6f6f6'</span>) {</span><br><span class="line"> input.<span class="property">value</span> = <span class="string">'#393939'</span>;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line">})();</span><br></pre></td></tr></table></figure> </div> </details><h4 id="漫画"><a href="#漫画" class="headerlink" title="漫画"></a>漫画</h4><p>无职转生～到了异世界就拿出真本事～</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.baozimh.com/comic/wuzhizhuansheng-huzikawayuka"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">包子漫画</div> <div class="tag-link-sitename"></div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h4 id="优秀同人作品"><a href="#优秀同人作品" class="headerlink" title="优秀同人作品"></a>优秀同人作品</h4><p>【无职转生同人动画】血契之约 12分钟 转折点4剧情：</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.bilibili.com/video/BV1miHfzEET2"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">BiliBili</div> <div class="tag-link-sitename"></div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div>]]></content>
<categories>
<category> 生活日常 </category>
</categories>
<tags>
<tag> 资源 </tag>
<tag> 日常 </tag>
<tag> 番剧 </tag>
</tags>
</entry>
<entry>
<title>使用MCDR开Minecraft模组服保姆级教程</title>
<link href="/posts/ac30/"/>
<url>/posts/ac30/</url>
<content type="html"><![CDATA[<div class="note info no-icon flat"><p>放暑假后实在太过无聊，便开了个 Minecraft 小服务器和朋友们玩，感觉不错，故写一篇教程给同样想要开 Minecraft 服务器的朋友<br>博主制作教程时使用 Windows 11，教程中游戏版本为 Java 版1.21.4，其他版本理应适用，请自行测试<br>如有问题可以在评论区提出，博主看到大概率会回复的 qwq</p></div><h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><h4 id="安装-vscode"><a href="#安装-vscode" class="headerlink" title="安装 vscode"></a>安装 vscode</h4><blockquote><p>教程中全程使用 vscode 操作，但你也可以选择其他编辑器</p></blockquote><ul><li>进入 vscode 官网：<a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></li><li>点击<code>Download for Windows</code>下载</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/29/686125e961f89.png"/></div></div><ul><li>运行安装包，安装路径改为除C盘外的盘，一直点下一步即可完成安装</li></ul><h4 id="安装-Python"><a href="#安装-Python" class="headerlink" title="安装 Python"></a>安装 Python</h4><ul><li>进入 Python 官网：<a href="https://www.python.org/">https://www.python.org/</a></li><li>点击<code>Downloads</code>并选择适合你系统的版本安装</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d23baa466b.png"/></div></div><h4 id="安装-pip"><a href="#安装-pip" class="headerlink" title="安装 pip"></a>安装 pip</h4><ul><li>在通常情况下，通过 Python 官网下载的 Python 中会自带 pip，你可以使用<code>Win + R</code>打开运行窗口，输入<code>cmd</code>并回车，再在 cmd 中输入以下指令并回车，查看是否有 pip 的版本信息</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip --version</span><br></pre></td></tr></table></figure><p>如果和图片一样显示版本信息，则说明你已成功安装了 pip ，可以跳到下一步继续，如果没有则需要安装</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d2602610a3.png"/></div></div><ul><li>打开<code>cmd</code>，输入以下指令并回车</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">python -m ensurepip --upgrade</span><br></pre></td></tr></table></figure><ul><li>安装 pip 后请再次输入<code>pip --version</code>指令，确保安装成功</li></ul><h4 id="安装-Java"><a href="#安装-Java" class="headerlink" title="安装 Java"></a>安装 Java</h4><ul><li>进入 Oracle 中文官网的 Java 下载页<a href="https://www.oracle.com/cn/java/technologies/downloads/">https://www.oracle.com/cn/java/technologies/downloads/</a></li><li>下滑找到适合你系统的安装版本，JDK 版本尽量选最新的，点击下载安装包</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d2e99777b7.png"/></div></div><ul><li>运行安装包，一直点下一步即可完成安装</li></ul><h2 id="安装-MCDR"><a href="#安装-MCDR" class="headerlink" title="安装 MCDR"></a>安装 MCDR</h2><h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><blockquote><p>MCDR 官方中文文档为<a href="https://docs.mcdreforged.com/zh-cn/latest/index.html">https://docs.mcdreforged.com/zh-cn/latest/index.html</a><br> 如遇到问题可以去文档中查询是否有解决方法，后续需要修改设置项也需要去文档中查询</p></blockquote><ul><li>打开 cmd ，输入以下命令并回车</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip install mcdreforged</span><br></pre></td></tr></table></figure><h4 id="测试是否安装成功"><a href="#测试是否安装成功" class="headerlink" title="测试是否安装成功"></a>测试是否安装成功</h4><ul><li>输入以下命令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mcdreforged</span><br></pre></td></tr></table></figure><p>如果和图片一样则安装成功</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d29eaa30cf.png"/></div></div><h2 id="制作服务端"><a href="#制作服务端" class="headerlink" title="制作服务端"></a>制作服务端</h2><div class="note warning modern"><p>Minecraft Java 有多个 mod 加载器，在安装服务端时请选择你游戏对应的 mod 加载器，这里以 Fabric 端为例进行安装<br>以下是几个常见模组的服务端安装页或官方文档，可自行查看进行安装<br>Fabric ：<a href="https://wiki.fabricmc.net/zh_cn:install">https://wiki.fabricmc.net/zh_cn:install</a><br>Forge ：<a href="https://files.minecraftforge.net/net/minecraftforge/forge/">https://files.minecraftforge.net/net/minecraftforge/forge/</a><br>NeoForge ：<a href="https://projects.neoforged.net/neoforged/neoforge">https://projects.neoforged.net/neoforged/neoforge</a></p></div><h4 id="安装-Fabric-服务端"><a href="#安装-Fabric-服务端" class="headerlink" title="安装 Fabric 服务端"></a>安装 Fabric 服务端</h4><ul><li>进入 Fabric 官方中文 Wiki 的安装说明页<a href="https://wiki.fabricmc.net/zh_cn:install">https://wiki.fabricmc.net/zh_cn:install</a><br>下滑找到<code>安装服务端</code>的几种方法，选择适合你的安装方法，推荐使用<code>安装服务端（快速）</code>的方法</li><li>若使用<code>安装服务端（快速）</code>的方法，点击访问服务端安装器下载页<a href="https://fabricmc.net/use/server/">https://fabricmc.net/use/server/</a></li><li>依次选择你的游戏版本、Fabric Loader 版本和安装程序版本，建议后两个都选最新的，然后点击下载按钮</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d5ec39f4e4.png"/></div></div><ul><li>下载好后复制该页面提供的命令行代码，等会需要用到</li><li>在除 C 盘外的合适位置新建一个文件夹，命名随意但不建议包含中文，这个文件夹将会作为我们制作服务端的临时文件夹</li><li>双击运行 .jar 文件，等待一会则会自动安装好服务端</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d5c9e03304.png"/></div></div><h4 id="测试是否制作成功"><a href="#测试是否制作成功" class="headerlink" title="测试是否制作成功"></a>测试是否制作成功</h4><ul><li>打开<code>eula.txt</code>这个文件，修改最后一行为<code>eula=true</code>，<code>Ctrl + S</code>保存后退出</li><li>在文件夹中右键，点击在终端中打开，输入你刚才在下载服务端时复制的指令并回车</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d5f90273fb.png"/></div></div><ul><li>如输出以下结果则证明你的服务端已经制作完成<br>如仍怀疑配置是否成功的话，可以打开游戏，在主菜单中–>多人游戏–>添加服务器–>在服务器地址一栏填写<code>127.0.0.1</code>–>完成并退出到多人游戏页，如果能进入自己服务端就说明服务端绝对安装好了</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d5fdd4dd83.png"/></div></div><ul><li>在终端中输入<code>stop</code>来关闭服务器，进入下一步</li></ul><h2 id="使用-MCDR-管理服务端"><a href="#使用-MCDR-管理服务端" class="headerlink" title="使用 MCDR 管理服务端"></a>使用 MCDR 管理服务端</h2><h4 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h4><ul><li>另外新建一个文件夹，右键并点击在终端中打开，输入以下命令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mcdreforged init</span><br></pre></td></tr></table></figure><p>回车后即可完成初始化，文件夹中将会多出一些文件</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d61fa9c8aa.png"/></div></div><h4 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h4><ul><li>将你上一步准备好的服务端全部放到<code>server</code>文件夹中，如图所示</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/08/02/688d628f0ded3.png"/></div></div><ul><li>使用 vscode 打开文件夹，打开<code>config.yml</code>文件并修改一些配置项<br>MCDR官方中文文档：<a href="https://docs.mcdreforged.com/zh-cn/latest/index.html#">https://docs.mcdreforged.com/zh-cn/latest/index.html#</a></li></ul><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">language:</span> <span class="string">zh_cn</span> <span class="comment">#12行</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="attr">start_command:</span> <span class="string">java</span> <span class="string">-Xms16G</span> <span class="string">-Xmx16G</span> <span class="string">-jar</span> <span class="string">fabric-server-launch.jar</span> <span class="string">nogui</span> </span><br><span class="line"><span class="comment">#31行，此处的 -Xms 和 -Xmx 后的数字是你想要分配给服务器的最小内存和最大内存，注意数字后有 G</span></span><br></pre></td></tr></table></figure><ul><li>保存并退出，右键并点击在终端中打开，输入以下命令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mcdreforged</span><br></pre></td></tr></table></figure><p>此时稍等一会，MCDR应该就会启动服务器，你可以参考上一步中<a href="#%E6%B5%8B%E8%AF%95%E6%98%AF%E5%90%A6%E5%88%B6%E4%BD%9C%E6%88%90%E5%8A%9F">测试是否制作成功</a>的步骤来验证服务器是否开启成功<br>恭喜你，此时你已经完成了本地服务器的配置，你可以在游戏中通过<code>127.0.0.1</code>进入你自己的服务器，但如果想要让你的朋友也能进来，我们还需要进一步的配置</p><h2 id="将服务器开放至公网"><a href="#将服务器开放至公网" class="headerlink" title="将服务器开放至公网"></a>将服务器开放至公网</h2><p>你可以选择使用内网穿透或 IPv6 中的任意一种将服务器开放至公网，这样你的朋友们才能进入你的服务器，如果想保证稳定也可以两种方法都使用上</p><h4 id="内网穿透"><a href="#内网穿透" class="headerlink" title="内网穿透"></a>内网穿透</h4><blockquote><p>这里以 Sakura 内网穿透为例，你也可以选择其他内网穿透</p></blockquote><ul><li>进入 Sakura Frp 官网并注册账号：<a href="https://www.natfrp.com/">https://www.natfrp.com/</a></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df10a493bd2.webp"/></div></div><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df0fdad65e0.png"/></div></div><ul><li>注册成功后登录，按照提示完成实名登录，<code>注意这里需要支付一块钱</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df0fdac0147.png"/></div></div><ul><li>来到管理面板的首页签到，领取每日免费流量，复制访问密钥并粘贴到记事本备用</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df27abb08b7.png"/></div></div><ul><li>进入服务–>软件下载，选择适用你设备操作系统的启动器进行下载安装</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df59bd0984d.png"/></div></div><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df5a59a9644.webp"/></div></div><ul><li>打开 SakuraLauncher ，输入刚才的访问密码登录</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df593642363.png"/></div></div><div class="note warning modern"><p>如果你需要开机时不登录设备就启动隧道，请完成这步，否则请跳到下一步</p><ul><li>在设置页划到最底部，点安装服务，按照提示完成安装</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df5a677f044.png"/></div></div></div><ul><li>按照图片创建隧道，名字可以随便填</li></ul><div class="note danger modern"><p>记得选择的是<code>TCP</code>类型的隧道，端口号先填<code>25565</code>的，如果你之后改了服务器配置文件的端口，这里也需要更改为你改了的，一定要对应上</p></div><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df5cb35c238.png"/></div></div><ul><li>创建完后在主页点击按钮开启隧道</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df5cb5aa9e6.png"/></div></div><ul><li>在日志页你可以找到你的隧道地址，复制并发给你的朋友们，在 Minecraft 里，来到主菜单中–>多人游戏–>添加服务器–>在服务器地址一栏填写<code>你的隧道地址</code>，保存后即可通过隧道进入服务器</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df5d4f27ad5.png"/></div></div><h4 id="公网IPv6"><a href="#公网IPv6" class="headerlink" title="公网IPv6"></a>公网IPv6</h4><div class="note warning modern"><p>首先你得确定你有 IPv6 和一个加入到 Cloudflare 的域名，并且你的朋友使用的网络也支持 IPv6，如果缺少任何一项请使用内网穿透方案</p></div><ul><li>你可以在光猫管理页面或路由器管理页面查看 IPv6 是否支持，也可以通过在 cmd 中输入<code>ipconfig</code>指令查看</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df86a4132a1.png"/></div></div><p>如果和图片里这样或差不多，就说明你的网络支持 IPv6，你也可以让你的朋友们测试，如果都支持即可继续</p><ul><li>下载适用于你操作系统的 ddns-go：<a href="https://github.com/jeessy2/ddns-go/releases">https://github.com/jeessy2/ddns-go/releases</a></li></ul><div class="note info modern"><p>有些版本默认被折叠了没有显示，可以点击列表下方的<code>Show all assets</code>展开查找</p></div><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df76065b92a.png"/></div></div><ul><li>下载的是一个压缩包，将压缩包内的<code>ddns-go.exe</code>解压出来并双击运行，如果提示安全问题不用管，继续运行就行</li><li>访问<a href="http://localhost:9876/">http://localhost:9876</a>，创建管理员账号和密码，进入配置页面</li><li>选择<code>Cloudflare</code>，点击下方的<code>创建令牌 -> 编辑区域 DNS (使用模板)</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/04/68e061b6df64f.png"/></div></div><ul><li>点击<code>创建令牌</code>，再点击<code>编辑区域 DNS</code>右侧的<code>使用模板</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df7d0123eea.png"/></div></div><ul><li>按照下图中的顺序填好信息，滑到最下面点击<code>继续以显示摘要</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df7ee1cf16b.png"/></div></div><ul><li>一直点继续直到显示如图内容，点击<code>copy</code>复制密钥，回到<a href="http://localhost:9876/">http://localhost:9876</a>粘贴到<code>Token</code>栏，<code>TTL</code>选自动就行</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df7ef4a8936.png"/></div></div><ul><li>在 ddns-go的 <code>IPv6</code> 配置项中，<code>获取 IP 方式</code>选择通过网卡获取，选择下面框内的选项，在<code>Domains</code>中填入域名 我这里填的是我的一个二级域名，你也可以使用顶级域名</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df7fee26e99.png"/></div></div><ul><li>滑到页面最下方点击保存</li><li>回到 Cloudflare 的主页，在你域名的 DNS 页中，添加两个记录并保存<br>① <code>类型</code> AAAA，<code>名称</code>随意，<code>内容</code>填你的公网 IPv6 地址，注意不是本地 IPv6 地址，<code>代理状态</code>仅 DNS，<code>TTL</code>自动<br>② <code>类型</code> SRV，<code>名称</code>随意，<code>优先级</code>5，<code>权重</code>5，<code>TTL</code>自动，<code>端口</code>25565，<code>目标</code>填你在 ddns-go的 IPv6 中填的域名</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df88992d610.png"/></div></div><ul><li>关闭 ddns-go 再打开以刷新，如果提示成功，你就可以将你的域名发给你朋友让他们通过该域名进入服务器了</li></ul><h2 id="添加模组-数据包"><a href="#添加模组-数据包" class="headerlink" title="添加模组/数据包"></a>添加模组/数据包</h2><h4 id="添加模组"><a href="#添加模组" class="headerlink" title="添加模组"></a>添加模组</h4><p>打开服务器目录下<code>server\mods</code>文件夹，放入适合你 mod 加载器的模组即可</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df8a15191dc.png"/></div></div><h4 id="添加数据包"><a href="#添加数据包" class="headerlink" title="添加数据包"></a>添加数据包</h4><p>打开服务器目录下<code>server\world\datapacks</code>文件夹，放入数据包</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/10/03/68df8c0d8d81e.png"/></div></div>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> Minecraft </tag>
</tags>
</entry>
<entry>
<title>anzhiyu主题添加对数学公式的支持</title>
<link href="/posts/62c6/"/>
<url>/posts/62c6/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote><p>由于我想要写一篇文章，其中需要写化学方程式，但anzhiyu主题似乎没自带，所以研究了一下，写了篇教程方便其他需要的小伙伴<br>封面图：<a href="https://www.pixiv.net/artworks/104858754">https://www.pixiv.net/artworks/104858754</a></p></blockquote><div class="note info modern"><p>2025/10/5补充：据评论区大佬 Prorise 提出，anzhiyu 博客主题其实是自带了对 katex 的支持，我再次翻阅文档后发现确实如此，并且大佬还给出了详细教程，在此非常感谢这位大佬<br><wavy>如果还没有使用我的方案，建议大家优先选择 Prorise 大佬的方案</wavy></p><p>2026/2/27补充：由于博主错误操作导致错误删除了 Mongodb 的评论数据库，导致之前全部评论丢失，同时我还没备份所以无法修复，Prorise 大佬在我评论区的方案也丢失了，这里提供大佬的博文地址供参考<br><a href="https://blog.prorisehub.com/posts/47821.html">https://blog.prorisehub.com/posts/47821.html</a></p></div><h2 id="效果演示"><a href="#效果演示" class="headerlink" title="效果演示"></a>效果演示</h2><blockquote><p>此处表达式转载自<a href="https://www.bilibili.com/read/cv39488642">https://www.bilibili.com/read/cv39488642</a></p></blockquote><p>$$ \text{Na}^\text{+}[\text{:}\mathop{\text{O}}\limits_{\mathbf{..}}^{\mathbf{..}}\text{:}\text{H}]^\text{-} $$<br>$$\ce{2Al2O3_{\text{（熔融）}}} \xlongequal[冰晶石]{电解} \ce{4Al + 3O2 ^}$$<br>$$\ce{N2(g) + 3H2(g) <=> 2NH3(g)} \qquad \Delta H = -92.5kJ/mol$$</p><h2 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h2><h3 id="文章内"><a href="#文章内" class="headerlink" title="文章内"></a>文章内</h3><ul><li>在博客终端输入指令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-filter-katex --save</span><br></pre></td></tr></table></figure><ul><li>在博客根目录<code>_config.yml</code>中添加</li></ul><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="attr">katex:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">copy_tex:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">mhchem:</span> <span class="literal">true</span> <span class="comment"># 启用化学扩展</span></span><br><span class="line"> <span class="attr">cdn:</span></span><br><span class="line"> <span class="attr">css:</span> <span class="string">https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css</span></span><br><span class="line"> <span class="attr">js:</span> <span class="string">https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js</span></span><br><span class="line"> <span class="attr">mhchem:</span> <span class="string">https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js</span></span><br></pre></td></tr></table></figure><ul><li>在<code>themes\anzhiyu\layout\includes\head.pug</code>中最底部添加</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> theme.<span class="property">katex</span>.<span class="property">enable</span></span><br><span class="line"> <span class="title function_">link</span>(rel=<span class="string">"stylesheet"</span> href=theme.<span class="property">katex</span>.<span class="property">cdn</span>.<span class="property">css</span>)</span><br><span class="line"> <span class="title function_">script</span>(defer src=theme.<span class="property">katex</span>.<span class="property">cdn</span>.<span class="property">js</span>)</span><br><span class="line"> <span class="title function_">script</span>(defer src=theme.<span class="property">katex</span>.<span class="property">cdn</span>.<span class="property">mhchem</span>)</span><br></pre></td></tr></table></figure><h3 id="评论区"><a href="#评论区" class="headerlink" title="评论区"></a>评论区</h3><blockquote><p>感谢本文章评论区网友茯芺苒的置顶评论，在 twikoo 评论区中也可以写公式</p></blockquote><ul><li>在博客根目录<code>_config.anzhiyu.yml</code>中找到<code># Inject</code>配置项，引入 css</li></ul><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></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="comment"># 自定义css</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"></span></span><br></pre></td></tr></table></figure><ul><li>在<code>source\js\</code>文件夹下新建名为<code>twikoo.js</code>的文件并粘贴以下内容，没有 js 这个文件夹的也可自己新建，如果想要其他位置自行更改即可</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Twikoo评论系统Katex和mhchem支持</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'DOMContentLoaded'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">// 配置mhchem扩展</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> katex !== <span class="string">'undefined'</span>) {</span><br><span class="line"> <span class="comment">// 确保mhchem扩展已加载并注册</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> mhchem !== <span class="string">'undefined'</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'mhchem扩展已加载'</span>);</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'mhchem扩展加载可能有问题:'</span>, e);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 渲染数学公式的函数</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">renderAllMath</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> renderMathInElement !== <span class="string">'function'</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'renderMathInElement函数未加载'</span>);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 配置Katex选项，包含mhchem支持</span></span><br><span class="line"> <span class="keyword">const</span> katexOptions = {</span><br><span class="line"> <span class="attr">delimiters</span>: [</span><br><span class="line"> {<span class="attr">left</span>: <span class="string">'$$'</span>, <span class="attr">right</span>: <span class="string">'$$'</span>, <span class="attr">display</span>: <span class="literal">true</span>},</span><br><span class="line"> {<span class="attr">left</span>: <span class="string">'$'</span>, <span class="attr">right</span>: <span class="string">'$'</span>, <span class="attr">display</span>: <span class="literal">false</span>},</span><br><span class="line"> {<span class="attr">left</span>: <span class="string">'\\('</span>, <span class="attr">right</span>: <span class="string">'\\)'</span>, <span class="attr">display</span>: <span class="literal">false</span>},</span><br><span class="line"> {<span class="attr">left</span>: <span class="string">'\\['</span>, <span class="attr">right</span>: <span class="string">'\\]'</span>, <span class="attr">display</span>: <span class="literal">true</span>}</span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">throwOnError</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">strict</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">trust</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="comment">// 添加宏定义以确保\ce命令被识别</span></span><br><span class="line"> <span class="attr">macros</span>: {</span><br><span class="line"> <span class="string">"\\ce"</span>: <span class="string">"\\ce{#1}"</span>,</span><br><span class="line"> <span class="string">"\\pu"</span>: <span class="string">"\\pu{#1}"</span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 渲染整个页面的公式</span></span><br><span class="line"> <span class="title function_">renderMathInElement</span>(<span class="variable language_">document</span>.<span class="property">body</span>, katexOptions);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 特别渲染评论区域</span></span><br><span class="line"> <span class="keyword">const</span> commentArea = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'tcomment'</span>);</span><br><span class="line"> <span class="keyword">if</span> (commentArea) {</span><br><span class="line"> <span class="title function_">renderMathInElement</span>(commentArea, katexOptions);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 初始渲染</span></span><br><span class="line"> <span class="built_in">setTimeout</span>(renderAllMath, <span class="number">100</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 监听评论区域变化</span></span><br><span class="line"> <span class="keyword">const</span> observer = <span class="keyword">new</span> <span class="title class_">MutationObserver</span>(<span class="keyword">function</span>(<span class="params">mutations</span>) {</span><br><span class="line"> <span class="keyword">let</span> shouldRender = <span class="literal">false</span>;</span><br><span class="line"> mutations.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">mutation</span>) {</span><br><span class="line"> <span class="keyword">if</span> (mutation.<span class="property">addedNodes</span>.<span class="property">length</span>) {</span><br><span class="line"> mutation.<span class="property">addedNodes</span>.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">node</span>) {</span><br><span class="line"> <span class="keyword">if</span> (node.<span class="property">nodeType</span> === <span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">if</span> (node.<span class="property">classList</span> && (</span><br><span class="line"> node.<span class="property">classList</span>.<span class="title function_">contains</span>(<span class="string">'tk-comment'</span>) ||</span><br><span class="line"> node.<span class="title function_">querySelector</span>(<span class="string">'.tk-comment'</span>)</span><br><span class="line"> )) {</span><br><span class="line"> shouldRender = <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">if</span> (shouldRender) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(renderAllMath, <span class="number">200</span>);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> commentContainer = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'tcomment'</span>);</span><br><span class="line"> <span class="keyword">if</span> (commentContainer) {</span><br><span class="line"> observer.<span class="title function_">observe</span>(commentContainer, {</span><br><span class="line"> <span class="attr">childList</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">subtree</span>: <span class="literal">true</span></span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 监听页面变化</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'popstate'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(renderAllMath, <span class="number">300</span>);</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><ul><li>在博客根目录<code>_config.anzhiyu.yml</code>中找到<code># Inject</code>配置项，引入 js</li></ul><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></pre></td><td class="code"><pre><span class="line"><span class="attr">bottom:</span></span><br><span class="line"> <span class="comment"># 自定义js</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">defer</span> <span class="string">src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">defer</span> <span class="string">src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">defer</span> <span class="string">src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script></span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="/js/twikoo.js"></script></span></span><br></pre></td></tr></table></figure><h2 id="其他方案及补充说明"><a href="#其他方案及补充说明" class="headerlink" title="其他方案及补充说明"></a>其他方案及补充说明</h2><h3 id="内容扩展：添加数学公式支持（KaTeX）"><a href="#内容扩展：添加数学公式支持（KaTeX）" class="headerlink" title="内容扩展：添加数学公式支持（KaTeX）"></a>内容扩展：添加数学公式支持（KaTeX）</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://prorise666.site/posts/47821.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">内容扩展：添加数学公式支持（KaTeX）</div> <div class="tag-link-sitename">Prorise</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="Hexo-插件使用——hexo-filter-mathjax"><a href="#Hexo-插件使用——hexo-filter-mathjax" class="headerlink" title="Hexo 插件使用——hexo-filter-mathjax"></a>Hexo 插件使用——hexo-filter-mathjax</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.ning0121.site/wiki/Hexo/Build-a-blog-3.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">Hexo 插件使用——hexo-filter-mathjax</div> <div class="tag-link-sitename">NING</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="让-Hexo-搭建的博客支持-LaTeX"><a href="#让-Hexo-搭建的博客支持-LaTeX" class="headerlink" title="让 Hexo 搭建的博客支持 LaTeX"></a>让 Hexo 搭建的博客支持 LaTeX</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://cps.ninja/2019/03/16/hexo-with-latex/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">让 Hexo 搭建的博客支持 LaTeX</div> <div class="tag-link-sitename">王程鹏</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="Twikoo-如何启用-katex-支持"><a href="#Twikoo-如何启用-katex-支持" class="headerlink" title="Twikoo 如何启用 katex 支持"></a>Twikoo 如何启用 katex 支持</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://twikoo.js.org/faq.html#%E5%A6%82%E4%BD%95%E5%90%AF%E7%94%A8-katex-%E6%94%AF%E6%8C%81"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">如何启用-katex-支持</div> <div class="tag-link-sitename">Twikoo</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="为-hexo-博客更换-pandoc-渲染"><a href="#为-hexo-博客更换-pandoc-渲染" class="headerlink" title="为 hexo 博客更换 pandoc 渲染"></a>为 hexo 博客更换 pandoc 渲染</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.yyyzyyyz.cn/posts/654d8712aff4/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">为 hexo 博客更换 pandoc 渲染</div> <div class="tag-link-sitename">yyyz</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> anzhiyu </tag>
<tag> 魔改 </tag>
</tags>
</entry>
<entry>
<title>改主菜单开往为萌站异世界之旅-跃迁</title>
<link href="/posts/fad0/"/>
<url>/posts/fad0/</url>
<content type="html"><![CDATA[<div class="note info no-icon flat"><p>起因是在 <a href="https://blog.xiowo.net/">Mo 的记事簿</a>这位大佬的博客看到主菜单的开往被改为了萌站异世界之旅跃迁的按钮，自己琢磨了一下搞出来了<br>代码不一定最好，如果有疑惑请在评论区指出，谢谢 qwq<br>封面图：<a href="https://www.pixiv.net/artworks/62608184">https://www.pixiv.net/artworks/62608184</a></p></div><div class="note danger modern"><p>该教程适用于 anzhiyu 主题，其他主题未测试<br>由于需要直接修改主题，请务必确认缩进并勤备份，以免操作失误导致对博客的破坏</p></div><ul><li>替换<code>themes\anzhiyu\source\js\utils.js</code>中第<code>1092-1106</code>行内容，注意缩进</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 跳转异次元之旅-跃迁</span></span><br><span class="line"><span class="attr">totraveling</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> anzhiyu.<span class="title function_">snackbarShow</span>(</span><br><span class="line"> <span class="string">"即将跳转到「异次元之旅-跃迁」项目的成员博客，不保证跳转网站的安全性和可用性"</span>,</span><br><span class="line"> <span class="function"><span class="params">element</span> =></span> {</span><br><span class="line"> element.<span class="property">style</span>.<span class="property">opacity</span> = <span class="number">0</span>;</span><br><span class="line"> travellingsTimer && <span class="built_in">clearTimeout</span>(travellingsTimer);</span><br><span class="line"> },</span><br><span class="line"> <span class="number">5000</span>,</span><br><span class="line"> <span class="string">"取消"</span></span><br><span class="line"> );</span><br><span class="line"> travellingsTimer = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">open</span>(<span class="string">"https://travel.moe/go.html?travel=on"</span>, <span class="string">"_blank"</span>);</span><br><span class="line"> }, <span class="string">"5000"</span>);</span><br><span class="line">},</span><br></pre></td></tr></table></figure><ul><li>替换<code>themes\anzhiyu\layout\includes\header\nav.pug</code>中内容</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">- <span class="keyword">const</span> { darkmode } = theme</span><br><span class="line">nav#nav</span><br><span class="line"> #nav-group</span><br><span class="line"> span#blog_name</span><br><span class="line"> <span class="keyword">if</span> theme.<span class="property">nav</span>.<span class="property">enable</span></span><br><span class="line"> .<span class="property">back</span>-home-button</span><br><span class="line"> i.<span class="property">anzhiyufont</span>.<span class="property">anzhiyu</span>-icon-grip-vertical</span><br><span class="line"> .<span class="property">back</span>-menu-list-groups</span><br><span class="line"> each group <span class="keyword">in</span> theme.<span class="property">nav</span>.<span class="property">menu</span></span><br><span class="line"> .<span class="property">back</span>-menu-list-group</span><br><span class="line"> .<span class="property">back</span>-menu-list-title= group.<span class="property">title</span></span><br><span class="line"> .<span class="property">back</span>-menu-list</span><br><span class="line"> each item <span class="keyword">in</span> group.<span class="property">item</span></span><br><span class="line"> a.<span class="property">back</span>-menu-<span class="title function_">item</span>(href=<span class="title function_">url_for</span>(item.<span class="property">link</span>), title=item.<span class="property">name</span>)</span><br><span class="line"> img.<span class="property">back</span>-menu-item-<span class="title function_">icon</span>(src=item.<span class="property">icon</span> alt=item.<span class="property">name</span>)</span><br><span class="line"> span.<span class="property">back</span>-menu-item-text= item.<span class="property">name</span></span><br><span class="line"> a#site-<span class="title function_">name</span>(href=<span class="title function_">url_for</span>(<span class="string">'/'</span>) accesskey=<span class="string">"h"</span>)</span><br><span class="line"> .<span class="property">title</span> #[=config.<span class="property">title</span>]</span><br><span class="line"> i.<span class="property">anzhiyufont</span>.<span class="property">anzhiyu</span>-icon-house-chimney</span><br><span class="line"> <span class="keyword">if</span> (theme.<span class="property">nav</span>.<span class="property">clock</span>)</span><br><span class="line"> !=<span class="title function_">partial</span>(<span class="string">'includes/anzhiyu/clock'</span>, {}, {<span class="attr">cache</span>: <span class="literal">true</span>})</span><br><span class="line"></span><br><span class="line"> div.<span class="property">mask</span>-name-container</span><br><span class="line"> #name-container</span><br><span class="line"> a#page-<span class="title function_">name</span>(href=<span class="string">"javascript:anzhiyu.scrollToDest(0, 500)"</span>) <span class="variable constant_">PAGE_NAME</span></span><br><span class="line"></span><br><span class="line"> #menus</span><br><span class="line"> !=<span class="title function_">partial</span>(<span class="string">'includes/header/menu_item'</span>, {}, {<span class="attr">cache</span>: <span class="literal">true</span>})</span><br><span class="line"> #nav-right</span><br><span class="line"> <span class="keyword">if</span> theme.<span class="property">nav</span>.<span class="property">travelling</span></span><br><span class="line"> .<span class="property">nav</span>-button.<span class="property">only</span>-home#<span class="title function_">travellings_button</span>(title=<span class="string">'随机前往一个异次元之旅-跃迁项目网站'</span>)</span><br><span class="line"> a.<span class="property">site</span>-<span class="title function_">page</span>(onclick=<span class="string">'anzhiyu.totraveling()'</span>, title=<span class="string">'随机前往一个异次元之旅-跃迁项目网站'</span>, href=<span class="string">'javascript:void(0);'</span>, rel=<span class="string">'external nofollow'</span>, data-pjax-state=<span class="string">'external'</span>)</span><br><span class="line"> img.<span class="property">travel</span>-<span class="title function_">icon</span>(</span><br><span class="line"> src=<span class="string">"https://bu.dusays.com/2025/06/14/684d99d607c49.png"</span></span><br><span class="line"> alt=<span class="string">""</span>,</span><br><span class="line"> style=<span class="string">"width: 24px; height: 24px; vertical-align: middle;"</span></span><br><span class="line"> )</span><br><span class="line"> .<span class="property">nav</span>-button#randomPost_button</span><br><span class="line"> a.<span class="property">site</span>-<span class="title function_">page</span>(onclick=<span class="string">'toRandomPost()'</span>, title=<span class="string">'随机前往一个文章'</span>, href=<span class="string">'javascript:void(0);'</span>)</span><br><span class="line"> i.<span class="property">anzhiyufont</span>.<span class="property">anzhiyu</span>-icon-dice</span><br><span class="line"> <span class="keyword">if</span> (theme.<span class="property">algolia_search</span>.<span class="property">enable</span> || theme.<span class="property">local_search</span>.<span class="property">enable</span> || theme.<span class="property">docsearch</span>.<span class="property">enable</span>)</span><br><span class="line"> div.<span class="property">nav</span>-button#search-button</span><br><span class="line"> a.<span class="property">site</span>-page.<span class="property">social</span>-icon.<span class="title function_">search</span>(href=<span class="string">'javascript:void(0);'</span>, title=<span class="string">'搜索🔍'</span> accesskey=<span class="string">"s"</span>)</span><br><span class="line"> i.<span class="property">anzhiyufont</span>.<span class="property">anzhiyu</span>-icon-magnifying-glass</span><br><span class="line"> span=<span class="string">' '</span>+<span class="title function_">_p</span>(<span class="string">'search.title'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> theme.<span class="property">centerConsole</span>.<span class="property">enable</span></span><br><span class="line"> input#center-<span class="title function_">console</span>(type=<span class="string">"checkbox"</span>)</span><br><span class="line"> label.<span class="title function_">widget</span>(<span class="keyword">for</span>=<span class="string">"center-console"</span> title=<span class="title function_">_p</span>(<span class="string">"中控台"</span>) onclick=<span class="string">"anzhiyu.switchConsole();"</span>)</span><br><span class="line"> i.<span class="property">left</span></span><br><span class="line"> i.<span class="property">widget</span>.<span class="property">center</span></span><br><span class="line"> i.<span class="property">widget</span>.<span class="property">right</span></span><br><span class="line"></span><br><span class="line"> !=<span class="title function_">partial</span>(<span class="string">'includes/anzhiyu/console'</span>, {}, {<span class="attr">cache</span>:<span class="literal">true</span>})</span><br><span class="line"></span><br><span class="line"> div.<span class="property">nav</span>-button#nav-totop</span><br><span class="line"> a.<span class="title function_">totopbtn</span>(href=<span class="string">'javascript:void(0);'</span>)</span><br><span class="line"> i.<span class="property">anzhiyufont</span>.<span class="property">anzhiyu</span>-icon-arrow-up</span><br><span class="line"> span#<span class="title function_">percent</span>(onclick=<span class="string">"anzhiyu.scrollToDest(0,500)"</span>) <span class="number">0</span></span><br><span class="line"></span><br><span class="line"> #toggle-menu</span><br><span class="line"> a.<span class="property">site</span>-<span class="title function_">page</span>(href=<span class="string">'javascript:void(0);'</span> title=<span class="string">"切换"</span>)</span><br><span class="line"> i.<span class="property">anzhiyufont</span>.<span class="property">anzhiyu</span>-icon-bars</span><br></pre></td></tr></table></figure><p>该文件中按钮内容可以自行修改为需要的，图标也可以自行改为其他的图片或使用 anzhiyu 主题自带的图标，如果使用自带图标则不需要修改这么多，直接将第31行代码改为你需要的图标名就行</p>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> anzhiyu </tag>
<tag> 魔改 </tag>
</tags>
</entry>
<entry>
<title>安知鱼主题美化教程</title>
<link href="/posts/b26f/"/>
<url>/posts/b26f/</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><div class="note info no-icon flat"><p>本文大部分教程经过博主实操，为更好适配我的博客，我对某些内容进行过修改<br><a href="#%E5%A4%96%E7%AB%99%E6%95%99%E7%A8%8B%E7%B4%A2%E5%BC%95">外站教程索引</a>部分的文章收录依照我收录的时间顺序，无排名之分<br>如果您有教程想要分享，有疑惑想寻求帮助，或认为我不因将您的教程转载到这里，请在评论区提出，谢谢<br>封面图：<a href="https://www.pixiv.net/artworks/120608478">https://www.pixiv.net/artworks/120608478</a></p></div><div class="note danger modern"><p>请务必先详细阅读 anzhiyu 主题文档 + 勤备份，以免操作失误导致对博客的破坏</p></div><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://docs.anheyu.com/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">anzhiyu主题官方文档</div> <div class="tag-link-sitename">anzhiyu</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h2 id="本站教程索引"><a href="#本站教程索引" class="headerlink" title="本站教程索引"></a>本站教程索引</h2><ul><li><a href="/posts/fad0/">改主页主菜单开往为萌站跃迁</a></li><li><a href="/posts/62c6/">添加对数学公式的支持</a></li><li><a href="/posts/c2de/">博客侧边栏倒计时组件改进</a></li></ul><h2 id="外站教程索引"><a href="#外站教程索引" class="headerlink" title="外站教程索引"></a>外站教程索引</h2><h3 id="给博客添加定位个性欢迎-腾讯地图版"><a href="#给博客添加定位个性欢迎-腾讯地图版" class="headerlink" title="给博客添加定位个性欢迎(腾讯地图版)"></a>给博客添加定位个性欢迎(腾讯地图版)</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.naokuo.top/p/7c8b4f72.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">给博客添加定位个性欢迎(腾讯地图版)</div> <div class="tag-link-sitename">NaoKuo</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="给主题侧边栏添加来访者卡片"><a href="#给主题侧边栏添加来访者卡片" class="headerlink" title="给主题侧边栏添加来访者卡片"></a>给主题侧边栏添加来访者卡片</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.bsgun.cn/posts/ef58a648/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">给主题侧边栏添加来访者卡片</div> <div class="tag-link-sitename">梦爱吃鱼</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><blockquote><p>2025/12/10发现此教程使用的API已经更换，因原教程尚未更新，要使用这个功能的建议参考腾讯地图版的教程</p></blockquote><h3 id="留言板页添加全屏弹幕"><a href="#留言板页添加全屏弹幕" class="headerlink" title="留言板页添加全屏弹幕"></a>留言板页添加全屏弹幕</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://index.naokuo.top/p/1f0e455d.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">留言板页添加全屏弹幕</div> <div class="tag-link-sitename">NaoKuo</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="博客自定义字体"><a href="#博客自定义字体" class="headerlink" title="博客自定义字体"></a>博客自定义字体</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://mnchen.cn/posts/1013.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">anzhiyu主题自定义博客字体</div> <div class="tag-link-sitename">前尘小筑</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="给主题侧边栏添加倒计时"><a href="#给主题侧边栏添加倒计时" class="headerlink" title="给主题侧边栏添加倒计时"></a>给主题侧边栏添加倒计时</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.bsgun.cn/posts/68c5cdb9/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">给主题侧边栏添加倒计时</div> <div class="tag-link-sitename">梦爱吃鱼</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="美化你的-RSS-订阅地址"><a href="#美化你的-RSS-订阅地址" class="headerlink" title="美化你的 RSS 订阅地址"></a>美化你的 RSS 订阅地址</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.liushen.fun/posts/caee2d9f/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">美化你的 RSS 订阅地址</div> <div class="tag-link-sitename">LiuShen</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><p>截至本文发布前(2025.6.30)，原作者文章中提供的<code>atom.xsl</code>文件似乎不能重现原作者 RSS 订阅界面的效果，故这里提供一个与原作者 RSS 订阅界面差不多的模板文件</p><details class="folding-tag" ><summary> atom.xsl </summary> <div class='content'> <figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><?xml version=<span class="string">"1.0"</span> encoding=<span class="string">"utf-8"</span>?></span></span><br><span class="line"><span class="tag"><<span class="name">xsl:stylesheet</span> <span class="attr">version</span>=<span class="string">"1.0"</span> <span class="attr">xmlns:xsl</span>=<span class="string">"http://www.w3.org/1999/XSL/Transform"</span> <span class="attr">xmlns:atom</span>=<span class="string">"http://www.w3.org/2005/Atom"</span> <span class="attr">xmlns:dc</span>=<span class="string">"http://purl.org/dc/elements/1.1/"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">xsl:output</span> <span class="attr">method</span>=<span class="string">"html"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">xsl:template</span> <span class="attr">match</span>=<span class="string">"/"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">title</span>></span>Atom Feed<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-pseudo">:root</span>{<span class="attr">--bg-color</span>:<span class="number">#f8fafc</span>;<span class="attr">--text-color</span>:<span class="number">#1e293b</span>;<span class="attr">--card-bg</span>:<span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.8</span>);<span class="attr">--border-color</span>:<span class="number">#e2e8f0</span>;<span class="attr">--accent-color</span>:<span class="number">#4f46e5</span>;<span class="attr">--muted-color</span>:<span class="number">#64748b</span>;<span class="attr">--overlay</span>:<span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.5</span>);<span class="attr">--header-text-light</span>:<span class="number">#1f2937</span>;<span class="attr">--header-muted-light</span>:<span class="number">#6b7280</span>;<span class="attr">--subscribe-bg-light</span>:<span class="number">#f3f4f6</span>;<span class="attr">--header-text-dark</span>:<span class="number">#f3f4f6</span>;<span class="attr">--header-muted-dark</span>:<span class="number">#9ca3af</span>;<span class="attr">--subscribe-bg-dark</span>:<span class="number">#1f2937</span>;<span class="attr">--header-text</span>:<span class="built_in">var</span>(--header-text-light);<span class="attr">--header-muted</span>:<span class="built_in">var</span>(--header-muted-light);<span class="attr">--subscribe-bg</span>:<span class="built_in">var</span>(--subscribe-bg-light);}<span class="keyword">@media</span> (<span class="attribute">prefers-color-scheme</span>:dark){<span class="selector-pseudo">:root</span>{<span class="attr">--bg-color</span>:<span class="number">#0f172a</span>;<span class="attr">--text-color</span>:<span class="number">#f8fafc</span>;<span class="attr">--card-bg</span>:<span class="built_in">rgba</span>(<span class="number">30</span>,<span class="number">41</span>,<span class="number">59</span>,<span class="number">0.8</span>);<span class="attr">--border-color</span>:<span class="number">#334155</span>;<span class="attr">--accent-color</span>:<span class="number">#818cf8</span>;<span class="attr">--muted-color</span>:<span class="number">#94a3b8</span>;<span class="attr">--overlay</span>:<span class="built_in">rgba</span>(<span class="number">15</span>,<span class="number">23</span>,<span class="number">42</span>,<span class="number">0.5</span>);<span class="attr">--header-text</span>:<span class="built_in">var</span>(--header-text-dark);<span class="attr">--header-muted</span>:<span class="built_in">var</span>(--header-muted-dark);<span class="attr">--subscribe-bg</span>:<span class="built_in">var</span>(--subscribe-bg-dark);}}*{<span class="attribute">box-sizing</span>:border-box;<span class="attribute">margin</span>:<span class="number">0</span>;<span class="attribute">padding</span>:<span class="number">0</span>;}<span class="selector-tag">body</span>{<span class="attribute">font-family</span>:-apple-system,BlinkMacSystemFont,<span class="string">"Segoe UI"</span>,Roboto,Helvetica,Arial,sans-serif;<span class="attribute">line-height</span>:<span class="number">1.5</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--text-color);<span class="attribute">background-color</span>:<span class="built_in">var</span>(--bg-color);<span class="attribute">min-height</span>:<span class="number">100vh</span>;-webkit-<span class="attribute">font-smoothing</span>:antialiased;<span class="attribute">background-image</span>:<span class="built_in">url</span>(<span class="string">'https://bu.dusays.com/2025/06/15/684ddd2726b50.webp'</span>);<span class="attribute">background-size</span>:cover;<span class="attribute">background-attachment</span>:fixed;<span class="attribute">background-position</span>:center;}<span class="selector-tag">body</span><span class="selector-pseudo">::before</span>{<span class="attribute">content</span>:<span class="string">""</span>;<span class="attribute">position</span>:fixed;<span class="attribute">top</span>:<span class="number">0</span>;<span class="attribute">left</span>:<span class="number">0</span>;<span class="attribute">right</span>:<span class="number">0</span>;<span class="attribute">bottom</span>:<span class="number">0</span>;<span class="attribute">background-color</span>:<span class="built_in">var</span>(--overlay);<span class="attribute">backdrop-filter</span>:<span class="built_in">blur</span>(<span class="number">5px</span>);<span class="attribute">z-index</span>:-<span class="number">1</span>;}<span class="selector-tag">a</span>{<span class="attribute">color</span>:<span class="built_in">var</span>(--accent-color);<span class="attribute">text-decoration</span>:none;}<span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>{<span class="attribute">text-decoration</span>:underline;}<span class="selector-class">.container</span>{<span class="attribute">width</span>:<span class="number">100%</span>;<span class="attribute">max-width</span>:<span class="number">800px</span>;<span class="attribute">margin</span>:<span class="number">0</span> auto;<span class="attribute">padding</span>:<span class="number">2rem</span> <span class="number">1rem</span>;}<span class="selector-class">.header</span>{<span class="attribute">padding</span>:<span class="number">2rem</span> <span class="number">0</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--header-text);<span class="attribute">text-align</span><span class="selector-pseudo">:left</span>;<span class="attribute">max-width</span>:<span class="number">800px</span>;<span class="attribute">margin</span>:<span class="number">0</span> auto;}<span class="selector-class">.header-top</span>{<span class="attribute">display</span>:flex;<span class="attribute">align-items</span>:center;<span class="attribute">gap</span>:<span class="number">0.75rem</span>;<span class="attribute">margin-bottom</span>:<span class="number">1rem</span>;<span class="attribute">padding-bottom</span>:<span class="number">1rem</span>;<span class="attribute">border-bottom</span>:<span class="number">1px</span> dashed <span class="built_in">var</span>(--header-text);}<span class="selector-class">.header-avatar</span> <span class="selector-tag">svg</span>{<span class="attribute">flex-shrink</span>:<span class="number">0</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--header-text);}<span class="selector-class">.header-title</span>{<span class="attribute">font-size</span>:<span class="number">1.75rem</span>;<span class="attribute">font-weight</span>:<span class="number">700</span>;}<span class="selector-class">.header-description-cn</span>,<span class="selector-class">.header-description-en</span>{<span class="attribute">margin-bottom</span>:<span class="number">1rem</span>;<span class="attribute">font-size</span>:<span class="number">1rem</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--header-text);<span class="attribute">line-height</span>:<span class="number">1.6</span>;}<span class="selector-class">.header-subscribe</span>{<span class="attribute">margin-top</span>:<span class="number">2rem</span>;<span class="attribute">padding</span>:<span class="number">1rem</span>;<span class="attribute">background</span>:<span class="built_in">var</span>(--subscribe-bg);<span class="attribute">border-radius</span>:<span class="number">0.5rem</span>;<span class="attribute">border-left</span>:<span class="number">4px</span> solid <span class="built_in">var</span>(--header-text);<span class="attribute">font-size</span>:<span class="number">0.95rem</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--header-muted);}<span class="selector-class">.header-subscribe</span> <span class="selector-tag">a</span>{<span class="attribute">color</span>:<span class="built_in">var</span>(--header-text);<span class="attribute">font-weight</span>:bold;<span class="attribute">text-decoration</span>:underline;<span class="attribute">transition</span>:color <span class="number">0.3s</span> ease;}<span class="selector-class">.header-subscribe</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>{<span class="attribute">color</span>:<span class="built_in">rgb</span>(<span class="number">9</span>,<span class="number">147</span>,<span class="number">197</span>);}<span class="selector-class">.article-list</span>{<span class="attribute">display</span>:grid;<span class="attribute">gap</span>:<span class="number">1.5rem</span>;}<span class="selector-class">.article-card</span>{<span class="attribute">background-color</span>:<span class="built_in">var</span>(--card-bg);<span class="attribute">backdrop-filter</span>:<span class="built_in">blur</span>(<span class="number">5px</span>);<span class="attribute">border-radius</span>:<span class="number">0.8rem</span>;<span class="attribute">padding</span>:<span class="number">1.5rem</span>;<span class="attribute">box-shadow</span>:<span class="number">0</span> <span class="number">1px</span> <span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.1</span>);<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="built_in">var</span>(--border-color);<span class="attribute">transition</span>:transform <span class="number">0.2s</span>,box-shadow <span class="number">0.2s</span>;}<span class="selector-class">.article-card</span><span class="selector-pseudo">:hover</span>{<span class="attribute">transform</span>:<span class="built_in">translateY</span>(-<span class="number">5px</span>);<span class="attribute">box-shadow</span>:<span class="number">0</span> <span class="number">4px</span> <span class="number">6px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.1</span>);}<span class="selector-class">.article-title</span>{<span class="attribute">font-size</span>:<span class="number">1.25rem</span>;<span class="attribute">font-weight</span>:<span class="number">600</span>;<span class="attribute">margin-bottom</span>:<span class="number">0.5rem</span>;}<span class="selector-class">.article-meta</span>{<span class="attribute">display</span>:flex;<span class="attribute">gap</span>:<span class="number">1rem</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--muted-color);<span class="attribute">font-size</span>:<span class="number">0.875rem</span>;<span class="attribute">margin-bottom</span>:<span class="number">1rem</span>;}<span class="selector-class">.article-summary</span>{<span class="attribute">margin-bottom</span>:<span class="number">1rem</span>;<span class="attribute">color</span>:<span class="built_in">var</span>(--text-color);}<span class="selector-class">.article-tags</span>{<span class="attribute">display</span>:flex;<span class="attribute">flex-wrap</span>:wrap;<span class="attribute">gap</span>:<span class="number">0.5rem</span>;<span class="attribute">margin-top</span>:<span class="number">1rem</span>;}<span class="selector-class">.tag</span>{<span class="attribute">background-color</span>:<span class="built_in">var</span>(--border-color);<span class="attribute">color</span>:<span class="built_in">var</span>(--text-color);<span class="attribute">padding</span>:<span class="number">0.25rem</span> <span class="number">0.5rem</span>;<span class="attribute">border-radius</span>:<span class="number">0.25rem</span>;<span class="attribute">font-size</span>:<span class="number">0.75rem</span>;}<span class="selector-class">.footer</span>{<span class="attribute">margin-top</span>:<span class="number">3rem</span>;<span class="attribute">padding</span>:<span class="number">2rem</span> <span class="number">1rem</span>;<span class="attribute">text-align</span>:center;<span class="attribute">color</span>:<span class="built_in">var</span>(--muted-color);<span class="attribute">font-size</span>:<span class="number">1.0rem</span>;<span class="attribute">transition</span>:color <span class="number">0.2s</span> ease-in-out;}<span class="selector-class">.footer-line</span>{<span class="attribute">margin</span>:<span class="number">0.5rem</span> <span class="number">0</span>;}<span class="selector-class">.footer-line</span> <span class="selector-tag">a</span>,<span class="selector-class">.footer-line</span> <span class="selector-tag">span</span>{<span class="attribute">color</span>:<span class="built_in">var</span>(--muted-color,<span class="number">#6b7280</span>);<span class="attribute">text-decoration</span>:none;<span class="attribute">margin</span>:<span class="number">0</span> <span class="number">0.5rem</span>;<span class="attribute">transition</span>:color <span class="number">0.3s</span> ease;}<span class="selector-class">.footer-line</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>{<span class="attribute">color</span>:<span class="built_in">rgb</span>(<span class="number">50</span>,<span class="number">124</span>,<span class="number">189</span>);}<span class="selector-class">.footer-line</span> <span class="selector-tag">span</span>{<span class="attribute">user-select</span>:none;}<span class="selector-class">.homeindex</span><span class="selector-attr">[data-v-7eb2bc79]</span>{<span class="attribute">margin-top</span>:<span class="number">12px</span>;<span class="attribute">overflow-y</span>:auto;<span class="attribute">max-height</span>:<span class="number">675px</span>;<span class="attribute">min-height</span>:<span class="number">600px</span>;}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header-top"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header-avatar"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">svg</span> <span class="attr">width</span>=<span class="string">"40"</span> <span class="attr">height</span>=<span class="string">"40"</span> <span class="attr">viewBox</span>=<span class="string">"0 0 40 40"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">image</span> <span class="attr">href</span>=<span class="string">"/svg/rss-avatar.svg"</span> <span class="attr">width</span>=<span class="string">"40"</span> <span class="attr">height</span>=<span class="string">"40"</span> <span class="attr">preserveAspectRatio</span>=<span class="string">"xMidYMid meet"</span>/></span></span><br><span class="line"><span class="tag"></<span class="name">svg</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"header-title"</span>></span>Roxy_Magicの咖啡馆<span class="tag"></<span class="name">h1</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header-description-cn"</span>></span>Roxy_Magicの咖啡馆，提供建站教程、学习笔记分享、生活点滴，个人经验，融合技术开发与人文思考，定期更新深度指南与创意灵感，给大家提供更多帮助。<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header-description-en"</span>></span>Roxy_Magic’s Blog, Sharing tutorials, coding notes, life moments, personal experiences, blending tech and humanities, with regularly updated guides and creative inspiration.<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header-subscribe"</span>></span>不要诧异于异常精美的页面，你可以直接使用 RSS 阅读器比如：<span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://feedly.com/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span>Feedly<span class="tag"></<span class="name">a</span>></span>,<span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://www.inoreader.com/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span>Inoreader<span class="tag"></<span class="name">a</span>></span>,<span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://newsblur.com/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span>Newsblur<span class="tag"></<span class="name">a</span>></span>,<span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://follow.it/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span>Follow<span class="tag"></<span class="name">a</span>></span>或者 RSS Reader 等工具，来订阅这个 RSS 源链接。<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"article-list"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">xsl:for-each</span> <span class="attr">select</span>=<span class="string">"atom:feed/atom:entry"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"article-card"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"article-title"</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"{atom:link/@href}"</span>></span><span class="tag"><<span class="name">xsl:value-of</span> <span class="attr">select</span>=<span class="string">"atom:title"</span>/></span><span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"article-meta"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">span</span>></span><span class="tag"><<span class="name">xsl:value-of</span> <span class="attr">select</span>=<span class="string">"substring(atom:published,1,10)"</span>/></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">span</span>></span><span class="tag"><<span class="name">xsl:value-of</span> <span class="attr">select</span>=<span class="string">"atom:author/atom:name"</span>/></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"article-summary"</span>></span><span class="tag"><<span class="name">xsl:value-of</span> <span class="attr">select</span>=<span class="string">"atom:summary"</span>/></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"article-tags"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">xsl:for-each</span> <span class="attr">select</span>=<span class="string">"atom:category"</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"tag"</span>></span><span class="tag"><<span class="name">xsl:value-of</span> <span class="attr">select</span>=<span class="string">"@term"</span>/></span><span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">xsl:for-each</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">xsl:for-each</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"footer"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"footer-line"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">span</span>></span>© 2025<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">span</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://blog.roxymagic.top."</span> <span class="attr">target</span>=<span class="string">"_blank"</span>></span>Roxy_Magicの咖啡馆<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br><span class="line"><span class="tag"></<span class="name">xsl:template</span>></span></span><br><span class="line"><span class="tag"></<span class="name">xsl:stylesheet</span>></span></span><br></pre></td></tr></table></figure> </div> </details><h3 id="友链朋友圈改为轻量友链朋友圈"><a href="#友链朋友圈改为轻量友链朋友圈" class="headerlink" title="友链朋友圈改为轻量友链朋友圈"></a>友链朋友圈改为轻量友链朋友圈</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.bsgun.cn/posts/1e0a6e20/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">魔改主题兼容轻量友链朋友圈</div> <div class="tag-link-sitename">梦爱吃鱼</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="首页背景图渐进式加载"><a href="#首页背景图渐进式加载" class="headerlink" title="首页背景图渐进式加载"></a>首页背景图渐进式加载</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.kouseki.cn/posts/4f72.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">首页背景图渐进式加载，解决卡顿难题</div> <div class="tag-link-sitename">铭心石刻</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="安全跳转页面・插件版"><a href="#安全跳转页面・插件版" class="headerlink" title="安全跳转页面・插件版"></a>安全跳转页面・插件版</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.liushen.fun/posts/1dfd1f41/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">安全跳转页面・插件版</div> <div class="tag-link-sitename">LiuShen</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="文章主色调-插件"><a href="#文章主色调-插件" class="headerlink" title="文章主色调 (插件)"></a>文章主色调 (插件)</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://index.naokuo.top/p/fb2f8d77.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">文章主色调 (插件)</div> <div class="tag-link-sitename">NaoKuo</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="添加一个统计页面"><a href="#添加一个统计页面" class="headerlink" title="添加一个统计页面"></a>添加一个统计页面</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.667408.xyz/posts/263c605d"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">添加一个统计页面</div> <div class="tag-link-sitename">一粒微尘</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="添加待办清单页"><a href="#添加待办清单页" class="headerlink" title="添加待办清单页"></a>添加待办清单页</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.kouseki.cn/posts/bc0.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">为你的博客添加待办清单页</div> <div class="tag-link-sitename">铭心石刻</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="添加游戏收藏页"><a href="#添加游戏收藏页" class="headerlink" title="添加游戏收藏页"></a>添加游戏收藏页</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.kouseki.cn/posts/e7dd.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">为博客添加一个游戏收藏页</div> <div class="tag-link-sitename">铭心石刻</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="Github-Action实现友链状态检测"><a href="#Github-Action实现友链状态检测" class="headerlink" title="Github Action实现友链状态检测"></a>Github Action实现友链状态检测</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.liushen.fun/posts/c2262998/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">Github Action实现友链状态检测</div> <div class="tag-link-sitename">LiuShen</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="不蒜子统计修改"><a href="#不蒜子统计修改" class="headerlink" title="不蒜子统计修改"></a>不蒜子统计修改</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://dusays.com/476/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">杜老师自建国内不蒜子统计平台</div> <div class="tag-link-sitename">杜老师</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><blockquote><p>如果你和我一样使用的是安知鱼主题，请修改文件中 123 行左右的内容</p></blockquote><h3 id="Twikoo-添加自定义表情包"><a href="#Twikoo-添加自定义表情包" class="headerlink" title="Twikoo 添加自定义表情包"></a>Twikoo 添加自定义表情包</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.xiowo.net/posts/759e8c74/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">Twikoo 添加自定义表情包</div> <div class="tag-link-sitename">MortalCat</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><blockquote><p>如果想使用我博客 Twikoo 中整理的表情包，请添加：<a href="https://blog.roxymagic.top/json/twikoo-emoji.json">https://blog.roxymagic.top/json/twikoo-emoji.json</a></p></blockquote><h3 id="好看的昼夜切换按钮"><a href="#好看的昼夜切换按钮" class="headerlink" title="好看的昼夜切换按钮"></a>好看的昼夜切换按钮</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://index.naokuo.top/p/1c3b759a.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">好看的昼夜切换按钮</div> <div class="tag-link-sitename">NaoKuo</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="如何在安知鱼主题中加入无聊湾"><a href="#如何在安知鱼主题中加入无聊湾" class="headerlink" title="如何在安知鱼主题中加入无聊湾"></a>如何在安知鱼主题中加入无聊湾</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.gbfun.cc/posts/cd9cbdaa.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">如何在安知鱼主题中加入无聊湾</div> <div class="tag-link-sitename">LixdHappy</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="如何移植-Solitude-主题中的十年之约进度条至-anzhiyu-主题"><a href="#如何移植-Solitude-主题中的十年之约进度条至-anzhiyu-主题" class="headerlink" title="如何移植 Solitude 主题中的十年之约进度条至 anzhiyu 主题"></a>如何移植 Solitude 主题中的十年之约进度条至 anzhiyu 主题</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.gbfun.cc/posts/5498433.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">如何移植 Solitude 主题中的十年之约进度条至 anzhiyu 主题</div> <div class="tag-link-sitename">LixdHappy</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="魔改即刻短文兼容Ech0"><a href="#魔改即刻短文兼容Ech0" class="headerlink" title="魔改即刻短文兼容Ech0"></a>魔改即刻短文兼容Ech0</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.gbfun.cc/posts/56a1a68.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">魔改即刻短文兼容Ech0</div> <div class="tag-link-sitename">LixdHappy</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="anzhiyu-主题文章板块中关于原创与判定的实现逻辑问题"><a href="#anzhiyu-主题文章板块中关于原创与判定的实现逻辑问题" class="headerlink" title="anzhiyu 主题文章板块中关于原创与判定的实现逻辑问题"></a>anzhiyu 主题文章板块中关于原创与判定的实现逻辑问题</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.gbfun.cc/posts/6d59bdb1.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">anzhiyu 主题文章板块中关于原创与判定的实现逻辑问题</div> <div class="tag-link-sitename">LixdHappy</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="文章页头评论数模块悬停逻辑修改"><a href="#文章页头评论数模块悬停逻辑修改" class="headerlink" title="文章页头评论数模块悬停逻辑修改"></a>文章页头评论数模块悬停逻辑修改</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.gbfun.cc/posts/397fd261.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">文章页头评论数模块悬停逻辑修改</div> <div class="tag-link-sitename">LixdHappy</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="如何在安知鱼主题中加入无聊湾-1"><a href="#如何在安知鱼主题中加入无聊湾-1" class="headerlink" title="如何在安知鱼主题中加入无聊湾"></a>如何在安知鱼主题中加入无聊湾</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.gbfun.cc/posts/cd9cbdaa.html"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">如何在安知鱼主题中加入无聊湾</div> <div class="tag-link-sitename">LixdHappy</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="为你anzhiyu主题的Twikoo评论系统恢复预览按钮"><a href="#为你anzhiyu主题的Twikoo评论系统恢复预览按钮" class="headerlink" title="为你anzhiyu主题的Twikoo评论系统恢复预览按钮"></a>为你anzhiyu主题的Twikoo评论系统恢复预览按钮</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://blog.mcxiaochen.top/posts/pb0f17a54/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">为你anzhiyu主题的Twikoo评论系统恢复预览按钮</div> <div class="tag-link-sitename">辰渊尘</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h3 id="给你的-Hexo-博客添加灯笼和春联"><a href="#给你的-Hexo-博客添加灯笼和春联" class="headerlink" title="给你的 Hexo 博客添加灯笼和春联"></a>给你的 Hexo 博客添加灯笼和春联</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://chn.us.kg/blog/zz-14/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">给你的 Hexo 博客添加灯笼和春联</div> <div class="tag-link-sitename">琅環书生</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> anzhiyu </tag>
<tag> 魔改 </tag>
<tag> Hexo </tag>
</tags>
</entry>
<entry>
<title>使用Hexo搭建博客保姆级教程</title>
<link href="/posts/d839/"/>
<url>/posts/d839/</url>
<content type="html"><![CDATA[<div class="note info no-icon flat"><p>本文教程所有操作均在 Windows11 系统下操作<br>遇到看不懂的建议搭配翻译插件食用<br>我自己照教程操作了一遍，应该没什么问题<br>如果疑惑和错误请在评论区提出，谢谢<br>封面图：<a href="https://www.pixiv.net/artworks/123786185">https://www.pixiv.net/artworks/123786185</a></p></div><h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><h4 id="安装-vscode"><a href="#安装-vscode" class="headerlink" title="安装 vscode"></a>安装 vscode</h4><blockquote><p>教程中全程使用 vscode 操作，但你也可以选择其他编辑器</p></blockquote><ul><li>进入 vscode 官网：<a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></li><li>点击<code>Download for Windows</code>下载</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/29/686125e961f89.png"/></div></div><ul><li>运行安装包，安装路径改为除C盘外的盘，一直点下一步</li></ul><h4 id="安装-node-js"><a href="#安装-node-js" class="headerlink" title="安装 node.js"></a>安装 node.js</h4><ul><li>进入 node.js 官网：<a href="https://nodejs.org/zh-cn/download/prebuilt-installer">https://nodejs.org/zh-cn/download/prebuilt-installer</a></li><li>选择操作系统并点击<code>Windows安装程序(.msi)</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/29/68612904a7bad.png"/></div></div><ul><li>运行安装包，安装路径改为除C盘外的盘，一直点下一步</li></ul><h4 id="安装-Git"><a href="#安装-Git" class="headerlink" title="安装 Git"></a>安装 Git</h4><ul><li>进入 Git 官网：<a href="https://git-scm.com/downloads">https://git-scm.com/downloads</a></li><li>选择操作系统并依次点击<code>Download for Windows</code>和<code>Click here to download</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/29/68612a7512e04.png"/></div></div><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/29/68612b55600b0.png"/></div></div><ul><li>运行安装包，安装路径改为除C盘外的盘，一直点下一步</li></ul><h4 id="检测是否安装成功"><a href="#检测是否安装成功" class="headerlink" title="检测是否安装成功"></a>检测是否安装成功</h4><p>使用<code>Win + R</code>打开运行窗口，输入<code>cmd</code>，回车，然后输入以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure><p>如果像图片一样输出了版本信息，即安装成功，若出错可以重装试试</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/29/68612d4bbfd3a.png"/></div></div><h2 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h2><p>找到合适的位置新建一个文件夹，该文件夹将会用来存放你博客的所有文件，创建完成后，在该文件夹下右键鼠标，点击<code>Git Bash Here</code>，分别输入以下命令，这步可能遇到网络问题，如安装失败可以多试几遍或使用魔法上网</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br><span class="line">hexo init</span><br><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><h4 id="测试是否安装成功"><a href="#测试是否安装成功" class="headerlink" title="测试是否安装成功"></a>测试是否安装成功</h4><p>分别输入以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure><p>运行后打开浏览器，访问<a href="http://localhost:4000/">http://localhost:4000/</a>，若成功加载 Hexo 默认主题则安装成功</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/686174c1b5eb6.png"/></div></div><h2 id="将博客部署到-Github-Pages-上"><a href="#将博客部署到-Github-Pages-上" class="headerlink" title="将博客部署到 Github Pages 上"></a>将博客部署到 Github Pages 上</h2><h4 id="注册-Github-账号"><a href="#注册-Github-账号" class="headerlink" title="注册 Github 账号"></a>注册 Github 账号</h4><ul><li>进入 Github 官网：<a href="https://github.com/">https://github.com/</a></li><li>点击右上角的<code>sign up</code></li><li>输入你的邮箱、密码、用户名和地区等信息，可以不勾选 Email preferences ，勾选后会给你邮箱发广告</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/6861732390e44.png"/></div></div><h4 id="新建仓库"><a href="#新建仓库" class="headerlink" title="新建仓库"></a>新建仓库</h4><ul><li>在 Github 主界面，点击右上方的加号，点击<code>New repository</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/6861a08e743e0.png"/></div></div><ul><li>填写仓库的基本信息，主要是仓库名，类型选择<code>Public</code>，不勾选 Add a README file</li></ul><div class="note warning modern"><p>仓库名只能填写为：<code>你的github用户名.github.io</code>的形式<br>比如我的 github 用户名为 Roxy-Magic ，那我的仓库名就要填写为 roxy-magic.github.io<br>如有域名的话仓库名可以随意取</p></div><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/686176361d668.png"/></div></div><h4 id="配置-SSH-密钥"><a href="#配置-SSH-密钥" class="headerlink" title="配置 SSH 密钥"></a>配置 SSH 密钥</h4><p>回到博客文件夹，再次右键<code>Git Bash Here</code>，输入以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">"your email@example.com"</span></span><br><span class="line">//引号里面填写你的邮箱地址，<span class="string">""</span>不要删除</span><br></pre></td></tr></table></figure><p>一路回车，中间出现询问 y/n 时输入 <code>y</code> ，直到出现以下输出</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Your identification has been saved <span class="keyword">in</span> /c/Users/you/.ssh/id_rsa.</span><br><span class="line">Your public key has been saved <span class="keyword">in</span> /c/Users/you/.ssh/id_rsa.pub.</span><br><span class="line">The key fingerprint is:</span><br><span class="line">这里是各种字母数字组成的字符串，结尾是你的邮箱</span><br><span class="line">The key<span class="string">'s randomart image is:</span></span><br><span class="line"><span class="string">这里也是各种字母数字符号组成的字符串</span></span><br></pre></td></tr></table></figure><p>输入以下命令将公钥内容复制到剪贴板</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clip < ~/.ssh/id_rsa.pub</span><br></pre></td></tr></table></figure><h4 id="添加-SSH-公钥至-Github"><a href="#添加-SSH-公钥至-Github" class="headerlink" title="添加 SSH 公钥至 Github"></a>添加 SSH 公钥至 Github</h4><ul><li>在 Github 主界面，点击右上角头像，点击<code>Settings</code></li><li>点击<code>SSH and GPG Keys</code>，选择<code>New SSH key</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/68617ccd48a94.png"/></div></div><ul><li>填写内容，点击<code>Add SSH key</code></li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/68617ccd40d0f.png"/></div></div><h4 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h4><p>直接在桌面右键，点击<code>Git Bash Here</code>，输入以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@github.com</span><br><span class="line">//git@github.com不要做任何更改！</span><br></pre></td></tr></table></figure><p>中途输入<code>yes</code>即可</p><ul><li>配置 Git 个人信息<br>分别输入以下命令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">"此处填你的用户名"</span></span><br><span class="line">git config --global user.email <span class="string">"此处填你的邮箱"</span></span><br></pre></td></tr></table></figure><p>到此为止 SSH Key 配置成功，你的计算机已成功连接到 Github</p><h4 id="推送博客文件至Github仓库"><a href="#推送博客文件至Github仓库" class="headerlink" title="推送博客文件至Github仓库"></a>推送博客文件至Github仓库</h4><ul><li>打开 Github 的博客仓库，复制 SSH 地址</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/686182cd401e4.png"/></div></div><ul><li>用 vscode 打开博客文件夹，之后的所有操作都将这进行<br>打开文件夹中的<code>config.yml</code>文件，拉到最下修改<code>#Deployment</code></li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/one-command-deployment</span></span><br><span class="line">deploy:</span><br><span class="line"> <span class="built_in">type</span>: git</span><br><span class="line"> repository: 这里填刚才复制的ssh地址</span><br><span class="line"> branch: main</span><br></pre></td></tr></table></figure><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/6861835aacd3a.png" alt="示例图片"/></div><span class="image-caption">示例图片</span></div><ul><li>在 vscode 终端中依次执行以下命令</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo cl</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p>恭喜你！完成上述所有步骤，你已经成功将你的博客部署到 Github Page 上，通过<code>https://你的用户名.github.io</code>访问你的博客，快将你的博客分享给别人吧！</p><h2 id="发表第一篇文章"><a href="#发表第一篇文章" class="headerlink" title="发表第一篇文章"></a>发表第一篇文章</h2><h4 id="生成文章"><a href="#生成文章" class="headerlink" title="生成文章"></a>生成文章</h4><ul><li>在博客根目录终端输入以下命令，会在项目<code>[blog]/source/_post</code>中生成<code>文章标题.md</code>文件，文章标题根据需要命名</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo n <span class="string">"文章标题"</span></span><br></pre></td></tr></table></figure><p>除此之外，也可以直接在<code>[blog]/source/_post</code>文件夹下右键鼠标新建文本文档，改后缀为<code>.md</code></p><h4 id="如何编写"><a href="#如何编写" class="headerlink" title="如何编写"></a>如何编写</h4><p>由于 Hexo 文章使用 Markdown 语言，你需要按照一定的语法来写，不过别担心， Markdown 的语法非常简单易上手</p><blockquote><p>Markdown 是一种轻量级标记语言，在 2004 年由 John Gruberis 设计和开发，轻量化、易读易写<br>附：<a href="https://markdown.p2hp.com/basic-syntax/">Markdown 基本语法</a></p></blockquote><h4 id="真正发表"><a href="#真正发表" class="headerlink" title="真正发表"></a>真正发表</h4><p>在编写完文章后执行以下命令将其推送到 Github 博客仓库中</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo cl</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><h2 id="安装第三方主题"><a href="#安装第三方主题" class="headerlink" title="安装第三方主题"></a>安装第三方主题</h2><p>如果觉得 Hexo 自带的主题简陋，可以选择第三方主题进行安装<br>博主本人比较推荐<code>anzhiyu</code>和<code>butterfly</code>这两款主题，比较简洁干净，本站使用的也是anzhiyu主题</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://docs.anheyu.com/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">anzhiyu</div> <div class="tag-link-sitename">安知鱼</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://butterfly.js.org/"> <div class="tag-link-tips">引用站外地址</div> <div class="tag-link-bottom"> <div class="tag-link-left" style=""> <i class="anzhiyufont anzhiyu-icon-link" style=""></i> </div> <div class="tag-link-right"> <div class="tag-link-title">butterfly</div> <div class="tag-link-sitename">jerryc127</div> </div> <i class="anzhiyufont anzhiyu-icon-angle-right"></i> </div> </a></div><h2 id="给博客配置自定义域名-可选"><a href="#给博客配置自定义域名-可选" class="headerlink" title="给博客配置自定义域名(可选)"></a>给博客配置自定义域名(可选)</h2><h4 id="使用vercel"><a href="#使用vercel" class="headerlink" title="使用vercel"></a>使用vercel</h4><ul><li>进入vercel官网：<a href="https://vercel.com/">https://vercel.com/</a>，点击右上角<code>sign up</code>，填入用户名，绑定自己的 Github ，注册好账号</li><li>在vercel主页，点击右边<code>Add New Project</code>新建项目</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/68618bc941b46.png"/></div></div><ul><li>选择 Github 的博客仓库，点击<code>Import</code>导入</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/68618c1842beb.png"/></div></div><ul><li>给项目命名，完成后点击<code>Deplay</code>并等待一会</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/68618e9f7d546.png"/></div></div><h4 id="绑定自定义域名"><a href="#绑定自定义域名" class="headerlink" title="绑定自定义域名"></a>绑定自定义域名</h4><blockquote><p>因为 vercel 提供的默认域名是被墙了的，你需要一个自己的域名来访问博客</p></blockquote><ul><li>首先你需要购买一个域名，可以在腾讯云或者别的域名提供商买，一年几十，便宜一点的就像本站这种一年十几块的也可以</li><li>在 vercel 的博客项目中，依次点击<code>Setting</code>，<code>Domains</code>，<code>Add Domin</code>，按照提示在域名提供商处解析即可</li></ul><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2025/06/30/68619134c809b.png"/></div></div>]]></content>
<categories>
<category> 教程笔记 </category>
</categories>
<tags>
<tag> 教程 </tag>
<tag> Hexo </tag>
</tags>
</entry>
</search>