表达类标签组件（19+个）

emoji 表情包

效果演示

语法格式

引入表情包

内置了可配置的表情标签 使用方法如下：

1 2 3

{% emoji 爱你 %} {% emoji blobcat ablobcatattentionreverse %} {% emoji tieba 滑稽 %}

如果对高度有特别要求，可以指定高度，例如：

1	<center>{% emoji blobcat ablobcatrainbow height:1em %}{% emoji blobcat ablobcatrainbow height:2em %}{% emoji blobcat ablobcatrainbow height:3em %}{% emoji blobcat ablobcatrainbow height:2em %}{% emoji blobcat ablobcatrainbow height:1em %}</center>

1	{% emoji [source] name [height:1.75em] %}

其中 source 可省略，默认为配置中的第一个 source（详见「引入表情包」部分）

表情速查表：Stellar内嵌blobcat小表情

1 2 3 4 5 6 7 8

tag_plugins: ... emoji: default: https://gcore.jsdelivr.net/gh/cdn-x/emoji/qq/{name}.gif twemoji: https://gcore.jsdelivr.net/gh/twitter/twemoji/assets/svg/{name}.svg qq: https://gcore.jsdelivr.net/gh/cdn-x/emoji/qq/{name}.gif aru: https://gcore.jsdelivr.net/gh/cdn-x/emoji/aru-l/{name}.gif tieba: https://gcore.jsdelivr.net/gh/cdn-x/emoji/tieba/{name}.png

在配置文件中，文件名用 {name} 代替。

icon 图标标签

支持在任意位置插入图标，支持外链图标，也可以在 icons.yml 中提前配置好。

可以指定图标的颜色吗？

当然可以，还可以在主题配置中设置默认颜色：

1
2
3

icons.yml 中的图标：{% icon solar:planet-bold-duotone %}
外链图标：{% icon https://api.iconify.design/solar:link-circle-bold.svg %}
指定颜色：{% icon ph:seal-question-fill color:red %}

1
2
3
4

tag_plugins:
  icon:
    # 留空时，图标和文字颜色相同
    default_color: accent # theme, accent, red, orange, yellow, green, cyan, blue, purple

还支持 style 参数，可以直接对样式进行修改，仅支持外链图标，style 参数中间不能有空格。

mark 标记标签

支持多彩标记，包括：默认 红 橙 黄 绿 青 蓝 紫 亮 暗 警告 错误 一共 12 种颜色。

1

支持多彩标记，包括：{% mark 默认 %} {% mark 红 color:red %} {% mark 橙 color:orange %} {% mark 黄 color:yellow %} {% mark 绿 color:green %} {% mark 青 color:cyan %} {% mark 蓝 color:blue %} {% mark 紫 color:purple %} {% mark 亮 color:light %} {% mark 暗 color:dark %} {% mark 警告 color:warning %} {% mark 错误 color:error %} 一共 12 种颜色。

hashtag 标签

如果没有指定颜色，且没有设置默认颜色，则随机取一个颜色，快来试试吧～

1
2
3
4

{% hashtag Stellar https://xaoxuu.com/wiki/stellar/ %}
{% hashtag Hexo https://hexo.io/ %}
{% hashtag GitHub https://github.com/xaoxuu/ %}
{% hashtag Gitea https://git.xaox.cc/ color:green %}

image 图片标签

图片标签是一个精心设计的应对各种尺寸插图的标签，对于大图，可以放置一个「下载」按钮，语法格式如下：

1

{% image src [description] [download:bool/string] [width:px] [padding:px] [bg:hex] [fancybox:bool/string] %}

1
2
3
4
5
6
7

src: 图片地址
description: 图片描述
download: href # 下载地址，设置此值后鼠标放在图片上会显示下载地址，如果下载地址为图片地址，可以设置为 true
width: 200px # 图片宽度
padding: 16px # 图片四周填充宽度
bg: '#ffffff' # 图片区域背景颜色，16进制
fancybox: href # fancybox 放大地址，设置此值后会调用该链接放大，如果放大地址为图片地址，可以设置为 true

横向铺满的图片

无论在什么宽度的设备上都希望横向铺满的图片，一般不需要额外操作。可以在链接后面写上图片描述，如有必要，可以通过设置 download:true 使其显示一个「下载」按钮链接指向图片地址，如果下载链接与显示的图片地址不同，可以 download:下载链接 来使其能够下载原图。

图片由 xaoxuu 拍摄于一个普通的阳光明媚的下午

1

{% image https://s.xaox.cc/xaoxuu/posts/202401131914137.jpg-hd 图片由 xaoxuu 拍摄于一个普通的阳光明媚的下午 download:https://s.xaox.cc/xaoxuu/posts/202401131914137.jpg-hd %}

竖图（小图）优化

宽度较小而高度较大的图片，可以设置宽、高、填充间距、背景色等对其布局进行优化，使得它在不同宽度的屏幕下都能获得不错的视觉体验：

限制宽度

设置填充区域

图片由 xaoxuu 拍摄于 Dattle 幼年时期

1	{% image /assets/xaoxuu/mirror/apple/documentation/watchkit/06d45110-1dd7-49a4-a413-9f5159ecdd0e.png width:200px padding:16px bg:white %}

如果不进行约束，在宽屏设备上会占用很大篇幅

可以设置填充宽度和颜色，支持 bg:var(--card) 动态颜色，能够适配暗黑模式：

1	{% image /assets/wiki/stellar/icon.svg bg:var(--card) padding:16px %}

支持 Fancybox 插件点击放大

由于 Stellar 主题的插件具有按需加载的特性，所以 Fancybox 插件默认也是已经配置好了的，在任意 image 标签中增加 fancybox:true 参数即可为特定图片开启缩放功能。如果一个页面没有任何地方使用，则不会加载 Fancybox 插件。

图片来自 Apple 官网

如果您希望全站所有的 image 标签都开启此功能，可在主题配置文件中修改以下参数：

1
2
3
4
5

######## Tag Plugins ########
tag_plugins:
  # {% image %}
  image:
    fancybox: false

从 1.28.1 版本开始，如果想在页面中展示较小的图片，但在 fancybox 中展示较大的高清的图片，可以用 fancybox:大图链接 参数。

quot 引用

适合居中且醒目的引用：

支持自定义引号：

其中自定义引号素材在主题配置文件的 tag_plugins.quot 中配置：

1
2
3
4
5
6
7
8
9

tag_plugins:
  ...
  # {% quot %}
  quot:
    default: # 可以自行配置多种图标方案
      prefix: https://bu.dusays.com/2022/10/24/63567d3e092ff.png
      suffix: https://bu.dusays.com/2022/10/24/63567d3e0ab55.png
    hashtag:
      prefix: https://bu.dusays.com/2022/10/24/63567d3e07da3.png

1
2

适合居中且醒目的引用：{% quot Stellar 是迄今为止最好用的主题 %}
支持自定义引号：{% quot 热门话题 icon:hashtag %}、{% quot 特别引用 icon:default %}

此外，加上 el:h2/h3/h4/h5/h6 可以作为标题使用

使用任意图标

从 1.26.5 版本开始，您可以通过 prefix 或 suffix 参数设置任意图标或图片，支持 URL 或 icons.yml 文件中配置，例如：

1
2
3

{% quot prefix:solar:planet-bold-duotone 这是一个 icons.yml 配置的示例 %}

{% quot prefix:https://api.iconify.design/line-md:moon-alt-to-sunny-outline-loop-transition.svg 这是一个 url 的示例 suffix:https://api.iconify.design/solar:list-heart-minimalistic-line-duotone.svg %}

虽然丰富多彩的图标可以使其变得更醒目，但是滥用就会导致文章显得杂乱无章。

poetry 诗词

1
2
3
4
5
6

{% poetry 游山西村 author:陆游 footer:诗词节选 %}
莫笑农家腊酒浑，丰年留客足鸡豚。
**山重水复疑无路，柳暗花明又一村。**
箫鼓追随春社近，衣冠简朴古风存。
从今若许闲乘月，拄杖无时夜叩门。
{% endpoetry %}

paper 纸张标签

1
2
3
4
5
6
7
8
9
10

{% paper style:underline title:文言文 author:诸葛亮 date:三国 footer:节选 %}
<!-- line left -->
出师表
<!-- paragraph -->
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
<!-- line right -->
后出师表
<!-- paragraph -->
先帝深虑汉、贼不两立，王业不偏安，故托臣以讨贼也。以先帝之明，量臣之才，固知臣伐贼，才弱敌强也。然不伐贼，王业亦亡。惟坐而待亡，孰与伐之？是故托臣而弗疑也。
{% endpaper %}

1
2
3
4
5

style: underline/无 # 是否带下划线
title: # 标题
author: # 作者
date: # 日期
footer: # 页脚信息

1
2
3
4
5
6
7
8

<!-- section 小节标题 -->
小节标题，居中显示
<!-- paragraph -->
段落，首行缩进两个字符
<!-- line left -->
段落左对齐
<!-- line right -->
段落右对齐

reel 卷轴标签

1
2
3
4
5
6
7
8
9
10

{% reel 滕王阁序 author:王勃 date:重九日 footer:节选 %}
时维九月，序属三秋。
潦水尽而寒潭清，烟光凝而暮山紫。
俨骖騑于上路，访风景于崇阿。
临帝子之长洲，得天人之旧馆。
层峦耸翠，上出重霄；
飞阁流丹，下临无地。
鹤汀凫渚，穷岛屿之萦回；
桂殿兰宫，即冈峦之体势。
{% endreel %}

1
2
3
4

title: # 标题
author: # 作者
date: # 日期
footer: # 页脚信息

note 备注块

1

{% note [title] content [color:color] %}

1
2
3

title: 标题（可选）
content: 内容
color: red/orange/yellow/green/cyan/blue/purple/light/dark/warning/error

具有标题的备注块

直接写备注内容，默认是和代码块一样的样式，第一个空格前面的是标题，后面的是正文，如果标题中需要显示空格，请使用   代替。

1

{% note 这 是标题 这是正文 哈哈。 %}

彩色备注块

1
2

{% note 一共支持12种颜色，可以满足几乎所有的需求了。 color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 %}
{% note color:cyan 一共支持12种颜色，可以满足几乎所有的需求了。 color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 %}

link 链接卡片

1

{% link href [title] [icon:src] [desc:true/false] %}

1
2
3
4

href: 链接
title: 可选，手动设置标题（为空时会自动抓取页面标题）
icon: 可选，手动设置图标（为空时会自动抓取页面图标）
desc: 可选，是否显示摘要描述，为true时将会显示页面描述

1
2
3
4

不带摘要的样式：
{% link https://xaoxuu.com/blog/20221029/ %}
带摘要的样式：
{% link https://xaoxuu.com/blog/20221029/ desc:true %}

随着网站流量的增加，使用主题默认的 api 很可能会导致流量超限，推荐使用自部署的 api 抓取网站信息。参考下方仓库的 README 。

并在主题配置中填入你的 api

1
2
3
4
5
6

services:
  # {% link %}
  siteinfo:
    # 设置 api 可以自动提取网页标题、图标，服务部署方法：https://github.com/xaoxuu/site-info-api/
    # 接口测试通过后，把按钮的 href 部分替换成 {href} 之后填写到下方，例如：https://api.vlts.cc/site_info/v1?url={href}
    api: 

button 按钮

这个功能在 1.26.6 版本后开始支持。

1

{% button 探索 https://github.com/xaoxuu/hexo-theme-stellar/ icon:solar:planet-bold-duotone %}

1

{% button text url [icon:key/src] [color:color] [size:xs] %}

1
2
3
4
5
6
7

# 必填
text: 探索 # 显示文字
url: # 跳转链接
# 可选参数
color: orange # theme, accent, red, orange, yellow, green, cyan, blue, purple
icon: solar:planet-bold-duotone # 显示图标，支持 icon.yml 中的文件名和外链图标
size: xs # 按钮尺寸，目前只有两种尺寸：默认是普通大小， xs 是最小号

okr 目标管理

这个功能在 1.20.0 版本后开始支持，这是一个 OKR（Objectives and Key Results）示例：

O1

2024年的小目标：完成 Volantis 6.0 并发布上线

来自2025年的复盘：已《基本》实现目标

正常 44%

KR1

重构 tag-plugins 和 wiki 系统

• 当 KR 进度为 100% 时，标签默认显示为 已完成
• 当 KR 未设置进度时，默认为 0%
• 当 O 未设置进度时，则显示所有 KR 进度平均值

已完成 100%

KR2

完成主要页面设计稿

小提示1

小提示2

您可以在 _config.yml 文件中修改标签的颜色和文案

您可以在 _config.yml 文件中增加任意的标签配置

延期 90%

KR3

完成前置准备工作（如果你知道答案，请在留言区帮帮我！🥹）

在咸水和海滩之间找一亩地

求出圆周率后15位

找出宇宙的终极逻辑

去地狱里走两步

未完成 -12%

KR-4

开发、测试和发布

支持嵌套插入图片等其它简单组件

风险 0%

写法如下：

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

{% okr o1 %}

2024年的小目标：完成 Volantis 6.0 并发布上线
来自2025年的复盘：已《基本》实现目标 {% emoji tieba 滑稽 %}

<!-- okr kr1 percent:1 -->
重构 tag-plugins 和 wiki 系统
- 当 {% mark KR %} 进度为 100% 时，标签默认显示为 {% mark color:green 已完成 %}
- 当 {% mark KR %} 未设置进度时，默认为 {% mark 0% %}
- 当 {% mark O %} 未设置进度时，则显示所有 {% mark KR %} 进度平均值

<!-- okr kr2 percent:0.9 status:off_track -->
完成主要页面设计稿
{% tabs align:left %}
<!-- tab 小提示1 -->
您可以在 _config.yml 文件中修改标签的颜色和文案
<!-- tab 小提示2 -->
您可以在 _config.yml 文件中增加任意的标签配置
{% endtabs %}

<!-- okr kr3 percent:-0.12 status:unfinished -->
完成前置准备工作（如果你知道答案，请在留言区帮帮我！🥹）
{% checkbox 在咸水和海滩之间找一亩地 %}
{% checkbox 求出圆周率后15位 %}
{% checkbox 找出宇宙的终极逻辑 %}
{% checkbox 去地狱里走两步 %}

<!-- okr kr-4 status:at_risk -->
开发、测试和发布
{% image /assets/wiki/stellar/icon.svg height:64px 支持嵌套插入图片等其它简单组件 %}

{% endokr %}

copy 复制行

1
2
3
4
5

{% copy curl -s https://sh.xaox.cc/install | sh %}
{% copy curl -s https://sh.xaox.cc/install | sh prefix:$ %}
{% copy git:https xaoxuu.com/hexo-theme-stellar %}
{% copy git:ssh xaoxuu.com/hexo-theme-stellar %}
{% copy git:gh xaoxuu.com/hexo-theme-stellar %}

radio 单选

1
2

{% radio 没有勾选的单选框 %}
{% radio checked:true 已勾选的单选框 %}

1
2

checked: true/false
color: red/orange/yellow/green/cyan/blue/purple

checkbox 复选

1
2
3
4
5

{% checkbox 普通的没有勾选的复选框 %}
{% checkbox checked:true 普通的已勾选的复选框 %}
{% checkbox symbol:plus color:green checked:true 显示为加号的绿色的已勾选的复选框 %}
{% checkbox symbol:minus color:yellow checked:true 显示为减号的黄色的已勾选的复选框 %}
{% checkbox symbol:times color:red checked:true 显示为乘号的红色的已勾选的复选框 %}

1
2
3

checked: true/false
color: red/orange/yellow/green/cyan/blue/purple
symbol: plus/minus/times

audio 音频标签

支持音乐外链以及网易云音乐，网易云支持设置 type 以及 autoplay 参数。

1
2
3
4
5

{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

{% audio netease:1856385686 %}

{% audio type:2 netease:1856385686 autoplay:0 %}

1
2
3

type: 2/0 # 歌曲/歌单 # 不设置默认为2歌曲模式
netease: xxx # 歌曲/歌单 id ，具体 id 在网易云网页版的网址链接中寻找 
autoplay: 1/0 # 自动播放/手动播放 # 不设置默认0手动播放

video 视频标签

支持 bilibili, youtube 和视频外链，可设置最大宽度， bili, yt 均可设置宽度和自动播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{% video bilibili:BV1GP4y1d729 %}

{% video bilibili:BV1GP4y1d729 width:100% autoplay:0 %}

{% video youtube:LB8KwiiUGy0 %}

{% video youtube:LB8KwiiUGy0 width:100% autoplay:0 %}

{% grid c:2 %}
<!-- cell -->
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
<!-- cell -->
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov width:100% %}
{% endgrid %}

1
2

width: 500px # 须带单位 80% 20em 100mm...
autoplay: 1/0 # 自动播放/手动播放 # 不设置默认为0手动播放

目前 bilibili 的 iframe 标签不能放进 grid 容器里，原因未知。

navbar 导航栏

文章内也可以插入一个导航栏：

1

{% navbar active:/wiki/ [文章](/) [项目](/wiki/) [留言](#comments) [GitHub](https://github.com/xaoxuu/) %}

active 传入要高亮的那个按钮的 url

frame 设备框架

1

{% frame iphone11 img:/assets/wiki/prohud/toast/demo-loading.png video:/assets/wiki/prohud/toast/demo-loading.mp4 focus:top %}

文本修饰标签集

• 这是 密码 标签
• 这是 下划线 标签
• 这是 着重号 标签
• 这是 波浪线 标签
• 这是 删除线 标签
• 这是 ^上角标 标签
• 这是 _下角标 标签
• 这是 键盘样式 标签，试一试：⌘ + D

1
2
3
4
5
6
7
8

- 这是 {% psw 密码 %} 标签
- 这是 {% u 下划线 %} 标签
- 这是 {% emp 着重号 %} 标签
- 这是 {% wavy 波浪线 %} 标签
- 这是 {% del 删除线 %} 标签
- 这是 {% sup 上角标 color:red %} 标签
- 这是 {% sub 下角标 %} 标签
- 这是 {% kbd 键盘样式 %} 标签，试一试：{% kbd ⌘ %} + {% kbd D %}