Markdown语法Tag

label/btn/toggle/timeline

臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州疲敝，此誠危急存亡之秋也！然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。

{% label text color %}
text	文字
color  【可選】背景顏色，默認為 default
default /blue/pink/red/purple/orange/green

臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。

哪個英文字母最酷？因為西裝褲(C裝酷)
門裏站着一個人? 閃

查看答案

傻子，怎麼可能有答案

哪個英文字母最酷？ {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %}
門裏站着一個人? {% hideInline 閃 %}

查看答案
{% hideBlock 查看答案 %}
傻子，怎麼可能有答案
{% endhideBlock %}

Butterfly安裝方法

在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% hideToggle Butterfly安裝方法 %}
在你的博客根目錄裏
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安裝比較新的dev分支，可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
{% endhideToggle %}

2022

01-02

這是測試頁面

2022

01-02

這是測試頁面

{% label text color %}
color	timeline 顏色
default(留空) / blue / pink / red / purple / orange / green

{% timeline 2022 %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,green %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

只有圖標沒有Tab名字

note

1
2
3

{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

color	icon	style
【可選】`顔色`	【可選】可配置自定義`icon`	【可選】可以覆蓋配置中的 `style`
default / blue / pink / red / purple / orange / green	只支持 fontawesome 圖標, 也可以配置 no-icon	simple/modern/flat/disabled

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

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

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

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

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

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

tabs

tab名字為第一個Tab

只有圖標沒有Tab名字

名字+icon

{% tabs test1 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

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

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

button

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

This is my website, click the button  <a class="btn-beautify block larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
This is my website, click the button  <a class="btn-beautify block center larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
This is my website, click the button  <a class="btn-beautify block right blue larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>

<div class="btn-center">
<a class="btn-beautify larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify blue larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify pink larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify red larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify purple larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify orange larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify green larger" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

1
2
3

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

@DevDocstwitter.com/devdocs/status/356095192085962752

1
2
3

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Seth GodinWelcome to Island Marketing

1
2
3

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

flink

友情鏈接

那些人，那些事

網站

值得推薦的網站

- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/img/avatar.png
      descr: 今日事,今日畢
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架

- class_name: 網站
  class_desc: 值得推薦的網站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 視頻網站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中國最大社交分享平臺
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平臺
{% endflink %}

  pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" :  5

{% mermaid %}
pie
    title Key elements in Product X
permalink: Markdown语法Tag.html
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

  journey
    title My working day
permalink: Markdown语法Tag.html
    section Go to work
        Make tea: 5: Me
        Go upstairs: 3: Me
        Do work: 1: Me, Cat
    section Go home
        Go downstairs: 5: Me
        Sit down: 5: Me

{% mermaid %}
journey
    title My working day
permalink: Markdown语法Tag.html
    section Go to work
        Make tea: 5: Me
        Go upstairs: 3: Me
        Do work: 1: Me, Cat
    section Go home
        Go downstairs: 5: Me
        Sit down: 5: Me
{% endmermaid %}

  gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
permalink: Markdown语法Tag.html
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

{% mermaid %}
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
permalink: Markdown语法Tag.html
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

{% endmermaid %}