Hexo + NexT 的特殊標籤

發表於 Disqus：

文章如果全是 Markdown 格式，那排版上只能依賴基本規格做應用，會有點單調。Hexo 有提供標籤擴充功能，而 NexT 有擴充此功能做了一些畫面上的變化可以利用。

提示標籤

先看效果：

default 提示

primary 提示

success 提示

info 提示

warning 提示

danger 提示

原始碼如下：

{% note default %}
default 提示
{% endnote %}

{% note primary %}
primary 提示
{% endnote %}

{% note success %}
success 提示
{% endnote %}

{% note info %}
info 提示
{% endnote %}

{% note warning %}
warning 提示
{% endnote %}

{% note danger %}
danger 提示
{% endnote %}

它的樣式是可以靠設定調整，設定檔內容如下：

# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

如果上面寫的設定，跟一開始示範的樣子長不一樣的話，代表我後來改過設定了。

頁籤功能

一樣先看示範：

頁籤一

因沒有特別命名，所以此頁籤會用 mytab 加上流水號。

頁籤二

開無痕進來會先看到我。

頁籤三

這裡有命名，會看到頁籤名不一樣。

頁籤四

可以看到這裡的流水號是從 4 開始，應該是抓 array index 作為流水號。

頁籤五

這裡有加 icon，有什麼 icon 可以來這裡找。

原始碼如下：

{% tabs mytab,2 %} 將 tab 取名為 mytab，預設會選取第二個頁籤，使用 -1 會不選取
<!-- tab -->
### 頁籤一

因沒有特別命名，所以此頁籤會用 `mytab` 加上流水號。
<!-- endtab -->
<!-- tab -->
### 頁籤二

開無痕進來會先看到我。
<!-- endtab -->
<!-- tab 這是頁籤三 -->
### 頁籤三

這裡有命名，會看到頁籤名不一樣。
<!-- endtab -->
<!-- tab -->
### 頁籤四

可以看到這裡的流水號是從 4 開始，應該是抓 array index 作為流水號。
<!-- endtab -->
<!-- tab 個人資料 @user -->
### 頁籤五

這裡有加 icon，有什麼 icon 可以來[這裡](https://fontawesome.com/icons)找。
<!-- endtab -->
{% endtabs %}

結論

這兩個標籤用法可以讓部落格更加豐富，但同時帶來的問題是，較差的移植性。因為我搬過很多次家，知道文章的原始格式的移植性很重要，因此都是盡可能應用 Markdown 格式撰寫。

此標籤未來會試用看看，不過會在文章加一下 metadata 標註這是使用什麼引擎下寫的，未來若又搬家，就可以用此 metadata 快速修正。

參考資料