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 快速修正。