383 字
2 分钟
页面浏览--访问次数--
代码块标题与文件名

给代码块加 title="..." 之后,块顶部会生成一条窗口栏:左侧是操作系统风格的窗口控制按钮 + 按扩展名识别的文件图标,右侧是复制按钮与折叠入口。

文件名作为标题#

效果(左上角图标随扩展名变化)

package.json
{
"name": "shirone",
"version": "1.0.0"
}

源码

```json title="package.json"
{
"name": "shirone",
"version": "1.0.0"
}
```

提示性标题#

title 不一定是文件名,也可以是一句操作说明:

效果

终端操作命令
pnpm install
pnpm dev

源码(title= 必须写在围栏首行、语言名之后)

```bash title="终端操作命令"
pnpm install
pnpm dev
```

不同扩展名的图标#

src/config/siteConfig.ts
export const siteConfig = {
title: "KLucen 的启事录",
lang: "zh_CN",
};
src/styles/button.styl
.m3-btn
background: var(--primary)
border-radius: var(--shape-corner-m)
config/comment.yaml
enable: true
provider: giscus

源码

```typescript title="src/config/siteConfig.ts"
export const siteConfig = {
title: "KLucen 的启事录",
lang: "zh_CN",
};
```
```stylus title="src/styles/button.styl"
.m3-btn
background: var(--primary)
border-radius: var(--shape-corner-m)
```
```yaml title="config/comment.yaml"
enable: true
provider: giscus
```

参数#

参数类型说明
title字符串顶栏标题;常见两种用法:文件名、操作说明
frameauto / code / terminal / none窗口栏样式;默认 auto(按语言推断)

第 20 篇,共 23 篇本文属于系列

代码块标题与文件名
https://www.klucen.cn/posts/博客搭建/codeblock-titles/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时