-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
282 lines (136 loc) · 244 KB
/
search.xml
File metadata and controls
282 lines (136 loc) · 244 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>CellFX说明文档</title>
<link href="/posts/be1992ca/"/>
<url>/posts/be1992ca/</url>
<content type="html"><![CDATA[<h1 id="p_cellfx-说明"><a class="markdownIt-Anchor" href="#p_cellfx-说明"></a> P_CellFX 说明</h1><h2 id="模板模块"><a class="markdownIt-Anchor" href="#模板模块"></a> 模板模块</h2><h3 id="0-顶部模块"><a class="markdownIt-Anchor" href="#0-顶部模块"></a> 0. 顶部模块</h3><ul><li>TK版本<ul><li>增量保存工程tk版本</li><li>打开工程自动显示工程tk版本</li></ul></li><li>时长：<ul><li>设置工程时长</li><li>打开工程自动显示工程时长</li></ul></li><li>导入模板工程</li><li>基础模板路径</li><li>导入背景文件</li><li>基础背景路径</li><li>中英文切换</li><li>布局样式切换<ul><li>全部、基础、树状带预览、树状、树状平铺</li></ul></li><li>统一数据库时显示<ul><li>设置切换</li></ul></li><li>右键菜单<ul><li>设置模板和背景下拉菜单显示的路径数量</li><li>---------------树状样式下--------------<ul><li>显示/隐藏顶栏加载模块</li></ul></li></ul></li></ul><h3 id="1-预览区按钮模块"><a class="markdownIt-Anchor" href="#1-预览区按钮模块"></a> 1. 预览区&&按钮模块</h3><ul><li>预览区<ul><li>预览选中文件</li><li>左键点击：打开预览图片</li></ul></li><li>按钮模块<ul><li>加载：加载素材文件夹</li><li>适应：设置合成大小为适应所有图层的大小</li><li>预合成：预合成<code>00_set</code>中所有cell图层</li><li>渲染：使用命令行渲染渲染队列中的第一个项目</li><li>相机：<ul><li>默认：创建平面相机</li><li>Ctrl：设置最终合成大小</li></ul></li><li>项目：<ul><li>默认：设置工程项目适应最终合成大小</li><li>Ctrl：设置最终合成大小</li></ul></li></ul></li></ul><h3 id="2-文件夹模块"><a class="markdownIt-Anchor" href="#2-文件夹模块"></a> 2. 文件夹模块</h3><ul><li>文件夹列表<ul><li>双击重命名模块</li><li>右键菜单<ul><li>文件栏宽度</li><li>添加文件夹</li><li>删除文件夹</li><li>批量添加选中文件夹中的所有文件夹</li></ul></li></ul></li><li>文件夹工具栏<ul><li>添加文件夹</li><li>删除文件夹</li><li>模块顺序调整</li></ul></li></ul><h3 id="3-文件模块"><a class="markdownIt-Anchor" href="#3-文件模块"></a> 3. 文件模块</h3><ul><li>导航栏<ul><li>后退</li><li>前进</li><li>刷新</li><li>收藏 等同于添加文件夹</li><li>打开 打开文件夹</li><li>当前文件夹地址</li><li>搜索 过滤当前文件夹文件</li></ul></li><li>文件列表<ul><li>双击<ul><li>空白处：返回上一文件夹</li><li>执行所选文件功能<ul><li><code>文件夹</code> 进入文件夹内</li><li><code>.aet</code> 执行模板</li><li><code>.aep/.aepx</code> 导入工程, 并将保存时所选图层的所在合成放入当前所选图层上或当前合成</li><li><code>.ffx</code> 应用预设</li><li><code>.expr</code> 应用表达式</li></ul></li></ul></li><li>右键菜单<ul><li>打开所选工程文件（选中工程文件可见）</li><li>重命名所选文件</li><li>显示/隐藏文件夹</li><li>显示/隐藏文件工具栏</li><li>覆盖所选文件（不可恢复）</li><li>移动所选文件（包含预设及其预览图）</li><li>删除所选文件（不可恢复）</li></ul></li><li>---------------树状3平铺样式下--------------<ul><li>鼠标悬停预览</li><li>右键菜单<ul><li>文件显示大小宽度</li><li>文件显示大小高度</li><li>文件显示间距</li></ul></li></ul></li></ul></li><li>文件工具栏<ul><li>文件备注</li><li>保存工程时同时复制素材至同目录下的<code>(Footage)</code>文件夹中</li><li>保存所选图层为独立工程，未选中时默认选中所有图层</li><li>保存所选属性为预设</li><li>保存所选表达式为后缀为<code>.expr</code>的文本</li><li>收集当前工程所有素材至<code>(Footage)</code>文件夹中</li></ul><hr /><ul><li>是否保存多张图片为预览动图</li><li>更新所选文件的预览图片（勾选<code>是否保存多张图片为预览动图</code>时，也更新动图）</li><li>覆盖所选文件（不可恢复）</li><li>移动所选文件（包含预设及其预览图）</li><li>删除所选文件（不可恢复）</li><li>CellFX设置<ul><li>常规<ul><li>后缀设置</li><li>预览图尺寸设置</li></ul></li><li>名称 设置各文件夹名称</li><li>行为 设置某些动作后的额外动作</li><li>选择<ul><li>语言选择</li></ul></li><li>其他<ul><li>使用统一数据库，将使用本地设置和保存，不勾选时使用保存在当前AE版本中的设置</li></ul></li></ul></li><li>---------------树状3平铺样式下--------------<ul><li>保存多张图片的数量</li><li>同时播放所有文件的预览动图</li><li>缩小平铺文件大小</li><li>扩大平铺文件大小</li></ul></li></ul></li></ul>]]></content>
<categories>
<category> AE </category>
<category> 脚本 </category>
</categories>
<tags>
<tag> 自研 </tag>
<tag> CellFX </tag>
</tags>
</entry>
<entry>
<title>外置AE快速搜索启动插件QALap</title>
<link href="/posts/9c50ad86/"/>
<url>/posts/9c50ad86/</url>
<content type="html"><![CDATA[<h1 id="下载地址"><a class="markdownIt-Anchor" href="#下载地址"></a> 下载地址</h1><ol><li><p><a href="https://getquicker.net/Download">下载Quicker</a></p></li><li><p>复制QALap，粘贴到Quicker面板上<a href="https://getquicker.net/Sharedaction?code=2fbbcb4f-d0a1-482e-7cdc-08d92358c308">这里可以右键复制链接地址来复制</a></p></li></ol><h1 id="使用方法"><a class="markdownIt-Anchor" href="#使用方法"></a> 使用方法</h1><ol><li><p>打开想要使用的Ae版本。</p></li><li><p>右击QALap图标选择信息<全局快捷键，为动作绑定全局快捷键。</p></li><li><p>触发快捷键在弹出窗口里设置脚本、表达式、工程文件路径，留空则默认为空。</p></li><li><p>耐心等待一会（首次运行会构建程序），会弹出一个黑色搜索框，支持英文、英文驼峰、中文拼音、拼音首字母搜索，输入想要运行的脚本、表达式或工程名。通过小键盘上下箭头或鼠标选择，按回车或鼠标点击即可运行。</p></li><li><p>如需修改设置的路径，可右键QALap图标点击配置来重新设置路径。</p></li></ol><h1 id="相关特性"><a class="markdownIt-Anchor" href="#相关特性"></a> 相关特性</h1><ol><li><p>与文件名同名的PNG文件会作为该文件的图标显示在搜索框里，效果同大家常用的脚本管理器。</p></li><li><p>表达式可以在Ae没运行时使用，当电脑有运行Snipaste时会直接调用Snipaste把表达式作为图片贴出，否则则会请求Carbon-API来获取相应的代码贴图。</p></li><li><p>界面参考AK大神的FXConsole并将脚本、表达式和工程文件用红色、蓝色、粉色以作区分。</p></li></ol>]]></content>
<categories>
<category> AE </category>
<category> 插件 </category>
</categories>
<tags>
<tag> 自研 </tag>
<tag> QALap </tag>
</tags>
</entry>
<entry>
<title>高级资源管理器Directory Opus的DIY</title>
<link href="/posts/ec931d23/"/>
<url>/posts/ec931d23/</url>
<content type="html"><![CDATA[<h1 id="安装opus群内限定"><a class="markdownIt-Anchor" href="#安装opus群内限定"></a> 安装Opus（群内限定）</h1><ol><li><p>安装主程序null</p></li><li><p>解压破解文件覆盖原文件null</p></li><li><p><a href="https://www.gpsoft.com.au/DScripts/evalrequest.asp">申请许可证</a></p></li><li><p>打开程序安装证书null</p></li></ol><div class="snote info"><p>PS:如显示过N天过期属于正常现象，到期后仍可继续使用</p></div><h1 id="配置样式"><a class="markdownIt-Anchor" href="#配置样式"></a> 配置样式</h1><h2 id="导入主题"><a class="markdownIt-Anchor" href="#导入主题"></a> 导入主题</h2><ol><li><p>导入主题文件null</p></li><li><p>并应用主题后null</p></li><li><p>如需更改样式，可到设置中显示配置中自行更改null</p></li></ol><h2 id="工具栏配置"><a class="markdownIt-Anchor" href="#工具栏配置"></a> 工具栏配置</h2><ol><li><p>在工具栏处右键，自定义导入博主的工具栏配置null</p></li><li><p>启用后能看到三处横向工具栏，为博主常用。第三行工具栏的磁盘快捷访问等等，各位可自行尝试配置，后面我详细讲讲null</p></li><li><p>工具栏详细配置（暂留，以后写）</p></li></ol><h2 id="更改文件夹图标"><a class="markdownIt-Anchor" href="#更改文件夹图标"></a> 更改文件夹图标</h2><ol><li><p>使用7tsp对文件夹图标进行修改，使用博主推荐搭配的简易扁平Pure黑色版或是到<a href="https://zhutix.com/tag/tubiao/">美化网</a>下载自己喜欢的图标包(<strong>注意图标包支持的工具可能会有所不同</strong>)，点击Start等待完成后重启即可null</p></li><li><p>其次因为权限原因，会发现快速访问的图标没有更改，点击链接根据教程修改权限后重新打开程序后即可，必要时可重启null</p></li></ol><h2 id="文件树美化"><a class="markdownIt-Anchor" href="#文件树美化"></a> 文件树美化</h2>]]></content>
<categories>
<category> 软件 </category>
<category> Directory Opus </category>
</categories>
<tags>
<tag> opus </tag>
<tag> explorer </tag>
</tags>
</entry>
<entry>
<title>Hexo butterfly主题魔改记录</title>
<link href="/posts/bb9a879a/"/>
<url>/posts/bb9a879a/</url>
<content type="html"><![CDATA[<h1 id="参考文章"><a class="markdownIt-Anchor" href="#参考文章"></a> 参考文章</h1><div class="btns circle grid5"> <a href='https://blog.hclonely.com/posts/57bd67ce/' title='HCLonely'><img src='https://cdn.jsdelivr.net/gh/HCLonely/blog.hclonely.com@latest/img/avatar.jpg'>HCLonely</a><a href='https://xiabor.com/714f.html#pinyin插件' title='MuJin'><img src='https://xiabor.com/img/avatar.png'>MuJin</a><a href='https://chuchendjs.github.io/posts/BY-MOchange/' title='初辰'><img src='https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/bt-sonny.jpg'>初辰</a> </div><h1 id="涉及页面模板"><a class="markdownIt-Anchor" href="#涉及页面模板"></a> 涉及页面模板</h1><h2 id="pixiv-日榜"><a class="markdownIt-Anchor" href="#pixiv-日榜"></a> Pixiv 日榜</h2><div class="snote red"><p>使用的是超能小紫提供的服务：<a href="https://cloud.mokeyjay.com/pixiv">https://cloud.mokeyjay.com/pixiv</a>，也可以自行搭建，搭建方式请看这里-><a href="https://www.mokeyjay.com/archives/1063">传送门</a></p></div><ol><li>在<code>themes\Butterfly\layout\includes\widget</code>文件夹新建<code>card_pixiv.pug</code>文件，文件内容如下：<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></pre></td><td class="code"><pre><span class="line">.card-widget.card-pixiv</span><br><span class="line"> .card-content</span><br><span class="line"> .item-headline</span><br><span class="line"> i.fas.fa-image(aria-hidden="true")</span><br><span class="line"> span= _p('aside.card_pixiv')</span><br><span class="line"> iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")</span><br></pre></td></tr></table></figure></li><li>编辑<code>themes\Butterfly\layout\includes\widget\index.pug</code>文件，在你想要显示的位置引入上面的文件，具体参考你使用的版本</li><li>编辑<code>butterfly.yml</code>文件，在<code>card_webinfo</code>下面添加一行<code>card_pixiv: true</code></li><li>编辑<code>themes\Butterfly\languages\zh-CN.yml</code>文件 (请根据你的网站语言选择)，找到<code>card_announcement: 公告</code>, 在下面添加一行<code>card_pixiv: Pixiv日榜Top50</code>(后面的文本可自定义)</li></ol><h2 id="文章日历"><a class="markdownIt-Anchor" href="#文章日历"></a> 文章日历</h2><ol><li><p>安装<code>hexo-generator-calendar</code>插件</p><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add hexo-generator-calendar</span><br></pre></td></tr></table></figure></li><li><p>在主题配置的<code>inject</code>中引入</p><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></pre></td><td class="code"><pre><span class="line">head:</span><br><span class="line"> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/css/butterfly/src/calendar.min.css"></span><br><span class="line">bottom:</span><br><span class="line"> - <script data-pjax src="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/calendar.min.js"></script></span><br></pre></td></tr></table></figure></li><li><p>在<code>themes\Butterfly\layout\includes\widget</code>文件夹新建<code>card_calendar.pug</code>文件，文件内容如下：</p><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">.card-widget.card-calendar</span><br><span class="line"> .card-content</span><br><span class="line"> .item-headline</span><br><span class="line"> i.far.fa-calendar-alt(aria-hidden="true")</span><br><span class="line"> span= _p('aside.card_calendar')</span><br><span class="line"> div.widget-wrap</span><br><span class="line"> div#calendar.widget</span><br></pre></td></tr></table></figure></li><li><p>编辑<code>themes\Butterfly\layout\includes\widget\index.pug</code>文件，在你想要显示的位置引入上面的文件，具体参考你使用的版本</p></li><li><p>编辑<code>butterfly.yml</code>文件，在<code>card_webinfo</code>下面添加一行<code>card_calendar: true</code></p></li><li><p>编辑<code>themes\Butterfly\languages\zh-CN.yml</code>文件 (请根据你的网站语言选择)，找到<code>card_announcement:公告</code>, 在下面添加一行<code>card_calendar: 文章日历</code>(后面的文本可自定义)</p></li></ol><h2 id="投票系统"><a class="markdownIt-Anchor" href="#投票系统"></a> 投票系统</h2><ol><li><p>前往<a href="https://widgetpack.com/">widgetpack</a>注册账号</p></li><li><p>登陆后在点击左侧侧边栏<code>Rating->Install</code>, 你会看到代码有<code>wpac_init.push({widget: 'Rating', id: *****});</code>，记住<code>id</code></p></li><li><p>在博客根目录<code>themes/Butterfly/layout/includes/post/</code>目录内新建文件 rate.pug, 内容如下：</p><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><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></pre></td><td class="code"><pre><span class="line"># wpac-rating</span><br><span class="line">script.</span><br><span class="line"> wpac_init = window.wpac_init || [];</span><br><span class="line"> wpac_init.push({widget: 'Rating', id: #{config.rate.id}});</span><br><span class="line"> (function() {</span><br><span class="line"> if ('WIDGETPACK_LOADED' in window) return;</span><br><span class="line"> WIDGETPACK_LOADED = true;</span><br><span class="line"> var mc = document.createElement('script');</span><br><span class="line"> mc.type = 'text/javascript';</span><br><span class="line"> mc.async = true;</span><br><span class="line"> mc.src = '//embed.widgetpack.com/widget.js';</span><br><span class="line"> var s = document.getElementsByTagName['script'](0); s.parentNode.insertBefore(mc, s.nextSibling);</span><br><span class="line"> })();</span><br><span class="line">style.</span><br><span class="line"> #wpac-rating {</span><br><span class="line"> margin-top: 20px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></li><li><p>编辑博客根目录<code>themes/Butterfly/layout/post.pug</code>文件，在<code>theme.reward.enable</code>下方添加：（根据自己的版本灵活变更）</p><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">if page.rating</span><br><span class="line"> include includes/post/rate.pug</span><br></pre></td></tr></table></figure></li><li><p>在 hexo 根目录配置文件内添加上复制好的<code>id</code>：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">rate:</span></span><br><span class="line"> <span class="attr">id:</span> <span class="string">xxx</span></span><br></pre></td></tr></table></figure></li><li><p>在文章顶部加上<code>rating: false</code>即可为指定文章关闭投票</p></li></ol><h1 id="引入类"><a class="markdownIt-Anchor" href="#引入类"></a> 引入类</h1><h2 id="文章统计图表"><a class="markdownIt-Anchor" href="#文章统计图表"></a> 文章统计图表</h2><ol><li><p>安装插件</p><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add hexo-charts</span><br></pre></td></tr></table></figure></li><li><p>在关于页面中引入</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span>(<span class="title function_">typeof</span>(echarts)==<span class="string">'undefined'</span>){</span></span><br><span class="line"><span class="language-javascript"> location.<span class="property">href</span>=<span class="string">'/about/'</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"posts-chart"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- "data-length"为显示标签个数(从多到少)，默认为10 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"tags-chart"</span> <span class="attr">data-length</span>=<span class="string">"10"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"categories-chart"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></li></ol><h2 id="页脚跳动的心"><a class="markdownIt-Anchor" href="#页脚跳动的心"></a> 页脚跳动的心</h2><ul><li><p>在主题配置的<code>inject</code>中引入 js</p><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">bottom:</span><br><span class="line"> - <script data-pjax src="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/heartbeat.min.js"></script></span><br></pre></td></tr></table></figure></li></ul><h2 id="在页脚养鱼"><a class="markdownIt-Anchor" href="#在页脚养鱼"></a> 在页脚养鱼</h2><p>在主题配置的<code>inject</code>中引入 js</p><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">bottom:</span><br><span class="line"> - <script data-pjax src="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/butterfly/src/fish.min.js"></script></span><br></pre></td></tr></table></figure><h2 id="valine-评论添加博主等标签"><a class="markdownIt-Anchor" href="#valine-评论添加博主等标签"></a> valine 评论添加博主等标签</h2><ol><li><p>修改<code>themes/Butterfly/layout/includes/comments/valine.pug</code></p><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><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></pre></td><td class="code"><pre><span class="line">- let emojiMaps = '""'</span><br><span class="line">if site.data.valine</span><br><span class="line"> - emojiMaps = JSON.stringify(site.data.valine)</span><br><span class="line"></span><br><span class="line">- let links = []</span><br><span class="line">if site.data.link</span><br><span class="line"> each i in site.data.link</span><br><span class="line"> each item in i.link_list</span><br><span class="line"> - links.push(item.link)</span><br><span class="line">script.</span><br><span class="line"> function loadValine () {</span><br><span class="line"> function initValine () {</span><br><span class="line"> window.valine = new Valine({</span><br><span class="line"> el: '#vcomment',</span><br><span class="line"> appId: '#{theme.valine.appId}',</span><br><span class="line"> appKey: '#{theme.valine.appKey}',</span><br><span class="line"> placeholder: '#{theme.valine.placeholder}',</span><br><span class="line"> avatar: '#{theme.valine.avatar}',</span><br><span class="line"> meta: '#{theme.valine.guest_info }'.split(','),</span><br><span class="line"> pageSize: '#{theme.valine.pageSize}',</span><br><span class="line"> lang: '#{theme.valine.lang}',</span><br><span class="line"> recordIP: #{theme.valine.recordIP},</span><br><span class="line"> serverURLs: '#{theme.valine.serverURLs}',</span><br><span class="line"> emojiCDN: '#{theme.valine.emojiCDN}',</span><br><span class="line"> emojiMaps: !{emojiMaps},</span><br><span class="line"> enableQQ: #{theme.valine.enableQQ},</span><br><span class="line"> path: window.location.pathname,</span><br><span class="line"> verify: #{theme.valine.verify},</span><br><span class="line"> master: '#{ theme.valine.master }'.split(',').concat('#{ config.url }'),</span><br><span class="line"> friends: '#{ theme.valine.friends }'.split(',').concat('#{ links }'.split(',')),</span><br><span class="line"> tagMeta: '#{ theme.valine.tagMeta }'.split(','),</span><br><span class="line"> metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder)}</span><br><span class="line"> });</span><br><span class="line"> if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> if (typeof Valine === 'function') initValine()</span><br><span class="line"> else $.getScript('!{url_for(theme.CDN.valine)}', initValine)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {</span><br><span class="line"> if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine)</span><br><span class="line"> else setTimeout(() => loadValine(), 0)</span><br><span class="line"> } else {</span><br><span class="line"> function loadOtherComment () {</span><br><span class="line"> loadValine()</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></li><li><p>修改主题<code>valine</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="attr">verify:</span> <span class="literal">false</span> <span class="comment"># 评论时是否需要验证，需 jQuery 支持</span></span><br><span class="line"><span class="attr">master:</span> <span class="string">www.moelody.com</span> <span class="comment"># 修改为自己的，多写几个也行，配置了根目录配置url的也可以不写</span></span><br><span class="line"><span class="attr">friends:</span> <span class="comment"># 小伙伴的网址，link.yml中配置了友链的也可不写</span></span><br><span class="line"><span class="attr">tagMeta:</span> <span class="string">博主,小伙伴,访客</span> <span class="comment"># 自定义标签</span></span><br><span class="line"><span class="attr">metaPlaceholder:</span> <span class="comment"># 输入框的背景文字</span></span><br><span class="line"> <span class="attr">nick:</span> <span class="string">昵称/QQ</span> <span class="string">号</span></span><br><span class="line"> <span class="attr">mail:</span> <span class="string">邮箱(必填)</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">网址(https://)</span></span><br></pre></td></tr></table></figure></li><li><p>修改主题<code>CDN</code>配置，将<code>valine</code>链接改为<code>https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/others/valine.min.js</code></p></li><li><p>在主题配置的<code>inject</code>中引入 css</p><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">head</span><br><span class="line"> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/css/valine.min.css"></span><br></pre></td></tr></table></figure></li></ol><h2 id="添加卡通人物看板娘"><a class="markdownIt-Anchor" href="#添加卡通人物看板娘"></a> 添加卡通人物（看板娘）</h2><ol><li><p>安装<code>hexo-helper-live2d</code>插件</p><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add hexo-helper-live2d</span><br></pre></td></tr></table></figure></li><li><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><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># Live2D看板娘</span></span><br><span class="line"><span class="attr">live2d:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">pluginRootPath:</span> <span class="string">live2dw/</span> <span class="comment"># 插件在站点上的根目录(相对路径)</span></span><br><span class="line"> <span class="attr">pluginJsPath:</span> <span class="string">lib/</span> <span class="comment"># 脚本文件相对与插件根目录路径</span></span><br><span class="line"> <span class="attr">pluginModelPath:</span> <span class="string">assets/</span> <span class="comment"># 模型文件相对与插件根目录路径</span></span><br><span class="line"> <span class="comment"># scriptFrom: local # 默认</span></span><br><span class="line"> <span class="comment"># scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 原L2Dwidget配置</span></span><br><span class="line"> <span class="attr">scriptFrom:</span> <span class="string">https://cdn.jsdelivr.net/gh/moelody/live2d-widget.js@latest/lib/L2Dwidget.min.js</span> <span class="comment"># 博主修改过的L2Dwidget配置</span></span><br><span class="line"> <span class="attr">tagMode:</span> <span class="literal">false</span> <span class="comment"># 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中</span></span><br><span class="line"> <span class="attr">debug:</span> <span class="literal">false</span> <span class="comment"># 调试, 是否在控制台输出日志</span></span><br><span class="line"> <span class="attr">model:</span></span><br><span class="line"> <span class="attr">use:</span> <span class="string">https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/fairy/air_attack/index.json</span> <span class="comment"># 单个模型</span></span><br><span class="line"> <span class="attr">scale:</span> <span class="number">1</span> <span class="comment"># 模型与canvas的缩放</span></span><br><span class="line"> <span class="comment"># 新增配置</span></span><br><span class="line"> <span class="attr">homePath:</span> <span class="comment"># 如果以下已配置或只使用单个模型，则可留空；否则需要配置。例如：https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/</span></span><br><span class="line"> <span class="attr">tipPath:</span> <span class="string">https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/model_tips_butterfly.json</span> <span class="comment"># 看板娘触发，如homePath已配置可留空默认读取路径下model_tips.json</span></span><br><span class="line"> <span class="attr">listPath:</span> <span class="string">https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/model_list_fairy.json</span> <span class="comment"># 看板娘列表，配置后覆盖单个模型，不配置此项请务必配置单个模型</span></span><br><span class="line"> <span class="attr">display:</span></span><br><span class="line"> <span class="attr">superSample:</span> <span class="number">2</span> <span class="comment"># 模型超采样等级</span></span><br><span class="line"> <span class="attr">width:</span> <span class="number">200</span> <span class="comment"># canvas的长度</span></span><br><span class="line"> <span class="attr">height:</span> <span class="number">200</span> <span class="comment"># canvas的高度</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">right</span> <span class="comment"># 模型位置</span></span><br><span class="line"> <span class="attr">hOffset:</span> <span class="number">30</span> <span class="comment"># 水平偏移</span></span><br><span class="line"> <span class="attr">vOffset:</span> <span class="number">0</span> <span class="comment"># 垂直偏移</span></span><br><span class="line"> <span class="attr">mobile:</span></span><br><span class="line"> <span class="attr">show:</span> <span class="literal">false</span> <span class="comment"># 是否在移动设备上显示</span></span><br><span class="line"> <span class="attr">scale:</span> <span class="number">0.8</span> <span class="comment"># 移动设备上的缩放</span></span><br><span class="line"> <span class="comment"># name:</span></span><br><span class="line"> <span class="comment"># canvas: 'live2dcanvas' # canvas元素的ID</span></span><br><span class="line"> <span class="comment"># div: 'live2d-widget' # div元素的ID</span></span><br><span class="line"> <span class="comment"># react:</span></span><br><span class="line"> <span class="comment"># opacity: 1 # 模型透明度</span></span><br><span class="line"> <span class="comment"># dev:</span></span><br><span class="line"> <span class="comment"># border: false # 在canvas周围显示边界</span></span><br><span class="line"> <span class="attr">dialog:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># script:</span></span><br><span class="line"> <span class="comment">## 新增项如下为css自定义</span></span><br><span class="line"> <span class="comment">## 默认配置</span></span><br><span class="line"> <span class="comment"># bottom: 90% # 对话框距离模型底部比例</span></span><br><span class="line"> <span class="comment"># hOffset: 20 # 对话框水平偏移量，根据工具栏position方向</span></span><br><span class="line"> <span class="comment"># border: 1px solid rgba(224, 186, 140, .62) # 对话框边框</span></span><br><span class="line"> <span class="comment"># borderDark: 1px solid rgba(6, 6, 6, .3) # 对话框边框（夜见模式 data-theme=dark ）</span></span><br><span class="line"> <span class="comment"># background: rgba(236, 217, 188, .5) # 对话框背景</span></span><br><span class="line"> <span class="comment"># backgroundDark: rgba(18, 18, 18,.7) # 对话框背景（夜见模式 data-theme=dark ）</span></span><br><span class="line"> <span class="comment">## 博主的配置</span></span><br><span class="line"> <span class="attr">border:</span> <span class="string">1px</span> <span class="string">solid</span> <span class="string">rgb(255,</span> <span class="number">255</span><span class="string">,</span> <span class="number">255</span><span class="string">,</span> <span class="number">.5</span><span class="string">)</span></span><br><span class="line"> <span class="attr">borderDark:</span> <span class="string">1px</span> <span class="string">solid</span> <span class="string">rgba(6,</span> <span class="number">6</span><span class="string">,</span> <span class="number">6</span><span class="string">,</span> <span class="number">.3</span><span class="string">)</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">var(--card-bg,#fff)</span></span><br><span class="line"> <span class="attr">backgroundDark:</span> <span class="string">var(--card-bg,#121212)</span></span><br><span class="line"> <span class="comment"># 新增小工具栏</span></span><br><span class="line"> <span class="attr">tool:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment">## 如下为css自定义</span></span><br><span class="line"> <span class="comment">## 默认配置</span></span><br><span class="line"> <span class="comment"># position: left # 工具栏位置，影响对话框hOffset</span></span><br><span class="line"> <span class="comment"># top: 10% # 工具栏距离对话框顶部比例</span></span><br><span class="line"> <span class="comment"># hOffset: 20 # 工具栏相对模型的水平偏移量</span></span><br><span class="line"> <span class="comment"># color: '#7b8c9d' # 工具栏图标颜色</span></span><br><span class="line"> <span class="comment"># colorHover: '#0684bd' # 鼠标悬浮工具栏图标颜色</span></span><br><span class="line"> <span class="comment">## 博主的配置</span></span><br><span class="line"> <span class="attr">color:</span> <span class="string">var(--light-grey)</span></span><br><span class="line"> <span class="attr">colorHover:</span> <span class="string">'#0684bd'</span></span><br><span class="line"> <span class="comment">## 小工具栏配置</span></span><br><span class="line"> <span class="comment"># hitokoto: # 一言api</span></span><br><span class="line"> <span class="comment"># enable: true</span></span><br><span class="line"> <span class="comment"># param: # 一言api参数</span></span><br><span class="line"> <span class="comment"># plane: true # 小飞机游戏</span></span><br><span class="line"> <span class="comment"># camera: true # 模型照相</span></span><br><span class="line"> <span class="comment"># model: true # 模型切换（存在模型列表时有效）</span></span><br><span class="line"> <span class="comment"># texture: true # 模型皮肤切换（模型配置有多贴图时有效）</span></span><br></pre></td></tr></table></figure></li><li><p>单个模型配置要点（model/index.json）</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"type"</span><span class="punctuation">:</span> <span class="string">"Live2D Model Setting"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span> <span class="string">"air_attack"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">// 多个模型文件随机加载一个</span></span><br><span class="line"> <span class="attr">"model"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="string">"model.moc"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"model2.moc"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"model3.moc"</span></span><br><span class="line"> <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">// 多个贴图（即模型皮肤）配置</span></span><br><span class="line"> <span class="attr">"textures"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="string">"textures.1024/texture_00.png"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"textures.1024/texture_01.png"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"textures.1024/texture_02.png"</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></li><li><p>多模型列表配置（model_list.json）</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="comment">// 根目录下模型路径</span></span><br><span class="line"> <span class="attr">"models"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="string">"fairy/air_attack"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/airborne"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/armor"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/command"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/fighting"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/fortress"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/golden"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/shield"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"fairy/target"</span></span><br><span class="line"> <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">// 模型加载后显示的信息</span></span><br><span class="line"> <span class="attr">"messages"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="string">"轰炸姬登场~（嗨）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"我是空降姬哦~（吖）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"盾牌姬在这~~（含羞）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"这里是指挥姬，收到请回话~！（笑）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"干嘛！有事吗？（▼㉨▼メ）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"堡垒施工中~~（呼）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"看啥~！（嘿嘿）"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"啦啦~啦啦~啦~"</span><span class="punctuation">,</span></span><br><span class="line"> <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></li><li><p>触发文件配置（model_tips.json）</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="comment">// 默认触发控件</span></span><br><span class="line"> <span class="attr">"waifu"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"console_open_msg"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"哈哈，你打开了控制台，是想要看看我的秘密吗？"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"copy_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"你都复制了些什么呀，转载要记得加上出处哦"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"visible_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"哇，你终于回来了～"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"screenshot_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"照好了嘛，是不是很可爱呢？"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"hidden_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"愿你有一天能与重要的人重逢。"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"load_textures_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"我还没有其他衣服呢!"</span><span class="punctuation">,</span> <span class="string">"我的新衣服好看嘛?"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"load_model_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"请多指教，ご主人様！"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"idle_message"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"好久不见，日子过得好快呢……"</span><span class="punctuation">,</span> <span class="string">"大坏蛋！你都多久没理人家了呀，嘤嘤嘤～"</span><span class="punctuation">,</span> <span class="string">"嗨～快来逗我玩吧！"</span><span class="punctuation">,</span> <span class="string">"拿小拳拳锤你胸口！"</span><span class="punctuation">,</span> <span class="string">"记得把小家加入 Adblock 白名单哦！"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"hour_tips"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"t5-7"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"早上好！一日之计在于晨，美好的一天就要开始了"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t7-11"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t11-14"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"中午了，工作了一个上午，现在是午餐时间！"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t14-17"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"午后很容易犯困呢，今天的运动目标完成了吗？"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t17-19"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t19-21"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"晚上好，今天过得怎么样？"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t21-23"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"已经这么晚了呀，早点休息吧，晚安~"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"t23-5"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"你是夜猫子呀？这么晚还不睡觉，明天起的来嘛"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"default"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"嗨~ 快来逗我玩吧！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"referrer_message"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"localhost"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"欢迎阅读<span style=\"color:#0099cc;\">『"</span><span class="punctuation">,</span> <span class="string">"』</span>"</span><span class="punctuation">,</span> <span class="string">" - "</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"baidu"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">"</span><span class="punctuation">,</span> <span class="string">"</span> 找到的我吗？"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"so"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">"</span><span class="punctuation">,</span> <span class="string">"</span> 找到的我吗？"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"google"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『"</span><span class="punctuation">,</span> <span class="string">"』</span>"</span><span class="punctuation">,</span> <span class="string">" - "</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"default"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"Hello! 来自 <span style=\"color:#0099cc;\">"</span><span class="punctuation">,</span> <span class="string">"</span> 的朋友"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"none"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"欢迎阅读<span style=\"color:#0099cc;\">『"</span><span class="punctuation">,</span> <span class="string">"』</span>"</span><span class="punctuation">,</span> <span class="string">" - "</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">// 鼠标悬浮配置 selector为css选择器，text随机显示数组里的一条信息</span></span><br><span class="line"> <span class="attr">"mouseover"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget #live2dcanvas"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"干嘛呢你，快把手拿开～～"</span><span class="punctuation">,</span> <span class="string">"鼠…鼠标放错地方了！"</span><span class="punctuation">,</span> <span class="string">"你要干嘛呀？"</span><span class="punctuation">,</span> <span class="string">"喵喵喵？"</span><span class="punctuation">,</span> <span class="string">"怕怕(ノ≧∇≦)ノ"</span><span class="punctuation">,</span> <span class="string">"非礼呀！救命！"</span><span class="punctuation">,</span> <span class="string">"这样的话，只能使用武力了！"</span><span class="punctuation">,</span> <span class="string">"我要生气了哦"</span><span class="punctuation">,</span> <span class="string">"不要动手动脚的！"</span><span class="punctuation">,</span> <span class="string">"真…真的是不知羞耻！"</span><span class="punctuation">,</span> <span class="string">"Hentai！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-comment"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"猜猜我要说些什么？"</span><span class="punctuation">,</span> <span class="string">"我从青蛙王子那里听到了不少人生经验。"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-paper-plane"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"要不要来玩飞机大战？"</span><span class="punctuation">,</span> <span class="string">"这个按钮上写着「不要点击」。"</span><span class="punctuation">,</span> <span class="string">"怎么，你想来和我玩个游戏？"</span><span class="punctuation">,</span> <span class="string">"听说这样可以蹦迪！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-user-circle"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"你是不是不爱人家了呀，呜呜呜～"</span><span class="punctuation">,</span> <span class="string">"要见见我的姐姐嘛？"</span><span class="punctuation">,</span> <span class="string">"想要看我妹妹嘛？"</span><span class="punctuation">,</span> <span class="string">"要切换看板娘吗？"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-street-view"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"喜欢换装 PLAY 吗？"</span><span class="punctuation">,</span> <span class="string">"这次要扮演什么呢？"</span><span class="punctuation">,</span> <span class="string">"变装！"</span><span class="punctuation">,</span> <span class="string">"让我们看看接下来会发生什么！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-camera-retro"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"你要给我拍照呀？一二三～茄子～"</span><span class="punctuation">,</span> <span class="string">"要不，我们来合影吧！"</span><span class="punctuation">,</span> <span class="string">"保持微笑就好了～"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-info-circle"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"想要知道更多关于我的事么？"</span><span class="punctuation">,</span> <span class="string">"这里记录着我搬家的历史呢。"</span><span class="punctuation">,</span> <span class="string">"你想深入了解我什么呢？"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget-tool .fa-times"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"到了要说再见的时候了吗？"</span><span class="punctuation">,</span> <span class="string">"呜呜 QAQ 后会有期……"</span><span class="punctuation">,</span> <span class="string">"不要抛弃我呀……"</span><span class="punctuation">,</span> <span class="string">"我们，还能再见面吗……"</span><span class="punctuation">,</span> <span class="string">"哼，你会后悔的！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">// 鼠标点击配置 selector为css选择器，text随机显示数组里的一条信息</span></span><br><span class="line"> <span class="attr">"click"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#live2d-widget #live2dcanvas"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"是…是不小心碰到了吧…"</span><span class="punctuation">,</span> <span class="string">"萝莉控是什么呀？"</span><span class="punctuation">,</span> <span class="string">"你看到我的小熊了吗？"</span><span class="punctuation">,</span> <span class="string">"再摸的话我可要报警了！⌇●﹏●⌇"</span><span class="punctuation">,</span> <span class="string">"110 吗，这里有个变态一直在摸我(ó﹏ò｡)"</span><span class="punctuation">,</span> <span class="string">"不要摸我了，我会告诉老婆来打你的！"</span><span class="punctuation">,</span> <span class="string">"干嘛动我呀！小心我咬你！"</span><span class="punctuation">,</span> <span class="string">"别摸我，有什么好摸的！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"selector"</span><span class="punctuation">:</span> <span class="string">"#veditor"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"要吐槽些什么呢？"</span><span class="punctuation">,</span> <span class="string">"一定要认真填写喵～"</span><span class="punctuation">,</span> <span class="string">"有什么想说的吗？"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">// 时间触发控件 date日期，text随机显示数组里的一条信息</span></span><br><span class="line"> <span class="attr">"seasons"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"01/01"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"<span style=\"color:#0099cc;\">元旦</span>了呢，新的一年又开始了，今年是{year}年~"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"02/14"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"又是一年<span style=\"color:#0099cc;\">情人节</span>，{year}年找到对象了嘛~"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"03/08"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"今天是<span style=\"color:#0099cc;\">妇女节</span>！"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"03/12"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"今天是<span style=\"color:#0099cc;\">植树节</span>，要保护环境呀"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"04/01"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节，不要被骗了哦~</span>"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"05/01"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"今天是<span style=\"color:#0099cc;\">五一劳动节</span>，计划好假期去哪里了吗~"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"06/01"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"<span style=\"color:#0099cc;\">儿童节</span>了呢，快活的时光总是短暂，要是永远长不大该多好啊…"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"09/03"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>，铭记历史、缅怀先烈、珍爱和平、开创未来。"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"09/10"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"<span style=\"color:#0099cc;\">教师节</span>，在学校要给老师问声好呀~"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"10/01"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"<span style=\"color:#0099cc;\">国庆节</span>，新中国已经成立69年了呢"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"11/05-11/12"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"date"</span><span class="punctuation">:</span> <span class="string">"12/20-12/31"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"text"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"这几天是<span style=\"color:#0099cc;\">圣诞节</span>，主人肯定又去剁手买买买了~"</span><span class="punctuation">]</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></pre></td></tr></table></figure></li></ol>]]></content>
<categories>
<category> 博客 </category>
<category> Hexo </category>
</categories>
<tags>
<tag> hexo </tag>
<tag> butterfly </tag>
<tag> 魔改 </tag>
</tags>
</entry>
<entry>
<title>Windows下常用的命令</title>
<link href="/posts/d78f4fea/"/>
<url>/posts/d78f4fea/</url>
<content type="html"><![CDATA[<h1 id="查询类"><a class="markdownIt-Anchor" href="#查询类"></a> 查询类</h1><h2 id="查看某个命令所在的路径"><a class="markdownIt-Anchor" href="#查看某个命令所在的路径"></a> 查看某个命令所在的路径</h2><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">where ffmpeg</span><br><span class="line">where yarn</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 笔记 </category>
<category> 常用 </category>
</categories>
<tags>
<tag> terminal </tag>
<tag> cmd </tag>
</tags>
</entry>
<entry>
<title>Windows下利用bat和ffmpeg批量处理图片</title>
<link href="/posts/4f62ec51/"/>
<url>/posts/4f62ec51/</url>
<content type="html"><![CDATA[<h1 id="bat-和-cmd-命令的语法差异"><a class="markdownIt-Anchor" href="#bat-和-cmd-命令的语法差异"></a> bat 和 cmd 命令的语法差异</h1><p>在 cmd 命令中利用 ffmpeg 将一系列图片转换为一个视频文件的代码通常是这样的：</p><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">ffmpeg -i path1/foo-%03d.jpg remux.mp4</span><br></pre></td></tr></table></figure><p>为了进行更丰富的操作，则通常需要将命令写入一个 bat 文件中，但是 bat 和 cmd 命令的语法有一点小差异<br />如下，即在通配符%03d.jpg 前加了个%</p><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></pre></td><td class="code"><pre><span class="line">ffmpeg -i path1/foo-%%03d.jpg remux.mp4</span><br><span class="line">ffmpeg -i path2/foo-%%03d.jpg remux.mp4</span><br><span class="line">ffmpeg -i path3/foo-%%03d.jpg remux.mp4</span><br></pre></td></tr></table></figure><div class='tip warning'><p>这是因为bat相比于直接在cmd中输入命令，%会有一个转义的功能，所以需要多加一个%<p></div><h1 id="ffmpeg-批量转换图片为指定格式"><a class="markdownIt-Anchor" href="#ffmpeg-批量转换图片为指定格式"></a> ffmpeg 批量转换图片为指定格式</h1><div class="snote info"><p>本文将提到以下几种指定格式的转换</p></div><div class="checkbox plus green checked"> <input type="checkbox" checked /> <p>gif</p></div><div class="checkbox plus green checked"> <input type="checkbox" checked /> <p>webm</p></div><div class="checkbox plus green checked"> <input type="checkbox" checked /> <p>mp4</p></div><p><code>REM</code>为注释内容，其中转换为<code>webm</code>命令中<br />将视频比特率设置为<code>0</code>很重要。如果未指定视频比特率，则默认为较低值，这会导致使用 “约束质量” 模式，会使画质降低。<br />另外，如果要真无损，那么使用<code>-lossless 1</code>或<code>-crf 0</code>选项，在文件大小上会增加一倍多。因为转码过程中，不仅会添加有损视频编码中的正常错误，而且还会在格式尝试保留旧的内容。</p><figure class="highlight bat"><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">@<span class="built_in">echo</span> off</span><br><span class="line"><span class="built_in">set</span> /p ext=请输入输出文件扩展名(mp4/gif/webm/...):</span><br><span class="line"><span class="built_in">del</span> config.txt ><span class="built_in">nul</span> <span class="number">2</span>><span class="built_in">nul</span></span><br><span class="line"><span class="built_in">del</span> palette.png ><span class="built_in">nul</span> <span class="number">2</span>><span class="built_in">nul</span></span><br><span class="line"><span class="comment">REM 批量获取图片文件并存入文件中，duration为图片之间的间隔时间</span></span><br><span class="line"><span class="keyword">for</span> /r . <span class="variable">%%a</span> <span class="keyword">in</span> (*.png,*.jpg) <span class="keyword">do</span> (</span><br><span class="line"> <span class="built_in">echo</span> file ^'<span class="variable">%%~</span>nxa^' >> config.txt</span><br><span class="line"> <span class="built_in">echo</span> duration <span class="number">0</span>.<span class="number">12</span> >> config.txt</span><br><span class="line">)</span><br><span class="line"><span class="comment">REM -framerate帧率可以不指定</span></span><br><span class="line"><span class="comment">REM -vf图片滤镜</span></span><br><span class="line"><span class="comment">REM -b:v视频比特率</span></span><br><span class="line"><span class="comment">REM -CRF恒定质量模式，从 0（最佳质量）到 63（最小文件大小）</span></span><br><span class="line"><span class="keyword">if</span> <span class="variable">%ext%</span>==gif (</span><br><span class="line">ffmpeg -f concat -i config.txt -vf palettegen palette.png</span><br><span class="line">ffmpeg -f concat -i config.txt -i palette.png -lavfi paletteuse -framerate <span class="number">30</span> remux.<span class="variable">%ext%</span> -y</span><br><span class="line">) <span class="keyword">else</span> <span class="keyword">if</span> <span class="variable">%ext%</span>==webm (</span><br><span class="line">ffmpeg -f concat -i config.txt -b:v <span class="number">0</span> -crf <span class="number">18</span> -framerate <span class="number">30</span> remux.<span class="variable">%ext%</span> -y</span><br><span class="line">) <span class="keyword">else</span> (</span><br><span class="line">ffmpeg -f concat -i config.txt -crf <span class="number">18</span> -framerate <span class="number">30</span> remux.<span class="variable">%ext%</span> -y</span><br><span class="line">)</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 笔记 </category>
<category> ffmpeg </category>
</categories>
<tags>
<tag> ffmpeg </tag>
<tag> bat </tag>
<tag> webm </tag>
<tag> gif </tag>
<tag> mp4 </tag>
</tags>
</entry>
<entry>
<title>buttonsv</title>
<link href="/posts/492571b8/"/>
<url>/posts/492571b8/</url>
<content type="html"><![CDATA[<h2 id="buttonsv-按钮食用说明书"><a class="markdownIt-Anchor" href="#buttonsv-按钮食用说明书"></a> BUTTONSV 按钮食用说明书</h2><h3 id="形状与尺寸"><a class="markdownIt-Anchor" href="#形状与尺寸"></a> 形状与尺寸</h3><p>按钮的颜色分为</p><ul><li>白底 tiny</li><li>蓝底 primary</li><li>绿底 action</li><li>橙底 highlight</li><li>红底 caution</li><li>紫底 royal</li></ul><h3 id="常用样式"><a class="markdownIt-Anchor" href="#常用样式"></a> 常用样式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color:#666"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-tiny"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color:#666" href="#" class="button button-tiny">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color:#666"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-rounded button-tiny"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color:#666" href="#" class="button button-rounded button-tiny">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color:#666"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-pill button-tiny"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color:#666" href="#" class="button button-pill button-tiny">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-primary button-small"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-primary button-small">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-primary button-rounded button-small"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-primary button-rounded button-small">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-primary button-pill button-small"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-primary button-pill button-small">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-highlight button-large"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-highlight button-large">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-highlight button-rounded button-large"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-highlight button-rounded button-large">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-highlight button-pill button-large"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-highlight button-pill button-large">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-caution button-jumbo"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-caution button-jumbo">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-caution button-rounded button-jumbo"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-caution button-rounded button-jumbo">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-caution button-pill button-jumbo"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-caution button-pill button-jumbo">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-royal button-giant"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-royal button-giant">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-royal button-rounded button-giant"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-royal button-rounded button-giant">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-royal button-pill button-giant"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-royal button-pill button-giant">Go</a></p><h3 id="不常用"><a class="markdownIt-Anchor" href="#不常用"></a> 不常用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-square button-tiny"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-square button-tiny"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-box button-tiny"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-box button-tiny"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-circle button-tiny"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-circle button-tiny"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-primary button-square button-small"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-primary button-square button-small"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-primary button-box button-small"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-primary button-box button-small"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-primary button-circle button-small"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-primary button-circle button-small"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-action button-square"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-action button-square"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-action button-box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-action button-box"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-action button-circle"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-action button-circle"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-highlight button-square button-large"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-highlight button-square button-large"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-highlight button-box button-large"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-highlight button-box button-large"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-highlight button-circle button-large"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-highlight button-circle button-large"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-caution button-square button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-caution button-square button-jumbo"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-caution button-box button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-caution button-box button-jumbo"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-caution button-circle button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-caution button-circle button-jumbo"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-royal button-square button-giant"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-royal button-square button-giant"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-royal button-box button-giant"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-royal button-box button-giant"> <i class="fa fa-plus"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-royal button-circle button-giant"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-plus"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-royal button-circle button-giant"> <i class="fa fa-plus"></i></button><h3 id="带边框和不带边框的按钮"><a class="markdownIt-Anchor" href="#带边框和不带边框的按钮"></a> 带边框和不带边框的按钮</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-large button-plain button-border button-circle"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-reply"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-large button-plain button-border button-circle"> <i class="fa fa-reply"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-large button-plain button-border button-box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-star"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-large button-plain button-border button-box"> <i class="fa fa-star"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-large button-plain button-border button-square"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-trash-o"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-large button-plain button-border button-square"> <i class="fa fa-trash-o"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">style</span>=<span class="string">"color:red"</span> <span class="attr">class</span>=<span class="string">"button button-large button-plain button-borderless"</span> <span class="attr">style</span>=<span class="string">"color:red"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-tag"</span>></span>test<span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button style="color:red" class="button button-large button-plain button-borderless" style="color:red"> <i class="fa fa-tag">test</i></button><h3 id="3d-按钮"><a class="markdownIt-Anchor" href="#3d-按钮"></a> 3D 按钮</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-3d button-box button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-thumbs-up"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-3d button-box button-jumbo"> <i class="fa fa-thumbs-up"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-3d button-primary button-rounded"</span>></span>Check out the new site!<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-3d button-primary button-rounded">Check out the new site!</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-3d button-action button-pill"</span>></span>Visit Us!<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-3d button-action button-pill">Visit Us!</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-3d button-action button-circle button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-thumbs-up"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-3d button-action button-circle button-jumbo"> <i class="fa fa-thumbs-up"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-3d button-caution"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera"</span>></span><span class="tag"></<span class="name">i</span>></span> Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-3d button-caution"> <i class="fa fa-camera"></i> Go</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-3d button-royal"</span>></span>Say Hi!<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-3d button-royal">Say Hi!</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-raised button-primary button-pill"</span>></span>Visit Us!<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-raised button-primary button-pill">Visit Us!</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-raised button-action button-circle button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-thumbs-up"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-raised button-action button-circle button-jumbo"> <i class="fa fa-thumbs-up"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-raised button-caution"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera"</span>></span><span class="tag"></<span class="name">i</span>></span> Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-raised button-caution"> <i class="fa fa-camera"></i> Go</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-raised button-royal"</span>></span>Say Hi!<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-raised button-royal">Say Hi!</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-raised button-pill button-inverse"</span>></span>Say Hi!<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-raised button-pill button-inverse">Say Hi!</a><h3 id="光晕效果"><a class="markdownIt-Anchor" href="#光晕效果"></a> 光晕效果</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-glow button-rounded button-raised button-primary"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-glow button-rounded button-raised button-primary">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #1B9AF7;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-glow button-border button-rounded button-primary"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #1B9AF7;" href="#" class="button button-glow button-border button-rounded button-primary">Go</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"button button-glow button-circle button-action button-jumbo"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-thumbs-up"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><button class="button button-glow button-circle button-action button-jumbo"> <i class="fa fa-thumbs-up"></i></button><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-glow button-rounded button-highlight"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-glow button-rounded button-highlight">Go</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-glow button-rounded button-caution"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-glow button-rounded button-caution">Go</a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-glow button-rounded button-royal"</span>></span>Go<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><a style="color: #FFF;" href="#" class="button button-glow button-rounded button-royal">Go</a><h3 id="各种文字样式"><a class="markdownIt-Anchor" href="#各种文字样式"></a> 各种文字样式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-uppercase button-primary"</span>></span>uppercase<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-uppercase button-primary">uppercase</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-lowercase button-primary "</span>></span>lowercase<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-lowercase button-primary ">lowercase</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-capitalize button-primary"</span>></span>capitalize<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-capitalize button-primary">capitalize</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">style</span>=<span class="string">"color: #FFF;"</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"button button-small-caps button-primary"</span>></span>small caps<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p><a style="color: #FFF;" href="#" class="button button-small-caps button-primary">small caps</a></p>]]></content>
<categories>
<category> 博客 </category>
<category> Hexo </category>
</categories>
<tags>
<tag> hexo </tag>
<tag> butterfly </tag>
<tag> button </tag>
</tags>
</entry>
<entry>
<title>Tags</title>
<link href="/posts/cf8e3b18/"/>
<url>/posts/cf8e3b18/</url>
<content type="html"><![CDATA[<h2 id="note-bootstrap-callout"><a class="markdownIt-Anchor" href="#note-bootstrap-callout"></a> Note (Bootstrap Callout)</h2><p>用法</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></pre></td><td class="code"><pre><span class="line">{% note [class] [no-icon] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">[class] : default | primary | success | info | warning | danger.</span><br><span class="line">[no-icon] : Disable icon in note.</span><br><span class="line"></span><br><span class="line">All parameters are optional.</span><br></pre></td></tr></table></figure><p>例如：</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><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">{% note default %}</span><br><span class="line">default 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary no-icon %}</span><br><span class="line">primary 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success %}</span><br><span class="line">success 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info %}</span><br><span class="line">info 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning %}</span><br><span class="line">warning 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger %}</span><br><span class="line">danger 提示块标籤</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure><blockquote><p>style: flat</p></blockquote><div class="note default flat"><p>default 提示块标籤</p></div><div class="note primary no-icon 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><h2 id="自定义图标阿里图标及颜色"><a class="markdownIt-Anchor" href="#自定义图标阿里图标及颜色"></a> 自定义图标（阿里图标）及颜色</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">/* default */</span><br><span class="line"><span class="tag"><<span class="name">div</span></span></span><br><span class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"note icon custom iconfont icon-weixin"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">style</span>=<span class="string">"background: #f7f7f7;border-left-color: #777;"</span></span></span><br><span class="line"><span class="tag">></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>default<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div class="note icon custom iconfont icon-weixin" style="background: #f7f7f7;border-left-color: #777;"> <p>default</p></div><h2 id="gallery-相册图库"><a class="markdownIt-Anchor" href="#gallery-相册图库"></a> Gallery 相册图库</h2><p>用法</p><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></pre></td><td class="code"><pre><span class="line"><div class="gallery-group-main"></span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line"></div></span><br></pre></td></tr></table></figure><p>例如</p><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></pre></td><td class="code"><pre><span class="line"><div class="gallery-group-main"></span><br><span class="line">{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}</span><br><span class="line"></div></span><br></pre></td></tr></table></figure><div class="gallery-group-main"><figure class="gallery-group"> <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">壁纸</div> <p>收藏的一些壁纸</p> <a href='/Gallery/wallpaper'></a> </figcaption> </figure> </div><h2 id="gallery-相册"><a class="markdownIt-Anchor" href="#gallery-相册"></a> Gallery 相册</h2><p>用法</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">{% gallery %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure><p>例如</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 %}</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure><div class="gallery-container" data-type="data" data-button=""> <div class="gallery-data">[]</div> <div class="gallery-items"> </div> </div><h2 id="tabs"><a class="markdownIt-Anchor" href="#tabs"></a> Tabs</h2><p>用法</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><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 Unique name, [index] %}</span><br><span class="line"><!-- tab [Tab caption] [@icon] --></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br><span class="line"></span><br><span class="line">Unique name : Unique name of tabs block tag without comma.</span><br><span class="line"><span class="code"> Will be used in #id's as prefix for each tab with their index numbers.</span></span><br><span class="line"><span class="code"> If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.</span></span><br><span class="line"><span class="code"> Only for current url of post/page must be unique!</span></span><br><span class="line"><span class="code">[index] : Index number of active tab.</span></span><br><span class="line"><span class="code"> If not specified, first tab (1) will be selected.</span></span><br><span class="line"><span class="code"> If index is -1, no tab will be selected. It's will be something like spoiler.</span></span><br><span class="line"><span class="code"> Optional parameter.</span></span><br><span class="line"><span class="code">[Tab caption] : Caption of current tab.</span></span><br><span class="line"><span class="code"> If not caption specified, unique name with tab index suffix will be used as caption of tab.</span></span><br><span class="line"><span class="code"> If not caption specified, but specified icon, caption will empty.</span></span><br><span class="line"><span class="code"> Optional parameter.</span></span><br><span class="line"><span class="code">[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')</span></span><br><span class="line"><span class="code"> Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.</span></span><br><span class="line"><span class="code"> Optional parameter.</span></span><br></pre></td></tr></table></figure><blockquote><p>Demo 1 - 预设选择第一个【默认】</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><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">{% tabs test1 %}</span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><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="fas fa-arrow-up"></i></button></div></div><blockquote><p>Demo 2 - 预设选择 tabs</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><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">{% tabs test2, 3 %}</span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><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="fas fa-arrow-up"></i></button></div></div><blockquote><p>Demo 3 - 没有预设值</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><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">{% tabs test3, -1 %}</span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><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="fas fa-arrow-up"></i></button></div></div><blockquote><p>Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名</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><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">{% tabs test4 %}</span><br><span class="line"><!-- tab 第一个Tab --></span><br><span class="line"><span class="strong">**tab名字为第一个Tab**</span></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 class="strong">**只有图标 没有Tab名字**</span></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 class="strong">**名字+icon**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><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="fab fa-apple-pay" style="text-align: center;"></i></button><button type="button" class="tab " data-href="test4-3"><i class="fas fa-bomb"></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="fas fa-arrow-up"></i></button></div></div><h2 id="tag-hide"><a class="markdownIt-Anchor" href="#tag-hide"></a> Tag-hide</h2><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>在文本里面添加按钮隐藏内容，只限文字<br />( 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>content: 文本内容</li><li>display: 按钮显示的文字(可选)</li><li>bg: 按钮的背景颜色(可选)</li><li>color: 按钮文字的颜色(可选)<blockquote><p>Demo</p></li></ul></blockquote><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">哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}</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><br />门里站着一个人? <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 隐藏内容，可以隐藏很多内容，包括图片，代码块等等<br />(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>content: 文本内容</li><li>display: 按钮显示的文字(可选)</li><li>bg: 按钮的背景颜色(可选)</li><li>color: 按钮文字的颜色(可选)<blockquote><p>Demo</p></li></ul></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><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"><blockquote><p>2.3.0 以上支持</p></blockquote>如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。(display 不能包含英文逗号，可用`‚`)<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><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">{% hideToggle Butterfly安装方法 %}</span><br><span class="line">在你的博客根目录里</span><br><span class="line"></span><br><span class="line">git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">如果想要安装比较新的dev分支，可以</span><br><span class="line"></span><br><span class="line">git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">{% endhideToggle %}</span><br></pre></td></tr></table></figure><details class="toggle" ><summary class="toggle-button" style="">Butterfly安装方法</summary><div class="toggle-content"><p>在你的博客根目录里</p><p>git clone -b master <a href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes/Butterfly</p><p>如果想要安装比较新的 dev 分支，可以</p><p>git clone -b dev <a href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes/Butterfly</p></div></details></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="mermaid"><a class="markdownIt-Anchor" href="#mermaid"></a> mermaid</h2><p>用法</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">{% mermaid %}</span><br><span class="line">内容</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure><p>例如</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></pre></td><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">pie</span><br><span class="line"><span class="code"> title Key elements in Product X</span></span><br><span class="line"><span class="code"> "Calcium" : 42.96</span></span><br><span class="line"><span class="code"> "Potassium" : 50.05</span></span><br><span class="line"><span class="code"> "Magnesium" : 10.01</span></span><br><span class="line"><span class="code"> "Iron" : 5</span></span><br><span class="line"><span class="code">{% endmermaid %}</span></span><br></pre></td></tr></table></figure><div class="mermaid-wrap"><pre class="mermaid-src" hidden> pietitle Key elements in Product X"Calcium" : 42.96"Potassium" : 50.05"Magnesium" : 10.01"Iron" : 5 </pre></div><h2 id="button"><a class="markdownIt-Anchor" href="#button"></a> Button</h2><blockquote><p>3.0 以上适用</p></blockquote><p>使用方法</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><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"><span class="code"> 按钮字体和边框顔色(outline时)</span></span><br><span class="line"><span class="code"> default/blue/pink/red/purple/orange/green</span></span><br><span class="line"><span class="code">[style] : [可选] 按钮样式 默认实心</span></span><br><span class="line"><span class="code"> outline/留空</span></span><br><span class="line"><span class="code">[layout] : [可选] 按钮佈局 默认为line</span></span><br><span class="line"><span class="code"> block/留空</span></span><br><span class="line"><span class="code">[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边</span></span><br><span class="line"><span class="code"> center/right/留空</span></span><br><span class="line"><span class="code">[size] : [可选] 按钮大小</span></span><br><span class="line"><span class="code"> larger/留空</span></span><br></pre></td></tr></table></figure><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><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button {% btn 'http://www.jerryc.me',JerryC %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,,outline %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}</span><br></pre></td></tr></table></figure><p>This is my website, click the button <a class="btn-beautify " href="http://www.jerryc.me" title="JerryC"><span>JerryC</span></a>This is my website, click the button <a class="btn-beautify " href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a>This is my website, click the button <a class="btn-beautify outline" href="http://www.jerryc.me" title="JerryC"><span>JerryC</span></a>This is my website, click the button <a class="btn-beautify outline" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a>This is my website, click the button <a class="btn-beautify larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><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 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block center larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block right outline larger %}</span><br></pre></td></tr></table></figure><a class="btn-beautify block" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify block center larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify block right outline larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><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">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}</span><br></pre></td></tr></table></figure><a class="btn-beautify larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify blue larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify pink larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify red larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify purple larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify orange larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify green larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><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 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline blue larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline pink larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline red larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline purple larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline orange larger %}</span><br><span class="line">{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-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 class="btn-center"><a class="btn-beautify outline larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify outline blue larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify outline pink larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify outline red larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify outline purple larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify outline orange larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a><a class="btn-beautify outline green larger" href="http://www.jerryc.me" title="JerryC"><i class="far fa-hand-point-right"></i><span>JerryC</span></a></div>## 扩展样式### 另一种风格的 note 和小 tag 标签<p class='div-border green'>绿色</p><p class='div-border red'>红色</p><p class='div-border yellow'>黄色</p><p class='div-border grey'>灰色</p><p class='div-border blue'>蓝色</p><span class="inline-tag red">红色小标签</span><span class="inline-tag green">绿色小标签</span><span class="inline-tag blue">蓝色小标签</span><span class="inline-tag yellow">黄色小标签</span><span class="inline-tag grey">灰色小标签</span>小标签参数说明：`<p class='div-border [颜色|方向加粗]'>你的文字</p>` 写法如下<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">/* note语法示例 */</span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">'div-border green'</span>></span>绿色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">'div-border red'</span>></span>红色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">'div-border yellow'</span>></span>黄色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">'div-border grey'</span>></span>灰色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">'div-border blue'</span>></span>蓝色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line">/* 小tag标签语法示例 */</span><br><span class="line"><span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"inline-tag red"</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 class="attr">class</span>=<span class="string">"inline-tag green"</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 class="attr">class</span>=<span class="string">"inline-tag blue"</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 class="attr">class</span>=<span class="string">"inline-tag yellow"</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 class="attr">class</span>=<span class="string">"inline-tag grey"</span>></span>灰色小标签<span class="tag"></<span class="name">span</span>></span></span><br></pre></td></tr></table></figure>以上代码的效果可以看本段开头处的效果（不写颜色默认为灰色）。当然了你也可以设置某个边框加粗。例如 `<p class='div-border green left right'>绿色</p>`### 渐变 note<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'tip'</span> ></span><span class="tag"><<span class="name">p</span>></span>默认情况<span class="tag"><<span class="name">p</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">'tip success'</span>></span><span class="tag"><<span class="name">p</span>></span>success<span class="tag"><<span class="name">p</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">'tip error'</span>></span><span class="tag"><<span class="name">p</span>></span>error<span class="tag"><<span class="name">p</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">'tip warning'</span>></span><span class="tag"><<span class="name">p</span>></span>warning<span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div class='tip' ><p>默认情况<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>### volantis 主题的 note 标签<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></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">"snote red"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>默认 red<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote quote"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>quote<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote info"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>info<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote done"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>done<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote success"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>success<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote danger"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>danger<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote error"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>error<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote radiation"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>radiation<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote bug"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>bug<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote idea yellow"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>idea-yellow<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote link blue"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>link- blue<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote paperclip"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>paperclip<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote todo"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>todo<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote msg cyan"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>msg cyan<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote guide"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>guide<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote download"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>download<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote up"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>up<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"snote undo"</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">p</span>></span></span>undo<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure><div class="snote red"><p>默认 red</p></div><div class="snote quote"><p>quote</p></div><div class="snote info"><p>info</p></div><div class="snote done"><p>done</p></div><div class="snote success"><p>success</p></div><div class="snote danger"><p>danger</p></div><div class="snote error"><p>error</p></div><div class="snote radiation"><p>radiation</p></div><div class="snote bug"><p>bug</p></div><div class="snote idea yellow"><p>idea-yellow</p></div><div class="snote link blue"><p>link- blue</p></div><div class="snote paperclip"><p>paperclip</p></div><div class="snote todo"><p>todo</p></div><div class="snote msg cyan"><p>msg cyan</p></div><div class="snote guide"><p>guide</p></div><div class="snote download"><p>download</p></div><div class="snote up"><p>up</p></div><div class="snote undo"><p>undo</p></div>### Checkbox & Radio<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>参数列表：~ 颜色`red, yellow, green, cyan, blue`~ 样式`plus, minus, times`~ 选中状态`checked`tag 标签格式<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></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><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><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>纯文本测试<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> 支持简单的</span><br><span class="line"> <span class="tag"><<span class="name">a</span></span></span><br><span class="line"><span class="tag"> <span class="attr">href</span>=<span class="string">"https://guides.github.com/features/mastering-markdown/"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">target</span>=<span class="string">"_blank"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">rel</span>=<span class="string">"noopener"</span></span></span><br><span class="line"><span class="tag"> ></span>markdown</a</span><br><span class="line"> ></span><br><span class="line"> 语法</span><br><span class="line"> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox red"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>支持自定义颜色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox green checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>绿色 + 默认选中<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox yellow checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>黄色 + 默认选中<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox cyan checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>青色 + 默认选中<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox blue checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>蓝色 + 默认选中<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox plus green checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>增加<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox minus yellow checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>减少<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox times red checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>叉<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>纯文本测试<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox checked"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">checked</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> 支持简单的</span><br><span class="line"> <span class="tag"><<span class="name">a</span></span></span><br><span class="line"><span class="tag"> <span class="attr">href</span>=<span class="string">"https://guides.github.com/features/mastering-markdown/"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">target</span>=<span class="string">"_blank"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">rel</span>=<span class="string">"noopener"</span></span></span><br><span class="line"><span class="tag"> ></span>markdown</a</span><br><span class="line"> ></span><br><span class="line"> 语法</span><br><span class="line"> <span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox red"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>支持自定义颜色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox green"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>绿色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox yellow"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>黄色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox cyan"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>青色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"checkbox blue"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>蓝色<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><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 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>### 富文本按钮<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>- 圆角样式 `rounded, circle`- 布局方式 默认为自动宽度，适合视野内只有一两个的情况。| 参数 | 含义 || :----: | :--------------------------------------: || wide | 宽一点的按钮 || fill | 填充布局，自动铺满至少一行，多了会换行。 || center | 居中，按钮之间是固定间距。 || around | 居中分散 || grid2 | 等宽最多 2 列，屏幕变窄会适当减少列数。 || grid3 | 等宽最多 3 列，屏幕变窄会适当减少列数。 || grid4 | 等宽最多 4 列，屏幕变窄会适当减少列数。 || grid5 | 等宽最多 5 列，屏幕变窄会适当减少列数。 |- 增加文字样式 可以在容器内增加`标题`和`描述文字`<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></pre></td><td class="code"><pre><span class="line">{% btns circle grid5 %}</span><br><span class="line">{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}</span><br><span class="line">{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}</span><br><span class="line">{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}</span><br><span class="line">{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}</span><br><span class="line">{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}</span><br><span class="line">{% endbtns %}</span><br><span class="line"></span><br><span class="line">{% btns rounded grid5 %}</span><br><span class="line">{% cell 下载源码, /, fa fa-download %}</span><br><span class="line">{% cell 查看文档, /, fa fa-book %}</span><br><span class="line">{% endbtns %}</span><br><span class="line"></span><br><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></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">'fa fa-apple'</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://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.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></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">'fa fa-apple'</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://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.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 class="btns circle grid5"> <a href='https://www.antmoe.com' title='Dreamy.TZK'><img src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg'>Dreamy.TZK</a><a href='https://www.antmoe.com' title='Dreamy.TZK'><img src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg'>Dreamy.TZK</a><a href='https://www.antmoe.com' title='Dreamy.TZK'><img src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg'>Dreamy.TZK</a><a href='https://www.antmoe.com' title='Dreamy.TZK'><img src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg'>Dreamy.TZK</a><a href='https://www.antmoe.com' title='Dreamy.TZK'><img src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg'>Dreamy.TZK</a> </div></p><div class="btns rounded grid5"> <a href='/' title='下载源码'><i class='fa fa-download'></i>下载源码</a><a href='/' title='查看文档'><i class='fa fa-book'></i>查看文档</a> </div><div class="btns circle center grid5"> <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'><i class='fas fa-apple'></i><b>心率管家</b><p class='p red'>专业版</p><img src='https://cdn.jsdelivr.net/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'><i class='fas fa-apple'></i><b>心率管家</b><p class='p green'>免费版</p><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a> </div><h3 id="folding"><a class="markdownIt-Anchor" href="#folding"></a> Folding</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% folding 参数（可选）, 标题 %}</span><br><span class="line">null</span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><details 参数（可选）><summary> <p>标题</p> </summary> <div class='content'> <p>null</p> </div> </details><p>参数位置可以填写颜色和状态，多个参数用空格隔开。</p><ul><li>颜色<br /><code>blue, cyan, green, yellow, red</code></li><li>状态<br />状态填写<code>open</code>代表默认打开。</li></ul><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">null</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://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.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><details ><summary> <p>查看图片测试</p> </summary> <div class='content'> <p>null</p> </div> </details><details cyan open><summary> <p>查看默认打开的折叠框</p> </summary> <div class='content'> <p>这是一个默认打开的折叠框。</p> </div> </details><details green><summary> <p>查看代码测试</p> </summary> <div class='content'> </div> </details><details yellow><summary> <p>查看列表测试</p> </summary> <div class='content'> <ul><li>haha</li><li>hehe</li></ul> </div> </details><details red><summary> <p>查看嵌套测试</p> </summary> <div class='content'> <details blue><summary> <p>查看嵌套测试2</p> </summary> <div class='content'> <details ><summary> <p>查看嵌套测试3</p> </summary> <div class='content'> <p>hahaha <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span></p> </div> </details> </div> </details> </div> </details><h3 id="fancybox"><a class="markdownIt-Anchor" href="#fancybox"></a> Fancybox</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% fancybox 参数, 列数 %}</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">{% endfancybox %}</span><br></pre></td></tr></table></figure><div class="gallery 参数"> <p>null<br />null</p> </div><ul><li>对齐方向<br /><code>left, center, right</code></li><li>缩放<br /><code>stretch</code></li><li>列数<br />逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配<code>stretch</code>来时图片放大填充。</li></ul><h4 id="单张图片"><a class="markdownIt-Anchor" href="#单张图片"></a> 单张图片</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery "</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fancybox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">"图片描述"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"image-caption"</span>></span></span><br><span class="line"> 图片描述</span><br><span class="line"> <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">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- TAG写法（不建议）</span></span><br><span class="line"><span class="comment">{% fancybox %}</span></span><br><span class="line"><span class="comment">null</span></span><br><span class="line"><span class="comment">{% endfancybox %}</span></span><br><span class="line"><span class="comment">--></span></span><br></pre></td></tr></table></figure><div class="gallery "> <p> <div class="fancybox"> <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg" alt="图片描述"> <span class="image-caption"> 图片描述 </span> </div> </p></div><h4 id="一行多个图片不换行"><a class="markdownIt-Anchor" href="#一行多个图片不换行"></a> 一行多个图片（不换行）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery "</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fancybox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">"图片描述"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"image-caption"</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 class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fancybox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">"图片描述"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"image-caption"</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 class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fancybox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">alt</span>=<span class="string">"图片描述"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"image-caption"</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">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!-- TAG写法 不推荐</span></span><br><span class="line"><span class="comment">{% fancybox %}</span></span><br><span class="line"><span class="comment">null</span></span><br><span class="line"><span class="comment">null</span></span><br><span class="line"><span class="comment">null</span></span><br><span class="line"><span class="comment">{% endfancybox %}</span></span><br><span class="line"><span class="comment">--></span></span><br></pre></td></tr></table></figure><div class="gallery "> <p> <div class="fancybox"> <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg" alt="图片描述"> <span class="image-caption">图片描述</span> </div><br> <div class="fancybox"> <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg" alt="图片描述"> <span class="image-caption">图片描述</span> </div><br> <div class="fancybox"> <img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg" alt="图片描述"> <span class="image-caption">图片描述</span> </div> </p></div><h4 id="多行多个图片每行-2-~-8-个图片"><a class="markdownIt-Anchor" href="#多行多个图片每行-2-~-8-个图片"></a> 多行多个图片（每行 2 ～ 8 个图片）</h4><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">{% fancybox stretch, 4 %}</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">null</span><br><span class="line">{% endfancybox %}</span><br></pre></td></tr></table></figure><div class="gallery stretch" col='4'> <p>null<br />null<br />null<br />null<br />null<br />null<br />null<br />null</p> </div><h3 id="文章内音乐"><a class="markdownIt-Anchor" href="#文章内音乐"></a> 文章内音乐</h3><h4 id="aplayer"><a class="markdownIt-Anchor" href="#aplayer"></a> Aplayer</h4><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></pre></td><td class="code"><pre><span class="line">{% aplayerlist %}</span><br><span class="line">{</span><br><span class="line"><span class="code"> "narrow": false,// （可选）播放器袖珍风格</span></span><br><span class="line"><span class="code"> "autoplay": true,// （可选) 自动播放，移动端浏览器暂时不支持此功能</span></span><br><span class="line"><span class="code"> "mode": "random",// （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation'</span></span><br><span class="line"><span class="code"> "showlrc": 3,// （可选）歌词显示配置项，可选项有：1,2,3</span></span><br><span class="line"><span class="code"> "mutex": true,// （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停</span></span><br><span class="line"><span class="code"> "theme": "#e6d0b2",// （可选）播放器风格色彩设置，默认：#b7daff</span></span><br><span class="line"><span class="code"> "preload": "metadata",// （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'</span></span><br><span class="line"><span class="code"> "listmaxheight": "513px",// (可选) 该播放列表的最大长度</span></span><br><span class="line"><span class="code"> "music": [</span></span><br><span class="line"><span class="code"> {</span></span><br><span class="line"><span class="code"> "title": "CoCo",</span></span><br><span class="line"><span class="code"> "author": "Jeff Williams",</span></span><br><span class="line"><span class="code"> "url": "caffeine.mp3",</span></span><br><span class="line"><span class="code"> "pic": "caffeine.jpeg",</span></span><br><span class="line"><span class="code"> "lrc": "caffeine.txt"</span></span><br><span class="line"><span class="code"> },</span></span><br><span class="line"><span class="code"> {</span></span><br><span class="line"><span class="code"> "title": "アイロニ",</span></span><br><span class="line"><span class="code"> "author": "鹿乃",</span></span><br><span class="line"><span class="code"> "url": "irony.mp3",</span></span><br><span class="line"><span class="code"> "pic": "irony.jpg"</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> ]</span></span><br><span class="line"><span class="code">}</span></span><br><span class="line"><span class="code">{% endaplayerlist %}</span></span><br></pre></td></tr></table></figure><p>简单示例</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">{% meting "60198" "netease" "playlist" %}</span><br></pre></td></tr></table></figure> <div id="aplayer-VjKwFYYK" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="60198" data-server="netease" data-type="playlist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#ad7a86" ></div><p>进阶示例</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">{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}</span><br></pre></td></tr></table></figure> <div id="aplayer-jQclhUpj" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="60198" data-server="netease" data-type="playlist" data-mode="circulation" data-autoplay="true" data-mutex="false" data-listmaxheight="340px" data-preload="none" data-theme="#ad7a86" ></div><h4 id="audio"><a class="markdownIt-Anchor" href="#audio"></a> Audio</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">audio</span> <span class="attr">controls</span>=<span class="string">""</span> <span class="attr">preload</span>=<span class="string">""</span> <span class="attr">__idm_id__</span>=<span class="string">"269361153"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"http://music.163.com/song/media/outer/url?id=574566207.mp3"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">type</span>=<span class="string">"audio/mp3"</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> Your browser does not support the audio tag.</span><br><span class="line"><span class="tag"></<span class="name">audio</span>></span></span><br></pre></td></tr></table></figure><audio controls="" preload="" __idm_id__="269361153"> <source src="http://music.163.com/song/media/outer/url?id=574566207.mp3" type="audio/mp3" /> Your browser does not support the audio tag.</audio>]]></content>
<categories>
<category> 博客 </category>
<category> Hexo </category>
</categories>
<tags>
<tag> hexo </tag>
<tag> butterfly </tag>
<tag> tags </tag>
</tags>
</entry>
<entry>
<title>Front-matter</title>
<link href="/posts/31e4c77c/"/>
<url>/posts/31e4c77c/</url>
<content type="html"><![CDATA[<h3 id="post-front-matter"><a class="markdownIt-Anchor" href="#post-front-matter"></a> Post Front-matter</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><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></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title:</span><br><span class="line">date:</span><br><span class="line">updated:</span><br><span class="line">tags:</span><br><span class="line">categories:</span><br><span class="line">keywords:</span><br><span class="line">description:</span><br><span class="line">top<span class="emphasis">_img:</span></span><br><span class="line"><span class="emphasis">comments：</span></span><br><span class="line"><span class="emphasis">cover:</span></span><br><span class="line"><span class="emphasis">toc:</span></span><br><span class="line"><span class="emphasis">toc_</span>number:</span><br><span class="line">auto<span class="emphasis">_open:</span></span><br><span class="line"><span class="emphasis">copyright:</span></span><br><span class="line"><span class="emphasis">copyright_</span>author:</span><br><span class="line">copyright<span class="emphasis">_author_</span>href:</span><br><span class="line">copyright<span class="emphasis">_url:</span></span><br><span class="line"><span class="emphasis">copyright_</span>info:</span><br><span class="line">mathjax:</span><br><span class="line">katex:</span><br><span class="line">aplayer：</span><br><span class="line"><span class="section">highlight<span class="emphasis">_shrink：</span></span></span><br><span class="line"><span class="emphasis"><span class="section">---</span></span></span><br></pre></td></tr></table></figure><table><thead><tr><th style="text-align:left">左对齐</th><th style="text-align:right">右对齐</th><th style="text-align:center">居中对齐</th></tr></thead><tbody><tr><td style="text-align:left">单元格</td><td style="text-align:right">单元格</td><td style="text-align:center">单元格</td></tr><tr><td style="text-align:left">单元格</td><td style="text-align:right">单元格</td><td style="text-align:center">单元格</td></tr></tbody></table><table><thead><tr><th style="text-align:left">写法</th><th style="text-align:center">解释</th></tr></thead><tbody><tr><td style="text-align:left">title</td><td style="text-align:center">【必需】文章标题</td></tr><tr><td style="text-align:left">date</td><td style="text-align:center">【必需】文章创建日期</td></tr><tr><td style="text-align:left">updated</td><td style="text-align:center">【可选】文章更新日期</td></tr><tr><td style="text-align:left">tags</td><td style="text-align:center">【可选】文章标籤</td></tr><tr><td style="text-align:left">categories</td><td style="text-align:center">【可选】文章分类</td></tr><tr><td style="text-align:left">keywords</td><td style="text-align:center">【可选】文章关键字</td></tr><tr><td style="text-align:left">description</td><td style="text-align:center">【可选】文章描述</td></tr><tr><td style="text-align:left">top_img</td><td style="text-align:center">【可选】文章顶部图片</td></tr><tr><td style="text-align:left">cover</td><td style="text-align:center">【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)</td></tr><tr><td style="text-align:left">comments</td><td style="text-align:center">【可选】显示文章评论模块(默认 true)</td></tr><tr><td style="text-align:left">toc</td><td style="text-align:center">【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)</td></tr><tr><td style="text-align:left">toc_number</td><td style="text-align:center">【可选】显示 toc_number(默认为设置中 toc 的 number 配置)</td></tr><tr><td style="text-align:left">auto_open</td><td style="text-align:center">【可选】是否自动打开 TOC(默认为设置中 toc 的 auto_open 配置)</td></tr><tr><td style="text-align:left">copyright</td><td style="text-align:center">【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)</td></tr><tr><td style="text-align:left">copyright_author</td><td style="text-align:center">【可选】文章版权模块的<code>文章作者</code></td></tr><tr><td style="text-align:left">copyright_author_href</td><td style="text-align:center">【可选】文章版权模块的<code>文章作者</code>链接</td></tr><tr><td style="text-align:left">copyright_url</td><td style="text-align:center">【可选】文章版权模块的<code>文章连结</code>链接</td></tr><tr><td style="text-align:left">copyright_info</td><td style="text-align:center">【可选】文章版权模块的<code>版权声明</code>文字</td></tr><tr><td style="text-align:left">mathjax</td><td style="text-align:center">【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)</td></tr><tr><td style="text-align:left">katex</td><td style="text-align:center">【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)</td></tr><tr><td style="text-align:left">aplayer</td><td style="text-align:center">【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置</td></tr><tr><td style="text-align:left">highlight_shrink</td><td style="text-align:center">【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)</td></tr></tbody></table>]]></content>
<categories>
<category> 博客 </category>
<category> Hexo </category>
</categories>
<tags>
<tag> hexo </tag>
<tag> butterfly </tag>
<tag> front-matter </tag>
</tags>
</entry>
</search>