标题与文件名

通过在代码块元数据中添加 title="..." 属性，可以为代码块生成带有文件类型图标的窗口顶栏与文件名标识。

语法格式#

在代码围栏首行指定 title：

1
```json title="package.json"
2
{
3
  "name": "shirone",
4
  "version": "1.0.0"
5
}
6
```

渲染效果：

1
{
2
  "name": "shirone",
3
  "version": "1.0.0"
4
}

顶栏左端会根据扩展名渲染对应的文件类型图标，.json、.ts、.md、.astro 各有不同标识。

用标题描述操作步骤#

标题不必是文件名，也可以是一句操作说明：

1
```bash title="终端操作命令"
2
pnpm install
3
pnpm dev
4
```

渲染效果：

1
pnpm install
2
pnpm dev

在文章中的实际用法#

一次完整的配置说明通常会连续出现多个带文件名的代码块，读者据此就能判断每个片段应该写到哪个文件里：

1
先在站点配置中填写域名：
2

3
```yaml title="config/site.yaml"
4
site: https://www.example.com/
5
title: 我的博客
6
```
7

8
再在导航栏配置中加入菜单项：
9

10
```yaml title="config/nav-bar.yaml"
11
items:
12
  - name: 首页
13
    url: /
14
    icon: material-symbols:home-rounded
15
```
16

17
最后执行构建：
18

19
```bash title="本地预览"
20
pnpm content:sync
21
pnpm dev
22
```

渲染效果：

1
site: https://www.example.com/
2
title: 我的博客

1
items:
2
  - name: 首页
3
    url: /
4
    icon: material-symbols:home-rounded

1
pnpm content:sync
2
pnpm dev

视觉与特性#

顶栏左侧自动渲染操作系统风格的窗口控制按钮与文件扩展名专用图标。
顶栏右侧自动放置快速复制代码按钮与折叠控制入口。
文件名标签清晰明确，避免读者混淆代码存放路径。

元数据写法	顶栏显示	适用场景
`title="package.json"`	文件图标 + 文件名	真实存在的文件
`title="终端操作命令"`	纯文本标题	命令与临时片段
不写 `title`	仅显示复制按钮	无需标注来源的短片段

二甲基

语法格式#

用标题描述操作步骤#

在文章中的实际用法#

视觉与特性#

Markdown 语法

继续阅读

换条路线

评论

二甲基

语法格式#

用标题描述操作步骤#

在文章中的实际用法#

视觉与特性#

分享文章

沿着主题读

换条路线

评论