声明： 绝大部分的样式都是hexo butterfly的原生样式，本人只是将功能在typecho中做了相应的移植。

我只是站在了巨人的肩膀上

为什么会有TeoTag

在此之前，博客使用了Hexo框架和Butterfly主题，文章内有很多样式都使用了Butterfly主题的写作语法；这两天将博客迁移到了typecho下，导致文章的很多非MarkDown格式内容都没法和原来一样正常显示，重新修改起来也比较麻烦，就想着把之前在Butterfly下的格式全部般过来，便有了TeoTag这个插件。

现有功能

• Note
• Tabs
• label
• timeline
• link
• hideToggle

语法和渲染结果

和Butterfly一样的用法 Butterfly

1. Note

   {% 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 %}
   

   默认 提示块标签

   default 提示块标签

   primary 提示块标签

   success 提示块标签

   info 提示块标签

   warning 提示块标签

   danger 提示块标签

2. Tabs

   {% tabs test1 %}
   <!-- tab -->
   **This is Tab 1.**
   <!-- endtab -->
   
   <!-- tab -->
   **This is Tab 2.**
   <!-- endtab -->
   
   <!-- tab -->
   **This is Tab 3.**
   <!-- endtab -->
   {% endtabs %}

   test 1test 2test 3

   This is Tab 1.

   This is Tab 2.

   This is Tab 3.

   {% tabs test2, 3 %}
   <!-- tab -->
   **This is Tab 1.**
   <!-- endtab -->
   
   <!-- tab -->
   **This is Tab 2.**
   <!-- endtab -->
   
   <!-- tab -->
   **This is Tab 3.**
   <!-- endtab -->
   {% endtabs %}

   test2 1test2 2test2 3

   This is Tab 1.

   This is Tab 2.

   This is Tab 3.

   {% tabs test3, -1 %}
   <!-- tab -->
   **This is Tab 1.**
   <!-- endtab -->
   
   <!-- tab -->
   **This is Tab 2.**
   <!-- endtab -->
   
   <!-- tab -->
   **This is Tab 3.**
   <!-- endtab -->
   {% endtabs %}

   test3 1test3 2test3 3

   This is Tab 1.

   This is Tab 2.

   This is Tab 3.

   {% tabs test4 %}
   <!-- tab 第一个Tab -->
   **tab名字为第一个Tab**
   <!-- endtab -->
   
   <!-- tab @fab fa-apple-pay -->
   **只有图标 没有Tab名字**
   <!-- endtab -->
   
   <!-- tab 炸弹@fas fa-bomb -->
   **名字+icon**
   <!-- endtab -->
   {% endtabs %}

   第一个Tab 炸弹

   tab名字为第一个Tab

   只有图标 没有Tab名字

   名字+icon

3. label

   臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
   宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

   臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

4. timeline

   {% timeline 2022 %}
   <!-- timeline 01-02 -->
   这是测试页面
   <!-- endtimeline -->
   {% endtimeline %}

   2022

   01-02

   这是测试页面

   {% timeline 2022,pink %}
   <!-- timeline 01-02 -->
   这是测试页面
   <!-- endtimeline -->
   {% endtimeline %}

   2022

   01-02

   这是测试页面

   颜色可取： blue pink red purple orange green

5. link

   这部分使用的是 (张洪Heo - 分享设计与科技生活 (zhheo.com)) 的样式

   {% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}

   引用站外地址

   获取网站的Favicon图标并显示在你的网页上

   owen0o0

   {% link TeohZY,TeohZY,https://blog.teohzy.com %}

   引用站外地址

   TeohZY

   TeohZY

6. hideToggle

   {% hideToggle 标题 %}
       内容1
       内容2
       内容3
   {% endhideToggle %}

   标题

   内容1内容2内容3