diff --git a/README.md b/README.md
index 0c19306..2f96cec 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,11 @@
 
 > 一个神奇的文档网站生成器。
 
-## 概述
+## 概述 :id=what-it-is
 
 Docsify 可立即将你的 Markdown 文件转化为文档网站。 与其他大多数文档网站生成工具不同，它不需要生成 HTML 文件。 相反，它可以动态加载和解析 Markdown 文件，并将其显示为网站。 要开始使用它，只需创建一个 `index.html` 并将其[部署到 GitHub Pages](zh-cn/deploy.md)（查看[快速开始](zh-cn/quickstart.md)了解更多详情）。
 
-## 特性
+## 特性 :id=features
 
 - 无需静态构建的 HTML 文件
 - 简单和轻量
@@ -15,14 +15,14 @@ Docsify 可立即将你的 Markdown 文件转化为文档网站。 与其他大
 - 丰富的 API
 - 支持 Emoji
 
-## 示例
+## 示例 :id=examples
 
-可以查看 [Showcase](https://github.com/docsifyjs/docsify/#showcase) 来了解更多在使用 docsify 的文档项目。
+Check out the [Showcase](awesome?id=showcase) to see docsify in use.
 
-## 捐赠
+## 捐赠 :id=donate
 
 如果你认为 docsify 对你有帮助，或者我的工作有价值，请考虑捐赠。 欢迎帮我[买杯咖啡](https://github.com/QingWei-Li/donate)。 :heart:
 
-## 社区
+## 社区 :id=community
 
 在 [Discord](https://discord.gg/3NwKFyR) 的社区里可以找到 docsify 的用户和开发者团队。
diff --git a/adding-pages.md b/adding-pages.md
index b7bd8e4..a162db6 100644
--- a/adding-pages.md
+++ b/adding-pages.md
@@ -1,4 +1,4 @@
-# 添加页面
+# 添加页面 :id=adding-pages
 
 如果你需要更多页面，你可以简单地在 docsify 目录中创建更多 markdown 文件。 如果创建了名为 `guide.md` 的文件，则可通过 `/#/guide` 访问该文件。
 
@@ -23,7 +23,7 @@ docs/zh-cn/README.md  => http://domain.com/#/zh-cn/
 docs/zh-cn/guide.md   => http://domain.com/#/zh-cn/guide
 ```
 
-## 侧边栏
+## 侧边栏 :id=sidebar
 
 为了拥有侧边栏，你可以创建自己的侧边栏 `_sidebar.md`（有关示例，请参阅[本文档的侧边栏](https://github.com/docsifyjs/docsify/blob/main/docs/_sidebar.md)）：
 
@@ -79,7 +79,7 @@ docs/zh-cn/guide.md   => http://domain.com/#/zh-cn/guide
     └── running-services.md
 ```
 
-## 嵌套侧边栏
+## 嵌套侧边栏 :id=nested-sidebars
 
 你可能希望侧边栏在导航后更新以反映当前目录。 这可以通过在每个文件夹中添加一个 `_sidebar.md` 文件来实现。
 
@@ -100,7 +100,7 @@ docs/zh-cn/guide.md   => http://domain.com/#/zh-cn/guide
 
 > [!IMPORTANT] 你可以在一个子目录中创建一个 `README.md` 文件来作为路由的默认网页。
 
-## 用侧边栏中选定的条目名称作为页面标题
+## 用侧边栏中选定的条目名称作为页面标题 :id=set-page-titles-from-sidebar-selection
 
 页面的 `title` 标签是根据_选定的_侧边栏项目名称生成的。 为了更好地进行搜索引擎优化，你可以在文件名后指定一个字符串来自定义标题。
 
@@ -111,7 +111,7 @@ docs/zh-cn/guide.md   => http://domain.com/#/zh-cn/guide
 - [Guide](guide.md 'The greatest guide in the world')
 ```
 
-## 目录
+## 目录 :id=table-of-contents
 
 创建 `_sidebar.md` 后，侧边栏内容将根据 markdown 文件中的标题自动生成。
 
@@ -129,7 +129,7 @@ docs/zh-cn/guide.md   => http://domain.com/#/zh-cn/guide
 <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
 ```
 
-## 忽略副标题
+## 忽略副标题 :id=ignoring-subheaders
 
 当设置了 `subMaxLevel` 时，默认情况下每个标题都会自动添加到目录中。 如果你想忽略特定的标题，可以给它添加 `<!-- {docsify-ignore} -->` 。
 
diff --git a/cdn.md b/cdn.md
index 0781c26..1d67420 100644
--- a/cdn.md
+++ b/cdn.md
@@ -12,7 +12,7 @@ Docsify 推荐 [jsDelivr](//cdn.jsdelivr.net) 为其首选的 CDN：
 - https://unpkg.com/browse/docsify/
 - https://www.bootcdn.cn/docsify/ (支持国内)
 
-## 指定版本
+## 指定版本 :id=specifying-versions
 
 请注意以下 CDN URL 中的`@`版本锁定。 这样就可以指定最新的主版本、次版本、补丁或特定 [semver](https://semver.org) 版本号。
 
@@ -25,7 +25,7 @@ Docsify 推荐 [jsDelivr](//cdn.jsdelivr.net) 为其首选的 CDN：
 
 从文件名中移除`.min`，可获取未压缩的资源。
 
-## 最新主要版本
+## 最新主要版本 :id=latest-major-version
 
 指定最新的主要版本允许你的网站在发布时接收所有非破坏性的增强("次级"更新)和错误修复("补丁"更新)。 对于那些倾向于零维护又可以随着新版本的发布更新其网站的风险最小化的人来说，这是一个好的选择。
 
diff --git a/configuration.md b/configuration.md
index b78a1cd..7882f4a 100644
--- a/configuration.md
+++ b/configuration.md
@@ -306,6 +306,35 @@ window.$docsify = {
 };
 ```
 
+## collapseSidebarGroups
+
+- 类型：`Boolean`
+- 默认：`false`
+
+Initially collapses all root sidebar groups. Visitors can still expand and
+collapse each group by selecting its title. Their choices are preserved while
+navigating between pages.
+
+```js
+window.$docsify = {
+  collapseSidebarGroups: true,
+};
+```
+
+## sidebarPosition
+
+- 类型：`String`
+- 默认：`'left'`
+
+Controls which side of the page displays the sidebar. Set this to `'right'` to
+place the sidebar and its toggle on the right.
+
+```js
+window.$docsify = {
+  sidebarPosition: 'right',
+};
+```
+
 ## homepage
 
 - 类型：`String`
diff --git a/cover.md b/cover.md
index fa35847..a8991ed 100644
--- a/cover.md
+++ b/cover.md
@@ -1,8 +1,8 @@
-# 封面
+# 封面 :id=cover
 
 通过设置 `coverpage` 为 **true** 来开启渲染封面功能。 参见 [coverpage configuration](zh-cn/configuration#coverpage)。
 
-## 基本用法
+## 基本用法 :id=basic-usage
 
 设置 `coverpage` 为 **true**, 并创建 `_coverpage.md` ：
 
@@ -29,7 +29,7 @@ window.$docsify = {
 [Get Started](#docsify)
 ```
 
-## 定制化
+## 定制化 :id=customization
 
 封面页可使用[主题属性](zh-cn/theme#theme-properties)进行自定义：
 
@@ -59,11 +59,11 @@ window.$docsify = {
 ![](_media/bg.png)
 ```
 
-## 封面作为首页
+## 封面作为首页 :id=coverpage-as-homepage
 
 通常，封面页和主页同时出现。 当然，你也可以用[`onlyCover`](zh-cn/configuration#onlycover)选项分离封面。
 
-## 多个封面
+## 多个封面 :id=multiple-covers
 
 如果你的文档网站是多语言的，或许你需要设置多个封面。
 
diff --git a/custom-navbar.md b/custom-navbar.md
index d2a159f..a8cce12 100644
--- a/custom-navbar.md
+++ b/custom-navbar.md
@@ -1,4 +1,4 @@
-# 自定义导航栏
+# 自定义导航栏 :id=custom-navbar
 
 ## HTML
 
@@ -55,7 +55,7 @@
 
 `_navbar.md` 会从每一级目录加载。 如果当前目录中没有 `_navbar.md`，则会返回上一级目录。 例如，如果当前路径是 `/guide/quick-start`，则将从 `/guide/_navbar.md` 加载 `_navbar.md`。
 
-## 嵌套
+## 嵌套 :id=nesting
 
 你可以通过缩进在某个父级下的项目来创建子列表。
 
@@ -82,7 +82,7 @@
 
 ![嵌套导航栏](../_images/zh-cn/nested-navbar.png "嵌套导航栏")
 
-## 整合自定义导航栏与 emoji 插件
+## 整合自定义导航栏与 emoji 插件 :id=combining-custom-navbars-with-the-emoji-plugin
 
 如果你使用 [emoji 插件](zh-cn/plugins#emoji)：
 
diff --git a/deploy.md b/deploy.md
index 91e54f5..f83f495 100644
--- a/deploy.md
+++ b/deploy.md
@@ -1,4 +1,4 @@
-# 部署
+# 部署 :id=deploy
 
 与 [GitBook](https://www.gitbook.com) 类似，你可以将文件部署到 GitHub Pages、GitLab Pages或 VPS 上。
 
@@ -39,7 +39,7 @@ pages:
 
 > !IMPORTANT] 你可以用 `- cp -r docs/. public` 替换脚本，如果 `./docs` 是你的 docsify 子文件夹。
 
-## Firebase 主机
+## Firebase 主机 :id=firebase-hosting
 
 > [!IMPORTANT] 你需要先使用谷歌账号登录 [Firebase 控制台](https://console.firebase.google.com)，然后使用 `npm i -g firebase-tools` 命令安装 Firebase CLI 。
 
@@ -100,7 +100,7 @@ server {
 6. 在**Publish directory**区域，如果你在**Base Directory**中添加了 `docs`，你会看到 Publish directory 中填充了 `docs/`
 7. Netlify 很聪明，会在 `docs/` 文件夹中查找 `index.html` 文件。
 
-### HTML5 路由
+### HTML5 路由 :id=html5-router
 
 当使用 HTML5 路由时，你需要设置一条将所有请求重定向到你的 `index.html` 的重定向规则。 当你使用Netlify时这相当简单。 只需在 docs 目录中创建一个名为 `_redirects` 的文件，并将此代码段添加到文件中，就可以了：
 
@@ -210,7 +210,7 @@ frontend:
   docker run -itp 3000:3000 --name=docsify -v $(pwd):/docs docsify/demo
   ```
 
-## Kinsta 静态网站托管
+## Kinsta 静态网站托管 :id=kinsta-static-site-hosting
 
 你可以将 **Docsify** 作为静态网站部署到 [Kinsta](https://kinsta.com/static-site-hosting/) 上。
 
diff --git a/embed-files.md b/embed-files.md
index be0e412..225985f 100644
--- a/embed-files.md
+++ b/embed-files.md
@@ -1,4 +1,4 @@
-# 文件嵌入
+# 文件嵌入 :id=embed-files
 
 从 Docsify 4.6 起可以嵌入任何类型的文件。
 
@@ -20,7 +20,7 @@
 
 外部链接也可以使用 - 只是替换目标。 如果你想要使用 gist URL，请查看[嵌入 gist](#embed-a-gist) 部分。
 
-## 嵌入文件类型
+## 嵌入文件类型 :id=embedded-file-type
 
 目前，文件扩展名自动识别并以不同方式嵌入。
 
@@ -42,7 +42,7 @@
 
 [filename](../_media/example.md ":include :type=code")
 
-## Markdown 与 YAML 元数据结合
+## Markdown 与 YAML 元数据结合 :id=markdown-with-yaml-front-matter
 
 Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元数据。 [front-matter.js](https://www.npmjs.com/package/front-matter) 包便于从文档中提取元数据(front matter)。
 
@@ -60,7 +60,7 @@ Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元
 
 [filename](../_media/example-with-yaml.md ":include")
 
-## 嵌入代码片段
+## 嵌入代码片段 :id=embedded-code-fragments
 
 有时你不想嵌入整个文件。 也许是因为你只需要几行，但你想在 CI 中编译和测试该文件。
 
@@ -87,7 +87,7 @@ Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元
 
 [filename](../_media/example.js ":include :type=code :fragment=demo")
 
-## 标签属性
+## 标签属性 :id=tag-attribute
 
 如果你嵌入文件是一个 `iframe`、`audio` 或者 `video`，你可以给这些标签设置属性。
 
@@ -105,7 +105,7 @@ Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元
 
 你看到它了吗？ 你只需要直接写入属性。 每个标签有哪些属性建议你查看 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)。
 
-## 代码块高亮
+## 代码块高亮 :id=the-code-block-highlight
 
 嵌入任何类型的源代码文件，你可以指定高亮语言或自动标识。
 
@@ -119,13 +119,13 @@ Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元
 
 > [!TIP] 如何设置高亮？ 你可以查看[此处](zh-cn/language-highlight.md)。
 
-## 嵌入 Gist
+## 嵌入 Gist :id=embed-a-gist
 
 你可以将 Gist 作为 Markdown 内容或代码块嵌入。这是基于[嵌入文件](#embed-files)部分开头的方法，不过是嵌入一个原始的 Gist URL。
 
 > [!TIP] **无需**更改插件或应用程序配置即可运行。 事实上，即使你使用插件或修改配置来允许加载外部脚本，从 Gist 复制的 Embed `script` 标签也_无法_加载。
 
-### 确定 Gist 的元数据
+### 确定 Gist 的元数据 :id=identify-the-gists-metadata
 
 从查看 `gist.github.com` 上的 Gist 开始。 为了本指南的目的，我们使用这个 Gist：
 
@@ -152,7 +152,7 @@ Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元
 
 继续下面的一个部分，将 Gist 嵌入到 Docsify 页面上。
 
-### 渲染 Gist 中的 Markdown 内容
+### 渲染 Gist 中的 Markdown 内容 :id=render-markdown-content-from-a-gist
 
 这是将内容**无缝**嵌入到你的文档中的好方法，而不需要将别人引到外部链接。 这种方法非常适合在多个版本库的文档站点上重复使用安装说明要点。 这个方法与你的帐户或其他用户拥有的 Gist 同样有效。
 
@@ -174,7 +174,7 @@ Front Matter 通常在 Jekyl 等博客系统中使用，用于定义文档的元
 
 `LABEL` 可以是你想要的任何文本。 如果链接被破坏，它可以作为一个 _fallback_ 信息。所以在这里重复文件名是很有用的，万一你需要修复一个破坏的链接。 它还可以使嵌入的元素一目了然。
 
-### 渲染 Gist 中的代码块
+### 渲染 Gist 中的代码块 :id=render-a-codeblock-from-a-gist
 
 格式与上一节相同，但在 alt 文本中添加了 `:type=code`。 与[嵌入文件类型](#embedded-file-type)部分一样，语法高亮将从扩展名(如 `.js` 或 `.py`)中**推断**，所以你可以将 `type` 设置为 `code`。
 
diff --git a/helpers.md b/helpers.md
index 02e25a2..207ac97 100644
--- a/helpers.md
+++ b/helpers.md
@@ -1,10 +1,10 @@
-# 文档助手
+# 文档助手 :id=doc-helper
 
 docsify 扩展了一些 Markdown 语法，可以让文档更易读。
 
 > 注意：对于特殊的代码语法，最好将其放在代码的反斜线内，以避免与配置或表情符号发生冲突。
 
-## 标注
+## 标注 :id=callouts
 
 Docsify 支持 [GitHub 风格](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) 标注（也称为“警告”或“警报”）。
 
@@ -70,7 +70,7 @@ Docsify 支持 [GitHub 风格](https://docs.github.com/en/get-started/writing-on
 ?> Legacy **Tip** callouts are deprecated.
 ```
 
-## 链接属性
+## 链接属性 :id=link-attributes
 
 ### disabled
 
@@ -109,7 +109,7 @@ Docsify 支持 [GitHub 风格](https://docs.github.com/en/get-started/writing-on
 [link](/demo2 ':target=_self')
 ```
 
-## 任务清单
+## 任务清单 :id=task-lists
 
 ```markdown
 - [ ] foo
@@ -127,9 +127,9 @@ Docsify 支持 [GitHub 风格](https://docs.github.com/en/get-started/writing-on
   - [ ] bim
   - [ ] lim
 
-## 图片
+## 图片 :id=images
 
-### 类名
+### 类名 :id=class-names
 
 ```markdown
 ![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')
@@ -145,7 +145,7 @@ Docsify 支持 [GitHub 风格](https://docs.github.com/en/get-started/writing-on
 ![logo](https://docsify.js.org/_media/icon.svg ':id=someCssId')
 ```
 
-### 大小
+### 大小 :id=sizes
 
 ```markdown
 ![logo](https://docsify.js.org/_media/icon.svg ':size=WIDTHxHEIGHT')
@@ -161,13 +161,13 @@ Docsify 支持 [GitHub 风格](https://docs.github.com/en/get-started/writing-on
 ![logo](https://docsify.js.org/_media/icon.svg ":size=100")
 ![logo](https://docsify.js.org/_media/icon.svg ":size=10%")
 
-## 设置标题的 id 属性
+## 设置标题的 id 属性 :id=heading-ids
 
 ```markdown
 ### 你好，世界！ :id=hello-world
 ```
 
-## HTML 标签中的 Markdown
+## HTML 标签中的 Markdown :id=markdown--html
 
 你需要在 html 和 markdown 内容之间插入空格。
 这对于在 details 元素中呈现 markdown 内容非常有用。
diff --git a/language-highlight.md b/language-highlight.md
index 97fb7d4..44d59a0 100644
--- a/language-highlight.md
+++ b/language-highlight.md
@@ -1,4 +1,4 @@
-# 代码高亮
+# 代码高亮 :id=language-highlighting
 
 ## Prism
 
@@ -129,7 +129,7 @@ Docsify 的官方[主题](zh-cn/themes)与 Prism 语法高亮主题兼容。
 </style>
 ```
 
-## 动态内容
+## 动态内容 :id=dynamic-content
 
 可以使用 Prism 的 [`highlightElement()`](https://prismjs.com/docs/Prism.html#.highlightElement) 方法高亮显示动态生成的代码块：
 
diff --git a/markdown.md b/markdown.md
index 1ea3d28..fb6e0a0 100644
--- a/markdown.md
+++ b/markdown.md
@@ -1,4 +1,4 @@
-# Markdown 配置
+# Markdown 配置 :id=markdown-configuration
 
 **docsify** 使用 [marked](https://github.com/markedjs/marked) 作为其 Markdown 解析器。 你可以通过自定义 `renderer` 来定制如何将 Markdown 内容渲染为 HTML：
 
@@ -29,7 +29,7 @@ window.$docsify = {
 };
 ```
 
-## 支持 mermaid
+## 支持 mermaid :id=supports-mermaid
 
 > [!IMPORTANT] 目前 docsify 不支持异步 mermaid 渲染（最新的 mermaid 版本是 `v9.3.0`）。
 
diff --git a/plugins.md b/plugins.md
index f8fee55..744e80a 100644
--- a/plugins.md
+++ b/plugins.md
@@ -1,10 +1,10 @@
-# 插件列表
+# 插件列表 :id=list-of-plugins
 
 这些是 Docsify 的内置和外部插件。
 
 也可以参阅如何[编写插件](zh-cn/write-a-plugin.md)。
 
-## 全文搜索
+## 全文搜索 :id=full-text-search
 
 默认情况下，当前页面上的超链接会被识别，内容会被保存到 `IndexedDB`。 你也可以指定文件的路径。
 
@@ -66,6 +66,11 @@
       // You can provide a regexp to match prefixes. In this case,
       // the matching substring will be used to identify the index
       pathNamespaces: /^(\/(zh-cn|ru-ru))?(\/(v1|v2))?/,
+
+      // Show where each result comes from (default: 'none')
+      // 'page': the page title, e.g. "Guide"
+      // 'breadcrumb': the sidebar path, e.g. "Basics › Guide"
+      resultSource: 'none',
     },
   };
 </script>
@@ -75,7 +80,7 @@
 
 在进行全文搜索时，该插件会忽略变音标记（例如："cafe" 也会匹配 "café"）。
 
-## 谷歌统计 - Google Analytics
+## 谷歌统计 - Google Analytics :id=google-analytics
 
 > 从 2023 年 7 月 1 日起，谷歌的通用分析服务将不再处理标准属性中的新数据。 通过设置并切换到 Google Analytics 4 属性和 docsify 的 gtag.js 插件做好准备。
 
@@ -135,7 +140,7 @@
 <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/emoji.min.js"></script>
 ```
 
-## 外链脚本 - External Script
+## 外链脚本 - External Script :id=external-script
 
 如果文档里的 script 是内联脚本，可以直接执行；而如果是外链脚本（即 js 文件内容由 `src` 属性引入），则需要使用此插件。
 
@@ -143,7 +148,7 @@
 <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/external-script.min.js"></script>
 ```
 
-## 图片缩放 - Zoom image
+## 图片缩放 - Zoom image :id=zoom-image
 
 Medium's 风格的图片缩放插件。 基于 [medium-zoom](https://github.com/francoischalifour/medium-zoom)。
 
@@ -157,18 +162,18 @@ Medium's 风格的图片缩放插件。 基于 [medium-zoom](https://github.com/
 ![](image.png ':no-zoom')
 ```
 
-## 在 GitHub 上编辑
+## 在 GitHub 上编辑 :id=edit-on-github
 
 在每一页上添加 `Edit on github` 按钮。 由[@njleonzhang](https://github.com/njleonzhang) 提供，查看[文档](https://github.com/njleonzhang/docsify-edit-on-github)
 
-## 代码即时预览和 jsfiddle 集成
+## 代码即时预览和 jsfiddle 集成 :id=demo-code-with-instant-preview-and-jsfiddle-integration
 
 有了这个插件，示例代码就能立即呈现在页面上，这样读者就能立即看到预览效果。
 当读者展开演示框时，源代码和说明就会显示出来。 如果点击 `Try in Jsfiddle` 按钮，`jsfiddle.net` 就会打开这个例子的代码，让读者自己修改代码和测试。
 
 [Vue](https://njleonzhang.github.io/docsify-demo-box-vue/) 和 [React](https://njleonzhang.github.io/docsify-demo-box-react/) 都支持。
 
-## 复制到剪贴板
+## 复制到剪贴板 :id=copy-to-clipboard
 
 在所有的代码块上添加一个简单的 `Click to copy` 按钮来允许用户从你的文档中轻易地复制代码。 由 [@jperasmus](https://github.com/jperasmus) 提供
 
@@ -234,6 +239,6 @@ docsify 的分页导航插件。 由 [@imyelo](https://github.com/imyelo) 提供
 
 由 [@jhildenbiddle](https://github.com/jhildenbiddle/docsify-tabs) 提供。
 
-## 更多插件
+## 更多插件 :id=more-plugins
 
 参考 [awesome-docsify](zh-cn/awesome?id=plugins)
diff --git a/pwa.md b/pwa.md
index 3f6271c..808e91f 100644
--- a/pwa.md
+++ b/pwa.md
@@ -1,10 +1,10 @@
-# 离线模式
+# 离线模式 :id=offline-mode
 
 [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)(PWA) 是一项融合 Web 和 Native 应用各项优点的解决方案。 我们可以利用其支持离线功能的特点，让我们的网站可以在信号差或者**离线状态**下正常运行。
 
 要使用它也非常容易。
 
-## 创建 serviceWorker
+## 创建 serviceWorker :id=create-serviceworker
 
 这里已经整理好了一份代码，你只需要在网站根目录下创建一个 `sw.js` 文件，并粘贴下面的代码。
 
@@ -103,7 +103,7 @@ self.addEventListener('fetch', event => {
 });
 ```
 
-## 注册
+## 注册 :id=register
 
 现在，到 `index.html` 里注册它。 它只适用于一些较新的浏览器，所以我们需要检查：
 
@@ -117,6 +117,6 @@ _index.html_
 </script>
 ```
 
-## 体验一下
+## 体验一下 :id=enjoy-it
 
 发布你的网站，并开始享受离线模式的魔力吧！
diff --git a/quickstart.md b/quickstart.md
index 34acd33..0aae912 100644
--- a/quickstart.md
+++ b/quickstart.md
@@ -1,4 +1,4 @@
-# 快速开始
+# 快速开始 :id=quick-start
 
 推荐全局安装 `docsify-cli` 工具，可以方便地创建及在本地预览生成的文档。
 
@@ -6,7 +6,7 @@
 npm i docsify-cli -g
 ```
 
-## 初始化项目
+## 初始化项目 :id=initialize
 
 如果想在项目的 `./docs` 目录里写文档，直接通过 `init` 初始化项目。
 
@@ -14,7 +14,7 @@ npm i docsify-cli -g
 docsify init ./docs
 ```
 
-## 写入内容
+## 写入内容 :id=writing-content
 
 在 `init` 完成后，你可以看到 `./docs` 子目录中的文件列表。
 
@@ -24,7 +24,7 @@ docsify init ./docs
 
 直接编辑 `docs/README.md` 就能更新文档内容，当然也可以[添加更多页面](zh-cn/adding-pages.md)。
 
-## 本地预览
+## 本地预览 :id=preview-your-site
 
 使用 `docsify serve` 运行本地服务器。 你可以在 `http://localhost:3000` 上预览你的网站。
 
@@ -34,7 +34,7 @@ docsify serve docs
 
 > [!TIP] 更多命令行工具用法，参考 [docsify-cli 文档](https://github.com/docsifyjs/docsify-cli)。
 
-## 手动初始化
+## 手动初始化 :id=manual-initialization
 
 下载或使用以下代码创建一个 `index.html` 模板：
 
@@ -75,7 +75,7 @@ docsify serve docs
 
 </div>
 
-### 指定 docsify 版本
+### 指定 docsify 版本 :id=specifying-docsify-versions
 
 > [!TIP] 注意：在下面两个例子中，当 docsify 发布新的主要版本时，需要手动更新 docsify URL（例如，`v5.x.x` => `v6.x.x`）。 定期检查 docsify 网站，以查看新的主要版本是否已发布。
 
@@ -105,7 +105,7 @@ docsify serve docs
 
 JSDelivr 支持 [npm-compatible semver ranges](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#dependencies)，因此也可以使用版本语法，例如 `@^5.0.0` 表示最新的 v5 版本，`@5.0.x` 表示最新的 v5.0 补丁版本（例如 你将收到 5.0.4，但不是 5.1.0），`@5.x` 表示最新的 v5 次版本和补丁版本（实际上与 `@5` 和 `@^5.0.0` 相同），等等。
 
-### 手动预览你的网站
+### 手动预览你的网站 :id=manually-preview-your-site
 
 如果你的系统上安装了 Python，你可以很容易地使用它来运行静态服务器来预览你的网站，而不是使用 `docsify-cli` 中的 `docsify serve`。
 
diff --git a/themes.md b/themes.md
index 63b24b2..48d2a98 100644
--- a/themes.md
+++ b/themes.md
@@ -1,4 +1,4 @@
-# 主题
+# 主题 :id=themes
 
 ## 核心主题 :id=core-theme
 
diff --git a/v5-upgrade.md b/v5-upgrade.md
index cca6d57..fd65588 100644
--- a/v5-upgrade.md
+++ b/v5-upgrade.md
@@ -1,8 +1,8 @@
-# 将 v4 升级到 v5
+# 将 v4 升级到 v5 :id=upgrading-v4-to-v5
 
 将 Docsify v4 网站升级到 v5 时的主要更改涉及更新 CDN URL 和主题文件。 你的配置设置基本保持不变，因此升级相当简单。
 
-## 开始之前
+## 开始之前 :id=before-you-begin
 
 一些旧版 Docsify 网站可能使用非版本锁定 URL，如：
 
@@ -12,9 +12,9 @@
 
 如果你的网站使用不含 `@4` 或特定版本号的 URL，请按照以下相同步骤操作。 你需要更新版本说明符和路径结构。
 
-## 分步说明
+## 分步说明 :id=step-by-step-instructions
 
-### 1. 更新主题 CSS
+### 1. 更新主题 CSS :id=_1-update-the-theme-css
 
 **更换主题（v4）：**
 
@@ -50,7 +50,7 @@
 
 查看[主题](zh-cn/themes.md) 了解更多详情。
 
-### 2. 添加可选的 Body Class（用于设计风格）
+### 2. 添加可选的 Body Class（用于设计风格） :id=_2-add-optional-body-class-for-styling
 
 **更新开头的 body tag：**
 
@@ -62,7 +62,7 @@
 
 查看[主题类](zh-cn/themes.md?id=classes) 了解更多详情。
 
-### 3. 更新 Docsify 主脚本
+### 3. 更新 Docsify 主脚本 :id=_3-update-the-main-docsify-script
 
 **修改：**
 
@@ -78,7 +78,7 @@
 <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
 ```
 
-### 4. 更新插件 URL
+### 4. 更新插件 URL :id=_4-update-plugin-urls
 
 **搜索插件：**\*
 
@@ -101,7 +101,7 @@
 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
 
 <!-- v5 -->
-<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/zoom.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/zoom-image.min.js"></script>
 ```
 
 **注意：** 如果你使用其他 Docsify 插件（如 emoji、external-script、front-matter 等），则需要按照相同的模式更新这些 URL：
@@ -110,14 +110,43 @@
 - 将版本号从 `@4`（或无版本）更新为 `@5`
 - 例如：`//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js`变为`//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/emoji.min.js`
 
-## 主要区别摘要
+#### Plugin Authors
+
+If you've written a custom plugin that uses `window.Docsify.dom.toggleClass`, this helper has been removed in v5. Replace it with the native `Element.classList` API.
+
+Examples:
+
+```js
+// v4
+window.Docsify.dom.toggleClass(element, 'className');
+
+// v5
+element.classList.toggle('className');
+```
+
+```js
+// v4
+window.Docsify.dom.toggleClass(element, 'action', 'className');
+
+// v5
+element.classList.action('className');
+```
+
+```js
+// v4
+window.Docsify.dom.toggleClass(element, isDark ? 'add' : 'remove', 'dark');
+
+// v5
+element.classList[isDark ? 'add' : 'remove']('dark');
+```
+
+## 主要区别摘要 :id=key-differences-summary
 
 - **CDN 路径**：从 `/lib/` 改为 `/dist/`
 - **版本**：从 `@4` 更新到 `@5`
 - **主题**：v5 使用核心主题（可选附加组件）
-- **插件名称**：`zoom-image` → `zoom`
 
-## 附加说明
+## 附加说明 :id=additional-notes
 
 - 你在 `window.$docsify` 中的配置保持不变
 - 所有 markdown 内容保持不变
diff --git a/vue.md b/vue.md
index 02ca42c..8379ba0 100644
--- a/vue.md
+++ b/vue.md
@@ -1,10 +1,10 @@
-# 兼容 Vue
+# 兼容 Vue :id=vue-compatibility
 
 Docsify 允许 [Vue.js](https://vuejs.org) 内容直接添加到你的 markdown 页面。 这可以极大地简化与数据的工作并将反应添加到你的站点。
 
 Vue [template syntax](https://vuejs.org/guide/essentials/template-syntax) 可以用来将动态内容添加到你的页面。 当使用 [data](#data)、[computed properties](#computed-properties)、[methods](#methods) 和 [lifecycle hooks](#lifecycle-hooks) 时，Vue 内容会变得更加有趣。 这些选项可以指定为 [全局选项](#global-options) 或 DOM [mounts](#mounts) 和 [components](#components)。
 
-## 设置
+## 设置 :id=setup
 
 若要开始，请将 Vue.js 添加到你的 `index.html` 文件。 为你的站点选择合适的生产版本或开发版本，以获得有用的控制台警告和 [Vue.js devtools](https://github.com/vuejs/vue-devtools) 支持。
 
diff --git a/write-a-plugin.md b/write-a-plugin.md
index bcbca4a..1a14233 100644
--- a/write-a-plugin.md
+++ b/write-a-plugin.md
@@ -1,8 +1,8 @@
-# 编写插件
+# 编写插件 :id=write-a-plugin
 
 docsify 插件是一个能够在 Docsify 生命周期的各个阶段执行自定义 JavaScript 代码的函数。
 
-## 设置
+## 设置 :id=setup
 
 Docsify 插件可直接添加到 `plugins` 数组中：
 
@@ -39,7 +39,7 @@ window.$docsify = {
 <script src="docsify-plugin-myplugin.js"></script>
 ```
 
-## 模板
+## 模板 :id=template
 
 下面是一个插件模板，其中包含所有可用生命周期钩子的占位符。
 
@@ -94,7 +94,7 @@ window.$docsify = {
 }
 ```
 
-## 生命周期钩子
+## 生命周期钩子 :id=lifecycle-hooks
 
 生命周期钩子是通过 `hook` 参数传递给插件函数提供的。
 
@@ -188,16 +188,16 @@ hook.ready(() => {
 });
 ```
 
-## 小技巧
+## 小技巧 :id=tips
 
 - 使用 `window.Docsify` 访问 Docsify 方法和属性
 - 使用 `vm` 参数访问当前的 Docsify 实例
 - 喜欢使用调试器的开发人员可以将 [`catchPluginErrors`](zh-cn/configuration#catchpluginerrors) 配置选项设置为 `false`，以允许调试器在出现错误时暂停 JavaScript 的执行
 - 在发布之前，请确保在所有支持的平台上测试你的插件，并使用相关配置选项（如适用）进行测试
 
-## 例子
+## 例子 :id=examples
 
-#### 页脚
+#### 页脚 :id=page-footer
 
 ```js
 window.$docsify = {
@@ -219,7 +219,7 @@ window.$docsify = {
 };
 ```
 
-### 编辑按钮 (GitHub)
+### 编辑按钮 (GitHub) :id=edit-button-github
 
 ```js
 window.$docsify = {