Hexo NexT 標籤和按鈕

發表於 分類於
了解如何在 Hexo 中使用標籤、按鈕和標籤頁以增強文章的可讀性和互動性。

標籤用法

在 Hexo 中，你可以使用各種標籤和樣式來提升文章的可讀性和美觀性。以下是幾種常見的用法，包括 note、label、button 和 tabs。

note、label 顏色樣式可選擇 default、primary、success、info、warning 和 danger。

Note

使用 note 樣式可以添加提示或註釋：

HTML 方法

1
<div class="note info">我是 HTML Note</div>

Markdown 方式

1
2
3
{% note info %}
我是 Markdown Note
{% endnote %}

示例

我是 HTML Note

我是 Markdown Note

如果不需要圖示，可以加上 no-icon：

1
2
3
4
5
<div class="note info no-icon">我是 HTML Note no-icon</div>

{% note info no-icon %}
我是 標籤 Note
{% endnote %}
我是 HTML Note no-icon

我是 Markdown Note no-icon

Label

標籤可以用來標識內容的類別或類型，以下是示例：

HTML 方式

1
<span class="label primary">HTML 標籤</span>

Markdown 方式

1
{% label info @markdown 標籤 %}

示例

主要標籤

markdown 標籤

Tabs

示例

1
2
3
4
5
6
7
8
9
10
11
{% tabs Tabs, 2 %}
<!-- tab -->
我是 Tabs 1
<!-- endtab -->
<!-- tab -->
我是 Tabs 2
<!-- endtab -->
<!-- tab -->
我是 Tabs 3
<!-- endtab -->
{% endtabs %}

我是 Tabs 1

我是 Tabs 2

我是 Tabs 3

定義 Tabs 名稱

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡 2 %}
<!-- tab 新聞 -->
新聞文字
<!-- endtab -->
<!-- tab 運動 -->
運動文字
<!-- endtab -->
<!-- tab 購物 -->
購物文字
<!-- endtab -->
{% endtabs %}

新聞文字

運動文字

購物文字

加入 icon

1
2
3
4
5
6
7
8
9
10
11
{% tabs google info 2 %}
<!-- tab 我的帳號@fab fa-google -->
fab fa-google
<!-- endtab -->
<!-- tab 我的遊戲@fab fa-google-play -->
fab fa-google-play
<!-- endtab -->
<!-- tab 我的雲端@fab fa-google-drive" -->
fab fa-google-drive
<!-- endtab -->
{% endtabs %}

fab fa-google

fab fa-google-play

fab fa-google-drive

Button

按鈕可以用來添加互動性，方便用戶操作或導航。以下是示例：

HTML 方式

1
2
<a class="btn primary" href="https://example.com">HTML a</a>
<button type="button" >HTML Btn</button>

Markdown 方式

1
2
{% button /about/, about, fas fa-info-circle, 關於我 %}
{% button https://www.google.com/, 前往 Google, fab fa-google, 搜索引擎 %}

示例

HTML a

about 前往 Google