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

引用站外地址
Butterfly
Butterfly

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

为什么会有TeoTag

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

引用站外地址
TeoTag
github

现有功能

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

语法和渲染结果

和Butterfly一样的用法 Butterfly

  1. Note

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    {% tabs test1 %}
    <!-- tab -->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 2.**
    <!-- endtab -->

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

    This is Tab 1.

    This is Tab 2.

    This is Tab 3.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    {% tabs test2, 3 %}
    <!-- tab -->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 2.**
    <!-- endtab -->

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

    This is Tab 1.

    This is Tab 2.

    This is Tab 3.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    {% tabs test3, -1 %}
    <!-- tab -->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 2.**
    <!-- endtab -->

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

    This is Tab 1.

    This is Tab 2.

    This is Tab 3.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    {% tabs test4 %}
    <!-- tab 第一个Tab -->
    **tab名字为第一个Tab**
    <!-- endtab -->

    <!-- tab @fab fa-apple-pay -->
    **只有图标 没有Tab名字**
    <!-- endtab -->

    <!-- tab 炸弹@fas fa-bomb -->
    **名字+icon**
    <!-- endtab -->
    {% endtabs %}

    tab名字为第一个Tab

    只有图标 没有Tab名字

    名字+icon

  3. label

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

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

  4. timeline

    1
    2
    3
    4
    5
    		 
    {% timeline 2022 %}
    <!-- timeline 01-02 -->
    这是测试页面
    <!-- endtimeline -->
    {% endtimeline %}

    2022

    01-02

    这是测试页面

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

    2022

    01-02

    这是测试页面

    颜色可取： blue pink red purple orange green

  5. link

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

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

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

  6. hideToggle

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

    标题


    内容1
    内容2
    内容3