--- title: Hexo标签笔记 tags: 博客 categories: 博客 description: CC的部落格 Hexo标签笔记 translate_title: introduction-of-plugin-tags-based-on-butterfly subtitle: Introduction Of Plugin Tags Based On Butterfly date: 2021-03-05 12:00:00 updated: 2021-05-16 12:00:00 id: 22 cover: https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg hide: false --- {% note green success modern %}CC的部落格 Hexo标签笔记 ,其中大部分完整转载至糖果屋店长原文,根据本站实际情况进行了增减,仅保留源码和参数说明部分,若要查看具体效果,可前往{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.jsdelivr.net/gh/Akilarlxh/akilarlxh.github.io/img/siteicon/favicon.ico %}{% endnote %} ## 按钮 Button ### 行内 ```markdown {% btn '#',# %} {% btn '#',#,outline%} ``` ### 固定 ```markdown {% btn '#',#,far fa-hand-point-right,block larger %} {% btn '#',#,far fa-hand-point-right,block center larger %} {% btn '#',#,far fa-hand-point-right,block right blue larger %} ``` ### 居中多个 ```markdown
{% btn '#',#,far fa-hand-point-right,larger %} {% btn '#',#,far fa-hand-point-right,blue larger %} {% btn '#',#,far fa-hand-point-right,pink larger %} {% btn '#',#,far fa-hand-point-right,red larger %} {% btn '#',#,far fa-hand-point-right,purple larger %} {% btn '#',#,far fa-hand-point-right,orange larger %} {% btn '#',#,far fa-hand-point-right,green larger %}
``` ```markdown
{% btn '#',#,far fa-hand-point-right,outline larger %} {% btn '#',#,far fa-hand-point-right,outline blue larger %} {% btn '#',#,far fa-hand-point-right,outline pink larger %} {% btn '#',#,far fa-hand-point-right,outline red larger %} {% btn '#',#,far fa-hand-point-right,outline purple larger %} {% btn '#',#,far fa-hand-point-right,outline orange larger %} {% btn '#',#,far fa-hand-point-right,outline green larger %}
``` ## 按钮 btns ```markdown {% btns 样式参数 %} {% cell 标题, 链接, 图片或者图标 %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %} ``` 1. 圆角样式:rounded, circle 2. 增加文字样式:可以在容器内增加 `标题`和`

描述文字

` 3. 布局方式: 默认为自动宽度,适合视野内只有一两个的情况。 | 参数 | 含义 | | :---: | :---: | | wide | 宽一点的按钮 | | fill | 填充布局,自动铺满至少一行,多了会换行 | | center | 居中,按钮之间是固定间距 | | around | 居中分散 | | grid2 | 等宽最多2列,屏幕变窄会适当减少列数 | | grid3 | 等宽最多3列,屏幕变窄会适当减少列数 | | grid4 | 等宽最多4列,屏幕变窄会适当减少列数 | | grid5 | 等宽最多5列,屏幕变窄会适当减少列数 | ## 行内文本样式 text ```markdown {% u 文本内容 %} {% emp 文本内容 %} {% wavy 文本内容 %} {% del 文本内容 %} {% kbd 文本内容 %} {% psw 文本内容 %} {% label 文本内容 标签颜色 %} {% nota 注释词汇 , 悬停显示的注解内容 %} ``` ## 行内文本 span ```markdown {% span 样式参数(参数以空格划分), 文本内容 %} ``` 1. 字体: logo, code 2. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %} 3. 大小: small, h4, h3, h2, h1, large, huge, ultra 4. 对齐方向: left, center, right ```markdown - 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 {% span center logo large, 康纳百川 %} {% span center small, 康纳百川 %} ``` ## 段落文本 p ```markdown {% p 样式参数(参数以空格划分), 文本内容 %} ``` 1. 字体: logo, code 2. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %} 3. 大小: small, h4, h3, h2, h1, large, huge, ultra 4. 对齐方向: left, center, right ```markdown - 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 {% p center logo large, CC's Blog %} {% p center small, CC's Blog %} ``` ## 引用 note 修改主题配置文件 ```yaml note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: simple icons: false border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 ``` `Note`标签有两种用法。`icons`和`light_bg_offset`只对方法一生效。 方法一 ```markdown {% note [class] [no-icon] [style] %} Any content (support inline tags too.io). {% endnote %} ``` 方法二 ```markdown {% note [color] [icon] [style] %} Any content (support inline tags too.io). {% endnote %} ``` 方法一 | 参数 | 用法 | | :---: | :---: | | class | 【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger ) | | no-icon | 【可选】不显示 icon | | style | 【可选】可以覆盖配置中的 style (simple/modern/flat/disabled) | 方法二 | 参数 | 用法 | | :---: | :---: | | class | 【可选】标识,不同的标识有不同的配色 ( default / primary / success / info / warning / danger ) | | no-icon | 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) | | style | 【可选】可以覆盖配置中的 style (simple/modern/flat/disabled) | 方法一 1. `simple`样式 ```markdown {% note simple %}默认 提示块标签{% endnote %} {% note default simple %}default 提示块标签{% endnote %} {% note primary simple %}primary 提示块标签{% endnote %} {% note success simple %}success 提示块标签{% endnote %} {% note info simple %}info 提示块标签{% endnote %} {% note warning simple %}warning 提示块标签{% endnote %} {% note danger simple %}danger 提示块标签{% endnote %} ``` 2. `modern`样式 ```markdown {% note modern %}默认 提示块标签{% endnote %} {% note default modern %}default 提示块标签{% endnote %} {% note primary modern %}primary 提示块标签{% endnote %} {% note success modern %}success 提示块标签{% endnote %} {% note info modern %}info 提示块标签{% endnote %} {% note warning modern %}warning 提示块标签{% endnote %} {% note danger modern %}danger 提示块标签{% endnote %} ``` 3. `flat`样式 ```markdown {% note flat %}默认 提示块标签{% endnote %} {% note default flat %}default 提示块标签{% endnote %} {% note primary flat %}primary 提示块标签{% endnote %} {% note success flat %}success 提示块标签{% endnote %} {% note info flat %}info 提示块标签{% endnote %} {% note warning flat %}warning 提示块标签{% endnote %} {% note danger flat %}danger 提示块标签{% endnote %} ``` 4. `disabled`样式 ```markdown {% note disabled %}默认 提示块标签{% endnote %} {% note default disabled %}default 提示块标签{% endnote %} {% note primary disabled %}primary 提示块标签{% endnote %} {% note success disabled %}success 提示块标签{% endnote %} {% note info disabled %}info 提示块标签{% endnote %} {% note warning disabled %}warning 提示块标签{% endnote %} {% note danger disabled %}danger 提示块标签{% endnote %} ``` 5. `no-icon`样式 ```markdown {% note no-icon %}默认 提示块标签{% endnote %} {% note default no-icon %}default 提示块标签{% endnote %} {% note primary no-icon %}primary 提示块标签{% endnote %} {% note success no-icon %}success 提示块标签{% endnote %} {% note info no-icon %}info 提示块标签{% endnote %} {% note warning no-icon %}warning 提示块标签{% endnote %} {% note danger no-icon %}danger 提示块标签{% endnote %} ``` 方法二 1. `simple`样式 ```markdown {% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' simple%}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %} ``` 2. `modern`样式 ```markdown {% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' modern%}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %} ``` 3. `flat`样式 ```markdown {% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' flat%}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %} ``` 4. `disabled`样式 ```markdown {% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' disabled %}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %} ``` 5. `no-icon`样式 ```markdown {% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue no-icon %}2021年快到了....{% endnote %} {% note pink no-icon %}小心开车 安全至上{% endnote %} {% note red no-icon %}这是三片呢?还是四片?{% endnote %} {% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple no-icon %}剪刀石头布{% endnote %} {% note green no-icon %}前端最讨厌的浏览器{% endnote %} ``` ## 上标标签 tip {% tip cogs %} 主要样式参考自[小康的butterfly渐变背景标签](https://www.antmoe.com/posts/3b43914f/),自己写了个`tip.js`来渲染标签,精简了一下代码。 {% endtip %} ```markdown {% tip [参数,可选] %}文本内容{% endtip %} ``` 1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell 2. 自定义图标: 支持fontawesome。 ```markdown {% tip %}默认情况{% endtip %} {% tip success %}success{% endtip %} {% tip error %}error{% endtip %} {% tip warning %}warning{% endtip %} {% tip bolt %}bolt{% endtip %} {% tip ban %}ban{% endtip %} {% tip home %}home{% endtip %} {% tip sync %}sync{% endtip %} {% tip cogs %}cogs{% endtip %} {% tip key %}key{% endtip %} {% tip bell %}bell{% endtip %} {% tip fa-atom %}自定义font awesome图标{% endtip %} ``` ## 动态标签 anima ```markdown {% tip [参数,可选] %}文本内容{% endtip %} ``` 更多详情请参看[font-awesome-animation文档](http://l-lin.github.io/font-awesome-animation/) 1. 将所需的CSS类添加到图标(或DOM中的任何元素)。 2. 对于父级悬停样式,需要给目标元素添加指定CSS类,同时还要给目标元素的父级元素添加CSS类`faa-parent animated-hover`。(详情见示例及示例源码) You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow 3. 可以通过给目标元素添加CSS类`faa-fast`或`faa-slow`来控制动画快慢。 |On DOM load
当页面加载时
显示动画|On hover
当鼠标悬停时
显示动画|On parent hover
当鼠标悬停
在父级元素时
显示动画| |:----:|:----:|:----:| | faa-wrench animated| faa-wrench animated-hover| faa-wrench| | faa-ring animated| faa-ring animated-hover| faa-ring| | faa-horizontal animated| faa-horizontal animated-hover| faa-horizontal| | faa-vertical animated| faa-vertical animated-hover| faa-vertical| | faa-flash animated| faa-flash animated-hover| faa-flash| | faa-bounce animated| faa-bounce animated-hover| faa-bounce| | faa-spin animated| faa-spin animated-hover| faa-spin| | faa-tada animated| faa-tada animated-hover| faa-tada| | faa-pulse animated| faa-pulse animated-hover| faa-pulse| | faa-shake animated| faa-shake animated-hover| faa-shake| | faa-tada animated| faa-tada animated-hover| faa-tada| | faa-passing animated| faa-passing animated-hover| faa-passing| | faa-passing-reverse animated| faa-passing-reverse animated-hover| faa-passing-reverse| | faa-burst animated| faa-burst animated-hover| faa-burst| | faa-falling animated| faa-falling animated-hover| faa-falling| | faa-rising animated| faa-rising animated-hover| faa-rising| 1. On DOM load(当页面加载时显示动画) ```markdown {% tip warning faa-horizontal animated %}warning{% endtip %} {% tip ban faa-flash animated %}ban{% endtip %} ``` 2. 调整动画速度 ```markdown {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %} {% tip ban faa-flash animated faa-slow %}ban{% endtip %} ``` 3. On hover(当鼠标悬停时显示动画) ```markdown {% tip warning faa-horizontal animated-hover %}warning{% endtip %} {% tip ban faa-flash animated-hover %}ban{% endtip %} ``` 4. On parent hover(当鼠标悬停在父级元素时显示动画) ```markdown {% tip warning faa-parent animated-hover %}

warning

{% endtip %} {% tip ban faa-parent animated-hover %}

ban

{% endtip %} ``` ## 单选列表 radio ```markdown {% radio 样式参数(可选), 文本(支持简单md) %} ``` 1. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %} 2. 选中状态: checked ```markdown {% radio 纯文本测试 %} {% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %} {% radio red, 支持自定义颜色 %} {% radio green, 绿色 %} {% radio yellow, 黄色 %} {% radio cyan, 青色 %} {% radio blue, 蓝色 %} ``` ## 复选列表 checkbox ```markdown {% checkbox 样式参数(可选), 文本(支持简单md) %} ``` 1. 样式: plus, minus, times 2. 颜色: {% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %} 3. 选中状态: checked ```markdown {% checkbox 纯文本测试 %} {% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %} {% checkbox red, 支持自定义颜色 %} {% checkbox green checked, 绿色 + 默认选中 %} {% checkbox yellow checked, 黄色 + 默认选中 %} {% checkbox cyan checked, 青色 + 默认选中 %} {% checkbox blue checked, 蓝色 + 默认选中 %} {% checkbox plus green checked, 增加 %} {% checkbox minus yellow checked, 减少 %} {% checkbox times red checked, 叉 %} ``` ## 时间轴 timeline ```markdown {% timeline 时间线标题(可选) %} {% timenode 时间节点(标题) %} 正文内容 {% endtimenode %} {% timenode 时间节点(标题) %} 正文内容 {% endtimenode %} {% endtimeline %} ``` ## 链接卡片 link ```markdown {% link 标题, 链接, 图片链接(可选) %} ``` ## github卡片 ghcard {% note blue 'fas fa-bullhorn' modern %} ghcard使用了`github-readme-stats`的API,支持直接使用markdown语法来写。 {% endnote %} ```markdown {% ghcard 用户名, 其它参数(可选) %} {% ghcard 用户名/仓库, 其它参数(可选) %} ``` 更多参数可以参考: {% ghcard anuraghazra/github-readme-stats %} 使用`,`分割各个参数。写法为:`参数名=参数值` 以下只写几个常用参数值。 | 参数名 | 取值 | 释义 | | :---: | :---: | :---: | | hide | stars,commits,prs,issues,contribs | 隐藏指定统计 | | count_private | true | 将私人项目贡献添加到总提交计数中 | | show_icons | true | 显示图标 | | theme | 请查阅[](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md)Available Themes | 主题 | 1. 用户信息卡片 ```markdown | {% ghcard ccknbc %} | {% ghcard ccknbc, theme=vue %} | | -- | -- | | {% ghcard ccknbc, theme=buefy %} | {% ghcard ccknbc, theme=solarized-light %} | | {% ghcard ccknbc, theme=onedark %} | {% ghcard ccknbc, theme=solarized-dark %} | | {% ghcard ccknbc, theme=algolia %} | {% ghcard ccknbc, theme=calm %} | ``` 2. 仓库信息卡片 ```markdown | {% ghcard ccknbc-actions/blogroll %} | {% ghcard ccknbc-actions/blogroll, theme=vue %} | | -- | -- | | {% ghcard ccknbc-actions/blogroll, theme=buefy %} | {% ghcard ccknbc-actions/blogroll, theme=solarized-light %} | | {% ghcard ccknbc-actions/blogroll, theme=onedark %} | {% ghcard ccknbc-actions/blogroll, theme=solarized-dark %} | | {% ghcard ccknbc-actions/blogroll, theme=algolia %} | {% ghcard ccknbc-actions/blogroll, theme=calm %} | ``` ## github徽标 ghbdage {% tip cogs %} 关于ghbdage参数的更多具体用法可以参看糖果屋教程:[添加github徽标](https://akilar.top/posts/e87ad7f8) {% endtip %} ```markdown {% bdage [right],[left],[logo]||[color],[link],[title]||[option] %} ``` 1. `left`:徽标左边的信息,必选参数。 2. `right`: 徽标右边的信息,必选参数, 3. `logo`:徽标图标,图标名称详见[simpleicons](https://simpleicons.org/),可选参数。 4. `color`:徽标右边的颜色,可选参数。 5. `link`:指向的链接,可选参数。 6. `title`:徽标的额外信息,可选参数。主要用于优化SEO,但`object`标签不会像`a`标签一样在鼠标悬停显示`title`信息。 7. `option`:自定义参数,支持[shields.io](https://shields.io/)的全部API参数支持,具体参数可以参看上文中的拓展写法示例。形式为`name1=value2&name2=value2`。 {% note info modern %} 本标签的参数分为三组,用`||`分割。 {% endnote %} 1. 基本参数,定义徽标左右文字和图标 ```markdown {% bdage Theme,Butterfly %} {% bdage Frame,Hexo,hexo %} ``` 2. 信息参数,定义徽标右侧内容背景色,指向链接 ```markdown {% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %} //如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割 {% bdage Source,GitHub,GitHub||,https://github.com/ %} ``` 3. 拓展参数,支持shields的API的全部参数内容 ```markdown {% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署,默认线路托管于Vercel||style=social&logoWidth=20 %} //如果是跨顺序省略可选参数组,仍然需要写双竖线||用作分割 {% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %} ``` ## 网站卡片 sites ```markdown {% sitegroup %} {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %} {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %} {% endsitegroup %} ``` ## 行内图片 inlineimage ```markdown {% inlineimage 图片链接, height=高度(可选) %} ``` 高度:height=**px ## 单张图片 image ```markdown {% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %} ``` 1. 图片宽度高度:width=300px, height=32px 2. 图片描述:alt=图片描述(butterfly需要在主题配置文件中开启图片描述) 3. 占位背景色:bg=#f2f2f2 ## 音频 audio ```markdown {% audio 音频链接 %} ``` ## 视频 video ```markdown {% video 视频链接 %} ``` 1. 对其方向:left, center, right 2. 列数:逗号后面直接写列数,支持 1 ~ 4 列。 3. 100%宽度 ```markdown {% video https://file.nmb.show/down.php/86c301fbc6183f50fb0487e13e5a1f64.mp4 %} ``` 4. 50%宽度 ```markdown {% videos, 2 %} ...... {% endvideos %} ``` 5. 25%宽度 ```markdown {% videos, 4 %} ...... {% endvideos %} ``` ## 相册 gallery 1. gallerygroup 相册图库 ```markdown ``` 2. gallery 相册 ```markdown {% gallery %} markdown 圖片格式 {% endgallery %} ``` 1. gallerygroup 相册图库 {% note info %} 思维拓展一下,相册图库的实质其实就是个快捷方式,可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册,完全可以作为一个链接卡片,链接到视频、QQ、友链都是不错的选择。 {% endnote %} | 参数名 | 释义 | | :---: | :---: | | name | 图库名字 | | description | 图库描述 | | link | 链接到对应相册的地址 | | img-url | 图库封面 | 2. gallery 相册 区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。**建议在粘贴时故意使用长短、大小、横竖不一的图片**,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕) ## 隐藏折叠 tag-hide ### hide-inline ```markdown {% hideInline 描述,按钮颜色,字体颜色 %} {% hideInline 描述 %} ``` ### hide-block ```markdown {% hideBlock 描述 %} ...... {% endhideBlock %} ``` ### hide-toggle ```markdown {% hideToggle 描述 %} ...... {% endhideToggle %} ``` ## 折叠框 folding ```markdown {% folding 参数(可选), 标题 %} ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg) {% endfolding %} ``` 1. 颜色:blue, cyan, green, yellow, red 2. 状态:状态填写 open 代表默认打开。 ## 分栏 tab ```markdown {% tabs Unique name, [index] %} Any content (support inline tags too). {% endtabs %} ``` 1. Unique name : - 选项卡块标签的唯一名称,不带逗号。 - 将在#id中用作每个标签及其索引号的前缀。 - 如果名称中包含空格,则对于生成#id,所有空格将由破折号代替。 - 仅当前帖子/页面的URL必须是唯一的! 2. [index]: - 活动选项卡的索引号。 - 如果未指定,将选择第一个标签(1)。 - 如果index为-1,则不会选择任何选项卡。 - 可选参数。 3. [Tab caption]: - 当前选项卡的标题。 - 如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。 - 如果未指定标题,但指定了图标,则标题将为空。 - 可选参数。 4. [@icon]: - FontAwesome图标名称(全名,看起来像“ fas fa-font”) - 可以指定带空格或不带空格; - 例如'Tab caption @icon' 和 'Tab caption@icon'. - 可选参数。 嵌套 ```markdown {% subtabs name %} ...... {% endsubtabs %} ``` ## 数据集合 issues ```markdown {% issues type | api=url | group=key:value1,value2(可选) %} ``` type(类型) 根据需求不同,会将 issues 内容解析成不同的 HTML 标签,目前支持的类型有: 1. 时间轴`timeline`: 解析成`timeline`标签,`issue`的标题对应`timeline`的时间,`issue`的内容对应`timeline`的内容。 2. 网站卡片`sites`: 解析成`sites`标签,需要有`JSON`代码块,各参数对应`sites`标签参数: ```json { "title": "", "screenshot": "", "url": "", "avatar": "", "description": "", "「keywords」": "" } ``` | 参数 | 释义 | | :---: | :---: | | title | 网站名称 | | screenshot | 网站预览图 | | url | 网站链接,需要添加 ``https://协议组成完整域名。 否则可能被识别成站点相对路径。 | | avatar | 站长头像 | | 「keywords」 | 分组依据, 未必要叫「keywords」, 详见下文group(分组) | api(接口) url为可以调的通的API,例如: ```plain api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active ``` | 参数 | 释义 | | :---: | :---: | | [](https://gitee.com/api/v5/)https://gitee.com/api/v5/ | gitee仓库的api | | [](https://api.github.com/)https://api.github.com/ | github仓库的api | | repos/xaoxuu/friends/issues | repos/用户名/仓库名/issues | | sort=updated&state=open | 界定哪些类型的``issues会 被读取过来渲染成相应的标签 | | page=1&per_page=100 | 读取前100条issues | | labels=active | 控制默认的issue不显示, 只有自己审核通过 添加了active标签之后才会显示 | group(分组) `sites`类型的`issues`默认不分组,如果需要分组,可指定分组依据`「keywords」`,和分组白名单`「value1」`、`「value2」`等,例如: ```yaml group=version:v4,v3,v2 # 此处的version就是上文中的「keywords」 ``` 这个参数的作用就是,筛选出`JSON`中包含`"version": "v4"`或者`"version":"v3"`或者`"version": "v2"`的数据,并分组显示。 仓库ISSUES模板配置 因本主题已去 jquery 化(我也不想要,这个标签也不怎么用,不过那个时间线可以用来发说说什么的),所以为了正常显示需要先引入相关依赖,这里不再演示,请直接查看源码即可 ```markdown ``` + 时间轴标签`timeline`渲染 ```markdown {% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %} ``` + 网站卡片标签`sites`渲染 - gitee仓库示例 ```markdown {% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %} ``` - github仓库示例 ```markdown {% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %} ``` + 网站卡片标签`sites`分组渲染 这是`Volantis`主题官网的「示例博客」页面的数据: ```markdown {% issues 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 %} ``` ## 诗词标签 poem ```markdown {% poem [title],[author] %} 诗词内容 {% endpoem %} ``` ## 进度条 progress {% note info morden %} 进度条标签参考[沂佰孜猫-给HEXO文章添加彩色进度条](https://rongbuqiu.com/jdt.html)。 源样式提取自[Cuteen](https://zwying0814.gitbook.io/cuteen/)主题。 {% endnote %} ```markdown {% progress [width] [color] [text] %} ``` 1. `width`: 0到100的阿拉伯数字 2. `color`: 颜色,取值有{% span red, red %},{% span yellow, yellow %},{% span green, green %},{% span cyan, cyan %},{% span blue, blue %},{% span gray, gray %} 3. `text`:进度条上的文字内容 ## mermaid ```markdown {% mermaid %} pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 {% endmermaid %} {% mermaid %} gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d {% endmermaid %} {% mermaid %} gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d {% endmermaid %} ``` ## 动态图表 chartjs ```markdown {% chart 90% 300 %} { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45] }] }, options: { responsive: true, title: { display: true, text: 'Chart.js Line Chart' } } } {% endchart %} ``` 关于预览,更多详细内容,请分别前往 [插件文档](https://shen-yu.gitee.io/2020/chartjs) | [原文档](https://chartjs.bootcss.com/docs) 查看 ## 媒体 mmedia {% tabs mmedia,11 %} 简介 hexo-tag-mmedia 是一个能在 Hexo 中快速插入媒体标签的插件,目前支持的标签和平台有(持续开发中): - [x] Audio - [x] Video - [x] [Aplayer]([https://github.com/DIYgod/APlayer)](https://github.com/DIYgod/APlayer)) - [x] [MetingJS]([https://github.com/metowolf/MetingJS)](https://github.com/metowolf/MetingJS)) - [x] [Dplayer]([https://github.com/DIYgod/DPlayer)](https://github.com/DIYgod/DPlayer)) - [x] [哔哩哔哩]([https://www.bilibili.com/)](https://www.bilibili.com/)) - [x] [西瓜视频]([https://www.ixigua.com/)](https://www.ixigua.com/)) - [ ] [YouTube]() - [x] [ArtPlayer]([https://github.com/zhw2590582/ArtPlayer)](https://github.com/zhw2590582/ArtPlayer)) DEMO [[http://demo.hexo-tag-mmedia.u2sb.com/](http://demo.hexo-tag-mmedia.u2sb.com/)](http://demo.hexo-tag-mmedia.u2sb.com/](http://demo.hexo-tag-mmedia.u2sb.com/)) 使用 hexo-tag-mmedia 插件和其他 hexo 插件使用方法类似,诸如 如何启用一个插件 之类的共性问题就不再赘述了,只说 hexo-tag-mmedia 相关的。 安装 ```bash npm install hexo-tag-mmedia@1 --save ``` ```bash pnpm install hexo-tag-mmedia@1 --save ``` ```bash yarn add hexo-tag-mmedia@1 --save ``` 配置 如需修改配置,请务必不要保留空选项,空选项会覆盖默认配置,严重可能直接导致插件无法使用。 单项使用的文档中会详细讲解对应的使用文档,请自行阅读后再做配置。 下面只是示例,请勿全盘复制,请看清后面的讲解后组织自己的配置文件。 持续更新中,详情见详细文档和 [源码]([https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml)](https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml)) ```yaml mmedia: audio: default: video: default: aplayer: js: [https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js](https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js) css: [https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css](https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css) default: contents: meting: js: [https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js](https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js) api: default: dplayer: js: [https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js](https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js) hls_js: [https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js](https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js) dash_js: [https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js](https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js) shaka_dash_js: [https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js](https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js) flv_js: [https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js](https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js) webtorrent_js: [https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js](https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js) default: contents: bilibili: default: page: 1 danmaku: true allowfullscreen: allowfullscreen sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups width: 100% max_width: 850px margin: auto xigua: default: autoplay: false startTime: 0 allowfullscreen: allowfullscreen sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups width: 100% max_width: 850px margin: auto ``` 解释 - 配置项较多目的是给予最大的自定义权限,默认情况下不做配置也可以使用。 - 配置文件放在博客根目录的 `_config.yml` 中 - default 为默认配置,在 `_config.yml` 中填写就不需要在每个标签全部写入了,所有允许在 mmedia 标签上写入的配置项,均可在 default 下配置。 - default 下 contents 项,用于设置 JSON 类型的默认配置,注意要使用 yaml 格式写默认配置,以下是几个示例。 示例 如无法读懂下面的示例,请阅读后面的文档后再回来看。 修改 Aplayer 的 js 文件: ```yaml mmedia: aplayer: js: [https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js](https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js) css: [https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css](https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css) ``` 将 Aplayer 的 JS 和 CSS 放入博客目录: 首先请下载 `APlayer.min.js` 和 `APlayer.min.js` 文件,放入博客下 `source/assets/js/` 和 `source/assets/css/` 下(路径只是示例) ```yaml mmedia: aplayer: js: /assets/js/APlayer.min.js css: /assets/css/APlayer.min.css ``` Meting 修改循环方式为随机循环: ```yaml mmedia: meting: default: loop: all order: random ``` Dplayer 修改弹幕 API: ```yaml mmedia: dplayer: default: contents: danmaku: api: [https://api.prprpr.me/dplayer/v3/](https://api.prprpr.me/dplayer/v3/) ``` 使用 下面只是快速示例,请阅读后面的文档后再回来看。示例只是为了展示配置方式瞎写的,一些配置不一定正确,不要照抄。 ```markdown {% mmedia "audio" "src:a.mp3" %} ``` ```markdown {% mmedia "aplayer" "name:songName" "url:a.mp3" %} ``` ```markdown {% mmedia "meting" "auto=[https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html"](https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html") %} ``` ```markdown {% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %} ``` ```markdown {% mmedia "xigua" "xid=6925997698269053453" %} ``` ```markdown {% mmedias "dplayer" "flv:" "url:[https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4"](https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4") %} { "contextmenu": [ { text: "custom1", link: "[https://github.com/DIYgod/DPlayer"](https://github.com/DIYgod/DPlayer") } ] } {% endmmedias %} ``` ```markdown {% mmedias "aplayer" "autoplay:false" %} { "volume": 0.8, "audio": [ { "name": "name1", "artist": "artist1", "url": "url1.mp3", "cover": "cover1.jpg", "lrc": "lrc1.lrc", "theme": "#ebd0c2" }, { "name": "name2", "artist": "artist2", "url": "url2.mp3", "cover": "cover2.jpg", "lrc": "lrc2.lrc", "theme": "#46718b" } ] } {% endmmedias %} ``` markdown 内可以使用两种标签作为插件,分别是 `mmedia` 和 `mmedias`,使用方式为: ```markdown {% mmedia %} ``` ```markdown {% mmedias %} {% endmmedias %} ``` 只使用 `args` 作为传参方式时,两种标签均可使用,当需要使用 `contents` 传参时,只能使用 `mmedias`。 后面第一个参数用于标记标签,可选(以详细文档为主,持续更新中): `audio` `video` `meting` `aplayer` `dplayer` `bilibili` `xigua` 再后面的参数将直接作为 `args` 参数直接传入插件。 参数 传入标签的参数可以写入到三个位置,分别为:`_config.yml`,`args`,`contents`,其中只有部分插件可使用 `contents` 配置,具体看详细文档,如有冲突项,覆盖规则为(后面的会被前面发覆盖): `contents` -> `args` -> `_config.yml` -> `插件默认` 写入到 `args` 上的参数,有两种写法,分别是使用 `:` 和 `=` 分割,两种写法是等效的,在遇到第一个 `:` 或 `=` 时会自动分割,例如: ```markdown {% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %} {% mmedia "bilibili" "bvid=BV1hb4y1R7xf" %} ``` 两种写法是等效的。 如果遇到布尔类型的参数,可以简写 ```markdown {% mmedia "audio" "src:a.mp3" "autoplay:" %} ``` ```markdown {% mmedia "audio" "src:a.mp3" "autoplay:true" %} ``` 两种写法等效,但需要注意,`:` 或 `=` 一定不能省略。 JSON 传参 支持 JSON 方式传参,其中 JSON 为 [JSON5]([https://json5.org/)](https://json5.org/)) 规范。 示例: ```markdown {% mmedias "aplayer" "autoplay:false" %} { "volume": 0.8, "audio": [ { "name": "name1", "artist": "artist1", "url": "url1.mp3", "cover": "cover1.jpg", "lrc": "lrc1.lrc", "theme": "#ebd0c2" }, { "name": "name2", "artist": "artist2", "url": "url2.mp3", "cover": "cover2.jpg", "lrc": "lrc2.lrc", "theme": "#46718b" } ] } {% endmmedias %} ``` 从 0.x 升级 考虑到一部分用户 0.x 版本使用时间较长,迁移成本较高,遂将 0.x 单独发布为一个包,可以用 1.x 版本同时安装。 详情见 [0.X 版本](0990.版本0.md)。 虽然能兼容使用,但建议及时修改文章到 1.x ,0.x 版本已不再继续维护。 开发者要说的几句话 1. 这个插件并不完美,如果使用中遇到问题,请熟读文档,如果还是有问题,请再读一遍文档,还是有问题,请向开发者反馈。 2. 关于 JS 重复请求,请升级客户端浏览器版本,两个一样的 JS,只会请求一次,暂时没有想到什么好的办法,如果有,请及时告诉 Aki 。 3. 关于 pjax,这东西真的不想去做兼容(其实也不难),如果以后闲得无聊的话,可能会做,但不要催 Aki 关于 pjax 兼容的问题。 4. 不要局限于示例,放开手脚,大胆去尝试,这个插件的开放性真的非常的大。 介绍 可以插入 html5 原生 audio 标签 使用 ```markdown {% mmedia "audio" "src:a.mp3" %} ``` ```markdown {% mmedia "audio" "src:[https://baidu.com/a.mp3"](https://baidu.com/a.mp3") "autoplay:true" %} ``` 参数 > 此部分请熟读 [Audio 相关介绍]([https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element)](https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element)) - 使用 `:` 或 `=` 分割。 - 所有 `