emoji 表情包
内置了可配置的表情标签 使用方法如下:
{% emoji 爱你 %} |
如果对高度有特别要求,可以指定高度,例如:
<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> |
{% emoji [source] name [height:1.75em] %} |
其中 source
可省略,默认为配置中的第一个 source
(详见「引入表情包」部分)
表情速查表:Stellar内嵌blobcat小表情
tag_plugins: |
在配置文件中,文件名用
{name}
代替。
icon 图标标签
支持在任意位置插入图标,支持外链图标,也可以在 icons.yml 中提前配置好。
可以指定图标的颜色吗?
当然可以,还可以在主题配置中设置默认颜色:
icons.yml 中的图标:{% icon solar:planet-bold-duotone %} |
tag_plugins: |
还支持 style 参数,可以直接对样式进行修改,仅支持外链图标,style 参数中间不能有空格。
mark 标记标签
支持多彩标记,包括:默认 红 橙 黄 绿 青 蓝 紫 亮 暗 警告 错误 一共 12 种颜色。
支持多彩标记,包括:{% 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 标签
Stellar Hexo GitHub Gitea如果没有指定颜色,且没有设置默认颜色,则随机取一个颜色,快来试试吧~
{% hashtag Stellar https://xaoxuu.com/wiki/stellar/ %} |
image 图片标签
图片标签是一个精心设计的应对各种尺寸插图的标签,对于大图,可以放置一个「下载」按钮,语法格式如下:
{% image src [description] [download:bool/string] [width:px] [padding:px] [bg:hex] [fancybox:bool/string] %} |
src: 图片地址 |
横向铺满的图片
无论在什么宽度的设备上都希望横向铺满的图片,一般不需要额外操作。可以在链接后面写上图片描述,如有必要,可以通过设置 download:true
使其显示一个「下载」按钮链接指向图片地址,如果下载链接与显示的图片地址不同,可以 download:下载链接
来使其能够下载原图。
{% image https://s.xaox.cc/xaoxuu/posts/202401131914137.jpg-hd 图片由 xaoxuu 拍摄于一个普通的阳光明媚的下午 download:https://s.xaox.cc/xaoxuu/posts/202401131914137.jpg-hd %} |
竖图(小图)优化
宽度较小而高度较大的图片,可以设置宽、高、填充间距、背景色等对其布局进行优化,使得它在不同宽度的屏幕下都能获得不错的视觉体验:
{% image /assets/xaoxuu/mirror/apple/documentation/watchkit/06d45110-1dd7-49a4-a413-9f5159ecdd0e.png width:200px padding:16px bg:white %} |
如果不进行约束,在宽屏设备上会占用很大篇幅
可以设置填充宽度和颜色,支持 bg:var(--card)
动态颜色,能够适配暗黑模式:
{% image /assets/wiki/stellar/icon.svg bg:var(--card) padding:16px %} |
支持 Fancybox 插件点击放大
由于 Stellar 主题的插件具有按需加载的特性,所以 Fancybox 插件默认也是已经配置好了的,在任意 image
标签中增加 fancybox:true
参数即可为特定图片开启缩放功能。如果一个页面没有任何地方使用,则不会加载 Fancybox 插件。
如果您希望全站所有的 image
标签都开启此功能,可在主题配置文件中修改以下参数:
######## Tag Plugins ######## |
从 1.28.1 版本开始,如果想在页面中展示较小的图片,但在 fancybox 中展示较大的高清的图片,可以用 fancybox:大图链接
参数。
quot 引用
适合居中且醒目的引用:
Stellar 是迄今为止最好用的主题
支持自定义引号:
热门话题
其中自定义引号素材在主题配置文件的 tag_plugins.quot
中配置:
tag_plugins: |
写法如下
适合居中且醒目的引用:{% quot Stellar 是迄今为止最好用的主题 %} |
特别引用
此外,加上
el:h2/h3/h4/h5/h6
可以作为标题使用
使用任意图标
从 1.26.5 版本开始,您可以通过 prefix 或 suffix 参数设置任意图标或图片,支持 URL 或 icons.yml 文件中配置,例如:
这是一个 icons.yml 配置的示例
这是一个 url 的示例
写法如下
{% quot prefix:solar:planet-bold-duotone 这是一个 icons.yml 配置的示例 %} |
虽然丰富多彩的图标可以使其变得更醒目,但是滥用就会导致文章显得杂乱无章。
poetry 诗词
莫笑农家腊酒浑,丰年留客足鸡豚。
山重水复疑无路,柳暗花明又一村。
箫鼓追随春社近,衣冠简朴古风存。
从今若许闲乘月,拄杖无时夜叩门。
{% poetry 游山西村 author:陆游 footer:诗词节选 %} |
paper 纸张标签
出师表
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
后出师表
先帝深虑汉、贼不两立,王业不偏安,故托臣以讨贼也。以先帝之明,量臣之才,固知臣伐贼,才弱敌强也。然不伐贼,王业亦亡。惟坐而待亡,孰与伐之?是故托臣而弗疑也。
{% paper style:underline title:文言文 author:诸葛亮 date:三国 footer:节选 %} |
style: underline/无 # 是否带下划线 |
正文中可以设置行段落格式以显示不同的效果
<!-- section 小节标题 --> |
reel 卷轴标签
时维九月,序属三秋。
潦水尽而寒潭清,烟光凝而暮山紫。
俨骖騑于上路,访风景于崇阿。
临帝子之长洲,得天人之旧馆。
层峦耸翠,上出重霄;
飞阁流丹,下临无地。
鹤汀凫渚,穷岛屿之萦回;
桂殿兰宫,即冈峦之体势。
{% reel 滕王阁序 author:王勃 date:重九日 footer:节选 %} |
title: # 标题 |
note 备注块
{% note [title] content [color:color] %} |
title: 标题(可选) |
具有标题的备注块
直接写备注内容,默认是和代码块一样的样式,第一个空格前面的是标题,后面的是正文,如果标题中需要显示空格,请使用
代替。
这是正文 哈哈。
{% note 这 是标题 这是正文 哈哈。 %} |
彩色备注块
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
一共支持12种颜色,可以满足几乎所有的需求了
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。
{% note 一共支持12种颜色,可以满足几乎所有的需求了。 color 可设置 red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error 几种取值。 %} |
link 链接卡片
外链卡片标签的语法格式为:
{% link href [title] [icon:src] [desc:true/false] %} |
参数含义:
href: 链接 |
不带摘要的样式: |
随着网站流量的增加,使用主题默认的 api
很可能会导致流量超限,推荐使用自部署的 api
抓取网站信息。参考下方仓库的 README
。
并在主题配置中填入你的 api
services: |
button 按钮
这个功能在 1.26.6 版本后开始支持。
文档 源码 示例{% button 探索 https://github.com/xaoxuu/hexo-theme-stellar/ icon:solar:planet-bold-duotone %} |
{% button text url [icon:key/src] [color:color] [size:xs] %} |
# 必填 |
okr 目标管理
这个功能在 1.20.0 版本后开始支持,这是一个 OKR(Objectives and Key Results)示例:
来自2025年的复盘:已《基本》实现目标
- 当 KR 进度为 100% 时,标签默认显示为 已完成
- 当 KR 未设置进度时,默认为 0%
- 当 O 未设置进度时,则显示所有 KR 进度平均值
您可以在 _config.yml 文件中修改标签的颜色和文案
您可以在 _config.yml 文件中增加任意的标签配置
写法如下:
{% okr o1 %} |
copy 复制行
对于单行内容,可以使用 copy
标签来实现复制功能:
您可以设置 git:https
或者 git:ssh
或者 git:gh
来快速放置一个 git 仓库链接:
{% copy curl -s https://sh.xaox.cc/install | sh %} |
radio 单选
{% radio 没有勾选的单选框 %} |
checked: true/false |
checkbox 复选
{% checkbox 普通的没有勾选的复选框 %} |
checked: true/false |
audio 音频标签
支持音乐外链以及网易云音乐,网易云支持设置 type
以及 autoplay
参数。
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} |
type: 2/0 # 歌曲/歌单 # 不设置默认为2歌曲模式 |
video 视频标签
支持 bilibili, youtube 和视频外链,可设置最大宽度, bili, yt 均可设置宽度和自动播放
{% video bilibili:BV1GP4y1d729 %} |
width: 500px # 须带单位 80% 20em 100mm... |
目前 bilibili 的 iframe 标签不能放进 grid 容器里,原因未知。
navbar 导航栏
文章内也可以插入一个导航栏:
{% navbar active:/wiki/ [文章](/) [项目](/wiki/) [留言](#comments) [GitHub](https://github.com/xaoxuu/) %} |
active 传入要高亮的那个按钮的 url
frame 设备框架
{% frame iphone11 img:/assets/wiki/prohud/toast/demo-loading.png video:/assets/wiki/prohud/toast/demo-loading.mp4 focus:top %} |
文本修饰标签集
- 这是
密码 标签 - 这是 下划线 标签
- 这是
着重号 标签 - 这是
波浪线 标签 - 这是
删除线标签 - 这是 上角标 标签
- 这是 下角标 标签
- 这是 键盘样式 标签,试一试:⌘ + D
- 这是 {% psw 密码 %} 标签 |