Freemind 主題的 Bootstrap 擴充標籤快速導覽

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擴充標籤，提供了更豐富的編輯元素，讓我們的文件可以更多采多姿，更接近真實書籍的效果
2015-08-28
▲