Hexo + NexT 的特殊標籤

文章如果全是 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 快速修正。

參考資料