Astro Litos(YOAKE Modified) 主题文档

由于我把原 Litos 主题进行了大幅修改，现在连自己都不知道该怎么用了。所以有了这篇文档。

December 21, 2025

23:42, January 3, 2026

1236 words

TOP Unfinished Litos(YOAKE Modified)

1 配置h2

2 Posts 和 Jottingsh2

3 Friendsh2

4 Docsh2

5 语法h2

5.1 标准 Markdownh3

Notion 和 Litos 都支持 Markdown 标准语法。

按照 Markdown 标准，一个 Markdown 文件只有一个一级标题。因此建议文章正文从二级标题开始。

Notion 并不会将”####”开头的段落渲染为四级标题。但 Litos 遵循 Markdown 标准，最低支持到六级标题。因此当需要在 Notion 中使用四级标题时，和标准 Markdown 一样在段落最起始添加“####”即可，Litos 会在网页上将其渲染为正常的四级标题。

为了文章层级清晰、扁平考虑，建议在正文中只使用二、三、四级标题。

5.2 容器h3

Litos 支持 note、tip、important、warning、caution 五种容器。

由于 Notion 没有容器语法，因此使用 Callout 实现对容器的支持。在 Notion 中键入“/”新建一个 Callout，在第一行中指明容器的类型以及标题。符合要求的 Callout 块将在拉取文章时自动转换为Litos 的容器语法。

以下是一些示例。

----- Callout 块中的内容 -----
note 这里是一条笔记
经砖家研究，21 世纪出生的儿童无一活过三十岁。

----- Litos 语法 -----
> [!note] 这里是一条笔记
> 经砖家研究，21 世纪出生的儿童无一活过三十岁。

这里是一条笔记

经砖家研究，21 世纪出生的儿童无一活过三十岁。

----- Callout 块中的内容 -----
tip 温馨提示
砖家建议不要在空腹的状态下进食。

----- Litos 语法 -----
> [!tip] 温馨提示
> 砖家建议不要在空腹的状态下进食。

温馨提示

砖家建议不要在空腹的状态下进食。

----- Callout 块中的内容 -----
important 重要说明
口渴的时候一定要喝水！

----- Litos 语法 -----
> [!important] 重要说明
> 口渴的时候一定要喝水！

重要说明

口渴的时候一定要喝水！

----- Callout 块中的内容 -----
warning 警告！！
其实没有警告。

----- Litos 语法 -----
> [!warning] 警告！！
> 其实没有警告。

警告！！

其实没有警告。

----- Callout 块中的内容 -----
caution 当心！
水是剧毒的！

----- Litos 语法 -----
> [!caution] 当心！
> 水是剧毒的！

当心！

水是剧毒的！

5.3 增强代码块h3

除了 Markdown 中的标准代码块语法外，Litos 主题还支持增强代码块语法。在 Markdown 代码块的第一行添加不同的注释，即可被渲染为不同的增强代码块。

如带文件名的代码块：

----- Markdown 代码块 -----
// title='src/demo.ts'
type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

带高亮的代码块，使用单个数字或范围指定高亮行：

----- Markdown 代码块 -----
// mark={1, 6-7}
type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

带增加 Diff 的代码块：

----- Markdown 代码块 -----
// ins={3, 9}
type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

带删除 Diff 的代码块：

----- Markdown 代码块 -----
// del={4, 10}
type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

当然也能一起使用：

----- Markdown 代码块 -----
// title='src/demo.ts' mark={1, 6-7} add={3, 9} del={4, 10}
type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}

type State =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: string[] }

function render(state: State) {
  switch (state.status) {
    case 'loading': return "加载中..."
    case 'error':   return `错误: ${state.message.toUpperCase()}`
    case 'success': return `获取到 ${state.data.length} 条数据`
  }
}