Repository navigation
Expand file tree
/
Copy pathatom.xml
More file actions
56 lines (31 loc) · 243 KB
/
Copy pathatom.xml
File metadata and controls
56 lines (31 loc) · 243 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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>兔老大</title>
<subtitle>保持热爱, 奔赴星海.</subtitle>
<link href="https://boss-rabbit.github.io/atom.xml" rel="self"/>
<link href="https://boss-rabbit.github.io/"/>
<updated>2023-04-06T01:13:00.055Z</updated>
<id>https://boss-rabbit.github.io/</id>
<author>
<name>兔老大</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>Hello World</title>
<link href="https://boss-rabbit.github.io/posts/4a17b156.html"/>
<id>https://boss-rabbit.github.io/posts/4a17b156.html</id>
<published>2023-04-06T01:13:00.055Z</published>
<updated>2023-04-06T01:13:00.055Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
<summary type="html"><p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for</summary>
</entry>
<entry>
<title>基于Butterfly的外挂标签引入</title>
<link href="https://boss-rabbit.github.io/posts/615e2dec.html"/>
<id>https://boss-rabbit.github.io/posts/615e2dec.html</id>
<published>2020-11-14T15:55:44.000Z</published>
<updated>2022-04-29T15:29:37.000Z</updated>
<content type="html"><![CDATA[<div class="tip home"><p>本文档为<a href="https://jq.qq.com/?_wv=1027&k=EF1Elvqp">🧊Akilarの糖果屋🍭</a>出品，转载需注明出处。</p><p>如有使用了本站的外挂标签插件的读者，请确保自己的配置内容为最新。</p><p>同理，若您在使用本帖教程后，发现样式无法完全还原文档内效果，请重点排查您的其余第三方魔改css样式，例如css中是否存在<strong>circle</strong>、<strong>square</strong>等易重class名。</p></div><details class="folding-tag" red><summary> 点开查看开发记录 </summary> <div class='content'> <div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>本文所涉及的样式，主要参考的是各类已有主题，并对相应styl文件进行样式修改以及添加夜间模式适配。已尽可能追根溯源找到了各部分魔改内容最初的作者，如有错误和遗漏还请联系我修改。</p></div><div class="timeline green"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>开发记录</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-04-29:发布插件版v1.0.17</p></div></div><div class='timeline-item-content'><ol><li>在bubble气泡外挂标签基础上新增reference引用文献标签</li><li>修复了bubble气泡外挂标签层级过高遮挡提示框的bug</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-04-28:发布插件版v1.0.16</p></div></div><div class='timeline-item-content'><ol><li>移除timeline外挂标签，请使用butterfly新版自带的timeline标签，效果更好。</li><li>修复tip标签自定义图标无效的bug</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-04-07:发布插件版v1.0.15</p></div></div><div class='timeline-item-content'><ol><li>调整气泡显隐动画逻辑，避免透明度变换瞬间遮挡到正文。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-04-07:发布插件版v1.0.14</p></div></div><div class='timeline-item-content'><ol><li>新增气泡注释bubble标签样式。效果比nota标签更好。</li><li>支持自定义气泡背景色。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-03-03:发布插件版v1.0.13</p></div></div><div class='timeline-item-content'><ol><li>新增开关逻辑，iconfont，carousel设为false则不引入。</li><li>site标签新增灯箱屏蔽，不再支持点击放大图片。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-02-14:发布插件版v1.0.12</p></div></div><div class='timeline-item-content'><ol><li>剔除了link卡片的无效css</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022-01-26:发布插件版v1.0.11</p></div></div><div class='timeline-item-content'><ol><li>butterfly_v4.0新增了<code>timeline</code>标签，与本插件标签名冲突。可以选择改用标签文档中的源码配置方案并剔除timeline标签或者删除主题原有的timeline标签文件<code>Blogroot\themes\butterfly\scripts\tag\timeline.js</code>和<code>Blogroot\themes\butterfly\source\css\_tags\timeline.styl</code>。（总之不能共存）</li><li>修复了carousel标签刷新后不加载的bug。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-12-23:发布插件版v1.0.10</p></div></div><div class='timeline-item-content'><ol><li>将所有CDN链接迁移至<code>unpkg.zhimg.com</code></li><li>外露所有CDN配置项，支持读者自行更改CDN源</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-12-09:发布插件版v1.0.9</p></div></div><div class='timeline-item-content'><ol><li>调整<code>link</code>标签的默认图片缺省值适配，新增<code>tag_plugins.link.placeholder</code>配置项。</li><li>因为新增了默认图片，新增配置项，所以需要更新版本。如果本身使用link标签就有自己加图片的习惯的，无需升级。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-tag-plugins-plus@1.0.9 --save</span><br></pre></td></tr></table></figure></li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-12-07:发布插件版v1.0.5</p></div></div><div class='timeline-item-content'><ol><li>调整<code>folding</code>标签，解决与twikoo设置面板样式的冲突问题</li><li>因为调整了<code>folding</code>标签的编译函数，低版本会出现folding样式失效的情况，请各位更新至最新版本。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-tag-plugins-plus@1.0.5 --save</span><br></pre></td></tr></table></figure></li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-12-01:发布插件版v1.0.4</p></div></div><div class='timeline-item-content'><ol><li>调整<code>tip</code>标签，字体垂直居中</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-08-06:发布插件版v1.0.3</p></div></div><div class='timeline-item-content'><ol><li>新增<code>carousel</code>旋转相册</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-07-07:发布插件版v1.0.0</p></div></div><div class='timeline-item-content'><ol><li>使用npm插件安装。</li><li>测试版本为butterfly_v3.1.0、3.3.0、3.7.8、3.8.0</li><li>插件写法调整为高内聚，理论上不受butterfly主题版本影响。</li><li>为了获得完整效果，建议打开主题的beautify配置项和theme_color配置项。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-03-19:正式版v1.61</p></div></div><div class='timeline-item-content'><ol><li>修复行内图片换行错误。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021-02-24:正式版v1.6</p></div></div><div class='timeline-item-content'><ol><li>新增一个样式标签，进度条progress</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-12-31:正式版v1.5</p></div></div><div class='timeline-item-content'><ol><li>新增两个样式标签，github徽标ghbdage和特效标签wow</li><li>移除静态资源中的<code>fontawesome-animation.min.css</code>以及<code>issues.js</code>，改为CDN引用。</li><li>本帖不专门提供特效标签wow的配置方案，若有需要，请查看站内教程<a href="/posts/abab51cf/">使用wowjs给博客添加动画效果</a></li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-12-17:正式版v1.4</p></div></div><div class='timeline-item-content'><ol><li>新增两个样式标签poem和icon</li><li>修复了folding标签嵌套字体逐级放大的bug。</li><li>不再更新v3.4.0以下版本的适配内容。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-12-13:正式版v1.3</p></div></div><div class='timeline-item-content'><ol><li>新增Butterfly_v3.4.0的配置文件。</li><li>请读者根据自己的主题版本选择替换。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-12-07:正式版v1.21</p></div></div><div class='timeline-item-content'><ol><li>资源文件无任何改动。</li><li>更新了动态标签的使用说明。补全参数配置，更换示例。使得教程更加通俗易懂。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-12-03:正式版v1.2</p></div></div><div class='timeline-item-content'><ol><li>新增当初弃用的issues.js标签，以配合友链魔改教程中的issues自动更新功能。</li><li>更新了静态资源文件，请之前的读者重新覆盖安装。</li><li>修改了<code>fontawesome-animation.min.css</code>的引入方式，改成使用<code>@import</code>注入<code>index.css</code>。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-11-16:正式版v1.1</p></div></div><div class='timeline-item-content'><ol><li>新增tip.js，将小康大佬的渐变色上标标签写法从HTML的方式改成用标签语法编写。</li><li>新增动态标签样式anima，使用了fontawesome-animation项目。</li><li>新增标签内容夜间模式适配。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-11-15:正式版v1.0</p></div></div><div class='timeline-item-content'><ol><li>基本完成Volantis外挂标签移植。</li><li>移除了btn标签，因为存在冲突。而且不如butterfly自带的button样式好看。</li><li>适配了folding标签的夜间模式。</li><li>打包了静态资源文件，上传蓝奏云。</li></ol></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-11-14:内测版v0.05</p></div></div><div class='timeline-item-content'><ol><li>主要使用了<a href="https://github.com/volantis-x/hexo-theme-volantis">Volantis</a>的标签样式。引入<code>[tag].js</code>，并针对<code>butterfly</code>主题修改了相应的<code>[tag].styl</code>。在此鸣谢<code>Volantis</code>主题众开发者。</li><li>主要参考内容<ul><li><a href="https://volantis.js.org/tag-plugins/">Volantis文档:内置标签插件</a></li><li><a href="https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89">Butterfly 安装文档:标签外挂（Tag Plugins）</a></li><li><a href="https://lovelijunyi.gitee.io/posts/c898.html">小弋の生活馆全样式预览</a></li><li><a href="https://github.com/l-lin/font-awesome-animation">l-lin-font-awesome-animation</a></li><li><a href="https://www.antmoe.com/posts/3b43914f/">小康的butterfly主题使用文档</a></li></ul></li></ol></div></div></div> </div> </details><div class="tabs" id="配置方案"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#配置方案-1">npm插件安装方案（推荐）</button></li><li class="tab"><button type="button" data-href="#配置方案-2">源码修改配置方案</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="配置方案-1"><ol><li>安装插件,在博客根目录<code>[Blogroot]</code>下打开终端，运行以下指令：<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-tag-plugins-plus --save</span><br></pre></td></tr></table></figure>考虑到hexo自带的markdown渲染插件<code>hexo-renderer-marked</code>与外挂标签语法的兼容性较差，建议您将其替换成<a href="https://www.npmjs.com/package/hexo-renderer-kramed">hexo-renderer-kramed</a><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-renderer-marked --save</span><br><span class="line">npm install hexo-renderer-kramed --save</span><br></pre></td></tr></table></figure></li><li>添加配置信息，以下为写法示例<br>在站点配置文件<code>_config.yml</code>或者主题配置文件<code>_config.butterfly.yml</code>中添加<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tag-plugins-plus</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/615e2dec/</span></span><br><span class="line"><span class="attr">tag_plugins:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line"> <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line"> <span class="attr">issues:</span> <span class="literal">false</span> <span class="comment">#issues标签依赖注入开关</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="attr">placeholder:</span> <span class="string">/img/link.png</span> <span class="comment">#link_card标签默认的图标图片</span></span><br><span class="line"> <span class="attr">CDN:</span></span><br><span class="line"> <span class="attr">anima:</span> <span class="string">https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css</span> <span class="comment">#动画标签anima的依赖</span></span><br><span class="line"> <span class="attr">jquery:</span> <span class="string">https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js</span> <span class="comment">#issues标签依赖</span></span><br><span class="line"> <span class="attr">issues:</span> <span class="string">https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js</span> <span class="comment">#issues标签依赖</span></span><br><span class="line"> <span class="attr">iconfont:</span> <span class="string">//at.alicdn.com/t/font_2032782_8d5kxvn09md.js</span> <span class="comment">#参看https://akilar.top/posts/d2ebecef/</span></span><br><span class="line"> <span class="attr">carousel:</span> <span class="string">https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js</span></span><br><span class="line"> <span class="attr">tag_plugins_css:</span> <span class="string">https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css</span></span><br></pre></td></tr></table></figure></li><li>参数释义</li></ol><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">备选值/类型</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left">enable</td><td style="text-align:left">true/false</td><td style="text-align:left">【必选】控制开关</td></tr><tr><td style="text-align:left">priority</td><td style="text-align:left">number</td><td style="text-align:left">【可选】过滤器优先级，数值越小，执行越早，默认为10，选填</td></tr><tr><td style="text-align:left">issues</td><td style="text-align:left">true/false</td><td style="text-align:left">【可选】issues标签控制开关，默认为false</td></tr><tr><td style="text-align:left">link.placeholder</td><td style="text-align:left">【必选】link卡片外挂标签的默认图标</td></tr><tr><td style="text-align:left">CDN.anima</td><td style="text-align:left">URL</td><td style="text-align:left">【可选】动画标签anima的依赖</td></tr><tr><td style="text-align:left">CDN.jquery</td><td style="text-align:left">URL</td><td style="text-align:left">【可选】issues标签依赖</td></tr><tr><td style="text-align:left">CDN.issues</td><td style="text-align:left">URL</td><td style="text-align:left">【可选】issues标签依赖</td></tr><tr><td style="text-align:left">CDN.iconfont</td><td style="text-align:left">URL</td><td style="text-align:left">【可选】iconfont标签symbol样式引入，如果不想引入，则设为false</td></tr><tr><td style="text-align:left">CDN.carousel</td><td style="text-align:left">URL</td><td style="text-align:left">【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false</td></tr><tr><td style="text-align:left">CDN.tag_plugins_css</td><td style="text-align:left">URL</td><td style="text-align:left">【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号</td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="配置方案-2"><p><div class="tip info"><p>源码修改配置方案适用于不想应用全部外挂标签的用户，供熟悉外挂标签原理的用户自行选择装配需要的标签文件。</p></div></p><ol><li>下载资源文件<br><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/Akilarlxh/hexo-butterfly-tag-plugins-plus"><img src="https://github-readme-stats.vercel.app/api/pin/?username=Akilarlxh&repo=hexo-butterfly-tag-plugins-plus&theme=vue&show_owner=true"/></a></li><li>将下载的<code>hexo-butterfly-tag-plugins-plus.zip</code>解压得到资源文件夹,下文以<code>[tag_plugins_file]</code>指代该文件夹。</li><li>将<code>[tag_plugins_file]\lib\scripts</code>目录下的文件放到<code>[Blogroot]\themes\butterfly\scripts\tag\</code>文件夹内。</li><li>将<code>[tag_plugins_file]\lib\style</code>目录下的文件放到<code>[Blogroot]\themes\butterfly\source\css\tags\</code>文件夹内。</li><li>修改<code>[Blogroot]\_config.butterfly.yml</code>的<code>inject</code>配置项，添加<code>CDN</code>依赖项。由于<code>issues</code>写入<code>timeline</code>和<code>site-card</code>标签要用到<code>jquery</code>，请务必根据注释指示的版本决定是否添加。<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"</span> <span class="string">media="defer"</span> <span class="string">onload="this.media='all'"></span> <span class="comment">#动画标签anima的依赖</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">async</span> <span class="string">src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js"></script></span> <span class="comment">#carousel相册鼠标动作的依赖</span></span><br><span class="line"> <span class="attr">bottom:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">defer</span> <span class="string">src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script></span></span><br><span class="line"> <span class="comment"># 自butterfly_v3.4.0+开始，主题基本实现去jquery化，需要自己添加引用，请读者根据版本自行决定是否添加这行引用。</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">defer</span> <span class="string">src="https://npm.elemecdn.com/hexo-theme-volantis@latest/source/js/issues.min.js"></script></span></span><br><span class="line"> <span class="comment">#数据集合标签issues的依赖</span></span><br></pre></td></tr></table></figure></li><li>考虑到hexo自带的markdown渲染插件<code>hexo-renderer-marked</code>与外挂标签语法的兼容性较差，建议您将其替换成<a href="https://www.npmjs.com/package/hexo-renderer-kramed">hexo-renderer-kramed</a><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-renderer-marked --save</span><br><span class="line">npm install hexo-renderer-kramed --save</span><br></pre></td></tr></table></figure></li><li>外挂标签使用方案请参阅下文。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="行内文本样式-text"><a href="#行内文本样式-text" class="headerlink" title="行内文本样式 text"></a>行内文本样式 text</h2><div class="tabs" id="text"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#text-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#text-2">样式预览</button></li><li class="tab"><button type="button" data-href="#text-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="text-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% u 文本内容 %}</span><br><span class="line">{% emp 文本内容 %}</span><br><span class="line">{% wavy 文本内容 %}</span><br><span class="line">{% del 文本内容 %}</span><br><span class="line">{% kbd 文本内容 %}</span><br><span class="line">{% psw 文本内容 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="text-2"><ol><li>带 <u>下划线</u> 的文本</li><li>带 <emp>着重号</emp> 的文本</li><li>带 <wavy>波浪线</wavy> 的文本</li><li>带 <del>删除线</del> 的文本</li><li>键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd></li><li>密码样式的文本：<psw>这里没有验证码</psw></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="text-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 带 {% u 下划线 %} 的文本</span><br><span class="line"><span class="bullet">2.</span> 带 {% emp 着重号 %} 的文本</span><br><span class="line"><span class="bullet">3.</span> 带 {% wavy 波浪线 %} 的文本</span><br><span class="line"><span class="bullet">4.</span> 带 {% del 删除线 %} 的文本</span><br><span class="line"><span class="bullet">5.</span> 键盘样式的文本 {% kbd command %} + {% kbd D %}</span><br><span class="line"><span class="bullet">6.</span> 密码样式的文本：{% psw 这里没有验证码 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="行内文本-span"><a href="#行内文本-span" class="headerlink" title="行内文本 span"></a>行内文本 span</h2><div class="tabs" id="span"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#span-1">标签语法</button></li><li class="tab"><button type="button" data-href="#span-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#span-3">样式预览</button></li><li class="tab"><button type="button" data-href="#span-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="span-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% span 样式参数(参数以空格划分), 文本内容 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="span-2"><ol><li>字体: logo, code</li><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="span-3"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<span class='p red'>红色</span>、<span class='p yellow'>黄色</span>、<span class='p green'>绿色</span>、<span class='p cyan'>青色</span>、<span class='p blue'>蓝色</span>、<span class='p gray'>灰色</span>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<br><span class='p center logo large'>Volantis</span><br><span class='p center small'>A Wonderful Theme for Hexo</span></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="span-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">{% span center logo large, Volantis %}</span><br><span class="line">{% span center small, A Wonderful Theme for Hexo %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="段落文本-p"><a href="#段落文本-p" class="headerlink" title="段落文本 p"></a>段落文本 p</h2><div class="tabs" id="p"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#p-1">标签语法</button></li><li class="tab"><button type="button" data-href="#p-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#p-3">样式预览</button></li><li class="tab"><button type="button" data-href="#p-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="p-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% p 样式参数(参数以空格划分), 文本内容 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="p-2"><ol><li>字体: logo, code</li><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="p-3"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<p class='p red'>红色</p>、<p class='p yellow'>黄色</p>、<p class='p green'>绿色</p>、<p class='p cyan'>青色</p>、<p class='p blue'>蓝色</p>、<p class='p gray'>灰色</p>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<p class='p center logo large'>Volantis</p><p class='p center small'>A Wonderful Theme for Hexo</p></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="p-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">{% p center logo large, Volantis %}</span><br><span class="line">{% p center small, A Wonderful Theme for Hexo %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="引用-note"><a href="#引用-note" class="headerlink" title="引用 note"></a>引用 note</h2><div class="note warning flat"><p>最新版<code>butterfly</code>标签支持引用<code>fontawesome V5</code>图标，效果上已经优于<code>volantis</code>的note标签。故不再额外引入<code>volantis的note样式</code>。<del>做样式适配好麻烦的啊，能偷懒就偷懒吧</del></p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>以下是<code>butterfly</code>主题的note写法。</p></div><div class="tabs" id="note"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#note-1">通用配置</button></li><li class="tab"><button type="button" data-href="#note-2">语法格式</button></li><li class="tab"><button type="button" data-href="#note-3">配置参数</button></li><li class="tab active"><button type="button" data-href="#note-4">样式预览</button></li><li class="tab"><button type="button" data-href="#note-5">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="note-1"><p>修改主题配置文件<br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line"> <span class="comment"># Note tag style values:</span></span><br><span class="line"> <span class="comment"># - simple bs-callout old alert style. Default.</span></span><br><span class="line"> <span class="comment"># - modern bs-callout new (v2-v3) alert style.</span></span><br><span class="line"> <span class="comment"># - flat flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line"> <span class="comment"># - disabled disable all CSS styles import of note tag.</span></span><br><span class="line"> <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line"> <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line"> <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line"> <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line"> <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><br><code>Note</code>标签外挂有两种用法。<code>icons</code>和<code>light_bg_offset</code>只对方法一生效。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="note-2"><details class="folding-tag" cyan><summary> 方法一 </summary> <div class='content'> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% note [class] [no-icon] [style] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure> </div> </details><details class="folding-tag" blue><summary> 方法二 </summary> <div class='content'> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% note [color] [icon] [style] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="note-3"><details class="folding-tag" cyan><summary> 方法一 </summary> <div class='content'> <div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">用法</th></tr></thead><tbody><tr><td style="text-align:left">class</td><td style="text-align:left">【可选】标识，不同的标识有不同的配色<br>（ default / primary / success / info / warning / danger ）</td></tr><tr><td style="text-align:left">no-icon</td><td style="text-align:left">【可选】不显示 icon</td></tr><tr><td style="text-align:left">style</td><td style="text-align:left">【可选】可以覆盖配置中的 style<br>（simple/modern/flat/disabled）</td></tr></tbody></table></div> </div> </details><details class="folding-tag" blue><summary> 方法二 </summary> <div class='content'> <div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">用法</th></tr></thead><tbody><tr><td style="text-align:left">class</td><td style="text-align:left">【可选】标识，不同的标识有不同的配色<br>（ default / blue / pink / red / purple / orange / green ）</td></tr><tr><td style="text-align:left">no-icon</td><td style="text-align:left">【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )</td></tr><tr><td style="text-align:left">style</td><td style="text-align:left">【可选】可以覆盖配置中的 style<br>（simple/modern/flat/disabled）</td></tr></tbody></table></div> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="note-4"><details class="folding-tag" cyan><summary> 方法一 </summary> <div class='content'> <ol><li><p><code>simple</code>样式</p><div class="note simple"><p>默认 提示块标签</p></div><div class="note default simple"><p>default 提示块标签</p></div><div class="note primary simple"><p>primary 提示块标签</p></div><div class="note success simple"><p>success 提示块标签</p></div><div class="note info simple"><p>info 提示块标签</p></div><div class="note warning simple"><p>warning 提示块标签</p></div><div class="note danger simple"><p>danger 提示块标签</p></div></li><li><p><code>modern</code>样式</p><div class="note modern"><p>默认 提示块标签</p></div><div class="note default modern"><p>default 提示块标签</p></div><div class="note primary modern"><p>primary 提示块标签</p></div><div class="note success modern"><p>success 提示块标签</p></div><div class="note info modern"><p>info 提示块标签</p></div><div class="note warning modern"><p>warning 提示块标签</p></div><div class="note danger modern"><p>danger 提示块标签</p></div></li><li><p><code>flat</code>样式</p><div class="note flat"><p>默认 提示块标签</p></div><div class="note default flat"><p>default 提示块标签</p></div><div class="note primary flat"><p>primary 提示块标签</p></div><div class="note success flat"><p>success 提示块标签</p></div><div class="note info flat"><p>info 提示块标签</p></div><div class="note warning flat"><p>warning 提示块标签</p></div><div class="note danger flat"><p>danger 提示块标签</p></div></li><li><p><code>disabled</code>样式</p><div class="note disabled"><p>默认 提示块标签</p></div><div class="note default disabled"><p>default 提示块标签</p></div><div class="note primary disabled"><p>primary 提示块标签</p></div><div class="note success disabled"><p>success 提示块标签</p></div><div class="note info disabled"><p>info 提示块标签</p></div><div class="note warning disabled"><p>warning 提示块标签</p></div><div class="note danger disabled"><p>danger 提示块标签</p></div></li><li><p><code>no-icon</code>样式</p><div class="note no-icon flat"><p>默认 提示块标签</p></div><div class="note default no-icon flat"><p>default 提示块标签</p></div><div class="note primary no-icon flat"><p>primary 提示块标签</p></div><div class="note success no-icon flat"><p>success 提示块标签</p></div><div class="note info no-icon flat"><p>info 提示块标签</p></div><div class="note warning no-icon flat"><p>warning 提示块标签</p></div><div class="note danger no-icon flat"><p>danger 提示块标签</p></div></li></ol> </div> </details><details class="folding-tag" blue><summary> 方法二 </summary> <div class='content'> <ol><li><p>simple样式</p><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding simple"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div></li><li><p>modern样式</p><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding modern"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div></li><li><p>flat样式</p><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding flat"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div></li></ol><ol><li><p>disabled样式</p><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-padding disabled"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div></li><li><p>no-icon样式</p><div class="note no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue no-icon flat"><p>2021年快到了….</p></div><div class="note pink no-icon flat"><p>小心开车 安全至上</p></div><div class="note red no-icon flat"><p>这是三片呢？还是四片？</p></div><div class="note orange no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple no-icon flat"><p>剪刀石头布</p></div><div class="note green no-icon flat"><p>前端最讨厌的浏览器</p></div></li></ol> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="note-5"><details class="folding-tag" cyan><summary> 方法一 </summary> <div class='content'> <ol><li><p><code>simple</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note simple %}默认 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default simple %}default 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary simple %}primary 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success simple %}success 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info simple %}info 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning simple %}warning 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger simple %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>modern</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note modern %}默认 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default modern %}default 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary modern %}primary 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success modern %}success 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info modern %}info 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning modern %}warning 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger modern %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>flat</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note flat %}默认 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default flat %}default 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary flat %}primary 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success flat %}success 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info flat %}info 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning flat %}warning 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger flat %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>disabled</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note disabled %}默认 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default disabled %}default 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary disabled %}primary 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success disabled %}success 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info disabled %}info 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning disabled %}warning 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger disabled %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>no-icon</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note no-icon %}默认 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default no-icon %}default 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary no-icon %}primary 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success no-icon %}success 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info no-icon %}info 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning no-icon %}warning 提示块标签{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger no-icon %}danger 提示块标签{% endnote %}</span><br></pre></td></tr></table></figure></li></ol> </div> </details><details class="folding-tag" blue><summary> 方法二 </summary> <div class='content'> <ol><li><p><code>simple</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' simple%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>modern</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' modern%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>flat</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' flat%}这是三片呢？还是四片？{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>disabled</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' disabled %}这是三片呢？还是四片？{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li><li><p><code>no-icon</code>样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">{% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue no-icon %}2021年快到了....{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink no-icon %}小心开车 安全至上{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red no-icon %}这是三片呢？还是四片？{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple no-icon %}剪刀石头布{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green no-icon %}前端最讨厌的浏览器{% endnote %}</span><br></pre></td></tr></table></figure></li></ol> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="上标标签-tip"><a href="#上标标签-tip" class="headerlink" title="上标标签 tip"></a>上标标签 tip</h2><div class="tip cogs"><p>主要样式参考自<a href="https://www.antmoe.com/posts/3b43914f/">小康的butterfly渐变背景标签</a>,自己写了个<code>tip.js</code>来渲染标签，精简了一下代码。</p></div><div class="tabs" id="tip"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#tip-1">标签语法</button></li><li class="tab"><button type="button" data-href="#tip-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#tip-3">样式预览</button></li><li class="tab"><button type="button" data-href="#tip-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="tip-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% tip [参数，可选] %}文本内容{% endtip %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tip-2"><ol><li>样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li>自定义图标: 支持fontawesome。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="tip-3"><div class="tip "><p>default</p></div><div class="tip info"><p>info</p></div><div class="tip success"><p>success</p></div><div class="tip error"><p>error</p></div><div class="tip warning"><p>warning</p></div><div class="tip bolt"><p>bolt</p></div><div class="tip ban"><p>ban</p></div><div class="tip home"><p>home</p></div><div class="tip sync"><p>sync</p></div><div class="tip cogs"><p>cogs</p></div><div class="tip key"><p>key</p></div><div class="tip bell"><p>bell</p></div><div class="tip fa-atom"><p>自定义font awesome图标</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tip-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% tip %}default{% endtip %}</span><br><span class="line">{% tip info %}info{% endtip %}</span><br><span class="line">{% tip success %}success{% endtip %}</span><br><span class="line">{% tip error %}error{% endtip %}</span><br><span class="line">{% tip warning %}warning{% endtip %}</span><br><span class="line">{% tip bolt %}bolt{% endtip %}</span><br><span class="line">{% tip ban %}ban{% endtip %}</span><br><span class="line">{% tip home %}home{% endtip %}</span><br><span class="line">{% tip sync %}sync{% endtip %}</span><br><span class="line">{% tip cogs %}cogs{% endtip %}</span><br><span class="line">{% tip key %}key{% endtip %}</span><br><span class="line">{% tip bell %}bell{% endtip %}</span><br><span class="line">{% tip fa-atom %}自定义font awesome图标{% endtip %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="动态标签-anima"><a href="#动态标签-anima" class="headerlink" title="动态标签 anima"></a>动态标签 anima</h2><div class="tip fa-gamepad faa-horizontal animated"><p>动态标签的实质是引用了<a href="https://github.com/l-lin/font-awesome-animation">font-awesome-animation</a>的css样式，不一定局限于tip标签，也可以是其他标签。<br>只不过这里<code>tip.js</code>是我自己写的，所以我清楚它会怎么被渲染成html，才用的这个写法。<br>可以熟读文档，使用html语言来编写其他标签类型。</p></div><div class="tabs" id="tip"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#tip-1">标签语法</button></li><li class="tab"><button type="button" data-href="#tip-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#tip-3">样式预览</button></li><li class="tab"><button type="button" data-href="#tip-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="tip-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% tip [参数，可选] %}文本内容{% endtip %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tip-2"><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>更多详情请参看<a href="http://l-lin.github.io/font-awesome-animation/">font-awesome-animation文档</a></p><ol><li>将所需的CSS类添加到图标（或DOM中的任何元素）。</li><li>对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类<code>faa-parent animated-hover</code>。（详情见示例及示例源码）<br>You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow</li><li>可以通过给目标元素添加CSS类<code>faa-fast</code>或<code>faa-slow</code>来控制动画快慢。</li></ol></div><div class="table-container"><table><thead><tr><th style="text-align:left">On DOM load<br>当页面加载时<br>显示动画</th><th style="text-align:left">On hover<br>当鼠标悬停时<br>显示动画</th><th style="text-align:left">On parent hover<br>当鼠标悬停<br>在父级元素时<br>显示动画</th></tr></thead><tbody><tr><td style="text-align:left"><span><i class="fas fa-wrench faa-wrench animated"></i> faa-wrench animated</span></td><td style="text-align:left"><span><i class="fas fa-wrench faa-wrench animated-hover"></i> faa-wrench animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-wrench faa-wrench"></i> faa-wrench</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-bell faa-ring animated"></i> faa-ring animated</span></td><td style="text-align:left"><span><i class="fas fa-bell faa-ring animated-hover"></i> faa-ring animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-bell faa-ring"></i> faa-ring</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-envelope faa-horizontal animated"></i> faa-horizontal animated</span></td><td style="text-align:left"><span><i class="fas fa-envelope faa-horizontal animated-hover"></i> faa-horizontal animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-envelope faa-horizontal"></i> faa-horizontal</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-thumbs-up faa-vertical animated"></i> faa-vertical animated</span></td><td style="text-align:left"><span><i class="fas fa-thumbs-up faa-vertical animated-hover"></i> faa-vertical animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-thumbs-up faa-vertical"></i> faa-vertical</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-exclamation-triangle faa-flash animated"></i> faa-flash animated</span></td><td style="text-align:left"><span><i class="fas fa-exclamation-triangle faa-flash animated-hover"></i> faa-flash animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-exclamation-triangle faa-flash"></i> faa-flash</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-thumbs-up faa-bounce animated"></i> faa-bounce animated</span></td><td style="text-align:left"><span><i class="fas fa-thumbs-up faa-bounce animated-hover"></i> faa-bounce animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-thumbs-up faa-bounce"></i> faa-bounce</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-spinner faa-spin animated"></i> faa-spin animated</span></td><td style="text-align:left"><span><i class="fas fa-spinner faa-spin animated-hover"></i> faa-spin animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-spinner faa-spin"></i> faa-spin</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-plane faa-tada animated"></i> faa-tada animated</span></td><td style="text-align:left"><span><i class="fas fa-plane faa-tada animated-hover"></i> faa-tada animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-plane faa-tada"></i> faa-tada</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-heart faa-pulse animated"></i> faa-pulse animated</span></td><td style="text-align:left"><span><i class="fas fa-heart faa-pulse animated-hover"></i> faa-pulse animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-heart faa-pulse"></i> faa-pulse</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-envelope faa-shake animated"></i> faa-shake animated</span></td><td style="text-align:left"><span><i class="fas fa-envelope faa-shake animated-hover"></i> faa-shake animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-envelope faa-shake"></i> faa-shake</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-trophy faa-tada animated"></i> faa-tada animated</span></td><td style="text-align:left"><span><i class="fas fa-trophy faa-tada animated-hover"></i> faa-tada animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-trophy faa-tada"></i> faa-tada</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-space-shuttle faa-passing animated"></i> faa-passing animated</span></td><td style="text-align:left"><span><i class="fas fa-space-shuttle faa-passing animated-hover"></i> faa-passing animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-space-shuttle faa-passing"></i> faa-passing</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-space-shuttle faa-passing-reverse animated"></i> faa-passing-reverse animated</span></td><td style="text-align:left"><span><i class="fas fa-space-shuttle faa-passing-reverse animated-hover"></i> faa-passing-reverse animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-space-shuttle faa-passing-reverse"></i> faa-passing-reverse</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-circle faa-burst animated"></i> faa-burst animated</span></td><td style="text-align:left"><span><i class="fas fa-circle faa-burst animated-hover"></i> faa-burst animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-circle faa-burst"></i> faa-burst</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-star faa-falling animated"></i> faa-falling animated</span></td><td style="text-align:left"><span><i class="fas fa-star faa-falling animated-hover"></i> faa-falling animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-star faa-falling"></i> faa-falling</span></td></tr><tr><td style="text-align:left"><span><i class="fas fa-rocket faa-rising animated"></i> faa-rising animated</span></td><td style="text-align:left"><span><i class="fas fa-rocket faa-rising animated-hover"></i> faa-rising animated-hover</span></td><td style="text-align:left"><span class="faa-parent animated-hover"><i class="fas fa-rocket faa-rising"></i> faa-rising</span></td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="tip-3"><ol><li><p>On DOM load（当页面加载时显示动画）</p><div class="tip warning faa-horizontal animated"><p>warning</p></div><div class="tip ban faa-flash animated"><p>ban</p></div></li><li><p>调整动画速度。</p><div class="tip warning faa-horizontal animated faa-fast"><p>warning</p></div><div class="tip ban faa-flash animated faa-slow"><p>ban</p></div></li><li><p>On hover（当鼠标悬停时显示动画）</p><div class="tip warning faa-horizontal animated-hover"><p>warning</p></div><div class="tip ban faa-flash animated-hover"><p>ban</p></div></li><li><p>On parent hover（当鼠标悬停在父级元素时显示动画）</p><div class="tip warning faa-parent animated-hover"><p class="faa-horizontal">warning</p></div><div class="tip ban faa-parent animated-hover"><p class="faa-flash">ban</p></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tip-4"><ol><li><p>On DOM load（当页面加载时显示动画）</p><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">{% tip warning faa-horizontal animated %}warning{% endtip %}</span><br><span class="line">{% tip ban faa-flash animated %}ban{% endtip %}</span><br></pre></td></tr></table></figure></li><li><p>调整动画速度</p><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">{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}</span><br><span class="line">{% tip ban faa-flash animated faa-slow %}ban{% endtip %}</span><br></pre></td></tr></table></figure></li><li><p>On hover（当鼠标悬停时显示动画）</p><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">{% tip warning faa-horizontal animated-hover %}warning{% endtip %}</span><br><span class="line">{% tip ban faa-flash animated-hover %}ban{% endtip %}</span><br></pre></td></tr></table></figure></li><li><p>On parent hover（当鼠标悬停在父级元素时显示动画）</p><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">{% tip warning faa-parent animated-hover %}<span class="language-xml"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"faa-horizontal"</span>></span></span>warning<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span>{% endtip %}</span><br><span class="line">{% tip ban faa-parent animated-hover %}<span class="language-xml"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"faa-flash"</span>></span></span>ban<span class="language-xml"><span class="tag"></<span class="name">p</span>></span></span>{% endtip %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="复选列表-checkbox"><a href="#复选列表-checkbox" class="headerlink" title="复选列表 checkbox"></a>复选列表 checkbox</h2><div class="tabs" id="checkbox"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#checkbox-1">标签语法</button></li><li class="tab"><button type="button" data-href="#checkbox-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#checkbox-3">样式预览</button></li><li class="tab"><button type="button" data-href="#checkbox-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="checkbox-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% checkbox 样式参数（可选）, 文本（支持简单md） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="checkbox-2"><ol><li>样式: plus, minus, times</li><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>选中状态: checked</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="checkbox-3"><div class='checkbox'><input type="checkbox" /> <p>纯文本测试</p> </div><div class='checkbox checked'><input type="checkbox" checked="checked"/> <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p> </div><div class='checkbox red'><input type="checkbox" /> <p>支持自定义颜色</p> </div><div class='checkbox green checked'><input type="checkbox" checked="checked"/> <p>绿色 + 默认选中</p> </div><div class='checkbox yellow checked'><input type="checkbox" checked="checked"/> <p>黄色 + 默认选中</p> </div><div class='checkbox cyan checked'><input type="checkbox" checked="checked"/> <p>青色 + 默认选中</p> </div><div class='checkbox blue checked'><input type="checkbox" checked="checked"/> <p>蓝色 + 默认选中</p> </div><div class='checkbox plus green checked'><input type="checkbox" checked="checked"/> <p>增加</p> </div><div class='checkbox minus yellow checked'><input type="checkbox" checked="checked"/> <p>减少</p> </div><div class='checkbox times red checked'><input type="checkbox" checked="checked"/> <p>叉</p> </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="checkbox-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">{% checkbox 纯文本测试 %}</span><br><span class="line">{% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %}</span><br><span class="line">{% checkbox red, 支持自定义颜色 %}</span><br><span class="line">{% checkbox green checked, 绿色 + 默认选中 %}</span><br><span class="line">{% checkbox yellow checked, 黄色 + 默认选中 %}</span><br><span class="line">{% checkbox cyan checked, 青色 + 默认选中 %}</span><br><span class="line">{% checkbox blue checked, 蓝色 + 默认选中 %}</span><br><span class="line">{% checkbox plus green checked, 增加 %}</span><br><span class="line">{% checkbox minus yellow checked, 减少 %}</span><br><span class="line">{% checkbox times red checked, 叉 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="单选列表-radio"><a href="#单选列表-radio" class="headerlink" title="单选列表 radio"></a>单选列表 radio</h2><div class="tabs" id="radio"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#radio-1">标签语法</button></li><li class="tab"><button type="button" data-href="#radio-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#radio-3">样式预览</button></li><li class="tab"><button type="button" data-href="#radio-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="radio-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% radio 样式参数（可选）, 文本（支持简单md） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="radio-2"><ol><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>选中状态: checked</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="radio-3"><div class='checkbox'><input type="radio" /> <p>纯文本测试</p> </div><div class='checkbox checked'><input type="radio" checked="checked"/> <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p> </div><div class='checkbox red'><input type="radio" /> <p>支持自定义颜色</p> </div><div class='checkbox green'><input type="radio" /> <p>绿色</p> </div><div class='checkbox yellow'><input type="radio" /> <p>黄色</p> </div><div class='checkbox cyan'><input type="radio" /> <p>青色</p> </div><div class='checkbox blue'><input type="radio" /> <p>蓝色</p> </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="radio-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% radio 纯文本测试 %}</span><br><span class="line">{% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %}</span><br><span class="line">{% radio red, 支持自定义颜色 %}</span><br><span class="line">{% radio green, 绿色 %}</span><br><span class="line">{% radio yellow, 黄色 %}</span><br><span class="line">{% radio cyan, 青色 %}</span><br><span class="line">{% radio blue, 蓝色 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="时间轴-timeline"><a href="#时间轴-timeline" class="headerlink" title="时间轴 timeline"></a>时间轴 timeline</h2><div class="tip fa-wrench"><p>插件版v1.0.16以后，为避免与Butterfly_v4.0+版本中的timeline外挂标签冲突，已经移除了插件内的timeline外挂标签，请低于Butterfly_v4.0的用户升级主题或安装1.0.15版本的外挂标签插件，或者自行添加timeline.js和timeline.styl文件至对应文件夹。请使用了原有timeline外挂标签的用户受累替换语法格式。<br>Butterfly_v4.0+自带的timeline外挂标签样式更加好看。语法语意也更加清晰。</p></div><div class="tabs" id="timeline"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#timeline-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#timeline-2">参数配置</button></li><li class="tab"><button type="button" data-href="#timeline-3">样式预览</button></li><li class="tab"><button type="button" data-href="#timeline-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="timeline-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% timeline 时间线标题（可选）[,color] %}</span><br><span class="line"><!-- timeline 时间节点（标题） --></span><br><span class="line">正文内容</span><br><span class="line"><!-- endtimeline --></span><br><span class="line"><!-- timeline 时间节点（标题） --></span><br><span class="line">正文内容</span><br><span class="line"><!-- endtimeline --></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="timeline-2"><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">解释</th></tr></thead><tbody><tr><td style="text-align:left">title</td><td style="text-align:left">标题/时间线</td></tr><tr><td style="text-align:left">color</td><td style="text-align:left"><code>timeline</code>颜色:default(留空) / blue / pink / red / purple / orange / green</td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="timeline-3"><div class="timeline blue"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>时间轴样式</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-05-15 <a href="https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6">2.6.3 -> 2.6.6</a></p></div></div><div class='timeline-item-content'><p>不需要额外处理。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020-04-20 <a href="https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3">2.6.2 -> 2.6.3</a></p></div></div><div class='timeline-item-content'><ol><li>全局搜索 <code>seotitle</code> 并替换为 <code>seo_title</code>。</li><li>group 组件的索引规则有变，使用 group 组件的文章内，<code>group: group_name</code> 对应的组件名必须是 <code>group_name</code>。</li><li>group 组件的列表名优先显示文章的 <code>short_title</code> 其次是 <code>title</code>。</li></ol></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="timeline-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">{% timeline 时间轴样式,blue %}</span><br><span class="line"></span><br><span class="line"><!-- timeline 2020-07-24 [<span class="string">2.6.6 -> 3.0</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases</span>) --></span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 如果有 <span class="code">`hexo-lazyload-image`</span> 插件，需要删除并重新安装最新版本，设置 <span class="code">`lazyload.isSPA: true`</span>。</span><br><span class="line"><span class="bullet">2.</span> 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 <span class="code">`use_cdn: true`</span> 则需要删除。</span><br><span class="line"><span class="bullet">3.</span> 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。</span><br><span class="line"><span class="bullet">4.</span> 2.x 版本的置顶 <span class="code">`top: true`</span> 改为了 <span class="code">`pin: true`</span>，并且同样适用于 <span class="code">`layout: page`</span> 的页面。</span><br><span class="line"><span class="bullet">5.</span> 如果使用了 <span class="code">`hexo-offline`</span> 插件，建议卸载，3.0 版本默认开启了 pjax 服务。</span><br><span class="line"></span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line"><!-- timeline 2020-05-15 [<span class="string">2.6.3 -> 2.6.6</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6</span>) --></span><br><span class="line"></span><br><span class="line">不需要额外处理。</span><br><span class="line"></span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line"><!-- timeline 2020-04-20 [<span class="string">2.6.2 -> 2.6.3</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3</span>) --></span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 全局搜索 <span class="code">`seotitle`</span> 并替换为 <span class="code">`seo_title`</span>。</span><br><span class="line"><span class="bullet">2.</span> group 组件的索引规则有变，使用 group 组件的文章内，<span class="code">`group: group_name`</span> 对应的组件名必须是 <span class="code">`group_name`</span>。</span><br><span class="line"><span class="bullet">2.</span> group 组件的列表名优先显示文章的 <span class="code">`short_title`</span> 其次是 <span class="code">`title`</span>。</span><br><span class="line"></span><br><span class="line"><!-- endtimeline --></span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="链接卡片-link"><a href="#链接卡片-link" class="headerlink" title="链接卡片 link"></a>链接卡片 link</h2><div class="tabs" id="link"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#link-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#link-2">样式预览</button></li><li class="tab"><button type="button" data-href="#link-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="link-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% link 标题, 链接, 图片链接（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="link-2"><div class="tag link"><a class="link-card" title="糖果屋教程贴" href="https://akilar.top/posts/615e2dec/"><div class="left"><img src="https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.ico"/></div><div class="right"><p class="text">糖果屋教程贴</p><p class="url">https://akilar.top/posts/615e2dec/</p></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="link-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.ico %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="按钮-btns"><a href="#按钮-btns" class="headerlink" title="按钮 btns"></a>按钮 btns</h2><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p><code>Volantis</code>的按钮使用的是<code>btn</code>和<code>btns</code>标签。<code>btns</code>和<code>butterfly</code>的<code>button</code>不冲突，但是<code>btn</code>会被强制渲染，导致部分参数失效,而且<code>btn</code>的效果还是<code>butterfly</code>的<code>button</code>更好看些。所以就只适配了<code>btns</code>。</p></div><div class="tabs" id="btn"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#btn-1">标签语法</button></li><li class="tab"><button type="button" data-href="#btn-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#btn-3">样式预览</button></li><li class="tab"><button type="button" data-href="#btn-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></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><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="btn-2"><ol><li>圆角样式：rounded, circle</li><li>增加文字样式：可以在容器内增加 <code><b>标题</b></code>和<code><p>描述文字</p></code></li><li>布局方式：<br>默认为自动宽度，适合视野内只有一两个的情况。</li></ol><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">含义</th></tr></thead><tbody><tr><td style="text-align:left">wide</td><td style="text-align:left">宽一点的按钮</td></tr><tr><td style="text-align:left">fill</td><td style="text-align:left">填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td style="text-align:left">center</td><td style="text-align:left">居中，按钮之间是固定间距</td></tr><tr><td style="text-align:left">around</td><td style="text-align:left">居中分散</td></tr><tr><td style="text-align:left">grid2</td><td style="text-align:left">等宽最多2列，屏幕变窄会适当减少列数</td></tr><tr><td style="text-align:left">grid3</td><td style="text-align:left">等宽最多3列，屏幕变窄会适当减少列数</td></tr><tr><td style="text-align:left">grid4</td><td style="text-align:left">等宽最多4列，屏幕变窄会适当减少列数</td></tr><tr><td style="text-align:left">grid5</td><td style="text-align:left">等宽最多5列，屏幕变窄会适当减少列数</td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="btn-3"><ol><li><p>如果需要显示类似「团队成员」之类的一组含有头像的链接：</p><div class="btns circle grid5"> <a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a> </div></li><li><p>或者含有图标的按钮：</p><div class="btns rounded grid5"> <a class="button" href='/' title='下载源码'><i class='fas fa-download'></i>下载源码</a><a class="button" href='/' title='查看文档'><i class='fas fa-book-open'></i>查看文档</a> </div></li><li><p>圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中</p><div class="btns circle center grid5"> <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'><i class='fab 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='fab 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></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="btn-4"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle grid5 %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></li><li>或者含有图标的按钮：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% btns rounded grid5 %}</span><br><span class="line">{% cell 下载源码, /, fas fa-download %}</span><br><span class="line">{% cell 查看文档, /, fas fa-book-open %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></li><li>圆形图标 + 标题 + 描述 + 图片 + 网格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></pre></td><td class="code"><pre><span class="line">{% btns circle center grid5 %}</span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">'https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'</span>></span></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">'fab 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">'fab 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></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="github卡片-ghcard"><a href="#github卡片-ghcard" class="headerlink" title="github卡片 ghcard"></a>github卡片 ghcard</h2><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>ghcard使用了<code>github-readme-stats</code>的API，支持直接使用markdown语法来写。</p></div><div class="tabs" id="ghcard"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#ghcard-1">标签语法</button></li><li class="tab"><button type="button" data-href="#ghcard-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#ghcard-3">样式预览</button></li><li class="tab"><button type="button" data-href="#ghcard-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="ghcard-1"><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">{% ghcard 用户名, 其它参数（可选） %}</span><br><span class="line">{% ghcard 用户名/仓库, 其它参数（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="ghcard-2"><p>更多参数可以参考：<br><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/anuraghazra/github-readme-stats"><img src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true"/></a><br>使用<code>,</code>分割各个参数。写法为：<code>参数名=参数值</code><br>以下只写几个常用参数值。</p><div class="table-container"><table><thead><tr><th style="text-align:left">参数名</th><th style="text-align:left">取值</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left">hide</td><td style="text-align:left">stars,commits,prs,issues,contribs</td><td style="text-align:left">隐藏指定统计</td></tr><tr><td style="text-align:left">count_private</td><td style="text-align:left">true</td><td style="text-align:left">将私人项目贡献添加到总提交计数中</td></tr><tr><td style="text-align:left">show_icons</td><td style="text-align:left">true</td><td style="text-align:left">显示图标</td></tr><tr><td style="text-align:left">theme</td><td style="text-align:left">请查阅<a href="https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md">Available Themes</a></td><td style="text-align:left">主题</td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="ghcard-3"><ol><li>用户信息卡片</li></ol><div class="table-container"><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&show_owner=true"/></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=vue&show_owner=true"/></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=buefy&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=solarized-light&show_owner=true"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=onedark&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=solarized-dark&show_owner=true"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=algolia&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/xaoxuu"><img src="https://github-readme-stats.vercel.app/api/?username=xaoxuu&theme=calm&show_owner=true"/></a></td></tr></tbody></table></div><ol><li>仓库信息卡片</li></ol><div class="table-container"><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&show_owner=true"/></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=vue&show_owner=true"/></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=buefy&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=solarized-light&show_owner=true"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=onedark&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=solarized-dark&show_owner=true"/></a></td></tr><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=algolia&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/volantis-x/hexo-theme-volantis"><img src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&theme=calm&show_owner=true"/></a></td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="ghcard-4"><ol><li><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></pre></td><td class="code"><pre><span class="line">| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |</span><br><span class="line">| -- | -- |</span><br><span class="line">| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |</span><br><span class="line">| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |</span><br><span class="line">| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |</span><br></pre></td></tr></table></figure></li><li><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></pre></td><td class="code"><pre><span class="line">| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |</span><br><span class="line">| -- | -- |</span><br><span class="line">| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |</span><br><span class="line">| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |</span><br><span class="line">| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="github徽标-ghbdage"><a href="#github徽标-ghbdage" class="headerlink" title="github徽标 ghbdage"></a>github徽标 ghbdage</h2><div class="tip cogs"><p>关于ghbdage参数的更多具体用法可以参看站内教程：<a href="/posts/e87ad7f8">添加github徽标</a></p></div><div class="tabs" id="ghbdage"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#ghbdage-1">标签语法</button></li><li class="tab"><button type="button" data-href="#ghbdage-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#ghbdage-3">样式预览</button></li><li class="tab"><button type="button" data-href="#ghbdage-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="ghbdage-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="ghbdage-2"><ol><li><code>left</code>：徽标左边的信息，必选参数。</li><li><code>right</code>: 徽标右边的信息，必选参数，</li><li><code>logo</code>：徽标图标，图标名称详见<a href="https://simpleicons.org/">simpleicons</a>，可选参数。</li><li><code>color</code>：徽标右边的颜色，可选参数。</li><li><code>link</code>：指向的链接，可选参数。</li><li><code>title</code>：徽标的额外信息，可选参数。主要用于优化SEO，但<code>object</code>标签不会像<code>a</code>标签一样在鼠标悬停显示<code>title</code>信息。</li><li><code>option</code>：自定义参数，支持<a href="https://shields.io/">shields.io</a>的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为<code>name1=value2&name2=value2</code>。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="ghbdage-3"><p><div class="note info modern"><p>本外挂标签的参数分为三组，用<code>||</code>分割。</p></div></p><ol><li>基本参数<br><br><object class="ghbdage" style="margin-inline:5px" title="" standby="loading..." data="https://img.shields.io/badge/Butterfly-Theme-orange?logo=&color=orange&link=&"></object><object class="ghbdage" style="margin-inline:5px" title="" standby="loading..." data="https://img.shields.io/badge/Hexo-Frame-orange?logo=hexo&color=orange&link=&"></object></li><li>信息参数<br><br><object class="ghbdage" style="margin-inline:5px" title="本站使用JsDelivr为静态资源提供CDN加速" standby="loading..." data="https://img.shields.io/badge/JsDelivr-CDN-orange?logo=jsDelivr&color=abcdef&link=https://metroui.org.ua/index.html&"></object><object class="ghbdage" style="margin-inline:5px" title="" standby="loading..." data="https://img.shields.io/badge/GitHub-Source-orange?logo=GitHub&color=orange&link=https://github.com/&"></object></li><li>拓展参数<br><br><object class="ghbdage" style="margin-inline:5px" title="本站采用双线部署，默认线路托管于Vercel" standby="loading..." data="https://img.shields.io/badge/Vercel-Hosted-orange?logo=Vercel&color=brightgreen&link=https://vercel.com/&style=social&logoWidth=40"></object><object class="ghbdage" style="margin-inline:5px" title="" standby="loading..." data="https://img.shields.io/badge/Vercel-Hosted-orange?logo=Vercel&color=orange&link=&style=social&logoWidth=40&logoColor=violet"></object></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="ghbdage-4"><p><div class="note info modern"><p>本外挂标签的参数分为三组，用<code>||</code>分割。</p></div></p><ol><li>基本参数,定义徽标左右文字和图标<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">{% bdage Theme,Butterfly %}</span><br><span class="line">{% bdage Frame,Hexo,hexo %}</span><br></pre></td></tr></table></figure></li><li>信息参数，定义徽标右侧内容背景色，指向链接<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">{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}</span><br><span class="line">//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割</span><br><span class="line">{% bdage Source,GitHub,GitHub||,https://github.com/ %}</span><br></pre></td></tr></table></figure></li><li>拓展参数，支持shields的API的全部参数内容<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">{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&logoWidth=20 %}</span><br><span class="line">//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割</span><br><span class="line">{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="网站卡片-sites"><a href="#网站卡片-sites" class="headerlink" title="网站卡片 sites"></a>网站卡片 sites</h2><div class="tabs" id="site"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#site-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#site-2">样式预览</button></li><li class="tab"><button type="button" data-href="#site-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="site-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% sitegroup %}</span><br><span class="line">{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}</span><br><span class="line">{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}</span><br><span class="line">{% endsitegroup %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="site-2"><div class="site-card-group"><a class="site-card" href="https://xaoxuu.com"><div class="img"><img src="https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png"/><span class="title">xaoxuu</span><span class="desc">简约风格</span></div></a><a class="site-card" href="https://inkss.cn"><div class="img"><img src="https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg"/><span class="title">inkss</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a><a class="site-card" href="https://blog.mhuig.top"><div class="img"><img src="https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png"/><span class="title">MHuiG</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a><a class="site-card" href="https://colsrch.top"><div class="img"><img src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg"/><span class="title">Colsrch</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a><a class="site-card" href="https://linhk1606.github.io"><div class="img"><img src="https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png"/></div><div class="info"><img src="https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png"/><span class="title">Linhk1606</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="site-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% sitegroup %}</span><br><span class="line">{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}</span><br><span class="line">{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% endsitegroup %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="行内图片-inlineimage"><a href="#行内图片-inlineimage" class="headerlink" title="行内图片 inlineimage"></a>行内图片 inlineimage</h2><div class="tabs" id="inlineimage"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#inlineimage-1">标签语法</button></li><li class="tab"><button type="button" data-href="#inlineimage-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#inlineimage-3">样式预览</button></li><li class="tab"><button type="button" data-href="#inlineimage-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimage-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% inlineimage 图片链接, height=高度（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="inlineimage-2"><ol><li>高度：height=20px</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="inlineimage-3"><p>这是 <img no-lazy class="inline" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif" style="height:1.5em"/> 一段话。</p><p>这又是 <img no-lazy class="inline" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif" style="height:40px;"/> 一段话。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="inlineimage-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。</span><br><span class="line"></span><br><span class="line">这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="单张图片-image"><a href="#单张图片-image" class="headerlink" title="单张图片 image"></a>单张图片 image</h2><div class="tabs" id="image"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#image-1">标签语法</button></li><li class="tab"><button type="button" data-href="#image-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#image-3">样式预览</button></li><li class="tab"><button type="button" data-href="#image-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="image-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="image-2"><ol><li>图片宽度高度：width=300px, height=32px</li><li>图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）</li><li>占位背景色：bg=#f2f2f2</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="image-3"><ol><li><p>添加描述：</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="每天下课回宿舍的路，没有什么故事。"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div></li><li><p>指定宽度：</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" style="width:400px;"/></div></div></li><li><p>指定宽度并添加描述：</p><div class="img-wrap"><div class="img-bg"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="每天下课回宿舍的路，没有什么故事。" style="width:400px;"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div></li><li><p>设置占位背景色：</p><div class="img-wrap"><div class="img-bg" style="background:#1D0C04"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="优化不同宽度浏览的观感" style="width:400px;"/></div><span class="image-caption">优化不同宽度浏览的观感</span></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="image-4"><ol><li><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">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}</span><br></pre></td></tr></table></figure></li><li>指定宽度：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}</span><br></pre></td></tr></table></figure></li><li>指定宽度并添加描述：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}</span><br></pre></td></tr></table></figure></li><li>设置占位背景色：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="音频-audio"><a href="#音频-audio" class="headerlink" title="音频 audio"></a>音频 audio</h2><div class="tabs" id="audio"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#audio-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#audio-2">样式预览</button></li><li class="tab"><button type="button" data-href="#audio-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="audio-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% audio 音频链接 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="audio-2"><div class="audio"><audio controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3' type='audio/mp3'>Your browser does not support the audio tag.</audio></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="audio-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="视频-video"><a href="#视频-video" class="headerlink" title="视频 video"></a>视频 video</h2><div class="tabs" id="video"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#video-1">标签语法</button></li><li class="tab"><button type="button" data-href="#video-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#video-3">样式预览</button></li><li class="tab"><button type="button" data-href="#video-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="video-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% video 视频链接 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="video-2"><ol><li>对其方向：left, center, right</li><li>列数：逗号后面直接写列数，支持 1 ～ 4 列。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="video-3"><ol><li><p>100%宽度</p><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div></li><li><p>50%宽度</p><div class="videos" col='2'><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div></div></li><li><p>25%宽度</p><div class="videos" col='4'><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="video-4"><ol><li><p>100%宽度</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">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br></pre></td></tr></table></figure></li><li><p>50%宽度</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></pre></td><td class="code"><pre><span class="line">{% videos, 2 %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% endvideos %}</span><br></pre></td></tr></table></figure></li><li><p>25%宽度</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">{% videos, 4 %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% endvideos %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="相册-gallery"><a href="#相册-gallery" class="headerlink" title="相册 gallery"></a>相册 gallery</h2><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p><code>Butterfly</code>自带<code>gallery</code>相册，而且会根据图片大小自动调整排版，效果比<code>Volantis</code>的<code>gallery</code>更好，故不再收录<code>Volantis</code>的<code>gallery</code>标签。</p></div><div class="note flat"><p>以下为<code>Butterfly</code>自带的<code>gallery</code>标签写法。相册图库和相册配合使用。</p></div><div class="tabs" id="gallery"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#gallery-1">标签语法</button></li><li class="tab"><button type="button" data-href="#gallery-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#gallery-3">样式预览</button></li><li class="tab"><button type="button" data-href="#gallery-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="gallery-1"><ol><li><p>gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure></li><li><p>gallery 相册</p><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></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="gallery-2"><ul><li>gallerygroup 相册图库</li></ul><div class="table-container"><table><thead><tr><th style="text-align:left">参数名</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left">name</td><td style="text-align:left">图库名字</td></tr><tr><td style="text-align:left">description</td><td style="text-align:left">图库描述</td></tr><tr><td style="text-align:left">link</td><td style="text-align:left">链接到对应相册的地址</td></tr><tr><td style="text-align:left">img-url</td><td style="text-align:left">图库封面</td></tr></tbody></table></div><div class="note info flat"><p>思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。</p></div><ul><li>gallery 相册<br>区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。<strong>建议在粘贴时故意使用长短、大小、横竖不一的图片</strong>，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）</li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="gallery-3"><ul><li>gallerygroup 相册图库</li></ul><div class="gallery-group-main"> <figure class="gallery-group"> <img class="gallery-group-img no-lightbox" src='https://npm.elemecdn.com/akilar-candyassets/image/1.jpg' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">MC</div> <p>在Rikkaの六花服务器里留下的足迹</p> <a href='/gallery/MC/'></a> </figcaption> </figure> <figure class="gallery-group"> <img class="gallery-group-img no-lightbox" src='https://npm.elemecdn.com/akilar-candyassets/image/20200907110508327.png' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">Gundam</div> <p>哦咧哇gundam哒！</p> <a href='/gallery/Gundam/'></a> </figcaption> </figure> <figure class="gallery-group"> <img class="gallery-group-img no-lightbox" src='https://npm.elemecdn.com/akilar-candyassets/image/20200907113116651.png' alt="Group Image Gallery"> <figcaption> <div class="gallery-group-name">I-am-Akilar</div> <p>某种意义上也算自拍吧</p> <a href='/gallery/I-am-Akilar/'></a> </figcaption> </figure></div><ul><li>gallery 相册</li></ul><div class="gallery"> <div class="fj-gallery data" data-rowHeight="220" data-limit="10"> <span class="gallery-data">[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]</span> </div> <button class="gallery-load-more"><span>加载更多</span><i class="fa-solid fa-arrow-down"></i></button> </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="gallery-4"><div class="note info flat"><p>对于很多同学提问的<code>gallerygroup</code>和<code>gallery</code>相册页的链接问题。这里说下我个人的使用习惯。<br>一般使用相册图库的话，可以在导航栏加一个gallery的page(<strong>使用指令<code>hexo new page gallery</code>添加</strong>)，里面放相册图库作为封面。然后在<code>[Blogroot]/source/gallery/</code>下面建立相应的文件夹，例如若按照这里的示例，若欲使用<code>/gallery/MC/</code>路径访问MC相册，则需要新建<code>[Blogroot]/source/gallery/MC/index.md</code>，并在里面填入<code>gallery</code>相册内容。</p></div><ol><li><p>gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/gallery/MC/' https://npm.elemecdn.com/akilar-candyassets/image/1.jpg %}</span><br><span class="line">{% galleryGroup Gundam 哦咧哇gundam哒！ '/gallery/Gundam/' https://npm.elemecdn.com/akilar-candyassets/image/20200907110508327.png %}</span><br><span class="line">{% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/gallery/I-am-Akilar/' https://npm.elemecdn.com/akilar-candyassets/image/20200907113116651.png %}</span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure></li><li><p>gallery 相册</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="折叠框-folding"><a href="#折叠框-folding" class="headerlink" title="折叠框 folding"></a>折叠框 folding</h2><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p><code>Butterfly</code>虽然也有内置折叠框<code>hideToggle</code>标签，但是<code>Volantis</code>的<code>folding</code>折叠框更好看一些。</p></div><div class="tabs" id="folding"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#folding-1">标签语法</button></li><li class="tab"><button type="button" data-href="#folding-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#folding-3">样式预览</button></li><li class="tab"><button type="button" data-href="#folding-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% folding 参数（可选）, 标题 %}</span><br><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="folding-2"><ol><li>颜色：blue, cyan, green, yellow, red</li><li>状态：状态填写 open 代表默认打开。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="folding-3"><details class="folding-tag" ><summary> 查看图片测试 </summary> <div class='content'> <p><img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg" alt=""></p> </div> </details><details class="folding-tag" cyan open><summary> 查看默认打开的折叠框 </summary> <div class='content'> <p>这是一个默认打开的折叠框。</p> </div> </details><details class="folding-tag" green><summary> 查看代码测试 </summary> <div class='content'> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br></pre></td></tr></table></figure> </div> </details><details class="folding-tag" yellow><summary> 查看列表测试 </summary> <div class='content'> <ul><li>haha</li><li>hehe</li></ul> </div> </details><details class="folding-tag" red><summary> 查看嵌套测试 </summary> <div class='content'> <details class="folding-tag" blue><summary> 查看嵌套测试2 </summary> <div class='content'> <details class="folding-tag" ><summary> 查看嵌套测试3 </summary> <div class='content'> <p>hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span></p> </div> </details> </div> </details> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="folding-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">{% folding 查看图片测试 %}</span><br><span class="line"></span><br><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding cyan open, 查看默认打开的折叠框 %}</span><br><span class="line"></span><br><span class="line">这是一个默认打开的折叠框。</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding green, 查看代码测试 %}</span><br><span class="line">假装这里有代码块（代码块没法嵌套代码块）</span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding yellow, 查看列表测试 %}</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> haha</span><br><span class="line"><span class="bullet">-</span> hehe</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding red, 查看嵌套测试 %}</span><br><span class="line"></span><br><span class="line">{% folding blue, 查看嵌套测试2 %}</span><br><span class="line"></span><br><span class="line">{% folding 查看嵌套测试3 %}</span><br><span class="line"></span><br><span class="line">hahaha <span class="language-xml"><span class="tag"><<span class="name">span</span>></span></span><span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://cdn.jsdelivr.net/gh/volantis-x/cdn-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><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="分栏-tab"><a href="#分栏-tab" class="headerlink" title="分栏 tab"></a>分栏 tab</h2><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p><code>Butterfly</code>的<code>tab</code>标签和<code>Volantis</code>的<code>tab</code>标签都是移值自<code>NexT</code>主题，所以写法和效果一模一样。</p></div><div class="tabs" id="folding"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#folding-1">标签语法</button></li><li class="tab"><button type="button" data-href="#folding-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#folding-3">样式预览</button></li><li class="tab"><button type="button" data-href="#folding-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></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"></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="folding-2"><ol><li>Unique name :<ul><li>选项卡块标签的唯一名称，不带逗号。</li><li>将在#id中用作每个标签及其索引号的前缀。</li><li>如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。</li><li>仅当前帖子/页面的URL必须是唯一的！</li></ul></li><li>[index]:<ul><li>活动选项卡的索引号。</li><li>如果未指定，将选择第一个标签（1）。</li><li>如果index为-1，则不会选择任何选项卡。</li><li>可选参数。</li></ul></li><li>[Tab caption]:<ul><li>当前选项卡的标题。</li><li>如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。</li><li>如果未指定标题，但指定了图标，则标题将为空。</li><li>可选参数。</li></ul></li><li>[@icon]:<ul><li>FontAwesome图标名称（全名，看起来像“ fas fa-font”）</li><li>可以指定带空格或不带空格；</li><li>例如’Tab caption @icon’ 和 ‘Tab caption@icon’.</li><li>可选参数。</li></ul></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="folding-3"><div class="note primary flat"><p>Demo 1 - 预设选择第一个【默认】</p></div><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">test1 1</button></li><li class="tab"><button type="button" data-href="#test1-2">test1 2</button></li><li class="tab"><button type="button" data-href="#test1-3">test1 3</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="note primary flat"><p>Demo 2 - 预设选择tabs</p></div><div class="tabs" id="test2"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#test2-1">test2 1</button></li><li class="tab"><button type="button" data-href="#test2-2">test2 2</button></li><li class="tab active"><button type="button" data-href="#test2-3">test2 3</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="test2-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test2-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="test2-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="note primary flat"><p>Demo 3 - 没有预设值</p></div><div class="tabs" id="test3"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#test3-1">test3 1</button></li><li class="tab"><button type="button" data-href="#test3-2">test3 2</button></li><li class="tab"><button type="button" data-href="#test3-3">test3 3</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="test3-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test3-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test3-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="note primary flat"><p>Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名</p></div><div class="tabs" id="test4"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test4-1">第一个Tab</button></li><li class="tab"><button type="button" data-href="#test4-2"><i class="fab fa-apple-pay" style="text-align: center;"></i></button></li><li class="tab"><button type="button" data-href="#test4-3"><i class="fas fa-bomb"></i>炸弹</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p><strong>tab名字为第一个Tab</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-2"><p><strong>只有图标 没有Tab名字</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-3"><p><strong>名字+icon</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="folding-4"><p><div class="note primary flat"><p>Demo 1 - 预设选择第一个【默认】</p></div><br><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></p><p><div class="note primary flat"><p>Demo 2 - 预设选择tabs</p></div><br><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></p><p><div class="note primary flat"><p>Demo 3 - 没有预设值</p></div><br><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></p><p><div class="note primary flat"><p>Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名</p></div><br><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></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="数据集合-issues"><a href="#数据集合-issues" class="headerlink" title="数据集合 issues"></a>数据集合 issues</h2><script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-theme-volantis@4.3.1/source/js/issues.min.js"></script><div class="tabs" id="issues"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#issues-1">标签语法</button></li><li class="tab"><button type="button" data-href="#issues-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#issues-3">样式预览</button></li><li class="tab"><button type="button" data-href="#issues-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="issues-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% issues type | api=url | group=key:value1,value2（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="issues-2"><p><span class='p center logo large'>type(类型)：</span><br>根据需求不同，会将 issues 内容解析成不同的 HTML 标签，目前支持的类型有：</p><ol><li>时间轴<code>timeline</code>: 解析成<code>timeline</code>标签，<code>issue</code>的标题对应<code>timeline</code>的时间，<code>issue</code>的内容对应<code>timeline</code>的内容。</li><li><p>网站卡片<code>sites</code>: 解析成<code>sites</code>标签，需要有<code>JSON</code>代码块,各参数对应<code>sites</code>标签参数:</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"title"</span><span class="punctuation">:</span> <span class="string">""</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"screenshot"</span><span class="punctuation">:</span> <span class="string">""</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"url"</span><span class="punctuation">:</span> <span class="string">""</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"avatar"</span><span class="punctuation">:</span> <span class="string">""</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"description"</span><span class="punctuation">:</span> <span class="string">""</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"「keywords」"</span><span class="punctuation">:</span> <span class="string">""</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure></li></ol><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left">title</td><td style="text-align:left">网站名称</td></tr><tr><td style="text-align:left">screenshot</td><td style="text-align:left">网站预览图</td></tr><tr><td style="text-align:left">url</td><td style="text-align:left">网站链接，需要添加<br><code>https://</code>协议组成完整域名。<br>否则可能被识别成站点相对路径。</td></tr><tr><td style="text-align:left">avatar</td><td style="text-align:left">站长头像</td></tr><tr><td style="text-align:left">「keywords」</td><td style="text-align:left">分组依据，<br>未必要叫「keywords」，<br>详见下文group(分组)</td></tr></tbody></table></div><p><span class='p center logo large'>api(接口)：</span><br>url为可以调的通的API，例如：<br><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">api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active</span><br><span class="line">api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active</span><br></pre></td></tr></table></figure></p><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left"><a href="https://gitee.com/api/v5/">https://gitee.com/api/v5/</a></td><td style="text-align:left">gitee仓库的api</td></tr><tr><td style="text-align:left"><a href="https://api.github.com/">https://api.github.com/</a></td><td style="text-align:left">github仓库的api</td></tr><tr><td style="text-align:left">repos/xaoxuu/friends/issues</td><td style="text-align:left">repos/用户名/仓库名/issues</td></tr><tr><td style="text-align:left">sort=updated&state=open</td><td style="text-align:left">界定哪些类型的<code>issues</code>会<br>被读取过来渲染成相应的标签</td></tr><tr><td style="text-align:left">page=1&per_page=100</td><td style="text-align:left">读取前100条issues</td></tr><tr><td style="text-align:left">labels=active</td><td style="text-align:left">控制默认的issue不显示，<br>只有自己审核通过<br>添加了active标签之后才会显示</td></tr></tbody></table></div><p><span class='p center logo large'>group(分组)：</span><br><code>sites</code>类型的<code>issues</code>默认不分组，如果需要分组，可指定分组依据<code>「keywords」</code>，和分组白名单<code>「value1」</code>、<code>「value2」</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="string">group=version:v4,v3,v2</span></span><br><span class="line"><span class="comment"># 此处的version就是上文中的「keywords」</span></span><br></pre></td></tr></table></figure><p>这个参数的作用就是，筛选出<code>JSON</code>中包含<code>"version": "v4"</code>或者<code>"version":"v3"</code>或者<code>"version": "v2"</code>的数据，并分组显示。</p><p><span class='p center logo large'>仓库ISSUES模板配置</span></p><details class="folding-tag" green><summary> Github仓库配置方案 </summary> <div class='content'> <ol><li><p>新建一个仓库，仓库名随意，这里我命名为<code>friend_link</code>,<br>新建文件<code>friend_link\.github\ISSUE_TEMPLATE.md</code>,<br>并在其中输入以下内容作为<code>issues</code>模板。</p><div class="tip warning faa-horizontal animated fa-slow"><p>其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义，否则无法嵌套代码块。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">name: 友链模板</span><br><span class="line"><span class="section">about: 请根据指示规范填写友链格式。</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line"><!-- 请在下方代码块的双引号中填写 --></span><br><span class="line">\<span class="code">```json</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"> "screenshot": "",</span></span><br><span class="line"><span class="code"> "url": "",</span></span><br><span class="line"><span class="code"> "avatar": "",</span></span><br><span class="line"><span class="code"> "description": "",</span></span><br><span class="line"><span class="code"> "keywords": ""</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><br><span class="line"><!--</span><br><span class="line">"title": "站点名称",</span><br><span class="line">"screenshot": "站点预览图链接",</span><br><span class="line">"url": "站点链接",</span><br><span class="line">"avatar": "头像链接",</span><br><span class="line">"description": "站点描述",</span><br><span class="line">"keywords": "关键词，作为分组名"</span><br><span class="line">--></span><br><span class="line"></span><br><span class="line"><!-- 示例 --></span><br><span class="line"></span><br><span class="line"><!--</span><br><span class="line">"title": "Akilarの糖果屋",</span><br><span class="line">"screenshot": "https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg",</span><br><span class="line">"url": "https://akilar.top/",</span><br><span class="line">"avatar": "https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.png",</span><br><span class="line">"description": "期待您的光临！",</span><br><span class="line">"keywords": "糖果屋"</span><br><span class="line">--></span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>新建active label</p><p><img src="https://npm.elemecdn.com/akilar-candyassets/image/d63b5c0c.png" alt="新建label用于控制审核结果"></p><p><img src="https://npm.elemecdn.com/akilar-candyassets/image/6311f960.png" alt="配置名称描述颜色"></p></li><li><p>提交示例</p><p><img src="https://npm.elemecdn.com/akilar-candyassets/image/f87ebfd3.png" alt="填写规范"><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/efdfc67d.png" alt="审核通过"></p></li><li><p>从审核通过到页面读取有一段api的缓存期，稍微有点耐心。</p></li></ol> </div> </details><details class="folding-tag" yellow><summary> Gitee仓库配置方案 </summary> <div class='content'> <ol><li><p>新建一个仓库，仓库名随意，这里我命名为<code>friend_link</code>,<br>新建文件<code>friend_link\.gitee\ISSUE_TEMPLATE.md</code>,<br>并在其中输入以下内容作为<code>issues</code>模板。</p><div class="tip warning faa-horizontal animated fa-slow"><p>其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义，否则无法嵌套代码块。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">name: 友链模板</span><br><span class="line"><span class="section">about: 请根据指示规范填写友链格式。</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line"><!-- 请在下方代码块的双引号中填写 --></span><br><span class="line">\<span class="code">```json</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"> "screenshot": "",</span></span><br><span class="line"><span class="code"> "url": "",</span></span><br><span class="line"><span class="code"> "avatar": "",</span></span><br><span class="line"><span class="code"> "description": "",</span></span><br><span class="line"><span class="code"> "keywords": ""</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><br><span class="line"><!--</span><br><span class="line">"title": "站点名称",</span><br><span class="line">"screenshot": "站点预览图链接",</span><br><span class="line">"url": "站点链接",</span><br><span class="line">"avatar": "头像链接",</span><br><span class="line">"description": "站点描述",</span><br><span class="line">"keywords": "关键词，作为分组名"</span><br><span class="line">--></span><br><span class="line"></span><br><span class="line"><!-- 示例 --></span><br><span class="line"></span><br><span class="line"><!--</span><br><span class="line">"title": "Akilarの糖果屋",</span><br><span class="line">"screenshot": "https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg",</span><br><span class="line">"url": "https://akilar.top/",</span><br><span class="line">"avatar": "https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.png",</span><br><span class="line">"description": "期待您的光临！",</span><br><span class="line">"keywords": "糖果屋"</span><br><span class="line">--></span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>新建active标签</p><p><img src="https://npm.elemecdn.com/akilar-candyassets/image/7522911b.png" alt="新建标签用于控制审核结果"></p></li></ol><ol><li><p>提交示例</p><p><img src="https://npm.elemecdn.com/akilar-candyassets/image/dd334eea.png" alt="填写规范"><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/72d06ae1.png" alt="审核通过"></p></li><li><p>从审核通过到页面读取有一段api的缓存期，稍微有点耐心。</p></li></ol> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="issues-3"><ol><li><p>时间轴标签<code>timeline</code>渲染<br>对应的仓库<code>issues</code>链接:</p><div class="tag link"><a class="link-card" title="xaoxuu/timeline" href="https://gitee.com/xaoxuu/timeline/issues"><div class="left"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png"/></div><div class="right"><p class="text">xaoxuu/timeline</p><p class="url">https://gitee.com/xaoxuu/timeline/issues</p></div></a></div><div class="issues-api timeline"api="https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100"></div></li><li><p>网站卡片标签<code>sites</code>渲染</p><ul><li><p>gitee仓库示例</p><p>对应的仓库<code>issues</code>链接:</p><div class="tag link"><a class="link-card" title="xaoxuu/friends" href="https://gitee.com/xaoxuu/friends/issues"><div class="left"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png"/></div><div class="right"><p class="text">xaoxuu/friends</p><p class="url">https://gitee.com/xaoxuu/friends/issues</p></div></a></div><p>渲染后的标签：</p><div class="issues-api sites"api="https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active"></div></li><li><p>github仓库示例</p><p>对应的仓库<code>issues</code>链接:</p><div class="tag link"><a class="link-card" title="xaoxuu/friends" href="https://github.com/xaoxuu/friends/issues"><div class="left"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png"/></div><div class="right"><p class="text">xaoxuu/friends</p><p class="url">https://github.com/xaoxuu/friends/issues</p></div></a></div><p>渲染后的标签：</p><div class="issues-api sites"api="https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active"></div></li></ul></li><li><p>网站卡片标签<code>sites</code>分组渲染<br>这是<code>Volantis</code>主题官网的「示例博客」页面的数据：<br>对应的仓库<code>issues</code>链接:</p><div class="tag link"><a class="link-card" title="如何参与项目" href="https://github.com/volantis-x/examples/issues"><div class="left"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png"/></div><div class="right"><p class="text">如何参与项目</p><p class="url">https://github.com/volantis-x/examples/issues</p></div></a></div><p>渲染后的标签：</p><div class="issues-api sites"api="https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100"group="version:版本：^4.0,版本：^3.0,版本：^2.0"></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="issues-4"><ol><li><p>时间轴标签<code>timeline</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">{% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per<span class="emphasis">_page=100 %}</span></span><br></pre></td></tr></table></figure></li><li><p>网站卡片标签<code>sites</code>渲染</p><ul><li><p>gitee仓库示例</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">{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per<span class="emphasis">_page=100&labels=active %}</span></span><br></pre></td></tr></table></figure></li><li><p>github仓库示例</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">{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per<span class="emphasis">_page=100&labels=active %}</span></span><br></pre></td></tr></table></figure></li></ul></li><li><p>网站卡片标签<code>sites</code>分组渲染<br>这是<code>Volantis</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">{% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per<span class="emphasis">_page=100 | group=version:版本：^4.0,版本：^3.0,版本：^2.0 %}</span></span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="诗词标签-poem"><a href="#诗词标签-poem" class="headerlink" title="诗词标签 poem"></a>诗词标签 poem</h2><div class="tabs" id="poem"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#poem-1">标签语法</button></li><li class="tab"><button type="button" data-href="#poem-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#poem-3">样式预览</button></li><li class="tab"><button type="button" data-href="#poem-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="poem-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% poem [title],[author] %}</span><br><span class="line">诗词内容</span><br><span class="line">{% endpoem %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="poem-2"><ol><li>title：诗词标题</li><li>author：作者，可以不写</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="poem-3"><div class='poem'><div class='poem-title'>水调歌头</div><div class='poem-author'>苏轼</div><p>明月几时有？把酒问青天。<br>不知天上宫阙，今夕是何年？<br>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。<br>起舞弄清影，何似在人间？<br>转朱阁，低绮户，照无眠。<br>不应有恨，何事长向别时圆？<br>人有悲欢离合，月有阴晴圆缺，此事古难全。<br>但愿人长久，千里共婵娟。</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="poem-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{% poem 水调歌头,苏轼 %}</span><br><span class="line">丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</span><br><span class="line">明月几时有？把酒问青天。</span><br><span class="line">不知天上宫阙，今夕是何年？</span><br><span class="line">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</span><br><span class="line">起舞弄清影，何似在人间？</span><br><span class="line"></span><br><span class="line">转朱阁，低绮户，照无眠。</span><br><span class="line">不应有恨，何事长向别时圆？</span><br><span class="line">人有悲欢离合，月有阴晴圆缺，此事古难全。</span><br><span class="line">但愿人长久，千里共婵娟。</span><br><span class="line">{% endpoem %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="阿里图标-icon"><a href="#阿里图标-icon" class="headerlink" title="阿里图标 icon"></a>阿里图标 icon</h2><div class="tip cogs"><p>本标签的图标需要自己额外引入阿里矢量图标库的样式，具体引入方案请移步：<a href="/posts/d2ebecef/">Hexo引入阿里矢量图标库</a></p></div><div class="tabs" id="icon示例"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#icon示例-1">标签语法</button></li><li class="tab"><button type="button" data-href="#icon示例-2">参数释义</button></li><li class="tab active"><button type="button" data-href="#icon示例-3">样式预览</button></li><li class="tab"><button type="button" data-href="#icon示例-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="icon示例-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% icon [icon-xxxx],[font-size] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="icon示例-2"><ol><li><code>icon-xxxx</code>：表示图标<code>font-class</code>,可以在自己的阿里矢量图标库项目的<code>font-class</code>引用方案内查询并复制。</li><li><code>font-size</code>：表示图标大小，直接填写数字即可，单位为<code>em</code>。图标大小默认值为<code>1em</code>。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="icon示例-3"><div class="table-container"><table><thead><tr><th style="text-align:left"><svg class="icon" style="width:1em; height:1em" aria-hidden="true"><use xlink:href="#icon-rat_zi"></use></svg></th><th style="text-align:left"><svg class="icon" style="width:2em; height:2em" aria-hidden="true"><use xlink:href="#icon-rat"></use></svg></th><th style="text-align:left"><svg class="icon" style="width:3em; height:3em" aria-hidden="true"><use xlink:href="#icon-ox_chou"></use></svg></th><th style="text-align:left"><svg class="icon" style="width:4em; height:4em" aria-hidden="true"><use xlink:href="#icon-ox"></use></svg></th><th style="text-align:left"><svg class="icon" style="width:5em; height:5em" aria-hidden="true"><use xlink:href="#icon-tiger_yin"></use></svg></th><th style="text-align:left"><svg class="icon" style="width:6em; height:6em" aria-hidden="true"><use xlink:href="#icon-tiger"></use></svg></th></tr></thead><tbody><tr><td style="text-align:left"><svg class="icon" style="width:1em; height:1em" aria-hidden="true"><use xlink:href="#icon-rabbit_mao"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:2em; height:2em" aria-hidden="true"><use xlink:href="#icon-rabbit"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:3em; height:3em" aria-hidden="true"><use xlink:href="#icon-dragon_chen"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:4em; height:4em" aria-hidden="true"><use xlink:href="#icon-dragon"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:5em; height:5em" aria-hidden="true"><use xlink:href="#icon-snake_si"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:6em; height:6em" aria-hidden="true"><use xlink:href="#icon-snake"></use></svg></td></tr><tr><td style="text-align:left"><svg class="icon" style="width:1em; height:1em" aria-hidden="true"><use xlink:href="#icon-horse_wu"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:2em; height:2em" aria-hidden="true"><use xlink:href="#icon-horse"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:3em; height:3em" aria-hidden="true"><use xlink:href="#icon-goat_wei"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:4em; height:4em" aria-hidden="true"><use xlink:href="#icon-goat"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:5em; height:5em" aria-hidden="true"><use xlink:href="#icon-monkey_shen"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:6em; height:6em" aria-hidden="true"><use xlink:href="#icon-monkey"></use></svg></td></tr><tr><td style="text-align:left"><svg class="icon" style="width:1em; height:1em" aria-hidden="true"><use xlink:href="#icon-rooster_you"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:2em; height:2em" aria-hidden="true"><use xlink:href="#icon-rooster"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:3em; height:3em" aria-hidden="true"><use xlink:href="#icon-dog_xu"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:4em; height:4em" aria-hidden="true"><use xlink:href="#icon-dog"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:5em; height:5em" aria-hidden="true"><use xlink:href="#icon-boar_hai"></use></svg></td><td style="text-align:left"><svg class="icon" style="width:6em; height:6em" aria-hidden="true"><use xlink:href="#icon-boar"></use></svg></td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="icon示例-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">{% icon icon-rat<span class="emphasis">_zi %}{% icon icon-rat,2 %}</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">{% icon icon-ox_</span>chou,3 %}{% icon icon-ox,4 %}</span><br><span class="line"></span><br><span class="line">{% icon icon-tiger<span class="emphasis">_yin,5 %}{% icon icon-tiger,6 %}</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">{% icon icon-rabbit_</span>mao,1 %}{% icon icon-rabbit,2 %}</span><br><span class="line"></span><br><span class="line">{% icon icon-dragon<span class="emphasis">_chen,3 %}{% icon icon-dragon,4 %}</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">{% icon icon-snake_</span>si,5 %}{% icon icon-snake,6 %}</span><br><span class="line"></span><br><span class="line">{% icon icon-horse<span class="emphasis">_wu %}{% icon icon-horse,2 %}</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">{% icon icon-goat_</span>wei,3 %}{% icon icon-goat,4 %}</span><br><span class="line"></span><br><span class="line">{% icon icon-monkey<span class="emphasis">_shen,5 %}{% icon icon-monkey,6 %}</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">{% icon icon-rooster_</span>you %}{% icon icon-rooster,2 %}</span><br><span class="line"></span><br><span class="line">{% icon icon-dog<span class="emphasis">_xu,3 %}{% icon icon-dog,4 %}</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">{% icon icon-boar_</span>hai,5 %}{% icon icon-boar,6 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="特效标签wow"><a href="#特效标签wow" class="headerlink" title="特效标签wow"></a>特效标签wow</h2><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>特效标签的静态资源未添加在本帖的配置内容中（因为多为cdn配置），请移步站内教程完成相关配置：</p><div class="tag link"><a class="link-card" title="使用wowjs给博客添加动画效果" href="/posts/abab51cf/"><div class="left"><img src="https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.ico"/></div><div class="right"><p class="text">使用wowjs给博客添加动画效果</p><p class="url">/posts/abab51cf/</p></div></a></div></div><div class="tabs" id="animate"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#animate-1">标签语法</button></li><li class="tab"><button type="button" data-href="#animate-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#animate-3">样式预览</button></li><li class="tab"><button type="button" data-href="#animate-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="animate-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% wow [animete],[duration],[delay],[offset],[iteration] %}</span><br><span class="line">内容</span><br><span class="line">{% endwow %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="animate-2"><ol><li><code>animate</code>: 动画样式，效果详见<a href="https://animate.style/">animate.css参考文档</a></li><li><code>duration</code>: 选填项，动画持续时间，单位可以是<code>ms</code>也可以是<code>s</code>。例如<code>3s</code>，<code>700ms</code>。</li><li><code>delay</code>: 选填项，动画开始的延迟时间，单位可以是<code>ms</code>也可以是<code>s</code>。例如<code>3s</code>，<code>700ms</code>。</li><li><code>offset</code>: 选填项，开始动画的距离（相对浏览器底部）</li><li><code>iteration</code>: 选填项，动画重复的次数</li></ol><div class="note warning flat"><p>注意，后面四个虽然是选填项，但是当有跨位选填时，次序不能乱。详见示例。<br>支持嵌套其他外挂标签。</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="animate-3"><ol><li><code>flip</code>动画效果。<div class='wow animate__flip' data-wow-duration='' data-wow-delay='' data-wow-offset='' data-wow-iteration='' > <div class="note green icon-padding modern"><i class="note-icon fas fa-fan"></i><p><code>flip</code>动画效果。</p></div></div></li><li><code>zoomIn</code>动画效果，持续<code>5s</code>，延时<code>5s</code>，离底部<code>100</code>距离时启动，重复<code>10</code>次。<div class='wow animate__zoomIn' data-wow-duration='5s' data-wow-delay='5s' data-wow-offset='100' data-wow-iteration='10' > <div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p><code>zoomIn</code>动画效果，持续<code>5s</code>，延时<code>5s</code>，离底部<code>100</code>距离时启动，重复<code>10</code>次</p></div></div></li><li><code>slideInRight</code>动画效果，持续<code>5s</code>，延时<code>5s</code>。<div class='wow animate__slideInRight' data-wow-duration='5s' data-wow-delay='5s' data-wow-offset='' data-wow-iteration='' > <div class="note orange icon-padding modern"><i class="note-icon fas fa-car"></i><p><code>slideInRight</code>动画效果，持续<code>5s</code>，延时<code>5s</code>。</p></div></div></li><li><code>heartBeat</code>动画效果，延时<code>5s</code>，重复<code>10</code>次。<div class='wow animate__heartBeat' data-wow-duration='' data-wow-delay='5s' data-wow-offset='' data-wow-iteration='10' > <div class="note red icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p><code>heartBeat</code>动画效果，延时<code>5s</code>，重复<code>10</code>次。</p></div></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="animate-4"><ol><li><code>flip</code>动画效果。<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">{% wow animate<span class="strong">__flip %}</span></span><br><span class="line"><span class="strong">{% note green 'fas fa-fan' modern%}</span></span><br><span class="line"><span class="strong">`flip`动画效果。</span></span><br><span class="line"><span class="strong">{% endnote %}</span></span><br><span class="line"><span class="strong">{% endwow %}</span></span><br></pre></td></tr></table></figure></li><li><code>zoomIn</code>动画效果，持续<code>5s</code>，延时<code>5s</code>，离底部<code>100</code>距离时启动，重复<code>10</code>次。<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">{% wow animate<span class="strong">__zoomIn,5s,5s,100,10 %}</span></span><br><span class="line"><span class="strong">{% note blue 'fas fa-bullhorn' modern%}</span></span><br><span class="line"><span class="strong">`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次</span></span><br><span class="line"><span class="strong">{% endnote %}</span></span><br><span class="line"><span class="strong">{% endwow %}</span></span><br></pre></td></tr></table></figure></li><li><code>slideInRight</code>动画效果，持续<code>5s</code>，延时<code>5s</code>。<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">{% wow animate<span class="strong">__slideInRight,5s,5s %}</span></span><br><span class="line"><span class="strong">{% note orange 'fas fa-car' modern%}</span></span><br><span class="line"><span class="strong">`slideInRight`动画效果，持续`5s`，延时`5s`。</span></span><br><span class="line"><span class="strong">{% endnote %}</span></span><br><span class="line"><span class="strong">{% endwow %}</span></span><br></pre></td></tr></table></figure></li><li><code>heartBeat</code>动画效果，延时<code>5s</code>，重复<code>10</code>次。此处注意不用的参数位置要留空，用逗号间隔。<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">{% wow animate<span class="strong">__heartBeat,,5s,,10 %}</span></span><br><span class="line"><span class="strong">{% note red 'fas fa-battery-half' modern%}</span></span><br><span class="line"><span class="strong">`heartBeat`动画效果，延时`5s`，重复`10`次。</span></span><br><span class="line"><span class="strong">{% endnote %}</span></span><br><span class="line"><span class="strong">{% endwow %}</span></span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="进度条-progress"><a href="#进度条-progress" class="headerlink" title="进度条 progress"></a>进度条 progress</h2><div class="note info morden flat"><p>进度条标签参考<a href="https://rongbuqiu.com/jdt.html">沂佰孜猫-给HEXO文章添加彩色进度条</a>。<br>源样式提取自<a href="https://zwying0814.gitbook.io/cuteen/">Cuteen</a>主题。</p></div><div class="tabs" id="progress"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#progress-1">标签语法</button></li><li class="tab"><button type="button" data-href="#progress-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#progress-3">样式预览</button></li><li class="tab"><button type="button" data-href="#progress-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="progress-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% progress [width] [color] [text] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="progress-2"><p><code>width</code>: 0到100的阿拉伯数字<br><code>color</code>: 颜色，取值有<span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span><br><code>text</code>:进度条上的文字内容</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="progress-3"><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-red" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-yellow" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-green" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-cyan" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-blue" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-gray" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="progress-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% progress 10 red 进度条样式预览 %}</span><br><span class="line">{% progress 30 yellow 进度条样式预览 %}</span><br><span class="line">{% progress 50 green 进度条样式预览 %}</span><br><span class="line">{% progress 70 cyan 进度条样式预览 %}</span><br><span class="line">{% progress 90 blue 进度条样式预览 %}</span><br><span class="line">{% progress 100 gray 进度条样式预览 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="注释-notation"><a href="#注释-notation" class="headerlink" title="注释 notation"></a>注释 notation</h2><div class="tabs" id="notation"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#notation-1">标签语法</button></li><li class="tab"><button type="button" data-href="#notation-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#notation-3">样式预览</button></li><li class="tab"><button type="button" data-href="#notation-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="notation-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% nota [label] , [text] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="notation-2"><p><code>label</code>: 注释词汇<br><code>text</code>: 悬停显示的注解内容</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="notation-3"><p><span class='nota' data-nota='可以看到注解内容出现在顶栏'>把鼠标移动到我上面试试</span></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="notation-4"><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">{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="气泡注释-bubble"><a href="#气泡注释-bubble" class="headerlink" title="气泡注释 bubble"></a>气泡注释 bubble</h2><div class="tabs" id="bubble"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#bubble-1">标签语法</button></li><li class="tab"><button type="button" data-href="#bubble-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#bubble-3">样式预览</button></li><li class="tab"><button type="button" data-href="#bubble-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="bubble-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% bubble [content] , [notation] ,[background-color] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bubble-2"><p><code>content</code>: 注释词汇<br><code>notation</code>: 悬停显示的注解内容<br><code>background-color</code>: 可选，气泡背景色。默认为“#71a4e3”</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="bubble-3"><p>最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如 CSS 的<span class="bubble-content">兄弟相邻选择器</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#71a4e3;">例如 h1 + p {margin-top:50px;}</span></span>，<span class="bubble-content">flex 布局</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#ec5830;"> Flex 是 Flexible Box 的缩写，意为弹性布局 "，用来为盒状模型提供最大的灵活性"</span></span>，<span class="bubble-content">transform 变换</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#1db675;"> transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。</span></span>，animation 的<span class="bubble-content">贝塞尔速度曲线</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#de4489;">贝塞尔曲线 (Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋</span></span>写法，还有今天刚看到的<span class="bubble-content"> clip-path</span><span class="bubble-notation"><span class="bubble-item" style="background-color:#868fd7;">clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</span></span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bubble-4"><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">最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="引用文献-reference"><a href="#引用文献-reference" class="headerlink" title="引用文献 reference"></a>引用文献 reference</h2><div class="tabs" id="bubble"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#bubble-1">标签语法</button></li><li class="tab"><button type="button" data-href="#bubble-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#bubble-3">样式预览</button></li><li class="tab"><button type="button" data-href="#bubble-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="bubble-1"><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">{% referto [id] , [literature] %}</span><br><span class="line">{% referfrom [id] , [literature] , [url] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bubble-2"><div class="tip ban"><p>考虑到锚点跳转的特性，不建议您将引用出处标签referfrom写在常隐外挂标签(如folding、tab、hideToggle)中，这样能有效避免跳转失败。</p></div><ol><li><p>referto 引用上标<br><code>id</code>: 上标序号内容，需与referfrom标签的id对应才能实现跳转<br><code>literature</code>: 引用的参考文献名称</p></li><li><p>referfrom 引用出处<br><code>id</code>: 序号内容，需与referto标签的id对应才能实现跳转<br><code>literature</code>: 引用的参考文献名称<br><code>url</code>: 引用的参考文献链接，可省略</p></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="bubble-3"><p>Akilarの糖果屋(akilar.top)是一个私人性质的博客<span class="hidden-anchor" id="referto_[1]"></span><sup class="reference"><a href="#referfrom_[1]" data-pjax-state="">[1]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Akilarの糖果屋群聊简介</span><span class="reference-title">参考资料</span></span></span>，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架<span class="hidden-anchor" id="referto_[2]"></span><sup class="reference"><a href="#referfrom_[2]" data-pjax-state="">[2]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Hexo中文文档</span><span class="reference-title">参考资料</span></span></span>，Butterfly主题<span class="hidden-anchor" id="referto_[3]"></span><sup class="reference"><a href="#referfrom_[3]" data-pjax-state="">[3]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Butterfly 安装文档(一) 快速开始</span><span class="reference-title">参考资料</span></span></span></p><p>本项目参考了Volantis<span class="hidden-anchor" id="referto_[4]"></span><sup class="reference"><a href="#referfrom_[4]" data-pjax-state="">[4]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">hexo-theme-volantis 标签插件</span><span class="reference-title">参考资料</span></span></span>的标签样式。引入<code>[tag].js</code>，并针对<code>butterfly</code>主题修改了相应的<code>[tag].styl</code>。在此鸣谢<code>Volantis</code>主题众开发者。<br>主要参考内容包括各个volantis的内置标签插件文档<span class="hidden-anchor" id="referto_[5]"></span><sup class="reference"><a href="#referfrom_[5]" data-pjax-state="">[5]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Volantis文档:内置标签插件</span><span class="reference-title">参考资料</span></span></span><br>Butterfly主题的各个衍生魔改<span class="hidden-anchor" id="referto_[6]"></span><sup class="reference"><a href="#referfrom_[6]" data-pjax-state="">[6]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">Butterfly 安装文档:标签外挂（Tag Plugins</span><span class="reference-title">参考资料</span></span></span><span class="hidden-anchor" id="referto_[7]"></span><sup class="reference"><a href="#referfrom_[7]" data-pjax-state="">[7]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">小弋の生活馆全样式预览</span><span class="reference-title">参考资料</span></span></span><span class="hidden-anchor" id="referto_[8]"></span><sup class="reference"><a href="#referfrom_[8]" data-pjax-state="">[8]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">l-lin-font-awesome-animation</span><span class="reference-title">参考资料</span></span></span><span class="hidden-anchor" id="referto_[9]"></span><sup class="reference"><a href="#referfrom_[9]" data-pjax-state="">[9]</a></sup><span class="reference-bubble"><span class="reference-item"><span class="reference-literature">小康的butterfly主题使用文档</span><span class="reference-title">参考资料</span></span></span></p><div class="reference-source"><span class="hidden-anchor" id="referfrom_[1]"></span><a class="reference-anchor" href="#referto_[1]">[1]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://jq.qq.com/?_wv=1027&k=pGLB2C0N">Akilarの糖果屋群聊简介</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[2]"></span><a class="reference-anchor" href="#referto_[2]">[2]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://hexo.io/zh-cn/docs/">Hexo中文文档</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[3]"></span><a class="reference-anchor" href="#referto_[3]">[3]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://butterfly.js.org/posts/21cfbf15/">Butterfly 安装文档(一) 快速开始</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[4]"></span><a class="reference-anchor" href="#referto_[4]">[4]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://volantis.js.org/v5/tag-plugins/">hexo-theme-volantis 标签插件</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[5]"></span><a class="reference-anchor" href="#referto_[5]">[5]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://volantis.js.org/tag-plugins/">Volantis文档:内置标签插件</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[6]"></span><a class="reference-anchor" href="#referto_[6]">[6]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89">Butterfly 安装文档:标签外挂（Tag Plugins</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[7]"></span><a class="reference-anchor" href="#referto_[7]">[7]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://lovelijunyi.gitee.io/posts/c898.html">小弋の生活馆全样式预览</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[8]"></span><a class="reference-anchor" href="#referto_[8]">[8]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://github.com/l-lin/font-awesome-animation">l-lin-font-awesome-animation</a></div><div class="reference-source"><span class="hidden-anchor" id="referfrom_[9]"></span><a class="reference-anchor" href="#referto_[9]">[9]<div class="reference-anchor-up fa-solid fa-angles-up"></div></a><a class="reference-link" href="https://www.antmoe.com/posts/3b43914f/">小康的butterfly主题使用文档</a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bubble-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %}，从各类教程至生活点滴，无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架{% referto '[2]','Hexo中文文档' %}，Butterfly主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %}</span><br><span class="line"></span><br><span class="line">本项目参考了Volantis{% referto '[4]','hexo-theme-volantis 标签插件' %}的标签样式。引入<span class="code">`[tag].js`</span>，并针对<span class="code">`butterfly`</span>主题修改了相应的<span class="code">`[tag].styl`</span>。在此鸣谢<span class="code">`Volantis`</span>主题众开发者。</span><br><span class="line">主要参考内容包括各个volantis的内置标签插件文档{% referto '[5]','Volantis文档:内置标签插件' %}</span><br><span class="line">Butterfly主题的各个衍生魔改{% referto '[6]','Butterfly 安装文档:标签外挂（Tag Plugins' %}{% referto '[7]','小弋の生活馆全样式预览' %}{% referto '[8]','l-lin-font-awesome-animation' %}{% referto '[9]','小康的butterfly主题使用文档' %}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">{% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?<span class="emphasis">_wv=1027&k=pGLB2C0N' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[2]','Hexo中文文档','https://hexo.io/zh-cn/docs/' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[3]','Butterfly 安装文档(一) 快速开始','https://butterfly.js.org/posts/21cfbf15/' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[4]','hexo-theme-volantis 标签插件','https://volantis.js.org/v5/tag-plugins/' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[5]','Volantis文档:内置标签插件','https://volantis.js.org/tag-plugins/' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[6]','Butterfly 安装文档:标签外挂（Tag Plugins','https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[7]','小弋の生活馆全样式预览','https://lovelijunyi.gitee.io/posts/c898.html' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[8]','l-lin-font-awesome-animation','https://github.com/l-lin/font-awesome-animation' %}</span></span><br><span class="line"><span class="emphasis">{% referfrom '[9]','小康的butterfly主题使用文档','https://www.antmoe.com/posts/3b43914f/' %}</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="旋转相册-carousel"><a href="#旋转相册-carousel" class="headerlink" title="旋转相册 carousel"></a>旋转相册 carousel</h2><div class="tip warning"><p>旋转相册标签与fancybox灯箱存在兼容性bug，若发现旋转相册呈扁平状，请关闭fancybox或换用medium_zoom。</p></div><div class="tabs" id="notation"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#notation-1">标签语法</button></li><li class="tab"><button type="button" data-href="#notation-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#notation-3">样式预览</button></li><li class="tab"><button type="button" data-href="#notation-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="notation-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% carousel [Id] , [name] %}</span><br><span class="line">![](<span class="link">/img/1.jpg</span>)</span><br><span class="line">![](<span class="link">/img/2.jpg</span>)</span><br><span class="line">![](<span class="link">/img/3,jpg</span>)</span><br><span class="line">{% endcarousel %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="notation-2"><p><code>Id</code>: 相册唯一ID，用于监测相册鼠标动作。禁止使用中文。同一页内不得出现相同ID的carousel相册。<br><code>name</code>: 相册中间显示的内容，建议用英文单引号包裹。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="notation-3"><p><div id="SF" class="carousel"></p><p><div id="SF-drag-container" class="drag-container"></p><p><div id="SF-spin-container" class="spin-container"><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110444226.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110508327.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110525753.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110600751.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110621554.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110637459.png" ><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110654150.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110707916.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110719787.png"><br><br><img src="https://npm.elemecdn.com/akilar-candyassets/image/20200907110731118.png"></p><p><p>strike freedom</p></p><p><div id="SF-carousel-ground" class="carousel-ground" style="width: 720px; height: 720px;"></div></div><script type="text/javascript">carouselinit('SF');</script></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="notation-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{% carousel 'SF','strike freedom' %}</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110444226.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110508327.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110525753.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110600751.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110621554.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110637459.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110654150.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110707916.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110719787.png</span>)</span><br><span class="line">![](<span class="link">https://npm.elemecdn.com/akilar-candyassets/image/20200907110731118.png</span>)</span><br><span class="line">{% endcarousel %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>]]></content>
<summary type="html">添加大量外挂标签样式。</summary>
</entry>
</feed>