随便写点什么吧

1️⃣ 基本使用

💭 表达类标签

emoji 表情包

1
2
3
4
5
{% emoji 蛋糕 %}
{% emoji twemoji 1f634 %}
{% emoji qq 咖啡 %}
{% emoji tieba 礼物 height:2em %}
{% emoji blobcat blobcatheartpride height:3em %}

icon 图标标签

可以在任意位置插入图标：

1
2
3
4
5
6
7
8
9
可以在任意位置插入图标：{% icon octopus:32 %}

{% icon octopus:32 color:red %}
{% icon octopus:32 color:orange %}
{% icon octopus:32 color:yellow %}
{% icon octopus:32 color:green %}
{% icon octopus:32 color:cyan %}
{% icon octopus:32 color:blue %}
{% icon octopus:32 color:purple %}

mark 标记

默认 红 橙 黄 绿 青 蓝 紫 亮 暗 警告 错误 
1
2
3
4
5
6
7
8
9
10
11
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 %}

hashtag 标签

Stellar Hexo GitHub 
1
2
3
{% hashtag Stellar https://xaoxuu.com/wiki/stellar/ %}
{% hashtag Hexo https://hexo.io/ color:blue %}
{% hashtag GitHub https://github.com/xaoxuu/ color:dark %}

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
横向铺满图片
猫猫镇楼
猫猫镇楼
1
{% image /images/base/test.jpg 猫猫镇楼 download:true fancybox:true %}
竖图（小图）优化
猫猫镇楼
猫猫镇楼
1
{% image /images/base/test2.jpg 猫猫镇楼 width:300px padding:10px bg:var(--card) download:true fancybox:true %}

quote 引用

居中引用

1
{% quot 居中引用 %}

自定义配置

1
{% quot 自定义配置 icon:coffee %}

也可以指定任意图标

1
{% quot 也可以指定任意图标 prefix:cat-head:64 suffix:dog-head:64 %}

特别引用

1
{% quot 特别引用 el:h4 icon:talk %}

poetry 诗词

黑客也是创造者，与画家、建筑师、作家一样
保罗·格雷厄姆

黑客搞懂 “计算理论”（theory of computation）的必要性，
与画家搞懂颜料化学成分的必要性差不多大。

《黑客与画家》节选
1
2
3
4
{% poetry 黑客也是创造者，与画家、建筑师、作家一样 author:保罗·格雷厄姆 footer:《黑客与画家》节选 %}
黑客搞懂 **“计算理论”**（theory of computation）的必要性，
与画家搞懂颜料化学成分的必要性差不多大。
{% endpoetry %}

paper 纸张标签

《忏悔录》节选

第二章

这话不是根据我自己的经验，而是根据我的观察，因为我知道自己的经验是完全不适于别人的。

第三章

可是我无论怎样用功，进步还是很小。说起来真是奇怪，我虽然也有相当的理解能力，我却从来不能从老师那里——父亲和朗拜尔西埃先生是例外——学到什么东西。
我另外的一些知识，都是我自学来的，这个以后就会清楚的。我那不能忍受任何束缚的思想不肯服从时间的限制；担心学不会的心情妨碍着我专心听讲：
生怕由于自己不懂而让教我的人着急的心情促使我装懂，教的人一直往下教，我却什么也不懂。我想按自己的步调行动，不愿顺从别人的步调。

卢梭《忏悔录》
第二、三章节选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% paper style:underline title:《忏悔录》节选 author:卢梭 date:《忏悔录》 footer:第二、三章节选 %}

<!-- line left -->

第二章

<!-- paragraph -->

这话不是根据我自己的经验，而是根据我的观察，因为我知道自己的经验是完全不适于别人的。

<!-- line right -->

第三章

<!-- paragraph -->

可是我无论怎样用功，进步还是很小。说起来真是奇怪，我虽然也有相当的理解能力，我却从来不能从老师那里——父亲和朗拜尔西埃先生是例外——学到什么东西。
我另外的一些知识，都是我自学来的，这个以后就会清楚的。我那不能忍受任何束缚的思想不肯服从时间的限制；担心学不会的心情妨碍着我专心听讲：
生怕由于自己不懂而让教我的人着急的心情促使我装懂，教的人一直往下教，我却什么也不懂。**我想按自己的步调行动，不愿顺从别人的步调。**
{% endpaper %}
  • style：underline | 无，是否带下划线
  • title：标题
  • author：作者
  • date：日期
  • footer：页脚
正文可设置段落格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- section 小节标题 -->

小节标题，居中显示

<!-- paragraph -->

段落，首行缩进两个字符

<!-- line left -->

段落左对齐

<!-- line right -->

段落右对齐

reel 卷轴标签

南陵别儿童入京
李白

白酒新熟山中归，黄鸡啄黍秋正肥。
呼童烹鸡酌白酒，儿女嬉笑牵人衣。
高歌取醉欲自慰，起舞落日争光辉。
游说万乘苦不早，著鞭跨马涉远道。
会稽愚妇轻买臣，余亦辞家西入秦。
仰天大笑出门去，我辈岂是蓬蒿人。

全唐诗
节选
1
2
3
4
5
6
7
8
{% reel 南陵别儿童入京 author:李白 date:全唐诗 footer:节选 %}
白酒新熟山中归，黄鸡啄黍秋正肥。
呼童烹鸡酌白酒，儿女嬉笑牵人衣。
高歌取醉欲自慰，起舞落日争光辉。
游说万乘苦不早，著鞭跨马涉远道。
会稽愚妇轻买臣，余亦辞家西入秦。
仰天大笑出门去，我辈岂是蓬蒿人。
{% endreel %}

note 备注块

备注标题

备注内容

1
2
- color: red、orange、amber、yellow、green、cyan、blue、purple、light、dark、warning、error
  {% note 备注标题 备注内容 [color:color] %}
Stellar-每个人的独立博客https://xaoxuu.com/blog/20221029/
1
{% link href [title] [icon:src] [desc:true/false] %}

button 按钮

文档 探索 
1
2
3
4
- size: 默认 | xs（最小号）
  {% button text url [icon:key/src] [color:color] [size:xs] %}
  {% button 文档 /wiki  icon:solar:notebook-bookmark-bold-duotone %}
  {% button 探索 /explore  icon:solar:planet-bold-duotone size:xs %}

okr 目标管理

  • okr：Objectives and Key Results
O1
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%

copy 复制行

$
1
2
3
4
{% 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 已勾选的单选框 %}
  • checked：true | false
  • color：颜色

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 显示为乘号的红色的已勾选的复选框 %}
  • checked：true | false
  • symbol： plus | minus | times
  • color：颜色

audio 音频标签

  • 支持音乐外链和网易云音乐
1
2
3
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
{% audio netease:4919517 %}
{% audio type:2 netease:4919517 autoplay:0 %}
  • type
    • 2 表示歌曲
    • 0 表示歌单
  • netease: 歌曲/歌单 id，在网易云分享链接中能找到
  • autoplay
    • 1 表示自动播放
    • 0 表示手动播放

video 视频标签

1
2
3
4
5
{% video bilibili:BV1x44y1K7ho %}
{% video youtube:FDUk0Kcte9A %}

- width: 500px # 单位 80% 20em 100mm
- autoplay: 1/0 # 1：自动播放 0：手动播放
1
2
- 由链接组成的导航栏
  {% navbar active:/wiki/ [文章](/) [项目](/wiki/) [留言](#comments) [GitHub](https://github.com/xaoxuu/) %}

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 %}

🔢 数据类标签

timeline 时间线

2025 年 2 月 25 日

今天科三考试最后熄火，还好我平时练车熄火太多所以很熟，回空挡打火换一档完成靠边停车，贴着及格线过了，激动的心颤抖的手

2025 年 2 月 24 日

下午科目三模拟 3 把连挂，教练差点气撅过去

1
2
3
4
5
6
7
8
9
10
11
12
{% timeline %}

<!-- node 2025 年 2 月 25 日 -->

今天科三考试最后熄火，还好我平时练车熄火太多所以很熟，回空挡打火换一档完成靠边停车，贴着及格线过了，激动的心颤抖的手
{% image /images/meme/idrive.jpg width:300px %}

<!-- node 2025 年 2 月 24 日 -->

下午科目三模拟 3 把连挂，教练差点气撅过去
{% image /images/meme/acat.jpg width:200px %}
{% endtimeline %}

动态时间线参考

friends 友链

明眸如初
斑斑
reuixiy
/source/_data/links/exm_blogs.yml
1
2
3
4
5
- title: 明眸如初
  url: https://www.zywvvd.com/
  cover:
  icon: https://www.zywvvd.com/image/avatar.png
  description: Hexo-Butterfly搭建，访问统计的3d模型非常炫酷
1
{% friends exm_blogs %}

sites 网站卡片

unsplash高质量图片分享平台
/source/_data/links/sites_design.yml
1
2
3
4
5
- title: unsplash
  url: https://unsplash.com/
  cover: /images/site/unsplash.png
  icon: https://unsplash.com/favicon.ico
  description: 高质量图片分享平台
1
{% sites sites_design %}

ghcard 卡片

GitHub Card APIhttps://github.com/anuraghazra/github-readme-stats
1
2
{% ghcard puyixiu theme:dark %}
{% ghcard PUYIXIU/ashihachi-stellar-blog theme:dark %}

📦 容器类标签

box 盒子容器

1
2
{% box [title] [color:color] [child:codeblock/tabs] %}
{% endbox %}
参数说明
1
2
3
title: 标题
color: red/orange/yellow/green/cyan/blue/purple/light/dark
child: codeblock | tabs

folding 折叠容器

展开详情
1
2
3
{% folding title [codeblock:bool] [open:bool] [color:color] %}
content
{% endfolding %}
参数说明
1
2
3
codeblock: true | false
open: true | false
color: red/orange/yellow/green/cyan/blue/purple/light/dark

folders 聚合折叠容器

抽屉A

这个抽屉是空的

抽屉B

这个抽屉是空的

抽屉C

找到了一把手电筒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% folders %}

<!-- folder 抽屉A -->

这个抽屉是空的

<!-- folder 抽屉B -->

这个抽屉是空的

<!-- folder 抽屉C -->

找到了一把手电筒
{% endfolders %}

tabs 分栏容器

图片
代码块
表格
1
2
let x = 123;
console.log("Hello World");
a b c
a1 b1 c1
a2 b2 c2 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% tabs active:2 align:center %}

<!-- tab 图片 -->

{% image /images/base/test.jpg width:300px %}

<!-- tab 代码块 -->

content

<!-- tab 表格 -->

| a   | b   | c   |
| --- | --- | --- |
| a1  | b1  | c1  |
| a2  | b2  | c2  |

{% endtabs %}
参数配置
1
2
align: center
active: 激活标签

grid 网格分区

动态列数

默认布局
1
2
3
1列: 240px - 480px
2列: 480px - 720px
3列: >720px

龟山汉墓

崖洞墓是在石山中开凿墓室的一种墓葬形制，地下空间的布置虽然比较自由，但都最大限度象征和模仿了地上生活的内容。目前所知的汉代诸侯王崖洞墓分布在江苏徐州、河北满城等地，共有三十多座。

主要集中于黄淮之间的东部地区。徐州北洞山汉墓和狮子山汉墓就是西汉前期的两座大型楚王崖洞墓。

刘注墓原棺室的室顶正好对着山的最高处，真不知道在山里作业的工匠是怎么确定的位置。不过后来因为顶上裂开了，才把棺椁移到现在的墓室里。

1
2
3
4
5
6
7
8
9
10
{% grid %}

<!-- cell -->

content left

<!-- cell -->

content right
{% endgrid %}
参数配置
1
2
3
4
5
w: 一列的宽度
c: 固定列数
bg: box | card
gap: 每列之间的间距，默认16px
br: 圆角半径

固定列数

1
2
3
{% grid c:2 %}
...
{% endgrid %}

背景样式

cell 1

cell 2

cell 3

cell 4

cell 1

cell 2

cell 3

cell 4

类似效果
@tianhao_wang
@tianhao_wang
@eberhard
@eberhard
@eberhard
@eberhard
@eberhard
@eberhard
@eberhard
@eberhard
@vklemen
@vklemen
1
2
3
4
5
6
7
8
{% gallery %}
![@tianhao_wang](https://images.unsplash.com/photo-1688142202243-e218ad203952?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYzfEZ6bzN6dU9ITjZ3fHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1700994630045-f7a20df6d92e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjN8fHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1533274221104-015a584a1005?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4fGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1539604214100-ab860d9082e0?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIxfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D)
![@eberhard](https://images.unsplash.com/photo-1698843848092-588f9c1bb0bd?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mzh8fHxlbnwwfHx8fHw%3D)
![@vklemen](https://images.unsplash.com/photo-1516571748831-5d81767b788d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
{% endgallery %}
参数配置
1
2
3
bg: 背景
avatar: 头像
link: 跳转链接

独立页面

1
2
3
{% banner 随记 bg:/images/covers/coffee1.jpg %}
{% navbar active:/notes/ [随记](/notes/) [收藏](/bookmark/) %}
{% endbanner %}

用户资料页

1
2
{% banner 足八桑 八条腿各有想法 bg:/images/covers/pixel_universe.png avatar:/images/base/avatar.png %}
{% endbanner %}

swiper 轮播容器

1
2
3
4
5
6
{% swiper effect:cards %}
![](https://images.unsplash.com/photo-1625171515821-1870deb2743b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
![](https://images.unsplash.com/photo-1528283648649-33347faa5d9e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
![](https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
![](https://images.unsplash.com/photo-1524797905120-92940d3a18d6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80)
{% endswiper %}
参数配置
1
2
effect: cards | coverflow
width: min | max

2️⃣ 进阶用法

自定义小组件

组件库在 _data/widgets.yml 中创建

组件库

toc 目录树

效果可以参考当前页面右侧的 本文目录

_data/widgets.yml
1
2
3
4
5
6
7
toc:
layout: toc
list_number: false # 是否显示序号
min_depth: 2 # 建议不要低于 2 即从 H2 标签开始解析（H1 标签用于文章大标题）
max_depth: 5 # 5 代表最多解析到 H5 标签
fallback: recent # Use a backup widget when toc does not exist.
collapse: false # true / false / auto (始终折叠/不折叠/自动折叠)
recent 近期文章
_data/widgets.yml
1
2
3
4
recent:
layout: recent
rss: # /atom.xml # npm i hexo-generator-feed
limit: 5 # Count of posts

展示有相同 tag 的其它项目

_data/widgets.yml
1
2
related:
layout: related

展示一组链接列表

_data/widgets.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
linklist:
layout: linklist

# columns:1 列表显示

# columns:2 每 2 个按钮放一行

columns: 1
items:
#- icon: '<svg...></svg>' # 或者 icons.yml 中设置的 icon 名称

- icon: github:logo # 或者 icons.yml 中设置的 icon 名称
  title: 关于
  url: /about/
markdown 文本内容
_data/widgets.yml
1
2
3
4
5
6
7
8
9
10
11
12
welcome:
layout: markdown
title: 欢迎欢迎
#linklist: # 与 linklist 组件写法相同 # columns: 1 # items: # - icon: # title: # url:
content: |
欢迎来到 **赛博珊瑚礁 🪸**
我是这间陋室的守门人 **Ashly**
家里那位八腕目正在 **赛博云游中**
请问要来杯 **海盐风味的咖啡 ☕** 吗？

<div style="display:flex;justify-content:center"><img src="/images/base/TaiFi.gif" /></div>
src: # 可以设置外部 md 文件链接
tagcloud 标签云
_data/widgets.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
tagcloud:
layout: tagcloud
title: 标签云

# 标签云配置

min_font: 12
max_font: 24
amount: 100
orderby: name
order: 1 # 1, sac 升序；-1, desc 降序
color: false # 使用颜色
start_color: # 开始的颜色。您可使用十六进位值（'#b700ff'），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
end_color: # 结束的颜色。您可使用十六进位值（'#b700ff'），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
show_count: false # 显示每个标签的文章总数
ghuser github 用户面板
_data/widgets.yml
1
2
3
4
5
ghuser:
layout: ghuser
username: github # your github login username
avatar: true # show avatar or not
menu: true # show menu or not
ghrepo github 项目面板
_data/widgets.yml
1
2
ghrepo:
layout: ghrepo
_posts/xxx.md
1
repo: xaoxuu/hexo-theme-stellar
_data/wiki/projects.yml
1
2
3
4
name: Stellar
title: Stellar
subtitle: '每个人的独立博客 | Designed by xaoxuu'
repo: xaoxuu/hexo-theme-stellar
timeline 时间线
_data/widgets.yml
1
2
3
4
5
6
timeline:
layout: timeline
title: 近期动态
api: https://api.github.com/repos/xaoxuu/hexo-theme-stellar/issues # 若你想限制数量，在 api 链接后面加上?per_page=1 指限制为 1 条
user: # 是否过滤只显示某个人发布的内容，如果要筛选多人，用英文逗号隔开
hide: # title,footer # 隐藏标题或底部 # 此功能需要 Stellar v1.13.0

灵活用法

指定的页面如果希望对组件的某个属性进行覆写时：

_post/xxx.md
1
2
3
4
5
6
7
---
title: 某一篇文章
leftbar:
  - welcome # 只写一个字符串代表引用对应的通用组件
  - override: my_timeline_lite
    api: https://xxx
---

3️⃣ 常用命令

参考资料
许可协议

本文产自🐙足八桑🐙肚子里了剩无几的墨水，转载请注明出处

分享文章

快来参与讨论吧~