Notion标题自动编号

为Notion标题自动添加序号

当前为 2025-08-09 提交的版本，查看最新版本。

安装此脚本？

提问、发表评价或者举报此脚本。

作者

gou tan

评分

0 0 0

版本

1.0.0

创建于

2025-08-09

更新于

2025-08-09

大小

3.3 KB

许可证

MIT

适用于

notion.so

Notion优化(持续更新中)

1. Notion标题和Notion Boost目录自动编号

📅 2025-08-09 有效

1.1. 实现原理

通过注入 CSS 代码实现标题和目录自动编号，采用纯前端渲染方式，不改变页面本质内容。

1.2. 所需插件

Notion页面增强插件：Notion Boost
用户脚本和 CSS 注入插件：User JavaScript and CSS

1.3. 操作步骤

进入 Notion Boost 插件，打开 Show Outline 功能
进入 User JavaScript and CSS 插件，创建新规则
添加以下配置内容并保存，返回 Notion 页面刷新即可生效

1.4. 配置内容

URL pattern： https://www.notion.so/*

CSS 代码：

/* 正文标题编号 */
body {
    counter-set: headings1 headings2 headings3;
}

/* 重置计数器 */
.notranslate[placeholder="Heading 1"] {
    counter-set: headings2;
}

.notranslate[placeholder="Heading 2"] {
    counter-set: headings3;
}

/* 添加编号前缀 */
.notranslate[placeholder="Heading 1"]::before {
    counter-increment: headings1;
    content: counter(headings1) " ";
}

.notranslate[placeholder="Heading 2"]::before {
    counter-increment: headings2;
    content: counter(headings1) "." counter(headings2) " ";
}

.notranslate[placeholder="Heading 3"]::before {
    counter-increment: headings3;
    content: counter(headings1) "." counter(headings2) "." counter(headings3) " ";
}

/* 目录编号 */
.table_of_contents {
    counter-set: toc-h1 toc-h2 toc-h3;
}

/* 目录中的h1重置下级计数器 */
.table_of_contents .nb-h1 {
    counter-set: toc-h2;
}

.table_of_contents .nb-h2 {
    counter-set: toc-h3;
}

/* 目录编号前缀 */
.table_of_contents .nb-h1 .text::before {
    counter-increment: toc-h1;
    content: counter(toc-h1) " ";
}

.table_of_contents .nb-h2 .text::before {
    counter-increment: toc-h2;
    content: counter(toc-h1) "." counter(toc-h2) " ";
}

.table_of_contents .nb-h3 .text::before {
    counter-increment: toc-h3;
    content: counter(toc-h1) "." counter(toc-h2) "." counter(toc-h3) " ";
}

/* 可选：为目录添加一些样式美化 */
.table_of_contents .nb-h1 .text {
    font-weight: bold;
}

.table_of_contents .nb-h2 .text {
    padding-left: 1em;
}

.table_of_contents .nb-h3 .text {
    padding-left: 2em;
}

1.5. 效果展示