released v1.15.0

.github/ISSUE_TEMPLATE/cheatsheet-request.md

@@ -1,20 +1,24 @@
 ---
-name: 🤙 备忘单请求
-about: 请求添加备忘单和参考。
-title: '备忘清单 请求: '
+name: 🤙 备忘清单请求
+about: 请求添加备忘清单和参考。
+title: '请求添加备忘清单: '
 labels: request
 assignees: jaywcjlove
 ---
-【备忘清单标题】 备忘清单
-===
 
-这是您可以在 Quick Reference 备忘清单上使用的参考！【备忘清单介绍】
+您可以在这里简单的提供一些资料，方便我们在 Quick Reference 中添加您想添加的备忘清单(速查表)。
 
+【请您在这里介绍一下工具或者语言，这很重要】
 
-如果有一张备忘单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
+- [ ] 如果你有一张不错的备忘清单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
+- [ ] 如果您不方便贡献，请在下方参考资料中提供链接地址，方便共建备忘清单(速查表)
+- [x] 这里为您提供了 Markdown 排版[示例教程](https://jaywcjlove.github.io/reference/docs/quickreference.html)
 
-提供参考资料地址
-----
+#### 提供参考资料地址
 
-- [参考地址 1](https://xxx.com)
-- [官网地址](https://xxx.com)
+提供更多参考资料有助于我们整理成备忘清单(速查表)
+
+- 提供参考地址 https://jaywcjlove.github.io/reference
+- 提供官网地址 https://jaywcjlove.github.io/reference
+
+_⚠️ 注意: 随着内容越来越多，可能甚至找不到这个工具或者语言的官网，请您在这里提供以便大家共同参与贡献内容_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "**/*.{mjs,css,json,prettierrc,lintstagedrc}": ["prettier --write"]
+}

.prettierignore

@@ -0,0 +1,5 @@
+package.json
+coverage
+dist
+build
+docs

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    { "files": ".prettierrc", "options": { "parser": "json" } },
+    { "files": ".lintstagedrc", "options": { "parser": "json" } }
+  ]
+}

CONTRIBUTING.md

@@ -61,6 +61,21 @@ Contributing 贡献
 - SVG 图标尺寸 `<svg height="1em" width="1em"`
 - SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
 
+#### 提示配置
+
+```markdown
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing-->
+```
+
+添加 `contributing` 类名，会在卡片下方添加 _`👆待完善需要您的参与`_
+
+
+```markdown
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=tag&data-lang=Python-->
+```
+
+添加 `class=tag&data-lang=Python` 类名和参数，会在卡片右上角标记 _`Python`_
+
 ## 本地开发
 
 ```bash

README.md

@@ -19,36 +19,43 @@ Quick Reference
 [Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
 [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
-[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
+[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));&class=tag&data-lang=Docker-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
 [Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
 [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));-->
+[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing-->
 [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));&class=tag&data-lang=SQL-->
+[Python](./docs/python.md)<!--rehype:style=background: rgb(240 81 57/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));-->
+[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));&class=tag&data-lang=swift-->
 [TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## 前端
 
-[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));-->
+[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
 [Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
 [Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
+[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));&class=tag&data-lang=JS-->
 [Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
-[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
-[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
+[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
 [HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
 [Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
 [Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252/var(\-\-bg\-opacity));-->
-[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));-->
+[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
 [npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
 [package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
 [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));&class=contributing-->
+[Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## Nodejs
@@ -59,6 +66,8 @@ Quick Reference
 
 ## 工具
 
+[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
 [nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));-->
 [Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
 [Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
@@ -71,15 +80,17 @@ Quick Reference
 
 ## Linux 命令
 
+[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
 [Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
 [Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));-->
 [Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
 [Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
@@ -90,10 +101,12 @@ Quick Reference
 
 [Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255/var(\-\-bg\-opacity));-->
-[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
 [HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=HTML-->
+[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 

docs/awk.md

@@ -0,0 +1,788 @@
+Awk 备忘清单
+===
+
+这是 [GNU awk](https://www.gnu.org/software/gawk/manual/gawk.html) 的单页快速参考备忘单，其中涵盖了常用的 `awk` 表达式和命令。
+
+入门
+------
+
+### 试试
+
+该程序可用于选择文件中的特定记录并对其执行操作
+
+```shell
+$ awk -F: '{print $1, $NF}' /etc/passwd
+```
+
+----
+
+| - | -             | -                         |
+|---|---------------|---------------------------|
+|   | `-F:`         | 冒号作为分隔符   |
+|   | `{...}`       | awk 程序       |
+|   | `print`       | 打印当前记录   |
+|   | `$1`          | 第一个字段     |
+|   | `$NF`         | 最后一个字段   |
+|   | `/etc/passwd` | 输入数据文件   |
+
+### Awk 程序 
+
+```bash
+BEGIN          {<初始化>} 
+   <pattern 1> {<计划动作>} 
+   <pattern 2> {<计划动作>} 
+   ...
+END            {< 最后的动作 >}
+```
+
+#### 示例
+
+```bash
+awk '
+    BEGIN { print "\n>>>Start" }
+    !/(login|shutdown)/ { print NR, $0 }
+    END { print "<<<END\n" }
+' /etc/passwd
+```
+
+### 变量
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+          $1      $2/$(NF-1)    $3/$NF
+           ▼          ▼           ▼ 
+        ┌──────┬──────────────┬───────┐
+$0/NR ▶ │  ID  │  WEBSITE     │  URI  │
+        ├──────┼──────────────┼───────┤
+$0/NR ▶ │  1   │  baidu.com   │  awk  │
+        ├──────┼──────────────┼───────┤
+$0/NR ▶ │  2   │  google.com  │  25   │
+        └──────┴──────────────┴───────┘
+```
+---
+
+```shell
+# 第一个和最后一个字段
+awk -F: '{print $1,$NF}' /etc/passwd
+# 带行号
+awk -F: '{print NR, $0}' /etc/passwd
+# 倒数第二个字段
+awk -F: '{print $(NF-1)}' /etc/passwd
+# 自定义字符串
+awk -F: '{print $1 "=" $6}' /etc/passwd
+```
+
+查看: [Awk 变量](#awk-变量)
+
+### Awk 程序示例
+<!--rehype:wrap-class=row-span-2 col-span-2-->
+
+```shell
+awk 'BEGIN {print "hello world"}'        # 打印 "hello world"
+awk -F: '{print $1}' /etc/passwd         # -F: 指定字段分隔符
+# /pattern/ 仅对匹配的模式执行操作
+awk -F: '/root/ {print $1}' /etc/passwd                     
+# BEGIN 块在开始时执行一次
+awk -F: 'BEGIN { print "uid"} { print $1 }' /etc/passwd     
+# END 块在最后执行一次
+awk -F: '{print $1} END { print "-done-"}' /etc/passwd
+```
+
+### 条件
+
+```bash
+awk -F: '$3>30 {print $1}' /etc/passwd
+```
+
+查看: [Conditions 条件](#awk-条件)
+
+### 生成 1000 个空格
+
+```shell
+awk 'BEGIN{
+    while (a++ < 1000)
+        s=s " ";
+    print s
+}'
+```
+
+查看: [Loops](#awk-循环)
+
+### 数组 Arrays
+
+```shell
+awk 'BEGIN {
+   fruits["mango"] = "yellow";
+   fruits["orange"] = "orange"
+   for(fruit in fruits) {
+     print fruit " 的颜色是 " fruits[fruit]
+   }
+}'
+```
+
+查看: [Awk 数组](#awk-数组)
+
+### 函数 Functions
+
+```shell
+# => 5
+awk 'BEGIN{print length("hello")}'
+# => HELLO
+awk 'BEGIN{print toupper("hello")}'
+# => hel
+awk 'BEGIN{print substr("hello", 1, 3)}'
+```
+
+查看: [Functions](#awk-函数)
+
+Awk 变量
+---------
+
+### 内置变量
+
+:- | :-
+:- | :-
+`$0`           | 全线
+`$1, $2...$NF` | 第一个，第二个……最后一个字段
+`NR`           | 记录总数(`N`umber of `R`ecords)
+`NF`           | N个字段(`N`number of `F`ields)
+`OFS`          | `O`utput `F`ield `S`eparator<br> 输出字段分隔符 _(default " ")_
+`FS`           | input `F`ield `S`eparator <br> 输入字段分隔符 _(default " ")_
+`ORS`          | `O`utput `R`ecord `S`eparator <br> 输出记录分隔符 _(default "\n")_
+`RS`           | input `R`ecord `S`eparator <br> 输入记录分隔符 _(default "\n")_
+`FILENAME`     | 文件名
+
+### 表达式
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`$1 == "root"`       | 第一个字段等于根
+`{print $(NF-1)}`    | 倒数第二个字段
+`NR!=1{print $0}`    | 从第 2 条记录开始
+`NR > 3`             | 从第 4 条记录开始
+`NR == 1`            | 第一次记录
+`END{print NR}`      | 总记录
+`BEGIN{print OFMT}`  | 输出格式
+`{print NR, $0}`     | 行号
+`{print NR "  " $0}` | 行号(选项卡)
+`{$1 = NR; print}`   | 用行号替换第一个字段
+`$NF > 4`            | 最后一个字段 > 4
+`NR % 2 == 0`        | 甚至记录
+`NR==10, NR==20`     | 记录 10 到 20
+`BEGIN{print ARGC}`  | 总 `arguments`
+`ORS=NR%5?",":"\n"`  | 连接记录
+
+### 示例
+<!--rehype:wrap-class=row-span-2-->
+
+打印总和和平均值
+
+```shell
+awk -F: '{sum += $3}
+     END { print sum, sum/NR }
+' /etc/passwd
+```
+
+打印参数
+
+```shell
+awk 'BEGIN {
+    for (i = 1; i < ARGC; i++)
+        print ARGV[i] }' a b c
+```
+
+输出字段分隔符为逗号
+
+```shell
+awk 'BEGIN { FS=":";OFS=","}
+    {print $1,$2,$3,$4}' /etc/passwd
+```
+
+匹配位置
+
+```shell
+awk 'BEGIN {
+    if (match("One Two Three", "Tw"))
+        print RSTART }'
+```
+
+匹配时长
+
+```shell
+awk 'BEGIN {
+    if (match("One Two Three", "re"))
+        print RLENGTH }'
+```
+
+### 仅限 GNU awk
+
+:- | :-
+:- | :-
+`ENVIRON`     | 环境变量
+`IGNORECASE`  | 忽略大小写
+`CONVFMT`     | 转换格式
+`ERRNO`       | 系统错误
+`FIELDWIDTHS` | 固定宽度字段
+
+### 环境变量
+
+:- | :-
+:- | :-
+`ARGC`    | 数字或参数
+`ARGV`    | 参数数组
+`FNR`     | 文件记录数(`F`ile `N`umber of `R`ecords)
+`OFMT`    | 数字格式 _(default "%.6g")_
+`RSTART`  | 字符串中的位置
+`RLENGTH` | 比赛时长
+`SUBSEP`  | 多维数组分隔符 _(default "\034")_
+`ARGIND`  | 参数索引
+
+### 定义变量
+
+```shell
+awk -v var1="Hello" -v var2="Wold" '
+    END {print var1, var2}
+' </dev/null
+```
+
+#### 使用 shell 变量
+
+```shell
+awk -v varName="$PWD" '
+    END {print varName}' </dev/null
+```
+
+
+Awk 运算符
+---------
+
+### 运算符
+
+:- | :-
+:- | :-
+`{print $1}`     | 第一个字段
+`$2 == "foo"`    | 等于
+`$2 != "foo"`    | 不等于
+`"foo" in array` | 在数组中
+
+#### 正则表达式
+
+:- | :-
+:- | :-
+| `/regex/`       | 行匹配|
+| `!/regex/`      | 行不匹配|
+| `$1 ~ /regex/`  | 字段匹配|
+| `$1 !~ /regex/` | 字段不匹配|
+
+#### 更多条件
+
+:- | :-
+:- | :-
+`($2 <= 4 \|\| $3 < 20)` | 或者
+`($1 == 4 && $3 < 20)`   | 和
+
+### 运算符
+
+#### 算术运算
+
+- `+`
+- `-`  
+- `*`  
+- `/`  
+- `%`  
+- `++` 
+- `--` 
+<!--rehype:className=cols-3 style-none-->
+
+#### 速记作业
+
+- `+=` 
+- `-=` 
+- `*=` 
+- `/=` 
+- `%=` 
+<!--rehype:className=cols-3 style-none-->
+
+#### 比较运算符
+
+- `==`
+- `!=`
+- `<`
+- `>`
+- `<=`
+- `>=`
+<!--rehype:className=cols-3 style-none-->
+
+### 示例
+
+```shell
+awk 'BEGIN {
+    if ("foo" ~ "^fo+$")
+        print "Fooey!";
+}'
+```
+
+#### 不匹配
+
+```shell
+awk 'BEGIN {
+    if ("boo" !~ "^fo+$")
+        print "Boo!";
+}'
+```
+
+#### 如果在数组中
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    if ("foo" in assoc)
+        print "Fooey!";
+}'
+```
+
+Awk 函数
+----------
+
+### 常用功能
+<!--rehype:wrap-class=col-span-2-->
+
+函数 | 描述
+:- | :-
+`index(s,t)`          | 字符串 `s` 中出现字符串 `t` 的位置，如果未找到则为 `0`
+`length(s)`           | 字符串 `s` 的长度(如果没有 `arg`，则为 `$0`)
+`rand`                | `0` 到 `1` 之间的随机数
+`substr(s,index,len)` | 返回从索引开始的 `s` 的 `len-char` 子字符串(从 `1` 开始计数)
+`srand`               | 为 `rand` 设置种子并返回之前的种子
+`int(x)`              | 将 `x` 截断为整数值
+`split(s,a,fs)`       | 将字符串 `s` 拆分为数组 `a` 由 `fs` 拆分，返回 `a` 的长度
+`match(s,r)`          | 字符串 `s` 中出现正则表达式 `r` 的位置，如果未找到，则为 `0`
+`sub(r,t,s)`          | 将 `t` 替换为字符串 `s` 中第一次出现的正则表达式 `r`(如果未给出 `s`，则替换为 `$0`)
+`gsub(r,t,s)`         | 用 `t` 替换字符串 `s` 中所有出现的正则表达式 `r`
+`system(cmd)`         | 执行cmd并返回退出状态
+`tolower(s)`          | 字符串 `s` 转小写
+`toupper(s)`          | 字符串 `s` 转大写
+`getline`             | 将 `$0` 设置为当前输入文件中的下一个输入记录
+
+
+### 用户定义函数
+
+```shell
+awk '
+    # 返回最小数量
+    function find_min(num1, num2){
+       if (num1 < num2)
+       return num1
+       return num2
+    }
+    # 返回最大数量
+    function find_max(num1, num2){
+       if (num1 > num2)
+       return num1
+       return num2
+    }
+    # 主功能
+    function main(num1, num2){
+       result = find_min(num1, num2)
+       print "Minimum =", result
+      
+       result = find_max(num1, num2)
+       print "Maximum =", result
+    }
+    # 脚本执行从这里开始
+    BEGIN {
+       main(10, 60)
+    }
+'
+```
+
+Awk 数组
+---------
+
+### 带索引的数组
+
+```shell
+awk 'BEGIN {
+    arr[0] = "foo";
+    arr[1] = "bar";
+    print(arr[0]); # => foo
+    delete arr[0];
+    print(arr[0]); # => ""
+}'
+```
+
+### 带键的数组
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    print("baz" in assoc); # => 0
+    print("foo" in assoc); # => 1
+}'
+```
+
+
+### 带拆分的数组
+
+```shell
+awk 'BEGIN {
+    split("foo:bar:baz", arr, ":");
+    for (key in arr)
+        print arr[key];
+}'
+```
+
+### 带有排序的数组
+
+```shell
+awk 'BEGIN {
+    arr[0] = 3
+    arr[1] = 2
+    arr[2] = 4
+    n = asort(arr)
+    for (i = 1; i <= n ; i++)
+        print(arr[i])
+}'
+```
+
+### 多维
+
+```shell
+awk 'BEGIN {
+    multidim[0,0] = "foo";
+    multidim[0,1] = "bar";
+    multidim[1,0] = "baz";
+    multidim[1,1] = "boo";
+}'
+```
+
+### 多维迭代
+
+```shell
+awk 'BEGIN {
+    array[1,2]=3;
+    array[2,3]=5;
+    for (comb in array) {
+        split(comb,sep,SUBSEP);
+        print sep[1], sep[2], 
+        array[sep[1],sep[2]]
+    }
+}'
+```
+
+Awk 条件
+----------
+
+### if-else 语句
+
+```shell
+awk -v count=2 'BEGIN {
+    if (count == 1)
+        print "Yes";
+    else
+        print "Huh?";
+}'
+```
+
+#### 三元运算符
+
+```shell
+awk -v count=2 'BEGIN {
+    print (count==1) ? "Yes" : "Huh?";
+}'
+```
+
+### 存在
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    if ("foo" in assoc)
+        print "Fooey!";
+}'
+```
+
+#### 不存在
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    if ("Huh" in assoc == 0 )
+        print "Huh!";
+}'
+```
+
+### switch
+
+```shell
+awk -F: '{
+    switch (NR * 2 + 1) {
+        case 3:
+        case "11":
+            print NR - 1
+            break
+        case /2[[:digit:]]+/:
+            print NR
+        default:
+            print NR + 1
+        case -1:
+            print NR * -1
+    }
+}' /etc/passwd
+```
+
+
+Awk 循环
+----------
+
+### for...i
+
+```shell
+awk 'BEGIN {
+    for (i = 0; i < 10; i++)
+        print "i=" i;
+}'
+```
+
+#### 1 到 100 之间的 2 的幂
+
+```shell
+awk 'BEGIN {
+    for (i = 1; i <= 100; i *= 2)
+        print i
+}'
+```
+
+### for...in
+
+```shell
+awk 'BEGIN {
+    assoc["key1"] = "val1"
+    assoc["key2"] = "val2"
+    for (key in assoc)
+        print assoc[key];
+}'
+```
+
+#### Arguments
+
+```shell
+awk 'BEGIN {
+    for (argnum in ARGV)
+        print ARGV[argnum];
+}' a b c
+```
+
+### 示例
+<!--rehype:wrap-class=row-span-3-->
+
+#### 反向记录
+
+```shell
+awk -F: '{ x[NR] = $0 }
+    END {
+        for (i = NR; i > 0; i--)
+        print x[i]
+    }
+' /etc/passwd
+```
+
+#### 反向字段
+
+```shell
+awk -F: '{
+    for (i = NF; i > 0; i--)
+        printf("%s ",$i);
+    print ""
+}' /etc/passwd
+```
+
+#### 按记录求和
+
+```shell
+awk -F: '{
+    s=0;
+    for (i = 1; i <= NF; i++)
+        s += $i;
+    print s
+}' /etc/passwd
+```
+
+#### 总结整个文件
+
+```shell
+awk -F: '
+    {for (i = 1; i <= NF; i++)
+        s += $i;
+    };
+    END{print s}
+' /etc/passwd
+```
+
+### while
+<!--rehype:wrap-class=row-span-2-->
+
+```shell
+awk 'BEGIN {
+    while (a < 10) {
+        print "- " " concatenation: " a
+        a++;
+    }
+}'
+```
+
+#### do...while
+
+```shell
+awk '{
+    i = 1
+    do {
+        print $0
+        i++
+    } while (i <= 5)
+}' /etc/passwd
+```
+
+### Break
+
+```shell
+awk 'BEGIN {
+    break_num = 5
+    for (i = 0; i < 10; i++) {
+        print i
+        if (i == break_num)
+            break
+    }
+}'
+```
+
+### Continue
+
+```shell
+awk 'BEGIN {
+    for (x = 0; x <= 10; x++) {
+        if (x == 5 || x == 6)
+            continue
+        printf "%d ", x
+    }
+    print ""
+}'
+```
+
+Awk 格式化打印
+---------
+
+### 用法
+
+#### 右对齐
+
+```shell
+awk 'BEGIN{printf "|%10s|\n", "hello"}'
+# |     hello|
+```
+
+#### 左对齐
+
+```shell
+awk 'BEGIN{printf "|%-10s|\n", "hello"}'
+# |hello     |
+```
+
+### 通用说明符
+
+特征符 | 描述
+:- | :-
+`c`           | ASCII 字符
+`d`           | 十进制整数
+`e`, `E`, `f` | 浮点格式
+`o`           | 无符号八进制值
+`s`           | 细绳
+`%`           | 文字百分比
+
+### Space 空间
+
+```shell
+awk -F: '{
+    printf "%-10s %s\n", $1, $(NF-1)
+}' /etc/passwd | head -n 3
+```
+
+输出
+
+```shell
+root       /root
+bin        /bin
+daemon     /sbin
+```
+
+### Header 标题头
+
+```shell
+awk -F: 'BEGIN {
+    printf "%-10s %s\n", "User", "Home"
+    printf "%-10s %s\n", "----","----"}
+    { printf "%-10s %s\n", $1, $(NF-1) }
+' /etc/passwd | head -n 5
+```
+
+输出
+
+```shell
+User       Home
+----       ----
+root       /root
+bin        /bin
+daemon     /sbin
+```
+
+各种各样的
+-------------
+
+### 正则表达式元字符
+- `\`
+- `^`
+- `$`
+- `.`
+- `[`
+- `]`
+- `|`
+- `(`
+- `)`
+- `*`
+- `+`
+- `?`
+<!--rehype:className=cols-3 style-none-->
+
+### 转义序列
+
+:- | :-
+:- | :-
+`\b` | 退格
+`\f` | 换页
+`\n` | 换行(换行)
+`\r` | 回车
+`\t` | 水平选项卡
+`\v` | 垂直选项卡
+
+### 运行脚本
+
+```shell
+$ cat demo.awk
+#!/usr/bin/awk -f
+BEGIN { x = 23 }
+      { x += 2 }
+END   { print x }
+$ awk -f demo.awk /etc/passwd
+69
+```
+
+另见
+--------
+
+- [GNU awk 用户指南](https://www-zeuthen.desy.de/dv/documentation/unixguide/infohtml/gawk/gawk.html) _(www-zeuthen.desy.de)_
+- [AWK cheatsheet](https://gist.github.com/Rafe/3102414) _(gist.github.com)_

docs/chmod.md

@@ -277,7 +277,8 @@ $ find /path -type f -exec chmod 644 {} \;
 * [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
 
 <!--rehype:ignore:start-->
-### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+---
 <!--rehype:ignore:end-->
 
 ```html preview

docs/css.md

@@ -262,14 +262,14 @@ p:first-child {
 
 选择器 | 说明
 :- | :-
-`a[target]`          | 带有 <yel>target</yel> 属性
-`a[target="_blank"]` | 在新标签中打开
-`a[href^="/index"]`  | 以 <yel>/index</yel> 开头
-`[class\|="chair"]`   | 以<yel>chair</yel>开头
-`[class*="chair"]`   | 包含<yel>chair</yel>
-`[title~="chair"]`   | 包含单词 <yel>chair</yel>
-`a[href$=".doc"]`    | 以 <yel>.doc</yel> 结尾
-`[type="button"]`    | 指定类型
+`a[target]`          | 带有 <yel>target</yel> 属性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attr)
+`a[target="_blank"]` | 在新标签中打开 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue)
+`a[href^="/index"]`  | 以 <yel>/index</yel> 开头 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_4)
+`[class\|="chair"]`   | 以<yel>chair</yel>开头 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_3)
+`[class*="chair"]`   | 包含<yel>chair</yel> [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_6)
+`[title~="chair"]`   | 包含单词 <yel>chair</yel> [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_2)
+`a[href$=".doc"]`    | 以 <yel>.doc</yel> 结尾 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_5)
+`[type="button"]`    | 指定类型 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue)
 
 另见: [属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors)
 
@@ -282,6 +282,19 @@ p:first-child {
 `a:hover   ` | 鼠标悬停链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover)
 `a:visited ` | 访问链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited)
 
+---
+
+```css
+/* 未访问链接 */
+a:link { color: blue; }        
+/* 已访问链接 */
+a:visited { color: purple; }   
+/* 用户鼠标悬停 */
+a:hover { background: yellow; }
+/* 激活链接 */
+a:active { color: red; }       
+```
+
 ### 伪类
 
 选择器 | 说明
@@ -297,6 +310,10 @@ p:first-child {
 `div:empty`       | 没有子元素的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty)
 `p:lang(en)`      | 带有 en 语言属性的 P [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang)
 `:not(span)`      | 不是跨度的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)
+`:host`           | shadowDOM 中选择自定义元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root)
+`::backdrop`      | 处于全屏模式的元素样式 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::backdrop)
+`::marker`        | `li` 项目符号或者数字 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker)
+`::file-selector-button`      | type="file" `input` 按钮 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::file-selector-button)
 
 ### 输入伪类
 
@@ -305,6 +322,8 @@ p:first-child {
 `input:checked`       | 检查 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)
 `input:disabled`      | 禁用 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled)
 `input:enabled`       | 启用的 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled)
+`input:default`       | 有默认值的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:default)
+`input:blank`         | 空的输入框 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:blank)
 `input:focus`         | `input` 有焦点 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus)
 `input:in-range`      | 范围内的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range)
 `input:out-of-range`  | `input` 值超出范围 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range)
@@ -331,6 +350,11 @@ p:first-child {
 `p:nth-last-of-type(2)` | ...从后面 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type)
 `p:only-of-type`        | 其父级的唯一性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type)
 `p:only-child`          | 其父母的唯一孩子 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child)
+`:is(header, div) p`    | 可以选择的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is)
+`:where(header, div) p` | 与 `:is` 相同 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where)
+`a:has(> img)`          | 包含 `img` 元素的 `a` 元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has)
+`::first-letter`        | 第一行的第一个字母 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-letter)
+`::first-line`          | 第一行应用样式 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-line)
 
 CSS 字体
 ------

docs/djiango.md

@@ -0,0 +1,775 @@
+Django 备忘清单
+===
+
+Django 是 Python 的一款 Web 框架，本备忘单旨在快速理解 [Django](https://www.djangoproject.com/) 所涉及的主要概念，提供了最常用的 API 示例参考
+
+入门
+----
+
+### 准备环境
+<!--rehype:wrap-class=row-span-1-->
+
+```bash
+$ python --version
+# Python 3.9.2
+$ pip --version
+# pip 20.2.3 from c:\python39\lib\site-packages\pip (python 3.9)
+```
+<!--rehype:className=wrap-text -->
+
+如果你没有安装 PIP，你可以从这个页面下载并安装它：https://pypi.org/project/pip/
+
+### 入门
+<!--rehype:wrap-class=row-span-4-->
+
+- 创建虚拟环境
+  ```bash
+  $ py -m venv myproject # Windows
+  $ python -m venv myproject # Unix/MacOS
+  ```
+- 其中包含子文件夹和文件，如下所示
+  ```bash
+  myproject
+   ├┈Include
+   ├┈Lib
+   ├┈Scripts
+   ╰┈pyvenv.cfg
+  ```
+- 以下命令来激活环境
+  ```bash
+  # Windows:
+  myproject\Scripts\activate.bat
+  # Unix/MacOS:
+  source myproject/bin/activate
+  ```
+- 提示符中看到以下结果：
+  ```bash
+  # Windows:
+  (myproject) C:\Users\Your Name>
+  # Unix/MacOS:
+  (myproject) ... $
+  ```
+- 安装 Django
+  ```bash
+  # Windows:
+  (myproject) C:\Users\Name>py -m pip install Django
+  # Unix/MacOS:
+  (myproject) ... $ python -m pip install Django
+  ```
+  <!--rehype:className=wrap-text -->
+<!--rehype:className=style-timeline-->
+
+### 创建项目
+<!--rehype:wrap-class=row-span-3-->
+
+```bash
+$ django-admin startproject myworld
+```
+
+创建了一个 `myworld` 文件夹，内容如下：
+
+```bash
+myworld
+  ├┈ manage.py
+  ╰┈ myworld/
+     ├┈ __init__.py
+     ├┈ asgi.py
+     ├┈ settings.py
+     ├┈ urls.py
+     ╰┈ wsgi.py
+```
+
+运行 Django 项目
+
+```bash
+$ py manage.py runserver     # Windows
+$ python manage.py runserver # Unix/MacOS
+```
+
+打开一个新的浏览器窗口并在地址栏中输入 127.0.0.1:8000
+
+### 检查 Django 版本
+
+```bash
+(myproject) C:\Users\Your Name>django-admin --version
+# 4.0.3
+```
+
+### 创建应用
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+$ py manage.py startapp members
+```
+
+项目中创建了一个名为 `members` 的文件夹，内容如下：
+
+```bash
+myworld
+  ├┈ manage.py
+  ├┈ myworld/
+  ╰┈ members/
+     ├┈ migrations/
+     ┆  ╰┈ __init__.py
+     ├┈ __init__.py
+     ├┈ admin.py
+     ├┈ apps.py
+     ├┈ models.py
+     ├┈ tests.py
+     ╰┈ views.py
+```
+
+首先，看一下名为 `views.py` 的文件。这是我们收集发送回正确响应所需的信息的地方。
+
+### 应用目录介绍
+
+- `Django` 接收 URL，检查 `urls.py` 文件，并调用与 URL 匹配的视图。
+- 位于 `views.py` 中的视图检查相关模型。
+- 模型是从 `models.py` 文件中导入的。
+- 然后视图将数据发送到模板文件夹中的指定模板。
+- 模板包含 `HTML` 和 `Django` 标记，并使用数据将完成的 `HTML` 内容返回给浏览器
+
+### 视图
+
+Django 视图是接受 `http` 请求并返回 `http` 响应的 `Python` 函数，就像 `HTML` 文档一样。
+
+使用 `Django` 的网页充满了不同任务和任务的视图。
+
+视图通常放在一个名为 `views.py` 的文件中，该文件位于应用程序的文件夹中。
+
+您的 `members` 文件夹中有一个 `views.py`，如下所示：
+
+```PY
+from django.shortcuts import render
+
+# Create your views here.
+```
+
+找到它并打开它，并将内容替换为：
+
+```PY
+from django.shortcuts import render
+from django.http import HttpResponse
+
+def index(request):
+    return HttpResponse("Hello world!")
+```
+
+这是一个关于如何将响应发送回浏览器的简单示例。
+
+但是我们如何执行视图呢？ 好吧，我们必须通过 URL 调用视图。
+
+### URLs
+
+在与 `views.py` 文件相同的文件夹中创建一个名为 `urls.py` 的文件，并在其中输入以下代码：
+
+```py
+from django.urls import path
+from . import views
+urlpatterns = [
+    path('', views.index, name='index'),
+]
+```
+
+刚刚创建的 `urls.py` 文件是特定于成员应用程序的。我们还必须在根目录 `myworld` 中进行一些路由。
+
+在 `myworld` 文件夹中有一个名为 `urls.py` 的文件，打开该文件并在 `import` 语句中添加 `include` 模块，并在列表中添加一个 `path()` 函数。文件将如下所示：
+
+```py
+from django.contrib import admin
+from django.urls import include, path
+
+urlpatterns = [
+  path('members/', include('members.urls')),
+  path('admin/', admin.site.urls),
+]
+```
+
+如果服务器未运行，请导航到 `/myworld` 文件夹并在命令提示符下执行此命令：
+
+```bash
+$ py manage.py runserver
+```
+
+在浏览器窗口的地址栏中输入 `127.0.0.1:8000/members/`
+
+### 模板
+<!--rehype:wrap-class=row-span-2-->
+
+在 `members` 文件夹中创建一个 `templates` 文件夹，并创建一个名为 `myfirst.html` 的 `HTML` 文件。文件结构应该是这样的：
+
+```bash
+myworld
+ ├┈ manage.py
+ ├┈ myworld/
+ ╰┈ members/
+    ╰┈ templates/
+       ╰┈ myfirst.html
+```
+
+打开 `HTML` 文件并插入以下内容：
+
+```html
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>Hello World!</h1>
+  <p>欢迎来到我的第一个 Django 项目！</p>
+</body>
+</html>
+```
+
+修改视图 `members/views.py`
+
+```py
+from django.http import HttpResponse
+from django.template import loader
+
+def index(request):
+  template = loader.get_template('myfirst.html')
+  return HttpResponse(template.render())
+```
+
+#### 更改设置
+
+为了能够处理比“Hello World！”更复杂的东西，我们必须告诉 `Django` 一个新的应用程序已创建
+
+这是在 `myworld` 文件夹的 `myworld/settings.py` 文件中完成的。查找 `INSTALLED_APPS[]` 列表并添加成员应用程序，如下所示：
+
+```py
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'members.apps.MembersConfig'
+]
+```
+
+然后运行这个命令： 
+
+```bash
+$ py manage.py migrate
+```
+
+通过导航到 `/myworld` 文件夹启动服务器并执行以下命令：
+
+```bash
+$ py manage.py runserver
+```
+
+在浏览器窗口的地址栏中输入 127.0.0.1:8000/members/
+
+### 创建表（模型）
+<!--rehype:wrap-class=col-span-2-->
+
+在 `/members/` 文件夹中，打开 `models.py` 文件。要在我们的数据库中添加成员表，首先创建一个成员类，并描述其中的表字段：
+
+```py
+from django.db import models
+
+class Members(models.Model):
+  firstname = models.CharField(max_length=255)
+  lastname = models.CharField(max_length=255)
+```
+
+然后导航到 `/myworld/` 文件夹并运行以下命令：
+
+```bash
+$ py manage.py makemigrations members
+# Migrations for 'members':
+#   members\migrations\0001_initial.py
+#     - Create model Members
+```
+
+创建一个包含任何新更改的文件并将该文件存储在 `/migrations/` 文件夹中。下次运行 `py manage.py migrate` 时，Django 将根据迁移文件夹中新文件的内容创建并执行一条 SQL 语句。运行迁移命令：
+
+```bash
+$ py manage.py migrate
+```
+
+从模型创建的 SQL 语句是：
+
+```sql
+CREATE TABLE "members_members" (
+  "id" INT NOT NULL PRIMARY KEY AUTOINCREMENT,
+  "firstname" varchar(255) NOT NULL,
+  "lastname" varchar(255) NOT NULL
+);
+```
+
+Django 模板
+---
+
+### 模板变量
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```django
+<!-- template.html -->
+<h1>你好 {{ firstname }}，你好吗？</h1>
+```
+
+在视图 (`views.py`) 中创建变量，上面示例中的变量 `firstname` 通过视图发送到模板：
+
+```py
+from django.http import HttpResponse
+from django.template import loader
+
+def testing(request):
+  template = loader.get_template('template.html')
+  context = {
+    'firstname': '狂徒张三',
+  }
+  return HttpResponse(template.render(context, request))
+```
+
+### 模板中创建变量
+
+```django
+{% with firstname="Tobias" %}
+<h1>你好 {{ firstname }}，你好吗？</h1>
+```
+
+### 数组循环
+
+```django
+<ul>
+  {% for x in mymembers %}
+    <li>{{ x.firstname }}</li>
+  {% endfor %}
+</ul>
+```
+
+### 模板标签参考
+<!--rehype:wrap-class=row-span-5-->
+
+标签 | 描述
+:- | :-
+`autoescape` | 指定自动转义模式是打开还是关闭
+`block` | 指定块部分
+`comment` | 指定注释部分
+`csrf_token` | 保护表单免受跨站点请求伪造
+`cycle` | 指定要在循环的每个循环中使用的内容
+`debug` | 指定调试信息
+`extends` | 指定父模板
+`filter` | 在返回之前过滤内容
+`firstof` | 返回第一个非空变量
+`for` | 指定一个 for 循环
+`if` | 指定一个 if 语句
+`ifchanged` | 仅当自上次迭代以来值已更改时才输出块<br> _(用于 for 循环)_
+`include` | 指定包含的内容/模板
+`load` | 从另一个库加载模板标签
+`lorem` | 输出随机文本
+`now` | 输出当前日期/时间
+`regroup` | 按组对对象进行排序
+`resetcycle` | 循环使用，重置循环
+`spaceless` | 删除 HTML 标签之间的空格
+`templatetag` | 输出指定的模板标签
+`url` | 返回 URL 的绝对 URL 部分
+`verbatim` | 指定不应由模板引擎呈现的内容
+`widthratio` | 给定值和最大值之间的比率计算宽度值
+`with` | 指定要在块中使用的变量
+<!--rehype:className=show-header-->
+
+### If 语句
+
+```django
+{% if greeting == 1 %}
+  <h1>Hello</h1>
+{% elif greeting == 2 %}
+  <h1>Welcome</h1>
+{% else %}
+  <h1>Goodbye</h1>
+{% endif %} 
+```
+
+### For 循环
+<!--rehype:wrap-class=row-span-2-->
+
+```django
+{% for x in cars %}
+  <h1>{{ x.brand }}</h1>
+  <p>{{ x.model }}</p>
+  <p>{{ x.year }}</p>
+{% endfor %} 
+```
+
+数据 cars 空的展示内容：
+
+```django
+<ul>
+  {% for x in cars %}
+    <h1>{{ x.brand }}</h1>
+    <p>{{ x.model }}</p>
+    <p>{{ x.year }}</p>
+  {% empty %}
+    <li>No members</li>
+  {% endfor %}
+</ul> 
+```
+
+### 循环变量
+<!--rehype:wrap-class=row-span-2-->
+
+- `forloop.counter` 当前循环，从 1 开始
+- `forloop.counter0` 当前循环，从 0 开始
+- `forloop.first` 循环是否在其第一次循环中
+- `forloop.last` 循环是否在其最后一次循环中
+- `forloop.parentloop` 
+- `forloop.revcounter` 如果从末尾开始并向后计数，则以 1 结束
+- `forloop.revcounter0` 如果从末尾开始并向后计数，则以 0 结束
+
+### 过滤值
+
+```django
+<h1>你好 {{ firstname|upper }}，你好吗？</h1>
+```
+
+返回带有大写字母的变量名
+
+### 注释
+<!--rehype:wrap-class=row-span-2-->
+
+```django
+<h1>欢迎大家{# 较小的注释 #}</h1>
+{% comment %}
+  <h1>欢迎女士们先生们</h1>
+{% endcomment %}
+```
+
+#### 注释描述
+
+```django
+<h1>欢迎大家{# 较小的注释 #}</h1>
+{% comment "这是最初的欢迎信息" %}
+    <h1>欢迎女士们先生们</h1>
+{% endcomment %}
+```
+
+注释允许您拥有应该被忽略的代码部分
+
+### 双过滤值
+
+```django
+<h1>你好 {{ firstname|first|upper }}，你好吗？</h1>
+```
+
+返回变量 `firstname` 的第一个字符，小写
+
+### 过滤器标签
+
+```django
+{% filter upper %}
+  <h1>Hello everyone, how are you?</h1>
+{% endfilter %}
+```
+
+返回内容大写
+
+### cycle
+<!--rehype:wrap-class=col-span-2 row-span-3-->
+
+如果你想为每次循环使用新的背景颜色，你可以使用 `cycle` 标签来做到这一点
+
+```django
+<ul>
+  {% for x in members %}
+    <li style='background-color:{% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' %}'>
+      {{ x.firstname }}
+    </li>
+  {% endfor %}
+</ul> 
+```
+
+将参数值保存在变量中，以便以后使用：
+
+```django
+<ul>
+  {% for x in members %}
+    {% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' as bgcolor silent %}
+    <li style='background-color:{{ bgcolor }}'>
+      {{ x.firstname }}
+    </li>
+  {% endfor %}
+</ul> 
+```
+
+你注意到 `silent` 关键字了吗？ 确保添加这个，否则参数值将在输出中显示两次
+
+```django
+<ul>
+  {% for x in members %}
+    {% cycle 'lightblue' 'pink' 'yellow' 'coral' 'grey' as bgcolor silent %}
+    {% if forloop.counter == 3 %}
+      {% resetcycle %}
+    {% endif %}
+    <li style='background-color:{{ bgcolor }}'>
+      {{ x.firstname }}
+    </li>
+  {% endfor %}
+</ul> 
+```
+
+您可以使用 `{% resetcycle %}` 标签强制循环重新开始
+
+### 每一行添加行号
+
+```django
+{% filter upper|linenumbers %}Hello!
+my name is
+Emil.
+What is your name?{% endfilter %}
+```
+
+返回内容`大写`并在每一行添加`行号`
+
+### 导入模板
+
+`footer.html`:
+
+```django
+<p>您已到达本页底部，感谢您抽出宝贵时间</p>
+```
+
+`template.html`:
+
+```django
+<h1>Hello</h1>
+<p>此页面包含模板中的页脚</p>
+{% include 'footer.html' %} 
+```
+
+### 导入模板传入变量
+
+`mymenu.html`: 
+
+```django
+<div>HOME | {{ me }} | ABOUT | FORUM | {{ sponsor }}</div>
+```
+<!--rehype:className=wrap-text -->
+
+`template.html`:
+
+```django
+{% include mymenu.html with me="张三" sponsor="Reference" %}
+
+<h1>Welcome</h1>
+
+<p>This is my webpage</p>
+```
+<!--rehype:className=wrap-text -->
+
+### 过滤器参考
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+Keyword | 描述
+:- | :-
+`add` | 添加指定的值
+`addslashes` | 在任何引号字符之前添加一个斜杠，以转义字符串
+`capfirst` | 返回大写的第一个字母
+`center` | 使值在指定宽度的中间居中
+`cut` | 删除任何指定的字符或短语
+`date` | 以指定格式返回日期
+`default` | 如果值为 `False`，则返回指定值
+`default_if_none` | 如果值为 `None`，则返回指定的值
+`dictsort` | 按给定值对字典进行排序
+`dictsortreversed` | 按给定值对字典进行反向排序
+`divisibleby` | 如果该值可以除以指定的数字，则返回 `True`，否则返回 `False`
+`escape` | 从字符串中转义 `HTML` 代码
+`escapejs` | 从字符串中转义 `JavaScript` 代码
+`filesizeformat` | 将数字返回为文件大小格式
+`first` | 返回对象的第一项（对于字符串，返回第一个字符）
+`floatformat` | 将浮点数四舍五入到指定的小数位数，默认为一位小数
+`force_escape` | 从字符串中转义 `HTML` 代码
+`get_digit` | 返回数字的特定数字
+`iriencode` | 将 `IRI` 转换为 `URL` 友好字符串
+`join` | 将列表中的项目返回为字符串
+`json_script` | 将一个对象返回为由 `<script></script>` 标签包围的 `JSON` 对象
+`last` | 返回对象的最后一项（对于字符串，返回最后一个字符）
+`length` | 返回对象中的项目数，或字符串中的字符数
+`length_is` | 如果长度与指定的数字相同，则返回 `True`
+`linebreaks` | 返回带有 `<br>` 而不是换行符和 `<p>` 而不是多个换行符的文本
+`linebreaksbr` | 返回带有 `<br>` 的文本，而不是换行符
+`linenumbers` | 返回每行带有行号的文本
+`ljust` | 根据指定的宽度左对齐值
+`lower` | 以小写字母返回文本
+`make_list` | 将值转换为列表对象
+`phone2numeric` | 将带字母的电话号码转换为数字电话号码
+`pluralize` | 如果指定的数值不是 `1`，则在值的末尾添加一个 `s`
+`pprint` |  
+`random` | 返回对象的随机项
+`rjust` | 根据指定的宽度右对齐值
+`safe` | 标记此文本是安全的，不应进行 `HTML` 转义
+`safeseq` | 将对象的每个项目标记为安全且项目不应进行 `HTML` 转义
+`slice` | 返回文本或对象的指定切片
+`slugify` | 将文本转换为一个长字母数字小写单词
+`stringformat` | 将值转换为指定格式
+`striptags` | 从文本中删除 `HTML` 标记
+`time` | 以指定格式返回时间
+`timesince` | 返回两个日期时间之间的差
+`timeuntil` | 返回两个日期时间之间的差
+`title` | 文本中每个单词的第一个字符大写，所有其他字符都转换为小写
+`truncatechars` | 将字符串缩短为指定数量的字符
+`truncatechars_html` | 将字符串缩短为指定数量的字符，而不考虑任何 `HTML` 标记的长度
+`truncatewords` | 将字符串缩短为指定数量的单词
+`truncatewords_html` | 将字符串缩短为指定数量的单词，而不考虑任何 `HTML` 标记
+`unordered_list` | 将对象的项目返回为无序列的 `HTML` 列表
+`upper` | 以大写字母返回文本
+`urlencode` | `URL` 对字符串进行编码
+`urlize` | 将字符串中的任何 `URL` 作为 `HTML` 链接返回
+`urlizetrunc` | 将字符串中的任何 `URL` 作为 `HTML` 链接返回，但会将链接缩短为指定的字符数
+`wordcount` | 返回文本中的单词数
+`wordwrap` | 以指定的字符数换行
+`yesno` | 将布尔值转换为指定值
+`i18n` |  
+`l10n` |  
+`tz` |  
+
+### 字段查询参考
+
+Keyword | 描述
+:- | :-
+`contains` | 包含短语
+`icontains` | 与包含相同，但不区分大小写
+`date` | 匹配日期
+`day` | 匹配日期(日期，1-31)(日期)
+`endswith` | 以。。结束
+`iendswith` | 与 endwidth 相同，但不区分大小写
+`exact` | 完全匹配
+`iexact` | 与精确相同，但不区分大小写
+`in` | 匹配其中一个值
+`isnull` | 匹配 NULL 值
+`gt` | 比...更棒
+`gte` | 大于或等于
+`hour` | 匹配一个小时(对于日期时间)
+`lt` | 少于
+`lte` | 小于或等于
+`minute` | 匹配一分钟(对于日期时间)
+`month` | 匹配一个月(日期)
+`quarter` | 匹配一年中的一个季度 (1-4)(用于日期)
+`range` | 之间的匹配
+`regex` | 匹配正则表达式
+`iregex` | 与正则表达式相同，但不区分大小写
+`second` | 匹配一秒(对于日期时间)
+`startswith` | 以 ... 开始
+`istartswith` | 与 `startswith` 相同，但不区分大小写
+`time` | 匹配时间(用于日期时间)
+`week` | 匹配周数 (`1-53`)(用于日期)
+`week_day` | 匹配一周中的某一天 (1-7) 1 是星期日
+`iso_week_day` | 匹配 ISO 8601 星期几 (1-7) 1 是星期一
+`year` | 匹配一年(日期)
+`iso_year` | 匹配 ISO 8601 年份(日期)
+
+添加静态文件
+---
+
+### 添加 CSS 文件
+
+```bash {7}
+myworld
+  ├┈ manage.py
+  ├┈ myworld/
+  ╰┈ members/
+     ├┈ templates/
+     ├┈ static/
+        ╰┈ myfirst.css
+```
+
+打开 `CSS` 文件 (`members/static/myfirst.css`) 并插入以下内容：
+
+```css
+body {
+  background-color: lightblue;
+  font-family: verdana;
+}
+```
+
+修改模板 (`members/templates/template.html`) 引入 css 文件
+
+```django {1,4}
+{% load static %}
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="{% static 'myfirst.css' %}">
+<body>
+```
+<!--rehype:className=wrap-text -->
+
+### 添加 JS 文件
+
+```bash {7}
+myworld
+  ├┈ manage.py
+  ├┈ myworld/
+  ╰┈ members/
+     ├┈ templates/
+     ├┈ static/
+        ╰┈ myfirst.js
+```
+
+打开 `JS` 文件 (`members/static/myfirst.js`) 并插入以下内容：
+
+```js
+function myFunction() {
+  alert("Hello from a static file!");
+}
+```
+
+修改模板 (`members/templates/template.html`) 引入 `JS` 文件
+
+```django {1,4,6}
+{% load static %}
+<!DOCTYPE html>
+<html>
+<script src="{% static 'myfirst.js' %}"></script>
+<body>
+<button onclick="myFunction()">Click me!</button>
+```
+<!--rehype:className=wrap-text -->
+
+### 添加图片文件
+
+```bash {7}
+myworld
+  ├┈ manage.py
+  ├┈ myworld/
+  ╰┈ members/
+     ├┈ templates/
+     ├┈ static/
+        ╰┈ pineapple.jpg
+```
+
+打开 `JS` 文件 (`members/static/pineapple.jpg`) 并插入以下内容：
+
+```js
+function myFunction() {
+  alert("Hello from a static file!");
+}
+```
+
+修改模板 (`members/templates/template.html`) 引入 `jpg` 文件
+
+```django {1,5}
+{% load static %}
+<!DOCTYPE html>
+<html>
+<body>
+<img src="{% static 'pineapple.jpg' %}">
+</body>
+</html>
+```
+<!--rehype:className=wrap-text -->
+
+
+
+
+另见
+----
+
+- [Django 官网](https://www.djangoproject.com/) _(djangoproject.com)_
+- [Django 教程](https://www.runoob.com/django/django-tutorial.html) _(runoob.com)_
+- [Django 框架教程](http://c.biancheng.net/django/) _(biancheng.net)_
+- [Django 4 中文教程](https://www.w3cschool.cn/django4/) _(w3cschool.cn)_
+- [Django Tutorial](https://www.w3schools.com/django/index.php) _(w3schools.com)_

docs/docker.md

@@ -350,6 +350,306 @@ $ docker volume prune
 `docker-machine scp docker-compose.yml myvm1:~`                             | 将文件复制到节点的主目录
 `docker-machine ssh myvm1 "docker stack deploy -c <file> <app>"`            | 部署应用
 
+### docker 主要命令
+
+:- | :- 
+:- | :- 
+`attach`   | 将本地标准输入、输出和错误流附加到正在运行的容器
+`build`    | 从 Dockerfile 构建镜像
+`commit`   | 从容器的更改创建新图像
+`cp`       | 在容器和本地文件系统之间复制文件/文件夹
+`create`   | 创建一个新容器
+`diff`     | 检查容器文件系统上文件或目录的更改
+`events`   | 从服务器获取实时事件
+`exec`     | 在正在运行的容器中运行命令
+`export`   | 将容器的文件系统导出为 tar 存档
+`history`  | 显示图像的历史
+`images`   | 列出图像
+`import`   | 从 tarball 导入内容以创建文件系统映像
+`info`     | 显示系统范围的信息
+`inspect`  | 返回有关 Docker 对象的低级信息
+`kill`     | 杀死一个或多个正在运行的容器
+`load`     | 从 tar 存档或 STDIN 加载图像
+`login`    | 登录到 Docker 注册表
+`logout`   | 从 Docker 注册表中注销
+`logs`     | 获取容器的日志
+`pause`    | 暂停一个或多个容器内的所有进程
+`port`     | 列出容器的端口映射或特定映射
+`ps`       | 列出容器
+`pull`     | 从注册表中提取图像或存储库
+`push`     | 将图像或存储库推送到注册表
+`rename`   | 重命名容器
+`restart`  | 重启一个或多个容器
+`rm`       | 移除一个或多个容器
+`rmi`      | 移除一张或多张图片
+`run`      | 在新容器中运行命令
+`save`     | 将一个或多个图像保存到 tar 存档（默认流式传输到 STDOUT）
+`search`   | 在 `Docker Hub` 中搜索图像
+`start`    | 启动一个或多个停止的容器
+`stats`    | 显示容器资源使用统计的实时流
+`stop`     | 停止一个或多个正在运行的容器
+`tag`      | 创建一个引用 SOURCE_IMAGE 的标记 TARGET_IMAGE
+`top`      | 显示容器的运行进程
+`unpause`  | 取消暂停一个或多个容器中的所有进程
+`update`   | 更新一个或多个容器的配置
+`version`  | 显示 Docker 版本信息
+`wait`     | 阻塞直到一个或多个容器停止，然后打印它们的退出代码
+
+### docker run/create
+<!--rehype:wrap-class=row-span-3-->
+
+```bash
+    --add-host list            # 添加自定义主机到 IP 映射 (host:ip)
+-a, --attach list              # 连接到 STDIN、STDOUT 或 STDERR
+    --blkio-weight uint16      # 块 IO（相对权重），介于 10 和 1000 之间，或 0 禁用（默认 0）
+    --blkio-weight-device list # 块 IO 权重（相对设备权重）（默认 []）
+    --cap-add list             # 添加 Linux 功能
+    --cap-drop list            # 放弃 Linux 功能
+    --cgroup-parent string     # 容器的可选父 cgroup
+    --cgroupns string   # 要使用的 Cgroup 命名空间（主机|私有）
+                        #  'host':    在 Docker 主机的 cgroup 命名空间中运行容器
+                        #  'private': 在自己的私有 cgroup 命名空间中运行容器
+                        #  '':        使用由守护进程上的 
+                        #        default-cgroupns-mode 选项配置的 cgroup 命名空间（默认）
+    --cidfile string           # 将容器 ID 写入文件
+    --cpu-period int           # 限制 CPU CFS（完全公平调度器）周期
+    --cpu-quota int            # 限制 CPU CFS（完全公平调度器）配额
+    --cpu-rt-period int        # 以微秒为单位限制 CPU 实时周期
+    --cpu-rt-runtime int       # 以微秒为单位限制 CPU 实时运行时间
+-c, --cpu-shares int           # CPU 份额（相对权重）
+    --cpus decimal             # CPU 数量
+    --cpuset-cpus string       # 允许执行的 CPU (0-3, 0,1)
+    --cpuset-mems string       # 允许执行的 MEM (0-3, 0,1)
+    --device list              # 将主机设备添加到容器
+    --device-cgroup-rule list  # 将规则添加到 cgroup 允许的设备列表
+    --device-read-bps list     # 限制设备的读取速率（每秒字节数）（默认 []）
+    --device-read-iops list    # 限制设备的读取速率（每秒 IO）（默认 []）
+    --device-write-bps list    # 限制设备的写入速率（每秒字节数）（默认 []）
+    --device-write-iops list   # 限制设备的写入速率（每秒 IO）（默认 []）
+    --disable-content-trust    # 跳过图像验证（默认为 true）
+    --dns list                 # 设置自定义 DNS 服务器
+    --dns-option list          # 设置 DNS 选项
+    --dns-search list          # 设置自定义 DNS 搜索域
+    --domainname string        # 容器 NIS 域名
+    --entrypoint string        # 覆盖图像的默认入口点
+-e, --env list                 # 设置环境变量
+    --env-file list            # 读入环境变量文件
+    --expose list              # 公开一个端口或一系列端口
+    --gpus gpu-request         # 要添加到容器中的 GPU 设备（“全部”以传递所有 GPU）
+    --group-add list           # 添加其他组以加入
+    --health-cmd string        # 运行以检查运行状况的命令
+    --health-interval duration # 运行检查之间的时间 (ms|s|m|h) (默认 0s)
+    --health-retries int           # 需要报告不健康的连续失败
+    --health-start-period duration # 开始健康重试倒计时之前容器初始化的开始时间（ms|s|m|h）（默认 0s）
+    --health-timeout duration      # 允许运行一项检查的最长时间 (ms|s|m|h) (默认 0s)
+    --help                     # 打印使用
+-h, --hostname string          # 容器主机名
+    --init                     # 在容器内运行一个 init 来转发信号并收获进程
+-i, --interactive              # 即使没有连接，也保持 STDIN 打开
+    --ip string                # IPv4 地址（例如 172.30.100.104）
+    --ip6 string               # IPv6 地址（例如，2001:db8::33）
+    --ipc string               # 要使用的 IPC 模式
+    --isolation string         # 容器隔离技术
+    --kernel-memory bytes      # 内核内存限制
+-l, --label list               # 在容器上设置元数据
+    --label-file list          # 读入以行分隔的标签文件
+    --link list                # 添加到另一个容器的链接
+    --link-local-ip list       # 容器 IPv4/IPv6 链路本地地址
+    --log-driver string        # 容器的日志记录驱动程序
+    --log-opt list             # 日志驱动程序选项
+    --mac-address string       # 容器 MAC 地址（例如 92:d0:c6:0a:29:33）
+-m, --memory bytes             # 内存限制
+    --memory-reservation bytes # 内存软限制
+    --memory-swap bytes        # 交换限制等于内存加上交换：'-1' 启用无限交换
+    --memory-swappiness int    # 调整容器内存交换（0 到 100）（默认 -1）
+    --mount mount              # 将文件系统挂载附加到容器
+    --name string              # 为容器分配名称
+    --network network          # 将容器连接到网络
+    --network-alias list       # 为容器添加网络范围的别名
+    --no-healthcheck           # 禁用任何容器指定的 HEALTHCHECK
+    --oom-kill-disable         # 禁用 OOM 杀手
+    --oom-score-adj int        # 调整主机的 OOM 首选项（-1000 到 1000）
+    --pid string               # 要使用的 PID 命名空间
+    --pids-limit int           # 调整容器 pids 限制（设置 -1 表示无限制）
+    --platform string          # 如果服务器支持多平台，则设置平台
+    --privileged               # 授予此容器扩展权限
+-p, --publish list             # 将容器的端口发布到主机
+-P, --publish-all              # 将所有暴露的端口发布到随机端口
+    --pull string              # 创建前拉取图像("always"|"missing"|"never")(默认"missing")
+    --read-only                # 将容器的根文件系统挂载为只读
+    --restart string           # 容器退出时应用的重启策略（默认“否”）
+    --rm                       # 容器退出时自动移除
+    --runtime string           # 用于此容器的运行时
+    --security-opt list        # 安全选项
+    --shm-size bytes           # /dev/shm 的大小
+    --stop-signal string       # 停止容器的信号（默认“SIGTERM”）
+    --stop-timeout int         # 停止容器的超时（以秒为单位）
+    --storage-opt list         # 容器的存储驱动程序选项
+    --sysctl map               # Sysctl 选项（默认 map[]）
+    --tmpfs list               # 挂载 tmpfs 目录
+-t, --tty                      # 分配一个伪 TTY
+    --ulimit ulimit            # ulimit 选项（默认 []）
+-u, --user string              # 用户名或 UID（格式：<name|uid>[:<group|gid>]）
+    --userns string            # 要使用的用户命名空间
+    --uts string               # 要使用的 UTS 命名空间
+-v, --volume list              # 绑定挂载卷
+    --volume-driver string     # 容器的可选卷驱动程序
+    --volumes-from list        # 从指定容器挂载卷
+-w, --workdir string           # 容器内的工作目录
+```
+
+`run`/`create` 大部分参数一致
+
+### docker 全局参数
+
+```bash
+    --config string     # 客户端配置文件的位置（默认“~/.docker”）
+-c, --context string    # 用于连接到守护程序的上下文的名称（
+                        # 覆盖 DOCKER_HOST 环境变量和使用“docker context use”设置的默认上下文）
+-D, --debug             # 启用调试模式
+-H, --host list         # 要连接的守护进程套接字
+-l, --log-level string  # 设置日志级别("debug"\|"info"\|"warn"\|"error"\|"fatal") （默认“info”）
+    --tls               # 使用 TLS； 由 --tlsverify 暗示
+    --tlscacert string  # 仅由该 CA 签署的信任证书（默认为“~/.docker/ca.pem”）
+    --tlscert string    # TLS证书文件路径（默认“~/.docker/cert.pem”）
+    --tlskey string     # TLS 密钥文件的路径（默认为“~/.docker/key.pem”）
+    --tlsverify         # 使用 TLS 并验证远程
+-v, --version           # 打印版本信息并退出
+```
+
+### docker 管理命令
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :- 
+:- | :- 
+`docker builder`     | 管理构建
+`docker buildx*`     | Docker Buildx（Docker Inc.，v0.7.1）
+`docker compose*`    | Docker Compose（Docker Inc.，v2.2.3）
+`docker config`      | 管理 Docker 配置
+`docker container`   | 管理容器
+`docker context`     | 管理上下文
+`docker image`       | 管理图像
+`docker manifest`    | 管理 Docker 镜像清单和清单列表
+`docker network`     | 管理网络
+`docker node`        | 管理 Swarm 节点
+`docker plugin`      | 管理插件
+`docker scan*`       | Docker 扫描（Docker Inc.，v0.16.0）
+`docker secret`      | 管理 Docker 机密
+`docker service`     | 管理服务
+`docker stack`       | 管理 Docker 堆栈
+`docker swarm`       | 管理群
+`docker system`      | 管理 Docker
+`docker trust`       | 管理对 Docker 映像的信任
+`docker volume`      | 管理卷
+
+### docker images
+
+```bash
+-a, --all             显示所有图像（默认隐藏中间图像）
+    --digests         显示摘要
+-f, --filter filter   根据提供的条件过滤输出
+    --format string   使用 Go 模板打印漂亮的图像
+    --no-trunc        不要截断输出
+-q, --quiet           仅显示图像 ID
+```
+
+Docker 示例
+---
+<!--rehype:body-class=cols-2-->
+
+### Docker Web 管理工具 portainer
+
+```bash
+$ docker run -d --name portainer \
+  -p 8000:8000 \
+  -p 9443:9443 \
+  --restart=always \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  -v $HOME/portainer:/data \
+    portainer/portainer-ee:latest
+```
+
+### 在线代码编辑器 Code Server
+
+```bash
+$ mkdir -p ~/.config
+$ docker run -it --name code-server  \
+  -p 127.0.0.1:8080:8080 \
+  -v "$HOME/.config/code-server:/home/coder/.config" \
+  -v "$PWD:/home/coder/project" \
+  -u "$(id -u):$(id -g)" \
+  -e "DOCKER_USER=$USER" \
+    codercom/code-server:latest
+```
+
+### MySQL
+
+```bash
+$ docker run --name mysql \
+  -p 3306:3306 \
+  -v $HOME/mysql/conf.d:/etc/mysql/conf.d \
+  -v $HOME/mysql/data:/var/lib/mysql \
+  -v /etc/localtime:/etc/localtime:ro \
+  -e MYSQL_ROOT_PASSWORD=123456 \
+  -d mysql:5.7.23
+```
+
+### Redis
+
+```bash
+$ docker run -d --name myredis \
+  -v $HOME/redis/conf:/usr/local/etc/redis \
+  -v /etc/localtime:/etc/localtime:ro \
+    redis redis-server /usr/local/etc/redis/redis.conf
+```
+
+### Nginx
+
+```bash
+$ docker run --name my-nginx \ 
+  -v "$HOME/nginx/nginx.conf:/etc/nginx/nginx.conf:ro" \
+  -v "$HOME/nginx/html:/usr/share/nginx/html:ro" \
+  -p 8080:80 \
+  -d nginx
+```
+
+### PostgreSQL
+
+```bash
+$ docker run --name my-postgres \
+  -e POSTGRES_PASSWORD=mysecretpassword \
+	-e PGDATA=/var/lib/postgresql/data/pgdata \
+	-v $HOME/nginx/mount:/var/lib/postgresql/data \
+  -d postgres
+```
+
+### 媒体管理工具 Dim
+
+```bash
+$ docker run --name my-dim \
+   -p 8000:8000/tcp \
+   -v $HOME/.config/dim:/opt/dim/config \
+   -v $HOME/dim/media:/media:ro \
+   -d ghcr.io/dusk-labs/dim:dev
+```
+
+[Github](https://github.com/Dusk-Labs/dim)
+
+### Gitlab
+
+```bash
+$ docker run -d --name gitlab \
+  --hostname gitlab.example.com \
+  --publish 8443:443 --publish 8081:80 -p 2222:22 \
+  --restart always \
+  --volume $HOME/gitlab/config:/etc/gitlab \
+  --volume $HOME/gitlab/logs:/var/log/gitlab \
+  --volume $HOME/gitlab/data:/var/opt/gitlab \
+  -v /etc/localtime:/etc/localtime \
+  --shm-size 256m \
+    gitlab/gitlab-ce:latest
+```
+
 另见
 ----
 

docs/emacs.md

@@ -0,0 +1,526 @@
+Emacs 备忘清单
+====
+
+[Emacs](https://www.gnu.org/software/emacs) 是可扩展的、可定制的、自记录的实时显示文本编辑器。此参考适用于 Emacs 27+
+
+入门
+----
+
+### 启动 Emacs
+
+要进入 Emacs，只需输入其名称：
+
+```shell
+$ emacs
+```
+
+------
+
+:- | :-
+:- | :-
+`C-z`       | 挂起 Emacs
+`C-x` `C-c` | 永久退出 Emacs
+<!--rehype:className=shortcuts-->
+
+### 全局描述
+
+:- | :-
+:- | :-
+`C-<key>` | 表示按住控件，然后按 `<key>`
+`M-<key>` | 表示按 `Esc` 一次，然后按 `<key>`
+<!--rehype:className=shortcuts-->
+
+注意：本备忘单遵循上述规则
+
+### 移动
+<!--rehype:wrap-class=row-span-2-->
+
+返回  | 向前   | 要移动的实体
+:- | :- | :-
+`C-b`     | `C-f`     | Haracter
+`M-b`     | `M-f`     | 单词
+`C-p`     | `C-n`     | 线
+`C-a`     | `C-e`     | 行开头<br/>_（或结尾）_
+`M-a`     | `M-e`     | 句子
+`M-{`     | `M-}`     | 段落
+`C-x` `[` | `C-x` `]` | 页
+`C-M-b`   | `C-M-f`   | Sexp
+`C-M-a`   | `C-M-e`   | 功能
+`M-<`     | `M->`     | 缓冲区开始<br>_（或结束）_
+<!--rehype:className=shortcuts show-header-->
+
+### 案例变更
+
+:- | :-
+:- | :-
+`M-u`       | 大写单词
+`M-l`       | 小写单词
+`M-c`       | 大写单词
+`C-x` `C-u` | 大写区域
+`C-x` `C-l` | 小写区域
+<!--rehype:className=shortcuts-->
+
+### 文件
+
+:- | :-
+:- | :-
+`C-x` `C-f` | 将文件读入 Emacs
+`C-x` `C-s` | 将文件保存回磁盘
+`C-x` `s`   | 保存所有文件
+`C-x` `i`   | 将另一个文件的内容插入此缓冲区
+`C-x` `C-v` | 将此文件替换为您的文件
+`C-x` `C-w` | 将缓冲区写入指定文件
+`C-x` `C-q` | 切换缓冲区的只读状态
+<!--rehype:className=shortcuts-->
+
+### 错误恢复
+
+:- | :-
+:- | :-
+`C-g`                       | 中止部分键入或执行的命令
+`M-x` 恢复会话               | 恢复因系统崩溃而丢失的文件
+`C-x` `u` `C-_` `C-/`       | 撤消不需要的更改
+`M-x` 恢复缓冲器              | 将缓冲区恢复到其原始内容
+`C-l`                       | 重绘垃圾屏幕
+<!--rehype:className=shortcuts-->
+
+### Transposing
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`C-t`       | 转置字符
+`M-t`       | 转置词
+`C-x` `C-t` | 转置线
+`C-M-t`     | 转置性别
+<!--rehype:className=shortcuts-->
+
+#### Scroll
+
+:- | :-
+:- | :-
+`C-v`     | 滚动到下一个屏幕
+`M-v`     | 滚动到上一个屏幕
+`C-x` `<` | 向左滚动
+`C-x` `>` | 向右滚动
+`C-l`     | 将当前行滚动到 <br> _center, top, bottom_
+<!--rehype:className=shortcuts-->
+
+#### 跳转
+
+:- | :-
+:- | :-
+`M-g` `g` | 转到行
+`M-g` `c` | 转到字符
+`M-m`     | 返回缩进
+<!--rehype:className=shortcuts-->
+
+### 标记
+
+:- | :-
+:- | :-
+`C-@` `C-SPC`     | 在标记在这里
+`C-x` `C-x`       | 交换点和标记
+`M-@`             | 设置标记 arg 单词
+`M-h`             | 标记段落
+`C-x` `C-p`       | 标记页面
+`C-M-@`           | 标记性
+`C-M-h`           | 标记功能
+`C-x` `h`         | 标记整个缓冲区
+<!--rehype:className=shortcuts-->
+
+### 杀死和删除
+<!--rehype:wrap-class=row-span-2-->
+
+向后 | 向前 | 要杀死的实体
+:- | :- | :- 
+`DEL`         | `C-d`   | 字符 <br>_(删除)_
+`M-DEL`       | `M-d`   | 单词
+`M-0` `C-k`   | `C-k`   | 行 <br/> _(到结尾)_
+`C-x` `DEL`   | `M-k`   | 句子
+`M--` `C-M-k` | `C-M-k` | 性爱
+<!--rehype:className=shortcuts show-header-->
+
+#### 杀死
+
+:- | :-
+:- | :-
+`C-W`      | 杀死区域 C-w
+`M-w`      | 复制区域杀死环
+`M-z` char | 杀死下一次出现的字符
+`C-y`      | 拉回最后一个被杀的东西
+`M-y`      | 用之前的杀戮替换最后的猛拉
+<!--rehype:className=shortcuts-->
+
+### 获得帮助
+
+:- | :-
+:- | :-
+`C-x` `1` | 删除帮助窗口
+`C-M-v`   | 滚动帮助窗口
+`C-h` `a` | Apropos：显示匹配字符串的命令
+`C-h` `k` | 描述一个键运行的功能
+`C-h` `f` | 描述一个函数
+`C-h` `m` | 获取特定于模式的信息
+<!--rehype:className=shortcuts-->
+
+帮助系统很简单。键入 `C-h`（或 `F1`）并按照说明进行操作。如果您是第一次使用，请键入 `C-h` `t` 以获得教程
+
+### 多个窗口
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+当显示两个命令时，第二个命令是用于框架而不是窗口的类似命令
+
+:- | :- | :-
+:- | :- | :-
+`C-x` `5` `1` | `C-x` `1` | 删除所有其他窗口
+`C-x` `5` `2` | `C-x` `2` | 拆分窗口，上方和下方
+`C-x` `5` `0` | `C-x` `0` | 删除此窗口
+<!--rehype:className=shortcuts-->
+
+:- | :- | :-
+:- | :- | :-
+&nbsp; | `C-x` `3`     | 拆分窗口，并排
+&nbsp; | `C-M-v`       | 滚动其他窗口
+<!--rehype:className=shortcuts-->
+
+:- | :- | :-
+:- | :- | :-
+`C-x` `5` `o`   | `C-x` `o`       | 将光标切换到另一个窗口
+`C-x` `5` `b`   | `C-x` `4` `b`   | 在其他窗口中选择缓冲区
+`C-x` `5` `C-o` | `C-x` `4` `C-o` | 在其他窗口中显示缓冲区
+`C-x` `5` `f`   | `C-x` `4` `f`   | 在其他窗口中查找文件
+`C-x` `5` `r`   | `C-x` `4` `r`   | 在其他窗口中以只读方式查找文件
+`C-x` `5` `d`   | `C-x` `4` `d`   | 在其他窗口中运行 Dired
+`C-x` `5` `.`   | `C-x` `4` `.`   | 在其他窗口中查找标签
+<!--rehype:className=shortcuts-->
+
+:- | :- | :-
+:- | :- | :-
+&nbsp;  | `C-x` `^`     | 让窗户变高
+&nbsp;  | `C-x` `{`     | 缩小窗口
+&nbsp;  | `C-x` `}`     | 让窗口变宽
+<!--rehype:className=shortcuts-->
+
+### 格式化
+
+:- | :-
+:- | :-
+`TAB`       | 缩进当前行（取决于模式）
+`C-M-\`     | 缩进区域（取决于模式）
+`C-M-q`     | 缩进 sexp（取决于模式）
+`C-x` `TAB` | 缩进区域刚性 arg 列
+`M-;`       | 缩进评论
+`C-o`       | 在点后插入换行符
+`C-M-o`     | 将其余行垂直向下移动
+`C-x` `C-o` | 删除点周围的空行
+`M-^`       | 与上一个加入行（带 arg，下一个）
+`M-\`       | 删除点周围的所有空白
+`M-SPC`     | 在点上正好放一个空格
+`M-q`       | 填写段落
+`C-x` `f`   | 将填充列设置为 arg
+`C-x` `.`   | 设置每行开头的前缀
+`M-o`       | 设置面
+<!--rehype:className=shortcuts-->
+
+### 信息
+<!--rehype:wrap-class=row-span-3-->
+
+:- | :-
+:- | :-
+`C-h` `i` | 输入信息文档阅读器
+`C-h` `S` | 在 Info 中查找指定的函数或变量
+<!--rehype:className=shortcuts-->
+
+#### 在节点内移动
+
+:- | :-
+:- | :-
+`SPC` | 向前滚动
+`DEL` | 反向滚动
+`b`   | 节点的开始
+<!--rehype:className=shortcuts-->
+
+#### 在节点之间移动
+
+:- | :-
+:- | :-
+`n` | 下一个节点
+`p` | 上一个节点
+`u` | 提升
+`m` | 按名称选择菜单项
+`n` | 按编号 (1–9) 选择第 n 个菜单项
+`f` | 遵循交叉引用（用 l 返回）
+`l` | 返回您看到的最后一个节点
+`d` | 返回目录节点
+`t` | 转到信息文件的顶部节点
+`g` | 按名称转到任何节点
+<!--rehype:className=shortcuts-->
+
+#### 其他
+
+:- | :-
+:- | :-
+`h` | 运行信息教程
+`i` | 在索引中查找主题
+`s` | 搜索节点以查找正则表达式
+`q` | 退出信息
+<!--rehype:className=shortcuts-->
+
+### 小缓冲区
+<!--rehype:wrap-class=row-span-2-->
+
+以下键在 `minibuffer` 中定义
+
+:- | :-
+:- | :-
+`TAB` | 尽可能完成
+`SPC` | 最多完成一个单词
+`RET` | 完成并执行
+`?`   | 显示可能的完成
+`M-p` | 获取先前的 `minibuffer` 输入
+`M-n` | 获取稍后的 `minibuffer` 输入或默认值
+`M-r` | 正则表达式向后搜索历史
+`M-s` | 正则表达式向前搜索历史
+`C-g` | 中止命令
+<!--rehype:className=shortcuts-->
+
+键入 `C-x` `ESC` `ESC` 以编辑并重复使用 `minibuffer` 的最后一个命令。键入 `F10` 以激活文本终端上的菜单栏项
+
+### 标签
+
+:- | :-
+:- | :-
+`M-.`                    | 查找标签（定义）
+`C-u` `M-.`              | 查找标签的下一个出现
+`M-x` 访问标签表           | 指定一个新的标签文件
+`M-x` 标签搜索            | 正则表达式搜索标签表中的所有文件
+`M-x` 标签查询替换         | 对所有文件运行查询替换
+`M-,`                    | 继续最后一个标签搜索或查询替换
+<!--rehype:className=shortcuts-->
+
+### 缓冲器
+
+:- | :-
+:- | :-
+`C-x` `b`   | 选择另一个缓冲区
+`C-x` `C-b` | 列出所有缓冲区
+`C-x` `k`   | 杀死一个缓冲区
+<!--rehype:className=shortcuts-->
+
+### 矩形
+
+:- | :-
+:- | :-
+`C-x` `r` `r` | 复制矩形进行注册
+`C-x` `r` `k` | 杀死矩形
+`C-x` `r` `y` | 拉长矩形
+`C-x` `r` `o` | 打开矩形，向右移动文本
+`C-x` `r` `c` | 空白矩形
+`C-x` `r` `t` | 用字符串为每一行添加前缀
+<!--rehype:className=shortcuts-->
+
+### 键盘宏
+
+:- | :-
+:- | :-
+`C-x` `(`                 | 开始定义键盘宏
+`C-x` `)`                 | 结束键盘宏定义
+`C-x` `e`                 | 执行最后定义的键盘宏
+`C-u` `C-x` `(`           | 附加到最后一个键盘宏
+`M-x` name-last-kbd-macro | 命名最后一个键盘宏
+`M-x` insert-kbd-macro    | 在缓冲区中插入 Lisp 定义
+<!--rehype:className=shortcuts-->
+
+Emacs 搜索
+------
+
+### 正则表达式（常用）
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`.` `(dot)`   | 除换行符外的任何单个字符
+`*`           | 零次或多次重复
+`+`           | 一次或多次重复
+`?`           | 零次或一次重复
+`\`           | 引用特殊字符
+`\c`          | 引用正则表达式特殊字符 c
+`\|`          | 替代（“或”）
+`\(...\)`     | 分组
+`\(:?...\)`   | 害羞的分组
+`\(:NUM...\)` | 显式编号分组
+`\n`          | 与第 n 组相同的文本
+`\b`          | 在断字时
+`\B`          | 不在断字
+
+### 正则表达式（条目）
+
+开始 | 结束 | 实体
+:- | :- | :-
+`^`   | `$`   | 行
+`\<`  | `\>`  | 单词
+`\_<` | `\_>` | 象征
+`\‘`  | `\’`  | 缓冲
+<!--rehype:className=show-header-->
+
+### 正则表达式（冲突）
+
+这些 | 其他 | class
+:- | :- | :-
+`[...]` | `[^...]` | 显式集
+`\w`    | `\W`     | 单词语法字符
+`\sc`   | `\Sc`    | 具有语法 c 的字符
+`\cc`   | `\Cc`    | 类别 c 的字符
+<!--rehype:className=show-header-->
+
+### 增量搜索
+
+:- | :-
+:- | :-
+`C-s`   | 向前搜索
+`C-r`   | 向后搜索
+`C-M-s` | 正则表达式搜索
+`C-M-r` | 反向正则表达式搜索
+`M-p`   | 选择上一个搜索字符串
+`M-n`   | 选择下一个稍后搜索字符串
+`RET`   | 退出增量搜索
+`DEL`   | 最后一个字符的撤消效果
+`C-g`   | 中止当前搜索
+<!--rehype:className=shortcuts-->
+
+再次使用 `C-s` 或 `C-r` 在任一方向重复搜索。 如果 Emacs 仍在搜索，`C-g` 只取消不匹配的部分
+
+### 查询替换
+
+:- | :-
+:- | :-
+`M-%`        | 以交互方式替换文本字符串
+`M-x` regexp | 使用正则表达式
+`SPC` / `y`  | 替换这个，继续下一个
+`,`          | 换这个，别动
+`DEL` / `n`  | 不更换就跳到下一个
+`!`          | 替换所有剩余的匹配项
+`^`          | 回到上一场比赛
+`RET`        | 退出查询替换
+`C-r`        | 进入递归编辑（C-M-c 退出）
+<!--rehype:className=shortcuts-->
+
+杂项
+----
+
+### Shell
+
+:- | :-
+:- | :-
+`M-!`       | 执行一个shell命令
+`M-&`       | 异步执行shell命令
+`M-`        | 在区域上运行 shell 命令
+`C-u` `M-`  | 通过 shell 命令过滤区域
+`M-x` shell | 在window shell中启动一个shell
+<!--rehype:className=shortcuts-->
+
+### 国际字符集
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`C-x` `RET` `l`            | 指定主要语言
+`M-x` list-input-methods   | 显示所有输入法
+`C-\`                      | 启用或禁用输入法
+`C-x` `RET` `c`            | 为下一个命令设置编码系统
+`M-x` list-coding-systems  | 显示所有编码系统
+`M-x` prefer-coding-system | 选择首选的编码系统
+<!--rehype:className=shortcuts-->
+
+### 寄存器
+
+:- | :-
+:- | :-
+`C-x` `r` `s`   | 在寄存器中保存区域
+`C-x` `r` `i`   | 将寄存器内容插入缓冲区
+`C-x` `r` `SPC` | 将点的值保存在寄存器中
+`C-x` `r` `j`   | 跳转到保存在寄存器中的点
+<!--rehype:className=shortcuts-->
+
+### 各种各样的
+
+:- | :-
+:- | :-
+`C-u` num  | 数值参数
+`M--`      | 否定论点
+`C-q` char | 带引号的插页
+<!--rehype:className=shortcuts-->
+
+### 处理 Emacs Lisp 的命令
+
+:- | :-
+:- | :-
+`C-x` `C-e`        | 评估点前的性
+`C-M-x`            | 评估电流定义
+`M-x` eval-region  | 评估区
+`M-:`              | 读取和评估 minibuffer
+`M-x` load-library | 从加载路径加载 Lisp 库
+<!--rehype:className=shortcuts-->
+
+### 简单的定制
+
+:- | :-
+:- | :-
+`M-x` `customize` | 自定义变量和面
+
+在 Emacs Lisp 中进行全局键绑定：
+
+```emacs
+(global-set-key (kbd "C-c g") ’search-forward)
+(global-set-key (kbd "M-#") ’query-replace-regexp)
+```
+<!--rehype:className=wrap-text -->
+
+### 缩写
+
+:- | :-
+:- | :-
+`C-x` `a` `g`     | 添加全局缩写
+`C-x` `a` `l`     | 添加模式本地缩写
+`C-x` `a` `i` `g` | 为这个缩写添加全局扩展
+`C-x` `a` `i` `l` | 为这个缩写添加模式本地扩展
+`C-x` `a` `e`     | 显式扩展缩写
+`M-/`             | 动态扩展前一个单词
+<!--rehype:className=shortcuts-->
+
+### 拼写检查
+
+:- | :-
+:- | :-
+`M-$`               | 检查当前单词的拼写
+`M-x` ispell 地区   | 检查区域内所有单词的拼写
+`M-x` ispell 缓冲区 | 检查整个缓冲区的拼写
+`M-x` flyspell 模式 | 切换即时拼写检查
+<!--rehype:className=shortcuts-->
+
+### 编写命令
+<!--rehype:wrap-class=col-span-2-->
+
+#### 语法
+
+```emacs
+(defun command-name (args)
+"documentation" (interactive "template")
+body)
+```
+<!--rehype:className=wrap-text -->
+
+#### 示例
+
+```emacs
+(defun this-line-to-top-of-window (line)
+    "Reposition current line to top of window.
+With prefix argument LINE, put point on LINE."
+    (interactive "P")
+    (recenter (if (null line)
+                  0
+              (prefix-numeric-value line))))
+```
+
+

docs/es6.md

@@ -0,0 +1,727 @@
+ES2015+ 备忘清单
+===
+
+快速浏览 ES2015、ES2016、ES2017、ES2018 及以后的 JavaScript 新特性
+
+常用
+---
+
+### 块范围
+<!--rehype:wrap-class=row-span-2-->
+
+#### Let
+
+```js {2,4}
+function fn () {
+  let x = 0
+  if (true) {
+    let x = 1 // 只在这个`if`里面
+  }
+}
+```
+
+#### Const
+
+```js
+const a = 1
+```
+
+`let` 是新的 `var`。 常量(`const`) 就像 `let` 一样工作，但不能重新分配。
+请参阅：[Let 和 const](https://babeljs.io/learn-es2015/#let--const)
+
+### 反引号字符串
+<!--rehype:wrap-class=row-span-2-->
+
+#### 插值
+
+```js
+const message = `Hello ${name}`
+```
+
+#### 多行字符串
+
+```js
+const str = `
+hello
+world
+`
+```
+
+模板和多行字符串。
+请参阅：[模板字符串](https://babeljs.io/learn-es2015/#template-strings)
+
+### 二进制和八进制文字
+
+```js
+let bin = 0b1010010
+let oct = 0o755
+```
+
+请参阅：[二进制和八进制文字](https://babeljs.io/learn-es2015/#binary-and-octal-literals)
+
+### 指数运算符
+
+```js {1}
+const byte = 2 ** 8
+// 同: Math.pow(2, 8)
+```
+
+### 新方法
+
+#### 新的字符串方法
+
+```js
+"hello".repeat(3)
+"hello".includes("ll")
+"hello".startsWith("he")
+"hello".padStart(8) // "   hello"
+"hello".padEnd(8) // "hello   " 
+"hello".padEnd(8, '!') // hello!!!
+"\u1E9B\u0323".normalize("NFC")
+```
+
+#### 新的数字方法
+
+```js
+Number.EPSILON
+Number.isInteger(Infinity) // false
+Number.isNaN("NaN") // false
+```
+
+#### 新的 Math 方法
+
+```js
+Math.acosh(3) // 1.762747174039086
+Math.hypot(3, 4) // 5
+Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
+```
+
+#### 新的 Array 方法
+
+```js
+// 返回一个真实的数组
+Array.from(document.querySelectorAll("*"))
+// 类似于 new Array(...)，但没有特殊的单参数行为
+Array.of(1, 2, 3)
+```
+
+请参阅: [新方法](https://babeljs.io/learn-es2015/#math--number--string--object-apis)
+
+### 类
+
+```js
+class Circle extends Shape {
+```
+
+#### 构造函数
+
+```js {1}
+  constructor (radius) {
+    this.radius = radius
+  }
+```
+
+#### 方法
+
+```js {1}
+  getArea () {
+    return Math.PI * 2 * this.radius
+  }
+```
+
+#### 调用超类方法
+
+```js {2}
+  expand (n) {
+    return super.expand(n) * Math.PI
+  }
+```
+
+#### 静态方法
+
+```js {1}
+  static createFromDiameter(diameter) {
+    return new Circle(diameter / 2)
+  }
+}
+```
+
+原型的语法糖。
+请参阅: [类](https://babeljs.io/learn-es2015/#classes)
+
+
+Promises
+--------
+
+### 做出承诺
+
+```js {1}
+new Promise((resolve, reject) => {
+  if (ok) { resolve(result) }
+  else { reject(error) }
+})
+```
+
+用于异步编程。
+请参阅：[Promises](https://babeljs.io/learn-es2015/#promises)
+
+### 使用 Promises
+
+```js {2,3}
+promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+```
+
+### 在 finally 中使用 Promise
+
+```js {4}
+promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+  .finally(() => {
+    /* 独立于成功/错误的逻辑 */
+  })
+```
+
+当承诺被履行或被拒绝时，处理程序被调用
+
+### Promise 函数
+
+```js
+Promise.all(···)
+Promise.race(···)
+Promise.reject(···)
+Promise.resolve(···)
+```
+
+### Async-await
+
+```js {2,3}
+async function run () {
+  const user = await getUser()
+  const tweets = await getTweets(user)
+  return [user, tweets]
+}
+```
+
+`async` 函数是使用函数的另一种方式。
+请参阅：[异步函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
+
+解构 Destructuring
+-------------
+
+### 解构赋值
+
+#### Arrays
+
+```js {1}
+const [first, last] = ['Nikola', 'Tesla']
+```
+
+#### Objects
+
+```js {1}
+let {title, author} = {
+  title: 'The Silkworm',
+  author: 'R. Galbraith'
+}
+```
+
+支持匹配数组和对象。
+请参阅：[解构](https://babeljs.io/learn-es2015/#destructuring)
+
+### 默认值
+
+```js
+const scores = [22, 33]
+const [math = 50, sci = 50, arts = 50] = scores
+```
+----
+```js
+// Result:
+// math === 22, sci === 33, arts === 50
+```
+
+可以在解构数组或对象时分配默认值
+
+### 函数参数
+
+```js {1}
+function greet({ name, greeting }) {
+  console.log(`${greeting}, ${name}!`)
+}
+```
+----
+```js
+greet({ name: 'Larry', greeting: 'Ahoy' })
+```
+
+对象和数组的解构也可以在函数参数中完成
+
+### 默认值
+
+```js {1}
+function greet({ name = 'Rauno' } = {}) {
+  console.log(`Hi ${name}!`);
+}
+```
+----
+```js
+greet() // Hi Rauno!
+greet({ name: 'Larry' }) // Hi Larry!
+```
+
+### 重新分配键
+
+```js {1}
+function printCoordinates({ left: x, top: y }) {
+  console.log(`x: ${x}, y: ${y}`)
+}
+```
+----
+```js
+printCoordinates({ left: 25, top: 90 })
+```
+
+此示例将 `x` 分配给 `left` 键的值
+
+### 循环
+
+```js {1}
+for (let {title, artist} of songs) {
+  ···
+}
+```
+
+赋值表达式也在循环中工作
+
+### 对象解构
+
+```js {1}
+const { id, ...detail } = song;
+```
+
+使用 `rest(...)` 运算符单独提取一些键和对象中的剩余键
+
+扩展运算符 Spread
+------
+
+### 对象扩展
+
+#### 与对象扩展
+
+```js {2}
+const options = {
+  ...defaults,
+  visible: true
+}
+```
+
+#### 没有对象扩展
+
+```js
+const options = Object.assign(
+  {}, defaults,
+  { visible: true })
+```
+
+对象扩展运算符允许您从其他对象构建新对象。
+请参阅：[对象传播](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+
+### 数组扩展
+
+#### 具有数组扩展
+
+```js {2,3}
+const users = [
+  ...admins,
+  ...editors,
+  'rstacruz'
+]
+```
+
+#### 没有数组扩展
+
+```js
+const users = admins
+  .concat(editors)
+  .concat([ 'rstacruz' ])
+```
+
+扩展运算符允许您以相同的方式构建新数组。
+请参阅：[扩展运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+
+函数 Functions
+---------
+
+### 函数参数
+<!--rehype:wrap-class=row-span-3-->
+
+#### 默认参数
+
+```js {1}
+function greet (name = 'Jerry') {
+  return `Hello ${name}`
+}
+```
+
+#### Rest 参数
+
+```js {1}
+function fn(x, ...y) {
+  // y 是一个数组
+  return x * y.length
+}
+```
+
+#### 扩展
+
+```js {1}
+fn(...[1, 2, 3])
+// 与 fn(1, 2, 3) 相同
+```
+
+Default(默认), rest, spread(扩展)。
+请参阅：[函数参数](https://babeljs.io/learn-es2015/#default--rest--spread)
+
+### 箭头函数
+<!--rehype:wrap-class=row-span-3-->
+
+#### 箭头函数
+
+```js {1}
+setTimeout(() => {
+  ···
+})
+```
+
+#### 带参数
+
+```js {1}
+readFile('text.txt', (err, data) => {
+  ...
+})
+```
+
+#### 隐式返回
+
+```js {1,4,5,6}
+arr.map(n => n*2)
+// 没有花括号 = 隐式返回
+// 同: arr.map(function (n) { return n*2 })
+arr.map(n => ({
+  result: n*2
+}))
+// 隐式返回对象需要在对象周围加上括号
+```
+
+类似函数，但保留了 `this`。
+请参阅：[箭头函数](https://babeljs.io/learn-es2015/#arrows-and-lexical-this)
+
+### 参数设置默认值
+
+```js
+function log(x, y = 'World') {
+  console.log(x, y);
+}
+
+log('Hello')          // Hello World
+log('Hello', 'China') // Hello China
+log('Hello', '')      // Hello
+```
+
+### 与解构赋值默认值结合使用
+
+```js
+function foo({x, y = 5} = {}) {
+  console.log(x, y);
+}
+
+foo() // undefined 5
+```
+
+### name 属性
+
+```js
+function foo() {}
+foo.name // "foo"
+```
+
+Objects
+-------
+
+### 速记语法
+
+```js
+module.exports = { hello, bye }
+```
+同下: 
+```js
+module.exports = {
+  hello: hello, bye: bye
+}
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 方法
+
+```js {2}
+const App = {
+  start () {
+    console.log('running')
+  }
+}
+// 同: App = { start: function () {···} }
+```
+
+请参阅：[对象文字增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### Getters and setters
+
+```js {2,5}
+const App = {
+  get closed () {
+    return this.status === 'closed'
+  },
+  set closed (value) {
+    this.status = value ? 'closed' : 'open'
+  }
+}
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 计算属性名称
+
+```js {3}
+let event = 'click'
+let handlers = {
+  [`on${event}`]: true
+}
+// 同: handlers = { 'onclick': true }
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 提取值
+
+```js {3,5}
+const fatherJS = { age: 57, name: "张三" }
+Object.values(fatherJS)
+// [57, "张三"]
+Object.entries(fatherJS)
+// [["age", 57], ["name", "张三"]]
+```
+
+Modules 模块
+-------
+
+### Imports 导入
+
+```js
+import 'helpers'
+// 又名: require('···')
+```
+---
+```js
+import Express from 'express'
+// 又名: const Express = require('···').default || require('···')
+```
+---
+```js
+import { indent } from 'helpers'
+// 又名: const indent = require('···').indent
+```
+---
+```js
+import * as Helpers from 'helpers'
+// 又名: const Helpers = require('···')
+```
+---
+```js
+import { indentSpaces as indent } from 'helpers'
+// 又名: const indent = require('···').indentSpaces
+```
+
+`import` 是新的 `require()`。
+请参阅：[Module imports](https://babeljs.io/learn-es2015/#modules)
+
+### Exports 导出
+
+```js
+export default function () { ··· }
+// 又名: module.exports.default = ···
+```
+----
+```js
+export function mymethod () { ··· }
+// 又名: module.exports.mymethod = ···
+```
+----
+```js
+export const pi = 3.14159
+// 又名: module.exports.pi = ···
+```
+
+----
+
+```js
+const firstName = 'Michael';
+const lastName = 'Jackson';
+const year = 1958;
+export { firstName, lastName, year };
+```
+
+----
+
+```js
+export * from "lib/math";
+```
+
+`export` 是新的`module.exports`。
+请参阅：[Module exports](https://babeljs.io/learn-es2015/#modules)
+
+### `as` 关键字重命名
+
+```js {2,8,12-14}
+import {
+  lastName as surname // 导入重命名
+} from './profile.js';
+
+function v1() { ... }
+function v2() { ... }
+
+export { v1 as default };
+// 等同于 export default v1;
+
+export {
+  v1 as streamV1,           // 导出重命名
+  v2 as streamV2,           // 导出重命名
+  v2 as streamLatestVersion // 导出重命名
+};
+```
+
+### 动态加载模块
+
+```js
+button.addEventListener('click', event => {
+  import('./dialogBox.js')
+    .then(dialogBox => {
+      dialogBox.open();
+    })
+    .catch(error => {
+      /* Error handling */
+    })
+});
+```
+
+[ES2020提案](https://github.com/tc39/proposal-dynamic-import) 引入 `import()` 函数
+
+### import() 允许模块路径动态生成
+
+```js
+const main = document.querySelector('main')
+
+import(`./modules/${someVariable}.js`)
+  .then(module => {
+    module.loadPageInto(main);
+  })
+  .catch(err => {
+    main.textContent = err.message;
+  });
+```
+
+### import.meta
+
+[ES2020](https://github.com/tc39/proposal-import-meta) 为 `import` 命令添加了一个元属性 `import.meta`，返回当前模块的元信息
+
+```js
+new URL('data.txt', import.meta.url)
+```
+
+Node.js 环境中，`import.meta.url`返回的总是本地路径，即 `file:URL` 协议的字符串，比如 `file:///home/user/foo.js`
+
+
+Generators
+----------
+
+### Generator 函数
+
+```js
+function* idMaker () {
+  let id = 0
+  while (true) { yield id++ }
+}
+```
+---
+```js
+let gen = idMaker()
+gen.next().value  // → 0
+gen.next().value  // → 1
+gen.next().value  // → 2
+```
+
+情况很复杂。
+请参阅：[Generators](https://babeljs.io/learn-es2015/#generators)
+
+### For..of + 迭代器(iterator)
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+let fibonacci = {
+  [Symbol.iterator]() {
+    let pre = 0, cur = 1;
+    return {
+      next() {
+        [pre, cur] = [cur, pre + cur];
+        return { done: false, value: cur }
+      }
+    }
+  }
+}
+
+for (var n of fibonacci) {
+  // 在 1000 处截断序列
+  if (n > 1000) break;
+  console.log(n);
+}
+```
+
+用于迭代生成器和数组。
+请参阅：[For..of iteration](https://babeljs.io/learn-es2015/#iterators--forof)
+
+### 与 Iterator 接口的关系
+
+```js
+var gen = {};
+gen[Symbol.iterator] = function* () {
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+[...gen] // => [1, 2, 3]
+```
+
+`Generator` 函数赋值给 `Symbol.iterator` 属性，从而使得 `gen` 对象具有了 `Iterator` 接口，可以被 `...` 运算符遍历了
+
+
+### Symbol.iterator 属性
+
+```js
+function* gen() { /* some code */ }
+var g = gen();
+
+g[Symbol.iterator]() === g // true
+```
+
+`gen` 是一个 `Generator` 函数，调用它会生成一个遍历器对象`g`。它的 `Symbol.iterator` 属性，也是一个遍历器对象生成函数，执行后返回它自己
+
+另见
+---
+
+- [Learn ES2015](https://babeljs.io/docs/en/learn/) _(babeljs.io)_
+- [ECMAScript 6 功能概述](https://github.com/lukehoban/es6features#readme) _(github.com)_
+- [ECMAScript 6 入门教程 (阮一峰)](https://es6.ruanyifeng.com/) _(ruanyifeng.com)_

docs/ffmpeg.md

@@ -0,0 +1,347 @@
+FFmpeg 备忘清单
+===
+
+本备忘清单是 [FFmpeg](https://ffmpeg.org/) 中常见视频处理操作的备忘清单
+
+FFmpeg 参考
+---
+
+### 安装
+
+Linux
+
+```
+$ apt-get install ffmpeg
+$ yum install ffmpeg
+```
+
+MacOS
+
+```bash
+$ brew install ffmpeg
+```
+
+### 示例
+
+mp4 转 avi:
+
+```bash
+$ ffmpeg -i input.mp4 output.avi
+```
+
+webm 转 mp4:
+
+```bash
+$ ffmpeg -i movie.webm movie.mp4
+```
+
+### 常用开关
+
+```bash
+-codecs   # 列出编解码器
+-c:v      # 视频编解码器(-vcodec)-'copy'复制流
+-c:a      # 音频编解码器(-acodec)
+-fs SIZE  # 限制文件大小（字节）
+```
+
+### 音频
+
+```bash
+-aq QUALITY  # 音频质量（特定于编解码器）
+-ar 44100    # 音频采样率 (Hz)
+-ac 1        # 音频通道（1=单声道，2=立体声）
+-an          # 没有音频
+-vol N       # 音量（256=正常）
+```
+
+### 比特率
+
+```bash
+-b:v 1M      # 视频比特率（1M = 1Mbit/s）
+-b:a 1M      # 音频比特率
+```
+
+#### 视频
+
+```bash
+-aspect RATIO    # 纵横比（4:3、16:9 或 1.25）
+-r RATE          # 每秒帧率
+-s WIDTHxHEIGHT  # 帧大小
+-vn              # 没有视频
+```
+
+视频编辑
+---
+<!--rehype:body-class=cols-2-->
+
+### 裁剪
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+$ ffmpeg -i <input> -filter:v "crop=640:480:100:25" <output>
+```
+<!--rehype:className=wrap-text -->
+
+通过从输入视频中复制偏移 `x=100px` `y=25px` 的相应窗口来创建 `640x480` 大小的输出视频
+
+```bash
+# 裁剪到宽度 360，高度 640
+$ ffmpeg -i input.mov -filter:v 'crop=360:640:0:0' -codec:a copy output.mov
+```
+<!--rehype:className=wrap-text -->
+
+裁剪到宽度 360，高度 640，从坐标 (10, 20) 开始
+
+```bash
+$ ffmpeg -i input.mov -filter:v 'crop=360:640:10:20' -codec:a copy output.mov
+```
+<!--rehype:className=wrap-text -->
+
+### 缩放
+
+```bash
+$ ffmpeg -i <输入> -vf scale=640:480 <输出>
+```
+<!--rehype:className=wrap-text -->
+
+### 视频帧速率
+
+```bash
+$ ffmpeg -i input.avi -r 24 output.avi
+```
+
+将输出文件的帧速率强制为 24 fps
+
+```bash
+$ ffmpeg -r 1 -i input.m2v -r 24 output.avi
+```
+
+将输入文件的帧速率（仅对原始格式有效）强制为 1 fps，将输出文件的帧速率强制为 24 fps
+
+### 剪切视频部分
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ ffmpeg -i <input> -ss 00:01:45 -t 00:02:35 -vcodec copy -acodec copy <output>
+$ ffmpeg -ss 00:00:30 -i orginalfile.mpg -t 00:00:05 -vcodec copy -acodec copy newfile.mpg
+# 从 4.5 秒开始的 5 秒长的视频
+$ ffmpeg -i in.mp4 -ss 4.5 -t 5 out.mp4
+```
+<!--rehype:className=wrap-text -->
+
+### H265 2-pass 编码
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+$ ffmpeg -y -i <input> -c:v libx265 -b:v 2600k \
+  -x265-params pass=1 \
+  -an -f mp4 /dev/null && \
+    ffmpeg -i <input> \
+        -c:v libx265 -b:v 2600k \
+        -x265-params pass=2 \
+        -c:a aac -b:a 128k output.mp4
+```
+<!--rehype:className=wrap-text -->
+
+对于 `H265 2-pass` 编码，您需要组合 `2` 个 `ffmpeg` 调用
+
+### 视频比特率设置
+
+```bash
+$ ffmpeg -i input.avi -b:v 64k -bufsize 64k output.avi
+```
+
+将输出文件的视频比特率设置为 64 kbit/s
+
+### 固定旋转
+
+```bash
+$ ffmpeg -i <input> -c copy -metadata:s:v:0 rotate=90 <output>
+```
+<!--rehype:className=wrap-text -->
+
+不要为旋转重新编码，而是简单地为旋转角度添加一个视频元数据字段
+
+### 放慢视频速度
+
+```bash
+$ ffmpeg -i in.mp4 -filter:v "setpts=4.0*PTS" out.mp4
+```
+
+使用过滤器减慢视频。 此示例将视频减慢四倍
+
+### 缩放到特定宽度
+
+```bash
+$ ffmpeg -i in.mp4 -filter:v scale="538:trunc(ow/a/2)*2" -c:a copy out.mp4
+```
+
+给定所需的视频宽度，例如 538 像素，您可以使用以下方法将视频调整为该宽度，同时保持宽高比
+
+重新包装
+---
+
+### 提取音频流
+
+```bash
+$ ffmpeg -i file.mp4 -vn -acodec copy output.aac 
+```
+<!--rehype:className=wrap-text -->
+
+将`-vn`（无视频）与 `-acodec copy` 结合起来。请注意，输出文件扩展名必须与输入文件中的音频编解码器匹配，`-acodec copy` 才能工作。
+
+### 创建缩略图
+<!--rehype:wrap-class=row-span-2-->
+
+在 10 秒时创建一个缩略图
+
+```bash
+$ ffmpeg -ss 10 -i <input file> -vframes 1 -vcodec png -an thumb.png
+```
+<!--rehype:className=wrap-text -->
+
+例如，要每 `n` 秒创建一次缩略图，请使用 `-vf fps=1/n`
+
+```bash
+$ ffmpeg -i <input file> -vf fps=1/60 thumbnails/thumb%03d.png
+```
+<!--rehype:className=wrap-text -->
+
+### 处理 id3 标签
+<!--rehype:wrap-class=row-span-2-->
+
+提取
+
+```bash
+$ ffmpeg -i file.mp3 -f ffmetadata metadata.txt
+```
+<!--rehype:className=wrap-text -->
+
+设置
+
+```bash
+$ ffmpeg -i file.mp3 -acodec copy -metadata title="<title>" -metadata artist="<artist>" -metadata album="<album>" out.mp3
+```
+<!--rehype:className=wrap-text -->
+
+更多[请查看](https://gist.github.com/eyecatchup/0757b3d8b989fe433979db2ea7d95a01)
+
+### 重新采样/转换音频
+
+```bash
+$ ffmpeg -i file.aac -acodec mp3 -ar 44100 -ab 128000 output.mp3
+```
+<!--rehype:className=wrap-text -->
+
+### 切换容器(转换类型)
+<!--rehype:wrap-class=row-span-2-->
+
+将容器从 `MKV` 更改为 `MP4`
+
+```bash
+$ ffmpeg -i file.mkv -acodec copy -vcodec copy file.mp4
+```
+<!--rehype:className=wrap-text -->
+
+要将视频从 `.mov` 更改为 `.mp4`
+
+```bash
+$ ffmpeg -i in.mov out.mp4
+```
+
+### 音视频同步
+<!--rehype:wrap-class=row-span-2-->
+
+将音频延迟 3 秒
+
+```bash
+$ ffmpeg -i input.mov -itsoffset 3 -i input.mov -map 0:v -map 1:a -codec:a copy -codec:v copy output.mov
+```
+<!--rehype:className=wrap-text -->
+
+将视频延迟 3 秒（即将音频提前 3 秒）
+
+```bash
+$ ffmpeg -i input.mov -itsoffset 3 -i input.mov -map 1:v -map 0:a -codec:a copy -codec:v copy output.mov
+```
+<!--rehype:className=wrap-text -->
+
+
+### 图片中的视频
+
+如果您有多个编号的图像 image1.jpg、image2.jpg... 像这样从它们创建一个视频
+
+```bash
+$ ffmpeg -f image2 -i image%d.jpg video.mp4
+```
+<!--rehype:className=wrap-text -->
+
+### 将视频拆分为图像
+
+```bash
+$ ffmpeg -i video.mp4 image%d.jpg
+```
+
+### 转换为 Gif
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ ffmpeg -ss 2 -t 28 -i input.mp4 -vf "fps=10,scale=1080:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 output.gif
+```
+<!--rehype:className=wrap-text -->
+
+上面有关更多信息，请参阅 [StackOverflow 问题](https://superuser.com/a/556031)
+
+```bash
+# 转换为 GIF
+$ ffmpeg -i input.mov output.gif
+# 从 GIF 转换
+$ ffmpeg -i input.gif output.mov
+# 在非 GIF 格式之间转换
+$ ffmpeg -i input.mov -codec:v copy -codec:a copy output.mp4
+```
+
+### 移除音频
+
+```bash
+$ ffmpeg -i input.mov -codec:v copy -an output.mov
+```
+<!--rehype:className=wrap-text -->
+
+### 字幕
+<!--rehype:wrap-class=col-span-2-->
+
+将字幕写入视频
+
+```bash
+$ ffmpeg -i input.mov -filter:v 'subtitles=subtitles.srt' -codec:a copy output.mov
+```
+
+将字幕写入视频，具有自定义字幕样式
+
+```bash
+$ ffmpeg -i input.mov -filter:v "subtitles=subtitles.srt:force_style='FontName=Menlo Bold,Fontsize=18'" -codec:a copy output.mov
+```
+
+### 音量
+<!--rehype:wrap-class=col-span-2-->
+
+将音量减半
+
+```bash
+$ ffmpeg -i input.mov -codec:v copy -filter:a 'volume=0.5' output.mov
+```
+
+音量加倍
+
+```bash
+$ ffmpeg -i input.mov -codec:v copy -filter:a 'volume=2' output.mov
+```
+
+另见
+---
+
+- [FFmpeg 官网地址](https://ffmpeg.org/) _(ffmpeg.org)_
+- [FFmpeg Cheat Sheet](https://lzone.de/cheat-sheet/ffmpeg) _(lzone.de)_
+- [FFmpeg Cheat Sheet](https://devhints.io/ffmpeg) _(devhints.io)_
+- [FFmpeg Cheat Sheet](https://github.com/yuanqing/ffmpeg-cheatsheet) _(github.com)_

docs/git.md

@@ -11,23 +11,29 @@ Git 备忘清单
 创建一个新的本地存储库
 
 ```shell
-$ git init [project name]
+$ git init [项目名称]
 ```
 
-克隆存储库
+克隆存储库(代码仓库)
 
 ```shell
-$ git clone git_url
+$ git clone <git_url>
 ```
 
 将存储库克隆到指定目录
 
 ```shell
-$ git clone git_url 指定目录
+$ git clone <git_url> 指定目录
+```
+
+将存储库克隆到指定目录，并指定分支
+
+```shell
+$ git clone <git_url> -b <分支名称> 指定目录
 ```
 
 ### 做出改变
-<!--rehype:wrap-class=row-span-2-->
+<!--rehype:wrap-class=row-span-3-->
 
 在工作目录中**显示**修改后的文件，为您的下一次提交暂存
 
@@ -89,8 +95,8 @@ $ git diff --staged
 $ git rebase [branch]
 ```
 
-
 ### 配置
+<!--rehype:wrap-class=row-span-2-->
 
 设置将附加到您的提交和标签的名称
 
@@ -116,7 +122,20 @@ $ git config --global color.ui auto
 $ git config --global --edit
 ```
 
+显示本地 `repo` 配置设置
+
+```shell
+$ git config --list
+```
+
+删除全局设置
+
+```bash
+$ git config --global --unset <entry-name>
+```
+
 ### 使用分支
+<!--rehype:wrap-class=row-span-3-->
 
 列出所有本地分支
 
@@ -130,25 +149,25 @@ $ git branch
 $ git branch -av
 ```
 
-切换到 my_branch，并更新工作目录
+切换到 `my_branch`，并更新工作目录
 
 ```shell
 $ git checkout my_branch
 ```
 
-创建一个名为 new_branch 的新分支
+创建一个名为 `new_branch` 的新分支
 
 ```shell
 $ git checkout -b new_branch
 ```
 
-删除名为 my_branch 的分支
+删除名为 `my_branch` 的分支
 
 ```shell
 $ git branch -d my_branch
 ```
 
-将分支 A 合并到分支 B
+将分支 `A` 合并到分支 `B`
 
 ```shell
 $ git checkout branchB
@@ -161,7 +180,31 @@ $ git merge branchA
 $ git tag my_tag
 ```
 
+从远程分支中创建并切换到本地分支
+
+```shell
+$ git checkout -b <branch-name> origin/<branch-name>
+```
+
+### 临时提交
+
+```shell
+# 保存已修改和分阶段的更改
+$ git stash
+# 列出隐藏文件更改的堆栈顺序
+$ git stash list
+# 从存储堆栈顶部编写工作
+$ git stash pop
+# 丢弃存储堆栈顶部的更改
+$ git stash drop
+# 回到某个 stash 的状态
+$ git stash apply <stash@{n}>
+# 删除所有的 stash
+$ git stash clear
+```
+
 ### 观察你的存储库
+<!--rehype:wrap-class=row-span-2-->
 
 显示当前活动分支的提交历史
 
@@ -193,7 +236,21 @@ $ git diff branchB...branchA
 $ git show [SHA]
 ```
 
+### 重构文件名
+
+```bash
+# 从工作目录中删除文件并暂存删除
+git rm <filename>
+
+# 从版本控制中删除文件但在本地保留文件
+git rm --cached <filename>
+
+# 更改文件名并准备提交
+git mv <filename-orig> <filename-renamed>
+```
+
 ### 同步
+<!--rehype:wrap-class=row-span-2-->
 
 从该 Git 远程获取所有分支
 
@@ -230,6 +287,7 @@ $ git cherry-pick [commit_id]
 ```
 
 ### 远程
+<!--rehype:wrap-class=row-span-2-->
 
 添加一个 git URL 作为别名
 
@@ -261,32 +319,6 @@ $ git remote rm [remote repo name]
 $ git remote set-url origin [git_url]
 ```
 
-### 临时提交
-
-保存已修改和分阶段的更改
-
-```shell
-$ git stash
-```
-
-列出隐藏文件更改的堆栈顺序
-
-```shell
-$ git stash list
-```
-
-从存储堆栈顶部编写工作
-
-```shell
-$ git stash pop
-```
-
-丢弃存储堆栈顶部的更改
-
-```shell
-$ git stash drop
-```
-
 ### 跟踪路径更改
 
 从项目中删除文件并暂存删除以进行提交
@@ -309,7 +341,7 @@ $ git log --stat -M
 
 ### 忽略文件
 
-```gitignore
+```gitignore showLineNumbers
 /logs/*
 # “！” 意思是不要忽视
 !logs/.gitkeep
@@ -323,6 +355,19 @@ node_modules
 
 `.gitignore` 文件指定了 Git 应该忽略的未跟踪的文件
 
+### git 配置 ssh 代理
+
+```bash
+$ cat ~/.ssh/config
+Host gitlab.com
+# 直接使用 shadowsocks 提供的 socks5 代理端口
+ProxyCommand nc -X 5 -x 127.0.0.1:1080 %h %p 
+
+Host github.com
+ProxyCommand nc -X 5 -x 127.0.0.1:1080 %h %p    
+```
+<!--rehype:className=wrap-text-->
+
 Git 技巧
 ------
 
@@ -380,7 +425,7 @@ $ git branch -vv
 $ git checkout -
 ```
 
-只获取远程分支
+只获取所有远程分支
 
 ```shell
 $ git branch -r
@@ -515,12 +560,6 @@ $ git branch --merged master | grep -v '^\*\|  master' | xargs -n 1 git branch -
 ```
 <!--rehype:className=wrap-text-->
 
-### 中文乱码的解决方案
-
-```shell
-$ git config --global core.quotepath false
-```
-
 ### 把 A 分支的某一个 commit，放到 B 分支上
 
 ```shell
@@ -528,4 +567,327 @@ $ git config --global core.quotepath false
 $ git checkout <B>
 # 将 A 分支 <hash-id> 的内容 pick 到 B 分支
 $ git cherry-pick <hash-id>
-```
+```
+
+### 回到远程仓库的状态
+
+```bash
+$ git fetch --all && git reset --hard origin/master
+```
+<!--rehype:className=wrap-text-->
+
+抛弃本地所有的修改，回到远程仓库的状态
+
+### 重设第一个 commit
+
+```bash
+$ git update-ref -d HEAD
+```
+
+把所有的改动都重新放回工作区，并**清空所有的 commit**，这样就可以重新提交第一个 `commit` 了
+
+### 查看冲突文件列表
+
+```bash
+$ git diff --name-only --diff-filter=U
+```
+
+### 展示工作区的冲突文件列表
+<!--rehype:wrap-class=row-span-2-->
+
+输出工作区和暂存区的 different (不同)。
+
+```bash
+$ git diff
+```
+
+还可以展示本地仓库中任意两个 commit 之间的文件变动：
+
+```bash
+$ git diff <commit-id> <commit-id>
+```
+
+### 展示暂存区和最近版本的不同
+
+```bash
+git diff --cached
+```
+
+### 中文乱码的解决方案
+
+```shell
+$ git config --global core.quotepath false
+```
+
+### 展示暂存区、工作区和最近版本的不同
+
+```bash
+$ git diff HEAD
+```
+
+输出工作区、暂存区 和本地最近的版本(commit)的different(不同)。
+
+### 删除已经合并到 master 的分支
+
+```bash
+$ git branch --merged master | grep -v '^\*\|  master' | xargs -n 1 git branch -d
+```
+<!--rehype:className=wrap-text-->
+
+### 关联远程分支
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+$ git branch -u origin/mybranch
+```
+
+或者在 `push` 时加上 `-u` 参数
+
+```bash
+git push origin/mybranch -u
+```
+
+关联之后，`git branch -vv` 就可以展示关联的远程分支名了, 同时推送到远程仓库直接：`git push`，不需要指定远程仓库
+
+### 查看远程分支和本地分支的对应关系
+
+```bash
+$ git remote show origin
+```
+
+### 展示当前分支的最近的 tag
+
+```bash
+$ git describe --tags --abbrev=0
+```
+
+### 查看某段代码是谁写的
+
+```bash
+$ git blame <file-name>
+```
+
+`blame` 的意思为`责怪`，你懂的。
+
+### 修改作者名
+
+```bash
+$ git commit --amend --author='Author Name <email@address.com>'
+```
+
+### 修改远程仓库的 url
+
+```bash
+$ git remote set-url origin <URL>
+```
+
+### 增加远程仓库
+
+```bash
+$ git remote add origin <remote-url>
+```
+<!--rehype:className=wrap-text-->
+
+### 列出所有远程仓库
+
+```bash
+$ git remote -v
+```
+
+### 查看两个星期内的改动
+
+```bash
+$ git whatchanged --since='2 weeks ago'
+```
+
+### 从 stash 中拿出某个文件的修改
+
+```bash
+$ git checkout <stash@{n}> -- <file-path>
+```
+<!--rehype:className=wrap-text-->
+
+### 展示所有 tracked 的文件
+
+```bash
+$ git ls-files -t
+```
+
+### 展示所有 untracked 的文件
+
+```bash
+$ git ls-files --others
+```
+
+### 展示所有忽略的文件
+
+```bash
+$ git ls-files --others -i --exclude-standard
+```
+<!--rehype:className=wrap-text-->
+
+### 把某一个分支导出成一个文件
+
+```bash
+$ git bundle create <file> <branch-name>
+```
+
+### 从包中导入分支
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+$ git clone repo.bundle <repo-dir> -b <branch-name>
+```
+<!--rehype:className=wrap-text-->
+
+新建一个分支，分支内容就是上面 `git bundle create` 命令导出的内容
+
+### 执行 rebase 之前自动 stash
+
+```bash
+$ git rebase --autostash
+```
+
+### 从远程仓库根据 ID，拉下某一状态，到本地分支
+
+```bash
+$ git fetch origin pull/<id>/head:<branch-name>
+```
+
+### 详细展示一行中的修改
+
+```bash
+$ git diff --word-diff
+```
+
+### 清除 gitignore 文件中记录的文件
+
+```bash
+$ git clean -X -f
+```
+
+### 展示忽略的文件
+
+```bash
+$ git status --ignored
+```
+
+### commit 历史中显示 Branch1 有的但是 Branch2 没有 commit
+
+```bash
+$ git log Branch1 ^Branch2
+```
+
+### 在 commit log 中显示 GPG 签名
+
+```bash
+$ git log --show-signature
+```
+
+### 新建并切换到新分支上，同时这个分支没有任何 commit
+
+```bash
+$ git checkout --orphan <branch-name>
+```
+
+相当于保存修改，但是重写 commit 历史
+
+### 展示任意分支某一文件的内容
+
+```bash
+$ git show <branch-name>:<file-name>
+```
+
+### 配置 http 和 socks 代理
+<!--rehype:wrap-class=row-span-4-->
+
+```bash
+# 查看代理
+$ git config --global http.proxy
+$ git config --global https.proxy
+$ git config --global socks.proxy
+
+# 设置代理
+# 适用于 privoxy 将 socks 协议转为 http 协议的 http 端口
+$ git config --global http.proxy http://127.0.0.1:1080
+$ git config --global https.proxy http://127.0.0.1:1080
+$ git config --global socks.proxy 127.0.0.1:1080
+
+# 取消代理
+$ git config --global --unset http.proxy
+$ git config --global --unset https.proxy
+$ git config --global --unset socks.proxy
+
+# 只对 github.com 设置代理
+$ git config --global http.https://github.com.proxy socks5://127.0.0.1:1080
+$ git config --global https.https://github.com.proxy socks5://127.0.0.1:1080
+
+# 取消 github.com 代理
+$ git config --global --unset http.https://github.com.proxy
+$ git config --global --unset https.https://github.com.proxy
+```
+
+
+### clone 最新一次提交
+
+```bash
+$ git clone --depth=1 https://github.com/user/repo.git
+```
+
+只会 `clone` 最近一次提交，将减少 `clone` 时间
+
+### 忽略某个文件的改动
+<!--rehype:wrap-class=row-span-2-->
+
+关闭 track 指定文件的改动，也就是 Git 将不会在记录这个文件的改动
+
+```bash
+git update-index --assume-unchanged path/to/file
+```
+<!--rehype:className=wrap-text-->
+
+恢复 track 指定文件的改动
+
+```bash
+git update-index --no-assume-unchanged path/to/file
+```
+<!--rehype:className=wrap-text-->
+
+### 以最后提交的顺序列出所有 Git 分支
+
+```bash
+git for-each-ref --sort=-committerdate --format='%(refname:short)' refs/heads
+```
+
+最新的放在最上面
+
+### 在 commit log 中查找相关内容
+
+```bash
+git log --all --grep='<given-text>'
+```
+
+通过 grep 查找，given-text: 所需要查找的字段
+
+### 把暂存区的指定 file 放到工作区中
+
+```bash
+git reset <file-name>
+```
+
+不添加参数，默认是 `-mixed`
+
+### 配置 SSH 协议代理
+
+```shell
+# 对于使用 git@ 协议的，可以配置 socks5 代理
+# macOS 系统编辑 ~/.ssh/config 文件，添加这几行，设置 github 代理
+Host github.com
+  ProxyCommand nc -X 5 -x 127.0.0.1:1080 %h %p
+```
+<!--rehype:className=wrap-text-->
+
+另见
+---
+
+- [最常用的 git 提示和技巧](https://github.com/git-tips/tips)

docs/golang.md

@@ -947,12 +947,12 @@ func main() {
 
 |   |    |     |     |      |    |     |   |   |
 |---|----|-----|-----|------|----|-----|---|---|
-| `+` | &  | +=  | &=  | &&   | == | !=  | ( | ) |
-| `-` | \| | -=  | \|= | \|\| | <  | <=  | [ | ] |
-| `*` | ^  | *=  | ^=  | <-   | >  | >=  | { | } |
-| `/` | << | /=  | <<= | ++   | =  | :=  | , | ; |
-| `%` | >> | %=  | >>= | --   | !  | ... | . | : |
-|   | &^ | &^= |     |      |    |     |   |   |
+| `+` | `&`  | `+=`  | `&=`  | `&&`   | `==` | `!=`  | `(` | `)` |
+| `-` | `\|` | `-=`  | `\|=` | `\|\|` | `<`  | `<=`  | `[` | `]` |
+| `*` | `^`  | `*=`  | `^=`  | `<-`   | `>`  | `>=`  | `{` | `}` |
+| `/` | `<<` | `/=`  | `<<=` | `++`   | `=`  | `:=`  | `,` | `;` |
+| `%` | `>>` | `%=`  | `>>=` | `--`   | `!`  | `...` | `.` | `:` |
+|     | `&^` | `&^=` |       |        |      |       |     |     |
 
 另见
 --------

docs/iso-639-1.md

@@ -0,0 +1,237 @@
+ISO 639-1 Language Code  备忘清单
+===
+
+这是一个符合 ISO 639-1 标准的 ISO 语言代码列表，它为多语言网站提供参考。
+
+
+入门
+----
+
+### 介绍
+<!--rehype:style=display:none;&wrap-style=padding-top:0;&wrap-class=col-span-3-->
+
+- [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) 是用于对语言进行分类的标准化命名法
+- [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) 代码涵盖世界主要语言
+- 这些代码是用于指示语言的有用的国际和正式速记
+- 两个字母的代码
+- 用于多语言网站，即国际化 (`i18n`)
+- [i18n](https://en.wikipedia.org/wiki/Internationalization_and_localization) 语言代码
+<!--rehype:className=style-round-->
+
+ISO 639-1 代码列表
+----
+
+### 完整代码
+<!--rehype:wrap-class=col-span-3-->
+
+639-1 代码 | ISO 语言(中文)名称 | ISO 语言名称   | 本地名称 (地名) 
+:-|:-|:-|:-
+`aa` | 阿法尔语       | Afar                | Afaraf
+`ab` | 阿布哈兹语      | Abkhaz              | аҧсуа бызшәа
+`ae` | 阿维斯陀语      | Avestan             | avesta
+`af` | 南非語         | Afrikaans           | Afrikaans
+`ak` | 阿坎语         | Akan                | Akan
+`am` | 阿姆哈拉语      | Amharic             | አማርኛ
+`an` | 阿拉贡语      | Aragonese           | aragonés
+`ar` | 阿拉伯语      | Arabic              | اللغة العربية
+`as` | 阿萨姆语      | Assamese            | অসমীয়া
+`av` | 阿瓦尔语      | Avaric              | авар мацӀ
+`ay` | 艾马拉语      | Aymara              | aymar aru
+`az` | 阿塞拜疆语      | Azerbaijani         | azərbaycan dili
+`ba` | 巴什基尔语      | Bashkir             | башҡорт теле
+`be` | 白俄罗斯语      | Belarusian          | беларуская мова
+`bg` | 保加利亚语      | Bulgarian           | български език
+`bh` | 比哈尔语       | Bihari              | भोजपुरी
+`bi` | 比斯拉马语      | Bislama             | Bislama
+`bm` | 班巴拉语       | Bambara             | bamanankan
+`bn` | 孟加拉语       | Bengali             | বাংলা
+`bo` | 藏语         | Tibetan             | བོད་ཡིག
+`br` | 布列塔尼语      | Breton              | brezhoneg
+`bs` | 波斯尼亚语      | Bosnian             | bosanski jezik
+`ca` | 加泰隆语      | Catalan             | Català
+`ce` | 车臣语      | Chechen             | нохчийн мотт
+`ch` | 查莫罗语      | Chamorro            | Chamoru
+`co` | 科西嘉语      | Corsican            | corsu
+`cr` | 克里语      | Cree                | ᓀᐦᐃᔭᐍᐏᐣ
+`cs` | 捷克语      | Czech               | čeština
+`cu` | 古教会斯拉夫语      | Old Church Slavonic | ѩзыкъ словѣньскъ
+`cv` | 楚瓦什语      | Chuvash             | чӑваш чӗлхи
+`cy` | 威尔士语      | Welsh               | Cymraeg
+`da` | 丹麦语      | Danish              | dansk
+`de` | 德语      | German              | Deutsch
+`dv` | 迪维西语      | Divehi              | Dhivehi
+`dz` | 不丹语      | Dzongkha            | རྫོང་ཁ
+`ee` | 埃维语      | Ewe                 | Eʋegbe
+`el` | 现代希腊语      | Greek               | Ελληνικά
+`en` | 英语      | English             | English
+`eo` | 世界语      | Esperanto           | Esperanto
+`es` | 西班牙语      | Spanish             | Español
+`et` | 爱沙尼亚语      | Estonian            | eesti
+`eu` | 巴斯克语      | Basque              | euskara
+`fa` | 波斯语      | Persian             | فارسی
+`ff` | 富拉语      | Fula                | Fulfulde
+`fi` | 芬兰语      | Finnish             | suomi
+`fj` | 斐济语      | Fijian              | Vakaviti
+`fo` | 法罗语      | Faroese             | føroyskt
+`fr` | 法语      | French              | Français
+`fy` | 弗里西亚语      | Western Frisian     | Frysk
+`ga` | 爱尔兰语      | Irish               | Gaeilge
+`gd` | 苏格兰盖尔语      | Scottish Gaelic     | Gàidhlig
+`gl` | 加利西亚语      | Galician            | galego
+`gn` | 瓜拉尼语      | Guarani            | avañe'ẽ
+`gu` | 古吉拉特语      | Gujarati            | ગુજરાતી
+`gv` | 马恩岛语      | Manx                | Gaelg
+`ha` | 豪萨语      | Hausa               | هَوُسَ
+`he` | 希伯来语      | Hebrew              | עברית
+`hi` | 印地语      | Hindi               | हिन्दी
+`ho` | 希里莫图语      | Hiri Motu           | Hiri Motu
+`hr` | 克罗地亚语      | Croatian            | Hrvatski
+`ht` | 海地克里奥尔语      | Haitian             | Kreyòl ayisyen
+`hu` | 匈牙利语      | Hungarian           | magyar
+`hy` | 亚美尼亚语      | Armenian            | Հայերեն
+`hz` | 赫雷罗语      | Herero              | Otjiherero
+`ia` | 因特语      | Interlingua         | Interlingua
+`id` | 印尼语      | Indonesian          | Bahasa Indonesia
+`ie` | 西方国际语      | Interlingue         | Interlingue
+`ig` | 伊博语      | Igbo                | Asụsụ Igbo
+`ii` | 四川彝语（诺苏语）      | Nuosu               | ꆈꌠ꒿ Nuosuhxop
+`ik` | 伊努皮克语      | Inupiaq             | Iñupiaq
+`io` | 伊多语      | Ido                 | Ido
+`is` | 冰岛语      | Icelandic           | Íslenska
+`it` | 意大利语      | Italian             | Italiano
+`iu` | 因纽特语      | Inuktitut           | ᐃᓄᒃᑎᑐᑦ
+`ja` | 日语      | Japanese            | 日本語
+`jv` | 爪哇语      | Javanese            | basa Jawa
+`ka` | 格鲁吉亚语      | Georgian            | ქართული
+`kg` | 刚果语      | Kongo               | Kikongo
+`ki` | 基库尤语      | Kikuyu              | Gĩkũyũ
+`kj` | 宽亚玛语      | Kwanyama            | Kuanyama
+`kk` | 哈萨克语      | Kazakh              | қазақ тілі
+`kl` | 格陵兰语      | Kalaallisut         | kalaallisut
+`km` | 高棉语      | Khmer               | ខេមរភាសា
+`kn` | 卡纳达语      | Kannada             | ಕನ್ನಡ
+`ko` | 朝鲜语、韩语      | Korean              | 한국어
+`kr` | 卡努里语      | Kanuri              | Kanuri
+`ks` | 克什米尔语      | Kashmiri            | कश्मीरी
+`ku` | 库尔德语      | Kurdish             | Kurdî
+`kv` | 科米语      | Komi                | коми кыв
+`kw` | 康沃尔语      | Cornish             | Kernewek
+`ky` | 吉尔吉斯语      | Kyrgyz              | Кыргызча
+`la` | 拉丁语      | Latin               | latine
+`lb` | 卢森堡语      | Luxembourgish       | Lëtzebuergesch
+`lg` | 卢干达语      | Ganda               | Luganda
+`li` | 林堡语       | Limburgish          | Limburgs
+`ln` | 林加拉语       | Lingala             | Lingála
+`lo` | 老挝语       | Lao                 | ພາສາ
+`lt` | 立陶宛语       | Lithuanian          | lietuvių kalba
+`lu` | 卢巴语       | Luba-Katanga        | Tshiluba
+`lv` | 拉脱维亚语       | Latvian             | latviešu valoda
+`mg` | 马达加斯加语       | Malagasy            | fiteny malagasy
+`mh` | 马绍尔语       | Marshallese         | Kajin M̧ajeļ
+`mi` | 毛利语       | Māori               | te reo Māori
+`mk` | 马其顿语       | Macedonian          | македонски јазик
+`ml` | 马拉雅拉姆语       | Malayalam           | മലയാളം
+`mn` | 蒙古语       | Mongolian           | Монгол хэл
+`mo` | 摩尔达维亚语   | Moldovan           | Лимба молдовеняскэ
+`mr` | 马拉地语       | Marathi             | मराठी
+`ms` | 马来语       | Malay               | Bahasa Malaysia
+`mt` | 马耳他语       | Maltese             | Malti
+`my` | 缅甸语       | Burmese             | ဗမာစာ
+`na` | 瑙鲁语       | Nauru               | Ekakairũ Naoero
+`nb` | 书面挪威语       | Norwegian Bokmål    | Norsk bokmål
+`nd` | 北恩德贝莱语       | Northern Ndebele    | isiNdebele
+`ne` | 尼泊尔语       | Nepali              | नेपाली
+`ng` | 恩敦加语       | Ndonga              | Owambo
+`nl` | 荷兰语       | Dutch               | Nederlands
+`nn` | 新挪威语       | Norwegian Nynorsk   | Norsk nynorsk
+`no` | 挪威语       | Norwegian           | Norsk
+`nr` | 南恩德贝莱语       | Southern Ndebele    | isiNdebele
+`nv` | 纳瓦霍语       | Navajo              | Diné bizaad
+`ny` | 尼扬贾语       | Chichewa            | chiCheŵa
+`oc` | 奥克语       | Occitan             | occitan
+`oj` | 奥杰布瓦语       | Ojibwe              | ᐊᓂᔑᓈᐯᒧᐎᓐ
+`om` | 奥罗莫语       | Oromo               | Afaan Oromoo
+`or` | 奥里亚语       | Oriya               | ଓଡ଼ିଆ
+`os` | 奥塞梯语       | Ossetian            | ирон æвзаг
+`pa` | 旁遮普语       | Panjabi             | ਪੰਜਾਬੀ
+`pi` | 巴利语       | Pāli                | पाऴि
+`pl` | 波兰语       | Polish              | Polski
+`ps` | 普什图语       | Pashto              | پښتو
+`pt` | 葡萄牙语       | Portuguese          | Português
+`qu` | 克丘亚语       | Quechua             | Runa Simi
+`rm` | 罗曼什语       | Romansh             | rumantsch grischun
+`rn` | 基隆迪语       | Kirundi             | Ikirundi
+`ro` | 罗马尼亚语       | Romanian            | Română
+`ru` | 俄语       | Russian             | Русский
+`rw` | 卢旺达语       | Kinyarwanda         | Ikinyarwanda
+`sa` | 梵语       | Sanskrit            | संस्कृतम्
+`sc` | 撒丁语       | Sardinian           | sardu
+`sd` | 信德语       | Sindhi              | सिन्धी
+`se` | 北萨米语      | Northern Sami       | Davvisámegiella
+`sg` | 桑戈语      | Sango               | yângâ tî sängö
+`sh` | 塞尔维亚-克罗地亚语      | Serbo-Croatian                   | Српскохрватски језик
+`si` | 僧伽罗语      | Sinhala             | සිංහල
+`sk` | 斯洛伐克语      | Slovak              | slovenčina
+`sl` | 斯洛文尼亚语      | Slovenian           | slovenščina
+`sm` | 萨摩亚语      | -                   | -
+`sn` | 修纳语      | Shona               | chiShona
+`so` | 索马里语      | Somali              | Soomaaliga
+`sq` | 阿尔巴尼亚语      | Albanian            | Shqip
+`sr` | 塞尔维亚语      | Serbian             | српски језик
+`ss` | 斯威士语      | Swati               | SiSwati
+`st` | 塞索托语      | Southern Sotho      | Sesotho
+`su` | 巽他语      | Sundanese           | Basa Sunda
+`sv` | 瑞典语      | Swedish             | Svenska
+`sw` | 斯瓦希里语      | Swahili             | Kiswahili
+`ta` | 泰米尔语      | Tamil               | தமிழ்
+`te` | 泰卢固语      | Telugu              | తెలుగు
+`tg` | 塔吉克语      | Tajik               | тоҷикӣ
+`th` | 泰语      | Thai                | ไทย
+`ti` | 提格雷尼亚语      | Tigrinya            | ትግርኛ
+`tk` | 土库曼语      | Turkmen             | Türkmen
+`tl` | 他加禄语      | Tagalog             | Wikang Tagalog
+`tn` | 茨瓦纳语      | Tswana              | Setswana
+`to` | 汤加语      | Tonga               | faka Tonga
+`tr` | 土耳其语      | Turkish             | Türkçe
+`ts` | 宗加语      | Tsonga              | Xitsonga
+`tt` | 塔塔尔语      | Tatar               | татар теле
+`tw` | 特威语      | Twi                 | Twi
+`ty` | 塔希提语      | Tahitian            | Reo Tahiti
+`ug` | 维吾尔语      | Uyghur              | ئۇيغۇرچە‎
+`uk` | 乌克兰语      | Ukrainian           | Українська
+`ur` | 乌尔都语      | Urdu                | اردو
+`uz` | 乌兹别克语      | Uzbek               | Ўзбек
+`ve` | 文达语      | Venda               | Tshivenḓa
+`vi` | 越南语      | Vietnamese          | Tiếng Việt
+`vo` | 沃拉普克语      | Volapük             | Volapük
+`wa` | 瓦隆语      | Walloon             | walon
+`wo` | 沃洛夫语      | Wolof               | Wollof
+`xh` | 科萨语      | Xhosa               | isiXhosa
+`yi` | 依地语      | Yiddish             | ייִדיש
+`yo` | 约鲁巴语      | Yoruba              | Yorùbá
+`za` | 壮语      | Zhuang              | Saɯ cueŋƅ
+`zh` | 汉语（中文）      | Chinese             | 中文
+`zu` | 祖鲁语      | Zulu                | isiZulu
+<!--rehype:className=show-header-->
+
+### SO 639-1 新增了以下语言
+<!--rehype:wrap-class=col-span-3-->
+
+ISO 639-1 | ISO 639-2 | 名称 | 更改日期 | 更改类型 | 曾用代码
+:-|:-|:-|:-|:-|:-
+io | ido | 伊多语 | 2002年1月15日 | 新增 | art
+wa | wln | 瓦隆语 | 2002年1月29日 | 新增 | roa
+li | lim | 林堡语 | 2002年8月2日 | 新增 | gem
+ii | iii | 四川省彝语(诺苏语) | 2002年10月14日 | 新增 | -
+an | arg | 阿拉贡语 | 2002年12月23日 | 新增 | roa
+ht | hat | 海地克里奥尔语 | 2003年2月26日 | 新增 | cpf
+<!--rehype:className=show-header-->
+
+自 [RFC 3066](https://tools.ietf.org/html/rfc3066) 出版后，ISO 639-1 新增了以上语言
+
+另见
+---
+<!--rehype:wrap-class=col-span-3-->
+
+- [国际化与本地化](https://zh.wikipedia.org/wiki/国际化与本地化) _(wikipedia.org)_
+- [ISO_639-1](https://zh.wikipedia.org/wiki/ISO_639-1) _(wikipedia.org)_

docs/java.md

@@ -0,0 +1,774 @@
+Java 备忘清单
+===
+
+该备忘单是针对 Java 初学者的速成课程，有助于复习 Java 语言的基本语法。
+
+入门
+--------
+
+### Hello.java
+<!--rehype:wrap-class=row-span-2-->
+
+```java
+public class Hello {
+  // 主要方法
+  public static void main(String[] args)
+  {
+    // 输出: Hello, world!
+    System.out.println("Hello, world!");
+  }
+}
+```
+
+编译和运行
+
+```shell
+$ javac Hello.java
+$ java Hello
+Hello, world!
+```
+
+### 变量 Variables
+
+```java
+int num = 5;
+float floatNum = 5.99f;
+char letter = 'D';
+boolean bool = true;
+String site = "quickref.me";
+```
+
+### 原始数据类型
+<!--rehype:wrap-class=row-span-2-->
+
+| 数据类型 | 大小   | 默认 | 范围               |
+|-----------|--------|---------|---------------------|
+| `byte`    | 1 byte | 0       | -128 ^to^ 127       |
+| `short`   | 2 byte | 0       | -2^15^ ^to^ 2^15^-1 |
+| `int`     | 4 byte | 0       | -2^31^ ^to^ 2^31^-1 |
+| `long`    | 8 byte | 0       | -2^63^ ^to^ 2^63^-1 |
+| `float`   | 4 byte | 0.0f    | _N/A_               |
+| `double`  | 8 byte | 0.0d    | _N/A_               |
+| `char`    | 2 byte | \\u0000 | 0 ^to^ 65535        |
+| `boolean` | _N/A_  | false   | true / false        |
+<!--rehype:className=show-header-->
+
+### 字符串 Strings
+
+```java
+String first = "John";
+String last = "Doe";
+String name = first + " " + last;
+System.out.println(name);
+```
+
+查看: [Strings](#java-字符串)
+
+### 循环 Loops
+
+```java
+String word = "QuickRef";
+for (char c: word.toCharArray()) {
+  System.out.print(c + "-");
+}
+// 输出: Q-u-i-c-k-R-e-f-
+```
+查看: [Loops](#java-循环)
+
+### 数组 Arrays
+
+```java
+char[] chars = new char[10];
+chars[0] = 'a'
+chars[1] = 'b'
+String[] letters = {"A", "B", "C"};
+int[] mylist = {100, 200};
+boolean[] answers = {true, false};
+```
+查看: [Arrays](#java-数组)
+
+### Swap
+
+```java
+int a = 1;
+int b = 2;
+System.out.println(a + " " + b); // 1 2
+int temp = a;
+a = b;
+b = temp;
+System.out.println(a + " " + b); // 2 1
+```
+
+### Type Casting
+
+```java
+// Widening
+// byte<short<int<long<float<double
+int i = 10;
+long l = i;               // 10
+// Narrowing 
+double d = 10.02;
+long l = (long)d;         // 10
+String.valueOf(10);       // "10"
+Integer.parseInt("10");   // 10
+Double.parseDouble("10"); // 10.0
+```
+
+### 条件语句 Conditionals
+
+```java
+int j = 10;
+if (j == 10) {
+  System.out.println("I get printed");
+} else if (j > 10) {
+  System.out.println("I don't");
+} else {
+  System.out.println("I also don't");
+}
+```
+
+查看: [Conditionals](#java-conditionals)
+
+### 用户输入
+```java
+Scanner in = new Scanner(System.in);
+String str = in.nextLine();
+System.out.println(str);
+int num = in.nextInt();
+System.out.println(num);
+```
+
+Java 字符串
+-------
+
+### 基本的
+
+```java
+String str1 = "value"; 
+String str2 = new String("value");
+String str3 = String.valueOf(123);
+```
+
+### 字符串连接
+
+```java
+String s = 3 + "str" + 3;     // 3str3
+String s = 3 + 3 + "str";     // 6str
+String s = "3" + 3 + "str";   // 33str
+String s = "3" + "3" + "23";  // 3323
+String s = "" + 3 + 3 + "23"; // 3323
+String s = 3 + 3 + 23;        // 29
+```
+
+### 字符串生成器
+<!--rehype:wrap-class=row-span-3-->
+
+```java
+StringBuilder sb = new StringBuilder(10);
+```
+
+---
+
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+|   |   |   |   |   |   |   |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.append("Reference");
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| R | e | f | e | r | e | n | c | e |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.delete(3, 9);
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| R | e | f |   |   |   |   |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.insert(0, "My ");
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| M | y |   | R | e | f |   |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.append("!");
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| M | y |   | R | e | f | ! |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+
+### 比较
+
+```java
+String s1 = new String("QuickRef"); 
+String s2 = new String("QuickRef"); 
+s1 == s2          // false
+s1.equals(s2)     // true
+"AB".equalsIgnoreCase("ab")  // true
+```
+
+### 操纵
+
+```java
+String str = "Abcd";
+str.toUpperCase();     // ABCD
+str.toLowerCase();     // abcd
+str.concat("#");       // Abcd#
+str.replace("b", "-"); // A-cd
+"  abc ".trim();       // abc
+"ab".toCharArray();    // {'a', 'b'}
+```
+
+### 信息
+
+```java
+String str = "abcd";
+str.charAt(2);       // c
+str.indexOf("a")     // 0
+str.indexOf("z")     // -1
+str.length();        // 4
+str.toString();      // abcd
+str.substring(2);    // cd
+str.substring(2,3);  // c
+str.contains("c");   // true
+str.endsWith("d");   // true
+str.startsWith("a"); // true
+str.isEmpty();       // false
+```
+
+### 不可变
+
+```java
+String str = "hello";
+str.concat("world");
+// 输出: hello
+System.out.println(str);
+```
+
+---
+
+```java
+String str = "hello";
+String concat = str.concat("world");
+// 输出: helloworld
+System.out.println(concat);
+```
+
+一旦创建就不能修改，任何修改都会创建一个新的String
+
+Java 数组
+-------
+
+### 申明 Declare
+
+```java
+int[] a1;
+int[] a2 = {1, 2, 3};
+int[] a3 = new int[]{1, 2, 3};
+int[] a4 = new int[3];
+a4[0] = 1;
+a4[2] = 2;
+a4[3] = 3;
+```
+
+### 修改 Modify
+
+```java
+int[] a = {1, 2, 3};
+System.out.println(a[0]); // 1
+a[0] = 9;
+System.out.println(a[0]); // 9
+System.out.println(a.length); // 3
+```
+
+### 循环 (读 & 写)
+
+```java
+int[] arr = {1, 2, 3};
+for (int i=0; i < arr.length; i++) {
+    arr[i] = arr[i] * 2;
+    System.out.print(arr[i] + " ");
+}
+// 输出: 2 4 6
+```
+
+### Loop (Read)
+
+```java
+String[] arr = {"a", "b", "c"};
+for (int a: arr) {
+    System.out.print(a + " ");
+}
+// 输出: a b c 
+```
+
+### Multidimensional Arrays
+
+```java
+int[][] matrix = { {1, 2, 3}, {4, 5} };
+int x = matrix[1][0];  // 4
+// [[1, 2, 3], [4, 5]]
+Arrays.deepToString(matrix)
+for (int i = 0; i < a.length; ++i) {
+  for(int j = 0; j < a[i].length; ++j) {
+    System.out.println(a[i][j]);
+  }
+}
+// 输出: 1 2 3 4 5 6 7 
+```
+
+### Sort
+
+```java
+char[] chars = {'b', 'a', 'c'};
+Arrays.sort(chars);
+// [a, b, c]
+Arrays.toString(chars);
+```
+
+Java 条件语句
+-----------
+
+### 运算符
+<!--rehype:wrap-class=row-span-3-->
+
+- `+` _(加法运算符(也用于字符串连接))_
+- `-` _(减法运算符)_
+- `*` _(乘法运算符)_
+- `/` _(分区运算符)_
+- `%` _(余数运算符)_
+- `=` _(简单赋值运算符)_
+- `++` _(增量运算符；将值增加 1)_
+- `--` _(递减运算符；将值减 1)_
+- `!` _(逻辑补码运算符；反转布尔值)_
+<!--rehype:className=style-round-->
+
+----
+
+- `==` _(等于)_
+- `!=` _(不等于)_
+- `>` _(比...更棒)_
+- `>=` _(大于或等于)_
+- `<` _(少于)_
+- `<=` _(小于或等于)_
+<!--rehype:className=cols-2 style-round-->
+
+----
+
+- `&&` _条件与_
+- `||` _条件或_
+- [?:](#三元运算符) _三元(if-then-else 语句的简写)_
+<!--rehype:className=style-round-->
+
+----
+
+- `instanceof` _(将对象与指定类型进行比较)_
+<!--rehype:className=style-round-->
+
+----
+
+- `~` _(一元按位补码)_
+- `<<` _(签名左移)_
+- `>>` _(有符号右移)_
+- `>>>` _(无符号右移)_
+- `&` _(按位与)_
+- `^` _(按位异或)_
+- `|` _(按位包含 OR)_
+<!--rehype:className=cols-2 style-round-->
+
+### If else
+
+```java
+int k = 15;
+if (k > 20) {
+  System.out.println(1);
+} else if (k > 10) {
+  System.out.println(2);
+} else {
+  System.out.println(3);
+}
+```
+
+### Switch
+<!--rehype:wrap-class=row-span-2-->
+
+```java
+int month = 3;
+String str;
+switch (month) {
+  case 1:
+    str = "January";
+    break;
+  case 2:
+    str = "February";
+    break;
+  case 3:
+    str = "March";
+    break;
+  default:
+    str = "Some other month";
+    break;
+}
+// 输出: Result March
+System.out.println("Result " + str);
+```
+
+### 三元运算符
+
+```java
+int a = 10;
+int b = 20;
+int max = (a > b) ? a : b;
+// 输出: 20
+System.out.println(max);
+```
+
+Java 循环
+----
+
+### For 循环
+
+```java
+for (int i = 0; i < 10; i++) {
+  System.out.print(i);
+}
+// 输出: 0123456789
+```
+
+------
+
+```java
+for (int i = 0,j = 0; i < 3; i++,j--) {
+  System.out.print(j + "|" + i + " ");
+}
+// 输出: 0|0 -1|1 -2|2
+```
+
+### 增强的 For 循环
+
+```java
+int[] numbers = {1,2,3,4,5};
+for (int number: numbers) {
+  System.out.print(number);
+}
+// 输出: 12345
+```
+
+用于循环数组或列表
+
+### While 循环
+
+```java
+int count = 0;
+while (count < 5) {
+  System.out.print(count);
+  count++;
+}
+// 输出: 01234
+```
+
+### Do While 循环
+
+```java
+int count = 0;
+do {
+  System.out.print(count);
+  count++;
+} while (count < 5);
+// 输出: 01234
+```
+
+### 继续声明
+
+```java
+for (int i = 0; i < 5; i++) {
+  if (i == 3) {
+    continue;
+  }
+  System.out.print(i);
+}
+// 输出: 01245
+```
+
+### 中断语句
+
+```java
+for (int i = 0; i < 5; i++) {
+  System.out.print(i);
+  if (i == 3) {
+    break;
+  }
+}
+// 输出: 0123
+```
+
+Java 框架搜集
+--------------------
+
+### Java 搜集
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+搜集 | Interface   | 有序 | 已排序 | 线程安全 | 复制 | Nullable
+:-|:-|:-|:-|:-|:-|:-
+[ArrayList](https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html)                                    | List        | Y       | _N_    | _N_         | Y         | Y                  
+[Vector](https://docs.oracle.com/javase/8/docs/api/java/util/Vector.html)                                          | List        | Y       | _N_    | Y           | Y         | Y                  
+[LinkedList](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedList.html)                                  | List, Deque | Y       | _N_    | _N_         | Y         | Y                  
+[CopyOnWriteArrayList](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/CopyOnWriteArrayList.html)   | List        | Y       | _N_    | Y           | Y         | Y                  
+[HashSet](https://docs.oracle.com/javase/8/docs/api/java/util/HashSet.html)                                        | Set         | _N_     | _N_    | _N_         | _N_       | One `null`         
+[LinkedHashSet](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedHashSet.html)                            | Set         | Y       | _N_    | _N_         | _N_       | One `null`         
+[TreeSet](https://docs.oracle.com/javase/8/docs/api/java/util/TreeSet.html)                                        | Set         | Y       | Y      | _N_         | _N_       | _N_                
+[CopyOnWriteArraySet](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/CopyOnWriteArraySet.html)     | Set         | Y       | _N_    | Y           | _N_       | One `null`         
+[ConcurrentSkipListSet](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentSkipListSet.html) | Set         | Y       | Y      | Y           | _N_       | _N_                
+[HashMap](https://docs.oracle.com/javase/8/docs/api/java/util/HashMap.html)                                        | Map         | _N_     | _N_    | _N_         | _N (key)_ | One `null` _(key)_ 
+[HashTable](https://docs.oracle.com/javase/8/docs/api/java/util/Hashtable.html)                                    | Map         | _N_     | _N_    | Y           | _N (key)_ | _N (key)_          
+[LinkedHashMap](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedHashMap.html)                            | Map         | Y       | _N_    | _N_         | _N (key)_ | One `null` _(key)_ 
+[TreeMap](https://docs.oracle.com/javase/8/docs/api/java/util/TreeMap.html)                                        | Map         | Y       | Y      | _N_         | _N (key)_ | _N (key)_          
+[ConcurrentHashMap](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentHashMap.html)         | Map         | _N_     | _N_    | Y           | _N (key)_ | _N_                
+[ConcurrentSkipListMap](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentSkipListMap.html) | Map         | Y       | Y      | Y           | _N (key)_ | _N_                
+[ArrayDeque](https://docs.oracle.com/javase/8/docs/api/java/util/ArrayDeque.html)                                  | Deque       | Y       | _N_    | _N_         | Y         | _N_                
+[PriorityQueue](https://docs.oracle.com/javase/8/docs/api/java/util/PriorityQueue.html)                            | Queue       | Y       | _N_    | _N_         | Y         | _N_                
+[ConcurrentLinkedQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentLinkedQueue.html) | Queue       | Y       | _N_    | Y           | Y         | _N_                
+[ConcurrentLinkedDeque](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentLinkedDeque.html) | Deque       | Y       | _N_    | Y           | Y         | _N_                
+[ArrayBlockingQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ArrayBlockingQueue.html)       | Queue       | Y       | _N_    | Y           | Y         | _N_                
+[LinkedBlockingDeque](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/LinkedBlockingDeque.html)     | Deque       | Y       | _N_    | Y           | Y         | _N_                
+[PriorityBlockingQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/PriorityBlockingQueue.html) | Queue       | Y       | _N_    | Y           | Y         | _N_                
+<!--rehype:className=show-header-->
+
+### ArrayList
+
+```java
+List<Integer> nums = new ArrayList<>();
+// 添加
+nums.add(2);
+nums.add(5);
+nums.add(8);
+// 检索
+System.out.println(nums.get(0));
+// 为循环迭代编制索引
+for (int i = 0; i < nums.size(); i++) {
+    System.out.println(nums.get(i));
+}
+nums.remove(nums.size() - 1);
+nums.remove(0); // 非常慢
+for (Integer value : nums) {
+    System.out.println(value);
+}
+```
+
+### HashMap
+
+```java
+Map<Integer, String> m = new HashMap<>();
+m.put(5, "Five");
+m.put(8, "Eight");
+m.put(6, "Six");
+m.put(4, "Four");
+m.put(2, "Two");
+// 检索
+System.out.println(m.get(6));
+// Lambda forEach
+m.forEach((key, value) -> {
+    String msg = key + ": " + value;
+    System.out.println(msg);
+});
+```
+
+### HashSet
+
+```java
+Set<String> set = new HashSet<>();
+if (set.isEmpty()) {
+    System.out.println("Empty!");
+}
+set.add("dog");
+set.add("cat");
+set.add("mouse");
+set.add("snake");
+set.add("bear");
+if (set.contains("cat")) {
+    System.out.println("Contains cat");
+}
+set.remove("cat");
+for (String element : set) {
+    System.out.println(element);
+}
+```
+
+### ArrayDeque
+
+```java
+Deque<String> a = new ArrayDeque<>();
+// 使用 add()
+a.add("Dog");
+// 使用 addFirst()
+a.addFirst("Cat");
+// 使用 addLast()
+a.addLast("Horse");
+// [Cat, Dog, Horse]
+System.out.println(a);
+// 访问元素
+System.out.println(a.peek());
+// 移除元素
+System.out.println(a.pop());
+```
+
+杂项 Misc
+----
+
+### 访问修饰符
+<!--rehype:wrap-class=col-span-2-->
+
+| 修饰符    | Class | Package | Subclass | World |
+|-------------|-------|---------|----------|-------|
+| public      | Y     | Y       | Y        | Y     |
+| protected   | Y     | Y       | Y        | _N_   |
+| no modifier | Y     | Y       | _N_      | _N_   |
+| private     | Y     | _N_     | _N_      | _N_   |
+<!--rehype:className=show-header-->
+
+### 常用表达
+
+```java
+String text = "I am learning Java";
+// 删除所有空格
+text.replaceAll("\\s+", "");
+// 拆分字符串
+text.split("\\|");
+text.split(Pattern.quote("|"));
+```
+
+查看: [Regex in java](./regex.md#java-中的正则表达式)
+
+### 注释 Comment
+
+```java
+// 我是单行注释！
+ 
+/*
+而我是一个
+多行注释！
+*/
+/**
+  * 这个
+  * 是
+  * 文档
+  * 注释
+ */
+```
+
+### 关键字
+<!--rehype:wrap-class=col-span-2-->
+
+- abstract
+- continue
+- for
+- new
+- switch
+- assert
+- default
+- goto
+- package
+- synchronized
+- boolean
+- do
+- if
+- private
+- this
+- break
+- double
+- implements
+- protected
+- throw
+- byte
+- else
+- import
+- public
+- throws
+- case
+- enum
+- instanceof
+- return
+- transient
+- catch
+- extends
+- int
+- short
+- try
+- char
+- final
+- interface
+- static
+- void
+- class
+- finally
+- long
+- strictfp
+- volatile
+- const
+- float
+- native
+- super
+- while
+<!--rehype:className=cols-7 style-none-->
+
+### 数学方法
+
+方法 | 说明
+:-|:-
+`Math.max(a,b)`       | `a` 和 `b` 的最大值
+`Math.min(a,b)`       | `a` 和 `b` 的最小值
+`Math.abs(a)`         | 绝对值
+`Math.sqrt(a)`        | `a` 的平方根
+`Math.pow(a,b)`       | `b` 的幂
+`Math.round(a)`       | 最接近的整数
+`Math.sin(ang)`       | 正弦
+`Math.cos(ang)`       | `ang` 的余弦
+`Math.tan(ang)`       | `ang` 的切线
+`Math.asin(ang)`      | `ang` 的反正弦
+`Math.log(a)`         | `a` 的自然对数
+`Math.toDegrees(rad)` | 以度为单位的角度弧度
+`Math.toRadians(deg)` | 以弧度为单位的角度度
+
+### Try/Catch/Finally
+
+```java
+try {
+  // something
+} catch (Exception e) {
+  e.printStackTrace();
+} finally {
+  System.out.println("always printed");
+}
+```
+
+另见
+---
+
+- [Java 官网](https://www.java.com/zh-CN/) _(java.com)_

docs/lsof.md

@@ -0,0 +1,226 @@
+Lsof 备忘清单
+===
+
+这个快速参考备忘单提供了使用 lsof 命令的各种方法。
+
+入门
+----
+
+### 介绍
+
+**lsof** 表示 `L`i`s`t `O`pen `F`iles 用于查找哪个进程打开了哪些文件
+
+```shell
+$ lsof
+$ sudo lsof -u root
+```
+
+### 特定于端口
+
+```shell
+$ lsof -i :8080
+$ lsof -i :80 -i :22
+$ lsof -i TCP:22
+$ lsof -i TCP:1-1024
+$ lsof -i UDP
+$ lsof -i @192.168.1.5
+```
+
+### 特定于进程
+
+```shell
+$ lsof -c mysql
+$ lsof -c java
+$ lsof -c ssh
+$ lsof -c nginx
+$ lsof -c ssh -c httpd
+```
+
+### 特定于用户
+
+```shell
+$ lsof -u www-data
+$ lsof -u www-data -u ubuntu
+$ lsof -i -u ^root # 特定用户除外
+```
+
+### 特定于网络
+
+```shell
+$ lsof -i 4   # 仅 IPv4
+$ lsof -i 6   # 仅 IPv6
+```
+
+### 特定的PID
+
+```shell
+$ lsof -p 1753
+$ lsof -p ^3  # 除了某些pid
+```
+
+### 特定文件名
+
+```shell
+$ lsof /var/log/messages
+$ lsof /etc/passwd
+```
+
+### 特定目录
+
+```shell
+$ lsof +D /var/log # 在目录内
+```
+
+### Kill
+
+```shell
+$ kill -9 `lsof -t -u apache`
+$ kill -9 $(lsof -t -i :8080)
+```
+
+
+### 参数
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+-a        # 列出打开文件存在的进程；
+-c<进程名> # 列出指定进程所打开的文件；
+-g        # 列出GID号进程详情；
+-d<文件号> # 列出占用该文件号的进程；
++d<目录>   # 列出目录下被打开的文件；
++D<目录>   # 递归列出目录下被打开的文件；
+-n<目录>   # 列出使用NFS的文件；
+-i<条件>   # 列出符合条件的进程(协议,:端口,@ip)
+-p<进程号> # 列出指定进程号所打开的文件；
+-u        # 列出UID号进程详情；
+-h        # 显示帮助信息；
+-v        # 显示版本信息
+```
+
+### 列出指定进程号所打开的文件
+
+```bash
+lsof -p $pid
+```
+
+### 获取端口对应的进程 ID=>pid
+
+```bash
+lsof -i:9981 -P -t -sTCP:LISTEN
+```
+
+### 列出打开文件的进程:
+
+```bash
+lsof $filename
+```
+
+
+示例
+---
+
+### 示例
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ lsof
+command     PID USER   FD      type      DEVICE     SIZE       NODE NAME
+init          1 root  cwd       DIR         8,2     4096          2 /
+init          1 root  rtd       DIR         8,2     4096          2 /
+init          1 root  txt       REG         8,2    43496    6121706 /sbin/init
+init          1 root  mem       REG         8,2   143600    7823908 /lib64/ld-2.5.so
+init          1 root  mem       REG         8,2  1722304    7823915 /lib64/libc-2.5.so
+init          1 root  mem       REG         8,2    23360    7823919 /lib64/libdl-2.5.so
+init          1 root  mem       REG         8,2    95464    7824116 /lib64/libselinux.so.1
+init          1 root  mem       REG         8,2   247496    7823947 /lib64/libsepol.so.1
+init          1 root   10u     FIFO        0,17                1233 /dev/initctl
+migration     2 root  cwd       DIR         8,2     4096          2 /
+migration     2 root  rtd       DIR         8,2     4096          2 /
+migration     2 root  txt   unknown                                 /proc/2/exe
+```
+
+### 文件描述符列表(FD)
+<!--rehype:wrap-class=row-span-3-->
+
+:- | :-
+:- | :-
+`cwd`  | 表示当前工作目录，即：应用程序的当前工作目录，这是该应用程序启动的目录，除非它本身对这个目录进行更改
+`txt`  | 该类型的文件是程序代码，如应用程序二进制文件本身或共享库，如上列表中显示的 /sbin/init 程序
+`lnn`  | 库引用 (AIX);
+`er`   | FD 信息错误（参见名称栏）
+`jld`  | jail 目录 (FreeBSD);
+`ltx`  | 共享库文本（代码和数据）
+`mxx`  | 十六进制内存映射类型编号xx
+`m86`  | DOS合并映射文件
+`mem`  | 内存映射文件
+`mmap` | 内存映射设备
+`pd`   | 父目录
+`rtd`  | 根目录
+`tr`   | 内核跟踪文件 (OpenBSD)
+`v86`  | VP/ix 映射文件
+`0`    | 表示标准输出
+`1`    | 表示标准输入
+`2`    | 表示标准错误
+<!--rehype:className=style-list-arrow-->
+
+### 示例列信息
+
+:- | :-
+:- | :-
+`COMMAND` | 进程的名称
+`PID` | 进程标识符
+`PPID` | 父进程标识符（需要指定-R参数）
+`USER` | 进程所有者
+`PGID` | 进程所属组
+`FD` | 文件描述符，应用程序通过它识别该文件
+
+### 标准输出/输入/错误文件状态模式(FD)
+
+:- | :-
+:- | :-
+`u` | 表示该文件被打开并处于读取/写入模式
+`r` | 表示该文件被打开并处于只读模式
+`w` | 表示该文件被打开并处于写入模式
+`空格` | 表示该文件的状态模式为 unknow，且没有锁定
+`-` | 表示该文件的状态模式为 unknow，且被锁定
+
+一般在[标准输出/输入/错误](#文件描述符列表fd)后还跟着文件状态模式
+
+### 文件状态模锁 (FD)
+
+:- | :-
+:- | :-
+`N`     | 对于未知类型的Solaris NFS锁
+`r`     | 用于部分文件的读取锁定
+`R`     | 对整个文件进行读取锁定
+`w`     | 对文件的一部分进行写锁定(文件的部分写锁)
+`W`     | 对整个文件进行写锁定(整个文件的写锁)
+`u`     | 用于任何长度的读写锁
+`U`     | 对于未知类型的锁
+`x`     | 对于文件部分的SCO OpenServer Xenix锁
+`X`     | 对于整个文件的SCO OpenServer Xenix锁
+`space` | 如果没有锁
+
+在[文件状态模式](#标准输出输入错误文件状态模式fd)后面，还跟着相关的锁
+
+### 文件类型
+
+标识 | 说明
+:- | :-
+`DIR` | 表示目录
+`CHR` | 表示字符类型
+`BLK` | 块设备类型
+`UNIX` |  UNIX 域套接字
+`FIFO` | 先进先出 (FIFO) 队列
+`IPv4` | 网际协议 (IP) 套接字
+`DEVICE` | 指定磁盘的名称
+`SIZE` | 文件的大小
+`NODE` | 索引节点（文件在磁盘上的标识）
+`NAME` | 打开文件的确切名称
+`REG` | 常规文件
+
+
+另见
+---
+
+- [lsof 命令帮助文档](https://jaywcjlove.github.io/linux-command/c/lsof.html) _(jaywcjlove.github.io)_

docs/mime.md

@@ -0,0 +1,107 @@
+MIME 类型 备忘清单
+===
+
+此备忘单列出了一些常见的 Web MIME 类型。 您可以查看包含所有已注册 MIME 类型的 [IANA/MIME 媒体类型注册表](https://www.iana.org/assignments/media-types/media-types.xhtml)。
+
+
+入门
+----
+
+### 介绍
+<!--rehype:style=display:none;&wrap-style=padding-top:0;&wrap-class=col-span-3-->
+
+- MIME 类型注册表关联特定的文件扩展名和文件名模式
+- MIME（多用途 Internet 邮件扩展）类型又名媒体类型
+- MIME 类型在 IETF 的 RFC 6838 中定义和标准化
+- 表示文档、文件或字节分类的性质和格式。
+- 对于 Internet 上的文件格式或格式内容
+<!--rehype:className=style-round-->
+
+
+MIME 类型列表
+--------
+
+### 常见的 MIME（媒体）类型
+<!--rehype:wrap-class=col-span-3-->
+
+扩展名 | MIME 类型(内容类型） | 文件种类
+:-|:-|:-
+\.aac           | audio/aac                                                                                       | AAC 音频 
+\.abw           | application/x\-abiword                                                                          | AbiWord 文档 
+\.arc           | application/x\-freearc                                                                          | 存档文档（嵌入多个文件）
+\.avi           | video/x\-msvideo                                                                                | AVI: 音频视频交错
+\.azw           | application/vnd\.amazon\.ebook                                                                  | 亚马逊 Kindle 电子书格式
+\.bin           | application/octet\-stream                                                                       | 任何类型的二进制数据
+\.bmp           | image/bmp                                                                                       | Windows OS/2 位图图形
+\.bz            | application/x\-bzip                                                                             | BZip 存档
+\.bz2           | application/x\-bzip2                                                                            | BZip2 存档
+\.csh           | application/x\-csh                                                                              | C\-Shell 脚本
+\.css           | text/css                                                                                        | 级联样式表 (CSS)
+\.csv           | text/csv                                                                                        | 逗号分隔值 (CSV)
+\.doc           | application/msword                                                                              | 微软 Word
+\.docx          | application/vnd\.openxmlformats\-officedocument\.wordprocessingml\.document                     | 微软 Word (OpenXML)
+\.eot           | application/vnd\.ms\-fontobject                                                                 | MS 嵌入式 OpenType 字体
+\.epub          | application/epub\+zip                                                                           | 电子出版物 (EPUB)
+\.gz            | application/gzip                                                                                | GZip 压缩存档
+\.gif           | image/gif                                                                                       | 图形交换格式 (GIF)
+\.htm \.html    | text/html                                                                                       | 超文本标记语言 (HTML)
+\.ico           | image/vnd\.microsoft\.icon                                                                      | 图标格式
+\.ics           | text/calendar                                                                                   | iCalendar 格式
+\.jar           | application/java\-archive                                                                       | Java 存档 (JAR)
+\.jpeg \.jpg    | image/jpeg                                                                                      | JPEG 图像
+\.js            | text/javascript                                                                                 | JavaScript
+\.json          | application/json                                                                                | JSON格式
+\.jsonld        | application/ld\+json                                                                            | JSON\-LD 格式
+\.mid \.midi    | audio/midi audio/x\-midi                                                                        | 乐器数字接口 (MIDI)
+\.mjs           | text/javascript                                                                                 | JavaScript 模块
+\.mp3           | audio/mpeg                                                                                      | MP3 音频
+\.mpeg          | video/mpeg                                                                                      | MPEG 视频
+\.mpkg          | application/vnd\.apple\.installer\+xml                                                          | Apple 安装程序包
+\.odp           | application/vnd\.oasis\.opendocument\.presentation                                              | OpenDocument 演示文档
+\.ods           | application/vnd\.oasis\.opendocument\.spreadsheet                                               | OpenDocument 电子表格文档
+\.odt           | application/vnd\.oasis\.opendocument\.text                                                      | OpenDocument 文本文档
+\.oga           | audio/ogg                                                                                       | OGG 音频
+\.ogv           | video/ogg                                                                                       | OGG 视频
+\.ogx           | application/ogg                                                                                 | OGG
+\.opus          | audio/opus                                                                                      | Opus 音频
+\.otf           | font/otf                                                                                        | OpenType 字体
+\.png           | image/png                                                                                       | 便携式网络图形
+\.pdf           | application/pdf                                                                                 | Adobe 便携式文档格式 (PDF)
+\.php           | application/php                                                                                 | 超文本预处理器（个人主页）
+\.ppt           | application/vnd\.ms\-powerpoint                                                                 | 微软PowerPoint
+\.pptx          | application/vnd\.openxmlformats\-officedocument\.presentationml\.presentation                   | 微软 PowerPoint (OpenXML)
+\.rar           | application/vnd\.rar                                                                            | RAR 存档
+\.rtf           | application/rtf                                                                                 | 富文本格式 (RTF)
+\.sh            | application/x\-sh                                                                               | Bourne shell 脚本
+\.svg           | image/svg\+xml                                                                                  | 可缩放矢量图形 (SVG)
+\.swf           | application/x\-shockwave\-flash                                                                 | 小型 Web 格式 (SWF) 或 Adobe Flash 文档
+\.tar           | application/x\-tar                                                                              | Tape 存档 (TAR)
+\.tif \.tiff    | image/tiff                                                                                      | 标记图像文件格式 (TIFF)
+\.ts            | video/mp2t                                                                                      | MPEG 传输流
+\.ttf           | font/ttf                                                                                        | TrueType 字体
+\.txt           | text/plain                                                                                      | 文本，（通常为 ASCII 或 ISO 8859\-n）
+\.vsd           | application/vnd\.visio                                                                          | 微软 Visio
+\.wav           | audio/wav                                                                                       | Waveform 音频格式
+\.weba          | audio/webm                                                                                      | WEBM 音频
+\.webm          | video/webm                                                                                      | WEBM视频
+\.webp          | image/webp                                                                                      | WEBP图像
+\.woff          | font/woff                                                                                       | Web 开放字体格式 (WOFF)
+\.woff2         | font/woff2                                                                                      | Web 开放字体格式 (WOFF)
+\.xhtml         | application/xhtml\+xml                                                                          | XHTML 
+\.xls           | application/vnd\.ms\-excel                                                                      | Microsoft Excel 
+\.xlsx          | application/vnd\.openxmlformats\-officedocument\.spreadsheetml\.sheet                           | Microsoft Excel (OpenXML)
+\.xml           | application/xml 如果临时用户不可读(RFC 3023，第 3 节) text/xml，如果临时用户可读(RFC 3023，第 3 节)     | XML 
+\.xul           | application/vnd\.mozilla\.xul\+xml                                                              | XUL 
+\.zip           | application/zip                                                                                 | ZIP 档案
+\.3gp           | video/3gpp audio/3gpp 如果它不包含视频                                                            | 3GPP 音视频容器
+\.3g2           | video/3gpp2 audio/3gpp2 如果它不包含视频                                                          | 3GPP2 音视频容器
+\.7z            | application/x\-7z\-compressed                                                                   | 7-zip 存档
+\.markdown \.md | text/markdown                                                                                   | Markdown 文件
+<!--rehype:className=show-header-->
+
+另见
+---
+
+- [iana mime.types](http://www.iana.org/assignments/media-types/media-types.xhtml) _(iana.org)_
+- [apache mime.types](http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types) _(svn.apache.org)_
+- [nginx mime.types](http://hg.nginx.org/nginx/raw-file/default/conf/mime.types) _(hg.nginx.org)_

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 - 429496­7295)    |
+| `LONGBLOB`   | String (0 - 429496­7295)    |
+| `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 (-2147­483648 to 214748­3647)                         |
+| `BIGINT x`    | Integer (-9223­372­036­854­775808 to 922337­203­685­477­5807) |
+| `FLOAT`       | Decimal (precise to 23 digits)                                |
+| `DOUBLE`      | Decimal (24 to 53 digits)                                     |
+| `DECIMAL`     | "­DOU­BLE­" 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)_

docs/npm.md

@@ -9,50 +9,73 @@ npm 备忘清单
 
 ### 包管理
 
-| 命令                                | 描述                                     |
-| ---                                | ---                                      |
-| `npm i`                            | `npm install`的别名                      |
-| `npm install`                      | 安装 package.json 中的所有内容              |
-| `npm install --production`         | 安装 package.json 中的所有内容，除了 devDependecies   |
-| `npm install lodash`               | 安装一个包                  |
-| `npm install --save-dev lodash`    | 安装为 devDependency       |
-| `npm install --save-exact lodash`  | 准确安装                    |
-| `npm install @scope/package-name`  | 安装一个作用域的公共包                    |
-| `npm install <package_name>@<tag>` | 使用 dist-tags 安装包                   |
-| `npm install -g <package_name>`    | 全局安装包                   |
-| `npm uninstall <package_name>`     | 卸载包                   |
+命令 | 描述
+:- |:-
+`npm init -y`                      | 创建 `package.json` 文件
+`npm install` 或 `npm i`           | 安装 `package.json` 中的所有内容
+`npm install --production`         | 安装 `package.json` 中的所有内容 <br /> _(除了 `devDependecies`)_
+`npm install lodash`               | 安装一个包
+`npm install --save-dev lodash`    | 安装为 `devDependency`
+`npm install --save-exact lodash`  | 准确安装
+`npm install @scope/package-name`  | 安装一个作用域的公共包
+`npm install <package_name>@<tag>` | 使用 `dist-tags` 安装包
+`npm install -g <package_name>`    | 全局安装包
+`npm uninstall <package_name>`     | 卸载包
 <!--rehype:class=auto-wrap-->
 
-`--save` 是 npm@5 的默认值。 以前，使用不带 `--save` 的 `npm install` 不会更新 package.json。
+### 安装
+<!--rehype:wrap-class=row-span-3-->
 
-### 安装名称
-
-| 命令                                  | 描述             |
-| ---                                  | ---               |
-| `npm i sax`                          | NPM 包             |
-| `npm i sax@latest`                   | 指定标签“最新”       |
-| `npm i sax@3.0.0`                    | 指定版本 `3.0.0`     |
-| `npm i sax@">=1 <2.0"`               | 指定版本范围         |
-| `npm i @org/sax`                     | 范围内的 NPM 包     |
-| `npm i user/repo`                    | GitHub             |
-| `npm i user/repo#master`             | GitHub             |
-| `npm i github:user/repo`             | GitHub             |
-| `npm i gitlab:user/repo`             | GitLab             |
-| `npm i /path/to/repo`                | 绝对路径            |
-| `npm i ./archive.tgz`                | 压缩包             |
-| `npm i https://site.com/archive.tgz` | 通过 HTTP 压缩包    |
+命令 | 描述
+:- |:-
+`npm i sax`                          | `NPM` 包 
+`npm i sax@latest`                   | 指定标签 `最新`
+`npm i sax@3.0.0`                    | 指定版本 `3.0.0`
+`npm i sax@">=1 <2.0"`               | 指定版本范围 
+`npm i @org/sax`                     | 范围内的 `NPM` 包 
+`npm i user/repo`                    | GitHub 
+`npm i user/repo#master`             | GitHub 
+`npm i github:user/repo`             | GitHub 
+`npm i gitlab:user/repo`             | GitLab 
+`npm i /path/to/repo`                | 绝对路径 
+`npm i ./archive.tgz`                | 压缩包 
+`npm i https://site.com/archive.tgz` | 通过 `HTTP` 压缩包 
 <!--rehype:class=auto-wrap-->
 
+安装依赖的可用参数
+
+- `-P`, `--save-prod` 包将出现在您的依赖项中，这是默认值(npm v8)，除非存在 `-D` 或 `-O`
+- `-D`, `--save-dev` 包会出现在你的 `devDependencies` 中
+- `-O`, `--save-optional` 包将出现在您的 `optionalDependencies` 中
+- `--no-save` 防止保存到依赖项
+- `-E`, `--save-exact` 依赖项将使用精确的版本进行配置，而不是使用 `npm` 的默认 [`semver`](./semver.md) 范围运算符
+- `-B`, `--save-bundle` 依赖项也将添加到您的 [`bundleDependencies`](./package.json.md#bundleddependencies) 列表中
+<!--rehype:className=style-arrow-->
+
+命令 `npm i` 是 `npm install` 的别名
+
 ### 清单
 
-| 命令                     | 描述               |
-| ---                     | --- |
-| `npm list`              | 列出此软件中所有依赖项的已安装版本 | 
-| `npm list -g --depth 0` | 列出所有全局安装包的安装版本 | 
-| `npm view`              | 列出此软件中所有依赖项的最新版本 | 
-| `npm outdated`          | 仅列出此软件中已过时的依赖项  |
+命令 | 描述
+:- |:-
+`npm list`              | 列出此软件中所有依赖项的已安装版本
+`npm list -g --depth 0` | 列出所有全局安装包的安装版本
+`npm view`              | 列出此软件中所有依赖项的最新版本
+`npm outdated`          | 仅列出此软件中已过时的依赖项
 <!--rehype:class=auto-wrap-->
 
+### 缓存 cache
+
+```bash
+npm cache add <package-spec>    # 将指定的包添加到本地缓存
+npm cache clean [<key>]         # 删除缓存文件夹中的所有数据
+npm cache ls [<name>@<version>]
+npm cache verify # 验证缓存文件夹的内容，垃圾收集任何不需要的数据，
+                 # 并验证缓存索引和所有缓存数据的完整性
+```
+
+用于添加、列出或清理 npm 缓存文件夹
+
 ### 更新
 
 | 命令                    | 描述     |
@@ -61,7 +84,7 @@ npm 备忘清单
 | `npm update`            | 更新生产包 |
 | `npm update --dev`      | 更新开发包 |
 | `npm update -g`         | 更新全局包 |
-| `npm update lodash`     | 更新 lodash 包 |
+| `npm update lodash`     | 更新 `lodash` 包 |
 
 
 ### 杂项功能
@@ -108,7 +131,7 @@ npm access restricted <package-name>
 公开私有包
 
 ```bash
-npm access restricted <package-name>
+npm access public <package-name>
 ```
 
 授予私有包访问权限
@@ -170,7 +193,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 +216,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 +238,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)_

docs/quickreference.md

@@ -109,7 +109,7 @@ function () {}
 <!--rehype:className=wrap-text -->
 ```
 
-如果代码块内容太长，使用强制换行类解决
+如果代码块内容太长，使用强制换行类(`wrap-text`)解决
 
 
 ### 展示表格表头
@@ -222,7 +222,7 @@ const school = <div>学校</div>;
 隐藏卡片标题，在 H3 标题下面添加注释样式
 ```
 
-```markdown
+```markdown {2}
 ### 隐藏卡片标题
 <!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
 ```
@@ -232,10 +232,16 @@ const school = <div>学校</div>;
 
 ```
   ```html preview
-  这里是你的 HTML 代码
+  <b>这里是你的 HTML 代码</b>
   \```
 ```
 
+---
+
+```html preview
+<b>这里是你的 HTML 代码</b>
+```
+
 上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
 
 
@@ -256,7 +262,7 @@ H2 部分
 
 上面实例 `H2 部分` 标题下面有三个`卡片`，默认 `3` 栏布局。
 
-```markdown
+```markdown {3}
 H2 部分
 ---
 <!--rehype:body-class=cols-2-->
@@ -279,7 +285,7 @@ H2 部分
 
 ### 占位布局 style 写法
 
-```markdown
+```markdown {2}
 ### H3 部分
 <!--rehype:wrap-style=grid-row: span 2/span 2;-->
 ```
@@ -289,7 +295,7 @@ H2 部分
 
 ### 卡片栏布局 style 写法
 
-```markdown
+```markdown {2}
 ## H2 部分
 <!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));-->
 ```
@@ -299,7 +305,7 @@ H2 部分
 
 ### H3 部分
 
-```markdown
+```markdown {2,4}
 ### 卡片 1 (H3 部分)
 <!--rehype:wrap-class=row-span-2-->
 ### 卡片 2 (H3 部分)
@@ -623,6 +629,17 @@ H2 部分
 
 `<!--rehype:className=auto-wrap-->`
 
+### 表格末尾列左对齐
+<!--rehype:wrap-class=col-span-2-->
+
+| Prefix | What |
+| ---- | ---- |
+`//`  | Anywhere
+`./`  | Relative
+<!--rehype:className=show-header left-align-->
+
+默认表格末尾列`右对齐`，添加 `<!--rehype:className=left-align-->` 类让其`左对齐`
+
 列表
 ---
 

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- 开头使用速记时可以省略
+```

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

docs/yarn.md

@@ -0,0 +1,193 @@
+Yarn 备忘清单
+===
+
+这是一份 [`Yarn`](https://yarnpkg.com/) 软件包管理器备忘单，其中列出了 `Yarn` 常用命令使用清单
+
+入门
+---
+
+### Yarn 与 npm 命令比较
+<!--rehype:wrap-class=col-span-2-->
+
+npm(v5) | yarn | 说明
+:- | :- | :-
+`npm install`     | `yarn add`, `yarn`| 安装依赖
+`npm init`        | `yarn init` | 创建 `package.json` 文件
+`npm install gulp --save` | `yarn add gulp` | 安装 `gulp` 包
+`npm install gulp --save-dev --save-exact` | `yarn add gulp --dev --exact`
+`npm install -g gulp` | `yarn global add gulp`
+`npm update` | `yarn upgrade`
+`npm cache clean` | `yarn cache clean` | 清理缓存目录
+`./node_modules/.bin/gulp` | `yarn run gulp`
+<!--rehype:className=show-header left-align-->
+
+npm _([备忘清单](./npm.md))_ 和 Yarn 有很多相似之处
+
+### yarn install
+
+```shell
+--no-lockfile # 不要读取或生成 yarn.lock 锁定文件
+--pure-lockfile
+--frozen-lockfile
+--silent
+--offline
+--update-checksums
+--check-files
+--flat
+--force
+--ignore-scripts
+--modules-folder <path>
+--production[=true|false]
+```
+
+这些选项可用于 `yarn install`
+
+### yarn add
+<!--rehype:wrap-class=row-span-2-->
+
+在 [devDependencies](./package.json.md#devdependencies) 中安装一个或多个包
+
+```shell
+--dev, -D
+```
+
+在 [peerDependencies](./package.json.md#peerdependencies) 中安装一个或多个包
+
+```shell
+--peer, -P
+```
+
+在 [optionalDependencies](./package.json.md#optionaldependencies) 中安装一个或多个包
+
+```shell
+--optional, -O
+```
+
+更改包版本
+
+```shell
+--exact, -E # 将包安装为精确版本
+--tilde, -T # 安装有相同次要版本的包的最新版本
+```
+
+这些选项可用于 `yarn add`.
+
+### Workspaces
+<!--rehype:wrap-class=row-span-2-->
+
+在 `package.json` 中 [workspaces](./package.json.md#workspaces) 配置:
+
+```json
+"workspaces": [
+  "packages/*"
+]
+```
+
+----
+
+```bash
+jest/
+├─ package.json
+└─ packages/
+   ├─ jest-matcher-utils/
+   │  └─ package.json
+   └─ jest-diff/
+      └─ package.json
+```
+
+(1.0 新增)允许 monoreso 相互共享包。另见：[介绍工作空间](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/)
+
+### 选择性版本解析
+
+在 `package.json` 中 [`resolutions`](./package.json.md#resolutions) 配置:
+
+```json
+"resolutions": {
+  "**/sass-brunch/node-sass": "4.5.2"
+}
+```
+
+另见：[选择性版本解析](https://github.com/yarnpkg/yarn/pull/4105)。(1.0 新增)允许您指定子依赖项的版本
+
+### Create
+
+```bash
+yarn create react-app hello
+```
+
+安装 `create react app` 并运行它 See: [yarn create](https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-yarn-create.md)
+
+示例
+---
+
+### 安装包
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+# 将包添加到“dependencies”
+$ yarn add <package>
+# 将包添加到“devDependencies”
+$ yarn add -D <package>
+# 将软件包添加为确切版本
+$ yarn add -E <package>
+# 在您的操作系统上全局安装软件包
+$ yarn global add <package>
+```
+
+### 移除包
+
+```bash
+$ yarn remove <package>
+```
+
+从所有类型的依赖项中删除包
+
+### 查看包
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+# 列出已安装的软件包
+$ yarn list
+# 列出顶级安装包
+$ yarn list --depth=0
+# 列出已安装的顶级全局包
+$ yarn global list --depth=0
+# 列出带有过滤字符串和深度级别的包
+$ yarn list --pattern "gulp|grunt" --depth=1
+```
+
+### 清除
+
+```bash
+# 从包依赖项中清理并删除不必要的文件
+$ yarn autoclean
+# 检查过时的包依赖项
+$ yarn outdated
+```
+
+### 信息
+
+```bash
+$ yarn why <query>
+$ yarn why jest
+```
+
+显示有关安装软件包的原因的信息
+
+### 清理缓存
+
+运行此命令将清除全局缓存。 下次运行 `yarn` 或 `yarn install` 时，它将再次填充
+
+```bash
+$ yarn cache clean
+```
+
+此外，您可以指定一个或多个要清理的包
+
+另见
+---
+
+- [npm 备忘清单](./npm.md)
+- [Yarn 官方文档网站](https://yarnpkg.com/)
+- [Yarn 2 中文文档网站](https://www.yarnpkg.cn/)
+- [Yarn 1 中文文档网站](https://yarn.bootcss.com/) _(bootcss.com)_

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@wcj/reference",
-  "version": "1.11.0",
+  "version": "1.15.0",
   "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",
@@ -19,13 +21,19 @@
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.1.1",
+    "@wcj/markdown-to-html": "^2.1.2",
     "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"
   }
 }

scripts/assets/colors-named.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 24 24">
-  <path d="M19.54 5.08A10.61 10.61 0 0 0 11.91 2a10 10 0 0 0-.05 20 2.58 2.58 0 0 0 2.53-1.89 2.52 2.52 0 0 0-.57-2.28.5.5 0 0 1 .37-.83h1.65A6.15 6.15 0 0 0 22 11.33a8.48 8.48 0 0 0-2.46-6.25Zm-12.7 9.66a1.5 1.5 0 1 1 .4-2.08 1.49 1.49 0 0 1-.4 2.08ZM8.3 9.25a1.5 1.5 0 1 1-.55-2 1.5 1.5 0 0 1 .55 2ZM11 7a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 11 7Zm5.75.8a1.5 1.5 0 1 1 .55-2 1.5 1.5 0 0 1-.55 2Z" style="fill:#231f20" id="color-palette-2"/>
+  <path d="M19.54 5.08A10.61 10.61 0 0 0 11.91 2a10 10 0 0 0-.05 20 2.58 2.58 0 0 0 2.53-1.89 2.52 2.52 0 0 0-.57-2.28.5.5 0 0 1 .37-.83h1.65A6.15 6.15 0 0 0 22 11.33a8.48 8.48 0 0 0-2.46-6.25Zm-12.7 9.66a1.5 1.5 0 1 1 .4-2.08 1.49 1.49 0 0 1-.4 2.08ZM8.3 9.25a1.5 1.5 0 1 1-.55-2 1.5 1.5 0 0 1 .55 2ZM11 7a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 11 7Zm5.75.8a1.5 1.5 0 1 1 .55-2 1.5 1.5 0 0 1-.55 2Z" />
 </svg>

scripts/assets/djiango.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 230 230">
+  <path fill="currentColor" d="M200,0 C216.568542,-3.04359188e-15 230,13.4314575 230,30 L230,200 C230,216.568542 216.568542,230 200,230 L30,230 C13.4314575,230 9.13448861e-15,216.568542 0,200 L0,30 C-2.02906125e-15,13.4314575 13.4314575,1.01490192e-14 30,0 L200,0 Z M167.109375,83.5546875 L141.953125,83.5546875 L141.953125,132.96875 C141.953125,154.980469 140.605469,163.066406 137.011719,170.253906 C133.867188,176.992188 128.476562,181.933594 117.246094,186.875 L140.605469,198.105469 C151.835938,192.265625 157.226562,187.324219 161.269531,179.238281 C165.761719,171.152344 167.109375,161.71875 167.109375,141.503906 L167.109375,83.5546875 Z M127.128906,45.3710938 L101.972656,45.3710938 L101.972656,83.1054688 C97.9296875,82.2070312 94.7851562,82.2070312 90.7421875,82.2070312 C64.2382812,82.2070312 47.6171875,98.3789062 47.6171875,123.984375 C47.6171875,150.488281 63.3398438,164.414062 94.3359375,164.414062 C104.667969,164.414062 114.101562,163.066406 127.128906,160.820312 L127.128906,45.3710938 Z M93.4375,101.972656 C96.5820312,101.972656 98.828125,102.421875 101.972656,103.320312 L101.972656,143.300781 C97.9296875,144.199219 95.6835938,144.199219 92.9882812,144.199219 C79.9609375,144.199219 73.2226562,137.011719 73.2226562,123.535156 C73.2226562,110.058594 80.4101562,101.972656 93.4375,101.972656 Z M167.109375,45.3710938 L141.953125,45.3710938 L141.953125,70.9765625 L167.109375,70.9765625 L167.109375,45.3710938 Z"/>
+</svg>

scripts/assets/emacs.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" height="1em" width="1em">
+  <path d="M15.995.016c-2.385.02-4.599.525-6.625 1.457l.011-.004c4.849 2.703 9.271 7.509 11.907 10.989.531.713 1.005 1.339 1.437 1.911l.005-.025c.552-2.317-.417-6.984-2.021-9.776-.156-.271-.271-.505-.249-.521h.005l.005-.005c.129.032 1.375 1.323 1.828 1.912.801 1.02 1.109 1.615 1.552 2.968 1.14 3.532 1.896 6.401 2.531 9.667.323 1.641.901 4.609.98 5.177.004.079-.016.172-.016.193-.125-.12-.256-.24-.385-.355-.86-.755-2.568-1.885-4.245-2.817-2.093-1.156-4.156-2.151-8.765-4.213-4.208-1.885-6.145-2.781-7.667-3.547l-1.369-.683.536 1.339s2.573 1.443 2.896 1.88c0 0 3.093 5.823 4.468 9.271 1.027 2.599 2.183 5.688 2.876 6.541l.077.089C14.403 31.131 8.111 28 8.111 28c-.693-5.864-2.625-12.812-5.14-19.917-.057-.119-.115-.239-.167-.364 0-.021.187.161.411.407 2.536 2.713 7.943 5.181 13.688 6.239 1.552.272 3.135.371 4.708.297-.407-.521-.855-1.093-1.344-1.735C15.71 6.99 11.236 4.495 7.226 2.97c-.104-.037-.203-.084-.307-.115A15.865 15.865 0 0 0 .892 10.76a16.037 16.037 0 0 0-.891 5.355L.006 16c.041 6.688 4.172 12.817 10.735 15.104 1.781.62 3.593.907 5.375.896l-.12-.005c6.693-.041 12.823-4.172 15.109-10.735.62-1.781.907-3.599.891-5.38V16C31.949 9.307 27.824 3.177 21.256.896A15.96 15.96 0 0 0 15.881 0l.12.005zm8.177 8.145c.708.683 1.839 2.005 3.115 2.751 1.052 1.317 1.625 2.615 2.333 3.504-.292-.249-1.484-1.296-1.484-1.296s-1.833-1.74-2.855-2.869c-.391-.439-.427-.505-.636-.839-.083-.131-.364-1.1-.473-1.245l.005-.011z"/>
+</svg>

scripts/assets/ffmpeg.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M21.72 17.91V6.5l-.53-.49L9.05 18.52l-1.29-.06L24 1.53l-.33-.95-11.93 1-5.75 6.6v-.23l4.7-5.39-1.38-.77-9.11.77v2.85l1.91.46v.01l.19-.01-.56.66v10.6c.609-.126 1.22-.241 1.83-.36L14.12 5.22l.83-.04L0 21.44l9.67.82 1.35-.77 6.82-6.74v2.15l-5.72 5.57 11.26.95.35-.94v-3.16l-3.29-.18a64.66 64.66 0 0 0 1.28-1.23z"/>
+</svg>

scripts/assets/java.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512" height="1em" width="1em">
+  <path d="M277.74 312.9c9.8-6.7 23.4-12.5 23.4-12.5s-38.7 7-77.2 10.2c-47.1 3.9-97.7 4.7-123.1 1.3-60.1-8 33-30.1 33-30.1s-36.1-2.4-80.6 19c-52.5 25.4 130 37 224.5 12.1zm-85.4-32.1c-19-42.7-83.1-80.2 0-145.8C296 53.2 242.84 0 242.84 0c21.5 84.5-75.6 110.1-110.7 162.6-23.9 35.9 11.7 74.4 60.2 118.2zm114.6-176.2c.1 0-175.2 43.8-91.5 140.2 24.7 28.4-6.5 54-6.5 54s62.7-32.4 33.9-72.9c-26.9-37.8-47.5-56.6 64.1-121.3zm-6.1 270.5a12.19 12.19 0 0 1-2 2.6c128.3-33.7 81.1-118.9 19.8-97.3a17.33 17.33 0 0 0-8.2 6.3 70.45 70.45 0 0 1 11-3c31-6.5 75.5 41.5-20.6 91.4zM348 437.4s14.5 11.9-15.9 21.2c-57.9 17.5-240.8 22.8-291.6.7-18.3-7.9 16-19 26.8-21.3 11.2-2.4 17.7-2 17.7-2-20.3-14.3-131.3 28.1-56.4 40.2C232.84 509.4 401 461.3 348 437.4zM124.44 396c-78.7 22 47.9 67.4 148.1 24.5a185.89 185.89 0 0 1-28.2-13.8c-44.7 8.5-65.4 9.1-106 4.5-33.5-3.8-13.9-15.2-13.9-15.2zm179.8 97.2c-78.7 14.8-175.8 13.1-233.3 3.6 0-.1 11.8 9.7 72.4 13.6 92.2 5.9 233.8-3.3 237.1-46.9 0 0-6.4 16.5-76.2 29.7zM260.64 353c-59.2 11.4-93.5 11.1-136.8 6.6-33.5-3.5-11.6-19.7-11.6-19.7-86.8 28.8 48.2 61.4 169.5 25.9a60.37 60.37 0 0 1-21.1-12.8z"/>
+</svg>

scripts/assets/python.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512" height="1em" width="1em">
+  <path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/>
+</svg>

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>

scripts/assets/yarn.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+  <path d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"/>
+</svg>

scripts/build.mjs

@@ -1,3 +1,3 @@
 import { run } from './index.mjs';
 
-run()
+run();

scripts/create.mjs

@@ -2,8 +2,6 @@ import markdown from '@wcj/markdown-to-html';
 import rehypeDocument from 'rehype-document';
 import remarkGemoji from 'remark-gemoji';
 import rehypeRaw from 'rehype-raw';
-import rehypeAttrs from 'rehype-attr';
-import rehypeKatex from 'rehype-katex';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
@@ -23,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,
@@ -32,31 +33,39 @@ export function create(str = '', options = {}) {
     rehypePlugins: [
       rehypeSlug,
       rehypeAutolinkHeadings,
-        [rehypeDocument, {
+      [
+        rehypeDocument,
+        {
           title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
-          css: [ ...options.css ],
-          link: [
-            {rel: 'icon', href: favicon, type: 'image/svg+xml'}
-          ],
+          css: [...options.css],
+          link: [{ rel: 'icon', href: favicon, type: 'image/svg+xml' }],
           meta: [
             { description: `${description}为开发人员分享快速参考备忘单。` },
-            { keywords: `Quick,Reference,cheatsheet,${!options.isHome && options.filename || ''}` }
-          ]
-        }]
+            { 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;
+        let rehypePrism = null;
+        const dt = plugins.filter((plug) => {
+          if (Array.isArray(plug) && /(rehypePrism)/.test(plug[0].name)) {
+            rehypePrism = plug;
+          }
+          return /(rehypeRaw|rehypePrism)/.test(plug.name) ? false : true;
         });
         // 放在 rehypeDocument 前面
-        dt.unshift(rehypeRaw)
+        dt.unshift(rehypeRaw);
+        if (rehypePrism) {
+          dt.unshift(rehypePrism);
+        }
+        dt.unshift(rehypePreviewHTML);
         return dt;
       }
-      return plugins
+      return plugins;
     },
     rewrite: (node, index, parent) => {
-      rehypePreviewHTML(node, parent);
       rehypeTitle(node, options.filename);
       homeCardIcons(node, parent, options.isHome);
       tooltips(node, index, parent);
@@ -64,10 +73,10 @@ export function create(str = '', options = {}) {
       rehypeUrls(node);
       if (node.children) {
         if (node.type === 'element' && node.tagName === 'body') {
-          const tocsData = getTocsTree([ ...node.children ]);
+          const tocsData = getTocsTree([...node.children]);
           if (!options.isHome) {
             const tocsMenus = getTocsTitleNode([...tocsData]);
-            node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus))
+            node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus));
           } else {
             node.children = tocsData;
           }
@@ -76,9 +85,8 @@ export function create(str = '', options = {}) {
           node.children.push(anchorPoint());
         }
       }
-    }
-  }
-  
+    },
+  };
 
   return markdown(str, mdOptions);
-}
+}

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)$/,

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;
             }),
           },
         ],
-      }
+      },
     ],
   };
-}
+}

scripts/nodes/htmlTagAddAttri.mjs

@@ -5,4 +5,4 @@ export function htmlTagAddAttri(node, { isHome }) {
   if (node && node.tagName === 'body' && isHome) {
     node.properties.class = ['home'];
   }
-}
+}

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',
       },
     },
   ],
-}
+};

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,7 +63,7 @@ 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;
@@ -69,7 +71,8 @@ body {
   --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;
@@ -111,7 +114,7 @@ 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;
 }
@@ -121,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;
@@ -145,12 +169,16 @@ pur {
   color: var(--color-prettylights-syntax-entity);
 }
 
-.wrap-body > p > code, .wrap-body > ul li > code, .wrap-body tbody td code {
+:is(.h3wrap-body, .wrap-body) p > code,
+:is(.h3wrap-body, .wrap-body) ul li > code,
+:is(.h3wrap-body, .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 {
+:is(.h3wrap-body, .wrap-body) em,
+:is(.h3wrap-body, .wrap-body) sup,
+:is(.h3wrap-body, .wrap-body) sub {
   color: var(--color-fg-subtle);
 }
 
@@ -158,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;
@@ -173,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;
 }
 
@@ -199,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,
+.h3wrap-body p > del > code {
   color: var(--color-danger-fg);
 }
 
@@ -213,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;
@@ -233,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 {
@@ -244,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;
@@ -254,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;
@@ -265,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;
 }
 
@@ -276,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;
@@ -294,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;
@@ -311,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;
 }
@@ -320,16 +363,46 @@ 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));
+}
+.home-card :is(a.contributing, a.tag) {
+  position: relative;
+}
+.home-card a.contributing::after {
+  color: var(--color-fg-muted);
+  content: '👆待完善需要您的参与';
+  display: block;
+  position: absolute;
+  font-size: 10px;
+  left: 5px;
+  bottom: -15px;
+}
+.home-card a.contributing:hover:after {
+  color: var(--color-fg-muted);
+}
+.home-card a.tag::before {
+  content: attr(data-lang);
+  display: block;
+  position: absolute;
+  font-size: 10px;
+  right: 6px;
+  top: 6px;
+  background: rgba(255 255 255 / 0.3);
+  border-radius: 3px;
+  padding: 1px 3px 2px 3px;
+  transition: all 0.3s;
+}
+.home-card a.tag:hover:before {
+  background: rgba(255 255 255 / 0.2);
 }
 
 [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;
@@ -339,13 +412,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 {
@@ -374,23 +447,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;
@@ -411,17 +487,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;
 }
 
@@ -443,7 +521,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;
@@ -491,7 +570,7 @@ a.text-grey {
   max-height: 100vh;
   overflow: auto;
   background-color: var(--color-canvas-subtle);
-  box-shadow: 0 8px 24px rgba(var(--box-shadow)/0.2);
+  box-shadow: 0 8px 24px rgba(var(--box-shadow) / 0.2);
 }
 .menu-tocs > .menu-btn {
   border: 1px solid var(--color-border-default);
@@ -505,7 +584,7 @@ a.text-grey {
 }
 .menu-tocs > .menu-modal {
   width: 260px;
-  position:absolute;
+  position: absolute;
   display: none;
   margin-left: -1rem;
 }
@@ -527,12 +606,15 @@ a.text-grey {
 
 .menu-tocs > .menu-modal a.leve2 {
   font-weight: bold;
+  color: var(--color-fg-default);
 }
 
 .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 {
+.menu-tocs > .menu-modal a.leve4,
+.menu-tocs > .menu-modal a.leve5,
+.menu-tocs > .menu-modal a.leve6 {
   padding-left: 2.1rem;
 }
 
@@ -544,7 +626,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;
 }
 
@@ -555,7 +638,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);
@@ -570,6 +654,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   display: initial;
 }
 
+.wrap.h3body-exist .wrap-header.h3wrap {
+  flex: initial;
+}
+
+.wrap.h3body-exist > .h3wrap-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .wrap-header.h3wrap {
   z-index: 0;
   width: 100%;
@@ -595,7 +689,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,
+.h3wrap-body p {
   margin: 0px;
   width: 100%;
   padding-left: 1rem;
@@ -610,7 +705,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;
@@ -618,7 +713,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   border-radius: 0.5rem 0.5rem 0 0;
 }
 
-.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child {
+.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child,
+.h3wrap-body p:not(:first-child):last-child {
   margin-top: auto;
   border-radius: 0 0 0.5rem 0.5rem;
 }
@@ -631,7 +727,9 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   flex-direction: column;
 }
 
-.h4wrap > h4 {
+.h3wrap-body > h4,
+.h3wrap-body > h5,
+.h3wrap-body > h6 {
   border-color: transparent;
   background-color: var(--color-neutral-muted);
   color: var(--color-fg-default);
@@ -645,22 +743,17 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   text-align: center;
 }
 
-.h4wrap > .wrap-body ul,
-.h4wrap > .wrap-body ol,
-.h4wrap > .wrap-body dl,
-
-.h3wrap > .wrap-body ul,
-.h3wrap > .wrap-body ol,
-.h3wrap > .wrap-body dl {
+.h3wrap .wrap-body > ul,
+.h3wrap .wrap-body > ol,
+.h3wrap .wrap-body > dl,
+.h3wrap-body > ul,
+.h3wrap-body > ol,
+.h3wrap-body > dl {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: grid;
   list-style-position: outside;
-  grid-template-columns: repeat(1,minmax(0,1fr));
-}
-
-.h4wrap > .wrap-body ul + hr {
-  margin-bottom: 0;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 .h3wrap > .wrap-body ul:not(:last-child),
@@ -678,7 +771,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;
@@ -714,13 +807,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;
@@ -763,7 +856,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;
@@ -772,7 +866,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;
 }
 
@@ -784,10 +878,10 @@ 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 {
+.h3wrap-body > *:last-child {
   border-radius: 0 0 0.5rem 0.5rem;
 }
 
@@ -801,33 +895,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;
@@ -835,6 +983,11 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   word-break: break-all;
 }
 
+.left-align,
+.left-align tr :is(td, th):last-child {
+  text-align: left;
+}
+
 .tooltip {
   position: relative;
   display: inline-block;
@@ -850,7 +1003,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;
@@ -859,7 +1012,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%;
@@ -875,17 +1028,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 {
@@ -910,13 +1080,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 {
@@ -941,9 +1121,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);
@@ -983,7 +1170,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 {
@@ -1026,11 +1214,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 {
@@ -1043,6 +1233,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));
   }
 }

scripts/utils/anchorPoint.mjs

@@ -1,4 +1,3 @@
-
 const scripts = `
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
   window.onhashchange = function () {
@@ -12,8 +11,6 @@ function anchorPoint() {
   Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
   if (elm?.tagName === 'H3') {
     elm?.parentElement?.parentElement?.classList.add('active');
-    const box = elm?.parentElement?.parentElement;
-    console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
   }
 }
 anchorPoint();
@@ -24,7 +21,6 @@ function updateAnchor(element) {
     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');
   }
@@ -43,9 +39,11 @@ export function anchorPoint() {
   return {
     type: 'element',
     tagName: 'script',
-    children: [{
-      type: 'text',
-      value: scripts,
-    }]
-  }
-}
+    children: [
+      {
+        type: 'text',
+        value: scripts,
+      },
+    ],
+  };
+}

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/, ''));

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,
+        },
+      ],
+    },
   ];
 }

scripts/utils/getSVGNode.mjs

@@ -1,24 +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 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 || [];
+}

scripts/utils/getTocsTree.mjs

@@ -1,4 +1,5 @@
 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';
@@ -8,14 +9,15 @@ 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 || '') }
-      result.push({ tagName: 'a', type, properties: props, children: (children || []).filter(m => m.type === 'text') })
+      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))
+      result = result.concat(getTocsTitleNode(children));
     }
   });
-  return result
+  return result;
 }
 
 export function addTocsInWarp(tocsData = [], menuData, isDone = false) {
@@ -24,14 +26,14 @@ export function addTocsInWarp(tocsData = [], menuData, isDone = false) {
       isDone = true;
     }
     if (!isDone && item.children) {
-      item.children = addTocsInWarp([...item.children], menuData, isDone)
+      item.children = addTocsInWarp([...item.children], menuData, isDone);
     }
-    return item
+    return item;
   });
   if (isDone) {
     childs.splice(1, 0, menuData);
   }
-  return childs
+  return childs;
 }
 
 export const getTocsTitleNodeWarpper = (children = []) => {
@@ -50,10 +52,7 @@ export const getTocsTitleNodeWarpper = (children = []) => {
         properties: {
           class: 'menu-btn',
         },
-        children: [
-          // { type: 'text', value: 'menu' }
-          ...svgNode
-        ]
+        children: [...svgNode],
       },
       {
         type: 'element',
@@ -61,16 +60,16 @@ export const getTocsTitleNodeWarpper = (children = []) => {
         properties: {
           class: 'menu-modal',
         },
-        children: children
-      }
-    ]
-  }
-}
+        children: children,
+      },
+    ],
+  };
+};
 
 /** Markdown 文档转成树形结构 */
 export function getTocsTree(arr = [], result = []) {
   const data = panelAddNumber(arr);
-  
+
   let n = 0;
   let level = -1;
 
@@ -82,16 +81,19 @@ export function getTocsTree(arr = [], result = []) {
     }
     if (toc.number === level && titleNum(toc.tagName) === level) {
       const header = getHeader(data.slice(n), level);
+      const childs = getChilds([...data.slice(n + 1)], level);
+      const resultChilds = getTocsTree(childs);
       const wrapCls = ['wrap'];
       const headerCls = ['wrap-header', `h${level}wrap`];
+      wrapCls.push(`h${level}body-${resultChilds.length === 0 ? 'not-' : ''}exist`);
 
       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'];
-      const panle = {
+      let panle = {
         type: 'element',
         tagName: 'div',
         properties: { class: wrapCls, style: wrapStyle },
@@ -106,29 +108,36 @@ export function getTocsTree(arr = [], result = []) {
                 type: 'element',
                 tagName: 'div',
                 properties: { class: 'wrap-body' },
-                children: [
-                  ...header
-                ],
-              }
+                children: [...header],
+              },
             ],
-          }
+          },
         ],
+      };
+      if (titleNum(toc.tagName) > 3) {
+        panle = [toc, ...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']
-        panle.children = panle.children.concat({
-          type: 'element',
-          tagName: 'div',
-          properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
-          children: [...resultChilds]
-        });
+        delete toc.properties['body-class'];
+        if (Array.isArray(panle)) {
+          panle = panle.concat(resultChilds);
+        } else if (panle.children) {
+          panle.children = panle.children.concat({
+            type: 'element',
+            tagName: 'div',
+            properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
+            children: [...resultChilds],
+          });
+        }
+      }
+      if (Array.isArray(panle)) {
+        result = result.concat(panle);
+      } else {
+        result.push(panle);
       }
-      result.push(panle);
     }
 
     n++;

scripts/utils/homeCardIcons.mjs

@@ -15,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;
+    });
   }
-}
+}

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;
+}

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;
+        }
+      }
+    });
+  };
+}

scripts/utils/rehypeTitle.mjs

@@ -9,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];
     }
   }
-}
+}

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');
   }
-}
+}

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() {}

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}`));
+})();