emoji 表情包

效果演示
语法格式
引入表情包

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

{% emoji qq aini %}
{% emoji blobcat 0_0 %}
{% emoji tieba huaji %}

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

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

不想引入整套表情包时，也可以用 url: 直接引用一张外部图片作为表情，例如：

{% emoji url:https://emoticons.hzchu.top/emoticons/azukisan/003.png %}
{% emoji url:https://emoticons.hzchu.top/emoticons/azukisan/003.png name:阿梓 height:2em %}

name 可选，作为图片的 alt 文本；height 用法同上。

{% emoji [source] name [height:1.75em] %}
{% emoji url:图片地址 [name:alt] [height:1.75em] %}

其中 source 可省略，默认使用 default_source（详见「引入表情包」部分）。每个模板都必须包含 {name}。

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

blog/_config.stellar.yml
tags:
  emoji:
    default_source: blobcat
    sources:
      blobcat: https://gcore.jsdelivr.net/gh/cdn-x/emoticons/blobcat/{name}.gif
      twemoji: https://gcore.jsdelivr.net/gh/twitter/twemoji/assets/svg/{name}.svg
      qq: https://gcore.jsdelivr.net/gh/cdn-x/emoticons/qq/{name}.gif

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

icon 图标标签

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

可以指定图标的颜色吗？

用 color 指定颜色，也可以在主题配置中设置默认值：

写法如下
icons.yml 中的图标：{% icon example:planet %}
外链图标：{% icon https://api.iconify.design/solar:link-circle-bold.svg %}
指定颜色：{% icon quot:question color:red %}
配置默认颜色
tags:
  icon:
    # 留空时，图标和文字颜色相同
    default_color: accent # theme, accent, red, orange, yellow, green, cyan, blue, purple

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

内置图标

主题内置图标统一存放在 _data/icons.yml，键格式为 namespace:icon-name，可直接作为 icon 参数使用。常用命名空间：

命名空间用途示例
default:主题功能图标：日期、分类、返回、编辑、主题切换、置顶、标签等default:calendar
example:仅用于配置示例的占位图标example:planet
github:GitHub 仓库卡片github:star
share:文章分享按钮share:wechat
chat:chat 聊天标签：浏览器来源、文件类型、界面控件chat:qq
quot:quot 强调引用图标quot:quote-left
weibo:微博 / 时间线数据服务图标（转发 / 点赞）weibo:like
copy: / image: / hashtag:复制、图片、hashtag 标签插件专用图标hashtag:hashtag
vote: / rating:投票 / 评分插件vote:thumbsup

站点可在 source/_data/icons.yml 中覆盖或补充同名键，无需修改主题。

搜索、菜单等关键图标随页面输出，其余图标按需加载。站点在 source/_data/icons.yml 中覆盖或新增的图标也会自动生效。

vote 投票

这个功能在 1.33.0 版本后开始支持。Stellar 默认选择 star_vote provider，使用 xaox.cc 提供的公共 star-vote 服务；公共实例不可用时保留静态计数且不显示错误。需要独立数据或更高配额时，可以自行部署并覆盖对应服务的 endpoint。

效果
代码
Stellar 是最好的 hexo 主题吗？
{% vote id:default Stellar 是最好的 hexo 主题吗？ %}

支持自定义图标，支持和反对分别是 yes 和 no：

{% vote id:default yes:solar:round-double-alt-arrow-up-bold no:solar:round-double-alt-arrow-down-bold 自定义图标 %}

自定义图标遵循 icon 标签的规则，但是为了正常高亮，建议在本地的 icon.yml 文件中配置而不要使用在线图标。

自定义图标

rating 评分

这个功能在 1.33.0 版本后开始支持。Stellar 默认选择 star_vote provider，使用 xaox.cc 提供的公共 star-vote 服务；公共实例不可用时保留静态评分且不显示错误。需要独立数据或更高配额时，可以自行部署并覆盖对应服务的 endpoint。

效果
代码
给 Stellar 五星好评吧～
(0.0)
0人已评分
{% rating id:default 给 Stellar 五星好评吧～ %}

支持自定义图标，icon：

{% rating id:default icon:https://api.iconify.design/twemoji:star-struck.svg 自定义图标遵循 icon 标签的规则 %}
自定义图标遵循 icon 标签的规则
(0.0)
0人已评分

投票和评分分别配置，可以分别覆盖，也可以将对应 provider 设为 null 关闭。关闭后标签仍能构建并显示，但按钮不可交互：

blog/_config.stellar.yml
services:
  rating:
    provider: star_vote
    star_vote:
      endpoint: https://star-vote.xaox.cc/api/rating
  vote:
    provider: star_vote
    star_vote:
      endpoint: https://star-vote.xaox.cc/api/vote

mark 标记标签

支持多彩标记，包括：默认 红 橙 黄 绿 青 蓝 紫

支持多彩标记，包括：{% mark 默认 %} {% mark 红 color:red %} {% mark 橙 color:orange %} {% mark 黄 color:yellow %} {% mark 绿 color:green %} {% mark 青 color:cyan %} {% mark 蓝 color:blue %} {% mark 紫 color:purple %}
可以标记一段文字然后添加标签试试看

hashtag 标签

Stellar Hexo GitHub Gitea

未指定颜色、也未设置默认颜色时，会随机选择颜色。

{% 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 图片标签

image 用于插入图片，可设置宽度、说明、背景和下载链接。语法如下：

{% image src [description] [download:bool/string] [width:length] [height:length] [ratio:number/number] [padding:length] [bg:color] [fancybox:bool/string] %}
参数说明
src: 图片地址
description: 图片描述
download: href # 下载地址，设置此值后鼠标放在图片上会显示下载地址，如果下载地址为图片地址，可以设置为 true
width: 200px # 图片宽度
height: 120px # 图片高度
ratio: 16/9 # 占位区域宽高比
padding: 16px # 图片四周填充宽度
bg: '#ffffff' # 图片区域背景颜色，16进制
fancybox: href # fancybox 放大地址，设置此值后会调用该链接放大，如果放大地址为图片地址，可以设置为 true

横向铺满的图片

图片默认按可用宽度显示，链接后可以填写描述。设置 download:true 会显示指向当前图片的下载按钮；需要下载原图时，使用 download:原图链接 指定地址。

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

竖图（小图）优化

竖图可以限制宽度，并设置边距和背景色，避免在宽屏上占用过多篇幅：

限制宽度
设置填充区域
图片由 xaoxuu 拍摄于 Dattle 幼年时期
图片由 xaoxuu 拍摄于 Dattle 幼年时期
{% image https://res.xaox.cc/gh/cdn-x/xaoxuu@main/apple/documentation/watchkit/06d45110-1dd7-49a4-a413-9f5159ecdd0e.png width:200px padding:16px bg:white ratio:526/902 %}

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

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

{% image https://res.xaox.cc/gh/cdn-x/wiki@main/stellar/icon.svg bg:var(--card) padding:16px ratio:512/512 %}

支持 Fancybox 插件点击放大

image 标签默认支持点击放大，可用 fancybox:false 为单张图片关闭，也可用 fancybox:true 显式开启。相关脚本由主题按需加载。

图片来自 Apple 官网
图片来自 Apple 官网

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

blockquote 段落引用

这个是标准写法 > 引用内容 的增强版本，适合不太强调的、大段落的引用。

语法格式
{% blockquote [indent:true/false] %}
引用内容
{% endblockquote %}

indent 会原样输出为容器属性，用于切换段落缩进；省略时使用默认样式。内容为空时仍会输出空引用容器。

效果对比
写法

这是使用 “> 引用” 写法的例子

这是使用 blockquote 标签的例子

> 这是使用 "> 引用" 写法的例子

{% blockquote %}
这是使用 blockquote 标签的例子
{% endblockquote %}

两者的区别在于：

  • > 引用 写法在技术文章和非技术文章的样式不同，适配各自的风格
  • blockquote 标签写法则始终表现为非技术文章的样式

因为本文是技术文章，所以你能看出两者样式的明显区别，而在非技术文章中，两者写法的样式是一样的。

题外话

本来这个叫 quote，但是发现文章显示不全，和 box 标签以前命名为 noteblock 时的表现一样，可能又命中了 hexo 某些隐藏彩蛋。

quot 强调引用

适合居中且醒目的引用：

Stellar 是迄今为止最好用的主题

支持自定义引号：

热门话题

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

tags:
  quot:
    default:
      prefix: quot:quote-left
      suffix: quot:quote-right
    hashtag:
      prefix: quot:hashtag

写法如下

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

特别引用

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

使用任意图标

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

这是一个 icons.yml 配置的示例

这是一个 url 的示例

写法如下

{% quot prefix:quot:question 这是一个 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 诗词

示例
写法
游山西村
陆游

莫笑农家腊酒浑，丰年留客足鸡豚。
山重水复疑无路，柳暗花明又一村。
箫鼓追随春社近，衣冠简朴古风存。
从今若许闲乘月，拄杖无时夜叩门。

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

paper 纸张标签

示例
写法
文言文

出师表

先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。

后出师表

先帝深虑汉、贼不两立，王业不偏安，故托臣以讨贼也。以先帝之明，量臣之才，固知臣伐贼，才弱敌强也。然不伐贼，王业亦亡。惟坐而待亡，孰与伐之？是故托臣而弗疑也。

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

正文中可以设置行段落格式以显示不同的效果

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

reel 卷轴标签

示例
写法
滕王阁序
王勃

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

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

note 备注块

示例
写法
{% note [title] content [color:color] %}
title: 标题（可选）
content: 内容
color: red/orange/yellow/green/cyan/blue/purple/light/dark/warning/error

具有标题的备注块

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

示例
写法
这 是标题

这是正文 哈哈。

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

彩色备注块

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

示例
写法

一共支持12种颜色，可以满足几乎所有的需求了

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

一共支持12种颜色，可以满足几乎所有的需求了。

color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 link

{% note 一共支持12种颜色，可以满足几乎所有的需求了。 color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 [link](/) %}
{% note color:cyan 一共支持12种颜色，可以满足几乎所有的需求了。 color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 [link](/) %}
效果演示
语法格式
写法示例

外链卡片标签的语法格式为：

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

参数含义：

href: 链接
title: 可选，手动设置标题（为空时会自动抓取页面标题）
icon: 可选，手动设置图标（为空时会自动抓取页面图标）
desc: 可选，是否显示摘要描述，为true时将会显示页面描述
不带摘要的样式：
{% link https://xaoxuu.com/blog/20221029/ %}
带摘要的样式：
{% link https://xaoxuu.com/blog/20221029/ desc:true %}

Stellar 默认使用 xaox.cc 的公共服务补全链接卡片。公共实例不可用时保留原始标题、图标和描述，不显示错误。随着网站流量增加，建议参考下方仓库的 README 自行部署并覆盖 endpoint。

https://github.com/xaoxuu/site-info-apihttps://github.com/xaoxuu/site-info-api

在主题配置中填入自部署 endpoint；将 provider 设为 null 可关闭自动补全：

blog/_config.stellar.yml
services:
  site_info:
    provider: site_info_api
    site_info_api:
      endpoint: https://api.xaox.cc/site_info/v1?url={href}

button 按钮

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

文档 源码 示例
写法如下
{% button 探索 https://github.com/xaoxuu/hexo-theme-stellar/ icon:example:planet %}
语法格式
{% button text url [icon:key/src] [color:color] [size:xs] %}
参数含义
# 必填
text: 探索 # 显示文字
url: # 跳转链接
# 可选参数
color: orange # theme, accent, red, orange, yellow, green, cyan, blue, purple
icon: example:planet # 显示图标，支持 icons.yml 中的键和外链图标
size: xs # 按钮尺寸，目前只有两种尺寸：默认是普通大小， xs 是最小号

okr 目标管理

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

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

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

正常 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%

写法如下：

{% okr o1 %}

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

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

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

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

<!-- okr kr-4 status:at_risk -->
开发、测试和发布
{% image https://res.xaox.cc/gh/cdn-x/wiki@main/stellar/icon.svg height:64px 支持嵌套插入图片等其它简单组件 ratio:512/512 %}

{% endokr %}

copy 复制行

示例
写法

对于单行内容，可以使用 copy 标签来实现复制功能：

$

您可以设置 git:https 或者 git:ssh 或者 git:gh 来快速放置一个 git 仓库链接：

HTTPS
{% 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 单选

示例
写法
没有勾选的单选框
已勾选的单选框
{% radio 没有勾选的单选框 %}
{% radio checked:true 已勾选的单选框 %}
支持的参数
checked: true/false
color: red/orange/yellow/green/cyan/blue/purple

checkbox 复选

示例
写法
普通的没有勾选的复选框
普通的已勾选的复选框
显示为加号的绿色的已勾选的复选框
显示为减号的黄色的已勾选的复选框
显示为乘号的红色的已勾选的复选框
{% 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 显示为乘号的红色的已勾选的复选框 %}
支持的参数
checked: true/false
color: red/orange/yellow/green/cyan/blue/purple
symbol: plus/minus/times

audio 音频标签

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

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

{% audio netease:1856385686 %}

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

video 视频标签

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

写法如下
{% 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 %}
支持的参数
width: 500px # 须带单位 80% 20em 100mm...
autoplay: 1/0 # 自动播放/手动播放 # 不设置默认为0手动播放
ratio: 16/9 # 仅 bilibili/youtube iframe 生效，默认 16/9
type: video/mp4 # 仅直接视频地址生效

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

chat 聊天标签

chat 由 @且听风吟 贡献，内置 QQ 和微信风格。用户必须写在每个 chat 标签正文开头的 YAML 中，v2 不读取 source/_data/chat_users.yml。

最小示例
{% chat iphone11 style:wechat title:项目群 scene:group me:me %}
me:
  name: 我
  avatar: https://example.com/me.png
friend:
  name: 朋友
  avatar: https://example.com/friend.png
  label:
    text: 群主
    textColor: white
    bgColor: '#2196f3'
<!-- chattip 2026 年 9 月 6 日 -->
<!-- chatcell user:friend md:你好 tag:greeting -->
<!-- chatcell user:me md:收到 -->
{% endchat %}
标签参数
device: iphone11 或省略；只有 iphone11 有内置设备外框
style: qq/wechat，默认 qq
title: 导航栏标题
scene: group/person
me: 当前用户 ID，该用户的消息靠右显示
labelColorStyle: dynamic/hand，默认 dynamic
消息标记参数说明
chattip标记后的文字时间或系统提示
chatcelluser、taguser 必须存在；tag 为引用锚点
文本md、quotequote 引用另一条 tag，仅 QQ 风格渲染引用块
图片image图片地址，支持点击放大
表情emoji、sourcesource 省略时使用 tags.emoji.default_source
语音voice、typetype 默认 audio/mp3
视频video视频地址
链接link、from链接及来源名称
文件file文件地址，类型由扩展名识别

每条 chatcell 只渲染第一个匹配的消息类型。缺少用户定义、YAML 无法解析或 quote 指向不存在的 tag 时会导致标签渲染失败，应在生成阶段修正。

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

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

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

文章项目留言GitHub

frame 设备框架

当前内置设备为 iphone11；必须至少提供 img 或 video 之一。

语法格式
{% frame iphone11 [img:url] [video:url] [focus:top/bottom] [alt] %}

video 存在时优先渲染自动播放的 MP4，此时 img 用作封面；只有 img 时，alt 同时用作图片替代文本和图注。focus 控制长图在设备中的对齐方向。没有设备或媒体时不输出内容。

示例
写法
{% frame iphone11 img:https://res.xaox.cc/gh/cdn-x/wiki@main/prohud/toast/demo-loading.png video:https://res.xaox.cc/gh/cdn-x/wiki@main/prohud/toast/demo-loading.mp4 focus:top %}

文本修饰标签集

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

mbti 人格特征

静态展示 16Personalities 风格的 MBTI 人格特征卡片：顶部为标题（如「我的 MBTI 人格：INTJ-T（架构师）」），中间为五个维度的两端标签进度条；传入档案链接时标题可点击跳转。

示例
写法
我的 MBTI 人格：INTJ-T（架构师）
外向93% 内向
天马行空 72%求真务实
理性思考 78%情感细腻
运筹帷幄 83%随机应变
自信果断51% 情绪易波动
{% mbti INTJ-T 93-72-78-83-51 url:https://www.16personalities.com/ch/档案/9d09a4297ffa2 %}
语法格式
{% mbti 类型代码 百分比1-百分比2-百分比3-百分比4-百分比5 [url:档案链接] [image:图片地址] %}

参数说明

  • 类型代码：必填，如 INTJ-T / INTJ，大小写均可，决定标题与配色
  • 百分比：必填，五个数值用 - 分隔，顺序固定为精力 → 认知方式 → 决策方式 → 生活方式 → 身份（各为前者的百分比，如内向 93%）
  • url：可选，url:档案链接 形式，支持完整 URL 或纯档案 ID（自动补全为中文站链接）；传入后标题可点击跳转（hover 显示下划线）
  • image：可选，标题上方的横幅图片地址，铺满卡片宽度、高度自适应；不填则不显示

无效参数的处理

  • 类型无法识别时使用主题默认色并输出构建告警
  • 类型代码缺少 -A/-T 变体时，身份维度默认按「自信果断」方向渲染并输出构建告警
  • 百分比缺位按 0 处理，超出 0–100 自动钳制，多余数值忽略
  • 明暗主题下进度条均使用类型对应色值

tip 注解标签

tip 标签为词句添加气泡注解：桌面端鼠标悬停显示，移动端点击显示。

被注解的词句这是注解内容
语法格式
{% tip 原始文字 pop:提示文字 %}

原始文字支持内联 Markdown。pop 是必填的纯文本提示；提示中包含空格时需要使用引号，例如 {% tip original text pop:"multiple words" %}。

许可协议

本文由 Mr. X 原创，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

本文贡献者 编辑本文

评论区仅供交流，有问题请提 issue 反馈。

站内搜索

没有找到内容！