hashtag 标签

Stellar Hexo GitHub Gitea

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

image 图片标签

横向铺满的图片

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

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

quot 引用

适合居中且醒目的引用：

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

支持自定义引号：

热门话题

note 备注块

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

彩色备注块

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

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

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

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 几种取值。

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

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 几种取值。

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

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 几种取值。

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

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 几种取值。

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

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 几种取值。

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

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 几种取值。

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

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

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 几种取值。 %}
效果演示
语法格式
写法示例

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

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

video 视频标签

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

写法如下
1
2
3
4
5
6
7
8
9
10
{% video bilibili:BV1GP4y1d729 %}

{% video bilibili:BV1GP4y1d729 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 容器里，原因未知。

静态时间线

静态数据是写死在 md 源文件中的，在 deploy 时就已经确定了。

2021 年 2 月 16 日

主要部分功能已经开发的差不多了。

2021 年 2 月 11 日

今天除夕，也是生日，一个人在外地过年+过生日，熬夜开发新主题，尽量在假期结束前放出公测版。

写法如下
1
2
3
4
5
6
7
{% timeline %}
<!-- node 2021 年 2 月 16 日 -->
主要部分功能已经开发的差不多了。
{% image /assets/img/[email protected] width:300px %}
<!-- node 2021 年 2 月 11 日 -->
今天除夕，也是生日，一个人在外地过年+过生日，熬夜开发新主题，尽量在假期结束前放出公测版。
{% endtimeline %}

friends 友链

steven
steven
steven
steven

您可以在任何位置插入友链组，支持静态数据和动态数据，静态数据需要写在数据文件中：

blog/source/_data/links/links.yml
1
2
3
4
5
- title: 某某某
  url: https://
  cover:
  icon:
  description:

在需要的位置这样写：

1
{% friends links %}

box 盒子容器

note 标签就是使用 box 容器实现的，它们样式是相同的：

语法格式
1
2
3
{% box [title] [color:color] [child:codeblock/tabs] %}
...
{% endbox %}

彩色代码块

设置 child:codeblock 并设置 color:颜色枚举 可以实现 10 种不同颜色的代码块，彩色代码块一般可以用在代码正确与错误的示范对比场景。

示例
示例代码

推荐的写法

1
2
3
func test() {
    // ...
}

不推荐的写法

1
2
3
func test() -> () {
    // ...
}

嵌套其它标签

例如嵌套一个 tabs 标签：

图文混排
示例代码
个人电脑作为办公设备时，我们该如何保护隐私？
个人电脑作为办公设备时，我们该如何保护隐私？

公司一般都会强制安装安防软件，这些软件要求开机自启动，要求有屏幕录制权限、完全的磁盘访问权限包括相册图库。因此如果使用自己的 MacBook 作为办公设备，必须要把生活区和工作区完全独立开，安装在两个磁盘分区，并且对磁盘分区进行加密。

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

彩色可折叠代码块

备注标签相较于旧版进行了增强，可以实现更多种颜色，还可以通过设置 child:codeblock 来实现可折叠的代码块。以下是一个默认打开的代码折叠框：

默认打开的代码折叠框
1
2
3
func test() {
  print("hello world")
}

代码如下：

1
2
3
{% folding child:codeblock open:true color:yellow 默认打开的代码折叠框 %}
代码块
{% endfolding %}
危险，请不要打开这个

通过设置颜色，以实现更醒目的作用，但不要滥用色彩哦～

警告，真的很危险

通过设置颜色，以实现更醒目的作用，但不要滥用色彩哦～

最后一次警告，千万不要打开这个

不要说我们没有警告过你，Windows 10 不是為所有人設計，而是為每個人設計。

folders 多个折叠容器聚合

样式相比 folding 简单一些，适用于多个折叠标签平铺显示的场景，例如题目列表：

题目1

这是答案1

题目2

这是答案2

题目3

这是答案3

代码如下：

1
2
3
4
5
6
7
8
{% folders %}
<!-- folder 题目1 -->
这是答案1
<!-- folder 题目2 -->
这是答案2
<!-- folder 题目3 -->
这是答案3
{% endfolders %}

tabs 分栏容器

这个标签移植自 NexT 主题，但做了以下修改：

  • 支持设置 align:center 来使内容居中
  • 设置默认激活的标签方式为 active:1 而非 , 1（使用默认格式降低学习成本，且显式声明可读性更强）
  • 不需要 <!-- endtab --> 来作为结束标识（因为 Stellar 会自动判断）
  • 不需要 tabs id 来保证唯一性（因为 Stellar 会设置唯一标识）
  • 不支持 @icon 方式设置图标（因为 Stellar 不再内置 fontawesome 图标库）
  • 轮廓样式简化，可以搭配其它容器类标签嵌套使用。
演示效果
示例代码
图片
代码块
表格
1
2
let x = 123
print("hello world")
a b c
a1 b1 c1
a2 b2 c2

微信公众号 欢迎关注！

许可协议

本文采用 金大富-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章