文章主體是博客最為重要的部分，一切內容都由它來承載。hexo支持顯示.md文件，但Markdown語法自帶的標簽有點少，玩法有所限制，於是可以通過引入主題外挂標簽的方式來使內容更加豐富。

確保先引入了外挂摽簽

雖然Butterfly有內置折疊框hideToggle標簽，但是Volantis的folding更好看點

引入外挂標簽
  1. 安裝插件，在根目錄打開終端運行:
    1
    npm install hexo-butterfly-tag-plugins-plus --save
  2. hexo自帶的markdown渲染插件hexo-renderer-marked和外挂標簽語法兼容性較差，建議換成hexo-renderer-kramed
    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
  3. 添加配置信息
    在站點配置文件加或者主題配置文件加都行
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    tag_plugins:
      enable: true # 开关
      priority: 5 #过滤器优先权
      issues: false #issues标签依赖注入开关
      link:
        placeholder: /img/link.png #link_card标签默认的图标图片
      CDN:
        anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
        jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
        issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
        iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js
        carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
        tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
  4. 參數釋義
參數備選值/類型釋義
enabletrue/false【必选】控制开关
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
issuestrue/false【可选】issues标签控制开关，默认为false
link.placeholderURL【必选】link卡片外挂標簽的默認圖
CDN.animaURL【可选】动画标签anima的依赖
CDN.jqueryURL【可选】issues标签依赖
CDN.issuesURL【可选】issues标签依赖
CDN.iconfontURL【可选】iconfont标签symbol样式引入，如果不想引入，则设为false
CDN.carouselURL【可选】carousel旋转相册标签鼠标拖动依赖，如果不想引入则设为false
CDN.tag_plugins_cssURL【可选】外挂标签样式的CSS依赖，为避免CDN缓存延迟，建议将@latest改为具体版本号

行內文本樣式 text

1
2
3
4
5
6
{% u 文本內容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
1
2
3
4
5
6
1. 這是 {% u 下劃線 %} 的效果
2. 這是 {% emp 着重號 %} 的效果
3. 這是 {% wavy 波浪線 %} 的效果
4. 這是 {% del 刪除線 %} 的效果
5. 這是帶鍵盤樣式 {% kbd ctrl %} + {% kbd c %}
6. 這是密碼樣式的效果: {% psw king真帥! %}
  1. 這是 下劃線 的效果
  2. 這是 着重號 的效果
  3. 這是 波浪線 的效果
  4. 這是 刪除線 的效果
  5. 這是帶鍵盤樣式 ctrl + c
  6. 這是密碼樣式的效果: king真帥!

行內文本 span

1
{% span 樣式的參數，以空格劃分，文本內容 %}
  1. 字體: logo，code
  2. 顏色: red、yellow、green、cyan、blue、gray
  3. 大小: small,h4,3,2,1,large,huge,ultra
  4. 對齊方向: left,center,right
1
2
3
4
5
6
1. 組合示例，比如輸入{% span red code,顏色和字體的組合 %}，{% span yellow right, 向右對齊的黃色字 %}
2. 字體
{% span center logo ultra red, KingHong %}
{% span center logo huge yellow, KingHong %}
{% span center logo large green, KingHong %}
{% span center logo small cyan, KingHong %}
渲染示例
  1. 組合示例，比如輸入顏色和字體的組合，向右對齊的黃色字
  2. 字體



段落文本 p

1
{% p 樣式的參數，以空格劃分，文本內容 %}
  1. 字體: logo，code
  2. 顏色: red、yellow、green、cyan、blue、gray
  3. 大小: small,h4,3,2,1,large,huge,ultra
  4. 對齊方向: left,center,right
1
2
3
4
5
6
1. 組合示例，比如輸入{% p red code,顏色和字體的組合 %}、{% p yellow right, 向右對齊的黃色字 %}、{% p gray center,顏色和對齊 %}、{% p blue,藍色 %}
2. 字體
{% p center logo ultra red, KingHong %}
{% p center logo huge yellow, KingHong %}
{% p center logo large green, KingHong %}
{% p center logo small cyan, KingHong %}
渲染示例
  1. 組合示例，比如輸入

    顏色和字體的組合

    、

    向右對齊的黃色字

    、

    顏色和對齊

    、

    藍色

  2. 字體

引用 note

1
2
3
4
5
6
7
8
9
10
11
# 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: simple
icons: false
border_radius: 3
# 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

icons和light_bg_offset只對自帶icon方式生效

1
2
3
4
5
6
7
8
# 自带icon
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
# 外部icon
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
  1. class: 標識，不同的標識有不同的配色(default/primary/success/info/warning/danger)
  2. no-icon: 不显示icon
  3. icon: 可配置自定義icon(只支持fontawesome圖標)
  4. style: 可以覆蓋配置中的style(simple/modern/flat/disabled)
自帶icon
  1. simple樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note simple %}默认 提示块标签{% endnote %}

    {% note default simple %}default 提示块标签{% endnote %}

    {% note primary simple %}primary 提示块标签{% endnote %}

    {% note success simple %}success 提示块标签{% endnote %}

    {% note info simple %}info 提示块标签{% endnote %}

    {% note warning simple %}warning 提示块标签{% endnote %}

    {% note danger simple %}danger 提示块标签{% endnote %}
  2. modern樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note modern %}默认 提示块标签{% endnote %}

    {% note default modern %}default 提示块标签{% endnote %}

    {% note primary modern %}primary 提示块标签{% endnote %}

    {% note success modern %}success 提示块标签{% endnote %}

    {% note info modern %}info 提示块标签{% endnote %}

    {% note warning modern %}warning 提示块标签{% endnote %}

    {% note danger modern %}danger 提示块标签{% endnote %}
  3. flat樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note flat %}默认 提示块标签{% endnote %}

    {% note default flat %}default 提示块标签{% endnote %}

    {% note primary flat %}primary 提示块标签{% endnote %}

    {% note success flat %}success 提示块标签{% endnote %}

    {% note info flat %}info 提示块标签{% endnote %}

    {% note warning flat %}warning 提示块标签{% endnote %}

    {% note danger flat %}danger 提示块标签{% endnote %}
  4. disabled樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note disabled %}默认 提示块标签{% endnote %}

    {% note default disabled %}default 提示块标签{% endnote %}

    {% note primary disabled %}primary 提示块标签{% endnote %}

    {% note success disabled %}success 提示块标签{% endnote %}

    {% note info disabled %}info 提示块标签{% endnote %}

    {% note warning disabled %}warning 提示块标签{% endnote %}

    {% note danger disabled %}danger 提示块标签{% endnote %}
  5. no-icon樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note no-icon %}默认 提示块标签{% endnote %}

    {% note default no-icon %}default 提示块标签{% endnote %}

    {% note primary no-icon %}primary 提示块标签{% endnote %}

    {% note success no-icon %}success 提示块标签{% endnote %}

    {% note info no-icon %}info 提示块标签{% endnote %}

    {% note warning no-icon %}warning 提示块标签{% endnote %}

    {% note danger no-icon %}danger 提示块标签{% endnote %}
外部icon
  1. simple樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note 'fab fa-cc-visa' simple %}刷Visa嗎?還是UionPay{% endnote %}

    {% note blue 'fas fa-bullhorn' simple %}排好隊，間隔一米距離...{% endnote %}

    {% note pink 'fas fa-car-crash' simple %}撞車啦!{% endnote %}

    {% note red 'fas fa-fan' simple %}小風車~呼~呼~{% endnote %}

    {% note orange 'fas fa-battery-half' simple %}電量剩一半了...{% endnote %}

    {% note purple 'far fa-hand-scissors' simple %}剪刀!蕪我贏了!{% endnote %}

    {% note green 'fab fa-internet-explorer' simple %}傻逼360{% endnote %}
  2. mordern樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note 'fab fa-cc-visa' modern %}刷Visa嗎?還是UionPay{% endnote %}

    {% note blue 'fas fa-bullhorn' modern %}排好隊，間隔一米距離...{% endnote %}

    {% note pink 'fas fa-car-crash' modern %}撞車啦!{% endnote %}

    {% note red 'fas fa-fan' modern %}小風車~呼~呼~{% endnote %}

    {% note orange 'fas fa-battery-half' modern %}電量剩一半了...{% endnote %}

    {% note purple 'far fa-hand-scissors' modern %}剪刀!蕪我贏了!{% endnote %}

    {% note green 'fab fa-internet-explorer' modern %}傻逼360{% endnote %}
  3. flat樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note 'fab fa-cc-visa' flat %}刷Visa嗎?還是UionPay{% endnote %}

    {% note blue 'fas fa-bullhorn' flat %}排好隊，間隔一米距離...{% endnote %}

    {% note pink 'fas fa-car-crash' flat %}撞車啦!{% endnote %}

    {% note red 'fas fa-fan' flat %}小風車~呼~呼~{% endnote %}

    {% note orange 'fas fa-battery-half' flat %}電量剩一半了...{% endnote %}

    {% note purple 'far fa-hand-scissors' flat %}剪刀!蕪我贏了!{% endnote %}

    {% note green 'fab fa-internet-explorer' flat %}傻逼360{% endnote %}
  4. disabled樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note 'fab fa-cc-visa' disabled %}刷Visa嗎?還是UionPay{% endnote %}

    {% note blue 'fas fa-bullhorn' disabled %}排好隊，間隔一米距離...{% endnote %}

    {% note pink 'fas fa-car-crash' disabled %}撞車啦!{% endnote %}

    {% note red 'fas fa-fan' disabled %}小風車~呼~呼~{% endnote %}

    {% note orange 'fas fa-battery-half' disabled %}電量剩一半了...{% endnote %}

    {% note purple 'far fa-hand-scissors' disabled %}剪刀!蕪我贏了!{% endnote %}

    {% note green 'fab fa-internet-explorer' disabled %}傻逼360{% endnote %}
  5. no-icon樣式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% note 'fab fa-cc-visa' no-icon %}刷Visa嗎?還是UionPay{% endnote %}

    {% note blue 'fas fa-bullhorn' no-icon %}排好隊，間隔一米距離...{% endnote %}

    {% note pink 'fas fa-car-crash' no-icon %}撞車啦!{% endnote %}

    {% note red 'fas fa-fan' no-icon %}小風車~呼~呼~{% endnote %}

    {% note orange 'fas fa-battery-half' no-icon %}電量剩一半了...{% endnote %}

    {% note purple 'far fa-hand-scissors' no-icon %}剪刀!蕪我贏了!{% endnote %}

    {% note green 'fab fa-internet-explorer' no-icon %}傻逼360{% endnote %}
自帶icon

  1. simple樣式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  2. modern樣式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  3. flat樣式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  4. disabled樣式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

  5. no-icon樣式

    默认 提示块标签

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

外部icon

  1. simple樣式

    刷Visa嗎?還是UionPay

    排好隊，間隔一米距離…

    撞車啦!

    小風車~呼~呼~

    電量剩一半了…

    剪刀!蕪我贏了!

    傻逼360

  2. mordern樣式

    刷Visa嗎?還是UionPay

    排好隊，間隔一米距離…

    撞車啦!

    小風車~呼~呼~

    電量剩一半了…

    剪刀!蕪我贏了!

    傻逼360

  3. flat樣式

    刷Visa嗎?還是UionPay

    排好隊，間隔一米距離…

    撞車啦!

    小風車~呼~呼~

    電量剩一半了…

    剪刀!蕪我贏了!

    傻逼360

  4. disabled樣式

    刷Visa嗎?還是UionPay

    排好隊，間隔一米距離…

    撞車啦!

    小風車~呼~呼~

    電量剩一半了…

    剪刀!蕪我贏了!

    傻逼360

  5. no-icon樣式

    刷Visa嗎?還是UionPay

    排好隊，間隔一米距離…

    撞車啦!

    小風車~呼~呼~

    電量剩一半了…

    剪刀!蕪我贏了!

    傻逼360

上標標簽 tip

1
{% tip 樣式的參數，以空格劃分 %}文本內容{% endtip %}
  1. 樣式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定義圖標: 支持fontawesome
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

動態標簽 animated

动态标签的实质是引用了 font-awesome-animation 的 css 样式，不一定局限于 tip 标签，也可以是其他标签。

1
{% tip 參數，以空格劃分 %}文本內容{% endtip %}
  1. 將所需的CSS類添加到圖標（或DOM中的任何元素）。
  2. 對於父級懸停樣式，需要給目標元素添加指定CSS類，同時还要给目標元素的父級元素添加CSS類faa-parent animated-hover。（详情见示例及示例源码）
  3. 可以通过给目标元素添加CSS类faa-fast或faa-slow来控制动画快慢。
  1. On DOM load(當頁面加載時顯示動畫)
    1
    2
    {% tip warning faa-horizontal animated %}warning{% endtip %}
    {% tip ban faa-flash animated %}ban{% endtip %}
  2. 調整動畫速度
    1
    2
    {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
    {% tip ban faa-flash animated faa-slow %}ban{% endtip %}
  3. on hover
    1
    2
    {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
    {% tip ban faa-flash animated-hover %}ban{% endtip %}
  4. on parent hover
    1
    2
    {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
    {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

  1. On DOM load(當頁面加載時顯示動畫)

    warning

    ban

  2. 調整動畫速度

    warning

    ban

  3. on hover

    warning

    ban

  4. on parent hover

    warning

    ban

折疊框 folding

1
2
3
{% folding 參數(可選)，標題 %}
被折疊的東西
{% endfolding %}
  1. 顏色: blue,cyan,green,yellow,red
  2. 狀態: 填open代表默認打開
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{% folding 查看图片测试 %}

![](https://s2.loli.net/2022/12/05/rD4auUOEWljf8Rc.png)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
代碼块
{% endfolding %}

{% folding yellow, 查看列表测试 %}
- 肚子
- 好餓
- 想吃
- 東西

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

套娃成功! <span><img src='https://s2.loli.net/2022/12/06/nRym16UNhKwIlrX.jpg' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

特效標簽wow

要先裝插件
  1. 安裝插件，根目錄運行指令
    1
    npm install hexo-butterfly-wowjs --save
  2. 添加配置信息，站點配置和主題配置都行
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    wowjs:
      enable: true #控制动画开关。true是打开，false是关闭
      priority: 10 #过滤器优先级
      mobile: false #移动端是否启用，默认移动端禁用
      animateitem:
        - class: recent-post-item #必填项，需要添加动画的元素的class
          style: animate__zoomIn #必填项，需要添加的动画
          duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
          delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
          offset: 100 #选填项，开始动画的距离（相对浏览器底部）
          iteration: 2 #选填项，动画重复的次数
        - class: card-widget
          style: animate__zoomIn
      animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
      wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
      wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
1
2
3
{% wow [animete],[duration],[delay],[ofset],[iteration] %}
內容
{% endwow %}
  1. animate: 動畫樣式，詳見animate.css參考文檔
  2. duration: 可選，動畫持續時間，單位可以是ms也可以是s
  3. delay: 可選，動畫開始的延遲時間
  4. offset: 可選，開始動畫的距離(相對瀏覽器底部)
  5. iteration: 可選，動畫的重复次數
  1. flip動畫效果
    1
    2
    3
    4
    5
    {% wow animate__flip %}
    {% note green 'fas fa-fan' modern%}
    `flip`动画效果
    {% endnote %}
    {% endwow %}
  2. zoomIn動畫效果，持续5s，延时5s，离底部100距離時启動，重复10次
    1
    2
    3
    4
    5
    {% wow animate__zoomIn,5s,5s,100,10 %}
    {% note blue 'fas fa-bullhorn' modern%}
    `zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次
    {% endnote %}
    {% endwow %}
  3. slideInRight動畫效果，持續5s，延時5s
    1
    2
    3
    4
    5
    {% wow animate__slideInRight,5s,5s %}
    {% note orange 'fas fa-car' modern%}
    `slideInRight`动画效果，持续`5s`，延时`5s`。
    {% endnote %}
    {% endwow %}
  4. heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔
    1
    2
    3
    4
    5
    {% wow animate__heartBeat,,5s,,10 %}
    {% note red 'fas fa-battery-half' modern%}
    `heartBeat`动画效果，延时`5s`，重复`10`次。
    {% endnote %}
    {% endwow %}

  1. flip動畫效果

    flip动画效果

  2. zoomIn動畫效果，持续5s，延时5s，离底部100距離時启動，重复10次

    zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次

  3. slideInRight動畫效果，持續5s，延時5s

    slideInRight动画效果，持续5s，延时5s。

  4. heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔

    heartBeat动画效果，延时5s，重复10次。

分欄 tab

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
  • 选项卡块标签的唯一名称，不带逗号。
  • 将在#id中用作每个标签及其索引号的前缀。
  • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
  • 仅当前帖子/页面的URL必须是唯一的！
  1. [index]:
  • 活动选项卡的索引号。
  • 如果未指定，将选择第一个标签（1）。
  • 如果index为-1，则不会选择任何选项卡。
  1. [Tab caption]:
  • 当前选项卡的标题。
  • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
  • 如果未指定标题，但指定了图标，则标题将为空。
  1. [@icon]:
  • FontAwesome图标名称（全名，看起来像“ fas fa-font”）
  • 可以指定带空格或不带空格；
    例如’Tab caption @icon’ 和 ‘Tab caption@icon’.

  1. 預設選擇第一個

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% tabs test1 %}
    <!-- tab -->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 2.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 3.**
    <!-- endtab -->
    {% endtabs %}

  2. 預設選擇tabs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% tabs test2, 3 %}
    <!-- tab -->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 2.**
    <!-- endtab -->

    <!-- tab -->
    **This is Tab 3.**
    <!-- endtab -->
    {% endtabs %}

  3. 自定義Tab名/只有icon/icon和Tab名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% tabs test4 %}
    <!-- tab 第一个Tab -->
    **tab名字为第一个Tab**
    <!-- endtab -->

    <!-- tab @fab fa-apple-pay -->
    **只有图标 没有Tab名字**
    <!-- endtab -->

    <!-- tab 炸弹@fas fa-bomb -->
    **名字+icon**
    <!-- endtab -->
    {% endtabs %}
  1. 預設選擇第一個

    This is Tab 1.

    This is Tab 2.

    This is Tab 3.

    1. 預設選擇tabs

      This is Tab 1.

      This is Tab 2.

      This is Tab 3.

    2. 自定義Tab名/只有icon/icon和Tab名

      tab名字为第一个Tab

      只有图标 没有Tab名字

      名字+icon

注釋 notation

1
{% nota [label], [text] %}
  1. label: 注釋詞
  2. text: 懸停顯示的注解內容
1
{% nota KingHong ,是個帥哥 %}

KingHong

氣泡注釋 bubble

為避免CDN緩存延遲，建議將配置文件中CDN.tag_plugins_css中@latest改為具體版本，當前版本應為 @1.0.17

1
{% bubble [content], [notation],[background-color] %}
  1. content: 注譯詞
  2. notation: 懸停顯示的注釋內容
  3. background-color: 氣泡背景色，默認為”#71a4e3”
1
今天，{% bubble 柒頭,"柒头是一个汉语词汇，读音qi tou，基本意思为用作形容人面目可憎而且笨拙" %} 芝士又做左一堆{% bubble 戆鸠,"形容人傻乎乎的样子，常被欺骗","#1db675" %}野，真的笑死人

今天，柒頭柒头是一个汉语词汇，读音qi tou，基本意思为用作形容人面目可憎而且笨拙</span>芝士又做左一堆戆鸠形容人傻乎乎的样子，常被欺骗</span>野，真的笑死人

引用文獻 reference

1
2
{% referto [id] , [literature] %}
{% referfrom [id] , [literature] , [url] %}
  1. referto 引用上標
    • id: 上標序號內容，需與referfrom標簽的id對應
    • literature: 引用的參考文獻名稱
  2. referfrom 引用出處
    • id
    • literature
    • url: 參考文獻鏈接
1
2
3
4
5
6
《原神》是由上海米哈游网络科技股份有限公司{% referto "[1]","米哈游网络科技股份有限公司" %}制作发行的一款开放世界{% referto "[2]", "開放世界" %}冒险游戏，游戏发生在一个被称作“提瓦特大陆”{% referto "[3]","提瓦特大陸" %}的幻想世界，在这里，被神选中的人将被授予“神之眼”{% referto "[4]", "神之眼" %}，导引元素之力。玩家将扮演一位名为“旅行者”{% referto "[5]","旅行者" %}的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相
{% referfrom "[1]", "米哈游网络科技股份有限公司", "https://baike.baidu.com/item/%E4%B8%8A%E6%B5%B7%E7%B1%B3%E5%93%88%E6%B8%B8%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E8%82%A1%E4%BB%BD%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/19987087?fromModule=lemma_inlink"%}
{% referfrom "[2]", "开放世界", "https://baike.baidu.com/item/%E5%BC%80%E6%94%BE%E4%B8%96%E7%95%8C/15488017?fromModule=lemma_inlink"%}
{% referfrom "[3]", "提瓦特大陆", "https://baike.baidu.com/item/%E6%8F%90%E7%93%A6%E7%89%B9%E5%A4%A7%E9%99%86/24692279?fromModule=lemma_inlink"%}
{% referfrom "[4]", "神之眼", "https://baike.baidu.com/item/%E7%A5%9E%E4%B9%8B%E7%9C%BC/24699755?fromModule=lemma_inlink"%}
{% referfrom "[5]", "旅行者", "https://baike.baidu.com/item/%E6%97%85%E8%A1%8C%E8%80%85/24692330?fromModule=lemma_inlink"%}

《原神》是由上海米哈游网络科技股份有限公司[1]米哈游网络科技股份有限公司参考资料制作发行的一款开放世界[2] 開放世界参考资料冒险游戏，游戏发生在一个被称作“提瓦特大陆”[3]提瓦特大陸参考资料的幻想世界，在这里，被神选中的人将被授予“神之眼”[4] 神之眼参考资料，导引元素之力。玩家将扮演一位名为“旅行者”[5]旅行者参考资料的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相

[1]
 米哈游网络科技股份有限公司

[2]
 开放世界

[3]
 提瓦特大陆

[4]
 神之眼

[5]
 旅行者

PDF展示 pdf

1
{% pdf 文件路徑 %}

文件路徑可以是相對路徑或是在線鏈接

1
2
3
4
# 1.本地文件:在md文件路径下创建一个同名文件夹，其内放pdf文件名为xxx.pdf的文件
{% pdf xxx.pdf %}
# 2.在线链接
{% pdf https://XXXXXXXXXX.pdf %}

Hexo-tag-map插件

項目倉庫地址，用npm i hexo-tag-map --save下載

全局語法


1
{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %}

如:
1
{% map 120.101101,30.239119, 这里是西湖灵隐寺，据说求姻缘很灵验哦！, 15, 100%, 360px, 1 %}

地图名 标签值 <必填> 宽 (默认 100%) / 高 (默认 360px) 缩放等级 (默认 14) 宽 (默认 100%) / 高 (默认 360px) 默认图层 (默认 1)
混合地图 map 百分数或具体值 (100% 或 360px) 取值 3~18 百分数或具体值 (100% 或 360px) 取值 1~7
谷歌地图 googleMap 百分数或具体值 (100% 或 360px) 取值 1~20 百分数或具体值 (100% 或 360px) 取值 1~3
高德地图 gaodeMap 百分数或具体值 (100% 或 360px) 取值 3~18 百分数或具体值 (100% 或 360px) 取值 1~3
百度地图 baiduMap 百分数或具体值 (100% 或 360px) 取值 4~18 百分数或具体值 (100% 或 360px) 取值 1~2
Geoq 地图 geoqMap 百分数或具体值 (100% 或 360px) 取值 1~18 百分数或具体值 (100% 或 360px) 取值 1~5
openstreet 地图 openstreetMap 百分数或具体值 (100% 或 360px) 取值 1~18 百分数或具体值 (100% 或 360px) 不支持此参数 
1
2
3
{% map 118.78,32.06 %}
{% gaodeMap 118.78,32.06,這裏是南哪大學 %}
{% geoqMap 118.78,32.06,這裏是南哪大學, 13, 90%, 320px,3 %}
  1. 参数之间，用英文逗号相隔
  2. 参数必须按上述事例顺序输入，不得为空
  3. 同一个页面，同一组经纬度值，只能插入一个相同标签值的地图 (若有需要，可以将第二个地图上，经度或纬度末尾删除一两个数)
  4. 参数取值必须在上述范围内
  5. 默认图层：即地图叠加层的值，默认常规地图还是卫星地图，可按地图显示顺序取值
  6. 缩放等级，数字越大，地图比例尺越小，显示的越精细
  7. 除标签值外，其他参数选填，但 每个参数的左边的参数必填
  8. 谷歌地图需要外网才能加载查看

隱藏块 hideBlock

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  1. content：要隐藏的内容
  2. display：展示前按钮显示的文字（可选）
  3. bg：按钮的背景颜色（可选）
  4. color：按钮显示的文字的颜色（可选）
1
2
3
4
{% hideBlock 猜猜裏面是啥, yellow %}
这里有张图片：
<img src="https://s2.loli.net/2022/12/06/nRym16UNhKwIlrX.jpg" alt="蕪" style="zoom:67%;" />
{% endhideBlock %}

这里有张图片：
蕪

時間軸 timeline

1
2
3
4
5
6
7
8
{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}
  1. title:标题/时间线
  2. color:timeline颜色:default(留空)/blue/pink/red/purple/orange/green
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% timeline 时间轴样式,blue %}

<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->

1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。
2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。
3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。
5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。

<!-- endtimeline -->

<!-- timeline 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) -->

不需要额外处理。

<!-- endtimeline -->

<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->

1. 全局搜索 `seotitle` 并替换为 `seo_title`。
2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。
2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。

<!-- endtimeline -->

{% endtimeline %}

时间轴样式

2020-07-24 2.6.6 -> 3.0

  1. 如果有 hexo-lazyload-image 插件，需要删除并重新安装最新版本，设置 lazyload.isSPA: true。
  2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 use_cdn: true 则需要删除。
  3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
  4. 2.x 版本的置顶 top: true 改为了 pin: true，并且同样适用于 layout: page 的页面。
  5. 如果使用了 hexo-offline 插件，建议卸载，3.0 版本默认开启了 pjax 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. group 组件的列表名优先显示文章的 short_title 其次是 title。

复選列表 checkbox

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked
1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

單選列表 radio

1
{% radio 样式参数（可选）, 文本（支持简单md） %}
  1. 颜色: red,yellow,green,cyan,blue,gray
  2. 选中状态: checked
1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

網站卡片 sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
1
2
3
4
5
6
7
{% sitegroup %}
{% site king's, url=https://hongzixian.cn, screenshot=https://s2.loli.net/2022/12/06/cSMbWATylXwQNLI.png, avatar=https://s2.loli.net/2022/11/22/gqkpnz3Prte8RQU.jpg, description=俺的東東 %}
{% site BiliBili, url=https://www.bilibili.com/, screenshot=https://s2.loli.net/2022/12/06/tW5U4n6degiGJ3s.png, avatar=https://s2.loli.net/2022/12/06/tW5U4n6degiGJ3s.png, description=这是一段关于这个网站的描述文字 %}
{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}
{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
{% endsitegroup %}
king's俺的東東
BiliBili这是一段关于这个网站的描述文字
MHuiG这是一段关于这个网站的描述文字
Colsrch这是一段关于这个网站的描述文字
Linhk1606这是一段关于这个网站的描述文字

行內圖片 inlineimage

1
{% inlineimage 图片链接, height=高度（可选） %}
  • 高度：height=20px
1
2
3
介紹下，這是{% inlineimage https://s2.loli.net/2022/12/06/i6uUN2ltRP8MLeZ.webp %}我老婆

嘿，變小{% inlineimage https://s2.loli.net/2022/12/06/i6uUN2ltRP8MLeZ.webp, height=40px %}吧!

介紹下，這是我老婆

嘿，變大吧!

音頻 audio

1
{% audio 音频链接 %}
1
{% audio https://github.com/a2064777923/KingHongCloud/raw/main/%E7%BA%A6%E5%AE%9A%20-%20%E7%8E%8B%E8%8F%B2.mp3 %}

如果想放視頻的話，把標簽改成video就好了

詩詞標簽 poem

1
2
3
{% poem 詩名,作者 %}
詩詞
{% endpoem %}
1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}
水调歌头
苏轼

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。