文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉

这篇文章借鉴了 everfu 的文章 标签外挂，在此基础上进行了本站的适配效果，若使用后无效果或出错，请查看 原文章排查问题，或在 留言板 进行反馈。

内置的外挂标签满足大部分用户的需求，不需要额外安装插件。
插件的外挂标签需要安装对应的插件，满足部分用户的特殊需求。

内置标签

Article

  • 图片列表标签，用于显示图片列表

GalleryGroup

  • 图片组标签，用于显示图片组
    1
    {% galleryGroup 'name' 'desc' 'url' 'img' %}
    参数 说明 默认值
    name 图片组名称 无
    desc 图片组描述 无
    url 图片组链接 无
    img 图片组预览图 无 
    1
    2
    3
    4
    <div class='gallery-group-main'>
    {% galleryGroup '旅行' '梵净山' '/album/fanjingshan' 'https://bu.dusays.com/2024/11/06/672a5bf9e293d.jpg' %}
    {% galleryGroup '旅行' '贵阳' '/album/guiyang' 'https://bu.dusays.com/2024/11/07/672cda3484809.jpg' %}
    </div>
    Group Image Gallery
    旅行

    梵净山

    Group Image Gallery
    旅行

    贵阳

Typeit

  • 标签，用于显示 Typeit 动画 
    1
    typeit: true
    1
    2
    3
    {% typeit 'div' %}
    options
    {% endtypeit %}
    参数 说明 默认值
    div 标签名 无 
    1
    2
    3
    4
    {% typeit 'div' }
    waitUntilVisible: true,
    strings: "Alex MacArthur",
    {% endtypeit %}

Chart

  • 图表标签，用于显示图表
  • 打开配置文件中开关 
    1
    chart: true
    1
    {% chart %}

    不需要参数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {% chart %}
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# 图表标题',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
            }
        }
    }
    {% endchart %}

Mermaid

  • Mermaid 标签，用于显示 Mermaid 图表 
    1
    mermaid: true
    1
    2
    3
    {% mermaid %}
    content
    {% endmermaid %}
    1
    2
    3
    4
    5
    6
    7
    8
    {% mermaid %}
    pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" : 5
    {% endmermaid %}
    pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

分栏 Tabs

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

Demo 1 - 预设选择第一个【test1 1】，展示内容【This is Tab 1.】

1
2
3
4
5
6
7
8
9
10
11
{% tabs test1 %}
<!-- tab 自定义，为空显示test1 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab 自定义，为空显示test1 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab 自定义，为空显示test1 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo2 - 预设选择第三个【test2 2】，展示内容【This is Tab 3.】

1
2
3
4
5
6
7
8
9
10
11
{% tabs test2, 2 %}
<!-- tab 自定义，为空显示test2 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab 自定义，为空显示test2 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab 自定义，为空显示test2 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo3- 没有预设值 [index] 为 - 1，或者超过标签数，默认不展示内容

1
2
3
4
5
6
7
8
9
10
11
{% tabs test3, -1 %}
<!-- tab 自定义，为空显示test3 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab 自定义，为空显示test3 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab 自定义，为空显示test3 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo4- 自定义 Tab 名 + 只有 icon + icon 和 Tab 名

1
2
3
4
5
6
7
8
9
10
11
{% tabs test4, -1 %}
<!-- tab 自定义Tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab @fas fa-bomb -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab 炸弹 @fas fa-bomb -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

Demo 1 - 预设选择第一个【test1 1】，展示内容【This is Tab 1.】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo2 - 预设选择第三个【test2 2】，展示内容【This is Tab 3.】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo3- 没有预设值 [index] 为 - 1，或者超过标签数，默认不展示内容

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo4- 自定义 Tab 名 + 只有 icon + icon 和 Tab 名

This is Tab 1.

This is Tab 2.

This is Tab 3.

插件标签

  • 提示：需要安装插件才可使用以下标签 
1
npm i hexo-solitude-tag

Note

  • Note 标签，用于显示提示
    1
    2
    3
    {% note 'type' 'icon' %}
    content
    {% endnote %}
    参数 说明 默认值
    type 类型 无
    icon 图标 无

    type: primary, success, warning, danger, info, modern, flat, simple
    icon: fantawesome 图标（例如： fas fa-mail）

    1
    2
    3
    {% note 'danger modern' 'fas fa-wand-magic-sparkles' %}
    content
    {% endnote %}

    content

Img

  • 图片标签，用于显示图片
    1
    {% img url [alt] [style] %}
    参数 说明 默认值
    url 图片链接 无
    alt 图片描述 无
    style 图片样式 无 
    1
    {% img 'https://bu.dusays.com/2024/11/03/67264d1198b38.png' 'cover' 'width: 200px' %}
    cover

Inline Img

  • 内联图片标签，用于显示内联图片
    1
    {% inline_img url [alt] [style] %}
    参数 说明 默认值
    url 图片链接 无
    alt 图片描述 无
    style 图片样式 无 
    1
    {% inline_img 'https://bu.dusays.com/2024/11/03/67264d1198b38.png' 'cover' '20px' %}

Audio

  • Audio 标签，用于显示音频
    1
    {% audio url %}
    参数 说明 默认值
    url 音频链接 无 
    1
    {% audio 'https://music.163.com/song/media/outer/url?id=1436709407.mp3' %}

Youtube

  • Youtube 标签，用于显示 Youtube 视频
    1
    {% youtube video_id [type] [cookie] %}
    参数 说明 默认值
    video_id 视频 ID 无
    type 视频类型 video
    cookie 是否使用 cookie false 
    1
    {% youtube 'dQw4w9WgXcQ' %}

Bilibili

  • Bilibili 标签，用于显示 Bilibili 视频
    1
    {% bvideo video_id %}
    参数 说明 默认值
    video_id 视频 ID 无 
    1
    {% bvideo 'BV1B9W6eaEX1' %}

Video

  • Video 标签，用于显示视频
    1
    {% video url %}
    参数 说明 默认值
    url 视频链接 无 
    1
    {% video 'https://media.w3.org/2010/05/sintel/trailer.mp4' %}

Videos

  • Videos 标签，用于显示视频列表
    1
    2
    {% videos [col] %}
    {% endvideos %}
    参数 说明 默认值
    col 列数 1 
    1
    2
    3
    4
    {% videos 2 %}
    {% video 'https://media.w3.org/2010/05/sintel/trailer.mp4' %}
    {% video 'https://media.w3.org/2010/05/bunny/trailer.mp4' %}
    {% endvideos %}

段落文本 p

  • 段落文本 p
    1
    {% p 样式参数(参数以空格划分) 文本内容 %}
    1. 颜色: red,yellow,green,blue,purple,orange,gray(gray 疑似失效)
    2. 大小: small,h5,h4,h3,large,h2,h1,huge,ultra
    3. 对齐方向: left, center, right
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    - 彩色文字
    在一段话中方便插入各种颜色的标签，包括：
    {% p red red %}
    {% p yellow yellow %}
    {% p green green %}
    {% p blue blue %}
    {% p purple purple %}
    {% p orange orange %}
    {% p gray gray %}
    - 段落文字大小
    {% p small small %}
    {% p h5 h5 %}
    {% p h4 h4 %}
    {% span h3 h3 %}{% span large large %}
    {% p h2 h2 %}
    {% p h1 h1 %}
    {% p huge huge %}
    {% p ultra ultra %}
    - 段落位置
    {% p left left %}
    {% p center center %}
    {% p right right %}
    • 彩色文字
      在一段话中方便插入各种颜色的标签，包括：

      red

      yellow

      green

      blue

      purple

      orange

      gray

    • 段落文字大小

      small

      h5

      h4

      h3large

      h2

      h1

      huge

      ultra

    • 段落位置

      left

      center

      right

行内文本 span

  • 行内文本 span
    1
    {% span 样式参数(参数以空格划分), 文本内容 %}
    1. 颜色: red,yellow,green,blue,purple,orange,gray(gray 疑似失效)
    2. 大小: small,h5,h4,h3,large,h2,h1,huge,ultra
    3. 对齐方向: left, center, right
    1
    2
    3
    4
    5
    6
    7
    8
    - 彩色文字
      在一段话中方便插入各种颜色的标签，包括：{% span red red %},{% span yellow yellow %},{% span green green %},{% span blue blue %},{% span purple purple %},{% span orange orange %},{% span gray gray %}(gray疑似失效)
    - 行文字大小
      {% span small small %}{% span h5 h5 %}{% span h4 h4 %}{% span h5 h5 %}{% span small small %}
    - 行位置
      {% p left left %}
      {% p center center %}
      {% p right right %}
    • 彩色文字
      在一段话中方便插入各种颜色的标签，包括：red,yellow,green,blue,purple,orange,gray(gray 疑似失效)
    • 行文字大小
      smallh5h4h5small
    • 行位置

      left

      center

      right

Fold

  • 折叠标签，用于显示折叠内容
    1
    2
    3
    {% fold 'title' open %}
    content
    {% endfold %}
    参数 说明 默认值
    title 标题 无
    open 是否展开 不填不显示 
    1
    2
    3
    {% fold 'title' open %}
    content
    {% endfold %}
    已隐藏，点击展开

    隐藏的内容

Card

  • Card 标签，用于显示卡片
1
{% card 'title','url','cover','score','desc','icon','tag','width','height' %}
参数 说明 默认值
title 标题 无
url 链接 无
cover 封面 无
score 评分 无
desc 评价 无
icon 图标 无
tag 标签 无
width 宽度 无
height 高度 无 
1
{% card '遮天','https://www.qidian.com/book/1735921/','https://bookcover.yuewen.com/qdbimg/349573/1735921/600','4.5','第一部看完的修仙小说，越看越上瘾 <br> 冰冷与黑暗并存的宇宙深处，九具庞大的龙尸拉着一口青铜古棺，亘古长存。','fa-solid fa-book-open','小说' %}
第一部看完的修仙小说，越看越上瘾。
冰冷与黑暗并存的宇宙深处，九具庞大的龙尸拉着一口青铜古棺，亘古长存。查看详情
小说
遮天

用于展示链接

Checkbox

展示复选框

1
{% checkbox 'style' 'checked' 'content' %}
参数 说明 默认值
style 样式 无
checked 是否选中 checked
content 内容 无 
1
2
{% checkbox 'times red' checked '选中' %}
{% checkbox 'plus blue' 'checked' '未选中' %}

选中

未选中

Button

展示按钮

1
{% button 'icon' 'content' 'url' %}
参数 说明 默认值
icon 图标 无
content 内容 无
url 链接 无 
1
{% button 'fas fa-wand-magic-sparkles' '按钮' 'https://solitude.js.org/zh' %}

Github Repo

展示 Github 仓库

1
{% github 'repo' %}
参数 说明 默认值
repo 仓库 无 
1
{% github 'everfu/hexo-theme-solitude' %}

Gitea Repo

展示 Gitea 仓库

1
{% gitea 'server' 'repo' %}
参数 说明 默认值
server 服务器 无
repo 仓库 无 
1
{% gitea 'https://git.fsfe.org' 'FSFE/fsfe-website' %}

Gitee Repo

展示 Gitee 仓库

1
{% gitee 'repo' %}
参数 说明 默认值
repo 仓库 无 
1
{% gitee 'everfu/hexo-theme-solitude' %}

Gitlab Repo

展示 Gitlab 仓库

1
{% gitlab 'id' %}
数 说明 默认值
id 仓库 ID 无 
1
{% gitlab 'gitlab-org/gitlab' %}