released v1.11.1

fix: fix preview html meta issue.
feat: add vue.md cheatsheet. (#10 )
2025-06-17 04:31:22 +08:00 · 2022-10-30 02:15:36 +08:00 · 2022-10-30 02:14:38 +08:00 · 2022-10-30 01:44:38 +08:00 · 2022-10-30 00:54:02 +08:00 · 2022-10-29 23:32:35 +08:00
39 changed files with 1694 additions and 339 deletions
--- a/.github/ISSUE_TEMPLATE/cheatsheet-request.md
+++ b/.github/ISSUE_TEMPLATE/cheatsheet-request.md
@ -5,21 +5,16 @@ title: '备忘清单 请求: '
 labels: request
 assignees: jaywcjlove
 ---
-备忘清单标题 备忘清单
+【备忘清单标题】 备忘清单
 ===

 这是您可以在 Quick Reference 备忘清单上使用的参考！【备忘清单介绍】

-入门
---

-### 卡片 1
+如果有一张备忘单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。

-### 卡片 2
-
-### 卡片 3
-
-另见
+提供参考资料地址
 ----

- [参考地址](https://xxx.com)
+- [参考地址 1](https://xxx.com)
+- [官网地址](https://xxx.com)
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged
--- a/.lintstagedrc
+++ b/.lintstagedrc
@ -0,0 +1,3 @@
+{
+  "**/*.{mjs,css,json,prettierrc,lintstagedrc}": ["prettier --write"]
+}
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,5 @@
+package.json
+coverage
+dist
+build
+docs
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    { "files": ".prettierrc", "options": { "parser": "json" } },
+    { "files": ".lintstagedrc", "options": { "parser": "json" } }
+  ]
+}
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -16,6 +16,26 @@ Contributing 贡献

 只需要 `标题<h1>` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。

+## 目录结构
+
+```bash
+.
+├── CONTRIBUTING.md   # 贡献说明
+├── Dockerfile
+├── LICENSE
+├── README.md         # Home(首页) 内容
+├── dist              # 编译后的静态资源目录
+├── docs              # Markdown 文档（快速参考备忘清单【速查表】）
+│   ├── bash.md
+│   ├── ....
+│   └── yaml.md
+├── package.json
+└── scripts           # MD 转 HTML 的编译脚本
+    ├── assets        # 存放首页 svg 图标文件资源，与 `dosc` 文件名对应
+    ├── ....
+    └── watch.mjs
+```
+
 ## CSS 类注释

 [`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html
@ -34,6 +54,13 @@ Contributing 贡献
 <!--rehype:class=home-card-->
 ```

+首页导航图标存放在 `scripts/assets` 目录中，如果你的备忘清单定义为 `docs/cron.md`，那么你的图标就定义为 `cron.svg` 存放到 `scripts/assets` 目录中，重新编译首页当行菜单就拥有了图标。
+
+- 图标存放在 [`scripts/assets`](https://github.com/jaywcjlove/reference/blob/main/scripts/assets) 目录中
+- 图片名称与清单名称保持一致 `cron.md` -> `cron.svg` (注意大小写)
+- SVG 图标尺寸 `<svg height="1em" width="1em"`
+- SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
+
 ## 本地开发

 ```bash
--- a/README.md
+++ b/README.md
@ -9,10 +9,10 @@ Quick Reference
 <!--rehype:ignore:end-->

 <!--rehype:ignore:start-->
-[![Quick Reference](https://user-images.githubusercontent.com/1680273/196679526-a87aa4af-a7cb-43ff-9817-edbd4e465058.png)](https://jaywcjlove.github.io/reference)
+[![Quick Reference](https://user-images.githubusercontent.com/1680273/197915058-b0aafe2c-10fc-4cc3-b54e-66329c7b4450.png)](https://jaywcjlove.github.io/reference)
 <!--rehype:ignore:end-->

-为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
+为开发人员分享快速参考备忘清单【速查表】 _(主要是方便自己)_，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。

 ## 编程

@ -24,6 +24,7 @@ Quick Reference
 [INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
 [JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
 [Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
+[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
 [Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
 [SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));-->
 [TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
@ -49,6 +50,7 @@ Quick Reference
 [RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
 [TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
 [Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
+[Vue 3 (努力中...)](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->

 ## Nodejs
@ -102,8 +104,8 @@ Quick Reference

 上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！

-[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
-[`我有一张备忘单`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
+[`请求添加备忘单(速查表)`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
+[`我有一张备忘单(速查表)`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
 <!--rehype:style=margin-top:3rem-->

 <!--rehype:ignore:start-->
--- a/docs/bash.md
+++ b/docs/bash.md
@ -34,11 +34,9 @@ NAME = "John"   # => Error (关于空间)

 ### 注释

-```bash
-# 这是一个内联 Bash 注释。
-```
-
 ```shell
+# 这是一个内联 Bash 注释。
+
 : '
 这是一个
 非常整洁的评论
--- a/docs/github-actions.md
+++ b/docs/github-actions.md
@ -340,7 +340,7 @@ env:
  myHexNumber: ${{ 0xff }}
  myExponentialNumber: ${{ -2.99e-2 }}
  myString: Mona the Octocat
-  myStringInBraces: ${{ 'It''s open source!' }}
+  myStringInBraces: ${{ 'It''s source!' }}
 ```

 ### 函数 contains
@ -375,6 +375,7 @@ startsWith('Hello world', 'He') // 返回 true
 format('{{Hello {0} {1} {2}!}}', 'Mona', 'the', 'Octocat')
 // 返回 '{Hello Mona the Octocat!}'.
 ```
+<!--rehype:className=wrap-text -->

 另见: [函数 format](https://docs.github.com/cn/actions/learn-github-actions/expressions#format)

@ -815,6 +816,24 @@ steps:

 您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置

+### 一些 actions 推荐
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+[`create-tag-action`](https://github.com/jaywcjlove/create-tag-action) | 根据 package.json 创建 `Tag` / `Release`
+[`changelog-generator`](https://github.com/jaywcjlove/changelog-generator) | 生成 `changelog` 日志
+[`github-action-modify-file-content`](https://github.com/jaywcjlove/github-action-modify-file-content) | 修改仓库文件内容
+[`github-action-contributors`](https://github.com/jaywcjlove/github-action-contributors) | 生成贡献(contributors.svg)图片
+[`generated-badges`](https://github.com/jaywcjlove/generated-badges) | 生成徽章(Badges)图片
+[`coverage-badges-cli`](https://github.com/jaywcjlove/coverage-badges-cli) | 生成覆盖率徽章(Badges)图片
+[`action-ejs`](https://github.com/jaywcjlove/action-ejs) | 基于 ejs 生成 HTML
+[`github-action-package`](https://github.com/jaywcjlove/github-action-package) | 修改 JSON 文件内容
+[`markdown-to-html-cli`](https://github.com/jaywcjlove/markdown-to-html-cli) | Markdown 转换成 HTML
+[`ncipollo/release-action`](https://github.com/ncipollo/release-action) | 创建 `Release`
+[`peaceiris/actions-gh-pages`](https://github.com/peaceiris/actions-gh-pages) | 将文件或文件夹内容提交到 `gh-pages` 分支
+<!--rehype:className=style-list-->
+
 另见
 ---

--- a/docs/homebrew.md
+++ b/docs/homebrew.md
@ -38,6 +38,7 @@ export HOMEBREW_INSTALL_FROM_API=1
 命令 | 说明
 :--- :--- 
 `brew install git`         | `安装`一个包
+`brew reinstall git`       | 重新`安装`一个包
 `brew uninstall git`       | `删除`/`卸载`软件包
 `brew upgrade git`         | 升级包
 :--- :---
@ -46,9 +47,6 @@ export HOMEBREW_INSTALL_FROM_API=1
 `brew switch git 2.5.0`    | 更改版本
 :--- :---
 `brew list --versions git` | 看看你有什么版本
-:--- :---
-`brew help` | 打印帮助信息
-`brew help <sub-command>` | 打印子命令的帮助信息

 ### 更多包命令

@ -119,6 +117,13 @@ $ brew search <text>
 $ brew info <formula>
 ```

+### 帮助命令
+
+命令 | 说明
+:--- :--- 
+`brew help` | 打印帮助信息
+`brew help <sub-command>` | 打印子命令的帮助信息
+
 另见
 ---

--- a/docs/http-status-code.md
+++ b/docs/http-status-code.md
@ -8,11 +8,11 @@ HTTP 状态码

 ### Means 

- [1xx: Informational](#1xx-information) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
- [2xx: Success](#2xx-successful) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
- [3xx: Redirection](#3xx-redirection) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
- [4xx: Client Error](#4xx-client-error) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
- [5xx: Server Error](#5xx-server-error) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->
+- [1xx: Informational](#1xx-信息) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
+- [2xx: Success](#2xx-成功的) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
+- [3xx: Redirection](#3xx-重定向) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
+- [4xx: Client Error](#4xx-客户端错误) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
+- [5xx: Server Error](#5xx-服务器错误) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->

 ### 2xx. 成功的
 <!--rehype:wrap-class=row-span-2-->
@ -58,8 +58,8 @@ HTTP 状态码
 ### 3xx. 重定向

 * [300: Multiple Choices](https://tools.ietf.org/html/rfc7231#section-6.4.1) _一个链接列表。 用户可以选择一个链接并转到该位置。 最多五个地址_<!--rehype:tooltips-->
-* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url _<!--rehype:tooltips-->
-* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url _<!--rehype:tooltips-->
+* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url_<!--rehype:tooltips-->
+* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url_<!--rehype:tooltips-->
 * [303: See Other](https://tools.ietf.org/html/rfc7231#section-6.4.4) _请求的页面可以在不同的 url 下找到_<!--rehype:tooltips-->
 * [304: Not Modified](https://tools.ietf.org/html/rfc7232#section-4.1) _这是对 If-Modified-Since 或 If-None-Match 标头的响应代码，其中 URL 自指定日期以来未修改_<!--rehype:tooltips-->
 * [305: Use Proxy](https://tools.ietf.org/html/rfc7231#section-6.4.5) _请求的 URL 必须通过 Location 标头中提到的代理访问_<!--rehype:tooltips-->
@ -128,4 +128,4 @@ HTTP 状态码
 - [List of FTP server return codes](https://en.wikipedia.org/wiki/List_of_FTP_server_return_codes) _(wikipedia.org)_
 - [HTTP概述](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview) _(mozilla.org)_
 - [Help for HTTP error 403: “Forbidden”](http://www.getnetgoing.com/HTTP-403.html) _(getnetgoing.com)_
- [实用的 RESTful API 最佳实践](https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api) _(vinaysahni.com)_
+- [实用的 RESTful API 最佳实践](https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api) _(vinaysahni.com)_
--- a/docs/mysql.md
+++ b/docs/mysql.md
@ -0,0 +1,605 @@
+MySQL 备忘清单
+===
+
+本备忘单旨在快速理解 [MySQL](https://mysql.com) 所涉及的主要概念，提供了最常用的SQL语句，供您参考。
+
+
+入门
+---
+
+### 介绍
+<!--rehype:wrap-class=row-span-3-->
+
+MySQL 为关系型数据库(Relational Database Management System)，一个关系型数据库由一个或数个表格组成，如下所示的一个表格
+
+----
+
+```bash
+    name ▼ 键            ▼ 列(col)
+┌┈┈┈┈┬┈┈┈┈┈┈┈┈┬┈┈┈┈┈┈┬┈┈┈┈┈┈┈┐
+┆ id ┆ name   ┆ uid  ┆ level ┆  ◀ 表头header
+├┈┈┈┈┼┈┈┈┈┈┈┈┈┤┈┈┈┈┈┈┤┈┈┈┈┈┈┈┤
+┆  1 ┆ mysql  ┆ 0    ┆ 3     ┆
+├┈┈┈┈┼┈┈┈┈┈┈┈┈┤┈┈┈┈┈┈┤┈┈┈┈┈┈┈┤
+┆  2 ┆ redis  ┆ 12   ┆ 1     ┆  ◀ 行 row
+└┈┈┈┈┴┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┴┈┈┈┈┈┈┈┘
+    redis ▲ 值
+```
+
+----
+
+- `表头(header)` 每一列的名称
+- `列(col)` 具有相同数据类型的数据的集合
+- `行(row)` 每一行用来描述某个人/物的具体信息
+- `值(value)` 行的具体信息，每个值与该列数据类型相同
+- `键(key)` 用来识别某个特定的人/物的方法，有唯一性
+
+### 登录MySQL
+
+```shell
+# 默认用户名<root>，-p 是密码，
+# ⚠️参数后面不需要空格
+mysql -h 127.0.0.1 -u <用户名> -p<密码>
+mysql -D 数据库名 -h 主机名 -u 用户名 -p
+mysql -h <host> -P <端口号> -u <user> -p [db_name]
+mysql -h <host> -u <user> -p [db_name]
+```
+
+### 常用的
+<!--rehype:wrap-class=row-span-3-->
+
+#### 数据库 Database
+
+:-|:-
+:-|:-
+`CREATE DATABASE` db `;` | `创建`数据库
+`SHOW DATABASES;`        | `列出`数据库
+`USE` db`;`              | `切换`到数据库
+`CONNECT` db `;`         | `切换`到数据库
+`DROP DATABASE` db`;`    | `删除`数据库
+
+#### 表 Table
+
+:-|:-
+:-|:-
+`SHOW TABLES;`           | 列出当前数据库的表
+`SHOW FIELDS FROM` t`;`  | 表的列表字段
+`DESC` t`;`              | 显示表格结构
+`SHOW CREATE TABLE `t`;` | 显示创建表sql
+`TRUNCATE TABLE `t`;`    | 删除表中的所有数据
+`DROP TABLE `t`;`        | 删除表格
+
+#### Proccess
+
+:-|:-
+:-|:-
+`show processlist;` | 列出进程
+`kill` pid`;`       | 杀死进程
+
+### 查看 MySQL 信息
+
+```shell
+# 显示当前mysql的version的各种信息
+mysql> status;
+# 显示当前mysql的version信息
+mysql> select version(); 
+# 查看 MySQL 端口号
+mysql> show global variables like 'port';
+```
+
+### 退出MySQL会话
+
+```bash
+mysql> exit 
+```
+
+退出 `quit;` 或 `\q;` 一样的效果
+
+### 备份
+
+创建备份
+
+```sql
+mysqldump -u user -p db_name > db.sql
+```
+
+导出不带架构的数据库
+
+```shell
+mysqldump -u user -p db_name --no-data=true --add-drop-table=false > db.sql
+```
+<!--rehype:className=wrap-text -->
+
+恢复备份
+
+```shell
+mysql -u user -p db_name < db.sql
+```
+
+MySQL 示例
+------
+
+### 管理表格
+
+创建一个包含三列的新表
+
+```sql
+CREATE TABLE t (
+    id    INT,
+    name  VARCHAR DEFAULT NOT NULL,
+    price INT DEFAULT 0
+    PRIMARY KEY(id)
+);
+```
+
+从数据库中删除表
+
+```sql
+DROP TABLE t ;
+```
+
+向表中添加新列
+
+```sql
+ALTER TABLE t ADD column;
+```
+
+从表中删除列c
+
+```sql
+ALTER TABLE t DROP COLUMN c ;
+```
+
+添加约束
+
+```sql
+ALTER TABLE t ADD constraint;
+```
+
+删除约束
+
+```sql
+ALTER TABLE t DROP constraint;
+```
+
+将表从t1重命名为t2
+
+```sql
+ALTER TABLE t1 RENAME TO t2;
+```
+
+将列c1重命名为c2
+
+```sql
+ALTER TABLE t1 RENAME c1 TO c2 ;
+```
+
+删除表中的所有数据
+
+```sql
+TRUNCATE TABLE t;
+```
+
+### 从表中查询数据
+
+从表中查询列c1、c2中的数据
+
+```sql
+SELECT c1, c2 FROM t
+```
+
+查询表中的所有行和列
+
+```sql
+SELECT * FROM t
+```
+
+查询数据并使用条件筛选行
+
+```sql
+SELECT c1, c2 FROM t
+WHERE condition
+```
+
+查询表中的不同行
+
+```sql
+SELECT DISTINCT c1 FROM t
+WHERE condition
+```
+
+按升序或降序对结果集排序
+
+```sql
+SELECT c1, c2 FROM t
+ORDER BY c1 ASC [DESC]
+```
+
+跳过行的偏移并返回下n行
+
+```sql
+SELECT c1, c2 FROM t
+ORDER BY c1 
+LIMIT n OFFSET offset
+```
+
+使用聚合函数对行进行分组
+
+```sql
+SELECT c1, aggregate(c2)
+FROM t
+GROUP BY c1
+```
+
+使用HAVING子句筛选组
+
+```sql
+SELECT c1, aggregate(c2)
+FROM t
+GROUP BY c1
+HAVING condition
+```
+
+### 从多个表查询
+<!--rehype:wrap-class=row-span-2-->
+
+内部连接 t1 和 t2
+
+```sql
+SELECT c1, c2 
+FROM t1
+INNER JOIN t2 ON condition
+```
+
+左连接t1和t1
+
+```sql
+SELECT c1, c2 
+FROM t1
+LEFT JOIN t2 ON condition
+```
+
+右连接t1和t2
+
+```sql
+SELECT c1, c2 
+FROM t1
+RIGHT JOIN t2 ON condition
+```
+
+执行完全外部连接
+
+```sql
+SELECT c1, c2 
+FROM t1
+FULL OUTER JOIN t2 ON condition
+```
+
+生成表中行的笛卡尔积
+
+```sql
+SELECT c1, c2 
+FROM t1
+CROSS JOIN t2
+```
+
+执行交叉连接的另一种方法
+
+```sql
+SELECT c1, c2 
+FROM t1, t2
+```
+
+使用INNER Join子句将t1连接到自身
+
+```sql
+SELECT c1, c2
+FROM t1 A
+INNER JOIN t1 B ON condition
+```
+
+使用SQL运算符，合并两个查询中的行
+
+```sql
+SELECT c1, c2 FROM t1
+UNION [ALL]
+SELECT c1, c2 FROM t2
+```
+
+返回两个查询的交集
+
+```sql
+SELECT c1, c2 FROM t1
+INTERSECT
+SELECT c1, c2 FROM t2
+```
+
+从另一个结果集中减去一个结果集
+
+```sql
+SELECT c1, c2 FROM t1
+MINUS
+SELECT c1, c2 FROM t2
+```
+
+使用模式匹配%查询行_
+
+```sql
+SELECT c1, c2 FROM t1
+WHERE c1 [NOT] LIKE pattern
+```
+
+查询列表中的行
+
+```sql
+SELECT c1, c2 FROM t
+WHERE c1 [NOT] IN value_list
+```
+
+查询两个值之间的行
+
+```sql
+SELECT c1, c2 FROM t
+WHERE  c1 BETWEEN low AND high
+```
+
+检查表中的值是否为NULL
+
+```sql
+SELECT c1, c2 FROM t
+WHERE  c1 IS [NOT] NULL
+```
+
+### 使用 SQL 约束
+
+将c1和c2设置为主键
+
+```sql
+CREATE TABLE t(
+    c1 INT, c2 INT, c3 VARCHAR,
+    PRIMARY KEY (c1,c2)
+);
+```
+
+将c2列设置为外键
+
+```sql
+CREATE TABLE t1(
+    c1 INT PRIMARY KEY,  
+    c2 INT,
+    FOREIGN KEY (c2) REFERENCES t2(c2)
+);
+```
+
+使c1和c2中的值唯一
+
+```sql
+CREATE TABLE t(
+    c1 INT, c1 INT,
+    UNIQUE(c2,c3)
+);
+```
+
+确保c1>0和c1>=c2中的值
+
+```sql
+CREATE TABLE t(
+  c1 INT, c2 INT,
+  CHECK(c1> 0 AND c1 >= c2)
+);
+```
+c2列中的设置值不为NULL
+
+```sql
+CREATE TABLE t(
+     c1 INT PRIMARY KEY,
+     c2 VARCHAR NOT NULL
+);
+```
+
+### 修改数据
+
+在表格中插入一行
+
+```sql
+INSERT INTO t(column_list)
+VALUES(value_list);
+```
+
+在表格中插入多行
+
+```sql
+INSERT INTO t(column_list)
+VALUES (value_list), 
+       (value_list), …;
+```
+
+将行从t2插入t1
+
+```sql
+INSERT INTO t1(column_list)
+SELECT column_list
+FROM t2;
+```
+
+更新列c1中所有行的新值
+
+```sql
+UPDATE t
+SET c1 = new_value;
+```
+
+更新列c1、c2中与条件匹配的值
+
+```sql
+UPDATE t
+SET c1 = new_value, 
+        c2 = new_value
+WHERE condition;
+```
+
+删除表中的所有数据
+
+```sql
+DELETE FROM t;
+```
+
+删除表中的行子集
+
+```sql
+DELETE FROM t
+WHERE condition;
+```
+
+### 管理视图
+<!--rehype:wrap-class=row-span-2-->
+
+创建由c1和c2组成的新视图
+
+```sql
+CREATE VIEW v(c1,c2) 
+AS
+SELECT c1, c2
+FROM t;
+```
+
+使用选中选项创建新视图
+
+```sql
+CREATE VIEW v(c1,c2) 
+AS
+SELECT c1, c2
+FROM t;
+WITH [CASCADED | LOCAL] CHECK OPTION;
+```
+
+创建递归视图
+
+```sql
+CREATE RECURSIVE VIEW v 
+AS
+select-statement -- anchor part
+UNION [ALL]
+select-statement; -- recursive part
+```
+
+创建临时视图
+
+```sql
+CREATE TEMPORARY VIEW v 
+AS
+SELECT c1, c2
+FROM t;
+```
+
+删除视图
+
+```sql
+DROP VIEW view_name;
+```
+
+### 管理触发器
+
+创建或修改触发器
+
+```sql
+CREATE OR MODIFY TRIGGER trigger_name
+WHEN EVENT
+ON table_name TRIGGER_TYPE
+EXECUTE stored_procedure;
+```
+
+#### WHEN
+
+:-|:-
+:-|:-
+`BEFORE` | 在事件发生前调用
+`AFTER`  | 事件发生后调用
+
+#### EVENT
+
+:-|:-
+:-|:-
+`INSERT` | 为INSERT调用
+`UPDATE` | 调用UPDATE
+`DELETE` | 调用DELETE
+
+#### TRIGGER_TYPE
+
+:-|:-
+:-|:-
+`FOR EACH ROW`       | -
+`FOR EACH STATEMENT` | -
+
+### 管理索引
+
+在t表的c1和c2上创建索引
+
+```sql
+CREATE INDEX idx_name 
+ON t(c1,c2);
+```
+
+在t表的c3、c4上创建唯一索引
+
+```sql
+CREATE UNIQUE INDEX idx_name
+ON t(c3,c4)
+```
+
+删除索引
+
+```sql
+DROP INDEX idx_name;
+```
+
+MySQL 数据类型
+---------
+
+
+### Strings
+
+| -            | -                           |
+|--------------|-----------------------------|
+| `CHAR`       | String (0 - 255)            |
+| `VARCHAR`    | String (0 - 255)            |
+| `TINYTEXT`   | String (0 - 255)            |
+| `TEXT`       | String (0 - 65535)          |
+| `BLOB`       | String (0 - 65535)          |
+| `MEDIUMTEXT` | String (0 - 16777215)       |
+| `MEDIUMBLOB` | String (0 - 16777215)       |
+| `LONGTEXT`   | String (0 - 4294967295)    |
+| `LONGBLOB`   | String (0 - 4294967295)    |
+| `ENUM`       | One of preset options       |
+| `SET`        | Selection of preset options |
+
+
+### Date & time
+| Data Type   | Format              |
+|-------------|---------------------|
+| `DATE     ` | yyyy-MM-dd          |
+| `TIME     ` | hh:mm:ss            |
+| `DATETIME ` | yyyy-MM-dd hh:mm:ss |
+| `TIMESTAMP` | yyyy-MM-dd hh:mm:ss |
+| `YEAR     ` | yyyy                |
+
+
+### Numeric
+
+| -             | -                                                             |
+|---------------|---------------------------------------------------------------|
+| `TINYINT x`   | Integer (-128 to 127)                                         |
+| `SMALLINT x`  | Integer (-32768 to 32767)                                     |
+| `MEDIUMINT x` | Integer (-8388608 to 8388607)                                 |
+| `INT x`       | Integer (-2147483648 to 2147483647)                         |
+| `BIGINT x`    | Integer (-9223372036854775808 to 9223372036854775807) |
+| `FLOAT`       | Decimal (precise to 23 digits)                                |
+| `DOUBLE`      | Decimal (24 to 53 digits)                                     |
+| `DECIMAL`     | "DOUBLE" stored as string                                  |
+
+另见
+---
+
+- [SQL 基础教程](http://www.w3school.com.cn/sql/index.asp) _(w3school.com.cn)_
+- [SQL 语句教程](http://www.1keydata.com/cn/sql/sql-count.php) _(1keydata.com)_
+- [21分钟 MySQL 基础入门](https://jaywcjlove.github.io/mysql-tutorial/21-minutes-MySQL-basic-entry.html) _(jaywcjlove.github.io)_
--- a/docs/npm.md
+++ b/docs/npm.md
@ -108,7 +108,7 @@ npm access restricted <package-name>
 公开私有包

 ```bash
-npm access restricted <package-name>
+npm access public <package-name>
 ```

 授予私有包访问权限
@ -170,7 +170,7 @@ npm publish --access public
 ```ini
 # last modified: 01 Jan 2016
 ; Set a new registry for a scoped package
-@myscope:registry=https://mycustomregistry.example.org
+@myscope:registry=https://registry.npmmirror.com
 ```

 注释使用 `#`, `;` 放置到一行的开头。`.npmrc` 文件由指定此注释语法的 [`npm/ini`](https://github.com/npm/ini) 解析
@ -193,19 +193,21 @@ npm publish --access public
 `.npmignore` 文件就像 [`.gitignore`](./git.md#忽略文件) 一样工作。它不能覆盖 `package.json#files` 字段。

 ### 中国镜像站安装
-<!--rehype:wrap-class=col-span-2-->
+<!--rehype:wrap-class=col-span-2 row-span-2-->

 ```bash
+# 临时使用
 $ npm install -g <package-name> --registry=https://registry.npmmirror.com
 ```

-将配置放置在 `.npmrc` 配置文件中。
+将配置放置在 `.npmrc` 全局配置文件中，或者在项目的根目录中。

 ```ini
+; registry=https://registry.npmjs.org/
 registry=https://registry.npmmirror.com
 ```

-或者配置到 `package.json#publishConfig` 字段上
+或者配置到 [`package.json#publishConfig`](./package.json.md#publishconfig) 字段上

 ```json
 "publishConfig":{
@ -213,4 +215,37 @@ registry=https://registry.npmmirror.com
 }
 ```

-请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
+替换 npm 仓库地址为 npmmirror(淘宝) 镜像地址
+
+```bash
+npm config set registry https://registry.npmmirror.com
+```
+
+请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
+
+#### electronjs 镜像和缓存
+
+```ini
+ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
+ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
+; ELECTRON_CUSTOM_DIR="{{ version }}"
+```
+<!--rehype:className=wrap-text -->
+
+### 身份验证相关配置
+
+```ini
+//registry.npmjs.org/:_authToken=MYTOKEN
+; 将适用于 @myorg 和 @another
+//somewhere.com/:_authToken=MYTOKEN
+; 将适用于 @myorg
+//somewhere.com/myorg/:_authToken=MYTOKEN1
+; 将适用于 @another
+//somewhere.com/another/:_authToken=MYTOKEN2
+```
+
+另见
+----
+
+- [npm 仓库、网站和命令行界面的文档](https://docs.npmjs.com/) _(npmjs.com)_
+- [npmmirror 中国镜像站](https://npmmirror.com/) _(npmmirror.com)_
--- a/docs/semver.md
+++ b/docs/semver.md
@ -54,7 +54,6 @@ Semver 备忘清单
 <!--rehype:className=shortcuts-->

 ### 连字符范围
-<!--rehype:wrap-class=row-span-3-->

 | 范围               | 描述           |
 | ---                | ---                   |
@ -80,6 +79,43 @@ Semver 备忘清单

 如果左边是部分的（例如，`1.2`），则假定缺少的部分为`0`（例如，` 1.2.0`）。

+### 有效的语义版本
+<!--rehype:wrap-class=row-span-4-->
+
+```js
+0.0.4
+1.2.3
+10.20.30
+1.1.2-prerelease+meta
+1.1.2+meta
+1.1.2+meta-valid
+1.0.0-alpha
+1.0.0-beta
+1.0.0-alpha.beta
+1.0.0-alpha.beta.1
+1.0.0-alpha.1
+1.0.0-alpha0.valid
+1.0.0-alpha.0valid
+1.0.0-alpha-a.b-c-somethinglong+build.1-aef.1-its-okay
+1.0.0-rc.1+build.1
+2.0.0-rc.1+build.123
+1.2.3-beta
+10.2.3-DEV-SNAPSHOT
+1.2.3-SNAPSHOT-123
+1.0.0
+2.0.0
+1.1.7
+2.0.0+build.1848
+2.0.1-alpha.1227
+1.0.0-alpha+beta
+1.2.3----RC-SNAPSHOT.12.9.1--.12+788
+1.2.3----R-S.12.9.1--.12+meta
+1.2.3----RC-SNAPSHOT.12.9.1--.12
+1.0.0+0.build.1-rc.10000aaa-kk-0.1
+99999999999999999999999.999999999999999999.99999999999999999
+1.0.0-0A.is.legal
+```
+
 ### 组合范围

 | 范围                | 描述                  |
@ -88,13 +124,8 @@ Semver 备忘清单
 | `0.14.x \|\| 15.x.x` | 或 (双竖线分隔)   |
 <!--rehype:className=shortcuts show-header-->

-### 预发布
-
-```
-1.2.3-prerelease+build
-```
-
 ### 解释
+<!--rehype:wrap-class=row-span-2-->

 | 范围              | 描述           |
 | ---                | ---          |
@ -104,6 +135,13 @@ Semver 备忘清单
 | `1.x.x` | 表示定义了公共 API     |
 <!--rehype:className=shortcuts-->

+### 预发布
+
+```
+1.2.3-prerelease+build
+1.1.2-prerelease+meta
+```
+

 另见
 ----
--- a/docs/vue.md
+++ b/docs/vue.md
@ -0,0 +1,271 @@
+Vue 3 备忘清单
+===
+
+渐进式 JavaScript 框架 [Vue 3](https://cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。
+
+
+入门
+---
+
+### 介绍
+
+Vue 是一套用于构建用户界面的渐进式框架
+
+- [Vue 3.x 官方文档](https://cn.vuejs.org/)
+- [Vue Router 4.x 官方文档](https://router.vuejs.org/zh/)
+<!--rehype:className=style-round-->
+
+注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本
+
+### 创建应用
+<!--rehype:wrap-class=row-span-3-->
+
+已安装 `16.0` 或更高版本的 Node.js
+
+```bash
+$ npm init vue@latest
+```
+
+指令将会安装并执行 [create-vue](https://www.npmjs.com/package/create-vue)，它是 Vue 官方的项目脚手架工具
+
+```bash
+✔ Project name: … <your-project-name>
+✔ Add TypeScript? … No/Yes
+✔ Add JSX Support? … No/Yes
+✔ Add Vue Router for Single Page Application development? … No/Yes
+✔ Add Pinia for state management? … No/Yes
+✔ Add Vitest for Unit testing? … No/Yes
+✔ Add Cypress for both Unit and End-to-End testing? … No/Yes
+✔ Add ESLint for code quality? … No/Yes
+✔ Add Prettier for code formatting? … No/Yes
+
+Scaffolding project in ./<your-project-name>...
+Done.
+```
+<!--rehype:className=wrap-text -->
+
+安装依赖并启动开发服务器
+
+```bash
+$ cd <your-project-name>
+$ npm install
+$ npm run dev
+```
+
+当你准备将应用发布到生产环境时，请运行：
+
+```bash
+$ npm run build
+```
+
+此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本
+
+### 应用实例
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+import { createApp } from 'vue'
+
+const app = createApp({
+  data() {
+    return { count: 0 }
+  }
+})
+app.mount('#app')
+```
+
+挂载应用
+
+```html
+<div id="app">
+  <button @click="count++">
+    {{ count }}
+  </button>
+</div>
+```
+
+### 通过 CDN 使用 Vue
+
+```html
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<div id="app">{{ message }}</div>
+<script>
+  const { createApp } = Vue
+  createApp({
+    data() {
+      return {
+        message: 'Hello Vue!'
+      }
+    }
+  }).mount('#app')
+</script>
+```
+<!--rehype:className=wrap-text -->
+
+### 使用 ES 模块构建版本
+
+```html
+<div id="app">{{ message }}</div>
+<script type="module">
+  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+  createApp({
+    data() {
+      return {
+        message: 'Hello Vue!'
+      }
+    }
+  }).mount('#app')
+</script>
+```
+<!--rehype:className=wrap-text -->
+
+模板语法
+---
+
+### 文本插值
+
+```html
+<span>Message: {{ msg }}</span>
+```
+
+使用的是 `Mustache` 语法 (即双大括号)，每次 `msg` 属性更改时它也会同步更新 
+
+### 原始 HTML
+<!--rehype:wrap-class=col-span-2-->
+
+```html
+<p>Using text interpolation: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+```
+
+双大括号`{{}}`会将数据解释为纯文本，使用 `v-html` 指令，将插入 HTML
+
+### Attribute 绑定
+
+```html
+<div v-bind:id="dynamicId"></div>
+```
+
+简写
+
+```html
+<div :id="dynamicId"></div>
+```
+
+### 布尔型 Attribute
+
+```html
+<button :disabled="isButtonDisabled">
+  Button
+</button>
+```
+<!--rehype:className=wrap-text -->
+
+### 动态绑定多个值
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+data() {
+  return {
+    objectOfAttrs: {
+      id: 'container',
+      class: 'wrapper'
+    }
+  }
+}
+```
+
+通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上
+
+```html
+<div v-bind="objectOfAttrs"></div>
+```
+
+### 使用 JavaScript 表达式
+
+```html
+{{ number + 1 }}
+{{ ok ? 'YES' : 'NO' }}
+{{ message.split('').reverse().join('') }}
+
+<div :id="`list-${id}`"></div>
+```
+
+### 仅支持表达式(例子都是无效)
+
+```html
+<!-- 这是一个语句，而非表达式 -->
+{{ var a = 1 }}
+<!-- 条件控制也不支持，请使用三元表达式 -->
+{{ if (ok) { return message } }}
+```
+
+### 调用函数
+
+```html
+<span :title="toTitleDate(date)">
+  {{ formatDate(date) }}
+</span>
+```
+
+
+### 指令 Directives
+
+```html
+<p v-if="seen">Now you see me</p>
+```
+
+### 参数 Arguments
+
+```html
+<a v-bind:href="url"> ... </a>
+<!-- 简写 -->
+<a :href="url"> ... </a>
+```
+
+### 绑定事件
+
+```html
+<a v-on:click="doSomething"> ... </a>
+<!-- 简写 -->
+<a @click="doSomething"> ... </a>
+```
+
+### 动态参数
+
+```html
+<a v-bind:[attributeName]="url"> ... </a>
+<!-- 简写 -->
+<a :[attributeName]="url"> ... </a>
+```
+
+这里的 `attributeName` 会作为一个 JS 表达式被动态执行
+
+### 动态的事件名称
+
+```html
+<a v-on:[eventName]="doSomething"> ... </a>
+<!-- 简写 -->
+<a @[eventName]="doSomething">
+```
+
+### 修饰符 Modifiers
+
+```html
+<form @submit.prevent="onSubmit">
+  ...
+</form>
+```
+
+`.prevent` 修饰符会告知 `v-on` 指令对触发的事件调用 `event.preventDefault()`
+
+### 指令语法
+
+```bash
+v-on:submit.prevent="onSubmit"
+──┬─ ─┬──── ─┬─────  ─┬──────
+  ┆   ┆      ┆        ╰─ Value 解释为JS表达式
+  ┆   ┆      ╰─ Modifiers 由前导点表示
+  ┆   ╰─ Argument 跟随冒号或速记符号
+  ╰─ Name 以 v- 开头使用速记时可以省略
+```
--- a/docs/vue2.md
+++ b/docs/vue2.md
@ -1,7 +1,7 @@
 Vue2 备忘清单
 ===

-渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。
+渐进式 JavaScript 框架 [Vue 2](https://v2.cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。

 入门
 ---
@ -14,6 +14,8 @@ Vue 是一套用于构建用户界面的渐进式框架
 - [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/)
 <!--rehype:className=style-round-->

+注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本
+
 #### 快速创建 **Vue** 项目 ([Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html)) 

 ```bash
--- a/package.json
+++ b/package.json
@ -1,14 +1,16 @@
 {
  "name": "@wcj/reference",
-  "version": "1.10.0",
+  "version": "1.11.1",
  "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
  "author": "jaywcjlove",
  "license": "MIT",
  "homepage": "https://jaywcjlove.github.io/reference",
  "private": false,
  "scripts": {
+    "prepare": "husky install",
    "build": "node scripts/build.mjs",
-    "start": "node scripts/watch.mjs"
+    "start": "node scripts/watch.mjs",
+    "prettier": "prettier --write '**/*.{mjs,css,json,prettierrc,lintstagedrc}'"
  },
  "repository": {
    "type": "git",
@ -22,10 +24,16 @@
    "@wcj/markdown-to-html": "^2.1.1",
    "chokidar": "^3.5.3",
    "fs-extra": "^10.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
    "recursive-readdir-files": "^2.3.0",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-document": "^6.1.0",
    "rehype-slug": "^5.0.1",
    "remark-gemoji": "^7.0.1"
+  },
+  "engines": {
+    "node": ">=16.0.0"
  }
 }
--- a/scripts/assets/menu.svg
+++ b/scripts/assets/menu.svg
@ -0,0 +1,3 @@
+<svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
+  <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
+</svg>
--- a/scripts/assets/mysql.svg
+++ b/scripts/assets/mysql.svg
--- a/scripts/assets/vue.svg
+++ b/scripts/assets/vue.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
+  <path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"/>
+  <path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"/>
+</svg>
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@ -1,3 +1,3 @@
 import { run } from './index.mjs';

-run()
+run();
--- a/scripts/create.mjs
+++ b/scripts/create.mjs
@ -1,6 +1,7 @@
 import markdown from '@wcj/markdown-to-html';
 import rehypeDocument from 'rehype-document';
 import remarkGemoji from 'remark-gemoji';
+import rehypeRaw from 'rehype-raw';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
@ -9,7 +10,7 @@ import { header } from './nodes/header.mjs';
 import { rehypeUrls } from './utils/rehypeUrls.mjs';
 import { tooltips } from './utils/tooltips.mjs';
 import { homeCardIcons } from './utils/homeCardIcons.mjs';
-import { getTocsTree } from './utils/getTocsTree.mjs';
+import { getTocsTree, getTocsTitleNode, getTocsTitleNodeWarpper, addTocsInWarp } from './utils/getTocsTree.mjs';
 import { rehypeTitle } from './utils/rehypeTitle.mjs';
 import { anchorPoint } from './utils/anchorPoint.mjs';
 import { rehypePreviewHTML } from './utils/rehypePreviewHTML.mjs';
@ -20,8 +21,11 @@ export function create(str = '', options = {}) {
  let title = str.match(/[^===]+(?=[===])/g) || [];
  let description = str.match(/\n==={1,}\n+([\s\S]*?)\n/g) || [];
  title = title[0] || '';
-  description = (description[0] || '').replace(/^\n[=\n]+/, '').replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1').replace(/\n/, '');
-  const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & `: ''
+  description = (description[0] || '')
+    .replace(/^\n[=\n]+/, '')
+    .replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1')
+    .replace(/\n/, '');
+  const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & ` : '';
  const mdOptions = {
    showLineNumbers: false,
    hastNode: false,
@ -29,34 +33,53 @@ export function create(str = '', options = {}) {
    rehypePlugins: [
      rehypeSlug,
      rehypeAutolinkHeadings,
-      [rehypeDocument, {
-        title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
-        css: [ ...options.css ],
-        link: [
-          {rel: 'icon', href: favicon, type: 'image/svg+xml'}
-        ],
-        meta: [
-          { description: `${description}为开发人员分享快速参考备忘单。` },
-          { keywords: `Quick,Reference,cheatsheet,${!options.isHome && options.filename || ''}` }
-        ]
-      }],
+      [
+        rehypeDocument,
+        {
+          title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
+          css: [...options.css],
+          link: [{ rel: 'icon', href: favicon, type: 'image/svg+xml' }],
+          meta: [
+            { description: `${description}为开发人员分享快速参考备忘单。` },
+            { keywords: `Quick,Reference,cheatsheet,${(!options.isHome && options.filename) || ''}` },
+          ],
+        },
+      ],
    ],
+    filterPlugins: (type, plugins = []) => {
+      if (type === 'rehype') {
+        const dt = plugins.filter((plug) => {
+          return /(rehypeRaw)/.test(plug.name) ? false : true;
+        });
+        // 放在 rehypeDocument 前面
+        dt.unshift(rehypeRaw);
+        dt.unshift(rehypePreviewHTML);
+        return dt;
+      }
+      return plugins;
+    },
    rewrite: (node, index, parent) => {
-      rehypePreviewHTML(node, parent);
      rehypeTitle(node, options.filename);
      homeCardIcons(node, parent, options.isHome);
      tooltips(node, index, parent);
      htmlTagAddAttri(node, options);
      rehypeUrls(node);
-      if (node.type === 'element' && node.tagName === 'body') {
-        node.children = getTocsTree([ ...node.children ]);
-        node.children.unshift(header(options));
-        node.children.push(footer());
-        node.children.push(anchorPoint());
+      if (node.children) {
+        if (node.type === 'element' && node.tagName === 'body') {
+          const tocsData = getTocsTree([...node.children]);
+          if (!options.isHome) {
+            const tocsMenus = getTocsTitleNode([...tocsData]);
+            node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus));
+          } else {
+            node.children = tocsData;
+          }
+          node.children.unshift(header(options));
+          node.children.push(footer());
+          node.children.push(anchorPoint());
+        }
      }
-    }
-  }
-  
+    },
+  };

  return markdown(str, mdOptions);
-}
+}
--- a/scripts/index.mjs
+++ b/scripts/index.mjs
@ -11,15 +11,20 @@ export const CSS_OUTPUT_PATH = path.resolve(OUTOUT, 'style/style.css');
 export async function createHTML(files = [], num = 0) {
  const dataFile = files[num];
  if (!dataFile) {
-    console.log(' \n done!\n')
+    console.log(' \n done!\n');
    return;
  }
  ++num;
-  const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path.relative(process.cwd(), dataFile.path).replace(path.sep, '/')}`;
-  
+  const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path
+    .relative(process.cwd(), dataFile.path)
+    .replace(path.sep, '/')}`;
+
  const mdstr = await fs.readFile(dataFile.path);
  const htmlPath = path.relative(DOCS, dataFile.path);
-  const outputHTMLPath = path.resolve(OUTOUT, 'docs', htmlPath).replace(/README.md$/i, 'index.html').replace(/.md$/, '.html');
+  const outputHTMLPath = path
+    .resolve(OUTOUT, 'docs', htmlPath)
+    .replace(/README.md$/i, 'index.html')
+    .replace(/.md$/, '.html');

  await fs.ensureDir(path.dirname(outputHTMLPath));

@ -28,18 +33,18 @@ export async function createHTML(files = [], num = 0) {
    isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)),
    githubURL,
    homePath: path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'index.html')),
-    css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)]
+    css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)],
  });
  await fs.writeFile(outputHTMLPath, html);
-  console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`)
-  createHTML(files, num)
+  console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`);
+  createHTML(files, num);
 }

 export async function run() {
  await fs.ensureDir(OUTOUT);
  await fs.emptyDir(OUTOUT);
  await fs.ensureDir(path.dirname(CSS_OUTPUT_PATH));
-  await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH)
+  await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH);
  const files = await recursiveReaddirFiles(process.cwd(), {
    ignored: /\/(node_modules|\.git)/,
    exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
--- a/scripts/nodes/header.mjs
+++ b/scripts/nodes/header.mjs
@ -3,25 +3,25 @@ import { github, editor } from './logo.mjs';
 import { getSVGNode } from '../utils/getSVGNode.mjs';
 import { darkMode } from '../utils/darkMode.mjs';

-const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg')
+const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
 export function header({ homePath, githubURL = '' }) {
-  const svgNode = getSVGNode(ICONS_PATH)
+  const svgNode = getSVGNode(ICONS_PATH);
  const data = [
    {
      menu: true,
      href: githubURL,
      target: '__blank',
      label: '编辑',
-      children: [editor]
+      children: [editor],
    },
    ...darkMode(),
    {
      menu: true,
      href: 'https://github.com/jaywcjlove/reference',
      target: '__blank',
-      children: [github]
-    }
-  ]
+      children: [github],
+    },
+  ];
  return {
    type: 'element',
    tagName: 'nav',
@ -51,10 +51,8 @@ export function header({ homePath, githubURL = '' }) {
                properties: {
                  class: ['title'],
                },
-                children: [
-                  { type: 'text', value: 'Quick Reference' }
-                ]
-              }
+                children: [{ type: 'text', value: 'Quick Reference' }],
+              },
            ],
          },
          {
@ -75,29 +73,28 @@ export function header({ homePath, githubURL = '' }) {
                    type: 'element',
                    tagName: 'span',
                    properties: {},
-                    children: label ? [
-                      { type: 'text', value: label }
-                    ] : []
-                  }
-                ]
-              }
+                    children: label ? [{ type: 'text', value: label }] : [],
+                  },
+                ],
+              };
              if (label) {
-                childs.children = [...children, {
-                  type: 'element',
-                  tagName: 'span',
-                  properties: {},
-                  children: [
-                    { type: 'text', value: label }
-                  ]
-                }];
+                childs.children = [
+                  ...children,
+                  {
+                    type: 'element',
+                    tagName: 'span',
+                    properties: {},
+                    children: [{ type: 'text', value: label }],
+                  },
+                ];
              } else {
                childs.children = children;
              }
-              return childs
+              return childs;
            }),
          },
        ],
-      }
+      },
    ],
  };
-}
+}
--- a/scripts/nodes/htmlTagAddAttri.mjs
+++ b/scripts/nodes/htmlTagAddAttri.mjs
@ -5,4 +5,4 @@ export function htmlTagAddAttri(node, { isHome }) {
  if (node && node.tagName === 'body' && isHome) {
    node.properties.class = ['home'];
  }
-}
+}
--- a/scripts/nodes/logo.mjs
+++ b/scripts/nodes/logo.mjs
@ -3,38 +3,38 @@ export const logo = [
    type: 'element',
    tagName: 'svg',
    properties: {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      height: "1em",
-      width: "1em"
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg',
+      height: '1em',
+      width: '1em',
    },
    children: [
      {
        type: 'element',
        tagName: 'path',
        properties: {
-          opacity: ".5",
-          d: "m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z",
-          fill: "white"
+          opacity: '.5',
+          d: 'm21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z',
+          fill: 'white',
        },
      },
      {
        type: 'element',
        tagName: 'path',
        properties: {
-          d: "M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" ,
-          fill: "#cbd5e1"
+          d: 'M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z',
+          fill: '#cbd5e1',
        },
      },
      {
        type: 'element',
        tagName: 'path',
        properties: {
-          d: "M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z",
-          fill: "#292D32"
+          d: 'M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z',
+          fill: '#292D32',
        },
-      }
+      },
    ],
  },
  {
@ -43,48 +43,45 @@ export const logo = [
    properties: {
      class: ['title'],
    },
-    children: [
-      { type: 'text', value: 'Quick Reference' }
-    ]
-  }
+    children: [{ type: 'text', value: 'Quick Reference' }],
+  },
 ];

 export const github = {
  type: 'element',
  tagName: 'svg',
  properties: {
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    height: "1em",
-    width: "1em"
+    viewBox: '0 0 16 16',
+    fill: 'currentColor',
+    height: '1em',
+    width: '1em',
  },
  children: [
    {
      type: 'element',
      tagName: 'path',
      properties: {
-        d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z",
+        d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z',
      },
    },
  ],
-}
-
+};

 export const editor = {
  type: 'element',
  tagName: 'svg',
  properties: {
-    viewBox: "0 0 36 36",
-    fill: "currentColor",
-    height: "1em",
-    width: "1em"
+    viewBox: '0 0 36 36',
+    fill: 'currentColor',
+    height: '1em',
+    width: '1em',
  },
  children: [
    {
      type: 'element',
      tagName: 'path',
      properties: {
-        d: "m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z",
+        d: 'm33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z',
      },
    },
    {
@ -92,8 +89,8 @@ export const editor = {
      tagName: 'path',
      properties: {
        fill: 'none',
-        d: "M0 0h36v36H0z",
+        d: 'M0 0h36v36H0z',
      },
    },
  ],
-}
+};
--- a/scripts/style.css
+++ b/scripts/style.css
@ -6,7 +6,8 @@ body {
  tab-size: 4;
  margin: 0;
  line-height: inherit;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
 }

 [data-color-mode*='dark'] body .dark {
@ -22,7 +23,8 @@ body {
  display: none;
 }

-[data-color-mode*='light'], [data-color-mode*='light'] body {
+[data-color-mode*='light'],
+[data-color-mode*='light'] body {
  --color-prettylights-syntax-comment: #b1bac3;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
@ -42,7 +44,7 @@ body {
  --color-prettylights-syntax-markup-italic: #24292f;
  --color-prettylights-syntax-markup-bold: #24292f;
  --color-prettylights-syntax-markup-deleted-text: #82071e;
-  --color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --color-prettylights-syntax-markup-inserted-text: #116329;
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --color-prettylights-syntax-markup-changed-text: #953800;
@ -61,14 +63,16 @@ body {
  --color-bg-subtle: #f8f9fa;
  --color-border-default: #d0d7de;
  --color-border-muted: #ececec94;
-  --color-neutral-muted: rgba(175,184,193,0.2);
+  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
+  --box-shadow: 109 109 109;
 }

-[data-color-mode*='dark'], [data-color-mode*='dark'] body {
+[data-color-mode*='dark'],
+[data-color-mode*='dark'] body {
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
@ -110,8 +114,9 @@ body {
  --color-neutral-muted: rgb(51 65 85/0.3);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
-  --color-attention-subtle: rgba(187,128,9,0.15);
+  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
+  --box-shadow: 0 0 0;
 }

 body {
@ -119,18 +124,39 @@ body {
  background-color: var(--color-canvas-default);
 }

-*, ::before, ::after {
+*,
+::before,
+::after {
  box-sizing: border-box;
 }

-blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
  margin: 0;
 }
-h1,h2,h3,h4,h5,h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  font-size: inherit;
-  font-weight: inherit
+  font-weight: inherit;
 }
-ol, ul, menu {
+ol,
+ul,
+menu {
  list-style: none;
  margin: 0;
  padding: 0;
@ -143,12 +169,16 @@ pur {
  color: var(--color-prettylights-syntax-entity);
 }

-.wrap-body > p > code, .wrap-body > ul li > code, .wrap-body tbody td code {
+.wrap-body > p > code,
+.wrap-body > ul li > code,
+.wrap-body tbody td code {
  --text-opacity: 1;
-  color: rgb(5 150 105/var(--text-opacity));
+  color: rgb(5 150 105 / var(--text-opacity));
 }

-.wrap-body em, .wrap-body sup, .wrap-body sub {
+.wrap-body em,
+.wrap-body sup,
+.wrap-body sub {
  color: var(--color-fg-subtle);
 }

@ -156,13 +186,16 @@ table {
  width: 100%;
  text-indent: 0;
  border-color: inherit;
-  border-collapse: collapse
+  border-collapse: collapse;
 }
 table td:first-child {
  white-space: nowrap;
 }

-table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>del>code, ul.shortcuts li > code, kbd {
+table.shortcuts td:not(:last-child) > code,
+table.shortcuts td:not(:last-child) > del > code,
+ul.shortcuts li > code,
+kbd {
  background-color: var(--color-neutral-muted);
  color: var(--color-fg-subtle);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
@ -171,21 +204,23 @@ table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>de
  border: 1px solid var(--color-border-muted);
  border-color: var(--color-border-default);
  line-height: 1.5;
-  font-family: Arial,Helvetica,sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  display: inline-block;
  border-radius: 3px;
 }

-table tr+tr {
+table tr + tr {
  border-top: solid 1px #ececec94;
  border-color: var(--color-border-muted);
 }
-table td, table th {
+table td,
+table th {
  padding: 9px 14px;
  text-align: left;
 }
-table tr th:last-child, table tr td:last-child {
+table tr th:last-child,
+table tr td:last-child {
  text-align: right;
 }

@ -197,13 +232,15 @@ table thead th {

 table thead {
  display: none;
-  border-bottom: solid 1px rgba(85,102,119,0.3);
+  border-bottom: solid 1px rgba(85, 102, 119, 0.3);
 }
-table td:first-child>code {
+table td:first-child > code {
  --text-opacity: 1;
-  color: rgb(5 150 105/var(--text-opacity));
+  color: rgb(5 150 105 / var(--text-opacity));
 }
-table td > del, table td:first-child > del > code, .wrap-body p > del > code {
+table td > del,
+table td:first-child > del > code,
+.wrap-body p > del > code {
  color: var(--color-danger-fg);
 }

@ -211,16 +248,19 @@ table.show-header thead {
  display: table-header-group;
 }

-table.style-list td + td, table.style-list-arrow td + td {
+table.style-list td + td,
+table.style-list-arrow td + td {
  padding-top: 0 !important;
 }

-table.style-list td, table.style-list-arrow td {
+table.style-list td,
+table.style-list-arrow td {
  display: block;
  text-align: left !important;
 }

-table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
+table.style-list-arrow td:first-child::before,
+ul.style-arrow li:before {
  content: '';
  display: inline-block;
  width: 0px;
@ -231,8 +271,9 @@ table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
  border-bottom: 5px solid transparent;
 }

-tt, code {
-  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+tt,
+code {
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 1em;
 }
 pre:only-child {
@ -242,7 +283,7 @@ pre:only-child {
 pre {
  margin-top: 0;
  margin-bottom: 0;
-  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  word-wrap: normal;
  line-height: 1.5;
  overflow: hidden;
@ -252,8 +293,9 @@ pre {
 .max-container a {
  color: rgb(2 132 199/1);
 }
-.max-container a, .max-container a:visited {
-  background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e);
+.max-container a,
+.max-container a:visited {
+  background-image: linear-gradient(transparent, transparent 6px, #34495e 6px, #34495e);
  background-position: bottom;
  background-size: 100% 6px;
  background-repeat: repeat-x;
@ -263,7 +305,8 @@ pre {
  text-decoration-color: transparent;
 }

-.max-container a:hover, .max-container a:visited:hover{
+.max-container a:hover,
+.max-container a:visited:hover {
  text-decoration-color: #10b981;
 }

@ -274,7 +317,8 @@ pre {
  padding: 0.75rem;
 }

-body.home .h1wrap-body, body.home .h1wrap .wrap-body {
+body.home .h1wrap-body,
+body.home .h1wrap .wrap-body {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
@ -292,7 +336,7 @@ body.home .h2wrap > h2::after {
  width: 110%;
  margin-top: 0.5rem;
  --bg-opacity: 1;
-  background-color: rgb(30 41 59/var(--bg-opacity));
+  background-color: rgb(30 41 59 / var(--bg-opacity));
 }
 body.home .h1wrap .wrap-body p + p {
  margin-top: 1.6rem;
@ -309,8 +353,9 @@ body:not(.home) .h2wrap > .wrap-body > ul {
 body.home .h1wrap p {
  text-align: left;
 }
-body.home .max-container a.home-button:hover, body.home .max-container a.home-button:visited:hover {
-  transition: all .3s;
+body.home .max-container a.home-button:hover,
+body.home .max-container a.home-button:visited:hover {
+  transition: all 0.3s;
  text-decoration-color: #fff;
  color: #fff;
 }
@ -318,16 +363,16 @@ body.home .max-container a.home-button:hover, body.home .max-container a.home-bu
 .home-card {
  display: grid;
  gap: 2rem;
-  grid-template-columns: repeat(2,minmax(0,1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 [data-color-mode*='light'] body .home-card a {
  --text-opacity: 0.75;
-  color: rgb(15 19 24/var(--text-opacity));
+  color: rgb(15 19 24 / var(--text-opacity));
 }
 [data-color-mode*='light'] body .home-card a:hover {
  --text-opacity: 0.85;
-  color: rgb(241 245 249/var(--text-opacity)) !important;
+  color: rgb(241 245 249 / var(--text-opacity)) !important;
 }
 .home-card a {
  display: flex;
@ -337,13 +382,13 @@ body.home .max-container a.home-button:hover, body.home .max-container a.home-bu
  border-radius: 0.5rem;
  padding: 0rem 1rem;
  height: 4rem;
-  box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: var(--color-fg-default);
  --text-opacity: 0.75;
-  color: rgb(241 245 249/var(--text-opacity));
+  color: rgb(241 245 249 / var(--text-opacity));
  --bg-opacity: 0.5;
-  background-color: rgb(62 69 72/var(--bg-opacity));
-  transition: all .3s;
+  background-color: rgb(62 69 72 / var(--bg-opacity));
+  transition: all 0.3s;
  text-decoration: none;
 }
 .home-card a:hover {
@ -372,23 +417,26 @@ a.home-button {
  margin-left: 1rem;
  margin-right: 1rem;
  --bg-opacity: 1;
-  background-color: rgb(10 147 102/var(--bg-opacity));
+  background-color: rgb(10 147 102 / var(--bg-opacity));
  --text-opacity: 1;
-  color: rgb(203 213 225/var(--text-opacity));
+  color: rgb(203 213 225 / var(--text-opacity));
 }
 a.home-button:hover {
  --bg-opacity: 0.5;
 }
 a.text-grey {
  --bg-opacity: 1;
-  background-color: rgb(56 76 109/var(--bg-opacity));
+  background-color: rgb(56 76 109 / var(--bg-opacity));
 }

 .header-nav .max-container {
  padding: 1.8rem 1.8rem 0;
 }

-.header-nav .max-container, .header-nav .logo, .header-nav .menu, .header-nav .menu a {
+.header-nav .max-container,
+.header-nav .logo,
+.header-nav .menu,
+.header-nav .menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
@ -409,17 +457,19 @@ a.text-grey {
  font-size: 40px;
 }

-.header-nav .menu a:hover, .header-nav .menu button:hover {
+.header-nav .menu a:hover,
+.header-nav .menu button:hover {
  background-color: var(--color-neutral-muted);
 }

-.header-nav .menu a, .header-nav .menu button {
+.header-nav .menu a,
+.header-nav .menu button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 9999px;
-  transition: all .3s;
+  transition: all 0.3s;
  border: 0;
 }

@ -441,7 +491,8 @@ a.text-grey {
  font-size: 18px;
 }

-.header-nav a, .header-nav a:visited {
+.header-nav a,
+.header-nav a:visited {
  color: var(--color-fg-default);
  line-height: 1.2;
  gap: 0.3rem;
@ -474,6 +525,66 @@ a.text-grey {
  display: flex;
  flex-direction: column;
  gap: 3rem;
+  position: relative;
+}
+.menu-tocs {
+  position: sticky;
+  top: 0;
+  z-index: 88;
+  display: inline-flex;
+}
+.menu-tocs:hover > .menu-modal {
+  display: block;
+  border-radius: 0.5rem;
+  padding: 0.3rem;
+  max-height: 100vh;
+  overflow: auto;
+  background-color: var(--color-canvas-subtle);
+  box-shadow: 0 8px 24px rgba(var(--box-shadow) / 0.2);
+}
+.menu-tocs > .menu-btn {
+  border: 1px solid var(--color-border-default);
+  display: flex;
+  border-radius: 0.3rem;
+  padding: 0.3rem 0.4rem;
+  font-size: 1.3rem;
+  margin-left: -3rem;
+  margin-top: 0.3rem;
+  position: absolute;
+}
+.menu-tocs > .menu-modal {
+  width: 260px;
+  position: absolute;
+  display: none;
+  margin-left: -1rem;
+}
+.menu-tocs > .menu-modal a + a {
+  margin-bottom: 0.2rem;
+}
+.menu-tocs > .menu-modal a:hover {
+  background-color: var(--color-neutral-muted);
+}
+.menu-tocs > .menu-modal a.is-active-link {
+  background-color: var(--color-border-muted);
+  text-decoration-color: #10b981;
+}
+.menu-tocs > .menu-modal a {
+  display: block;
+  overflow: hidden;
+  padding: 0.3rem 0.5rem;
+}
+
+.menu-tocs > .menu-modal a.leve2 {
+  font-weight: bold;
+}
+
+.menu-tocs > .menu-modal a.leve3 {
+  padding-left: 1.2rem;
+}
+.menu-tocs > .menu-modal a.leve4,
+.menu-tocs > .menu-modal a.leve5,
+.menu-tocs > .menu-modal a.leve6 {
+  padding-left: 2.1rem;
 }

 .wrap-header.h2wrap > h2 {
@ -484,7 +595,8 @@ a.text-grey {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 200;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
  margin-top: 0;
 }

@ -495,7 +607,8 @@ a.text-grey {
  color: rgb(148 163 184/1);
 }

-body:not(.home) .h2wrap > h2 a::after, body:not(.home) .h3wrap > h3 a::after {
+body:not(.home) .h2wrap > h2 a::after,
+body:not(.home) .h3wrap > h3 a::after {
  content: '#';
  padding-right: 0.5rem;
  color: rgb(16 185 129/1);
@ -535,7 +648,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  letter-spacing: 0.05em;
 }

-.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p {
+.wrap-header.h3wrap > .wrap-body p,
+.wrap-header.h4wrap > .wrap-body p {
  margin: 0px;
  width: 100%;
  padding-left: 1rem;
@ -550,7 +664,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  background-color: var(--color-bg-subtle);
  color: rgb(30 41 59/0);
  content: '-';
-  line-height: 1.50rem;
+  line-height: 1.5rem;
  top: 0;
  position: absolute;
  left: 0px;
@ -588,7 +702,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 .h4wrap > .wrap-body ul,
 .h4wrap > .wrap-body ol,
 .h4wrap > .wrap-body dl,
-
 .h3wrap > .wrap-body ul,
 .h3wrap > .wrap-body ol,
 .h3wrap > .wrap-body dl {
@ -596,7 +709,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  margin-bottom: 0.5rem;
  display: grid;
  list-style-position: outside;
-  grid-template-columns: repeat(1,minmax(0,1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }

 .h4wrap > .wrap-body ul + hr {
@ -618,7 +731,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  border-bottom: solid 1px var(--color-border-muted);
 }

-.h2wrap-body ul:not(.style-none)>li::before {
+.h2wrap-body ul:not(.style-none) > li::before {
  content: '';
  position: absolute;
  display: inline-block;
@ -654,13 +767,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  width: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
-  line-height: 1.30rem;
+  line-height: 1.3rem;
  border: 2px solid #228e6c;
  top: -1px;
  left: -14px;
 }
 .h2wrap-body ul.style-timeline li:last-child {
-  border-image: linear-gradient(to bottom,#46c69e96,rgba(0,0,0,0)) 1 100%;
+  border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
 }
 .h2wrap-body ul.style-timeline li {
  border-bottom: 0 !important;
@ -703,7 +816,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  border-bottom: 0;
 }

-.h3wrap hr, .h3wrap-body hr {
+.h3wrap hr,
+.h3wrap-body hr {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
@ -712,7 +826,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {

 .h2wrap-body {
  font-size: 0.925rem;
-  grid-template-columns: repeat(3,minmax(0,1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex-direction: column;
 }

@ -724,7 +838,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  border-radius: 0.5rem;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
-  box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
 }

 .h2wrap-body > .wrap .wrap-body > *:last-child {
@ -741,33 +855,87 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  overflow-x: auto;
 }

-.cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) !important; }
-.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
-.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
-.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
-.cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
-.cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
-.cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) !important; }
-.cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
-.cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) !important; }
-.col-span-2 { grid-column: span 2/span 2; }
-.col-span-3 { grid-column: span 3/span 3; }
-.col-span-4 { grid-column: span 4/span 4; }
-.col-span-5 { grid-column: span 5/span 5; }
-.col-span-6 { grid-column: span 6/span 6; }
-.col-span-7 { grid-column: span 7/span 7; }
-.col-span-8 { grid-column: span 8/span 8; }
-.col-span-9 { grid-column: span 9/span 9; }
-.col-span-10 { grid-column: span 10/span 10; }
-.row-span-2 { grid-row: span 2/span 2; }
-.row-span-3 { grid-row: span 3/span 3; }
-.row-span-4 { grid-row: span 4/span 4; }
-.row-span-5 { grid-row: span 5/span 5; }
-.row-span-6 { grid-row: span 6/span 6; }
-.row-span-7 { grid-row: span 7/span 7; }
-.row-span-8 { grid-row: span 8/span 8; }
-.row-span-9 { grid-row: span 9/span 9; }
-.row-span-10 { grid-row: span 10/span 10; }
+.cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+}
+.cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+}
+.cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+}
+.cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+}
+.cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
+}
+.cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+}
+.cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
+}
+.cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
+}
+.cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
+}
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+.col-span-4 {
+  grid-column: span 4 / span 4;
+}
+.col-span-5 {
+  grid-column: span 5 / span 5;
+}
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+.col-span-7 {
+  grid-column: span 7 / span 7;
+}
+.col-span-8 {
+  grid-column: span 8 / span 8;
+}
+.col-span-9 {
+  grid-column: span 9 / span 9;
+}
+.col-span-10 {
+  grid-column: span 10 / span 10;
+}
+.row-span-2 {
+  grid-row: span 2 / span 2;
+}
+.row-span-3 {
+  grid-row: span 3 / span 3;
+}
+.row-span-4 {
+  grid-row: span 4 / span 4;
+}
+.row-span-5 {
+  grid-row: span 5 / span 5;
+}
+.row-span-6 {
+  grid-row: span 6 / span 6;
+}
+.row-span-7 {
+  grid-row: span 7 / span 7;
+}
+.row-span-8 {
+  grid-row: span 8 / span 8;
+}
+.row-span-9 {
+  grid-row: span 9 / span 9;
+}
+.row-span-10 {
+  grid-row: span 10 / span 10;
+}

 .wrap-text {
  white-space: pre-wrap !important;
@ -790,7 +958,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  opacity: 0;
  border-radius: 0.5rem;
  z-index: 1;
-  transition: opacity .6s;
+  transition: opacity 0.6s;
  line-height: 1.5;

  width: 220px;
@ -799,7 +967,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  margin-left: -110px;
 }
 .tooltip .tooltiptext::after {
-  content: "";
+  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
@ -815,17 +983,34 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 }

 /* 代码高亮 Start */
-.token.comment, .token.prolog, .token.doctype, .token.cdata {
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
  color: var(--color-prettylights-syntax-comment);
 }
-.token.namespace { opacity: 0.7; }
-.token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted {
+.token.namespace {
+  opacity: 0.7;
+}
+.token.tag,
+.token.selector,
+.token.constant,
+.token.symbol,
+.token.deleted {
  color: var(--color-prettylights-syntax-entity-tag);
 }
 .token.maybe-class-name {
  color: var(--color-prettylights-syntax-entity);
 }
-.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin {
+.token.property-access,
+.token.operator,
+.token.boolean,
+.token.number,
+.token.selector .token.class,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin {
  color: var(--color-prettylights-syntax-constant);
 }
 .token.deleted {
@ -850,13 +1035,23 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 .token.variable {
  color: var(--color-prettylights-syntax-constant);
 }
-.token.entity, .token.url, .language-css .token.string, .style .token.string {
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
  color: var(--color-prettylights-syntax-string);
 }
-.token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name {
+.token.color,
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
  color: var(--color-prettylights-syntax-string);
 }
-.token.rule, .token.regex, .token.important, .token.keyword {
+.token.rule,
+.token.regex,
+.token.important,
+.token.keyword {
  color: var(--color-prettylights-syntax-keyword);
 }
 .token.module {
@ -881,9 +1076,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  color: var(--color-prettylights-syntax-variable);
 }

-.token.important, .token.bold { font-weight: bold; }
-.token.italic { font-style: italic; }
-.token.entity { cursor: help; }
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}

 .highlight-line {
  background-color: var(--color-neutral-muted);
@ -923,7 +1125,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  .header-nav .max-container {
    padding-top: 0.85rem;
  }
-  .header-nav .menu a, .header-nav .menu button {
+  .header-nav .menu a,
+  .header-nav .menu button {
    padding: 0.2rem 0.3rem;
  }
  .wrap-header.h1wrap > h1 {
@ -966,11 +1169,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  table.auto-wrap thead {
    display: none;
  }
-  table.auto-wrap td, table.auto-wrap th {
+  table.auto-wrap td,
+  table.auto-wrap th {
    display: block;
    text-align: left !important;
  }
-  table td + td, table th + th {
+  table td + td,
+  table th + th {
    padding-top: 0 !important;
  }
  table td:first-child {
@ -983,6 +1188,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {

@media (min-width: 768px) {
  .home-card {
-    grid-template-columns: repeat(4,minmax(0,1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
 }
--- a/scripts/utils/anchorPoint.mjs
+++ b/scripts/utils/anchorPoint.mjs
@ -1,8 +1,8 @@
-
 const scripts = `
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
  window.onhashchange = function () {
    anchorPoint()
+    updateAnchor()
  };
 }
 function anchorPoint() {
@ -16,15 +16,37 @@ function anchorPoint() {
  }
 }
 anchorPoint();
+
+function updateAnchor(element) {
+  const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+  anchorContainer.forEach((tocanchor) => {
+    tocanchor.classList.remove('is-active-link');
+  });
+  const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
+  console.log('anchor', anchor)
+  if (anchor) {
+    anchor.classList.add('is-active-link');
+  }
+}
+// toc 定位
+updateAnchor()
+const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+anchor.forEach((item) => {
+  item.addEventListener('click', (e) => {
+    updateAnchor()
+  })
+})
 `;

 export function anchorPoint() {
  return {
    type: 'element',
    tagName: 'script',
-    children: [{
-      type: 'text',
-      value: scripts,
-    }]
-  }
-}
+    children: [
+      {
+        type: 'text',
+        value: scripts,
+      },
+    ],
+  };
+}
--- a/scripts/utils/childs.mjs
+++ b/scripts/utils/childs.mjs
@ -1,4 +1,3 @@
-
 export function getChilds(data = [], level, result = []) {
  for (let i = 1; i <= data.length; i++) {
    const titleNum = Number(data[i]?.tagName?.replace(/^h/, ''));
--- a/scripts/utils/darkMode.mjs
+++ b/scripts/utils/darkMode.mjs
@ -21,27 +21,27 @@ const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
 export function darkMode() {
  const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
  const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
-  const sunNode = getSVGNode(iconSunPath)
-  const moonNode = getSVGNode(iconMoonPath)
+  const sunNode = getSVGNode(iconSunPath);
+  const moonNode = getSVGNode(iconMoonPath);
  return [
    {
      type: 'element',
      tagName: 'button',
      properties: {
        id: 'darkMode',
-        type: 'button'
+        type: 'button',
      },
-      children: [
-        ...sunNode,
-        ...moonNode
-      ]
-    }, {
+      children: [...sunNode, ...moonNode],
+    },
+    {
      type: 'element',
      tagName: 'script',
-      children: [{
-        type: 'text',
-        value: scripts,
-      }]
-    }
+      children: [
+        {
+          type: 'text',
+          value: scripts,
+        },
+      ],
+    },
  ];
 }
--- a/scripts/utils/getSVGNode.mjs
+++ b/scripts/utils/getSVGNode.mjs
@ -1,21 +1,24 @@
 import fs from 'fs-extra';
+import path from 'path';
 import rehypeParse from 'rehype-parse';
-import {unified} from 'unified';
+import { unified } from 'unified';
 import { VFile } from 'vfile';

+export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
+
 export function getSVGNode(iconPath, space = 'svg') {
  const svgStr = fs.readFileSync(iconPath);
-  const processor = unified().use(rehypeParse,{ fragment: true, space })
+  const processor = unified().use(rehypeParse, { fragment: true, space });
  const file = new VFile();
  file.value = svgStr.toString();
  const hastNode = processor.runSync(processor.parse(file), file);
-  return hastNode.children || []
+  return hastNode.children || [];
 }

 export function getVNode(str = '', space = 'html') {
-  const processor = unified().use(rehypeParse,{ fragment: true, space })
+  const processor = unified().use(rehypeParse, { fragment: true, space });
  const file = new VFile();
  file.value = str.toString();
  const hastNode = processor.runSync(processor.parse(file), file);
-  return hastNode.children || []
-}
+  return hastNode.children || [];
+}
--- a/scripts/utils/getTocsTree.mjs
+++ b/scripts/utils/getTocsTree.mjs
@ -1,10 +1,75 @@
+import path from 'path';
+import { getCodeString } from 'rehype-rewrite';
 import { panelAddNumber } from './panelAddNumber.mjs';
 import { getChilds, getHeader } from './childs.mjs';
+import { ICONS_PATH, getSVGNode } from './getSVGNode.mjs';
+
+export const titleNum = (tagName = '') => Number(tagName.replace(/^h/, ''));
+
+export function getTocsTitleNode(arr = [], result = []) {
+  arr.forEach(({ tagName, type, properties, children }) => {
+    if (/^h[23456]/.test(tagName)) {
+      const num = titleNum(tagName);
+      const props = { 'aria-hidden': 'true', class: `leve${num} tocs-link`, href: '#' + (properties.id || '') };
+      const title = getCodeString(children || []);
+      result.push({ tagName: 'a', type, properties: props, children: [{ type: 'text', value: title || ' ' }] });
+    } else if (children?.length > 0) {
+      result = result.concat(getTocsTitleNode(children));
+    }
+  });
+  return result;
+}
+
+export function addTocsInWarp(tocsData = [], menuData, isDone = false) {
+  const childs = tocsData.map((item) => {
+    if (item.properties?.class?.includes('h1wrap-body')) {
+      isDone = true;
+    }
+    if (!isDone && item.children) {
+      item.children = addTocsInWarp([...item.children], menuData, isDone);
+    }
+    return item;
+  });
+  if (isDone) {
+    childs.splice(1, 0, menuData);
+  }
+  return childs;
+}
+
+export const getTocsTitleNodeWarpper = (children = []) => {
+  const iconPath = path.resolve(ICONS_PATH, `menu.svg`);
+  const svgNode = getSVGNode(iconPath);
+  return {
+    type: 'element',
+    tagName: 'div',
+    properties: {
+      class: 'menu-tocs',
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          class: 'menu-btn',
+        },
+        children: [...svgNode],
+      },
+      {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          class: 'menu-modal',
+        },
+        children: children,
+      },
+    ],
+  };
+};

 /** Markdown 文档转成树形结构 */
 export function getTocsTree(arr = [], result = []) {
  const data = panelAddNumber(arr);
-  
+
  let n = 0;
  let level = -1;

@ -14,16 +79,14 @@ export function getTocsTree(arr = [], result = []) {
    if (level === -1) {
      level = toc.number;
    }
-    const titleNum = Number(toc.tagName?.replace(/^h/, ''));
-
-    if (toc.number === level && titleNum === level) {
+    if (toc.number === level && titleNum(toc.tagName) === level) {
      const header = getHeader(data.slice(n), level);
      const wrapCls = ['wrap'];
      const headerCls = ['wrap-header', `h${level}wrap`];

      if (level === 1) wrapCls.push('max-container');
      const wrapStyle = toc.properties['wrap-style'];
-      delete toc.properties['wrap-style']
+      delete toc.properties['wrap-style'];
      const wrapClass = toc.properties['wrap-class'];
      if (wrapClass) wrapCls.push(wrapClass);
      delete toc.properties['wrap-class'];
@ -42,26 +105,24 @@ export function getTocsTree(arr = [], result = []) {
                type: 'element',
                tagName: 'div',
                properties: { class: 'wrap-body' },
-                children: [
-                  ...header
-                ],
-              }
+                children: [...header],
+              },
            ],
-          }
+          },
        ],
-      }
+      };
      const childs = getChilds([...data.slice(n + 1)], level);
      const resultChilds = getTocsTree(childs);
      if (resultChilds.length > 0) {
        const bodyStyle = toc.properties['body-style'];
-        delete toc.properties['body-style']
+        delete toc.properties['body-style'];
        const bodyClass = toc.properties['body-class'];
-        delete toc.properties['body-class']
+        delete toc.properties['body-class'];
        panle.children = panle.children.concat({
          type: 'element',
          tagName: 'div',
          properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
-          children: [...resultChilds]
+          children: [...resultChilds],
        });
      }
      result.push(panle);
--- a/scripts/utils/homeCardIcons.mjs
+++ b/scripts/utils/homeCardIcons.mjs
@ -1,8 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { getSVGNode } from './getSVGNode.mjs';
-
-export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')
+import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';

 export function homeCardIcons(node, parent, isHome) {
  if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {
@ -17,16 +15,16 @@ export function homeCardIcons(node, parent, isHome) {
          type: 'element',
          tagName: 'span',
          children: child.children,
-        }
+        };
        if (iconExist) {
          const svgNode = getSVGNode(iconPath);
-          child.children = [ ...svgNode, labelNode ];
+          child.children = [...svgNode, labelNode];
        } else {
          const svgNode = getSVGNode(iconDefaultPath);
-          child.children = [ ...svgNode, labelNode ];
+          child.children = [...svgNode, labelNode];
        }
      }
-      return child
-    })
+      return child;
+    });
  }
-}
+}
--- a/scripts/utils/panelAddNumber.mjs
+++ b/scripts/utils/panelAddNumber.mjs
@ -1,4 +1,3 @@
-
 /** 标记 Number */
 export function panelAddNumber(arr = [], result = []) {
  let n = 0;
@ -10,9 +9,9 @@ export function panelAddNumber(arr = [], result = []) {
      level = titleNum;
    }
    if (toc) {
-      result.push({ ...toc, number: level })
+      result.push({ ...toc, number: level });
    }
    n++;
  }
-  return result
-}
+  return result;
+}
--- a/scripts/utils/rehypePreviewHTML.mjs
+++ b/scripts/utils/rehypePreviewHTML.mjs
@ -1,14 +1,22 @@
+import { visit } from 'unist-util-visit';
 import { getCodeString } from 'rehype-rewrite';
 import { getVNode } from './getSVGNode.mjs';

-export function rehypePreviewHTML(node, parent) {
-  if (node.type === 'element' && node.tagName === 'pre' && node.properties?.className?.includes('language-html')) {
-    const child = node.children[0];
-    if (child?.tagName === 'code' && child.data?.meta === 'preview') {
-      const code = getCodeString(node.children)
-      const vnode = getVNode(code || '')
-      node.children = vnode
-    }
-  }
-
-}
+export function rehypePreviewHTML() {
+  return (tree) => {
+    visit(tree, (node, index, parent) => {
+      if (node.type === 'element' && node.tagName === 'pre') {
+        const child = node.children[0];
+        if (
+          child.properties?.className?.includes('language-html') &&
+          child?.tagName === 'code' &&
+          child.data?.meta === 'preview'
+        ) {
+          const code = getCodeString(child.children);
+          const vnode = getVNode(code || '');
+          node.children = vnode;
+        }
+      }
+    });
+  };
+}
--- a/scripts/utils/rehypeTitle.mjs
+++ b/scripts/utils/rehypeTitle.mjs
@ -1,7 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { getSVGNode } from './getSVGNode.mjs';
-import { ICONS_PATH } from './homeCardIcons.mjs';
+import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';

 export function rehypeTitle(node, iconName) {
  if (node.type === 'element' && node.tagName === 'h1' && iconName !== 'index') {
@ -10,10 +9,10 @@ export function rehypeTitle(node, iconName) {
    const iconExist = fs.existsSync(iconPath);
    if (iconExist) {
      const svgNode = getSVGNode(iconPath);
-      node.children = [ ...svgNode, ...node.children ];
+      node.children = [...svgNode, ...node.children];
    } else {
      const svgNode = getSVGNode(iconDefaultPath);
-      node.children = [ ...svgNode, ...node.children ];
+      node.children = [...svgNode, ...node.children];
    }
  }
-}
+}
--- a/scripts/utils/rehypeUrls.mjs
+++ b/scripts/utils/rehypeUrls.mjs
@ -1,6 +1,11 @@
 export function rehypeUrls(node) {
-  if (node.type === 'element' && node.properties?.href && /.md/.test(node.properties.href) && !/^(https?:\/\/)/.test(node.properties.href)) {
+  if (
+    node.type === 'element' &&
+    node.properties?.href &&
+    /.md/.test(node.properties.href) &&
+    !/^(https?:\/\/)/.test(node.properties.href)
+  ) {
    let href = node.properties.href;
    node.properties.href = href.replace(/([^\.\/\\]+)\.(md|markdown)/gi, '$1.html');
  }
-}
+}
--- a/scripts/utils/tooltips.mjs
+++ b/scripts/utils/tooltips.mjs
@ -1,15 +1,15 @@
 /**
 * 配置 tooltips 注释
- * 
+ *
 * ```markdown
 * - [超链接有 tooltips 提示](#1xx-information) _Tooltips 展示内容_ <!--rehype:tooltips-->
 * ```
- * 
+ *
 * 上面示例：将 “Tooltips 展示内容” 放到 前一个 `<a>` dom 节点作为子节点
- * 
+ *
 * - 注释配置的，前一个节点 A，A 的前一个节点 B
 * - 如果 A 和 B 其中一个不存在 `tooltips` 将失效
- * - 设置 B 的类名称为 tooltips 
+ * - 设置 B 的类名称为 tooltips
 */
 export function tooltips(node, index, parent) {
  if (node.type === 'comment' && parent?.children.length > 2) {
@ -17,12 +17,12 @@ export function tooltips(node, index, parent) {
    const result = [];
    let recordPos = false; // 记录位置
    let tooltipNode = null;
-    for(let i = childs.length; i > -1; i--) {
+    for (let i = childs.length; i > -1; i--) {
      const node = childs[i];
      // 记录 tooltip 的开始位置
      if (node?.type === 'comment' && node?.value === 'rehype:tooltips') {
        recordPos = true;
-        continue
+        continue;
      }
      // 记录 tooltip 的 node
      if (recordPos && !tooltipNode) {
@ -33,24 +33,24 @@ export function tooltips(node, index, parent) {
          tooltipNode = node;
          tooltipNode.properties['class'] = 'tooltiptext';
          delete tooltipNode.position;
-          continue
+          continue;
        }
      }
      // 将 tooltip 节点，插入到下一个 element 节点的子节点中
      if (tooltipNode) {
        if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) {
          recordPos = false;
-          tooltipNode = null
+          tooltipNode = null;
        }
        if (tooltipNode && node?.type === 'element') {
          recordPos = false;
          node.properties['class'] = 'tooltip';
          node.children.push(tooltipNode);
-          tooltipNode = null
+          tooltipNode = null;
        }
      }
      if (!recordPos && node) {
-        result.push(node)
+        result.push(node);
      }
    }
    if (parent) {
@ -59,6 +59,4 @@ export function tooltips(node, index, parent) {
  }
 }

-export function getPreviewNode() {
-
-}
+export function getPreviewNode() {}
--- a/scripts/watch.mjs
+++ b/scripts/watch.mjs
@ -3,17 +3,18 @@ import chokidar from 'chokidar';
 import { getStat } from 'recursive-readdir-files';
 import { run, DOCS, createHTML } from './index.mjs';

-;(async () => {
+(async () => {
  await run();
-  const homeMdPath = path.relative(process.cwd(), 'README.md')
+  const homeMdPath = path.relative(process.cwd(), 'README.md');
  const watcher = chokidar.watch([DOCS, homeMdPath], {
    ignored: /(^|[\/\\])\../, // ignore dotfiles
-    persistent: true
+    persistent: true,
  });

-  watcher.on('change', async (path) => {
-    const stats = await getStat(path)
-    createHTML([stats]);
-  })
-  .on('error', error => console.log(`Watcher error: ${error}`))
-})();
+  watcher
+    .on('change', async (path) => {
+      const stats = await getStat(path);
+      createHTML([stats]);
+    })
+    .on('error', (error) => console.log(`Watcher error: ${error}`));
+})();
Author	SHA1	Message	Date
jaywcjlove	37c9f23952	released v1.11.1	2022-10-30 02:15:36 +08:00
jaywcjlove	cb704eed88	fix: fix preview html meta issue.	2022-10-30 02:14:38 +08:00
jaywcjlove	75fece7aab	feat: add `vue.md` cheatsheet. (#10 )	2022-10-30 01:44:38 +08:00
jaywcjlove	3966175a39	doc: Update `npm.md`.	2022-10-30 00:54:02 +08:00
zxx-457	0c03059cde	doc: Fix npm access public [<package>] 公开包 (#11 )	2022-10-29 23:32:35 +08:00
jaywcjlove	efae1dc846	doc: add `mysql.md` cheatsheet.	2022-10-29 01:33:05 +08:00
jaywcjlove	4132a13a96	chore: format script code.	2022-10-29 00:24:39 +08:00
jaywcjlove	bd082908d8	released v1.11.0 (#9 )	2022-10-28 22:09:23 +08:00
jaywcjlove	dd8a3cb26d	feat: add tocs feature & fix page element generation issue (#9 ).	2022-10-28 22:07:12 +08:00
jaywcjlove	6d0801a9da	chore: update `CONTRIBUTING.md`.	2022-10-28 13:54:09 +08:00
liliangrong777	6290b9eae0	doc: Correct the anchor(http-status-code) (#8 )	2022-10-28 13:05:55 +08:00
jaywcjlove	9479626194	doc: update `docs/github-actions.md`.	2022-10-28 11:57:50 +08:00
jaywcjlove	ad4b2e9119	doc: Update README.md	2022-10-28 11:14:16 +08:00
jaywcjlove	d48341cecb	chore: update `CONTRIBUTING.md`.	2022-10-28 11:14:16 +08:00
jaywcjlove	5aec989c14	chore: update issue template.	2022-10-28 11:14:16 +08:00
coderduan	13492fe556	docs(http-status-code): md '_' conversion error (#7 )	2022-10-28 11:12:33 +08:00
jaywcjlove	d145aaa0b0	doc: update `semver.md`.	2022-10-27 17:33:07 +08:00
jaywcjlove	531c01d62e	doc: update `homebrew.md`.	2022-10-27 13:13:45 +08:00
jaywcjlove	0a160d22d8	doc: Update README.md	2022-10-26 10:12:18 +08:00