Typecho-Butterfly标签外挂使用说明

说明

标签外挂为butterfly原生自带，你可以去原butterfly的官网查看标签外挂的使用说明，找到你想要的外挂样式，右键鼠标，点击 检查元素代码 即可查看这个元素的html内容，复制它，然后在编写文章的时候使用 !!!包裹住html既可以生成标签外挂。

不过主题也在后台文章编辑器提供了一键生成标签外挂，下面是具体使用方法。

注意：文章内的演示markdown去除了[]标签结尾的/防止被解析

Tabs

点击编辑器第六栏的第一个图标既可自动生成tab栏

Button

点击编辑器第六栏的第二个图标既可自动生成按钮

其中

href 内填入链接 如 href="blog.wehaox.com"

type 内填入类型 可留空

可填的类型有 outline block larger center right outline和block不能同用

颜色有 blue blue pink red purple orange green 默认为灰色

ico 内填入类型 可留空

可填的图标有 "far fa-hand-point-right"

使用的是fontawesome图标，可以去官网的图标库选择你想要的图标

Inline

[btn href="#null" type="" ico=""]默认[btn]
[btn href="#null" type="outline" ico=""]outline[btn]

默认
outline

Block

[btn href="#null" type="block larger" ico="far fa-hand-point-right"]Butterfly[btn]

[btn href="#null" type="block center  larger " ico="far fa-hand-point-right"]Butterfly[btn]

[btn href="#null" type="block right blue  larger " ico="far fa-hand-point-right"]Butterfly[btn]

Butterfly

Butterfly

Butterfly

这里只提供了这两种写法，具体的type参数的你可以去看butterfly官网的说明。

Note (Bootstrap Callout)

自动生成有两种，一是默认，另一种是带图标的

[note type="default modern"]内容[note]
[note-ico type="ico flat" ico="note-icon fas fa-bullhorn"]内容[note-ico]

其中type可填入的有

default flat modern simple default primary success info warning danger

方法一

点击引用即可生成默认无图标的样式(快捷键Ctrl+Q)

引用文字

[note type="flat"]内容[note]

[note type="default flat"]内容[note]

[note type="primary flat"]内容[note]

[note type="success flat"]内容[note]

[note type="info flat"]内容[note]

[note type="warning flat"]内容[note]

[note type="danger flat"]内容[note]

[note type="modern"]内容[note]

[note type="default modern"]内容[note]

[note type="primary modern"]内容[note]

[note type="success modern"]内容[note]

[note type="info modern"]内容[note]

[note type="warning modern"]内容[note]

[note type="danger modern"]内容[note]

[note type="flat"]内容[note]

disabled

[note type="disabled"]内容[note]

[note type="default disabled"]内容[note]

[note type="primary disabled"]内容[note]

[note type="success disabled"]内容[note]

[note type="info disabled"]内容[note]

[note type="warning disabled"]内容[note]

[note type="danger disabled"]内容[note]

no-icon

[note type="no-icon flat "]内容[note]

[note type="default no-icon flat "]内容[note]

[note type="primary no-icon flat "]内容[note]

[note type="success no-icon flat "]内容[note]

[note type="info no-icon flat "]内容[note]

[note type="warning no-icon flat "]内容[note]

[note type="danger no-icon flat "]内容[note]

方法二（自定义图标）

type和上面的方法一样，你只需选择带ico的note按钮即可

 [note-ico type="ico flat" ico=" note-icon fab fa-cc-visa"]你是刷 Visa 还是 UnionPay[note-ico] 

 [note-ico type="ico blue flat" ico=" note-icon fas fa-bullhorn"]2022年快到了....[note-ico]

 [note-ico type="ico  pink flat" ico=" note-icon fas fa-car-crash"]小心开车 安全至上[note-ico]

 [note-ico type="ico red flat" ico="note-icon fas fa-fan"]这是三片呢？还是四片？[note-ico]

 [note-ico type="ico orange flat" ico="note-icon fas fa-battery-half"]你是刷 Visa 还是 UnionPay[note-ico]

 [note-ico type="ico  purple  flat" ico="note-icon far fa-hand-scissors"]剪刀石头布[note-ico]

 [note-ico type="ico green flat" ico="note-icon fab fa-internet-explorer"]前端最讨厌的浏览器[note-ico]

tag-hide

这个应该不用解释了，脑子没问题的应该都看得懂

[hide-toggle name="标题"]内容[hide-toggle]

[hide-inline name="标题"]内容[hide-inline]

[hide-block name="标题"]内容[hide-block]

其他标签外挂

你需要在主题后台开启一键魔改才有效，因为这是魔改主题自带的，并非原主题自带

其中color是可以自定义的

复选框

[cb color="green" checked="checked"]选择[cb]
[cb color="green" checked=""]未选择[cb]

[cb color="green" checked="checked"]选择[/cb]
[cb color="green" checked=""]未选择[/cb]

单选框

[radio color="green"]内容[radio]

[radio color="green"]内容[/radio]

行内标签

[in-tag color="blue"]内容[in-tag]

内容