Freemind 主題擴充標籤整理

因為 Freemind 主題是基於 Bootstrap,因此 Freemind 主題提供了自己的擴充標籤,以充分發利用 Boostrap 的威力,如改變文字顏色、Buttons、Labels、Badges、Margin Note…等。

除了安裝 Freemind 主題外,還必須另外安裝 hexo-tag-bootstrap 這個 package,才能夠使用以下基於 Bootstrap 的擴充標籤。

Version


Bootstrap 3.1.1

安裝Package


在你的 Blog 目錄下執行:

1
$ npm install hexo-tag-bootstrap --save

改變本文顏色


插入一段本文,可用來使用不同的顏色強調重點。

語法

1
2
3
{% textcolor [style] %}
text string
{% endtextcolor %}

style 可以是 muted、primary、success、info、warning 或 danger。

範例

1
2
3
4
5
6
{% textcolor muted %} 灰色 {% endtextcolor %}
{% textcolor primary %} 淺藍色 {% endtextcolor %}
{% textcolor success %} 綠色 {% endtextcolor %}
{% textcolor info %} 深藍色 {% endtextcolor %}
{% textcolor warning %} 米黃色 {% endtextcolor %}
{% textcolor danger %} 紅色 {% endtextcolor %}

灰色

淺藍色

綠色

深藍色

米黃色

紅色

Buttons


插入一個 Button,可指定超連結,文字內容與 CSS樣式。

語法

1
{% btn url text [style] %}

style 可以是 primary、success、info、warning 或 danger。

範例
點燈坊

點燈坊 點燈坊 點燈坊 點燈坊 點燈坊

Labels


插入一個 Label,指定內容與 CSS 樣式,可用來表示重要關鍵字或 Hotkey 操作。

語法

1
{% label text [style] %}

style 可以是 primary、success、info、warning 或 danger。

範例

1
2
3
4
5
6
7
8
9
10
11
{% label default %}

{% label primary primary %}

{% label success success %}

{% label info info %}

{% label warning warning %}

{% label danger danger %}

default primary success info warning danger

Badges


插入一個 Badge,指定其內容,可用來表示數字。

語法

1
{% badge text %}

範例

1
{% badge 42 %}

42

Alerts


插入一個 Alert,指定其內容與 CSS 樣式,可用來表示文中 summary 或特別強調的部分。

語法

1
2
3
{% alert [style] %}
text
{% endalert %}

style 可以是 success、info、warning 或 danger。

範例

1
2
3
4
5
6
7
{% alert success %}這適合來做額外提示。{% endalert %}

{% alert info %} 這適合來提供其他相關資訊。{% endalert %}

{% alert warning %} 這適合拿來做結論。{% endalert %}

{% alert danger %} 這適合拿來強調容易出錯之處。{% endalert %}

這適合來做額外提示。
這適合來提供其他相關資訊。
這適合拿來做結論。
這適合拿來強調容易出錯之處。

Margin Note


插入一個註解在右側 margin,既不會影響本文的流暢度,又可充分利用右側 margin 空間。
語法

1
2
3
{% mnote index %} 
text
{% endmnote %}

範例

1
2
3
4
只要有支援物件導向的語言都可以使用 Design Pattern。
{% mnote 1 %}
目前主流程式語言,如 C++、Java、C#、PHP..等都有支援物件導向。
{% endmnote %}

只要有支援物件導向的語言都可以使用 Design Pattern。1 1目前主流程式語言,如 C++、Java、C#、PHP…等都有支援物件導向。

Conclusion


  • Freemind 的 Bootstrap擴充標籤,提供了更豐富的編輯元素,讓我們的文件可以更多采多姿,更接近真實書籍的效果。