released v1.12.0

.github/ISSUE_TEMPLATE/cheatsheet-request.md

@@ -5,21 +5,16 @@ title: '备忘清单 请求: '
 labels: request
 assignees: jaywcjlove
 ---
-备忘清单标题 备忘清单
+【备忘清单标题】 备忘清单
 ===
 
 这是您可以在 Quick Reference 备忘清单上使用的参考！【备忘清单介绍】
 
-入门
----
 
-### 卡片 1
+如果有一张备忘单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
 
-### 卡片 2
-
-### 卡片 3
-
-另见
+提供参考资料地址
 ----
 
-- [参考地址](https://xxx.com)
+- [参考地址 1](https://xxx.com)
+- [官网地址](https://xxx.com)

.github/workflows/ci.yml

@@ -16,9 +16,101 @@ jobs:
       - run: npm install
       - run: npm run build
 
+      - name: Generate Contributors Images
+        uses: jaywcjlove/github-action-contributors@main
+        with:
+          filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
+          output: dist/CONTRIBUTORS.svg
+          avatarSize: 42
+
+      - name: Create Tag
+        id: create_tag
+        uses: jaywcjlove/create-tag-action@main
+        with:
+          package-path: ./package.json
+
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           commit_message: ${{ github.event.head_commit.message }}
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          publish_dir: ./dist
+
+      - name: Generate Changelog
+        id: changelog
+        uses: jaywcjlove/changelog-generator@main
+        with:
+          filter-author: (小弟调调™)
+          filter: (^[\s]+?[R|r]elease)|(^[R|r]elease)
+
+
+      - name: Create Release
+        uses: ncipollo/release-action@v1
+        if: steps.create_tag.outputs.successful
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          name: ${{ steps.create_tag.outputs.version }}
+          tag: ${{ steps.create_tag.outputs.version }}
+          body: |
+            Documentation ${{ needs.build.outputs.create_tag_version }}: https://raw.githack.com/jaywcjlove/reference/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
+            Comparing Changes: ${{ steps.changelog.outputs.compareurl }}  
+            
+            ${{ steps.changelog.outputs.changelog }}
+
+            ## Docker
+            [![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference) [![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference) [![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+
+            轻松通过 `docker` 部署 `Quick Reference` 网站。
+            
+            ```bash
+            docker pull wcjiang/reference
+            ```
+            
+            ```bash
+            docker run --name reference --rm -d -p 9667:3000 wcjiang/reference:latest
+            # Or
+            docker run --name reference -itd -p 9667:3000 wcjiang/reference:latest
+            ```
+            
+            在浏览器中访问以下 URL
+            
+            ```bash
+            http://localhost:9667/
+            ```
+
+      # Create Docker Image in Github
+      - name: Login to GitHub registry
+        run: echo ${{ github.token }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+      - name: Build docker image
+        run: docker build -t ghcr.io/jaywcjlove/reference:latest .
+
+      - name: Publish to GitHub registry
+        run: docker push ghcr.io/jaywcjlove/reference:latest
+
+      - name: Tag docker image (beta) and publish to GitHub registry
+        if: steps.create_tag.outputs.successful
+        run: |
+          echo "version: v${{ steps.changelog.outputs.version }}"
+          docker tag ghcr.io/jaywcjlove/reference:latest ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+          docker push ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+
+      # Create Docker Image
+      - name: Docker login
+        run: docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
+        
+      - name: Build reference image
+        run: docker image build -t reference .
+
+      - name: Tags & Push image(latest)
+        run: |
+          echo "DOCKER_USER: ${{ secrets.DOCKER_USER }}"
+          docker tag reference ${{ secrets.DOCKER_USER }}/reference:latest
+          docker push ${{ secrets.DOCKER_USER }}/reference:latest
+
+      - name: Tags & Push image
+        if: steps.create_tag.outputs.successful
+        run: |
+          echo "outputs.tag - ${{ steps.changelog.outputs.version }}"
+          docker tag reference ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}
+          docker push ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}

.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

@@ -16,6 +16,26 @@ Contributing 贡献
 
 只需要 `标题<h1>` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。
 
+## 目录结构
+
+```bash
+.
+├── CONTRIBUTING.md   # 贡献说明
+├── Dockerfile
+├── LICENSE
+├── README.md         # Home(首页) 内容
+├── dist              # 编译后的静态资源目录
+├── docs              # Markdown 文档（快速参考备忘清单【速查表】）
+│   ├── bash.md
+│   ├── ....
+│   └── yaml.md
+├── package.json
+└── scripts           # MD 转 HTML 的编译脚本
+    ├── assets        # 存放首页 svg 图标文件资源，与 `dosc` 文件名对应
+    ├── ....
+    └── watch.mjs
+```
+
 ## CSS 类注释
 
 [`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html
@@ -34,6 +54,13 @@ Contributing 贡献
 <!--rehype:class=home-card-->
 ```
 
+首页导航图标存放在 `scripts/assets` 目录中，如果你的备忘清单定义为 `docs/cron.md`，那么你的图标就定义为 `cron.svg` 存放到 `scripts/assets` 目录中，重新编译首页当行菜单就拥有了图标。
+
+- 图标存放在 [`scripts/assets`](https://github.com/jaywcjlove/reference/blob/main/scripts/assets) 目录中
+- 图片名称与清单名称保持一致 `cron.md` -> `cron.svg` (注意大小写)
+- SVG 图标尺寸 `<svg height="1em" width="1em"`
+- SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
+
 ## 本地开发
 
 ```bash

Dockerfile

@@ -0,0 +1,7 @@
+# https://lipanski.com/posts/smallest-docker-image-static-website
+# https://github.com/lipanski/docker-static-website
+FROM lipanski/docker-static-website:latest
+
+# Copy the static website
+# Use the .dockerignore file to control what ends up inside the image!
+COPY ./dist .

README.md

@@ -1,52 +1,105 @@
 Quick Reference
 ===
 
-为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。
+<!--rehype:ignore:start-->
+[![CI](https://github.com/jaywcjlove/reference/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/reference/actions/workflows/ci.yml)
+[![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+[![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+[![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+<!--rehype:ignore:end-->
 
-如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
+<!--rehype:ignore:start-->
+[![Quick Reference](https://user-images.githubusercontent.com/1680273/197915058-b0aafe2c-10fc-4cc3-b54e-66329c7b4450.png)](https://jaywcjlove.github.io/reference)
+<!--rehype:ignore:end-->
+
+为开发人员分享快速参考备忘清单【速查表】 _(主要是方便自己)_，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
 
 ## 编程
 
 [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));-->
-[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
+[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));-->
-[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
-[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
-[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
+[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
+[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));-->
+[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[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));-->
+[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));-->
+[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));-->
+[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));-->
 [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));-->
+<!--rehype:class=home-card-->
+
+## Nodejs
+
+[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+<!--rehype:class=home-card-->
+
+## 工具
+
+[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));-->
-[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
-[RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
+[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
 [VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 [Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8/var(\-\-bg\-opacity));-->
+[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 [XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## Linux 命令
 
-[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(239 68 113/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));-->
+[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));-->
+[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## 其它
 
 [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));-->
 [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));-->
+[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-->
 
 ## 看到缺少什么了吗？
@@ -54,11 +107,21 @@ Quick Reference
 
 上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！
 
-[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=备忘清单+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
-[`我有一张备忘单`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
+[`请求添加备忘单(速查表)`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
+[`我有一张备忘单(速查表)`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
 <!--rehype:style=margin-top:3rem-->
 
 <!--rehype:ignore:start-->
+## 贡献
+
+请参阅[贡献指南](./CONTRIBUTING.md)了解如何开始。一如既往，感谢我们出色的贡献者！
+
+<a href="https://github.com/jaywcjlove/reference/graphs/contributors">
+  <img src="https://jaywcjlove.github.io/reference/CONTRIBUTORS.svg" />
+</a>
+
+上图贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成贡献者图片。
+
 ## License
 
 MIT © [Kenny Wong](https://github.com/jaywcjlove)

docs/bash.md

@@ -34,11 +34,9 @@ NAME = "John"   # => Error (关于空间)
 
 ### 注释
 
-```bash
-# 这是一个内联 Bash 注释。
-```
-
 ```shell
+# 这是一个内联 Bash 注释。
+
 : '
 这是一个
 非常整洁的评论

docs/chmod.md

@@ -31,10 +31,21 @@ $ chmod -R 755 my_directory
 
 ### Chmod 生成器
 
-```html
-
+```html preview
+<div>
+权限：<input type="text" id="num" placeholder="777" maxlength="3" style="padding: 0.3rem 0.3rem;" /> <input type="text" id="let" placeholder="rwxrwxrwx" maxlength="9" style="padding: 0.3rem 0.3rem;" />
+</div>
 ```
 
+---
+
+&nbsp; | User | Group | Other
+:- | :- | :- | :-
+读 _(Read)_ | <input checked id="1" type="checkbox"></input> | <input checked id="4" type="checkbox"></input> | <input checked id="7" type="checkbox"></input>
+写 _(Write)_ | <input checked id="2" type="checkbox"></input> | <input checked id="5" type="checkbox"></input> | <input checked id="8" type="checkbox"></input>
+执行 _(Execute)_ | <input checked id="3" type="checkbox"></input> | <input checked id="6" type="checkbox"></input> | <input checked id="9" type="checkbox"></input>
+<!--rehype:className=show-header-->
+
 Chmod 生成器允许您以数字和符号的形式快速、直观地生成权限。
 
 ### 通用权限
@@ -263,4 +274,233 @@ $ find /path -type f -exec chmod 644 {} \;
 另见
 ----
 
-* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
+* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
+
+<!--rehype:ignore:start-->
+### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+<!--rehype:ignore:end-->
+
+```html preview
+<!-- Chmod 生成器 JS 代码 -->
+<script type="text/javascript">
+  const reg_num = /^[0-7]{3}$/; // 一些正则表达式来检查 num 输入
+  const reg_let = /^([r\-]{1}[w\-]{1}[x\-]{1}){3}$/; // 一些正则表达式来检查文本输入
+  function checkBoxHandle() {
+    change_occured(true, false, false);
+    // get rid of bad input classes
+    document.getElementById('num').classList.remove('bad-input');
+    document.getElementById('let').classList.remove('bad-input');
+  }
+  window.addEventListener("DOMContentLoaded", function () {
+    // loop over all the check boxes
+    for (let i = 1; i < 10; i++) {
+      let checkBox = document.getElementById(`${i}`);
+      checkBox.addEventListener('change', function () {
+        change_occured(true, false, false);
+
+        // get rid of bad input classes
+        document.getElementById('num').classList.remove('bad-input');
+
+        document.getElementById('let').classList.remove('bad-input');
+      });
+    }
+    // the octal input
+    let num_input = document.getElementById('num');
+    let num_fn = function () {
+      // check for bad input
+      if (!reg_num.test(this.value)) {
+        this.classList.add('bad-input');
+      } else {
+        this.classList.remove('bad-input');
+        change_occured(false, true, false);
+      }
+    };
+    num_input.addEventListener('change', num_fn);
+    num_input.addEventListener('keyup', num_fn);
+    // the let input
+    let let_input = document.getElementById('let');
+    let let_fn = function () {
+      // check for bad input
+      if (!reg_let.test(this.value)) {
+        this.classList.add('bad-input');
+      } else {
+        this.classList.remove('bad-input');
+        change_occured(false, false, true);
+      }
+    };
+    let_input.addEventListener('change',let_fn);
+    let_input.addEventListener('keyup',let_fn);
+  });
+  /* SETUP
+  r-4-1  r-4-4  r-4-7
+  w-2-2  w-2-5  w-2-8
+  x-1-3  x-1-6  x-1-9
+  */
+  // define a function that runs when a change occures
+  function change_occured(caller_was_check, caller_was_num, caller_was_let) {
+    let num1 = 0, num2 = 0, num3 = 0; // these are the three numbers for the octal
+    let perm_string = ''; // holds the permision string ex. rw-x--r--
+    if (caller_was_check) {
+      // loop over all the check boxes and get the permisions
+      for (let i = 1; i < 10; i++) {
+        let checkBox = document.getElementById(`${i}`);
+        if (checkBox.checked) { // if checked
+          let current_perm = check_to_octal_and_text(i);
+          perm_string += `${current_perm.perm_let}`;
+          if (i <= 3) {
+            num1 += current_perm.perm_num;
+          } else if (i <= 6) {
+            num2 += current_perm.perm_num;
+          } else {
+            num3 += current_perm.perm_num;
+          }
+        } else { // if not checked
+          perm_string += '-';
+        }
+      }
+      // set the permision input text
+      document.getElementById('let').value = perm_string;
+      document.getElementById('num').value = `${num1}${num2}${num3}`;
+    } else if (caller_was_num) {
+      // get the individual numbers
+      let num_input_val = document.getElementById('num').value;
+      num1 = num_input_val.substring(0, 1);
+      num2 = num_input_val.substring(1, 2);
+      num3 = num_input_val.substring(2, 3);
+      // set the checkboxes and get the perm string
+      perm_string += octal_to_check_and_txt(num1, 0); //Owner
+      perm_string += octal_to_check_and_txt(num2, 1); //Owner
+      perm_string += octal_to_check_and_txt(num3, 2); //Owner
+      // set the permision input text
+      document.getElementById('let').value = perm_string;
+    } else if (caller_was_let) {
+      // get the text input
+      let perm_text = document.getElementById('let').value;
+      num1 = text_to_check_and_octal(perm_text.substring(0, 3), 0)
+      num2 = text_to_check_and_octal(perm_text.substring(3, 6), 3)
+      num3 = text_to_check_and_octal(perm_text.substring(6, 9), 6)
+      // set the octal value
+      document.getElementById('num').value = `${num1}${num2}${num3}`;
+    }
+  }
+  // define a function to converts the checkbox # to the respective permissions
+  // returns perm_num, perm_let
+  function check_to_octal_and_text(check_num) {
+    let perm_num = 0;
+    let perm_let = '-';
+    switch (check_num) {
+      case 1:
+      case 4:
+      case 7:
+        perm_num = 4;
+        perm_let = 'r';
+        break;
+      case 2:
+      case 5:
+      case 8:
+        perm_num = 2;
+        perm_let = 'w';
+        break;
+      case 3:
+      case 6:
+      case 9:
+        perm_num = 1;
+        perm_let = 'x';
+        break;
+      default:
+        perm_num = 0;
+        perm_let = '-';
+    }
+    // return values
+    return {
+      perm_num,
+      perm_let
+    };
+  }
+  /**
+   Takes a number 1-7 and which class it is in:
+   0 = owner
+   1 = Group
+   2 = Public
+   Returns: perm text (ex. "rwx") and sets the appropriate checkboxes
+   */
+  function octal_to_check_and_txt(octal_num, class_num) {
+    let perm_text = '';
+    let offset = class_num * 3;
+    switch (octal_num) {
+      case '1':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = '--x';
+        break;
+      case '2':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = '-w-';
+        break;
+      case '3':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = '-wx';
+        break;
+      case '4':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = 'r--';
+        break;
+      case '5':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = 'r-x';
+        break;
+      case '6':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = 'rw-';
+        break;
+      case '7':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = 'rwx';
+        break;
+      default:
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = '---';
+    }
+    return perm_text;
+  }
+  /**
+   Takes 3 letters (r, w, x, -    ex. 'rw-') and an offset (0,3,6)
+   Returns the octal num and sets the appropriate checkboxes
+   */
+  function text_to_check_and_octal(letters, offset) {
+    let perm_num = 0; // the octal number to return
+    // add up the oct num and set the check boxes
+    for (let i = 0; i < 3; i++) {
+      current_let = letters.substring(i, i + 1);
+      if (current_let == 'r') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 4;
+      } else if (current_let == 'w') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 2;
+      } else if (current_let == 'x') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 1;
+      } else {
+        document.getElementById(`${i + 1 + offset}`).checked = false;
+      }
+    }
+    return perm_num;
+  }
+</script>
+```

docs/cron.md

@@ -95,7 +95,7 @@ Min  Hour Day  Mon  Weekday
 `L`       | 仅允许用于 `月份中的某天` 或 `星期几` 字段，`星期几` 中的 `2L` 表示每个月的最后一个星期二
 `井号 (#)` | 仅允许用于 `星期几` 字段，后面必须在 1 到 5 的范围内。例如，`4#1` 表示给定月份的“第一个星期四”。
 `问号(?)`  | 可以代替“*”并允许用于月份和星期几。使用仅限于 cron 表达式中的 `月份中的某天` 或 `星期几`。
-<!--rehype:className=show-header -->
+<!--rehype:className=show-header auto-wrap-->
 
 
 ## Also see

docs/curl.md

@@ -0,0 +1,230 @@
+Curl 备忘清单
+===
+
+此 [Curl](https://github.com/curl/curl) 备忘清单包含命令和一些常见的 Curl 技巧示例。
+
+入门
+----
+
+### 介绍
+
+Curl 是一种在服务器之间传输数据的工具，支持协议，包括 HTTP/FTP/IMAP/LDAP/POP3/SCP/SFTP/SMB/SMTP 等
+
+- [Curl GitHub 源码仓库](https://github.com/curl/curl) _(github.com)_
+- [Curl 官方网站](https://curl.se/) _(curl.se)_
+
+
+### Options
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```bash
+-o <file>    # --output: 写入文件
+-u user:pass # --user: 验证
+```
+
+---
+
+```bash
+-v           # --verbose: 在操作期间使 curl 冗长
+-vv          # 更冗长
+-s           # --silent: 不显示进度表或错误
+-S           # --show-error: 与 --silent (-sS) 一起使用时，显示错误但没有进度表
+```
+
+---
+
+```bash
+-i           # --include: 在输出中包含 HTTP 标头
+-I           # --head: 仅标头
+```
+
+### 请求
+
+```bash
+-X POST # --request
+-L  # 如果页面重定向，请点击链接
+-F  # --form: multipart/form-data 的 HTTP POST 数据
+```
+<!--rehype:className=wrap-text -->
+
+### 数据
+
+```bash
+# --data: HTTP post 数据
+# URL 编码(例如，status="Hello")
+-d 'data'
+
+# --data 通过文件
+-d @file
+
+# --get: 通过 get 发送 -d 数据
+-G
+```
+
+### 头信息 Headers
+
+```bash
+-A <str>         # --user-agent
+
+-b name=val      # --cookie
+
+-b FILE          # --cookie
+
+-H "X-Foo: y"    # --header
+
+--compressed     # 使用 deflate/gzip
+```
+
+### SSL
+
+```bash
+    --cacert <file>
+    --capath <dir>
+```
+
+```bash
+-E, --cert <cert>     # --cert: 客户端证书文件
+    --cert-type       # der/pem/eng
+-k, --insecure        # 对于自签名证书
+```
+
+#### 安装
+
+```bash
+apk add --update curl  # alpine linux 中安装
+```
+
+示例
+----
+<!--rehype:body-class=cols-6-->
+
+### CURL GET/HEAD
+<!--rehype:wrap-class=col-span-4 row-span-2-->
+
+命令 | 说明
+:- | :-
+`curl -I https://www.baidu.com` | `curl` 发请求
+`curl -v -I https://www.baidu.com` | 带有详细信息的 `curl` 发请求
+`curl -X GET https://www.baidu.com` | 使用显式 http 方法进行 `curl`
+`curl --noproxy 127.0.0.1 http://www.stackoverflow.com` | 没有 http 代理的 `curl`
+`curl --connect-timeout 10 -I -k https://www.baidu.com` | `curl` 默认没有超时
+`curl --verbose --header "Host: www.mytest.com:8182" www.baidu.com` | `curl` 得到额外的标题
+`curl -k -v https://www.google.com` | `curl` 获取带有标题的响应
+<!--rehype:class=auto-wrap-->
+
+### 多文件上传
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ curl -v -include \
+    --form key1=value1 \
+    --form upload=@localfilename URL
+```
+
+### 为 curl 响应美化 json 输出
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ curl -XGET http://${elasticsearch_ip}:9200/_cluster/nodes | python -m json.tool
+```
+<!--rehype:className=wrap-text -->
+
+### CURL POST
+<!--rehype:wrap-class=col-span-4-->
+
+命令 | 说明
+:- | :-
+`curl -d "name=username&password=123456" <URL>` | `curl` 发请求
+`curl <URL> -H "content-type: application/json" -d "{ \"woof\": \"bark\"}"` | `curl` 发送 json
+<!--rehype:class=auto-wrap-->
+
+### CURL 脚本安装 rvm
+<!--rehype:wrap-class=col-span-2-->
+
+```shell
+curl -sSL https://get.rvm.io | bash
+```
+
+### CURL 高级
+<!--rehype:wrap-class=col-span-6-->
+
+命令 | 说明
+:- | :-
+`curl -L -s http://ipecho.net/plain, curl -L -s http://whatismijnip.nl` | 获取我的公共 `IP`
+`curl -u $username:$password http://repo.dennyzhang.com/README.txt` | 带凭证的 `curl` 
+`curl -v -F key1=value1 -F upload=@localfilename <URL>` | `curl` 上传
+`curl -k -v --http2 https://www.google.com/` | 使用 http2 curl 
+`curl -T cryptopp552.zip -u test:test ftp://10.32.99.187/` | curl `ftp` 上传
+`curl -u test:test ftp://10.32.99.187/cryptopp552.zip -o cryptopp552.zip` | curl `ftp` 下载
+`curl -v -u admin:admin123 --upload-file package1.zip http://mysever:8081/dir/package1.zip` | 使用凭证 `curl` 上传
+<!--rehype:class=auto-wrap-->
+
+### 检查网站响应时间
+<!--rehype:wrap-class=col-span-4-->
+
+```shell
+curl -s -w \
+     '\nLookup time:\t%{time_namelookup}\nConnect time:\t%{time_connect}\nAppCon time:\t%{time_appconnect}\nRedirect time:\t%{time_redirect}\nPreXfer time:\t%{time_pretransfer}\nStartXfer time:\t%{time_starttransfer}\n\nTotal time:\t%{time_total}\n' \
+     -o /dev/null https://www.google.com
+```
+<!--rehype:className=wrap-text -->
+
+### 使用 Curl 检查远程资源是否可用
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+curl -o /dev/null --silent -Iw "%{http_code}" https://example.com/my.remote.tarball.gz
+```
+<!--rehype:className=wrap-text -->
+
+### 正在下载文件
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl https://example.com | \
+grep --only-matching 'src="[^"]*.[png]"' | \
+cut -d\" -f2 | \
+while read i; do curl https://example.com/"${i}" \
+-o "${i##*/}"; done
+```
+
+从站点下载所有 PNG 文件（使用GNU grep）
+
+### 下载文件，保存文件而不更改其名称
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl --remote-name "https://example.com/linux-distro.iso"
+```
+
+重命名文件
+
+```bash
+curl --remote-name "http://example.com/index.html" --output foo.html
+```
+
+### 继续部分下载
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl --remote-name --continue-at - "https://example.com/linux-distro.iso"
+```
+<!--rehype:className=wrap-text -->
+
+### 从多个域下载文件
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl "https://www.{example,w3,iana}.org/index.html" --output "file_#1.html"
+```
+<!--rehype:className=wrap-text -->
+
+### 下载一系列文件
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+curl "https://{foo,bar}.com/file_[1-4].webp" --output "#1_#2.webp"
+```
+<!--rehype:className=wrap-text -->
+
+下载一系列文件（输出`foo_file1.webp`、`foo_file2.webp…bar_file1_webp`等）

docs/docker.md

@@ -25,12 +25,13 @@ $ docker run -d -p 80:80 docker/getting-started
 在前台创建并运行容器
 
 ```shell
-$ docker run -it -p 8001:8080 --name my-nginx nginx
+$ docker run -it -p --rm 8001:8080 --name my-nginx nginx
 ```
 
 ----
 
 - `-it` - 交互式 bash 模式
+- `--rm` - 容器终止运行后自动删除容器文件
 - `-p 8001:8080` - 将 `8001` 端口映射到容器中的 `8080` 端口
 - `--name my-nginx` - 指定名称
 - `nginx` - 要使用的镜像
@@ -231,17 +232,17 @@ docker network create -d overlay \
 `docker login             ` | 向 docker hub 进行身份验证
 `docker push user/image   ` | 将镜像上传到 docker hub。
 
-### 注册表命令
+### 镜像仓库命令
 <!--rehype:wrap-class=row-span-3-->
 
-登录到注册表
+登录到镜像仓库
 
 ```shell
 $ docker login
 $ docker login localhost:8080
 ```
 
-从注册表注销
+从镜像仓库注销
 
 ```shell
 $ docker logout
@@ -291,6 +292,64 @@ $ docker volume ls
 $ docker volume prune
 ```
 
+### Docker Compose
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`docker-compose up` | 创建和启动容器
+`docker-compose up -d` | 以分离模式创建和启动容器
+`docker-compose down` | 停止和删除容器、网络、映像和卷
+`docker-compose logs` | 查看容器的输出
+`docker-compose restart` | 重启所有服务
+`docker-compose pull` | 拉取所有图片服务
+`docker-compose build` | 构建所有图像服务
+`docker-compose config` | 验证并查看 Compose 文件
+`docker-compose scale <service_name>=<replica>` | 规模特殊服务
+`docker-compose top` | 显示正在运行的进程
+`docker-compose run -rm -p 2022:22 web bash` | 启动 Web 服务并运行 bash 作为其命令，删除旧容器。
+
+### Docker Services
+
+:- | :-
+:- | :-
+`docker service create <options> <image> <command>`   | 创建新服务
+`docker service inspect --pretty <service_name>`      | 显示详细信息服务
+`docker service ls`                                   | 列出服务
+`docker service ps`                                   | 列出服务的任务
+`docker service scale <service_name>=<replica>`       | 规模特殊服务
+`docker service update <options> <service_name>`      | 更新服务选项
+
+### Docker Stack
+
+:- | :-
+:- | :-
+`docker stack ls`                                 | 列出此 Docker 主机上所有正在运行的应用程序
+`docker stack deploy -c <composefile> <appname>`  | 运行指定的 Compose 文件
+`docker stack services <appname>`                 | 列出与应用关联的服务
+`docker stack ps <appname>`                       | 列出与应用关联的正在运行的容器
+`docker stack rm <appname>`                       | 拆掉一个应用程序
+
+### Docker Machine
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`docker-machine create --driver virtualbox myvm1`                           | 创建虚拟机（Mac、Win7、Linux）
+`docker-machine create -d hyperv --hyperv-virtual-switch "myswitch" myvm1`  | Win10
+`docker-machine env myvm1`                                                  | 查看有关您的节点的基本信息
+`docker-machine ssh myvm1 "docker node ls"`                                 | 列出集群中的节点
+`docker-machine ssh myvm1 "docker node inspect <node ID>"`                  | 检查节点
+`docker-machine ssh myvm1 "docker swarm join-token -q worker"`              | 查看加入令牌
+`docker-machine ssh myvm1`                                                  | 打开与 VM 的 SSH 会话； 输入“exit”结束
+`docker-machine ssh myvm2 "docker swarm leave"`                             | 让工人离开群体
+`docker-machine ssh myvm1 "docker swarm leave -f"`                          | 让主人离开，杀群
+`docker-machine start myvm1`                                                | 启动当前未运行的 VM
+`docker-machine stop $(docker-machine ls -q)`                               | 停止所有正在运行的虚拟机
+`docker-machine rm $(docker-machine ls -q)`                                 | 删除所有虚拟机及其磁盘映像
+`docker-machine scp docker-compose.yml myvm1:~`                             | 将文件复制到节点的主目录
+`docker-machine ssh myvm1 "docker stack deploy -c <file> <app>"`            | 部署应用
+
 另见
 ----
 

docs/dockerfile.md

@@ -110,6 +110,7 @@ RUN true | false  # 将脱离管道
 `CMD ["executable","param1","param2"]` | (exec 形式，这是首选形式)
 `CMD ["param1","param2"]` | (作为 ENTRYPOINT 的默认参数)
 `CMD command param1 param2` | (shell形式)
+<!--rehype:class=auto-wrap-->
 
 ```dockerfile
 EXPOSE 5900
@@ -185,6 +186,7 @@ temp?
 `*/temp*` | 在根的任何直接子目录中<br />排除名称以 `temp` 开头的文件和目录
 `*/*/temp*` | 从根以下两级的任何子目录中<br />排除以 `temp` 开头的文件和目录
 `temp?` | 排除根目录中名称为<br /> `temp` 的单字符扩展名的文件和目录
+<!--rehype:class=auto-wrap-->
 
 如果此文件存在，排除与其中的模式匹配的文件和目录，有利于避免 `ADD` 或 `COPY` 将敏感文件添加到镜像中。匹配是使用 Go 的 [filepath.Match](https://golang.org/pkg/path/filepath#Match) 规则完成的。
 
@@ -203,6 +205,7 @@ temp?
 `CMD command param1 param2` | 设置默认命令
 `ENV <key>=<value> ...` | 设置环境变量
 `EXPOSE <port> [<port>/<protocol>...]` | 运行时侦听指定的网络端口
+<!--rehype:class=auto-wrap-->
 
 ### 服务静态网站的最小 Docker 镜像
 <!--rehype:wrap-class=col-span-2-->

docs/electron.md

@@ -0,0 +1,738 @@
+Electron 备忘清单
+====
+
+此快速参考备忘单提供了 Electron v21 API 说明和使用示例。
+
+
+入门
+----
+
+### 快速开始
+<!--rehype:wrap-class=row-span-4-->
+
+[Electron](https://www.electronjs.org/) 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架
+
+#### 创建你的应用程序
+
+- 安装
+  ```bash
+  mkdir my-app && cd my-app
+  npm init
+  ```
+  在项目根目录会生成 `package.json`
+  ```json
+  {
+    "name": "my-app",
+    "version": "1.0.0",
+    "description": "Hello World!",
+    "main": "main.js",
+    "author": "Jane Doe",
+    "license": "MIT"
+  }
+  ```
+- 安装依赖包
+  ```bash
+  npm install --save-dev electron
+  ```
+- 添加开发模式打开您的应用命令
+  ```js
+  "scripts": {
+    "start": "electron ."
+  }
+  ```
+- 运行命令，启动应用程序
+  ```bash
+  npm start
+  ```
+  入口都是 `main` 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中
+- 创建 `index.html` 页面
+  ```html
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="UTF-8">
+      <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+      <title>Hello World!</title>
+    </head>
+    <body>
+      <h1>Hello World!</h1>
+    </body>
+  </html>
+  ```
+- 窗口中打开您的页面
+  ```js
+  const {
+    app,
+    BrowserWindow
+  } = require('electron');
+  
+  const createWindow = () => {
+    const win = new BrowserWindow({
+      width: 800,
+      height: 600
+    });
+    win.loadFile('index.html');
+  }
+
+  app.whenReady().then(() => {
+    createWindow()
+  })
+  ```
+<!--rehype:className=style-timeline-->
+
+### 关闭所有窗口时退出应用
+
+```js
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+```
+
+### 创建无边框窗口
+
+```js
+const win = new BrowserWindow({
+  frame: false
+})
+```
+
+### 自定义标题栏样式
+
+```js
+const win = new BrowserWindow({
+  titleBarStyle: 'hidden'
+})
+```
+
+### 控制红绿灯 (macOS)
+
+```js
+const win = new BrowserWindow({
+  titleBarStyle: 'customButtonsOnHover'
+})
+```
+
+### 通过预加载脚本从渲染器访问 Node.js
+<!--rehype:wrap-class=col-span-2-->
+
+创建一个名为 preload.js 的新脚本如下
+
+```js
+window.addEventListener('DOMContentLoaded', () => {
+  const replaceText = (selector, text) => {
+    const element = document.getElementById(selector)
+    if (element) element.innerText = text
+  }
+
+  for (const dependency of ['chrome', 'node', 'electron']) {
+    replaceText(`${dependency}-version`, process.versions[dependency])
+  }
+})
+```
+
+在创建窗口方法中传递 `preload` 参数
+
+```js
+const path = require('path')
+
+const createWindow = () => {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  win.loadFile('index.html')
+}
+```
+
+### 将的 process.versions 对象暴露给渲染器
+
+```js
+const { contextBridge } = require('electron')
+
+contextBridge.exposeInMainWorld(
+  'versions', {
+    // 能暴露的不仅仅是函数，我们还可以暴露变量
+    node: 
+      () => process.versions.node,
+    chrome: 
+      () => process.versions.chrome,
+    electron: 
+      () => process.versions.electron,
+  }
+);
+```
+
+通过 `preload.js` 脚本将 `versions` 这一全局变量暴露给渲染器
+
+### 启用拼写检查器
+
+```js
+const myWindow = new BrowserWindow({
+  webPreferences: {
+    spellcheck: true
+  }
+})
+```
+
+设置拼写检查器以检查英语 和 法语
+
+```js
+myWindow.session
+  .setSpellCheckerLanguages([
+    'en-US', 'fr'
+  ])
+```
+
+app
+---
+<!--rehype:body-class=cols-6-->
+
+### 事件绑定方法使用示例
+<!--rehype:wrap-class=col-span-3-->
+
+```js
+const { app } = require('electron');
+
+app.on('session-created', (session) => {
+  console.log(session);
+})
+
+// 立即重启当前实例并向新的实例添加新的命令行参数的示例
+app.relaunch({
+  args: process.argv.slice(1).concat(['--relaunch']);
+})
+
+app.exit(0);
+```
+
+### 方法
+<!--rehype:wrap-class=col-span-3 row-span-4-->
+
+:- | :-
+:- | :-
+`quit` | 尝试关闭所有窗口 [#](https://www.electronjs.org/zh/docs/latest/api/app#appquit)
+`exit` | 使用 exitCode 立即退出 [#](https://www.electronjs.org/zh/docs/latest/api/app#appexitexitcode)
+`relaunch` | 当前实例退出，重启应用 [#](https://www.electronjs.org/zh/docs/latest/api/app#apprelaunchoptions)
+`isReady` | 已完成初始化返回 boolean [#](https://www.electronjs.org/zh/docs/latest/api/app#appisready)
+`whenReady` | 初始化完成 [#](https://www.electronjs.org/zh/docs/latest/api/app#appwhenready)
+`focus` | 获得焦点/激活的 app [#](https://www.electronjs.org/zh/docs/latest/api/app#appfocusoptions)
+`hide` | 隐藏所有的应用窗口，不是最小化 [#](https://www.electronjs.org/zh/docs/latest/api/app#apphide-macos)
+`isHidden` _(mac)_ | 所有窗口是否都被隐藏 [#](https://www.electronjs.org/zh/docs/latest/api/app#appishidden)
+`show` _(mac)_ | 显示隐藏后的应用程序窗口 [#](https://www.electronjs.org/zh/docs/latest/api/app#appshow-macos)
+`setAppLogsPath` | 设置或创建一个您的应用程序日志目录 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetapplogspathpath)
+`getAppPath` | 获取当前应用程序目录 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetapppath)
+`getPath(name)` | 与 name 关联的目录或文件的路径 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetpathname)
+`getFileIcon` | 一个 NativeImage 类型的应用图标 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetfileiconpath-options)
+`setPath(name)` | 重写 name 的路径特定文件夹或文件 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetpathname-path)
+`getVersion` | 应用程序的版本号 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetversion)
+`getName` | 应用程序的名称 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetname)
+`setName` | 设置当前应用程序的名字 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetname)
+`getLocale` | 当前应用程序区域 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetlocale)
+`getLocaleCountryCode` | 获取双字母 [ISO 3166](https://www.iso.org/iso-3166-country-codes.html) 国家代码 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetlocalecountrycode)
+`getSystemLocale` | 当前系统语言环境 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetsystemlocale)
+`addRecentDocument` _(win/mac)_ | 最近打开的文件列表添加新路径 [#](https://www.electronjs.org/zh/docs/latest/api/app#appaddrecentdocumentpath-macos-windows)
+`clearRecentDocuments` _(win/mac)_ | 清空最近打开的文档列表[#](https://www.electronjs.org/zh/docs/latest/api/app#appclearrecentdocuments)
+`setAsDefaultProtocolClient` | 设置协议(URI scheme)默认处理程序 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetasdefaultprotocolclientprotocol-path-args)
+`removeAsDefaultProtocolClient` | 移除默认处理器 [#](https://www.electronjs.org/zh/docs/latest/api/app#appremoveasdefaultprotocolclientprotocol-path-args-macos-windows)
+`isDefaultProtocolClient` | 可执行程序是否是协议 [#](https://www.electronjs.org/zh/docs/latest/api/app#appisdefaultprotocolclientprotocol-path-args)
+`getApplicationNameForProtocol` | 返回默认处理器的应用程序名称 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetapplicationnameforprotocolurl)
+`getApplicationInfoForProtocol` _(win/mac)_ | 返回包含应用程序名称 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetapplicationinfoforprotocolurl-macos-windows)
+`setUserTasks` _(win)_ | 添加 tasks 到Jump List的Tasks类别 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetusertaskstasks-windows)
+`getJumpListSettings` _(win)_ | 获取跳转列表 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetjumplistsettings-windows)
+`setJumpList` _(win)_ | 设置跳转列表 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetjumplistcategories-windows)
+`requestSingleInstanceLock` | 返回应用程序实例是否成功取了锁 [#](https://www.electronjs.org/zh/docs/latest/api/app#apprequestsingleinstancelockadditionaldata)
+`hasSingleInstanceLock` | 返回应用实例当前是否持有单例锁 [#](https://www.electronjs.org/zh/docs/latest/api/app#apphassingleinstancelock)
+`releaseSingleInstanceLock` | 释放所有创建的锁 [#](https://www.electronjs.org/zh/docs/latest/api/app#appreleasesingleinstancelock)
+`setUserActivity` _(mac)_ | 创建 NSUserActivity 并将其设置为当前活动 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetuseractivitytype-userinfo-webpageurl-macos)
+`getCurrentActivityType` _(mac)_ | 正在运行的 activity 的类型 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetcurrentactivitytype-macos)
+`invalidateCurrentActivity` _(mac)_ | 使当前的Handoff用户活动无效 [#](https://www.electronjs.org/zh/docs/latest/api/app#appinvalidatecurrentactivity-macos)
+`resignCurrentActivity` _(mac)_ | 将当前 Handoff 用户活动标记为非活动，但不使其失效 [#](https://www.electronjs.org/zh/docs/latest/api/app#appresigncurrentactivity-macos)
+`updateCurrentActivity` _(mac)_ | 将项目从 用户信息 合并到其当前 用户信息 字典中 [#](https://www.electronjs.org/zh/docs/latest/api/app#appupdatecurrentactivitytype-userinfo-macos)
+`setAppUserModelId` _(win)_ | 改变当前应用的 Application User Model ID 为 id [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetappusermodelidid-windows)
+`setActivationPolicy` _(mac)_ | 为给定应用设置激活策略 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetactivationpolicypolicy-macos)
+`importCertificate` _(linux)_ | 将 pkcs12 格式的证书导入到平台证书库 [#](https://www.electronjs.org/zh/docs/latest/api/app#appimportcertificateoptions-callback-linux)
+`configureHostResolver` | 配置主机解析器 (DNS 和 DNS-over-HTTPS) [#](https://www.electronjs.org/zh/docs/latest/api/app#appconfigurehostresolveroptions)
+`disableHardwareAcceleration` | 禁用当前应用程序的硬件加速 [#](https://www.electronjs.org/zh/docs/latest/api/app#appdisablehardwareacceleration)
+`disableDomainBlockingFor3DAPIs` | GPU 进程频繁崩溃，在每个域的基础上重新启动，禁用该行为 [#](https://www.electronjs.org/zh/docs/latest/api/app#appdisabledomainblockingfor3dapis)
+`getAppMetrics` | 返回 [ProcessMetric[]](https://www.electronjs.org/zh/docs/latest/api/structures/process-metric) [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetappmetrics)
+`getGPUFeatureStatus` | 返回 [GPUFeatureStatus](https://www.electronjs.org/zh/docs/latest/api/structures/gpu-feature-status) [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetgpufeaturestatus)
+`getGPUInfo` | GPU 信息 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetgpuinfoinfotype)
+`setBadgeCount` _(mac/linux)_ | 应用设置计数器角标 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetbadgecountcount-linux-macos)
+`getBadgeCount` _(mac/linux)_ | 获取计数器(badge)显示的当前值 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetbadgecount-linux-macos)
+`isUnityRunning` _(linux)_ | 前桌面环境是否为 Unity 启动器 [#](https://www.electronjs.org/zh/docs/latest/api/app#appisunityrunning)
+`getLoginItemSettings` _(mac/win)_ | 为 openAtLogin 设置相同的参数已确保正确的设置 [#](https://www.electronjs.org/zh/docs/latest/api/app#appgetloginitemsettingsoptions-macos-windows)
+`setLoginItemSettings` _(mac/win)_ | 传递指定应用程序名称的参数 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetloginitemsettingssettings-macos-windows)
+`isAccessibilitySupportEnabled` _(mac/win)_ | 是否开启了辅助功能 [#](https://www.electronjs.org/zh/docs/latest/api/app#appisaccessibilitysupportenabled-macos-windows)
+`setAccessibilitySupportEnabled` _(mac/win)_ | 启用或禁用访问权限树视图 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetaccessibilitysupportenabledenabled-macos-windows)
+`showAboutPanel` | 显示程序的"关于"面板选项 [#](https://www.electronjs.org/zh/docs/latest/api/app#appshowaboutpanel)
+`setAboutPanelOptions` | 设置 "关于" 面板选项 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetaboutpaneloptionsoptions)
+`isEmojiPanelSupported` | 当前操作系统是否支持本地 emoji 选择器 [#](https://www.electronjs.org/zh/docs/latest/api/app#appisemojipanelsupported)
+`showEmojiPanel` _(mac/win)_ | 打开系统自身的emjio选取器 [#](https://www.electronjs.org/zh/docs/latest/api/app#appshowemojipanel)
+`startAccessingSecurityScopedResource` _(mac)_ | 开始访问安全范围内的资源 [#](https://www.electronjs.org/zh/docs/latest/api/app#appstartaccessingsecurityscopedresourcebookmarkdata-macos)
+`enableSandbox` | 在应用程序上启用完全沙盒模式 [#](https://www.electronjs.org/zh/docs/latest/api/app#appenablesandbox)
+`isInApplicationsFolder` _(mac)_ | 是否从系统应用程序文件夹运行 [#](https://www.electronjs.org/zh/docs/latest/api/app#appisinapplicationsfolder-macos)
+`moveToApplicationsFolder` _(mac)_ | [#](https://www.electronjs.org/zh/docs/latest/api/app#appmovetoapplicationsfolderoptions-macos)
+`isSecureKeyboardEntryEnabled` _(mac)_ | 是否已启用安全键盘输入 [#](https://www.electronjs.org/zh/docs/latest/api/app#appissecurekeyboardentryenabled-macos)
+`setSecureKeyboardEntryEnabled` _(mac)_ | 在应用中启用安全键盘输入 [#](https://www.electronjs.org/zh/docs/latest/api/app#appsetsecurekeyboardentryenabledenabled-macos)
+
+### 启动时激活主实例窗口的示例
+<!--rehype:wrap-class=col-span-3-->
+
+```js
+const { app } = require('electron');
+let myWindow = null;
+
+const additionalData = { myKey: 'myValue' };
+const gotTheLock = app.requestSingleInstanceLock(additionalData);
+
+if (!gotTheLock) {
+  app.quit();
+} else {
+  app.on(
+    'second-instance',
+    (event, commandLine, workingDirectory, additionalData) => {
+      // 输出从第二个实例中接收到的数据
+      console.log(additionalData);
+
+      // 有人试图运行第二个实例，我们应该关注我们的窗口
+      if (myWindow) {
+        if (myWindow.isMinimized()) myWindow.restore();
+        myWindow.focus();
+      }
+    }
+  )
+
+  // 创建 myWindow, 加载应用的其余部分, etc...
+  app.whenReady().then(() => {
+    myWindow = createWindow();
+  })
+}
+```
+
+### 事件
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :-
+:- | :-
+`will-finish-launching` | 基础的启动的时候被触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-will-finish-launching)
+`ready` | 完成初始化时，触发一次 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-ready)
+`window-all-closed` | 在程序关闭窗口前发信号 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-window-all-closed)
+`before-quit` | 当所有窗口被关闭后触发，应用程序将退出 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-before-quit)
+`will-quit` | 所有窗口被关闭后触发，应用程序将退出 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-will-quit)
+`quit` | 在应用程序退出时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-quit)
+`open-file` _(mac)_ | 在应用中打开一个文件时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-open-file-macos)
+`open-url` _(mac)_ | 应用中打开一个 URL 时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-open-url-macos)
+`activate` _(mac)_ | 当应用被激活时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-activate-macos)
+`did-become-active` _(mac)_ | 不同设备的活动想要恢复时在切换期间触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-did-become-active-macos)
+`continue-activity` _(mac)_ | 不同设备的活动通过 Handoff 想要恢复时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-continue-activity-macos)
+`will-continue-activity` _(mac)_ | 恢复来自不同设备的活动之前在切换期间触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-will-continue-activity-macos)
+`continue-activity-error` _(mac)_ | 不同设备的活动无法恢复时在切换期间触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-continue-activity-error-macos)
+`activity-was-continued` _(mac)_ | 活动在另一个设备上成功恢复后切换期间触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-activity-was-continued-macos)
+`update-activity-state` _(mac)_ | 当即将在另一台设备上恢复切换时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-update-activity-state-macos)
+`new-window-for-tab` _(mac)_ | 用户点击原生的 macOS 新标签按钮时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-new-window-for-tab-macos)
+`browser-window-blur` | 当 browserWindow 变得模糊时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-browser-window-blur)
+`browser-window-focus` | 当 browserWindow 获得焦点时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-browser-window-focus)
+`browser-window-created` | 创建新的 browserWindow 时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-browser-window-created)
+`web-contents-created` | 创建新的 webContents 时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-web-contents-created)
+`certificate-error` | 当对 url 的 certificate 证书验证失败触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-certificate-error)
+`select-client-certificate` | 当一个客户证书被请求的时候发出 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-select-client-certificate)
+`login` | 当 webContents 要进行基本身份验证时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-login)
+`gpu-info-update` | 每当有 GPU 信息更新时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-gpu-info-update)
+~~`gpu-process-crashed`~~ ~~废弃~~ | 当 gpu 进程崩溃或关闭(杀死)时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-gpu-process-crashed-已废弃)
+~~`renderer-process-crashed`~~ ~~废弃~~ | 渲染器进程崩溃或关闭(杀死)时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-renderer-process-crashed-已废弃)
+`render-process-gone` | 渲染器进程意外消失时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-render-process-gone)
+`child-process-gone` | 子进程意外消失时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-child-process-gone)
+`accessibility-support-changed` | 当 Chrome 的辅助功能状态改变时触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-accessibility-support-changed--macos---windows-)
+`session-created` | 创建了一个新的 session 后被触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-session-created)
+`second-instance` | 在你的应用程序的首个实例中触发 [#](https://www.electronjs.org/zh/docs/latest/api/app#事件-second-instance)
+
+### 属性
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :-
+:- | :-
+`accessibilitySupportEnabled` _(mac/win)_ | 是否开启了辅助功能 [#](https://www.electronjs.org/zh/docs/latest/api/app#appaccessibilitysupportenabled-macos-windows)
+`applicationMenu` | 传递 Menu 来给此属性赋值 [#](https://www.electronjs.org/zh/docs/latest/api/app#appapplicationmenu)
+`badgeCount` _(mac/linux)_ | 返回应用角标计数的 Integer 属性 [#](https://www.electronjs.org/zh/docs/latest/api/app#appbadgecount-linux-macos)
+`commandLine` | Chromium 使用的命令行参数 [#](https://www.electronjs.org/zh/docs/latest/api/app#appcommandline-只读)
+`dock` _(mac/只读)_ | 用户dock中对应用图标进行操作 [#](https://www.electronjs.org/zh/docs/latest/api/app#appdock-macos-只读)
+`isPackaged` _(只读)_ | 应用是否已经打包 [#](https://www.electronjs.org/zh/docs/latest/api/app#appispackaged-只读)
+`name` | 当前应用程序的名称 [#](https://www.electronjs.org/zh/docs/latest/api/app#appname)
+`userAgentFallback` | 全局回退的用户代理字符串 [#](https://www.electronjs.org/zh/docs/latest/api/app#appuseragentfallback)
+~~`runningUnderRosettaTranslation`~~ _(mac)_ | 提示下载应用程序的 arm64 版本 [#](https://www.electronjs.org/zh/docs/latest/api/app#apprunningunderrosettatranslation-macos-只读-弃用)
+`runningUnderARM64Translation` _(mac/win)_ | 前应用正在使用 ARM64 运行环境 [#](https://www.electronjs.org/zh/docs/latest/api/app#apprunningunderarm64translation-只读-macos-windows)
+
+BrowserWindow
+----
+<!--rehype:body-class=cols-6-->
+
+### 参数
+<!--rehype:wrap-class=col-span-3 row-span-2-->
+
+:- | :-
+:- | :-
+`width` _整数_ | 窗口的宽度(以像素为单位)。默认值 _(800)_
+`height` _整数_ | 窗口的高度(以像素为单位)。默认值 _(600)_
+`x` _整数_ (**可选**) | 窗口相对于屏幕左侧偏移量。默认值窗口居中
+`y` _整数_ (**可选**) | 窗口相对于屏幕顶端偏移量。默认值窗口居中
+`useContentSize` _boolean_ | _(宽)_ 和 _(高)_ 设置为web页面的尺寸。默认值 _(false)_
+`center` _boolean_ | 窗口是否在屏幕居中。默认值 _(false)_
+`minHeight`  _整数_ | 窗口的最小高度。默认值 _(0)_
+`maxWidth `  _整数_ | 窗口的最大宽度。默认值不限
+`maxHeight ` _整数_ | 窗口的最大高度。默认值不限
+`resizable` _boolean_ | 窗口大小是否可调整。默认值 _(true)_
+`movable` _boolean_ _(win/mac)_ | 窗口是否可移动。默认值 _(true)_
+`minimizable` _boolean_ _(win/mac)_ | 窗口是否可最小化。默认值 _(true)_
+`maximizable` _boolean_ _(win/mac)_ | 窗口是否最大化。默认值 _(true)_
+`closable` _boolean_ _(win/mac)_ | 窗口是否可关闭。默认值 _(true)_
+`focusable` _boolean_ | 窗口是否可以聚焦. 默认值 _(true)_。在 Windows 中设置 _(focusable: false)_ 也意味着设置了 _(skipTaskbar: true)_ 在 Linux 中设置 _(focusable: false)_ 时窗口停止与 wm 交互, 并且窗口将始终置顶
+`alwaysOnTop` _boolean_ | 窗口是否永远在别的窗口的上面。默认值 _(false)_
+`fullscreen` _boolean_ | 窗口是否全屏。为 _(false)_ 时 macOS 上按钮将被隐藏或禁用。默认值 _(false)_
+`fullscreenable` _boolean_ | 窗口是否可以进入全屏状态。macOS上，最大化/缩放按钮是否可用 默认值 _(true)_
+`simpleFullscreen` _boolean_ _(mac)_ | 在 macOS 上使用 pre-Lion 全屏。默认值 _(false)_
+`skipTaskbar` _boolean_ _(win/mac)_ | 是否在任务栏中显示窗口。默认值 _(false)_
+`kiosk` _boolean_ | 窗口是否进入kiosk模式。默认值 _(false)_
+`title` _string_ | 默认窗口标题 默认为 _("Electron")_ 。如果由 _(loadURL())_ 加载的HTML文件中含有标签 _(&lt;title&gt;)_ ，此属性将被忽略
+`icon` _NativeImage/string_ | 窗口图标。在 Windows 上推荐使用 _(ICO)_ 图标来获得最佳的视觉效果, 默认使用可执行文件的图标
+`show` _boolean_ | 窗口是否在创建时显示。默认值 _(true)_
+`paintWhenInitiallyHidden` _boolean_ | 当 _(show)_ 为 _(false)_ 并且渲染器刚刚被创建时，它是否应激活。为了让 _(document.visibilityState)_ 在 _(show: false)_ 的情况下第一次加载时正确地工作，你应该把这个设置成 _(false)_。设置为 _(false)_ 将会导致 _(ready-to-show)_ 事件不触发。默认值 _(true)_
+`frame` _boolean_ | 设置为 _(false)_ 时可以创建一个无边框窗口，默认值 _(true)_
+`parent` _BrowserWindow_ | 指定父窗口 默认值 _(null)_
+`modal` _boolean_ | 当前是否为模态窗口。只有当窗口是子窗口时才起作用。默认值 _(false)_
+`acceptFirstMouse` _boolean_ _(mac)_ | 点击 非活动窗口是否会穿透到 web contents。默认值 _(false)_
+`disableAutoHideCursor` _boolean_ | 是否在打字时隐藏光标。默认值 _(false)_
+`autoHideMenuBar` _boolean_ | 自动隐藏菜单栏，除非按了_(Alt)_键。默认值 _(false)_
+`enableLargerThanScreen` _boolean_ _(mac)_  | 使窗口尺寸可大于屏幕的大小。其他操作系统默认允许大于屏幕的窗口。默认值 _(false)_
+`backgroundColor` _string_ | 窗口背景色，格式为 Hex, RGB, RGBA, HSL, HSLA 或 CSS 命名颜色。如果 _(transparent)_ 设置为 _(true)_，则支持 #AARRGGBB 格式的透明。默认值 _(#FFF)_（白色）
+`hasShadow` _boolean_ | 窗口是否有阴影. 默认值 _(true)_
+`opacity` _number_ _(win/mac)_ | 设置窗口的初始透明度，在 0.0（全透明）和 1.0（完全不透明）之间 。 目前仅在 Windows 和 macOS上实现。
+`darkTheme` _boolean_ | 强制窗口使用深色主题，只在部分GTK+3桌面环境下有效。 默认值 _(false)_.
+`transparent` _boolean_ | 使窗口 <a href="/zh/docs/latest/tutorial/window-customization#create-transparent-windows">透明</a>。 默认值 _(false)_. 在Windows上，仅在无边框窗口下起作用。
+`type` _string_ | 窗口的类型, 默认为普通窗口. 更多信息见下文
+`visualEffectState` _string_ _(mac)_ | 在 macOS 上指定外观应如何响应窗口活动状态。 必须与 _(vibrancy)_ 属性一起使用。 可能的值有
+`  visualEffectState.followWindow` | 当窗口处于激活状态时，后台应自动显示为激活状态，当窗口处于非激活状态时，后台应自动显示为非激活状态。 默认为该值。
+`  visualEffectState.active` | 后台应一直显示为激活状态。
+`  visualEffectState.inactive` | 后台应一直显示为非激活状态。
+`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
+`  titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
+`  titleBarStyle.hidden` | 在一个隐藏的标题栏和一个全尺寸大小的内容窗口中取得结果。 在 macOS 内, 窗口将一直拥有位于左上的标准窗口控制器 _(“traffic lights”)_。 在 Windows上，当与 _(titleBarOverlay: true)_ 合并时，它将激活窗口控件叠加(详情请参阅 _(titleBarOverlay)_)，否则将不会显示窗口控件。
+`  titleBarStyle.hiddenInset` _(mac)_ | 隐藏标题栏，使用窗口边缘稍微小的红绿灯按钮替代。
+`  titleBarStyle.customButtonsOnHover` _(mac)_ | 隐藏的标题栏的全尺寸的内容窗口， 红绿灯按钮在鼠标悬停在窗口左上方时显示。**注意:**此选项目前是实验性的。
+`trafficLightPosition` _Point_ _(mac)_ | 在无边框窗口中设置灯绿灯按钮位置。
+`roundedCorners` _boolean_ _(mac)_ | 无边框窗口在 macOS 上，是否应该有圆角。 默认值为 _(true)_。 属性设置为 _(false)_ ，将阻止窗口是可全屏的。
+~~`fullscreenWindowTitle`~~ _boolean_ _(mac)_ ~~_已弃用_~~ | _titleBarStyle_ 设置为 _(hiddenInset)_ 时，在 macOS 全屏模式下标题栏显示标题。默认值为 _(false)_.
+`thickFrame` _boolean_ | 对 Windows 上的无框窗口使用 _(WS_THICKFRAME)_ 样式，会增加标准窗口框架。 设置为 _(false)_ 时将移除窗口的阴影和动画. 默认值为 _(true)_。
+`vibrancy` _string_ _(mac)_ | 为窗口添加一种类型的动态效果，仅 macOS。 可以是 _(appearance-based)_，_(light)_，_(dark)_，_(titlebar)_，_(selection)_，_(menu)_，_(popover)_，_(sidebar)_，_(medium-light)_，_(ultra-dark)_，_(header)_，_(sheet)_，_(window)_，_(hud)_，_(fullscreen-ui)_，_(tooltip)_，_(content)_，_(under-window)_ 或 _(under-page)_。 请注意 _(appearance-based)_，_(light)_，_(dark)_，_(medium-light)_ 和 _(ultra-dark)_ 已弃用，在 macOS Catalina (10.15) 中已经移除。
+`zoomToPageWidth` _boolean_ _(mac)_ | 在 macOS 上控制，当按住 option 点击工具栏绿色红绿灯按钮或点击窗口 &gt; 放大菜单项的行为。 如果为 _(true)_，窗口为将会缩放到适合宽度，若为 _(false)_ 将会放大到屏幕宽度。 这也会影响，直接调用 _(maximize())_ 的行为。 默认值为 _(false)_.
+`tabbingIdentifier` _string_ _(mac)_ | 选项卡组名称，允许在原生选择卡中打开窗口，macOS 10.12+ 支持。 Windows 中，有相同选项卡标识的将会组合在一起。 这会添加一个原生新增选项卡按钮到你窗口的选项卡栏，同时 _(app)_ 和窗口允许接收 _(new-window-for-tab)_ 事件。
+`webPreferences` _Object_ | 网页功能设置。
+`   webPreferences.devTools` _boolean_ | 是否开启 DevTools. 如果设置为 _(false)_, 则无法使用 _(BrowserWindow.webContents.openDevTools ())_ 打开 DevTools。 默认值为 _(true)_。
+`   webPreferences.nodeIntegration` _boolean_ | 是否启用Node integration. 默认值为 _(false)_.
+`   webPreferences.nodeIntegrationInWorker` _boolean_ | 是否在Web工作器中启用了Node集成. 默认值为 _(false)_. 更多内容参见 [多线程](https://www.electronjs.org/docs/latest/tutorial/multithreading)
+`   webPreferences.nodeIntegrationInSubFrames` _boolean_ **_实验性_**| 是否允许在子页面(iframe)或子窗口(child window)中集成Node.js； 预先加载的脚本会被注入到每一个iframe，你可以用 _(process.isMainFrame)_ 来判断当前是否处于主框架（main frame）中。
+`   webPreferences.preload` _string_ | 在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。 当 node integration 关闭时, 预加载的脚本将从全局范围重新引入node的全局引用标志[参考示例](https://www.electronjs.org/docs/latest/api/context-bridge#exposing-node-global-symbols)
+`   webPreferences.sandbox` _boolean_ | 如果设置该参数, 沙箱的渲染器将与窗口关联, 使它与Chromium OS-level 的沙箱兼容, 并禁用 Node. js 引擎。 它与 _(nodeIntegration)_ 的选项不同，且预加载脚本的 API 也有限制。[更多详情](https://www.electronjs.org/docs/latest/tutorial/sandbox)
+`   webPreferences.session` | [Session](https://www.electronjs.org/docs/latest/api/session#class-session) 设置页面的 session 而不是直接忽略 Session 对象, 也可用 _(partition)_ 选项来代替，它接受一个 partition 字符串. 同时设置了_(session)_ 和 _(partition)_时, _(session)_ 的优先级更高. 默认使用默认的 session.
+`   webPreferences.partition` |  string (optional) - 通过 session 的 partition 字符串来设置界面session. 如果 _(partition)_ 以 _(persist:)_开头, 该页面将使用持续的 session，并在所有页面生效，且使用同一个_(partition)_. 如果没有 _(persist:)_ 前缀, 页面将使用 in-memory session. 通过分配相同的 _(partition)_, 多个页可以共享同一会话。 默认使用默认的 session.
+`   webPreferences.zoomFactor` _number_ | 页面的默认缩放系数, _(3.0)_ 表示 _(300%)_。 默认值为 _(1.0)_.
+`   webPreferences.javascript` _boolean_ | 是否启用 JavaScript 支持。 默认值为 _(true)_。
+`   webPreferences.webSecurity` _boolean_ | 当设置为 _(false)_, 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的，还会把 _(allowRunningInsecureContent)_设置为 _(true)_. 默认值为 _(true)_
+`   webPreferences.allowRunningInsecureContent` _boolean_ | 允许一个 https 页面运行来自http url的JavaScript, CSS 或 plugins。 默认值为 _(false)_
+`   webPreferences.images` _boolean_ | 允许加载图片。 默认值为 _(true)_
+`   webPreferences.imageAnimationPolicy` _string_ | 指定如何运行图像动画 (比如： GIF等).  可以是 _(animate)_, _(animateOnce)_ 或 _(noAnimation)_。默认值为 _(animate)_
+`   webPreferences.textAreasAreResizable` _boolean_ | 允许调整 TextArea 元素大小。 默认值为 _(true)_
+`   webPreferences.webgl` _boolean_ | 启用 WebGL 支持。 默认值为 _(true)_
+`   webPreferences.plugins` _boolean_ | 是否应该启用插件。 默认值为 _(false)_
+`   webPreferences.experimentalFeatures` _boolean_ | 启用 Chromium 的实验功能。 默认值为 _(false)_
+`   webPreferences.scrollBounce` _boolean_ _(mac)_ | 启用滚动回弹（橡皮筋）效果。 默认值为 _(false)_
+`   webPreferences.enableBlinkFeatures`_string_ | 以 _(逗号)_ 分隔的需要启用的特性列表，譬如 _(CSSVariables,KeyboardEventKey)_ 在 [RuntimeEnabledFeatures.json5](https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/runtime_enabled_features.json5?l=70) 文件中查看被支持的所有特性
+`   webPreferences.disableBlinkFeatures` _string_ | 以 _(,)_ 分隔的禁用特性列表, 如 _(CSSVariables,KeyboardEventKey)_ 在 [RuntimeEnabledFeatures.json5](https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/runtime_enabled_features.json5?l=70) 文件中查看被支持的所有特性
+`defaultFontFamily` _Object_ | 为 font-family 设置默认字体
+`   defaultFontFamily.standard` _string_ |默认值为 _(Times New Roman)_
+`   defaultFontFamily.serif` _string_ | 默认值为 _(Times New Roman)_
+`   defaultFontFamily.sansSerif` _string_ | 默认值为 _(Arial)_
+`   defaultFontFamily.monospace` _string_ | 默认值为 _(Courier New)_
+`   defaultFontFamily.cursive` _string_ | 默认值为 _(Script)_
+`   defaultFontFamily.fantasy` _string_ | 默认值为 _(Impact)_
+`defaultFontSize` _Integer_ | 默认值为 _(16)_
+`defaultMonospaceFontSize` _Integer_ | 默认值为 _(13)_
+`minimumFontSize` _Integer_ | 默认值为 _(0)_
+`defaultEncoding` _string_ | 默认值为 _(ISO-8859-1)_
+`backgroundThrottling` _boolean_ | 是否在页面成为背景时限制动画和计时器。 这也会影响到 _[Visibility API](https://www.electronjs.org/docs/latest/api/browser-window#page-visibility)_。默认值为 _(true)_
+`offscreen` _boolean_ | 是否绘制和渲染可视区域外的窗口。默认值为 _(false)_。更多详情, 请参见 [offscreen rendering tutorial](https://www.electronjs.org/docs/latest/tutorial/offscreen-rendering)
+`contextIsolation` _boolean_ | 是否在独立 JavaScript 环境中运行 Electron API和指定的_(preload)_ 脚本。默认为 _(true)_。 _(预加载)_脚本所运行的上下文环境只能访问其自身专用的 _(文档)_ 和全局 _(窗口)_，其自身一系列内置的JavaScript (_(Array)_, _(Object)_, _(JSON)_, 等等) 也是如此，这些对于已加载的内容都是不可见的。 Electron API 将只在_(预加载)_脚本中可用，在已加载页面中不可用。 这个选项应被用于加载可能不被信任的远程内容时来确保加载的内容无法篡改_(预加载)_脚本和任何正在使用的Electron api。  该选项使用的是与[Chrome内容脚本](https://developer.chrome.com/extensions/content_scripts#execution-environment)相同的技术。你可以在开发者工具Console选项卡内顶部组合框中选择 'Electron Isolated Context'条目来访问这个上下文
+`webviewTag` _boolean_ | 是否启用 [_(&lt;webview&gt;)_ tag](https://www.electronjs.org/docs/latest/api/webview-tag)标签。默认值为 _(false)_。**注意:** 为 _(&lt; webview&gt;)_ 配置的 _(preload)_ 脚本在执行时将启用节点集成, 因此应确保远程或不受信任的内容无法创建恶意的 _(preload)_ 脚本 。 可以使用 [webContents](https://www.electronjs.org/docs/latest/api/web-contents) 上的 _(will-attach-webview)_ 事件对 _(preload)_ 脚本进行剥离, 并验证或更改 _(&lt;webview&gt;)_ 的初始设置
+`additionalArguments` _string[]_ | strin一个将被附加到当前应用程序的渲染器进程中_(process.argv)_的字符串列表。可用于将少量的数据传递到渲染器进程预加载脚本中。
+`safeDialogs` _boolean_ | 是否启用浏览器样式的持续对话框保护。 默认值为 _(false)_
+`safeDialogsMessage` _string_ | 当持续对话框保护被触发时显示的消息。 如果没有定义，那么将使用缺省的消息。注意：当前缺省消息是英文，并没有本地化
+`disableDialogs` _boolean_ | 是否完全禁用对话框。 覆盖 _(safeDialogs)_。 默认值为 _(false)_
+`navigateOnDragDrop` _boolean_ | 将文件或链接拖放到页面上时是否触发页面跳转。 默认值为 _(false)_
+`autoplayPolicy` _string_ | 窗口中内容要使用的自动播放策略，值可以是 _(no-user-gesture-required)_, _(user-gesture-required)_, _(document-user-activation-required)_。默认为 _(no-user-gesture-required)_
+`disableHtmlFullscreenWindowResize` _boolean_ | 是否阻止窗口在进入 HTML 全屏时调整大小。默认值为 _(false)_
+`accessibleTitle` _string_ | 仅提供给如屏幕读取器等辅助工具的替代标题字符串。此字符串不直接对用户可见
+`spellcheck` _boolean_ | 是否启用内置拼写检查器。 默认值为 _(true)_
+`enableWebSQL` _boolean_ | 是否启用 [WebSQL api](https://www.w3.org/TR/webdatabase/)。 默认值为 _(true)_
+`v8CacheOptions` _string_ | 强制 blink 使用 v8 代码缓存策略。 可接受的值为：
+`   v8CacheOptions.none` | 禁用代码缓存
+`   v8CacheOptions.code` | 基于启发式代码缓存
+`   v8CacheOptions.bypassHeatCheck` | 绕过启发式代码缓存，但使用懒编译。
+`   v8CacheOptions.bypassHeatCheckAndEagerCompile` | 与上面相同，除了编译是及时的。 默认策略是 _(code)_
+`enablePreferredSizeMode` _boolean_ | 是否启用首选大小模式。 首选大小是包含文档布局所需的最小大小--无需滚动。 启用该属性将导致在首选大小发生变化时，在 _(WebContents)_ 上触发 _(preferred-size-changed)_ 事件。默认值为 _(false)_
+`titleBarOverlay` _Object/Boolean_ | 当在 macOS 使用无框窗口结合 _(win.setWindowButtonVisibility(true))_ 或使用 _(titleBarStyle)_ 以便标准窗口控制 (在 macOS为 "traffic lights") 可见，此属性将启用 Window Controls Overlay [JavaScript APIs](https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis) 和 [CSS Environment Variables](https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables)。指定 _(true)_ 将导致覆盖默认系统颜色。 默认值为 _(false)_
+`color` _String_ _(win)_ | 启用窗口控制时覆盖面的 CSS 颜色 默认是系统颜色
+`symbolColor` _String_ _(win)_ | 启用时窗口控制中符号的 CSS 颜色 默认是系统颜色
+`height` _Integer_ _(win/mac)_ | 标题栏和 Window Controls Overlay，以像素为单位。 默认值为系统高度
+<!--rehype:className=style-list-->
+
+### 实例事件
+<!--rehype:wrap-class=col-span-3-->
+
+```js
+const { BrowserWindow } = require('electron')
+
+const child = new BrowserWindow({ modal: true, show: false })
+child.loadURL('https://github.com')
+child.once('ready-to-show', () => {
+  child.show()
+})
+```
+
+----
+
+:- | :-
+:- | :-
+`page-title-updated` | 文档更改标题时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-page-title-updated)
+`close` | 在窗口要关闭的时候触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-close)
+`closed` | 在窗口关闭时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-closed)
+`session-end` _(win)_ | 因为强制关机/重启/会话注销而导致窗口会话结束时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-session-end-windows)
+`unresponsive` | 网页变得未响应时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-unresponsive)
+`responsive` | 未响应的页面变成响应时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-responsive)
+`blur` | 当窗口失去焦点时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-blur)
+`focus` | 当窗口获得焦点时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-focus)
+`show` | 当窗口显示时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-show)
+`hide` | 当窗口隐藏时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-hide)
+`ready-to-show` | 当页面已经渲染完成(还没有显示)窗口可以被显示时触发[#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-ready-to-show)
+`maximize` | 窗口最大化时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-maximize)
+`unmaximize` | 当窗口从最大化状态退出时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-unmaximize)
+`minimize` | 窗口最小化时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-minimize)
+`restore` | 当窗口从最小化状态恢复时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-restore)
+`will-resize` _(mac/win)_ | 调整窗口大小前触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-will-resize-macos-windows)
+`resize` | 调整窗口大小后触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-resize)
+`resized` _(mac/win)_ | 当窗口完成调整大小后触发一次 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件resized-macos-windows)
+`will-move` _(mac/win)_ | 窗口移动前触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-will-move-macos-windows)
+`move` | 窗口移动到新位置时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-move)
+`moved` _(mac/win)_ | 当窗口移动到新位置时触发一次 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-moved-macos-windows)
+`enter-full-screen` | 窗口进入全屏状态时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-enter-full-screen)
+`leave-full-screen` | 窗口离开全屏状态时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-leave-full-screen)
+`enter-html-full-screen` | 窗口进入由HTML API 触发的全屏状态时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-enter-html-full-screen)
+`leave-html-full-screen` | 窗口离开由HTML API触发的全屏状态时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-leave-html-full-screen)
+`always-on-top-changed` | 设置或取消设置窗口总是在其他窗口的顶部显示时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-always-on-top-changed)
+`app-command` | 请求一个应用程序命令时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-app-command-windows__linux)
+`scroll-touch-begin` _(mac)_ | 滚轮事件阶段开始时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-scroll-touch-begin-macos)
+`scroll-touch-end` _(mac)_ | 滚轮事件阶段结束时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-scroll-touch-end-macos)
+`scroll-touch-edge` _(mac)_ | 滚轮事件阶段到达元素边缘时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-scroll-touch-edge-macos)
+`swipe` | 三指滑动时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-swipe-macos)
+`rotate-gesture` _(mac)_ | 在触控板旋转手势上触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-rotate-gesture-macos)
+`sheet-begin` _(mac)_ | 窗口打开sheet(工作表) 时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-sheet-begin-macos)
+`sheet-end` _(mac)_ | 窗口关闭sheet(工作表) 时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-sheet-end-macos)
+`new-window-for-tab` _(mac)_ | 当点击了系统的新标签按钮时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-new-window-for-tab-macos)
+`system-context-menu` _(win)_ | 当系统上下文菜单在窗口上触发时触发 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#事件-system-context-menu-windows)
+
+### 实例方法
+<!--rehype:wrap-class=col-span-3 row-span-3-->
+
+:- | :-
+:- | :-
+`win.destroy()` | 强制关闭窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#windestroy)
+`win.close()` | 尝试关闭窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winclose)
+`win.focus()` | 聚焦于窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winfocus)
+`win.blur()` | 取消窗口的聚焦 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winblur)
+`win.isFocused()` | 判断窗口是否聚焦 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisfocused)
+`win.isDestroyed()` | 判断窗口是否被销毁 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisdestroyed)
+`win.show()` | 显示并聚焦于窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winshow)
+`win.showInactive()` | 显示但不聚焦于窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winshowinactive)
+`win.hide()` | 隐藏窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winhide)
+`win.isVisible()` | 判断窗口是否可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisvisible)
+`win.isModal()` | 判断是否为模态窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winismodal)
+`win.maximize()` | 最大化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmaximize)
+`win.unmaximize()` | 取消窗口最大化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winunmaximize)
+`win.isMaximized()` | 判断窗口是否最大化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winismaximized)
+`win.minimize()` | 最小化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winminimize)
+`win.restore()` | 窗口最小化状态恢复到以前的状态 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winrestore)
+`win.isMinimized()` | 判断窗口是否最小化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisminimized)
+`win.setFullScreen(flag)` | 设置窗口是否应处于全屏模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetfullscreenflag)
+`win.isFullScreen()` | 窗口当前是否已全屏 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisfullscreen)
+`win.setSimpleFullScreen(flag)` _(mac)_ | 进入或离开简单的全屏模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetsimplefullscreenflag-macos)
+`win.isSimpleFullScreen()` |  窗口是否为简单全屏模式(pre-Lion) [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winissimplefullscreen-macos)
+`win.isNormal()` | 窗口是否处于正常状态（未最大化，未最小化，不在全屏模式下） [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisnormal)
+`win.setAspectRatio(aspectRatio[, extraSize])` | 为内容视图保持的宽高比 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetaspectratioaspectratio-extrasize)
+`win.setBackgroundColor(backgroundColor)` | 颜色，格式为 Hex，RGB，RGBA，HSL，HSLA 或 CSS 命名颜色 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetbackgroundcolorbackgroundcolor)
+`win.previewFile(path[, displayName])` _(mac)_ | 要用 QuickLook 预览的文件的绝对路径 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winpreviewfilepath-displayname-macos)
+`win.closeFilePreview()` _(mac)_ | 关闭当前打开的 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winclosefilepreview-macos)
+`win.setBounds(bounds[, animate])` | 重置窗口，并且移动窗口到指定的位置 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetboundsbounds-animate)
+`win.getBounds()` | 表示窗口的 `bounds` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetbounds)
+`win.getBackgroundColor()` | 格式获取窗口的背景色，格式为 Hex (`#RRGGBB`) [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetbackgroundcolor)
+`win.setContentBounds(bounds[, animate])` | 调整窗口的工作区 (如网页) 的大小并将其移动到所提供的边界。 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetcontentboundsbounds-animate)
+`win.getContentBounds()` | 窗口客户端区域的 `bounds` `对象` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetcontentbounds)
+`win.getNormalBounds()` | 包含正常状态下的窗口大小 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetnormalbounds)
+`win.setEnabled(enable)` | 禁用或者启用窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetenabledenable)
+`win.isEnabled()` | 窗口是否启用 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisenabled)
+`win.setSize(width, height[, animate])` | 调整窗口的 `width` 和 `height` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetsizewidth-height-animate)
+`win.getSize()` | 包含窗口的宽度和高度 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetsize)
+`win.setContentSize(width, height[, animate])` | 将窗口的工作区 (如网页) 的大小调整为 `width` 和 `height` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetcontentsizewidth-height-animate)
+`win.getContentSize()` | 包含窗口的宽度和高度 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetcontentsize)
+`win.setMinimumSize(width, height)` | 设置窗口最小化的 `width` 和 `height` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetminimumsizewidth-height)
+`win.getMinimumSize()` | 包含窗口最小化的宽度和高度 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetminimumsize)
+`win.setMaximumSize(width, height)` | 设置窗口最大化的 `width` 和 `height` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetmaximumsizewidth-height)
+`win.getMaximumSize()` | 包含窗口最大化的宽度和高度 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetmaximumsize)
+`win.setResizable(resizable)` | 设置用户是否可以手动调整窗口大小 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetresizableresizable)
+`win.isResizable()` | 用户是否可以手动调整窗口大小 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisresizable)
+`win.setMovable(movable)` _(mac/win)_ | 设置用户是否可以移动窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetmovablemovable-macos-windows)
+`win.isMovable()` _(mac/win)_ | 窗口是否可以被用户拖动，在 Linux 上总是返回 `true` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winismovable-macos-windows)
+`win.setMinimizable(minimizable)` _(mac/win)_ | 设置用户是否可以手动将窗口最小化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetminimizableminimizable-macos-windows)
+`win.isMinimizable()` _(mac/win)_ | 用户是否可以手动最小化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisminimizable-macos-windows)
+`win.setMaximizable(maximizable)` _(mac/win)_ | 设置用户是否可以手动最大化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetmaximizablemaximizable-macos-windows)
+`win.isMaximizable()` _(mac/win)_ | 窗口是否可以最大化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winismaximizable-macos-windows)
+`win.setFullScreenable(fullscreenable)` | 设置最大化/缩放窗口按钮是切换全屏模式还是最大化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetfullscreenablefullscreenable)
+`win.isFullScreenable()` | 最大化/缩放窗口按钮是切换全屏模式还是最大化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisfullscreenable)
+`win.setClosable(closable)` _(mac/win)_ | 设置用户是否可以手动关闭窗口。 在Linux上不起作用 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetclosableclosable-macos-windows)
+`win.isClosable()` _(mac/win)_ | 窗口是否被用户关闭了 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisclosable-macos-windows)
+`win.setAlwaysOnTop(flag[, level][, relativeLevel])` | 设置窗口是否应始终显示在其他窗口的前面 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetalwaysontopflag-level-relativelevel)
+`win.isAlwaysOnTop()` | 当前窗口是否始终在其它窗口之前 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisalwaysontop)
+`win.moveAbove(mediaSourceId)` | 将窗口按z轴顺序移动到源窗口前面 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmoveabovemediasourceid)
+`win.moveTop()` | 无论焦点如何, 将窗口移至顶端(z轴上的顺序) [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmovetop)
+`win.center()` | 将窗口移动到屏幕中央 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wincenter)
+`win.setPosition(x, y[, animate])` | 将窗口移动到 `x` 和 `y` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetpositionx-y-animate)
+`win.getPosition()` | 返回一个包含当前窗口位置的数组 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetposition)
+`win.setTitle(title)` | 将原生窗口的标题更改为 `title` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsettitletitle)
+`win.getTitle()` | 网页的标题可以与原生窗口的标题不同 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingettitle)
+`win.setSheetOffset(offsetY[, offsetX])` _(mac/win)_ | 改变macOS上sheet组件的附着点，默认情况下，sheet贴在窗口边框正下方 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetsheetoffsetoffsety-offsetx-macos)
+`win.flashFrame(flag)` | 启动或停止闪烁窗口, 以吸引用户的注意 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winflashframeflag)
+`win.setSkipTaskbar(skip)` _(mac/win)_ | 使窗口不显示在任务栏中 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetskiptaskbarskip-macos-windows)
+`win.setKiosk(flag)` | 进入或离开 kiosk 模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetkioskflag)
+`win.isKiosk()` | 判断窗口是否处于kiosk模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winiskiosk)
+`win.isTabletMode()` _(win)_ | 此 API 返回 窗口是否在平板电脑模式下，并且 调整大小 事件可以用于监听对平板模式的更改 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winistabletmode-windows)
+`win.getMediaSourceId()` | DesktopCapturerSource 的 `id` 格式的窗口 `id` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetmediasourceid)
+`win.getNativeWindowHandle()` | 窗口的平台特定句柄 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetnativewindowhandle)
+`win.hookWindowMessage(message, callback)` _(win)_ | 钩住窗口消息。 当消息到达 WndProc 时调用 callback [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winhookwindowmessagemessage-callback-windows)
+`win.isWindowMessageHooked(message)` _(win)_ | 返回 boolean - true 或false，具体取决于是否钩挂了消息 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winiswindowmessagehookedmessage-windows)
+`win.unhookWindowMessage(message)` _(win)_ | 取消窗口信息的钩子 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winunhookwindowmessagemessage-windows)
+`win.unhookAllWindowMessages()` _(win)_ | 取消所有窗口信息的钩子 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winunhookallwindowmessages-windows)
+`win.setRepresentedFilename(filename)` _(mac)_ | 设置窗口所代表的文件的路径名，并且将这个文件的图标放在窗口标题栏上 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetrepresentedfilenamefilename-macos)
+`win.getRepresentedFilename()` _(mac)_ | 获取窗口当前文件路径 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetrepresentedfilename-macos)
+`win.setDocumentEdited(edited)` _(mac)_ | 明确指出窗口文档是否可以编辑，如果设置为true则将标题栏的图标变成灰色 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetdocumenteditededited-macos)
+`win.isDocumentEdited()` _(mac)_ | 判断当前窗口文档是否可编辑 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisdocumentedited-macos)
+`win.focusOnWebView()` | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winfocusonwebview)
+`win.blurWebView()` | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winblurwebview)
+`win.capturePage([rect])` | 在 rect 内捕获页面的快照 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wincapturepagerect)
+`win.loadURL(url[, options])` | 加载页面 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winloadurlurl-options)
+`win.loadFile(filePath[, options])` | 加载页面 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winloadfilefilepath-options)
+`win.reload()` | 与 `webContents.reload` 相同 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winreload)
+`win.setMenu(menu)` _(win/linux)_ | 将 `menu` 设置为窗口的菜单栏 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetmenumenu-linux-windows)
+`win.removeMenu()` _(win)_ | 删除窗口的菜单栏 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winremovemenu-linux-windows)
+`win.setProgressBar(progress[, options])` | 设置进度条的进度值 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetprogressbarprogress-options)
+`win.setOverlayIcon(overlay, description)` _(win)_ | 设置进度条的进度值。 有效范围为 `[0, 1.0]` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetoverlayiconoverlay-description-windows)
+`win.setHasShadow(hasShadow)` | 设置窗口是否有阴影 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsethasshadowhasshadow)
+`win.hasShadow()` | 判断窗口是否有阴影 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winhasshadow)
+`win.setOpacity(opacity)` _(win/mac)_ | 设置窗口的不透明度。 在Linux上不起作用。 超出界限的数值被限制在 `[0, 1]` 范围内 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetopacityopacity-windows-macos)
+`win.getOpacity()` | 介于 `0.0` (完全透明) 和 `1.0` (完全不透明) 之间。在Linux上，始终返回 `1` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetopacity)
+`win.setShape(rects)` _(win/linux)_ | 对窗口形状的设置决定了窗口内系统允许绘制与用户交互的区域 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetshaperects-windows-linux-实验性)
+`win.setThumbarButtons(buttons)` _(win)_ | 将指定的一组按钮添加到菜单栏的缩图工具栏上 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetthumbarbuttonsbuttons-windows)
+`win.setThumbnailClip(region)` _(win)_ | 将窗口的区域设置为在任务栏中悬停在窗口上方时显示的缩略图图像 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetthumbnailclipregion-windows)
+`win.setThumbnailToolTip(toolTip)` _(win)_ | 设置在任务栏中悬停在窗口缩略图上时显示的工具提示 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetthumbnailtooltiptooltip-windows)
+`win.setAppDetails(options)` _(win)_ | 设置窗口任务栏按钮的属性 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetappdetailsoptions-windows)
+`win.showDefinitionForSelection()` _(mac)_ | 和 `webContents.showDefinitionForSelection()` 相同 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winshowdefinitionforselection-macos)
+`win.setIcon(icon)` _(win/linux)_ | 设置窗口图标 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winseticonicon-windows-linux)
+`win.setWindowButtonVisibility(visible)` _(mac)_ | 设置是否窗口交通灯需要显示 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetwindowbuttonvisibilityvisible-macos)
+`win.setAutoHideMenuBar(hide)` _(win/linux)_ | 设置窗口菜单栏是否自动隐藏 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetautohidemenubarhide-windows-linux)
+`win.isMenuBarAutoHide()` _(win/linux)_ | 判断窗口的菜单栏是否自动隐藏 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winismenubarautohide-windows-linux)
+`win.setMenuBarVisibility(visible)` _(win/linux)_ | 设置菜单栏是否可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetmenubarvisibilityvisible-windows-linux)
+`win.isMenuBarVisible()` _(win/linux)_ | 判断窗口的菜单栏是否可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winismenubarvisible-windows-linux)
+`win.setVisibleOnAllWorkspaces(visible[, options])` _(mac/linux)_ | 设置窗口是否在所有工作空间上可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetvisibleonallworkspacesvisible-options-macos-linux)
+`win.isVisibleOnAllWorkspaces()` _(mac/linux)_ | 判断窗口是否在所有工作空间上可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisvisibleonallworkspaces-macos-linux)
+`win.setIgnoreMouseEvents(ignore[, options])` | 忽略窗口内的所有鼠标事件 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetignoremouseeventsignore-options)
+`win.setContentProtection(enable)` _(mac/linux)_ | 防止窗口内容被其他应用捕获 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetcontentprotectionenable-macos-windows)
+`win.setFocusable(focusable)` _(mac/linux)_ | 设置窗口是否可聚焦 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetfocusablefocusable-macos-windows)
+`win.isFocusable()` _(mac/linux)_ | 返回当前窗口是否可以作为焦点被选中 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winisfocusable-macos-windows)
+`win.setParentWindow(parent)` | 设置 `parent` 为当前窗口的父窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetparentwindowparent)
+`win.getParentWindow()` | 返回 BrowserWindow/null - 如果没有父窗口则为 `null` [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetparentwindow)
+`win.getChildWindows()` | 返回 `BrowserWindow[]` - 首页的子窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetchildwindows)
+`win.setAutoHideCursor(autoHide)` _(mac)_ | 设置输入时是否隐藏光标 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetautohidecursorautohide-macos)
+`win.selectPreviousTab()` _(mac)_ | 当启用本地选项卡，并且窗口中有另一个标签时，选择上一个选项卡 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winselectprevioustab-macos)
+`win.selectNextTab()` _(mac)_ | 当启用本地选项卡，并且窗口中有另一个标签时，选择下一个选项卡 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winselectnexttab-macos)
+`win.mergeAllWindows()` _(mac)_ | 当启用本地选项卡并且存在多个打开窗口时，将所有窗口合并到一个带有多个选项卡的窗口中 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmergeallwindows-macos)
+`win.moveTabToNewWindow()` _(mac)_ | 如果启用了本机选项卡并且当前窗口中有多个选项卡，则将当前选项卡移动到新窗口中 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmovetabtonewwindow-macos)
+`win.toggleTabBar()` _(mac)_ | 如果启用了本机选项卡并且当前窗口中只有一个选项卡，则切换选项卡栏是否可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wintoggletabbar-macos)
+`win.addTabbedWindow(browserWindow)` _(mac)_ | 在该窗口中添加一个窗口作为选项卡，位于窗口实例的选项卡之后 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winaddtabbedwindowbrowserwindow-macos)
+`win.setVibrancy(type)` _(mac)_ | 在浏览器窗口中添加一个动态特效。 传递 null 或空字符串将会移除窗口上的动态效果 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetvibrancytype-macos)
+`win.setTrafficLightPosition(position)` _(mac)_ | 在无框窗口中设置自定义控制按钮的位置 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsettrafficlightpositionposition-macos)
+`win.getTrafficLightPosition()` _(mac)_ | 在无框窗口中自定义控制按钮的位置 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingettrafficlightposition-macos)
+`win.setTouchBar(touchBar)` _(mac)_ | 设置窗口的触摸条布局 设置为 null 或undefined将清除触摸条 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsettouchbartouchbar-macos)
+`win.setBrowserView(browserView)` _(实验)_ | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsetbrowserviewbrowserview-实验)
+`win.getBrowserView()` _(实验功能)_ | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetbrowserview-实验功能)
+`win.addBrowserView(browserView)` _(实验功能)_ | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winaddbrowserviewbrowserview-实验功能)
+`win.removeBrowserView(browserView)` _(实验功能)_ | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winremovebrowserviewbrowserview-实验功能)
+`win.setTopBrowserView(browserView)` _(实验功能)_ | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsettopbrowserviewbrowserview-实验功能)
+`win.getBrowserViews()` _(实验功能)_ | [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wingetbrowserviews-实验功能)
+`win.setTitleBarOverlay(options)` _(win)_ | 在已开启 Window Controls Overlay 的窗口上，此方法将更新标题栏叠加层的样式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsettitlebaroverlayoptions-windows)
+<!--rehype:className=style-list-->
+
+
+### 静态方法
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :-
+:- | :-
+`BrowserWindow.getAllWindows()` | 所有打开的窗口的数组 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#browserwindowgetallwindows)
+`BrowserWindow.getFocusedWindow()` | 当前获得焦点的窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#browserwindowgetfocusedwindow)
+`BrowserWindow.fromWebContents(webContents)` | 拥有给定 webContents 窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#browserwindowfromwebcontentswebcontents)
+`BrowserWindow.fromBrowserView(browserView)` | 拥有给定 browserView 窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#browserwindowfrombrowserviewbrowserview)
+`BrowserWindow.fromId(id)` | 带有给定 id 的窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#browserwindowfromidid)
+
+### 实例属性
+<!--rehype:wrap-class=col-span-3-->
+
+```js
+const { BrowserWindow } = require('electron')
+// 本例中 `win` 是我们的实例
+const win = new BrowserWindow({ width: 800, height: 600 })
+win.loadURL('https://github.com')
+```
+
+----
+
+:- | :-
+:- | :-
+`win.webContents` | 此窗口拥有的 WebContents 对象 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winwebcontents-只读)
+`win.id` | 代表了窗口的唯一ID [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winid-只读)
+`win.autoHideMenuBar` | 决定窗口菜单栏是否自动隐藏 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winautohidemenubar)
+`win.simpleFullScreen` | 决定窗口是否处于简单(pre-Lion) 全屏模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winsimplefullscreen)
+`win.fullScreen` | 决定窗口是否处于全屏模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winfullscreen)
+`win.focusable` | 确定窗口是否可作为焦点被选中的属性 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winfocusable-windows-macos)
+`win.visibleOnAllWorkspaces` | 决定窗口是否在所有工作区中可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winvisibleonallworkspaces-macos-linux)
+`win.shadow` | 决定窗口是否显示阴影 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winshadow)
+`win.menuBarVisible` | 决定菜单栏是否可见 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmenubarvisible-windows-linux)
+`win.kiosk` | 决定窗口是否处于kiosk模式 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winkiosk)
+`win.documentEdited` | 指明窗口文档是否已被编辑 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#windocumentedited-macos)
+`win.representedFilename` | 确定窗口代表的文件的路径名 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winrepresentedfilename-macos)
+`win.title` | 用于确定原生窗口的标题 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#wintitle)
+`win.minimizable` | 决定窗口是否可被用户手动最小化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winminimizable-macos-windows)
+`win.maximizable` | 决定窗口是否可被用户手动最大化 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmaximizable-macos-windows)
+`win.fullScreenable` | 决定是切换全屏模式还是最大化窗口 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winfullscreenable)
+`win.resizable` | 决定窗口是否可被用户手动调整大小 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winresizable)
+`win.closable` | 决定窗口是否可被用户手动关闭 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winclosable-macos-windows)
+`win.movable` | 决定窗口是否可被用户移动 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winmovable-macos-windows)
+`win.excludedFromShownWindowsMenu` | 决定窗口是否从 Windows 菜单排除 [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winexcludedfromshownwindowsmenu-macos)
+`win.accessibleTitle` | 定义一个仅为辅助工具提供的替代标题  [#](https://www.electronjs.org/zh/docs/latest/api/browser-window#winaccessibletitle)
+
+另见
+---
+
+- [Electron 备忘清单](https://simulatedgreg.github.io/electron-cheatsheet/) _(simulatedgreg.github.io)_

docs/expressjs.md

@@ -0,0 +1,407 @@
+Express 备忘清单
+===
+
+这是用于 Node.js 的快速、不拘一格、极简主义的 Web 框架，包含 [Express.js](http://expressjs.com/) 的 API 参考列表和一些示例。
+
+入门
+---
+
+### Hello World
+<!--rehype:wrap-class=row-span-2-->
+
+- 创建项目，添加 `package.json` 配置
+  ```bash
+  $ mkdir myapp # 创建目录
+  $ cd myapp    # 进入目录
+  $ npm init -y # 初始化一个配置
+  ```
+- 安装依赖
+  ```bash
+  $ npm install express # 安装依赖
+  ```
+- 入口文件 `index.js` 添加代码：
+  ```js
+  const express = require('express')
+  const app = express()
+  const port = 3000
+  app.get('/', (req, res) => {
+    res.send('Hello World!')
+  })
+  app.listen(port, () => {
+    console.log(`监听端口${port}示例应用`)
+  })
+  ```
+- 使用以下命令运行应用程序
+  ```bash
+  $ node index.js
+  ```
+<!--rehype:className=style-timeline-->
+
+### express -h
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+Usage: express [options] [dir]
+Options:
+  -h, --help          输出使用信息
+      --version       输出版本号
+  -e, --ejs           添加 ejs 引擎支持
+      --hbs           添加 hbs 引擎支持
+      --pug           添加 pug 引擎支持
+  -H, --hogan         添加 hogan.js 引擎支持
+      --no-view       无视图引擎生成
+  -v, --view <engine> 添加视图 <engine> 支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认jade) 
+  -c, --css <engine>  添加样式表 <engine> 支持 (less|stylus|compass|sass) (默认css)
+      --git           添加 .gitignore
+  -f, --force         强制非空目录
+```
+<!--rehype:className=wrap-text -->
+
+创建一个 `myapp` 的项目
+
+```bash
+$ express --view=pug myapp
+# 运行应用程序
+$ DEBUG=myapp:* npm start
+```
+
+### express()
+
+:- | :-
+:- | :-
+`express.json()` | [#](http://expressjs.com/en/4x/api.html#express.json)
+`express.raw()` | [#](http://expressjs.com/en/4x/api.html#express.raw)
+`express.Router()` | [#](http://expressjs.com/en/4x/api.html#express.router)
+`express.static()` | [#](http://expressjs.com/en/4x/api.html#express.static)
+`express.text()` | [#](http://expressjs.com/en/4x/api.html#express.text)
+`express.urlencoded()` | [#](http://expressjs.com/en/4x/api.html#express.urlencoded)
+
+### Router
+
+:- | :-
+:- | :-
+`router.all()` | [#](http://expressjs.com/en/4x/api.html#router.all)
+`router.METHOD()` | [#](http://expressjs.com/en/4x/api.html#router.METHOD)
+`router.param()` | [#](http://expressjs.com/en/4x/api.html#router.param)
+`router.route()` | [#](http://expressjs.com/en/4x/api.html#router.route)
+`router.use()` | [#](http://expressjs.com/en/4x/api.html#router.use)
+
+### Application
+
+```js
+var express = require('express')
+var app = express()
+
+console.dir(app.locals.title)
+// => 'My App'
+console.dir(app.locals.email)
+// => 'me@myapp.com'
+```
+
+#### **属性**
+
+:- | :-
+:- | :-
+`app.locals` | 应用程序中的局部变量 [#](http://expressjs.com/en/4x/api.html#app.locals)
+`app.mountpath` | 安装子应用程序的路径模式 [#](http://expressjs.com/en/4x/api.html#app.mountpath)
+
+#### **Events**
+
+:- | :-
+:- | :-
+`mount` | 子应用挂载到父应用上，子应用上触发事件 [#](http://expressjs.com/en/4x/api.html#app.onmount)
+
+#### **方法**
+
+:- | :-
+:- | :-
+`app.all()` | [#](http://expressjs.com/en/4x/api.html#app.all)
+`app.delete()` | [#](http://expressjs.com/en/4x/api.html#app.delete.method)
+`app.disable()` | [#](http://expressjs.com/en/4x/api.html#app.disable)
+`app.disabled()` | [#](http://expressjs.com/en/4x/api.html#app.disabled)
+`app.enable()` | [#](http://expressjs.com/en/4x/api.html#app.enable)
+`app.enabled()` | [#](http://expressjs.com/en/4x/api.html#app.enabled)
+`app.engine()` | [#](http://expressjs.com/en/4x/api.html#app.engine)
+`app.get(name)` | [#](http://expressjs.com/en/4x/api.html#app.get)
+`app.get(path, callback)` | [#](http://expressjs.com/en/4x/api.html#app.get.method)
+`app.listen()` | [#](http://expressjs.com/en/4x/api.html#app.listen)
+`app.METHOD()` | [#](http://expressjs.com/en/4x/api.html#app.METHOD)
+`app.param()` | [#](http://expressjs.com/en/4x/api.html#app.param)
+`app.path()` | [#](http://expressjs.com/en/4x/api.html#app.path)
+`app.post()` | [#](http://expressjs.com/en/4x/api.html#app.post.method)
+`app.put()` | [#](http://expressjs.com/en/4x/api.html#app.put.method)
+`app.render()` | [#](http://expressjs.com/en/4x/api.html#app.render)
+`app.route()` | [#](http://expressjs.com/en/4x/api.html#app.route)
+`app.set()` | [#](http://expressjs.com/en/4x/api.html#app.set)
+`app.use()` | [#](http://expressjs.com/en/4x/api.html#app.use)
+
+### Request
+
+#### 属性
+
+:- | :-
+:- | :-
+`req.app` | [#](http://expressjs.com/en/4x/api.html#req.app)
+`req.baseUrl` | [#](http://expressjs.com/en/4x/api.html#req.baseUrl)
+`req.body` | [#](http://expressjs.com/en/4x/api.html#req.body)
+`req.cookies` | [#](http://expressjs.com/en/4x/api.html#req.cookies)
+`req.fresh` | [#](http://expressjs.com/en/4x/api.html#req.fresh)
+`req.hostname` | [#](http://expressjs.com/en/4x/api.html#req.hostname)
+`req.ip` | [#](http://expressjs.com/en/4x/api.html#req.ip)
+`req.ips` | [#](http://expressjs.com/en/4x/api.html#req.ips)
+`req.method` | [#](http://expressjs.com/en/4x/api.html#req.method)
+`req.originalUrl` | [#](http://expressjs.com/en/4x/api.html#req.originalUrl)
+`req.params` | [#](http://expressjs.com/en/4x/api.html#req.params)
+`req.path` | [#](http://expressjs.com/en/4x/api.html#req.path)
+`req.protocol` | [#](http://expressjs.com/en/4x/api.html#req.protocol)
+`req.query` | [#](http://expressjs.com/en/4x/api.html#req.query)
+`req.route` | [#](http://expressjs.com/en/4x/api.html#req.route)
+`req.secure` | [#](http://expressjs.com/en/4x/api.html#req.secure)
+`req.signedCookies` | [#](http://expressjs.com/en/4x/api.html#req.signedCookies)
+`req.stale` | [#](http://expressjs.com/en/4x/api.html#req.stale)
+`req.subdomains` | [#](http://expressjs.com/en/4x/api.html#req.subdomains)
+`req.xhr` | [#](http://expressjs.com/en/4x/api.html#req.xhr)
+
+#### 方法
+
+:- | :-
+:- | :-
+`req.accepts()` | [#](http://expressjs.com/en/4x/api.html#req.accepts)
+`req.acceptsCharsets()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsCharsets)
+`req.acceptsEncodings()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsEncodings)
+`req.acceptsLanguages()` | [#](http://expressjs.com/en/4x/api.html#req.acceptsLanguages)
+`req.get()` | 获取HTTP 请求头字段 [#](http://expressjs.com/en/4x/api.html#req.get)
+`req.is()` | [#](http://expressjs.com/en/4x/api.html#req.is)
+`req.param()` | [#](http://expressjs.com/en/4x/api.html#req.param)
+`req.range()` | [#](http://expressjs.com/en/4x/api.html#req.range)
+
+### Response
+
+```js
+app.get('/', function (req, res) {
+  console.dir(res.headersSent) // false
+  res.send('OK')
+  console.dir(res.headersSent) // true
+})
+```
+
+#### 属性
+
+:- | :-
+:- | :-
+`res.app ` | [#](http://expressjs.com/en/4x/api.html#res.app)
+`res.headersSent` | [#](http://expressjs.com/en/4x/api.html#res.headersSent)
+`res.locals` | [#](http://expressjs.com/en/4x/api.html#res.locals)
+
+#### 方法
+
+:- | :-
+:- | :-
+`res.append()` | [#](http://expressjs.com/en/4x/api.html#res.append)
+`res.attachment()` | [#](http://expressjs.com/en/4x/api.html#res.attachment)
+`res.cookie()` | [#](http://expressjs.com/en/4x/api.html#res.cookie)
+`res.clearCookie()` | [#](http://expressjs.com/en/4x/api.html#res.clearCookie)
+`res.download()` | 提示要下载的文件 [#](http://expressjs.com/en/4x/api.html#res.download)
+`res.end()` | 结束响应过程 [#](http://expressjs.com/en/4x/api.html#res.end)
+`res.format()` | [#](http://expressjs.com/en/4x/api.html#res.format)
+`res.get()` | [#](http://expressjs.com/en/4x/api.html#res.get)
+`res.json()` | 发送 JSON 响应 [#](http://expressjs.com/en/4x/api.html#res.json)
+`res.jsonp()` | 发送带有 JSONP 支持的响应 [#](http://expressjs.com/en/4x/api.html#res.jsonp)
+`res.links()` | [#](http://expressjs.com/en/4x/api.html#res.links)
+`res.location()` | [#](http://expressjs.com/en/4x/api.html#res.location)
+`res.redirect()` | 重定向请求 [#](http://expressjs.com/en/4x/api.html#res.redirect)
+`res.render()` | 渲染视图模板 [#](http://expressjs.com/en/4x/api.html#res.render)
+`res.send()` | 发送各种类型的响应 [#](http://expressjs.com/en/4x/api.html#res.send)
+`res.sendFile()` | 将文件作为八位字节流发送 [#](http://expressjs.com/en/4x/api.html#res.sendFile)
+`res.sendStatus()` | [#](http://expressjs.com/en/4x/api.html#res.sendStatus)
+`res.set()` | [#](http://expressjs.com/en/4x/api.html#res.set)
+`res.status()` | [#](http://expressjs.com/en/4x/api.html#res.status)
+`res.type()` | [#](http://expressjs.com/en/4x/api.html#res.type)
+`res.vary()` | [#](http://expressjs.com/en/4x/api.html#res.vary)
+
+示例
+----
+
+### Router
+<!--rehype:wrap-class=row-span-2-->
+
+为传递给此路由器的任何请求调用
+
+```js
+router.use(function (req, res, next) {
+  // .. 这里有一些逻辑 .. 像任何其他中间件一样
+  next()
+})
+```
+
+将处理任何以 `/events` 结尾的请求
+
+```js
+// 取决于路由器在哪里 "use()"
+router.get('/events', (req, res, next) => {
+  // ..
+})
+```
+
+### Response
+
+`res` 对象表示 `Express` 应用程序在收到 HTTP 请求时发送的 HTTP 响应
+
+```js
+app.get('/user/:id', (req, res) => {
+  res.send('user ' + req.params.id)
+})
+```
+
+### Request
+
+`req` 对象表示 `HTTP` 请求，并具有请求查询字符串、参数、正文、HTTP 标头等的属性
+
+```js
+app.get('/user/:id', (req, res) => {
+  res.send('user ' + req.params.id)
+})
+```
+
+### res.end()
+
+```js
+res.end()
+res.status(404).end()
+```
+
+结束响应过程。这个方法其实来自 Node 核心，具体是 `http.ServerResponse` 的 `response.end()` 方法
+
+### res.json([body])
+
+```js
+res.json(null)
+res.json({ user: 'tobi' })
+res.status(500).json({ error: 'message' })
+```
+
+### app.all
+
+```js
+app.all('/secret', function (req, res, next) {
+  console.log('访问秘密部分...')
+  next() // 将控制权传递给下一个处理程序
+})
+```
+
+### app.delete
+
+```js
+app.delete('/', function (req, res) {
+  res.send('DELETE request to homepage')
+})
+```
+
+### app.disable(name)
+
+```js
+app.disable('trust proxy')
+app.get('trust proxy')
+// => false
+```
+
+### app.disabled(name)
+
+```js
+app.disabled('trust proxy')
+// => true
+
+app.enable('trust proxy')
+app.disabled('trust proxy')
+// => false
+```
+
+### app.engine(ext, callback)
+
+```js
+var engines = require('consolidate')
+
+app.engine('haml', engines.haml)
+app.engine('html', engines.hogan)
+```
+
+### app.listen([port[, host[, backlog]]][, callback])
+
+```js
+var express = require('express')
+
+var app = express()
+app.listen(3000)
+```
+
+### 路由
+
+```js
+const express = require('express')
+const app = express()
+
+// 向主页发出 GET 请求时响应“hello world”
+app.get('/', (req, res) => {
+  res.send('hello world')
+})
+```
+
+```js
+// GET 方法路由
+app.get('/', (req, res) => {
+  res.send('GET request to the homepage')
+})
+
+// POST 方法路由
+app.post('/', (req, res) => {
+  res.send('POST request to the homepage')
+})
+```
+
+### 中间件
+
+```js
+function logOriginalUrl (req, res, next) {
+  console.log('ReqURL:', req.originalUrl)
+  next()
+}
+
+function logMethod (req, res, next) {
+  console.log('Request Type:', req.method)
+  next()
+}
+
+const log = [logOriginalUrl, logMethod]
+
+app.get('/user/:id', log,
+  (req, res, next)=>{
+    res.send('User Info')
+  }
+)
+```
+
+### 使用模版
+
+```js
+app.set('view engine', 'pug')
+```
+
+在 `views` 目录下创建一个名为 `index.pug` 的 `Pug` 模板文件，内容如下
+
+```pug
+html
+  head
+    title= title
+  body
+    h1= message
+```
+
+创建一个路由来渲染 `index.pug` 文件。如果未设置视图引擎属性，则必须指定视图文件的扩展名
+
+```js
+app.get('/', (req, res) => {
+  res.render('index', {
+    title: 'Hey', message: 'Hello there!'
+  })
+})
+```

docs/find.md

@@ -1,7 +1,7 @@
 Find 备忘清单
 ===
 
-这是 Linux find 命令备忘单的快速参考列表，包含常用选项和示例。
+这是 Linux find 命令备忘清单的快速参考列表，包含常用选项和示例。
 
 入门
 ----

docs/git.md

@@ -1,7 +1,7 @@
 Git 备忘清单
 ===
 
-本备忘单总结了常用的 Git 命令行指令，以供快速参考。
+本备忘单总结了常用的 [Git](https://git-scm.com/) 命令行指令，以供快速参考。
 
 入门
 ----
@@ -328,25 +328,21 @@ Git 技巧
 
 ### 重命名分支
 
-#### **重命名**为`new`
-
-```shell
-$ git branch -m <new>
-$ git branch -m <old> <new> # 重命名分支  
-```
-
-#### **推送**并重置
-
-```shell
-$ git push origin -u <new>
-```
-
-#### **删除**远程分支
-
-```shell
-$ git push origin --delete <old> # 方法1
-$ git push origin :oldBranchName # 方法2
-```
+- **重命名**为`new`
+  ```shell
+  $ git branch -m <new>
+  $ git branch -m <old> <new> #重命名分支  
+  ```
+- **推送**并重置
+  ```shell
+  $ git push origin -u <new>
+  ```
+- **删除**远程分支
+  ```shell
+  $ git push origin --delete <old> #方法1
+  $ git push origin :oldBranchName #方法2
+  ```
+<!--rehype:className=style-timeline-->
 
 ### Log
 
@@ -427,7 +423,7 @@ $ git config --global alias.ci commit
 $ git config --global alias.st status
 ```
 
-也可以看看：[More Aliases](https://gist.github.com/johnpolacek/69604a1f6861129ef088)
+也可以看看：[更多别名](https://gist.github.com/johnpolacek/69604a1f6861129ef088)
 
 ### 设置大小写敏感
 

docs/github-actions.md

@@ -0,0 +1,841 @@
+Github Actions 备忘清单
+====
+
+本备忘单总结了 [Github Actions](https://github.com/actions) 常用的配置说明，以供快速参考。
+
+入门
+---
+
+### 介绍
+
+GitHub [Actions](https://github.com/actions) 的仓库中自动化、自定义和执行软件开发工作流程，有四个基本的概念，如下：
+
+:- | :-
+:- | :-
+`workflow` _(工作流程)_ | 持续集成一次运行的过程，就是一个 `workflow`
+`job` _(任务)_ | 一个 `workflow` 由一个或多个 `jobs` 构成，含义是一次持续集成的运行，可以完成多个任务
+`step` _(步骤)_ | 每个 `job` 由多个 `step` 构成，一步步完成
+`action` _(动作)_ | 每个 `step` 可以依次执行一个或多个命令(`action`)
+<!--rehype:className=style-list-arrow-->
+
+---
+
+- 采用 [YAML](./yaml.md) 格式定义配置文件
+- 存放在代码仓库的 `.github/workflows` 目录中
+- 后缀名统一为 `.yml`，比如 `ci.yml`
+- 一个库可以有多个 `workflow` 文件
+- 根据配置事件自动运行配置文件
+<!--rehype:className=style-round-->
+
+### 配置文件
+
+```yaml {3,5,10}
+name: GitHub Actions Demo
+on:
+  push:
+    branches:
+      - main
+
+# 任务
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    # 步骤 根据步骤执行任务
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - run: npm install
+      - run: npm run build
+```
+
+存放到 `.github/workflows` 目录中，命名为 `ci.yml`，当 `push` 代码到仓库 `main` 分支中，该配置自动运行配置。
+
+### 指定触发
+<!--rehype:wrap-class=row-span-2-->
+
+`push` 事件触发 `workflow`
+
+```yaml
+on: push
+```
+
+`push` 事件或 `pull_request` 事件都可以触发 `workflow`
+
+```yaml
+on: [push, pull_request]
+```
+
+只有在 `main` 分支 `push` 事件触发 `workflow`
+
+```yaml {2}
+on:
+  push:
+    branches:
+      - main
+```
+
+`push` 事件触发 `workflow`，`docs` 目录下的更改 `push` 事件不触发 `workflow`
+
+```yaml {2,4}
+on:
+  push:
+    paths-ignore:
+      - 'docs/**'
+```
+
+push 事件触发 workflow，包括 sub-project 目录或其子目录中的文件触发 workflow，除非该文件在 sub-project/docs 目录中，不触发 workflow
+
+```yaml
+on:
+  push:
+    paths:
+      - 'sub-project/**'
+      - '!sub-project/docs/**'
+```
+
+版本发布为 `published` 时运行工作流程。
+
+```yml
+on:
+  release:
+    types: [published]
+```
+
+### 多项任务
+
+```yml
+jobs:
+  my_first_job:  # 第一个任务
+    name: My first job
+
+  my_second_job: # 第二个任务
+    name: My second job
+```
+
+通过 jobs `(jobs.<job_id>.name)`字段，配置一项或多项需要执行的任务
+
+### 多项任务依赖关系
+
+通过 needs `(jobs.<job_id>.needs)`字段，指定当前任务的依赖关系
+
+```yml
+jobs:
+  job1:
+  job2:
+    needs: job1
+  job3:
+    needs: [job1, job2]
+```
+
+上面配置中，`job1` 必须先于 `job2` 完成，而 `job3` 等待 `job1` 和 `job2` 的完成才能运行。因此，这个 `workflow` 的运行顺序依次为：`job1`、`job2`、`job3`
+
+### 多项任务传递参数
+<!--rehype:wrap-class=col-span-2-->
+
+```yml {2,5,9,11,15}
+jobs:
+  job1:
+    runs-on: ubuntu-latest
+    # 将步骤输出映射到作业输出
+    outputs:
+      output1: ${{ steps.step1.outputs.test }}
+      output2: ${{ steps.step2.outputs.test }}
+    steps:
+      - id: step1
+        run: echo "::set-output name=test::hello"
+      - id: step2
+        run: echo "::set-output name=test::world"
+  job2:
+    runs-on: ubuntu-latest
+    needs: job1
+    steps:
+      - run: echo ${{needs.job1.outputs.output1}} ${{needs.job1.outputs.output2}}
+```
+
+### 指定每项任务的虚拟机环境
+
+```yml
+runs-on: ubuntu-latest
+```
+
+指定运行所需要的虚拟机环境，⚠️ 它是必填字段
+
+```yml {3}
+jobs:
+  build: # 任务名称
+    runs-on: ubuntu-latest # 虚拟机环境配置
+```
+
+---
+
+- `Windows Server 2022` _(windows-latest)_ 或 _(windows-2022)_
+- `Ubuntu 20.04` _(ubuntu-latest)_ 或 _(ubuntu-20.04)_
+- `macOS Monterey 12` _(macos-12)_
+- `macOS Big Sur 11` _(macos-latest)_,_(macos-11)_
+<!--rehype:className=style-arrow-->
+
+另见: [选择 GitHub 托管的运行器](https://docs.github.com/cn/actions/using-workflows/workflow-syntax-for-github-actions#选择-github-托管的运行器)
+
+### 指定每项任务的步骤
+
+每个步骤都可以指定以下三个字段
+
+```shell
+jobs.<job_id>.steps.name # 步骤名称
+# 该步骤运行的命令或者 action
+jobs.<job_id>.steps.run
+# 该步骤所需的环境变量
+jobs.<job_id>.steps.env
+```
+
+`steps` 字段指定每个 `Job` 的运行步骤，可以包含一个或多个步骤(`steps`)
+
+```yml {4}
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - run: npm install
+      - run: npm run build
+```
+
+### 环境变量
+
+```shell
+jobs.<job_id>.environment
+```
+使用单一环境名称的示例
+
+```yml
+environment: staging_environment
+```
+
+使用环境名称和 URL 的示例
+
+```yml
+environment:
+  name: production_environment
+  url: https://github.com
+```
+
+#### 自定义环境变量
+
+`GitHub` 会保留 `GITHUB_` 环境变量前缀供 `GitHub` 内部使用。设置有 `GITHUB_` 前缀的环境变量或密码将导致错误。
+
+```yml
+- name: 测试 nodejs 获取环境变量
+  env:
+    API_TOKEN: ${{ secrets.API_TOKEN }}
+```
+
+在 `https://github.com/<用户名>/<项目名称>/settings/secrets` 中添加 `secrets` `API_TOKEN`，在工作流中设置环境变量 [`API_TOKEN`](https://github.com/jaywcjlove/github-actions/blob/799b232fca3d9df0272eaa12610f9ebfca51b288/.github/workflows/ci.yml#L46)
+
+### 表达式
+
+在 `if` 条件下使用表达式时，可以省略表达式语法 (`${{ }}`)，因为 GitHub 会自动将 `if` 条件作为表达式求值
+
+```yml {3}
+steps:
+  - uses: actions/hello-world-action@v1.1
+    if: github.repository == 'uiw/uiw-repo'
+    # if: ${{ <expression> }}
+```
+
+设置环境变量的示例
+
+
+```yml
+env:
+  MY_ENV_VAR: ${{ <expression> }}
+```
+
+#### 操作符
+
+- `( )` _(逻辑分组)_
+- `[ ]` _(指数)_
+- `.` _(属性取消引用)_
+- `!` _(不是)_
+- `<` _(少于)_
+- `<=` _(小于或等于)_
+- `>` _(比...更棒)_
+- `>=` _(大于或等于)_
+- `==` _(平等的)_
+- `!=` _(不相等)_
+- `&&` _(和)_
+- `||` _(或者)_
+<!--rehype:className=cols-2 style-none-->
+
+### Github 上下文
+<!--rehype:wrap-class=col-span-2-->
+
+属性名称 | 类型 | 描述
+---- | ---- | ----
+`github` _(object)_ | 工作流程中任何作业或步骤期间可用的顶层上下文。
+`github.event` _(object)_ | 完整事件 web 挂钩有效负载。 更多信息请参阅“触发工作流程的事件”。
+`github.event_path` _(string)_ | 运行器上完整事件 web 挂钩有效负载的路径。
+`github.workflow` _(string)_ | 工作流程的名称。 如果工作流程文件未指定 name，此属性的值将是仓库中工作流程文件的完整路径。
+`github.job` _(string)_ | 当前作业的 job_id。
+`github.run_id` _(string)_ | 仓库中每个运行的唯一编号。 如果您重新执行工作流程运行，此编号不变。
+`github.run_number` _(string)_ | 仓库中特定工作流程每个运行的唯一编号。 此编号从 1（对应于工作流程的第一个运行）开始，然后随着每个新的运行而递增。 如果您重新执行工作流程运行，此编号不变。
+`github.actor` _(string)_ | 发起工作流程运行的用户的登录名。
+`github.repository` _(string)_ | 所有者和仓库名称。 例如 Codertocat/Hello-World。
+`github.repository_owner` _(string)_ | 仓库所有者的名称。 例如 Codertocat。
+`github.event_name` _(string)_ | 触发工作流程运行的事件的名称。
+`github.sha` _(string)_ | 触发工作流程的提交 SHA。
+`github.ref` _(string)_ | 触发工作流程的分支或标记参考。
+`github.head_ref` _(string)_ | 工作流程运行中拉取请求的 head_ref 或来源分支。 此属性仅在触发工作流程运行的事件为 pull_request 时才可用。
+`github.base_ref` _(string)_ | 工作流程运行中拉取请求的 base_ref 或目标分支。 此属性仅在触发工作流程运行的事件为 pull_request 时才可用。
+`github.token` _(string)_ | 代表仓库上安装的 GitHub 应用程序进行身份验证的令牌。 这在功能上等同于 GITHUB_TOKEN 密码。 更多信息请参阅“使用 GITHUB_TOKEN 验证身份”。
+`github.workspace` _(string)_ | 使用 checkout 操作时步骤的默认工作目录和仓库的默认位置。
+`github.action` _(string)_ | 正在运行的操作的名称。 在当前步骤运行脚本时，GitHub 删除特殊字符或使用名称 run。 如果在同一作业中多次使用相同的操作，则名称将包括带有序列号的后缀。 例如，运行的第一个脚本名称为 run1，则第二个脚本将命名为 run2。 同样，actions/checkout 第二次调用时将变成 actionscheckout2。
+<!--rehype:className=style-list-arrow-->
+
+[Github 上下文](https://help.github.com/cn/actions/reference/context-and-expression-syntax-for-github-actions)是访问有关工作流运行、运行器环境、作业和步骤的信息的一种方式
+
+### 默认环境变量
+
+环境变量 | 描述
+---- | ----
+`CI` | 始终设置为 `true`
+`HOME` | 用于存储用户数据的 GitHub 主目录路径。 例如 `/github/home`
+`GITHUB_WORKFLOW` | 工作流程的名称。
+`GITHUB_RUN_ID` | 仓库中每个运行的唯一编号。 如果您重新执行工作流程运行，此编号不变。
+`GITHUB_RUN_NUMBER` | 仓库中特定工作流程每个运行的唯一编号。 此编号从 1（对应于工作流程的第一个运行）开始，然后随着每个新的运行而递增。 如果您重新执行工作流程运行，此编号不变。
+`GITHUB_ACTION` | 操作唯一的标识符 (id)。
+`GITHUB_ACTIONS` |  当 GitHub 操作 运行工作流程时，始终设置为 true。 您可以使用此变量来区分测试是在本地运行还是通过 GitHub 操作 运行。
+`GITHUB_ACTION_PATH` | GitHub 操作所在的路径
+`GITHUB_ACTOR` | 发起工作流程的个人或应用程序的名称。 例如 octocat
+`GITHUB_API_URL` | 返回 `API URL`。例如：`https://api.github.com`
+`GITHUB_REPOSITORY` | 所有者和仓库名称。 例如 octocat/Hello-World
+`GITHUB_EVENT_NAME` | 触发工作流程的 web 挂钩事件的名称
+`GITHUB_EVENT_PATH` | 具有完整 web 挂钩事件有效负载的文件路径。 例如 /github/workflow/event.json
+`GITHUB_WORKSPACE` | GitHub 工作空间目录路径。 如果您的工作流程使用 [actions/checkout](https://github.com/actions/checkout) 操作，工作空间目录将包含存储仓库副本的子目录。 如果不使用 [actions/checkout](https://github.com/actions/checkout) 操作，该目录将为空。 例如 /home |/runner/work/my-repo-name/my-repo-name
+`GITHUB_SHA` | 触发工作流程的提交 SHA。 例如 ffac537e6cbbf9
+`GITHUB_REF` | 触发工作流程的分支或标记参考。 例如 refs/heads/feature-branch-1。 如果分支或标记都不适用于事件类型，则变量不会存在
+`GITHUB_HEAD_REF` | 仅为复刻的仓库设置。头部仓库的分支
+`GITHUB_BASE_REF` | 仅为复刻的仓库设置。基础仓库的分支
+<!--rehype:className=style-list-arrow-->
+
+另见: [默认环境变量](https://docs.github.com/cn/actions/learn-github-actions/environment-variables#default-environment-variables)
+
+### 直接常量
+<!--rehype:wrap-class=row-span-2-->
+
+作为表达式的一部分，可以使用 `boolean`, `null`, `number` 或 `string`数据类型
+
+```yml
+env:
+  myNull: ${{ null }}
+  myBoolean: ${{ false }}
+  myIntegerNumber: ${{ 711 }}
+  myFloatNumber: ${{ -9.2 }}
+  myHexNumber: ${{ 0xff }}
+  myExponentialNumber: ${{ -2.99e-2 }}
+  myString: Mona the Octocat
+  myStringInBraces: ${{ 'It''s source!' }}
+```
+
+### 函数 contains
+<!--rehype:wrap-class=row-span-2-->
+
+使用字符串的示例
+
+```js
+contains('Hello world', 'llo') // 返回 true
+```
+
+使用对象过滤器的示例返回 true
+
+```js
+contains(github.event.issue.labels.*.name, 'bug')
+```
+<!--rehype:className=wrap-text -->
+
+另见: [函数 contains](https://docs.github.com/cn/actions/learn-github-actions/expressions#contains)
+
+### 函数 startsWith
+
+```js
+startsWith('Hello world', 'He') // 返回 true
+```
+
+另见: [函数 startsWith](https://docs.github.com/cn/actions/learn-github-actions/expressions#startswith)，此函数不区分大小写
+
+### 函数 format
+
+```js
+format('{{Hello {0} {1} {2}!}}', 'Mona', 'the', 'Octocat')
+// 返回 '{Hello Mona the Octocat!}'.
+```
+<!--rehype:className=wrap-text -->
+
+另见: [函数 format](https://docs.github.com/cn/actions/learn-github-actions/expressions#format)
+
+### 函数 join
+
+```js
+join(github.event.issue.labels.*.name, ', ')
+// 也许返回 'bug, help wanted'.
+```
+
+另见: [函数 join](https://docs.github.com/cn/actions/learn-github-actions/expressions#join)
+
+### 函数 toJSON
+
+```js
+toJSON(job)
+// 也许返回 { "status": "Success" }.
+```
+
+另见: [函数 toJSON](https://docs.github.com/cn/actions/learn-github-actions/expressions#tojson)
+
+### 函数
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`fromJSON` | 返回 JSON 对象或 JSON 数据类型的值 [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#fromjson)
+`hashFiles` | 返回与路径模式匹配的文件集的单个哈希 [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#hashfiles)
+`success` | 当前面的步骤都没失败或被取消时返回 true [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#success)
+`always` | 使步骤始终执行，返回 `true` 即使取消也是如此 [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#always)
+`cancelled` | 如果工作流被取消，则返回 true [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#cancelled)
+`failure` | 当作业的任何先前步骤失败时返回 true [#](https://docs.github.com/cn/actions/learn-github-actions/expressions#failure)
+
+### 函数 success()
+
+```yml
+steps:
+  ...
+  - name: The job has succeeded
+    if: ${{ success() }}
+```
+
+### 函数 failure()
+
+```yml
+steps:
+  ...
+  - name: The job has failed
+    if: ${{ failure() }}
+```
+
+常用实例
+----
+
+### 获取版本信息
+<!--rehype:wrap-class=col-span-2-->
+
+```yml
+- name: Test
+  run: |
+    # Strip git ref prefix from version
+    echo "${{ github.ref }}"
+    # VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+
+    # # Strip "v" prefix from tag name
+    # [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+    echo "$VERSION"
+```
+<!--rehype:className=wrap-text -->
+
+### 提交到 gh-pages 分支
+
+```yml
+- name: Deploy
+  uses: peaceiris/actions-gh-pages@v3
+  with:
+    github_token: ${{secrets.GITHUB_TOKEN}}
+    publish_dir: ./build
+```
+
+### 修改 package.json
+
+```yml
+- name: Modify Version
+  shell: bash
+  run: |
+    node -e 'var pkg = require("./package.json"); pkg.version= (new Date().getFullYear().toString().substr(2)) + "." + (new Date().getMonth() + 1) + "." + (new Date().getDate()); require("fs").writeFileSync("./package.json", JSON.stringify(pkg, null, 2))'
+```
+<!--rehype:className=wrap-text -->
+
+使用 [github-action-package](https://github.com/jaywcjlove/github-action-package) 修改 `name` 字段
+
+```yml
+- name: package.json info
+  uses: jaywcjlove/github-action-package@main
+  with:
+    rename: '@wcj/github-package-test'
+```
+
+### 克隆带有 Submodule 的仓库
+
+```yml
+- name: Checkout
+  uses: actions/checkout@v3
+  with:
+    path: main
+    submodules: true
+```
+
+`submodules`：`true` 检出子模块或 `recursive` 递归检出子模块
+
+```yml
+- name: Clone sub repository
+  shell: bash
+  run: |
+    auth_header="$(git config --local --get http.https://github.com/.extraheader)"
+    # git submodule sync --recursive
+    # git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --remote --force --recursive --checkout ant.design
+```
+
+### 步骤依赖作业
+<!--rehype:wrap-class=row-span-2-->
+
+使用 `jobs.<job_id>.needs` 识别在此作业运行之前必须成功完成的任何作业。它可以是一个字符串，也可以是字符串数组。 如果某个作业失败，则所有需要它的作业都会被跳过，除非这些作业使用让该作业继续的条件表达式。
+
+```yml
+jobs:
+  job1:
+  job2:
+    needs: job1
+  job3:
+    needs: [job1, job2]
+```
+
+在此示例中，`job1` 必须在 `job2` 开始之前成功完成，而 `job3` 要等待 `job1` 和 `job2` 完成。此示例中的作业按顺序运行：
+
+```
+❶ job1
+❷ job2
+❸ job3
+```
+
+配置如下
+
+```yml
+jobs:
+  job1:
+  job2:
+    needs: job1
+  job3:
+    if: ${{ always() }}
+    needs: [job1, job2]
+```
+
+在此示例中，`job3` 使用 `always()` 条件表达式，因此它始终在 `job1` 和 `job2` 完成后运行，不管它们是否成功。
+
+### 同步 Gitee
+<!--rehype:wrap-class=col-span-2-->
+
+```yml
+- name: Sync to Gitee
+  run: |
+    mirror() {
+      git clone "https://github.com/$1/$2"
+      cd "$2"
+      git remote add gitee "https://jaywcjlove:${{ secrets.GITEE_TOKEN }}@gitee.com/uiw/$2"
+      git remote set-head origin -d
+      git push gitee --prune +refs/remotes/origin/*:refs/heads/* +refs/tags/*:refs/tags/*
+      cd ..
+    }
+    mirror uiwjs uiw
+```
+<!--rehype:className=wrap-text -->
+
+### 提交 NPM 包
+
+```yml
+- run: npm publish --access public
+  env:
+    NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+```
+
+获取 `NPM_TOKEN`，可以通过 [npm](https://www.npmjs.com/settings/wcjiang/tokens) 账号创建 `token`
+
+```shell
+npm token list [--json|--parseable] # 查看
+npm token create [--read-only] [--cidr=1.1.1.1/24,2.2.2.2/16] # 创建
+npm token revoke <id|token> # 撤销
+```
+<!--rehype:className=wrap-text -->
+
+可以使用 [JS-DevTools/npm-publish](https://github.com/JS-DevTools/npm-publish) 提交
+
+```yml
+- name:  📦 @province-city-china/data
+  uses: JS-DevTools/npm-publish@v1
+  with:
+    token: ${{ secrets.NPM_TOKEN }}
+    package: packages/data/package.json
+```
+
+它有个好处，检测 `package.json` 中版本号是否发生变更，来决定是否提交版本，不会引发流程错误。
+
+### 步骤作业文件共享
+
+Artifacts 是 GitHub Actions 为您提供持久文件并在运行完成后使用它们或在作业（文档）之间共享的一种方式。
+
+要创建工件并使用它，您将需要不同的操作：上传和下载。
+要上传文件或目录，您只需像这样使用它：
+
+```yml
+steps:
+  - uses: actions/checkout@v2
+  - run: mkdir -p path/to/artifact
+  - run: echo hello > path/to/artifact/a.txt
+  - uses: actions/upload-artifact@v2
+    with:
+      name: my-artifact
+      path: path/to/artifact/a.txt
+```
+
+然后下载 `artifact` 以使用它：
+
+```yml
+steps:
+  - uses: actions/checkout@v2
+  - uses: actions/download-artifact@v2
+    with:
+      name: my-artifact
+```
+
+### Node.js
+
+```yml
+- name: Setup Node
+  uses: actions/setup-node@v2
+  with:
+    node-version: 14
+```
+
+使用[矩阵策略](https://docs.github.com/cn/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstrategy) 在 nodejs 不同版本中运行
+
+```yml
+strategy:
+  matrix:
+    node-version: [10.x, 12.x, 14.x]
+
+steps:
+  - uses: actions/checkout@v2
+  - name: 使用 Node ${{ matrix.node-version }}
+    uses: actions/setup-node@v1
+    with:
+      node-version: ${{ matrix.node-version }}
+  - run: npm ci
+  - run: npm run build --if-present
+  - run: npm test
+```
+
+### 提交 docker 镜像
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```yml
+# https://www.basefactor.com/github-actions-docker
+- name: Docker login
+  run: docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
+
+- name: Build ant.design image
+  run: |
+    cd ./ant\.design
+    docker build -t ant.design .
+- name: Tags & Push docs
+  run: |
+    # Strip git ref prefix from version
+    VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+
+    # Strip "v" prefix from tag name
+    [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+
+    docker tag ant.design ${{ secrets.DOCKER_USER }}/ant.design:$VERSION
+    docker tag ant.design ${{ secrets.DOCKER_USER }}/ant.design:latest
+    docker push ${{ secrets.DOCKER_USER }}/ant.design:$VERSION
+    docker push ${{ secrets.DOCKER_USER }}/ant.design:latest
+```
+
+### 创建一个 tag
+
+```yml
+- name: Create Tag
+  id: create_tag
+  uses: jaywcjlove/create-tag-action@main
+  with:
+    package-path: ./package.json
+```
+
+根据 `package-path` 指定的 `package.json` 检测 `version` 是否发生变化来创建 `tag`
+
+### 生成 git 提交日志
+
+```yml
+- name: Generate Changelog
+  id: changelog
+  uses: jaywcjlove/changelog-generator@main
+  with:
+    filter-author: (小弟调调™)
+
+- name: Get the changelog
+  run: echo "${{ steps.changelog.outputs.changelog }}"
+```
+<!--rehype:className=wrap-text -->
+
+### 提交到 GitHub docker 镜像仓库
+<!--rehype:wrap-class=col-span-3-->
+
+```yml
+- name: '登录到 GitHub 注册表'
+  run: echo ${{ github.token }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+- name: '编译 docker image'
+  run: docker build -t ghcr.io/jaywcjlove/reference:latest .
+
+- name: '推送到 GitHub 注册表中'
+  run: docker push ghcr.io/jaywcjlove/reference:latest
+
+- name: '标记 docker 镜像并发布到 GitHub 注册表'
+  if: steps.create_tag.outputs.successful
+  run: |
+    echo "version: v${{ steps.changelog.outputs.version }}"
+    docker tag ghcr.io/jaywcjlove/reference:latest ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+    docker push ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+```
+
+### 提交 commit 到 master 分支
+<!--rehype:wrap-class=col-span-2-->
+
+```yml
+- name: 生成一个文件，并将它提交到 master 分支
+  run: |
+    # Strip git ref prefix from version
+    VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+    COMMIT=released-${VERSION}
+    # Strip "v" prefix from tag name
+    [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+    echo "输出版本号：$VERSION"
+    # 将版本输出到当前 VERSION 文件中
+    echo "$VERSION" > VERSION
+    echo "1. 输出Commit：$commit"
+    echo "2. Released $VERSION"
+    git fetch
+    git config --local user.email "action@github.com"
+    git config --local user.name "GitHub Action"
+    git add .
+    git commit -am $COMMIT
+    git branch -av
+    git pull origin master
+
+- name: 将上面的提交 push 到 master 分支
+  uses: ad-m/github-push-action@master
+  with:
+    github_token: ${{ secrets.GITHUB_TOKEN }}
+```
+
+### 作业之间共享数据
+
+创建一个文件，然后将其作为构件上传
+
+```yml {11}
+jobs:
+  example-job:
+    name: Save output
+    steps:
+      - shell: bash
+        run: |
+          expr 1 + 1 > output.log
+      - name: Upload output file
+        uses: actions/upload-artifact@v3
+        with:
+          name: output-log-file
+          path: output.log
+```
+
+可以下载名为 `output-log-file` 的工件
+
+```yml {7}
+jobs:
+  example-job:
+    steps:
+      - name: Download a single artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: output-log-file
+```
+
+### 指定运行命令的工作目录
+
+```yml {3}
+- name: Clean temp directory
+  run: rm -rf *
+  working-directory: ./temp
+```
+
+使用 `working-directory` 关键字，您可以指定运行命令的工作目录(`./temp`)
+
+#### defaults.run
+
+```yml {4,5,7}
+jobs:
+  job1:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+        working-directory: scripts
+```
+
+作业中的所有 `run` 步骤提供默认的 `shell` 和 `working-directory`
+
+### jobs.<job_id>.steps[*].shell
+
+使用 `bash` 运行脚本
+
+```yml {4}
+steps:
+  - name: Display the path
+    run: echo $PATH
+    shell: bash
+```
+
+运行 `python` 脚本
+
+```yml {6}
+steps:
+  - name: Display the path
+    run: |
+      import os
+      print(os.environ['PATH'])
+    shell: python
+```
+
+您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置
+
+### 一些 actions 推荐
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+[`create-tag-action`](https://github.com/jaywcjlove/create-tag-action) | 根据 package.json 创建 `Tag` / `Release`
+[`changelog-generator`](https://github.com/jaywcjlove/changelog-generator) | 生成 `changelog` 日志
+[`github-action-modify-file-content`](https://github.com/jaywcjlove/github-action-modify-file-content) | 修改仓库文件内容
+[`github-action-contributors`](https://github.com/jaywcjlove/github-action-contributors) | 生成贡献(contributors.svg)图片
+[`generated-badges`](https://github.com/jaywcjlove/generated-badges) | 生成徽章(Badges)图片
+[`coverage-badges-cli`](https://github.com/jaywcjlove/coverage-badges-cli) | 生成覆盖率徽章(Badges)图片
+[`action-ejs`](https://github.com/jaywcjlove/action-ejs) | 基于 ejs 生成 HTML
+[`github-action-package`](https://github.com/jaywcjlove/github-action-package) | 修改 JSON 文件内容
+[`markdown-to-html-cli`](https://github.com/jaywcjlove/markdown-to-html-cli) | Markdown 转换成 HTML
+[`ncipollo/release-action`](https://github.com/ncipollo/release-action) | 创建 `Release`
+[`peaceiris/actions-gh-pages`](https://github.com/peaceiris/actions-gh-pages) | 将文件或文件夹内容提交到 `gh-pages` 分支
+<!--rehype:className=style-list-->
+
+另见
+---
+
+- [Github Actions 学习笔记](https://jaywcjlove.github.io/github-actions) _(jaywcjlove.github.io)_
+- [了解 GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions) _(docs.github.com)_

docs/golang.md

@@ -0,0 +1,966 @@
+Golang 备忘清单
+===
+
+该备忘单提供了帮助您使用 [Golang](https://golang.org) 的基本语法和方法。
+
+入门
+--------
+
+### hello.go
+
+```go
+package main
+import "fmt"
+func main() {
+    fmt.Println("Hello, world!")
+}
+```
+
+直接运行
+
+```shell
+$ go run hello.go
+Hello, world!
+```
+
+或者在 [Go repl](https://repl.it/languages/go) 中尝试一下
+
+### 变量
+
+```go
+var s1 string
+s1 = "Learn Go!"
+// 一次声明多个变量
+var b, c int = 1, 2
+var d = true
+```
+
+简短声明
+
+```go
+s1 := "Learn Go!"        // string
+b, c := 1, 2             // int
+d := true                // bool
+```
+
+参见：[基本类型](#golang-基本类型)
+
+### 函数
+
+```go
+package main
+import "fmt"
+// 程序的入口点
+func main() {
+  fmt.Println("Hello world!")
+  say("Hello Go!")
+}
+func say(message string) {
+  fmt.Println("You said: ", message)
+}
+```
+
+参见：[函数(Functions)](#golang-函数)
+
+### 注释
+
+```go
+// 单行注释
+/* 这是
+多行注释 */
+```
+
+### 如果语句
+
+```go
+if true {
+  fmt.Println("Yes!")
+}
+```
+
+参见：[条件控制](#golang-条件控制)
+
+Golang 基本类型
+--------
+
+### 字符串 Strings
+
+```go
+s1 := "Hello" + "World"
+s2 := `A "raw" string literal
+can include line breaks.`
+// 输出：11
+fmt.Println(len(s1))
+// 输出：Hello
+fmt.Println(string(s1[0:5]))
+```
+
+字符串的类型为 `字符串`
+
+### 数字 Numbers
+
+```go
+num := 3             // int
+num := 3.            // float64
+num := 3 + 4i        // complex128
+num := byte('a')     // byte (alias: uint8)
+var u uint = 7       // uint (unsigned)
+var p float32 = 22.7  // 32-bit float
+```
+
+#### 操作符 Operators
+
+```go
+x := 5
+x++
+fmt.Println("x + 4 =", x + 4)
+fmt.Println("x * 4 =", x * 4) 
+```
+
+参见：[更多操作符](#运算符和标点符号)
+
+### 布尔值 Booleans
+
+```go
+isTrue   := true
+isFalse  := false
+```
+
+#### 操作符 
+
+```go
+fmt.Println(true && true)   // true 
+fmt.Println(true && false)  // false
+fmt.Println(true || true)   // true
+fmt.Println(true || false)  // true
+fmt.Println(!true)          // false
+```
+
+参见：[更多操作符](#运算符和标点符号)
+
+### 数组 Arrays
+<!--rehype:wrap-class=row-span-2-->
+
+```go
+┌────┬────┬────┬────┬─────┬─────┐
+| 2  | 3  | 5  | 7  | 11  | 13  |
+└────┴────┴────┴────┴─────┴─────┘
+  0    1    2    3     4     5
+```
+
+---
+
+```go
+primes := [...]int{2, 3, 5, 7, 11, 13}
+fmt.Println(len(primes)) // => 6
+// 输出：[2 3 5 7 11 13]
+fmt.Println(primes)
+// 与 [:3] 相同，输出：[2 3 5]
+fmt.Println(primes[0:3])
+```
+
+---
+
+```go
+var a [2]string
+a[0] = "Hello"
+a[1] = "World"
+fmt.Println(a[0], a[1]) //=> Hello World
+fmt.Println(a)   // => [Hello World]
+```
+
+#### 2d array
+
+```go
+var twoDimension [2][3]int
+for i := 0; i < 2; i++ {
+    for j := 0; j < 3; j++ {
+        twoDimension[i][j] = i + j
+    }
+}
+// => 2d:  [[0 1 2] [1 2 3]]
+fmt.Println("2d: ", twoDimension)
+```
+
+### 指针(Pointers)
+
+```go
+func main () {
+  b := *getPointer()
+  fmt.Println("Value is", b)
+}
+
+func getPointer () (myPointer *int) {
+  a := 234
+  return &a
+}
+
+a := new(int)
+*a = 234
+```
+
+参见：[指针(Pointers)](https://tour.golang.org/moretypes/1)
+
+### 切片(Slices)
+
+```go
+s := make([]string, 3)
+s[0] = "a"
+s[1] = "b"
+s = append(s, "d")
+s = append(s, "e", "f")
+fmt.Println(s)
+fmt.Println(s[1])
+fmt.Println(len(s))
+fmt.Println(s[1:3])
+slice := []int{2, 3, 4}
+```
+
+另见：[切片示例](https://gobyexample.com/slices)
+
+### 常量(Constants)
+
+```go
+const s string = "constant"
+const Phi = 1.618
+const n = 500000000
+const d = 3e20 / n
+fmt.Println(d)
+```
+
+### 类型转换
+
+```go
+i := 90
+f := float64(i)
+u := uint(i)
+// 将等于字符Z
+s := string(i)
+```
+
+#### 如何获取int字符串？
+
+```go
+i := 90
+// 需要导入“strconv”
+s := strconv.Itoa(i)
+fmt.Println(s) // Outputs: 90
+```
+
+
+Golang 字符串
+--------
+
+### 字符串函数
+
+```go
+package main
+import (
+	"fmt"
+	s "strings"
+)
+func main() {
+    /* 需要将字符串导入为 s */
+	fmt.Println(s.Contains("test", "e"))
+    /* 内置 */
+    fmt.Println(len("hello"))  // => 5
+    // 输出: 101
+	fmt.Println("hello"[1])
+    // 输出: e
+	fmt.Println(string("hello"[1]))
+}
+```
+
+### fmt.Printf
+<!--rehype:wrap-class=row-span-2 col-span-2-->
+
+```go
+package main
+import (
+	"fmt"
+	"os"
+)
+type point struct {
+	x, y int
+}
+func main() {
+	p := point{1, 2}
+	fmt.Printf("%v\n", p)                        // => {1 2}
+	fmt.Printf("%+v\n", p)                       // => {x:1 y:2}
+	fmt.Printf("%#v\n", p)                       // => main.point{x:1, y:2}
+	fmt.Printf("%T\n", p)                        // => main.point
+	fmt.Printf("%t\n", true)                     // => TRUE
+	fmt.Printf("%d\n", 123)                      // => 123
+	fmt.Printf("%b\n", 14)                       // => 1110
+	fmt.Printf("%c\n", 33)                       // => !
+	fmt.Printf("%x\n", 456)                      // => 1c8
+	fmt.Printf("%f\n", 78.9)                     // => 78.9
+	fmt.Printf("%e\n", 123400000.0)              // => 1.23E+08
+	fmt.Printf("%E\n", 123400000.0)              // => 1.23E+08
+	fmt.Printf("%s\n", "\"string\"")             // => "string"
+	fmt.Printf("%q\n", "\"string\"")             // => "\"string\""
+	fmt.Printf("%x\n", "hex this")               // => 6.86578E+15
+	fmt.Printf("%p\n", &p)                       // => 0xc00002c040
+	fmt.Printf("|%6d|%6d|\n", 12, 345)           // => |    12|   345|
+	fmt.Printf("|%6.2f|%6.2f|\n", 1.2, 3.45)     // => |  1.20|  3.45|
+	fmt.Printf("|%-6.2f|%-6.2f|\n", 1.2, 3.45)   // => |1.20  |3.45  |
+	fmt.Printf("|%6s|%6s|\n", "foo", "b")        // => |   foo|     b|
+	fmt.Printf("|%-6s|%-6s|\n", "foo", "b")      // => |foo   |b     |
+	s := fmt.Sprintf("a %s", "string")
+	fmt.Println(s)
+	fmt.Fprintf(os.Stderr, "an %s\n", "error")
+}
+```
+
+另见：[fmt](https://golang.org/pkg/fmt/)
+
+### 函数实例
+
+| 实例                           | Result      |
+|-------------------------------|-------------|
+| Contains("test", "es")        | true        |
+| Count("test", "t")            | 2           |
+| HasPrefix("test", "te")       | true        |
+| HasSuffix("test", "st")       | true        |
+| Index("test", "e")            | 1           |
+| Join([]string{"a", "b"}, "-") | a-b         |
+| Repeat("a", 5)                | aaaaa       |
+| Replace("foo", "o", "0", -1)  | f00         |
+| Replace("foo", "o", "0", 1)   | f0o         |
+| Split("a-b-c-d-e", "-")       | [a b c d e] |
+| ToLower("TEST")               | test        |
+| ToUpper("test")               | TEST        |
+
+Golang 条件控制
+--------
+
+### 有条件的
+
+```go
+a := 10
+if a > 20 {
+    fmt.Println(">")
+} else if a < 20 {
+    fmt.Println("<")
+} else {
+    fmt.Println("=")
+}
+```
+
+### if 中的语句
+
+```go
+x := "hello go!"
+if count := len(x); count > 0 {
+    fmt.Println("Yes")
+}
+```
+
+---
+
+```go
+if _, err := doThing(); err != nil {
+    fmt.Println("Uh oh")
+}
+```
+
+### Switch
+
+```go
+x := 42.0
+switch x {
+  case 0:
+  case 1, 2:
+      fmt.Println("Multiple matches")
+  case 42:   // Don't "fall through".
+      fmt.Println("reached")
+  case 43:
+      fmt.Println("Unreached")
+  default:
+      fmt.Println("Optional")
+}
+```
+
+参见：[Switch](https://github.com/golang/go/wiki/Switch)
+
+### For loop
+
+```go
+for i := 0; i <= 10; i++ {
+  fmt.Println("i: ", i)
+}
+```
+
+### 对于 Range 循环
+
+```go
+nums := []int{2, 3, 4}
+sum := 0
+for _, num := range nums {
+  sum += num
+}
+fmt.Println("sum:", sum)
+```
+
+### While 循环
+
+```go
+i := 1
+for i <= 3 {
+  fmt.Println(i)
+  i++
+}
+```
+
+### Continue 关键字
+
+```go
+for i := 0; i <= 5; i++ {
+  if i % 2 == 0 {
+      continue
+  }
+  fmt.Println(i)
+}
+```
+
+### Break 关键字
+
+```go
+for {
+  fmt.Println("loop")
+  break
+}
+```
+
+Golang 结构和映射
+--------
+
+### 定义
+<!--rehype:wrap-class=row-span-2-->
+
+```go
+package main
+import (
+	"fmt"
+)
+type Vertex struct {
+	X int
+	Y int
+}
+func main() {
+	v := Vertex{1, 2}
+	v.X = 4
+	fmt.Println(v.X, v.Y) // => 4 2
+}
+```
+
+参见：[结构(Structs)](https://tour.golang.org/moretypes/2)
+
+### 字面量
+
+```go
+v := Vertex{X: 1, Y: 2}
+// Field names can be omitted
+v := Vertex{1, 2}
+// Y is implicit
+v := Vertex{X: 1}
+```
+
+您还可以输入字段名
+
+### 映射
+<!--rehype:wrap-class=row-span-2-->
+
+```go
+m := make(map[string]int)
+m["k1"] = 7
+m["k2"] = 13
+fmt.Println(m) // => map[k1:7 k2:13]
+v1 := m["k1"]
+fmt.Println(v1)     // => 7
+fmt.Println(len(m)) // => 2
+delete(m, "k2")
+fmt.Println(m) // => map[k1:7]
+_, prs := m["k2"]
+fmt.Println(prs) // => false
+n := map[string]int{"foo": 1, "bar": 2}
+fmt.Println(n) // => map[bar:2 foo:1]
+```
+
+### 指向结构的指针
+
+```go
+v := &Vertex{1, 2}
+v.X = 2
+```
+
+Doing `v.X` is the same as doing `(*v).X`, when `v` is a pointer.
+
+Golang 函数
+--------
+
+### 多个参数
+
+```go
+func plus(a int, b int) int {
+    return a + b
+}
+func plusPlus(a, b, c int) int {
+    return a + b + c
+}
+fmt.Println(plus(1, 2))
+fmt.Println(plusPlus(1, 2, 3))
+```
+
+### 多次返回
+
+```go
+func vals() (int, int) {
+  return 3, 7
+}
+a, b := vals()
+fmt.Println(a)    // => 3
+fmt.Println(b)    // => 7
+```
+
+### 匿名函数
+
+```go
+r1, r2 := func() (string, string) {
+    x := []string{"hello", "world"}
+    return x[0], x[1]
+}()
+// => hello world
+fmt.Println(r1, r2)
+```
+
+### 命名返回
+
+```go
+func split(sum int) (x, y int) {
+  x = sum * 4 / 9
+  y = sum - x
+  return
+}
+x, y := split(17)
+fmt.Println(x)   // => 7
+fmt.Println(y)   // => 10
+```
+
+### 变量函数
+
+```go
+func sum(nums ...int) {
+  fmt.Print(nums, " ")
+  total := 0
+  for _, num := range nums {
+      total += num
+  }
+  fmt.Println(total)
+}
+sum(1, 2)     //=> [1 2] 3
+sum(1, 2, 3)  // => [1 2 3] 6
+nums := []int{1, 2, 3, 4}
+sum(nums...)  // => [1 2 3 4] 10
+```
+
+### 初始化函数
+
+```go
+import --> const --> var --> init()
+```
+---
+
+```go
+var num = setNumber()
+func setNumber() int {
+  return 42
+}
+func init() {
+  num = 0
+}
+func main() {
+  fmt.Println(num) // => 0
+}
+```
+
+### 作为值的函数
+
+```go
+func main() {
+  // 将函数赋给名称
+  add := func(a, b int) int {
+      return a + b
+  }
+  // 使用名称调用函数
+  fmt.Println(add(3, 4)) // => 7
+}
+```
+
+### 关闭 1
+
+```go
+func scope() func() int{
+  outer_var := 2
+  foo := func() int {return outer_var}
+  return foo
+}
+// Outpus: 2
+fmt.Println(scope()())
+```
+
+### 关闭 2
+
+```go
+func outer() (func() int, int) {
+    outer_var := 2
+    inner := func() int {
+        outer_var += 99
+        return outer_var
+    }
+    inner()
+    return inner, outer_var
+}
+inner, val := outer()
+fmt.Println(inner()) // => 200
+fmt.Println(val)     // => 101
+```
+
+Golang 包(Packages)
+--------
+
+### 导入
+<!--rehype:wrap-class=row-span-2-->
+
+```go
+import "fmt"
+import "math/rand"
+```
+
+#### 等同于
+
+```go
+import (
+  "fmt"        // 给 fmt.Println
+  "math/rand"  // 给 rand.Intn
+)
+```
+
+另见：[导入](https://tour.golang.org/basics/1)
+
+### 别名
+<!--rehype:wrap-class=row-span-2-->
+
+```go
+import r "math/rand"
+```
+
+---
+
+```go
+import (
+    "fmt"
+    r "math/rand"
+)
+```
+
+---
+
+```go
+r.Intn()
+```
+
+### Packages
+
+```go
+package main
+// 一个内部包只能被另一个包导入
+// 那是在以内部目录的父级为根的树内
+package internal
+```
+
+另见：[内部包](https://go.dev/doc/go1.4#internalpackages)
+
+### 导出名称
+
+```go
+// 以大写字母开头
+func Hello () {
+  ···
+}
+```
+
+另见：[导出的名称](https://tour.golang.org/basics/3)
+
+Golang 并发
+--------
+
+### 协程
+<!--rehype:wrap-class=row-span-2-->
+
+```go
+package main
+import (
+	"fmt"
+	"time"
+)
+func f(from string) {
+	for i := 0; i < 3; i++ {
+		fmt.Println(from, ":", i)
+	}
+}
+func main() {
+	f("direct")
+	go f("goroutine")
+	go func(msg string) {
+		fmt.Println(msg)
+	}("going")
+	time.Sleep(time.Second)
+	fmt.Println("done")
+}
+```
+
+参见：[Goroutines](https://tour.golang.org/concurrency/1), [Channels](https://tour.golang.org/concurrency/2)
+
+### WaitGroup
+<!--rehype:wrap-class=row-span-2-->
+
+```golang
+package main
+import (
+	"fmt"
+	"sync"
+	"time"
+)
+func w(id int, wg *sync.WaitGroup) {
+	defer wg.Done()
+	fmt.Printf("%d starting\n", id)
+	time.Sleep(time.Second)
+	fmt.Printf("%d done\n", id)
+}
+func main() {
+	var wg sync.WaitGroup
+	for i := 1; i <= 5; i++ {
+		wg.Add(1)
+		go w(i, &wg)
+	}
+	wg.Wait()
+}
+```
+
+参见：[WaitGroup](https://golang.org/pkg/sync/#WaitGroup)
+
+### Closing channels
+
+```go
+ch <- 1
+ch <- 2
+ch <- 3
+close(ch) // 关闭频道
+```
+
+---
+
+```go
+// 迭代通道直到关闭
+for i := range ch {
+  ···
+}
+```
+
+---
+
+```go
+// Closed if `ok == false`
+v, ok := <- ch
+```
+
+参见：[范围和关闭](https://tour.golang.org/concurrency/4)
+
+### 缓冲通道
+
+```go
+ch := make(chan int, 2)
+ch <- 1
+ch <- 2
+ch <- 3
+// 致命错误：
+// 所有 goroutine 都处于休眠状态 - 死锁
+```
+
+参见：[缓冲通道](https://tour.golang.org/concurrency/3)
+
+Golang 错误控制
+--------
+
+### 延迟函数
+
+```go
+func main() {
+  defer func() {
+    fmt.Println("Done")
+  }()
+  fmt.Println("Working...")
+}
+```
+
+### Lambda defer
+
+```go
+func main() {
+  var d = int64(0)
+  defer func(d *int64) {
+    fmt.Printf("& %v Unix Sec\n", *d)
+  }(&d)
+  fmt.Print("Done ")
+  d = time.Now().Unix()
+}
+```
+
+`defer` 函数使用当前值`d`，除非我们使用指针在 `main` 末尾获取最终值
+
+### Defer
+
+```go
+func main() {
+  defer fmt.Println("Done")
+  fmt.Println("Working...")
+}
+```
+
+参见：[Defer, panic and recover](https://blog.golang.org/defer-panic-and-recover)
+
+Golang 方法(Methods)
+--------
+<!--rehype:body-class=cols-2-->
+
+### 接收器
+
+```go
+type Vertex struct {
+  X, Y float64
+}
+
+func (v Vertex) Abs() float64 {
+  return math.Sqrt(v.X * v.X + v.Y * v.Y)
+}
+
+v := Vertex{1, 2}
+v.Abs()
+```
+
+参见：[Methods](https://tour.golang.org/methods/1)
+
+### Mutation
+
+```go
+func (v *Vertex) Scale(f float64) {
+  v.X = v.X * f
+  v.Y = v.Y * f
+}
+
+v := Vertex{6, 12}
+v.Scale(0.5)
+// `v` 已更新
+```
+
+参见：[指针接收器](https://tour.golang.org/methods/4)
+
+Golang 接口(Interfaces)
+--------
+<!--rehype:body-class=cols-2-->
+
+### 基本接口(Interfaces)
+
+```go
+type Shape interface {
+  Area() float64
+  Perimeter() float64
+}
+```
+
+### 结构(Struct)
+
+```go
+type Rectangle struct {
+  Length, Width float64
+}
+```
+
+结构 `Rectangle` 通过实现其所有方法隐式实现接口 `Shape`
+
+### 方法(Methods)
+
+```go
+func (r Rectangle) Area() float64 {
+  return r.Length * r.Width
+}
+func (r Rectangle) Perimeter() float64 {
+  return 2 * (r.Length + r.Width)
+}
+```
+
+在 `Shape` 中定义的方法在`Rectangle`中实现
+
+### 接口实例
+
+```go
+func main() {
+  var r Shape = Rectangle{Length: 3, Width: 4}
+  fmt.Printf("Type of r: %T, Area: %v, Perimeter: %v.", r, r.Area(), r.Perimeter())
+}
+```
+<!--rehype:className=wrap-text -->
+
+杂项
+-------------
+
+### 关键字(Keywords)
+- break
+- default
+- func
+- interface
+- select
+- case
+- defer
+- go
+- map
+- struct
+- chan
+- else
+- goto
+- package
+- switch
+- const
+- fallthrough
+- if
+- range
+- type
+- continue
+- for
+- import
+- return
+- var
+<!--rehype:className=cols-3 style-none-->
+
+### 运算符和标点符号
+
+|   |    |     |     |      |    |     |   |   |
+|---|----|-----|-----|------|----|-----|---|---|
+| `+` | &  | +=  | &=  | &&   | == | !=  | ( | ) |
+| `-` | \| | -=  | \|= | \|\| | <  | <=  | [ | ] |
+| `*` | ^  | *=  | ^=  | <-   | >  | >=  | { | } |
+| `/` | << | /=  | <<= | ++   | =  | :=  | , | ; |
+| `%` | >> | %=  | >>= | --   | !  | ... | . | : |
+|   | &^ | &^= |     |      |    |     |   |   |
+
+另见
+--------
+- [Devhints](https://devhints.io/go) _(devhints.io)_
+- [A tour of Go](https://tour.golang.org/welcome/1) _(tour.golang.org)_
+- [Golang wiki](https://github.com/golang/go/wiki/) _(github.com)_
+- [Effective Go](https://golang.org/doc/effective_go.html) _(golang.org)_
+- [Go by Example](https://gobyexample.com/) _(gobyexample.com)_
+- [Awesome Go](https://awesome-go.com/) _(awesome-go.com)_
+- [JustForFunc Youtube](https://www.youtube.com/channel/UC_BzFbxG2za3bp5NRRRXJSw) _(youtube.com)_
+- [Style Guide](https://github.com/golang/go/wiki/CodeReviewComments) _(github.com)_

docs/grep.md

@@ -0,0 +1,179 @@
+Grep 备忘清单
+===
+
+本备忘单旨在快速提醒使用命令行程序 grep 所涉及的主要概念，并假设您已经了解其用法。
+
+
+入门
+------
+<!--rehype:body-class=cols-5-->
+
+### 使用
+<!--rehype:wrap-class=col-span-2-->
+
+搜索标准输出（即文本流）
+
+```shell
+$ grep [options] search_string
+```
+
+在文件中搜索确切的字符串：
+
+```shell
+$ grep [options] search_string path/to/file
+```
+
+打印 myfile.txt 中包含字符串“mellon”的行
+
+```shell
+$ grep 'mellon' myfile.txt
+```
+
+文件名中接受通配符。
+
+
+### 选项示例
+<!--rehype:wrap-class=col-span-3-->
+
+选项 | 示例 | 说明
+:-|:-|:-
+| `-i`   | grep -i ^DA demo.txt                  | 忘记区分大小写
+| `-w`   | grep -w "of" demo.txt                 | 仅搜索完整的单词
+| `-A`   | grep -A 3 'Exception' error.log       | 匹配字符串后显示 3 行
+| `-B`   | grep -B 4 'Exception' error.log       | 在匹配字符串前显示 4 行
+| `-C`   | grep -C 5 'Exception' error.log       | 在匹配字符串周围显示 5 行
+| `-r`   | grep -r 'github.io' /var/log/nginx/   | 递归搜索 _(在子目录内)_
+| `-v`   | grep -v 'warning' /var/log/syslog     | 返回所有与模式不匹配的行
+| `-e`   | grep -e '^al' filename                | 使用正则表达式 _(以'al'开头的行)_
+| `-E`   | grep -E 'ja(s\|cks)on' filename       | 扩展正则表达式 _(包含 jason 或 jackson 的行)_
+| `-c`   | grep -c 'error' /var/log/syslog       | 计算匹配数
+| `-l`   | grep -l 'robot' /var/log/*            | 打印匹配文件的名称
+| `-o`   | grep -o search_string filename        | 只显示字符串的匹配部分
+| `-n`   | grep -n "go" demo.txt                 | 显示匹配的行号
+
+
+Grep 正则表达式
+-------
+
+### 参考
+
+- [Regex syntax](./regex.md) _(jaywcjlove.github.io)_
+- [Regex examples](./regex.md#正则表达式示例) _(jaywcjlove.github.io)_
+
+有关更复杂的要求，请参阅完整版的正则表达式备忘单。
+
+### 通配符(Wildcards)
+
+:- | :-
+:- | :-
+`.`   | 任何字符
+`?`   | 可选且只能出现一次
+`*`   | 可选的，可以多次出现
+`+`   | 必需并且可以多次出现
+
+### 量词(Quantifiers)
+
+:- | :-
+:- | :-
+`{n}`    | 前一项恰好出现 n 次
+`{n,}`   | 上一个项目出现 n 次或更多
+`{,m}`   | 上一个项目最多出现 n 次
+`{n,m}`  | 上一项出现在 n 到 m 次之间
+
+### POSIX
+
+:- | :-
+:- | :-
+`[:alpha:]`   | 任何大小写字母
+`[:digit:]`   | 任何数字
+`[:alnum:]`   | 任何大小写字母或数字
+`[:space:]`   | 任何空格
+
+### 字符串
+
+:- | :-
+:- | :-
+`[A-Z­a-z]`    | 任何大小写字母
+`[0-9]`       | 任何数字
+`[0-9­A-Z­a-z]` | 任何大小写字母或数字
+
+
+### 位置
+
+:- | :-
+:- | :-
+`^ ` | 行的开头
+`$ ` | 行结束
+`^$` | 空行
+`\<` | 词的开头
+`\>` | 词尾
+
+更多示例
+----
+
+### 搜索命令行历史记录
+
+```bash
+history | grep git
+```
+
+输入过 `git` 命令的记录
+
+### 搜索多个文件并查找匹配文本在哪些文件中
+
+```bash
+grep -l "text" file1 file2 file3...
+```
+
+### 多级目录中对文本进行递归搜索
+
+```bash
+grep "text" . -r -n
+```
+
+`.` 表示当前目录。
+
+### 搜索结果中包括或者排除指定文件
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+# 目录中所有的 .php 和 .html 文件中
+# 递归搜索字符 "main()"
+grep "main()" . -r --include *.{php,html}
+
+# 在搜索结果中排除所有 README 文件
+grep "main()" . -r --exclude "README"
+
+# 在搜索结果中排除 filelist 文件列表里的文件
+grep "main()" . -r --exclude-from filelist
+```
+
+### 输出包含匹配字符串的行数 -n 选项
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+grep "text" -n file_name
+# 或
+cat file_name | grep "text" -n
+
+#多个文件
+grep "text" -n file_1 file_2
+```
+
+### 忽略匹配样式中的字符大小写
+
+```bash
+echo "hello world" | grep -i "HELLO"
+# hello
+```
+
+### 统计文件或文本中包含匹配字符串的行数 -c 选项
+
+```
+grep -c "text" file_name
+```
+
+另见
+----
+
+- [grep 中文文档](https://wangchujiang.com/linux-command/c/grep.html) _(jaywcjlove.github.io)_

docs/homebrew.md

@@ -0,0 +1,132 @@
+Homebrew 备忘清单
+===
+
+Homebrew 是 macOS(或Linux)缺少的包管理器，备忘清单包含 [brew](https://github.com/Homebrew/brew) 命令的使用与安装
+
+Homebrew
+---
+
+### 安装
+<!--rehype:wrap-class=row-span-3-->
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+<!--rehype:className=wrap-text -->
+
+加速安装和更新，将仓库源码通过 [gitee](https://gitee.com/) 同步到国内，这样速度杠杠的
+
+```bash
+# 把 Homebrew/brew 的 Git 镜像放在这里
+export HOMEBREW_BREW_GIT_REMOTE="..."
+# 将 Homebrew/homebrew-core 的 Git 镜像放在这里
+export HOMEBREW_CORE_GIT_REMOTE="..."
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+```
+<!--rehype:className=wrap-text -->
+
+在安装期间跳过克隆 (beta)
+
+```bash
+export HOMEBREW_INSTALL_FROM_API=1
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+```
+<!--rehype:className=wrap-text -->
+
+### 命令
+
+命令 | 说明
+:--- :--- 
+`brew install git`         | `安装`一个包
+`brew reinstall git`       | 重新`安装`一个包
+`brew uninstall git`       | `删除`/`卸载`软件包
+`brew upgrade git`         | 升级包
+:--- :---
+`brew unlink git`          | `取消`链接
+`brew link git`            | 关联
+`brew switch git 2.5.0`    | 更改版本
+:--- :---
+`brew list --versions git` | 看看你有什么版本
+
+### 更多包命令
+
+命令 | 说明
+:--- :--- 
+`brew info git`            | 列出版本、注意事项等
+`brew cleanup git`         | 删除旧版本
+`brew edit git`            | 编辑此软件包
+`brew cat git`             | 打印这个软件包
+`brew home git`            | 打开主页
+`brew search git`          | 搜索公式
+
+### Brew Cask 命令
+
+命令 | 说明
+:--- :--- 
+`brew install --cask firefox` | 安装火狐浏览器
+`brew list --cask`            | 列出已安装应用
+
+Cask 命令用于与图形应用程序交互
+
+### 全局命令
+<!--rehype:wrap-class=row-span-2-->
+
+命令 | 说明
+:--- :--- 
+`brew update`   | 更新 `brew` 和 `cask`
+`brew upgrade`  | 升级所有软件包
+`brew list`     | 已安装列表
+`brew outdated` | 升级需要什么？
+`brew doctor`   | 诊断冲泡问题
+`brew pin <formula>` | 防止指定软件包升级
+`brew unpin <formula>` | 允许升级指定的软件包
+
+### Brew 清理
+
+```bash
+$ brew cleanup # 删除旧版本的已安装软件包
+$ brew cleanup <formula> # 删除旧版本指定软件包
+# 显示所有将被删除的软件包(试运行)
+$ brew cleanup -n 
+```
+
+### brew 源码仓库
+
+```bash
+# 列出所有当前点击的源码仓库（点击）
+$ brew tap
+# 使用 https 从 Github 中点击软件包源码仓库以点击
+# https://github.com/user/homebrew-repo
+$ brew tap <user/repo>
+# 点击指定 URL 中的软件源码仓库
+$ brew tap <user/repo> <URL>
+# 从存储库中删除给定的源码仓库
+$ brew untap <user/repo>
+```
+
+### 搜索查看
+
+```bash
+# 列出所有已安装的软件包
+$ brew list
+# 显示所有本地可用的 brew 配方
+$ brew search
+# 对用于 brew 的软件包名称执行子字符串搜索
+$ brew search <text>
+# 显示有关软件包的信息
+$ brew info <formula>
+```
+
+### 帮助命令
+
+命令 | 说明
+:--- :--- 
+`brew help` | 打印帮助信息
+`brew help <sub-command>` | 打印子命令的帮助信息
+
+另见
+---
+
+- [Homebrew 官网](https://brew.sh/index_zh-cn) _(brew.sh)_
+- [Homebrew brew 源码](https://github.com/Homebrew/brew) _(github.com)_
+- [Homebrew core 源码](https://github.com/Homebrew/homebrew-core) _(github.com)_

docs/html.md

@@ -0,0 +1,903 @@
+HTML 备忘清单
+===
+
+此 HTML 快速参考备忘单以可读布局列出了常见的 `HTML` 和 `HTML5` 标记。
+
+入门
+------------
+
+### hello.html
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML5 Boilerplate</title>
+</head>
+<body>
+    <h1>Hello world, hello 备忘清单!</h1>
+</body>
+</html>
+```
+
+或者在 [jsfiddle](https://jsfiddle.net/Randy8080/1e4wz20b/)
+
+### 注释 Comment
+
+```html
+<!-- 这是代码注释 -->
+
+<!--
+  或者你可以注释掉一个
+  大量的行。
+-->
+```
+
+### 段落 Paragraph
+
+```html
+<p>我来自快速参考</p>
+<p>分享快速参考备忘单。</p>
+```
+请参阅：[段落元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p)
+
+### HTML 链接
+
+```html 
+<a href="https://github.com/jaywcjlove/reference">
+  Github
+</a>
+<a href="mailto:jack@abc.com">邮箱</a>
+<a href="tel:+123456789">电话</a>
+<a href="sms:+123456789&body=ha%20ha">
+  短信
+</a>
+```
+
+---
+
+:-|:-
+:-|:-
+`href`   | 超链接指向的 URL |
+`rel`    | 链接 URL 的关系 |
+`target` | 链接目标位置：`_self`/`_blank`/`_top`/`_parent` |
+
+请参阅：[\<a> 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attributes)
+
+
+
+### Image 标签
+
+```html
+<img loading="lazy"
+  src="https://xxx.png"
+  alt="在此处描述图像"
+  width="400" height="400">
+```
+<!--rehype:className=wrap-text -->
+
+---
+
+|   |           |                                          |
+|---|-----------|------------------------------------------|
+|   | `src` _(URL/路径)_ | 必填，图片位置 |
+|   | `alt`     | 描述图像 |
+|   | `width`   | 图像宽度 |
+|   | `height`  | 图像高度 |
+|   | `loading` | 浏览器应该如何加载 |
+
+请参阅：[图像嵌入元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)
+
+### 文本格式标签
+
+```html
+<b>粗体文字</b>
+<strong>这段文字很重要</strong>
+<i>斜体文本</i>
+<em>这段文字被强调</em>
+<u>下划线文本</u>
+<pre>预格式化文本</pre>
+<code>源代码</code>
+<del>删除的文字</del>
+<mark>突出显示的文本 (HTML5)</mark>
+<ins>插入的文本</ins>
+<sup>使文本上标</sup>
+<sub>使文本下标</sub>
+<small>使文本变小</small>
+<pre>预格式化文本</pre>
+<kbd>Ctrl</kbd>
+<blockquote>文本块引用</blockquote>
+```
+
+### 标题
+
+```html
+<h1> 这是标题 1 </h1>
+<h2> 这是标题 2 </h2>
+<h3> 这是标题 3 </h3>
+<h4> 这是标题 4 </h4>
+<h5> 这是标题 5 </h5>
+<h6> 这是标题 6 </h6>
+```
+
+您的页面上应该只有一个 `h1`
+
+### Section Divisions
+
+:-|:-
+:-|:-
+`<div></div>`   | 页面内容的划分或部分
+`<span></span>` | 其他内容中的文本部分
+`<p></p>`       | 文本段落
+`<br>`          | 换行
+`<hr>`          | 水平分割线
+
+这些标签用于将页面划分为多个部分
+
+### 内部框架
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<iframe
+  id="inlineFrameExample"
+  title="Inline Frame Example"
+  width="100%"
+  height="200"
+  frameborder="0"
+  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
+</iframe>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<iframe id="inlineFrameExample"
+  title="Inline Frame Example"
+  width="100%"
+  height="200"
+  frameborder="0"
+  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
+</iframe>
+
+
+请参阅：[内联框架元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)
+
+
+### HTML 中的 JavaScript
+
+```html
+<script type="text/javascript">
+  let text = "Hello 快速参考";
+  alert(text);
+</script>
+```
+
+
+#### 外部 JavaScript
+
+```html
+<body>
+  ...
+  <script src="app.js"></script>
+</body>
+```
+
+
+### HTML 中的 CSS
+
+```html
+<style type="text/css">
+    h1 {
+        color: purple;
+    }
+</style>
+```
+
+#### 外部样式表
+
+```html
+<head>
+  ...
+  <link rel="stylesheet" href="style.css"/>
+</head>
+```
+
+
+
+HTML5 标签
+-------------
+
+### 页面
+
+```html
+<body>
+  <header>
+    <nav>...</nav>
+  </header>
+  <main>
+    <h1>快速参考</h1>
+  </main>
+  <footer>
+    <p>©2023 快速参考</p>
+  </footer>
+</body>
+```
+
+
+### 标题导航
+
+```html
+<header>
+  <nav>
+    <ul>
+      <li><a href="#">编辑页面</a></li>
+      <li><a href="#">Twitter</a></li>
+      <li><a href="#">Facebook</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+
+### HTML5 Tags
+<!--rehype:wrap-class=row-span-4-->
+
+:-|:-
+:-|:-
+[article](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article)       | 独立的内容
+[aside](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside)           | 次要内容
+[audio](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio)           | 嵌入声音或音频流
+[bdi](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/bdi)               | 双向隔离元件
+[canvas](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)         | 通过JavaScript绘制图形
+[data](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/data)             | 机器可读内容
+[datalist](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist)     | 一组预定义选项
+[details](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details)       | 其他信息
+[dialog](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog)         | 对话框或子窗口
+[embed](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed)           | 嵌入外部应用程序
+[figcaption](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figcaption) | 图形的标题或图例
+[figure](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure)         | 插图
+[footer](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer)         | 页脚或最不重要的
+[header](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header)         | 刊头或重要信息
+[main](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main)             | 文件的主要内容
+[mark](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark)             | 突出显示的文本
+[meter](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meter)           | 已知范围内的标量值
+[nav](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav)               | 导航链接的一部分
+[output](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/output)         | 计算的结果
+[picture](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture)       | 用于多个图像源的容器
+[progress](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress)     | 任务的完成进度
+[rp](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rp)                 | 提供回退括号
+[rt](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rt)                 | 定义字符的发音
+[ruby](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby)             | 表示ruby注释
+[section](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section)       | 一系列相关内容中的组
+[source](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source)         | 媒体元素的资源
+[summary](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary)       | 元素的摘要
+[template](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template)     | 定义HTML片段
+[time](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/time)             | 时间或日期
+[track](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track)           | 媒体元素的字幕信息
+[video](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)           | 嵌入视频
+[wbr](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr)               | 换行机会
+
+
+### HTML5 Video
+
+```html
+<video controls="" width="100%">
+    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
+    很抱歉，您的浏览器不支持嵌入式视频。
+</video>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<video controls="" width="100%">
+    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
+    很抱歉，您的浏览器不支持嵌入式视频。
+</video>
+
+### HTML5 Audio
+
+```html
+<audio
+  controls
+  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
+    您的浏览器不支持音频元素。
+</audio>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<audio controls
+    src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
+    您的浏览器不支持音频元素。
+</audio>
+
+### HTML5 Ruby
+
+```html
+<ruby>
+  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
+  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
+  拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
+  音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
+</ruby>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+<!--rehype:wrap-style=text-align: center;-->
+
+<ruby style="font-size: 4rem;">
+  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
+  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
+  拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
+  音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
+</ruby>
+
+
+### HTML5 kdi
+
+```html
+<ul>
+ <li>User <bdi>hrefs</bdi>: 60 points</li>
+ <li>User <bdi>jdoe</bdi>: 80 points</li>
+ <li>User <bdi>إيان</bdi>: 90 points</li>
+</ul>
+```
+
+#### ↓ 预览
+
+<ul>
+ <li>User <bdi>hrefs</bdi>: 60 points</li>
+ <li>User <bdi>jdoe</bdi>: 80 points</li>
+ <li>User <bdi>إيان</bdi>: 90 points</li>
+</ul>
+
+
+### HTML5 progress
+
+```html
+<progress value="50" max="100"></progress>
+```
+
+<progress value="50" max="100" style="width: 100%"></progress>
+
+### HTML5 mark
+
+```html
+<p>我爱<mark>备忘清单</mark></p>
+```
+
+<p>我爱<mark>备忘清单</mark></p>
+
+
+HTML 表格
+--------------
+
+### Table 示例
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<table>
+  <thead>
+      <tr>
+        <td>name</td>
+        <td>age</td>
+      </tr>
+  </thead>
+  <tbody>
+      <tr>
+        <td>Roberta</td>
+        <td>39</td>
+      </tr>
+      <tr>
+        <td>Oliver</td>
+        <td>25</td>
+      </tr>
+  </tbody>
+</table>
+```
+
+### HTML表格标签
+<!--rehype:wrap-class=row-span-2-->
+
+标签|说明
+:-|:-
+[\<table>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table)       | 定义表格
+[\<th>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th)             | 定义表格中的标题单元格
+[\<tr>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr)             | 定义表中的行
+[\<td>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td)             | 定义表格中的单元格
+[\<caption>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption)   | 定义表格标题
+[\<colgroup>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup) | 定义一组列
+[\<col>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col)           | 定义表中的列
+[\<thead>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead)       | 对标题内容进行分组
+[\<tbody>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody)       | 将正文内容分组
+[\<tfoot>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot)       | 对页脚内容进行分组
+
+### \<td> 属性
+
+属性|说明
+:-|:-
+`colspan` | 单元格应跨越的列数
+`headers` | 单元格与一个或多个标题单元格相关
+`rowspan` | 单元格应跨越的行数
+
+请参阅：[td\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attributes)
+
+### \<th> 属性
+
+属性|说明
+:-|:-
+`colspan`                                                                        | 单元格应跨越的列数
+`headers`                                                                        | 单元格与一个或多个标题单元格相关
+`rowspan`                                                                        | 单元格应跨越的行数
+`abbr`                                                                           | 单元格内容的描述
+[scope](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope) | 表头元素(在\<th>中定义)关联的单元格
+
+请参阅：[th\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attributes)
+
+HTML 列表
+----
+
+### 无序列表
+
+```html
+<ul>
+  <li>I'm an item</li>
+  <li>I'm another item</li>
+  <li>I'm another item</li>
+</ul>
+```
+
+请参阅：[无序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul)
+
+### 有序列表
+
+```html
+<ol>
+  <li>I'm the first item</li>
+  <li>I'm the second item</li>
+  <li>I'm the third item</li>
+</ol>
+```
+
+请参阅：[有序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol)
+
+### 定义列表
+
+```html
+<dl>
+  <dt>A Term</dt>
+  <dd>Definition of a term</dd>
+  <dt>Another Term</dt>
+  <dd>Definition of another term</dd>
+</dl>
+```
+
+请参阅：[描述列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl)
+
+HTML 表单
+-----------
+
+### Form 标签
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<form method="POST" action="api/login">
+  <label for="mail">邮箱: </label>
+  <input type="email" id="mail" name="mail">
+  <br/>
+  <label for="pw">密码:</label>
+  <input type="password" id="pw" name="pw">
+  <br/>
+  <input type="submit" value="登录">
+  <br/>
+  <input type="checkbox" id="ck" name="ck">
+  <label for="ck">记住我</label>
+</form>
+```
+
+#### ↓ 预览
+
+<form method="POST" action="api/login" style="padding: 20px;">
+  <label for="email">邮箱: </label> 
+  <input type="email" id="email" name="email" class="border border-slate-400 mt-2">
+  <br/>
+  <label for="pwd">密码:</label> 
+  <input type="password" id="pwd" name="pwd" class="border border-slate-400 mt-2">
+  <br/>
+  <input type="submit" value="登录" class="mt-2">
+  <br/>
+  <input type="checkbox" id="ck" name="ck" class="mt-2">
+  <label for="ck">记住我</label> 
+</form>
+
+
+HTML `<form>` 元素用于收集信息并将其发送到外部源。
+
+### Form 属性
+
+属性|说明
+:-|:-
+`name`     | 脚本形式的名称
+`action`   | 表单脚本的URL
+`method`   | HTTP方法，`POST`/`GET` _(默认)_
+`enctype`  | 介质类型，请参见[enctype](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/enctype)
+`onsubmit` | 提交表单时运行
+`onreset`  | 在窗体重置时运行
+
+### Label 标签
+
+```html
+<!-- 嵌套标签 -->
+<label>Click me 
+<input type="text" id="user" name="name"/>
+</label>
+```
+
+---
+
+```html
+<!-- 'for' 属性 -->
+<label for="user">Click me</label>
+<input id="user" type="text" name="name"/>
+```
+
+`for`在标签中引用输入的`id`属性
+
+### Input 标签
+
+```html
+<label for="Name">Name:</label>
+<input type="text" name="Name" id="">
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px;">
+  <label for="username">Username:</label>
+  <input type="text" name="username" id="username" class="border border-slate-400">
+</form>
+
+请参阅：[HTML输入标记](/html#html-input-tags)
+
+### Textarea 标签
+
+```html
+<textarea rows="2" cols="30" name="address" id="address"></textarea>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<form style="padding: 20px;">
+    <textarea rows="2" cols="30" name="address" id="address" class="border border-slate-400"style="width: 100%"></textarea>
+</form>
+
+Textarea 是一个多行文本输入控件
+
+### Radio Buttons
+
+```html
+<input type="radio" name="gender" id="m">
+<label for="m">Male</label>
+<input type="radio" name="gender" id="f">
+<label for="f">Female</label>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px;">
+    <input type="radio" name="gender" id="m">
+    <label for="m">Male</label>
+    <input type="radio" name="gender" id="f">
+    <label for="f">Female</label>
+</form>
+
+单选按钮用于让用户只选择一个
+
+### Checkboxes
+```html
+<input type="checkbox" name="s" id="soc">
+<label for="soc">Soccer</label>
+<input type="checkbox" name="s" id="bas">
+<label for="bas">Baseball</label>
+```
+#### ↓ 预览
+<form style="padding: 20px;">
+    <input type="checkbox" name="sports" id="soccer">
+    <label for="soccer">Soccer</label>
+    <input type="checkbox" name="sports" id="baseball">
+    <label for="baseball">Baseball</label>
+</form>
+
+复选框允许用户选择一个或多个
+
+### Select 标签
+
+```html
+<label for="city">City:</label>
+<select name="city" id="city">
+  <option value="1">Sydney</option>
+  <option value="2">Melbourne</option>
+  <option value="3">Cromwell</option>
+</select>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px">
+  <label for="city">City:</label>
+  <select name="city" id="city" class="border border-slate-400">
+      <option value="1">Sydney</option>
+      <option value="2">Melbourne</option>
+      <option value="3">Cromwell</option>
+  </select>
+</form>
+
+选择框是选项的下拉列表
+
+### Fieldset 标签
+
+```html
+<fieldset>
+  <legend>Your favorite monster</legend>
+  <input type="radio" id="kra" name="m">
+  <label for="kraken">Kraken</label><br/>
+  <input type="radio" id="sas" name="m">
+  <label for="sas">Sasquatch</label>
+</fieldset>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px">
+<fieldset class="border border-slate-400" style="padding: 20px">
+  <legend>Your favorite monster</legend>
+  <input type="radio" id="kra" name="monster">
+  <label for="kra">Kraken</label><br/>
+  <input type="radio" id="sas" name="monster">
+  <label for="sas">Sasquatch</label>
+</fieldset>
+</form>
+
+### 数据列表标签（HTML5）
+
+```html
+<label for="b">Choose a browser: </label>
+<input list="list" id="b" name="browser"/>
+<datalist id="list">
+  <option value="Chrome">
+  <option value="Firefox">
+  <option value="Internet Explorer">
+  <option value="Opera">
+  <option value="Safari">
+  <option value="Microsoft Edge">
+</datalist>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px">
+  <label for="myBrowser">Choose a browser:</label>
+  <input list="browsers" id="myBrowser" name="myBrowser"/>
+  <datalist id="browsers">
+    <option value="Chrome">
+    <option value="Firefox">
+    <option value="Internet Explorer">
+    <option value="Opera">
+    <option value="Safari">
+    <option value="Microsoft Edge">
+  </datalist>
+</form>
+
+### 提交和重置按钮
+
+```html
+<form action="register.php" method="post">
+  <label for="foo">Name:</label>
+  <input type="text" name="name" id="foo">
+  <input type="submit" value="提交">
+  <input type="reset" value="重置">
+</form>
+```
+
+#### ↓ 预览
+
+<form action="register.php" method="post" style="padding: 20px">
+  <label for="name">Name:</label>
+  <input type="text" name="name" id="name"">
+  <input type="submit" value="提交">
+  <input type="reset" value="重置">
+</form>
+
+`将数据提交到服务器` 重置为默认值
+
+
+HTML input 标签
+-----------
+<!--rehype:body-class=cols-2-->
+
+### Input 属性
+<!--rehype:wrap-class=row-span-2-->
+
+输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。
+
+```html
+<input type="text" name="?" value="?" minlength="6"	 required />
+```
+
+----
+
+:-|:-
+:-|:-
+`type="…"`              | 正在输入的数据类型
+`value="…"`             | 默认值
+`name="…"`              | 用于在 HTTP 请求中描述此数据
+`id="…"`                | 其他 HTML 元素的唯一标识符
+`readonly`              | 停止用户修改
+`disabled`              | 停止任何交互
+`checked`               | 单选或复选框是否选中
+`required`              | 是强制性的，参阅[必填](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/required#example)
+`placeholder="…"`       | 添加临时，请参阅[::placeholder](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder#examples)
+`autocomplete="off"`    | 禁用自动完成
+`autocapitalize="none"` | 禁用自动大写
+`inputmode="…"`         | 显示特定键盘，请参阅[inputmode](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode)
+`list="…"`              | 关联的[datalist](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist)的id
+`maxlength="…"`         | 最大字符数
+`minlength="…"`         | 最小字符数
+`min="…"`               | 范围和编号上的最小数值
+`max="…"`               | 范围和编号上的最大数值
+`step="…"`              | 数字如何在范围和数字中递增
+`pattern="…"`           | 指定一个[正则表达式](./regex.md)，请参阅[pattern](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern)
+`autofocus`             | 集中精力
+`spellcheck`            | 执行拼写检查
+`multiple`              | 是否允许[多个](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/multiple)值
+`accept=""`             | [file](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file) 中需要文件类型上载控件
+
+请参阅：[\<input>元素 的属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attributes)
+
+### Input 类型
+
+|               |                  |
+|---------------|------------------|
+`type="checkbox"` | <input type="checkbox">
+`type="radio"`    | <input type="radio">
+`type="file"`     | <input type="file">
+`type="hidden"`   | <input type="hidden">
+`type="text"`     | <input type="text">
+`type="password"` | <input type="password">
+`type="image"`    | <input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70">
+`type="reset"`    | <input type="reset">
+`type="button"`   | <input type="button">
+`type="submit"`   | <input type="submit">
+
+#### HTML5 中的新输入类型
+
+|               |                  |
+|---------------|------------------|
+| `type="color"`          | <input type="color" value="#0FB881"> |
+| `type="date"`           | <input type="date">                  |
+| `type="time"`           | <input type="time">                  |
+| `type="month"`          | <input type="month">                 |
+| `type="datetime-local"` | <input type="datetime-local">        |
+| `type="week"`           | <input type="week">                  |
+| `type="email"`          | <input type="email">                 |
+| `type="tel"`            | <input type="tel">                   |
+| `type="url"`            | <input type="url">                   |
+| `type="number"`         | <input type="number">                |
+| `type="search"`         | <input type="search">                |
+| `type="range"`          | <input type="range">                 |
+
+
+### Input CSS 选择器
+
+|               |                  |
+|---------------|------------------|
+| `input:focus` | 当键盘聚焦时       |
+
+HTML meta 标签
+-----------
+<!--rehype:body-class=cols-2-->
+
+### Meta 标签
+<!--rehype:wrap-class=row-span-3-->
+
+meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。
+
+```html
+<meta charset="utf-8">
+```
+
+```html
+<!-- 标题 -->
+<title>···</title>
+<meta property="og:title"  content="···">
+<meta name="twitter:title" content="···">
+```
+---
+
+```html
+<!-- url -->
+<link rel="canonical"       href="https://···">
+<meta property="og:url"  content="https://···">
+<meta name="twitter:url" content="https://···">
+```
+---
+
+```html
+<!-- 描述 -->
+<meta name="description"         content="···">
+<meta property="og:description"  content="···">
+<meta name="twitter:description" content="···">
+```
+---
+
+```html
+<!-- image -->
+<meta property="og:image"  content="https://···">
+<meta name="twitter:image" content="https://···">
+```
+---
+
+```html
+<!-- ua -->
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+```
+---
+
+```html
+<!-- viewport -->
+<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=1024">
+```
+
+### Open Graph
+
+```html
+<meta property="og:type" content="website">
+<meta property="og:locale" content="en_CA">
+<meta property="og:title" content="HTML cheatsheet">
+<meta property="og:url" content="https://quickref.me/html">
+<meta property="og:image" content="https://xxx.com/image.jpg">
+<meta property="og:site_name" content="Name of your website">
+<meta property="og:description" content="Description of this page">
+```
+
+Facebook、Instagram、Pinterest、LinkedIn 等使用。
+
+### Twitter 卡片
+
+```html
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@QuickRef_ME">
+<meta name="twitter:title" content="HTML cheatsheet">
+<meta name="twitter:url" content="https://quickref.me/html">
+<meta name="twitter:description" content="Description of this page">
+<meta name="twitter:image" content="https://xxx.com/image.jpg">
+```
+
+请参阅：[Twitter 卡片文档](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary)
+
+### Geotagging
+
+```html
+<meta name="ICBM" content="45.416667,-75.7">
+<meta name="geo.position" content="45.416667;-75.7">
+<meta name="geo.region" content="ca-on">
+<meta name="geo.placename" content="Ottawa">
+```
+
+请参阅：[Geotagging](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)
+
+另见
+--------
+
+- [HTML 4.01 Specification](https://www.w3.org/TR/REC-html40/cover.html#minitoc) _(w3.org)_
+- [HTML Tutorial](https://wangchujiang.com/html-tutorial/) _(jaywcjlove.github.io)_
+- [Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包](./emmet.md) _(jaywcjlove.github.io)_

docs/htop.md

@@ -0,0 +1,111 @@
+htop 备忘清单
+===
+
+htop 是一个交互式流程查看器，此 htop 备忘清单包含 htop 命令
+
+入门
+----
+
+### htop 用法
+
+htop 是一个互动的进程查看器，动态观察系统进程状况
+
+- [命令 htop 的官网](https://htop.sourceforge.net/)
+
+```bash
+$ htop [-dChustv]
+```
+
+#### 安装
+
+```bash
+$ apt install htop        # Debian
+$ dnf install htop        # Fedora
+$ emerge sys-process/htop # Gentoo
+$ pacman -S htop          # Arch Linux
+$ Compile htop            # GoboLinux
+```
+
+htop 的软件包在大多数发行版中都[可用下载](https://htop.dev/downloads.html)
+
+### 选项示例
+<!--rehype:wrap-class=col-span-2-->
+
+长选项的强制参数对于短选项也是强制的
+
+:- | :-
+:- | :-
+`-d --delay=DELAY` | 更新之间的延迟，以十分之一秒为单位
+`-C --no-color --no-colour` | 以单色模式启动 `htop`
+`-h --help` | 显示帮助消息并退出
+`-p --pid=PID,PID...` | 仅显示给定的PID
+`-s --sort-key COLUMN` | 按此列排序(对列列表使用`--sort-key`帮助)
+`-u --user=USERNAME` | 仅显示给定用户的进程
+`-v --version` | 输出版本信息并退出
+`-t --tree` | 在树状视图中显示流程
+
+### 状态
+
+:- | :-
+:- | :-
+`R`  | 运行中
+`S`  | 休眠
+`T`  | 追踪/停止
+`Z`  | 僵尸
+`D`  | 磁盘睡眠
+<!--rehype:className=shortcuts--> 
+
+### 交互式命令
+<!--rehype:wrap-class=col-span-2 row-span-3-->
+
+:- | :-
+:- | :-
+`F1`, `h`, `?` | 转到帮助屏幕
+`F10`, `q` | 退出
+`Space` | 标记或取消标记进程
+`U` | 取消标记所有进程(删除所有使用 Space 键添加的标记)
+`s` | 跟踪进程系统调用：如果安装了 `strace(1)`，按下此键会将其附加到当前选定的进程，呈现进程发出的系统调用的实时更新
+`l` | 显示进程打开的文件：如果安装了 `lsof(1)`，按下该键将显示进程打开的文件描述符列表
+`F2`, `S` | 转到设置屏幕，您可以在其中配置屏幕顶部显示的仪表，设置各种显示选项，在配色方案中进行选择，并选择显示的列，以何种顺序显示
+`F3`, `/` | 逐步搜索所有显示进程的命令行。当前选定(突出显示)的命令将在您键入时更新。在搜索模式下，按 `F3` 将循环匹配出现的事件
+`F4`, `\` | 增量进程过滤：输入部分进程命令行，仅显示名称匹配的进程。要取消过滤，请再次输入过滤选项并按 `Esc`
+`F5`, `t` | 树视图：按父级组织进程，并将它们之间的关系布局为树。切换键将在树和您之前选择的排序视图之间切换。选择排序视图将退出树视图
+`F6` | 在排序视图上，选择一个字段进行排序，也可以通过 < 和 > 访问。当前排序字段由标题中的突出显示。在树视图中，展开或折叠当前子树。树节点中的“+”指示符表示它已折叠
+`F7`, `]` | 增加所选进程的优先级(从“nice”值中减去)。这只能由超级用户完成
+`F8`, `[` | 降低选定进程的优先级(添加到“nice”值)
+`F9`, `k` | “杀死”进程：向一个或一组进程发送一个在菜单中选择的信号。如果进程被标记，则将信号发送到所有标记的进程。如果没有标记，则发送到当前选定的进程
+`+`, `-` | 在树视图模式下，展开或折叠子树。
+`a` | (在多 CPU 机器上)设置 CPU 亲和性：标记允许进程使用的 CPU
+`u` | 仅显示指定用户拥有的进程
+`F` | “跟随”进程：如果排序顺序导致当前选定的进程在列表中移动，则使选择栏跟随它。这对于监控进程很有用：这样，您可以使进程始终在屏幕上可见。使用移动键时，“跟随”失效。
+`p` | 在适用的情况下显示运行程序的完整路径(这是一个切换键)
+`Ctrl-L` | 刷新：重绘屏幕并重新计算数值
+`Numbers` | PID搜索：输入进程ID，选择突出显示将移至它
+<!--rehype:className=shortcuts--> 
+
+### 排序/线程
+
+:- | :-
+:- | :-
+`M` | 按`内存`使用情况排序 _(最高兼容性键)_
+`P` | 按`CPU`使用情况排序 _(最高兼容性键)_
+`T` | 按`时间`排序 _(最高兼容性键)_
+`I` | `反转`排序顺序
+`K` | 隐藏`内核`线程
+`H` | 隐藏`用户`线程
+<!--rehype:className=shortcuts--> 
+
+### 滚动
+
+:- | :-
+:- | :-
+`Up`, `Alt-k` | 在流程列表中选择(突出)`上`一个流程
+`Down`, `Alt-j` | 在流程列表中选择(突出)`下`一个流程
+`Left`, `Alt-h` | 向`左`滚动流程列表
+`Right`, `Alt-l` | 向`右`滚动进程列表
+`PgUp`, `PgDn` | 将流程列表`向上`或`向下`滚动一个窗口
+`Home` | 滚动到流程列表的`顶部` <br /> _选择第一个流程_
+`End` | 滚动到流程列表的`底部` <br /> _选择最后一个流程_
+`Ctrl-A`, `^` | 向`左`滚动到流程条目`开头` _(即行开头)_
+`Ctrl-E`, `$` | 向`右`滚动到流程条目`末尾` _(即行尾)_
+<!--rehype:className=shortcuts--> 

docs/http-status-code.md

@@ -8,70 +8,70 @@ HTTP 状态码
 
 ### Means 
 
-- [1xx: Informational](#1xx-information) _这意味着已收到请求并且该过程正在继续。_<!--rehype:tooltips-->
-- [2xx: Success](#2xx-successful) _这意味着该操作已成功接收、理解和接受。_<!--rehype:tooltips-->
-- [3xx: Redirection](#3xx-redirection) _这意味着必须采取进一步行动才能完成请求。_<!--rehype:tooltips-->
-- [4xx: Client Error](#4xx-client-error) _这意味着请求包含不正确的语法或无法完成。_<!--rehype:tooltips-->
-- [5xx: Server Error](#5xx-server-error) _这意味着服务器未能满足明显有效的请求。_<!--rehype:tooltips-->
+- [1xx: Informational](#1xx-信息) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
+- [2xx: Success](#2xx-成功的) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
+- [3xx: Redirection](#3xx-重定向) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
+- [4xx: Client Error](#4xx-客户端错误) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
+- [5xx: Server Error](#5xx-服务器错误) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->
 
 ### 2xx. 成功的
 <!--rehype:wrap-class=row-span-2-->
 
-* [200: OK](https://tools.ietf.org/html/rfc7231#section-6.3.1) _请求没问题。_<!--rehype:tooltips-->
-* [201: Created](https://tools.ietf.org/html/rfc7231#section-6.3.2) _请求完成，并创建了一个新资源。_<!--rehype:tooltips-->
-* [202: Accepted](https://tools.ietf.org/html/rfc7231#section-6.3.3) _接受请求进行处理，但处理未完成。_<!--rehype:tooltips-->
-* [203: Non-Authoritative Information](https://tools.ietf.org/html/rfc7231#section-6.3.4) _实体标头中的信息来自本地或第三方副本，而不是来自原始服务器。_<!--rehype:tooltips-->
-* [204: No Content](https://tools.ietf.org/html/rfc7231#section-6.3.5) _响应中给出了状态码和标头，但响应中没有实体主体。_<!--rehype:tooltips-->
-* [205: Reset Content](https://tools.ietf.org/html/rfc7231#section-6.3.6) _浏览器应清除用于此事务的表单以获取其他输入。_<!--rehype:tooltips-->
-* [206: Partial Content](https://tools.ietf.org/html/rfc7233#section-4.1) _服务器正在返回请求大小的部分数据。 用于响应指定 Range 标头的请求。 服务器必须使用 Content-Range 标头指定响应中包含的范围。_<!--rehype:tooltips-->
+* [200: OK](https://tools.ietf.org/html/rfc7231#section-6.3.1) _请求没问题_<!--rehype:tooltips-->
+* [201: Created](https://tools.ietf.org/html/rfc7231#section-6.3.2) _请求完成，并创建了一个新资源_<!--rehype:tooltips-->
+* [202: Accepted](https://tools.ietf.org/html/rfc7231#section-6.3.3) _接受请求进行处理，但处理未完成_<!--rehype:tooltips-->
+* [203: Non-Authoritative Information](https://tools.ietf.org/html/rfc7231#section-6.3.4) _实体标头中的信息来自本地或第三方副本，而不是来自原始服务器_<!--rehype:tooltips-->
+* [204: No Content](https://tools.ietf.org/html/rfc7231#section-6.3.5) _响应中给出了状态码和标头，但响应中没有实体主体_<!--rehype:tooltips-->
+* [205: Reset Content](https://tools.ietf.org/html/rfc7231#section-6.3.6) _浏览器应清除用于此事务的表单以获取其他输入_<!--rehype:tooltips-->
+* [206: Partial Content](https://tools.ietf.org/html/rfc7233#section-4.1) _服务器正在返回请求大小的部分数据。 用于响应指定 Range 标头的请求。 服务器必须使用 Content-Range 标头指定响应中包含的范围_<!--rehype:tooltips-->
 
 ### 4xx. 客户端错误
 <!--rehype:wrap-class=row-span-3-->
 
-* [400: Bad Request](https://tools.ietf.org/html/rfc7231#section-6.5.1) _服务器不理解该请求。_<!--rehype:tooltips-->
-* [401: Unauthorized](https://tools.ietf.org/html/rfc7235#section-3.1) _请求的页面需要用户名和密码。_<!--rehype:tooltips-->
-* [402: Payment Required](https://tools.ietf.org/html/rfc7231#section-6.5.2) _您还不能使用此代码。_<!--rehype:tooltips-->
-* [403: Forbidden](https://tools.ietf.org/html/rfc7231#section-6.5.3) _禁止访问请求的页面。_<!--rehype:tooltips-->
-* [404: Not Found](https://tools.ietf.org/html/rfc7231#section-6.5.4) _服务器找不到请求的页面。_<!--rehype:tooltips-->
-* [405: Method Not Allowed](https://tools.ietf.org/html/rfc7231#section-6.5.5) _请求中指定的方法是不允许的。_<!--rehype:tooltips-->
-* [406: Not Acceptable](https://tools.ietf.org/html/rfc7231#section-6.5.6) _服务器只能生成客户端不接受的响应。_<!--rehype:tooltips-->
-* [407: Proxy Authentication Required](https://tools.ietf.org/html/rfc7235#section-3.2) _您必须先通过代理服务器进行身份验证，然后才能提供此请求。_<!--rehype:tooltips-->
-* [408: Request Timeout](https://tools.ietf.org/html/rfc7231#section-6.5.7) _请求花费的时间比服务器准备等待的时间长。_<!--rehype:tooltips-->
-* [409: Conflict](https://tools.ietf.org/html/rfc7231#section-6.5.8) _由于冲突，请求无法完成。_<!--rehype:tooltips-->
-* [410: Gone](https://tools.ietf.org/html/rfc7231#section-6.5.9) _请求的页面不再可用。_<!--rehype:tooltips-->
-* [411: Length Required](https://tools.ietf.org/html/rfc7231#section-6.5.10) _“Content-Length”未定义。 没有它，服务器将不会接受请求。_<!--rehype:tooltips-->
-* [412: Precondition Failed](https://tools.ietf.org/html/rfc7232#section-4.2) _请求中给出的前提条件被服务器评估为 false。_<!--rehype:tooltips-->
-* [413: Payload Too Large](https://tools.ietf.org/html/rfc7231#section-6.5.11) _服务器不会接受请求，因为请求实体太大。_<!--rehype:tooltips-->
-* [414: URI Too Long](https://tools.ietf.org/html/rfc7231#section-6.5.12) _服务器不会接受请求，因为 url 太长。 当您将“发布”请求转换为具有长查询信息的“获取”请求时发生。_<!--rehype:tooltips-->
-* [415: Unsupported Media Type](https://tools.ietf.org/html/rfc7231#section-6.5.13) _服务器不会接受请求，因为不支持媒体类型。_<!--rehype:tooltips-->
-* [416: Range Not Satisfiable](https://tools.ietf.org/html/rfc7233#section-4.4) _请求的字节范围不可用且超出范围。_<!--rehype:tooltips-->
-* [417: Expectation Failed](https://tools.ietf.org/html/rfc7231#section-6.5.14) _此服务器无法满足在 Expect 请求标头字段中给出的期望。_<!--rehype:tooltips-->
-* [426: Upgrade Required](https://tools.ietf.org/html/rfc7231#section-6.5.15) _服务器拒绝使用当前协议执行请求，但在客户端升级到不同协议后可能愿意这样做。_<!--rehype:tooltips-->
-* [451: Unavailable For Legal Reasons](https://datatracker.ietf.org/doc/html/rfc7725#section-3) _此状态代码表示服务器拒绝访问资源作为法律要求的结果。_<!--rehype:tooltips-->
+* [400: Bad Request](https://tools.ietf.org/html/rfc7231#section-6.5.1) _服务器不理解该请求_<!--rehype:tooltips-->
+* [401: Unauthorized](https://tools.ietf.org/html/rfc7235#section-3.1) _请求的页面需要用户名和密码_<!--rehype:tooltips-->
+* [402: Payment Required](https://tools.ietf.org/html/rfc7231#section-6.5.2) _您还不能使用此代码_<!--rehype:tooltips-->
+* [403: Forbidden](https://tools.ietf.org/html/rfc7231#section-6.5.3) _禁止访问请求的页面_<!--rehype:tooltips-->
+* [404: Not Found](https://tools.ietf.org/html/rfc7231#section-6.5.4) _服务器找不到请求的页面_<!--rehype:tooltips-->
+* [405: Method Not Allowed](https://tools.ietf.org/html/rfc7231#section-6.5.5) _请求中指定的方法是不允许的_<!--rehype:tooltips-->
+* [406: Not Acceptable](https://tools.ietf.org/html/rfc7231#section-6.5.6) _服务器只能生成客户端不接受的响应_<!--rehype:tooltips-->
+* [407: Proxy Authentication Required](https://tools.ietf.org/html/rfc7235#section-3.2) _您必须先通过代理服务器进行身份验证，然后才能提供此请求_<!--rehype:tooltips-->
+* [408: Request Timeout](https://tools.ietf.org/html/rfc7231#section-6.5.7) _请求花费的时间比服务器准备等待的时间长_<!--rehype:tooltips-->
+* [409: Conflict](https://tools.ietf.org/html/rfc7231#section-6.5.8) _由于冲突，请求无法完成_<!--rehype:tooltips-->
+* [410: Gone](https://tools.ietf.org/html/rfc7231#section-6.5.9) _请求的页面不再可用_<!--rehype:tooltips-->
+* [411: Length Required](https://tools.ietf.org/html/rfc7231#section-6.5.10) _“Content-Length”未定义。 没有它，服务器将不会接受请求_<!--rehype:tooltips-->
+* [412: Precondition Failed](https://tools.ietf.org/html/rfc7232#section-4.2) _请求中给出的前提条件被服务器评估为 false_<!--rehype:tooltips-->
+* [413: Payload Too Large](https://tools.ietf.org/html/rfc7231#section-6.5.11) _服务器不会接受请求，因为请求实体太大_<!--rehype:tooltips-->
+* [414: URI Too Long](https://tools.ietf.org/html/rfc7231#section-6.5.12) _服务器不会接受请求，因为 url 太长。 当您将“发布”请求转换为具有长查询信息的“获取”请求时发生_<!--rehype:tooltips-->
+* [415: Unsupported Media Type](https://tools.ietf.org/html/rfc7231#section-6.5.13) _服务器不会接受请求，因为不支持媒体类型_<!--rehype:tooltips-->
+* [416: Range Not Satisfiable](https://tools.ietf.org/html/rfc7233#section-4.4) _请求的字节范围不可用且超出范围_<!--rehype:tooltips-->
+* [417: Expectation Failed](https://tools.ietf.org/html/rfc7231#section-6.5.14) _此服务器无法满足在 Expect 请求标头字段中给出的期望_<!--rehype:tooltips-->
+* [426: Upgrade Required](https://tools.ietf.org/html/rfc7231#section-6.5.15) _服务器拒绝使用当前协议执行请求，但在客户端升级到不同协议后可能愿意这样做_<!--rehype:tooltips-->
+* [451: Unavailable For Legal Reasons](https://datatracker.ietf.org/doc/html/rfc7725#section-3) _此状态代码表示服务器拒绝访问资源作为法律要求的结果_<!--rehype:tooltips-->
 
 ### 1xx. 信息
 
-* [100: Continue](https://tools.ietf.org/html/rfc7231#section-6.2.1) _服务器只收到了请求的一部分，但只要没有被拒绝，客户端就应该继续请求。_<!--rehype:tooltips-->
-* [101: Switching Protocols](https://tools.ietf.org/html/rfc7231#section-6.2.2) _服务器切换协议。_<!--rehype:tooltips-->
-* [102: Processing](https://tools.ietf.org/html/rfc2518#section-10.1) _用于通知客户端服务器已接受完整请求但尚未完成的临时响应。_<!--rehype:tooltips-->
+* [100: Continue](https://tools.ietf.org/html/rfc7231#section-6.2.1) _服务器只收到了请求的一部分，但只要没有被拒绝，客户端就应该继续请求_<!--rehype:tooltips-->
+* [101: Switching Protocols](https://tools.ietf.org/html/rfc7231#section-6.2.2) _服务器切换协议_<!--rehype:tooltips-->
+* [102: Processing](https://tools.ietf.org/html/rfc2518#section-10.1) _用于通知客户端服务器已接受完整请求但尚未完成的临时响应_<!--rehype:tooltips-->
 
 ### 3xx. 重定向
 
-* [300: Multiple Choices](https://tools.ietf.org/html/rfc7231#section-6.4.1) _一个链接列表。 用户可以选择一个链接并转到该位置。 最多五个地址。_<!--rehype:tooltips-->
-* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url 。_<!--rehype:tooltips-->
-* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url 。_<!--rehype:tooltips-->
-* [303: See Other](https://tools.ietf.org/html/rfc7231#section-6.4.4) _请求的页面可以在不同的 url 下找到。_<!--rehype:tooltips-->
-* [304: Not Modified](https://tools.ietf.org/html/rfc7232#section-4.1) _这是对 If-Modified-Since 或 If-None-Match 标头的响应代码，其中 URL 自指定日期以来未修改。_<!--rehype:tooltips-->
-* [305: Use Proxy](https://tools.ietf.org/html/rfc7231#section-6.4.5) _请求的 URL 必须通过 Location 标头中提到的代理访问。_<!--rehype:tooltips-->
-* [306: Unused](https://tools.ietf.org/html/rfc7231#section-6.4.6) _此代码在以前的版本中使用过。 它不再使用，但代码被保留。_<!--rehype:tooltips-->
-* [307: Temporary Redirect](https://tools.ietf.org/html/rfc7231#section-6.4.7) _请求的页面已临时移动到新的 url。_<!--rehype:tooltips-->
+* [300: Multiple Choices](https://tools.ietf.org/html/rfc7231#section-6.4.1) _一个链接列表。 用户可以选择一个链接并转到该位置。 最多五个地址_<!--rehype:tooltips-->
+* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url_<!--rehype:tooltips-->
+* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url_<!--rehype:tooltips-->
+* [303: See Other](https://tools.ietf.org/html/rfc7231#section-6.4.4) _请求的页面可以在不同的 url 下找到_<!--rehype:tooltips-->
+* [304: Not Modified](https://tools.ietf.org/html/rfc7232#section-4.1) _这是对 If-Modified-Since 或 If-None-Match 标头的响应代码，其中 URL 自指定日期以来未修改_<!--rehype:tooltips-->
+* [305: Use Proxy](https://tools.ietf.org/html/rfc7231#section-6.4.5) _请求的 URL 必须通过 Location 标头中提到的代理访问_<!--rehype:tooltips-->
+* [306: Unused](https://tools.ietf.org/html/rfc7231#section-6.4.6) _此代码在以前的版本中使用过。 它不再使用，但代码被保留_<!--rehype:tooltips-->
+* [307: Temporary Redirect](https://tools.ietf.org/html/rfc7231#section-6.4.7) _请求的页面已临时移动到新的 url_<!--rehype:tooltips-->
 
 ### 5xx. 服务器错误
 
-* [500: Internal Server Error](https://tools.ietf.org/html/rfc7231#section-6.6.1) _请求未完成。 服务器遇到了意外情况_<!--rehype:tooltips-->
-* [501: Not Implemented](https://tools.ietf.org/html/rfc7231#section-6.6.2) _请求未完成。 服务器不支持所需的功能_<!--rehype:tooltips-->
-* [502: Bad Gateway](https://tools.ietf.org/html/rfc7231#section-6.6.3) _请求未完成。 服务器收到来自上游服务器的无效响应_<!--rehype:tooltips-->
-* [503: Service Unavailable](https://tools.ietf.org/html/rfc7231#section-6.6.4) _请求未完成。 服务器暂时超载或停机_<!--rehype:tooltips-->
+* [500: Internal Server Error](https://tools.ietf.org/html/rfc7231#section-6.6.1) _请求未完成。服务器遇到了意外情况_<!--rehype:tooltips-->
+* [501: Not Implemented](https://tools.ietf.org/html/rfc7231#section-6.6.2) _请求未完成。服务器不支持所需的功能_<!--rehype:tooltips-->
+* [502: Bad Gateway](https://tools.ietf.org/html/rfc7231#section-6.6.3) _请求未完成。服务器收到来自上游服务器的无效响应_<!--rehype:tooltips-->
+* [503: Service Unavailable](https://tools.ietf.org/html/rfc7231#section-6.6.4) _请求未完成。服务器暂时超载或停机_<!--rehype:tooltips-->
 * [504: Gateway Timeout](https://tools.ietf.org/html/rfc7231#section-6.6.5) _网关已超时_<!--rehype:tooltips-->
 * [505: HTTP Version Not Supported](https://tools.ietf.org/html/rfc7231#section-6.6.6) _服务器不支持“http 协议”版本_<!--rehype:tooltips-->
 
@@ -79,41 +79,41 @@ HTTP 状态码
 
  :- | -
 ---- | ----
-`200` | 返回成功，GET，DELETE 请求成功。
-`204` | 无内容，POST 请求成功。
-`301` | 永久重定向。
-`302/307` | 临时重定向。
-`304` | 未修改，自上次请求以来。
-`331` | 用户名正确，需要密码。
-`332` | 需要登录帐户。
-`400` | 错误请求，缺少 API 请求的必需属性。
-`401` | 未授权，无效凭据进行身份验证将。
-`403` | 禁地，该请求不被允许。
-`404` | 未找到，无法访问资源
-`405` | 方法不允许，不支持该请求。
-`409` | 冲突，冲突资源已存在。
-`412` | 该请求被拒绝。
-`422` | 无法处理，无法处理该实体。
-`429` | 请求过多，用户超出了应用速率限制。
-`500` | 服务器错误，在处理请求时，服务器出现问题。
-`530` | 未登录。
+`200` | 返回成功，GET，DELETE 请求成功
+`204` | 无内容，POST 请求成功
+`301` | 永久重定向
+`302/307` | 临时重定向
+`304` | 未修改，自上次请求以来
+`331` | 用户名正确，需要密码
+`332` | 需要登录帐户
+`400` | 错误请求，缺少 API 请求的必需属性
+`401` | 未授权，无效凭据进行身份验证将
+`403` | 禁地，该请求不被允许
+`404` | 未找到，无法访问资
+`405` | 方法不允许，不支持该请求
+`409` | 冲突，冲突资源已存在
+`412` | 该请求被拒绝
+`422` | 无法处理，无法处理该实体
+`429` | 请求过多，用户超出了应用速率限制
+`500` | 服务器错误，在处理请求时，服务器出现问题
+`530` | 未登录
 
 ### 5xx 永久性否定
 <!--rehype:wrap-class=col-span-2-->
 
  :- | -
 ---- | ----
-`500` | 语法错误，命令无法识别。这可能包括诸如命令行太长之类的错误。
-`501` | 在参数中有语法错误。
-`502` | 未执行命令。
-`503` | 错误的命令序列。
-`504` | 未执行该参数的命令。
-`530` | 未登录。
-`532` | 存储文件需要帐户。
-`550` | 未执行请求的操作。文件不可用（例如，未找到文件，没有访问权限）。
-`551` | 请求的操作异常终止：未知的页面类型。
-`552` | 请求的文件操作异常终止：超出存储分配（对于当前目录或数据集）。
-`553` | 未执行请求的操作。不允许的文件名。
+`500` | 语法错误，命令无法识别。这可能包括诸如命令行太长之类的错误
+`501` | 在参数中有语法错误
+`502` | 未执行命令
+`503` | 错误的命令序列
+`504` | 未执行该参数的命令
+`530` | 未登录
+`532` | 存储文件需要帐户
+`550` | 未执行请求的操作。文件不可用（例如，未找到文件，没有访问权限）
+`551` | 请求的操作异常终止：未知的页面类型
+`552` | 请求的文件操作异常终止：超出存储分配（对于当前目录或数据集）
+`553` | 未执行请求的操作。不允许的文件名
 
 永久性否定的完成答复，该命令不成功，错误是永久性的。如果客户端重试命令，将再次出现同样的错误。
 
@@ -128,4 +128,4 @@ HTTP 状态码
 - [List of FTP server return codes](https://en.wikipedia.org/wiki/List_of_FTP_server_return_codes) _(wikipedia.org)_
 - [HTTP概述](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview) _(mozilla.org)_
 - [Help for HTTP error 403: “Forbidden”](http://www.getnetgoing.com/HTTP-403.html) _(getnetgoing.com)_
-- [实用的 RESTful API 最佳实践](https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api) _(vinaysahni.com)_
+- [实用的 RESTful API 最佳实践](https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api) _(vinaysahni.com)_

docs/ini.md

@@ -0,0 +1,185 @@
+INI 备忘清单
+====
+
+这是理解和编写 INI 格式配置文件的快速参考备忘单，此清单包含配置的内容，结构和语法等内容。
+
+入门
+------
+
+### 介绍
+
+INI 是一种固定标准格式的配置文件，INI配置方法来自 MS-DOS 操作系统
+
+```ini
+; 这里是注释
+[owner]
+name=John Doe
+organization=Acme Products
+
+[database]
+; 这里是注释
+server=192.0.2.42
+port=143
+file="acme payroll.dat"
+```
+
+现在已成为许多配置的非正式标准，其它操作系统可能使用 `.conf` 或 `.cfg` 作为后缀
+
+### 稳定的特性
+
+- 基本元素是键或属性
+- 每个键由`名称`和`值`构成，等号 (=) 分隔
+- `键名称`显示在等号的`左侧`
+- `等号`和`分号`是`保留`字符
+<!--rehype:className=style-round-->
+
+```ini
+name = value
+```
+
+与下面👇 JSON 大致相同
+
+```js
+{
+  "name": "value"
+}
+```
+
+### 注释
+
+注释 (`;`)
+
+```ini
+; 这里是注释文本，将被忽略
+```
+
+注释 (`#`)
+
+```ini
+# 这里是注释文本，⚠️ 部分编译器支持
+```
+
+一行之后的注释 (`;`,`#`) _(不标准)_
+
+```ini
+var = a       ; 这是一个内联注释
+foo = bar     # 这是另一个内联注释
+```
+
+在某些情况下注释必须单独出现在行上
+
+### 部分(Sections)
+
+- 名称单独出现在一行中
+- 名称在方括号 `[` 和 `]` 中
+- 没有明确的 `section 结束` 分隔符
+- 在下一个 `section` 声明处或文件末尾处结束
+- 部分和属性名称不区分大小写
+<!--rehype:className=style-round-->
+
+```ini
+[section]
+key1 = a
+key2 = b
+```
+
+与下面👇 `JSON` 大致相同
+
+```json
+{
+  "section": {
+    "key1": "a",
+    "key2": "b"
+  }
+}
+```
+
+### 嵌套(部分解析器支持)
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+
+[section.subsection]
+foo = bar
+```
+
+与下面👇 `JSON` 大致相同
+
+```js
+{
+  "section": {
+    "domain": "jaywcjlove.github.io"
+    "subsection": {
+      "foo": "bar"
+    }
+  }
+}
+```
+
+嵌套到上一节(简写)
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+[.subsection]
+foo = bar
+```
+
+### 转义字符
+
+序列 | 意思
+:- | :-
+`\\` | \ (单个反斜杠，转义转义字符)
+`\'` | 撇号
+`\"` | 双引号
+`\0` | 空字符
+`\a` | 铃声/警报/声音
+`\b` | 退格键，某些应用程序的[贝尔字符](https://en.wikipedia.org/wiki/Bell_character)
+`\t` | 制表符
+`\r` | 回车
+`\n` | 换行
+`\;` | 分号
+`\#` | 数字符号
+`\=` | 等号
+`\:` | 冒号
+`\x????` | 十六进制代码点的 Unicode 字符对应于 ????
+
+### 数组
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+array[]=first value
+array[]=second value
+```
+
+与下面👇 `JSON` 大致相同
+
+```js
+{
+  "section": {
+    "domain": "jaywcjlove.github.io",
+    "array": [
+      "first value", "second value"
+    ]
+  }
+}
+```
+
+### 解释器
+
+- [@go-ini/ini](https://github.com/go-ini/ini) _(golang)_
+- [@npm/ini](https://www.npmjs.com/package/ini) _(nodejs)_
+- [@zonyitoo/rust-ini](https://github.com/zonyitoo/rust-inii) _(rust)_
+- [@rxi/ini](https://www.npmjs.com/package/ini) _(c)_
+- [@pulzed/mINI](https://github.com/pulzed/mINI) _(c++)_
+- [@rickyah/ini-parser](https://github.com/rickyah/ini-parser) _(c#)_
+- [@Enichan/Ini](https://github.com/Enichan/Ini) _(c#)_
+
+另见
+---
+
+- [INI 文件配置](https://en.wikipedia.org/wiki/INI_file) _(wikipedia.org)_
+- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_
+- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_

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/javascript.md

@@ -386,18 +386,18 @@ sum(3, 6); // 9
 ### 匿名函数
 
 ```javascript
-// Named function
+// 命名函数
 function rocketToMars() {
   return 'BOOM!';
 }
-// Anonymous function
+// 匿名函数
 const rocketToMars = function() {
   return 'BOOM!';
 }
 ```
 
 ### 箭头函数 (ES6)
-<!--rehype:wrap-class=row-span-2-->
+<!--rehype:wrap-class=row-span-3-->
 
 #### 有两个参数
 
@@ -590,6 +590,48 @@ for (let j = 0; j < 3; j++) {
 JavaScript Arrays
 ----
 
+### 方法
+<!--rehype:wrap-class=row-span-6-->
+
+:- | :-
+:- | :-
+`Array.from()` | 类似数组对象创建一个新的 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+`Array.isArray()` | 值是否是一个 Array [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)
+`Array.of()` | 创建一个新数组示例 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of)
+`.at()` | 返回值索引对应的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/at)
+`.concat()` | 合并两个或多个数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
+`.copyWithin()` | 浅复制替换某个位置 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin)
+`.entries()` | 新的 Array Iterator 对象 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries)
+`.every()` | 是否能通过回调函数的测试 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
+`.fill()` | 固定值填充一个数组中 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)
+`.filter()` | 返回过滤后的数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
+`.find()` | 第一个元素的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
+`.findIndex()` | 第一个元素的索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
+`.findLast()` | 最后一个元素的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast)
+`.findLastIndex()` | 最后一个元素的索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex)
+`.flat()` | 扁平化嵌套数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
+`.flatMap()` | 与 flat 相同 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)
+`.forEach()` | 升序循环执行 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+`.includes()` | 是否包含一个指定的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
+`.indexOf()` | 找到给定元素的第一个索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
+`.join()` | 数组链接成一个字符串 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
+`.keys()` | 每个索引键 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys)
+`.lastIndexOf()` | 给定元素的最后一个索引 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)
+`.map()` | 循环返回一个新数组 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+`.pop()` | `删除`最后一个元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)
+`.push()` | 元素`添加`到数组的末尾 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
+`.reduce()` | 循环函数传递当前和上一个值 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
+`.reduceRight()` | 类似 `reduce` 从右往左循环 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight)
+`.reverse()` | 数组元素的位置颠倒 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
+`.shift()` | `删除`第一个元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)
+`.slice()` | `提取`元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
+`.some()` | 至少有一个通过测试函数 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
+`.sort()` | 元素进行排序 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
+`.splice()` | `删除`或`替换`或`添加`元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
+`.toLocaleString()` | 字符串表示数组中的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString)
+`.toString()` | 返回字符串 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString)
+`.unshift()` | 元素`添加`到数组的`开头` [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)
+`.values()` | 返回新的 ArrayIterator 对象 [#](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values)
 
 ### 数组
 
@@ -652,24 +694,24 @@ console.log(fruits); // ["apple", "dew"]
 ### 方法 .shift()
 
 ```javascript
-let cats = ['Bob', 'Willy', 'Mini'];
-cats.shift(); // ['Willy', 'Mini']
+const array1 = [1, 2, 3];
+const firstElement = array1.shift();
+console.log(array1); // 输出: Array [2, 3]
+console.log(firstElement); // 输出: 1
 ```
 
 **从头删除**一个项目并返回已删除的项目。
 
-### 方法 .unshift()
+### 方法 .some()
 
-```javascript
-let cats = ['Bob'];
-// => ['Willy', 'Bob']
-cats.unshift('Willy');
-// => ['Puff', 'George', 'Willy', 'Bob']
-cats.unshift('Puff', 'George');
+```js
+const array = [1, 2, 3, 4, 5];
+// 检查元素是否为偶数
+const even = (element) => element % 2 === 0;
+console.log(array.some(even));
+// 预期输出: true
 ```
 
-将项目**添加到开头**并返回新的数组长度。
-
 ### 方法 .concat()
 
 ```javascript
@@ -685,6 +727,45 @@ numbers.concat(newFirstNumber)
 
 如果你想避免改变你的原始数组，你可以使用 concat。
 
+
+### 方法 .splice()
+
+```javascript
+const months = ['Jan', 'March'];
+months.splice(1, 0, 'Feb');
+// 在索引 1 处插入
+console.log(months);
+// 预期输出: Array ["Jan", "Feb", "March"]
+
+months.splice(2, 1, 'May');
+// 替换索引 2 处的 1 个元素
+console.log(months);
+// 预期输出: Array ["Jan", "Feb", "May"]
+```
+
+### 方法 .unshift()
+
+```javascript
+let cats = ['Bob'];
+// => ['Willy', 'Bob']
+cats.unshift('Willy');
+// => ['Puff', 'George', 'Willy', 'Bob']
+cats.unshift('Puff', 'George');
+```
+
+将项目**添加到开头**并返回新的数组长度。
+
+### 方法 .filter()
+
+```javascript
+const words = ['js', 'java', 'golang'];
+const result = words.filter(word => {
+  return  word.length > 3
+});
+console.log(result);
+// 预期输出: Array ["java", "golang"]
+```
+
 JavaScript 循环
 ----
 
@@ -998,19 +1079,16 @@ console.log(age);  // '22'
 ```javascript
 const person = {
   firstName: "Matilda",
-  age: 27,
   hobby: "knitting",
   goal: "learning JavaScript"
 };
-delete person.hobby; // or delete person[hobby];
+delete person.hobby; // 或 delete person['hobby'];
 console.log(person);
 /*
 {
   firstName: "Matilda"
-  age: 27
   goal: "learning JavaScript"
-}
-*/
+} */
 ```
 
 ### 对象作为参数

docs/jest.md

@@ -1,14 +1,16 @@
 Jest 备忘清单
 ===
 
-Jest 是一款优雅、简洁的 JavaScript 测试框架。
+Jest 是一款优雅、简洁的 JavaScript 测试框架，这里介绍了它的入门和 一些 API 的索引。
 
 入门
 ----
+<!--rehype:body-class=cols-6-->
 
 ### 介绍
+<!--rehype:wrap-class=col-span-2 row-span-2-->
 
-[Jest](https://jestjs.io/) 是一款优雅、简洁的 JavaScript 测试框架。
+[Jest v29](https://jestjs.io/) 是一款优雅、简洁的 JavaScript 测试框架。
 
 - `无需配置` 大多数 JS 项目中即装即用，无需配置
 - `优秀接口` 从 `it` 到 `expect` - Jest 将工具包整合在一处。文档齐全、不断维护，非常不错。
@@ -16,9 +18,54 @@ Jest 是一款优雅、简洁的 JavaScript 测试框架。
 - `快照` 轻松编写持续追踪大型对象的测试，并在测试旁或代码内显示实时快照。
 - `代码覆盖` 无需其他操作，您仅需添加 `--coverage` 参数来生成代码覆盖率报告。
 
-### 测试结构
+### 快速开始
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```bash
+npm install --save-dev jest
+```
+
+Add to `package.json`
+
+```js
+"scripts": {
+  "test": "jest"
+}
+```
+
+运行你的测试
+
+```bash
+npm test -- --watch
+```
+
+查看: [Getting started](https://jestjs.io/docs/getting-started)
+
+### 编写测试
 <!--rehype:wrap-class=col-span-2-->
 
+```js
+describe('My work', () => {
+  test('works', () => {
+    expect(2).toEqual(2)
+  })
+})
+```
+
+### BDD 语法
+<!--rehype:wrap-class=col-span-2-->
+
+```js {2}
+describe('My work', () => {
+  it('works', () => { // `it`是`test`的别名
+    ···
+  })
+})
+```
+
+### 测试结构
+<!--rehype:wrap-class=col-span-3 row-span-2-->
+
 ```js
 describe('makePoniesPink', () => {
   beforeAll(() => {
@@ -40,6 +87,143 @@ describe('makePoniesPink', () => {
 })
 ```
 
+### 聚焦测试
+
+```js
+describe.only(···)
+
+it.only(···)
+// 别名: fit()
+```
+
+查看: [test.only](https://jestjs.io/docs/api#testonlyname-fn-timeout)
+
+### 可选参数
+<!--rehype:wrap-class=col-span-2-->
+
+| Flag                  | Description                              |
+| --------------------- | ---------------------------------------- |
+| `--coverage`          | 查看测试覆盖率摘要 |
+| `--detectOpenHandles` | 查看未关闭端口的摘要 |
+| `--runInBand`         | 一个接一个地运行所有测试 |
+| `--bail,-b`         | 失败跳出测试 |
+
+更多参数查看 [Jest CLI Options](https://jestjs.io/docs/next/cli#--bailn)
+
+### 跳过测试
+
+```js
+describe.skip(···)
+
+it.skip(···)
+// 别名: xit()
+```
+
+查看: [test.skip](https://jestjs.io/docs/next/api#testskipname-fn)
+
+### 基本测试用例
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value).not.toBe(value)
+  .toEqual(value)
+  .toBeTruthy()
+// Errors 测试
+expect(value).toThrow(error)
+  .toThrowErrorMatchingSnapshot()
+```
+
+### 快照
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toMatchSnapshot()
+  .toMatchInlineSnapshot()
+```
+
+### Errors
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toThrow(error)
+  .toThrowErrorMatchingSnapshot()
+```
+
+### Objects
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeInstanceOf(Class)
+  .toMatchObject(object)
+  .toHaveProperty(keyPath, value)
+```
+
+### Objects
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toContain(item)
+  .toContainEqual(item)
+  .toHaveLength(number)
+```
+
+### Numbers
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeCloseTo(number, numDigits)
+  .toBeGreaterThan(number)
+  .toBeGreaterThanOrEqual(number)
+  .toBeLessThan(number)
+  .toBeLessThanOrEqual(number)
+```
+
+### Booleans
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toBeFalsy()
+  .toBeNull()
+  .toBeTruthy()
+  .toBeUndefined()
+  .toBeDefined()
+```
+
+### Strings
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect(value)
+  .toMatch(regexpOrString)
+```
+
+### NaN
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+test('当值为 NaN 时通过', () => {
+  expect(NaN).toBeNaN();
+  expect(1).not.toBeNaN();
+});
+```
+
+### Others
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+expect.extend(matchers)
+expect.any(constructor)
+expect.addSnapshotSerializer(serializer)
+
+expect.assertions(1)
+```
+
 匹配器
 ----
 
@@ -293,8 +477,6 @@ expect(fn).toThrowErrorMatchingSnapshot()
 ### 实例
 <!--rehype:wrap-class=row-span-2-->
 
-请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。
-
 在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。
 
 ```js
@@ -314,6 +496,7 @@ beforeEach(expect.hasAssertions)
 ```
 
 这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 `expect.assertions(3)` 声明配合使用。
+请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)
 
 ### async/await
 
@@ -337,8 +520,8 @@ test('async test', (done) => {
   
   setTimeout(() => {
     try {
-      const result = getAsyncOperationResult()
-      expect(result).toBe(true)
+      const res = getAsyncOperatResult()
+      expect(res).toBe(true)
       done()
     } catch (err) {
       done.fail(err)
@@ -374,18 +557,28 @@ test('call the callback', () => {
   const callback = jest.fn()
   fn(callback)
   expect(callback).toBeCalled()
-  expect(callback.mock.calls[0][1].baz).toBe('pizza') // 第一次调用的第二个参数
+  expect(callback.mock.calls[0][1].baz)
+    .toBe('pizza') // 第一次调用的第二个参数
+  
   // 匹配第一个和最后一个参数，但忽略第二个参数
-  expect(callback).toHaveBeenLastCalledWith('meal', expect.anything(), 'margarita')
+  expect(callback)
+    .toHaveBeenLastCalledWith(
+      'meal',
+      expect.anything(),
+      'margarita'
+    )
 })
 ```
+<!--rehype:className=wrap-text -->
 
 您还可以使用快照：
 
 ```js
 test('call the callback', () => {
   // mockName 在 Jest 22+ 中可用
-  const callback = jest.fn().mockName('Unicorn') 
+  const callback = jest.fn()
+    .mockName('Unicorn')
+
   fn(callback)
   expect(callback).toMatchSnapshot()
   // ->
@@ -411,6 +604,7 @@ const callback = jest.fn(() => true)
 ```js
 const callback
     = jest.fn().mockReturnValue(true)
+
 const callbackOnce
     = jest.fn().mockReturnValueOnce(true)
 ```
@@ -418,26 +612,29 @@ const callbackOnce
 或解析值：
 
 ```js
-const promise 
+const promise
     = jest.fn().mockResolvedValue(true)
-const promiseOnce 
+
+const promiseOnce
     = jest.fn().mockResolvedValueOnce(true)
 ```
 
 他们甚至可以拒绝值：
 
 ```js
-const failedPromise
-    = jest.fn().mockRejectedValue('Error')
-const failedPromiseOnce
-    = jest.fn().mockRejectedValueOnce('Error')
+const failedPromise =
+  jest.fn().mockRejectedValue('Error')
+
+const failedPromiseOnce =
+  jest.fn().mockRejectedValueOnce('Error')
 ```
 
 你甚至可以结合这些：
 
 ```js
-const callback
-    = jest.fn().mockReturnValueOnce(false).mockReturnValue(true)
+const callback = jest.fn()
+        .mockReturnValueOnce(false)
+        .mockReturnValue(true)
 // ->
 //  call 1: false
 //  call 2+: true
@@ -446,13 +643,20 @@ const callback
 ### 使用 `jest.mock` 方法模拟模块
 
 ```js
-jest.mock('lodash/memoize', () => (a) => a) // The original lodash/memoize should exist
-jest.mock('lodash/memoize', () => (a) => a, { virtual: true }) // The original lodash/memoize isn’t required
+// 原来的 lodash/memoize 应该存在
+jest.mock(
+  'lodash/memoize',
+  () => (a) => a
+)
+// 不需要原始的 lodash/memoize
+jest.mock(
+  'lodash/memoize',
+  () => (a) => a,
+  { virtual: true }
+)
 ```
 
-[jest.mock docs](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options)
-
-> 注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
+注意：当使用 `babel-jest` 时，对 [`jest.mock`](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options) 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
 
 ### 使用模拟文件模拟模块
 
@@ -468,22 +672,18 @@ module.exports = (a) => a
 jest.mock('lodash/memoize')
 ```
 
-注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。
+注意：当使用 `babel-jest` 时，对 `jest.mock` 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 `jest.doMock`。[手动模拟文档](https://jestjs.io/docs/en/manual-mocks)
 
-[手动模拟文档](https://jestjs.io/docs/en/manual-mocks)
-
-### 模拟对象方法
+### 模拟 getters 和 setters
 
 ```js
-const spy = jest.spyOn(console, 'log').mockImplementation(() => {})
-expect(console.log.mock.calls).toEqual([['dope'], ['nope']])
-spy.mockRestore()
-```
-
-```js
-const spy = jest.spyOn(ajax, 'request').mockImplementation(() => Promise.resolve({ success: true }))
-expect(spy).toHaveBeenCalled()
-spy.mockRestore()
+const getTitle = jest.fn(() => 'pizza')
+const setTitle = jest.fn()
+const location = {}
+Object.defineProperty(location, 'title', {
+  get: getTitle,
+  set: setTitle,
+})
 ```
 
 ### 模拟 getter 和 setter (Jest 22.1.0+)
@@ -508,8 +708,9 @@ const setTitle = jest
 jest.useFakeTimers()
 test('kill the time', () => {
   const callback = jest.fn()
-  // 运行一些使用 setTimeout 或 setInterval 的代码
-  const actual = someFunctionThatUseTimers(callback)
+  // 运行使用 setTimeout或setInterval 的代码
+  const actual 
+    = someFunctionThatUseTimers(callback)
   // 快进直到所有定时器都执行完毕
   jest.runAllTimers()
   // 同步检查结果
@@ -524,8 +725,9 @@ test('kill the time', () => {
 jest.useFakeTimers()
 test('kill the time', () => {
   const callback = jest.fn()
-  // 运行一些使用 setTimeout 或 setInterval 的代码
-  const actual = someFunctionThatUseTimers(callback)
+  // 运行使用 setTimeout或setInterval 的代码
+  const actual 
+    = someFunctionThatUseTimers(callback)
   // 快进 250 毫秒
   jest.advanceTimersByTime(250)
   // 同步检查结果
@@ -533,20 +735,29 @@ test('kill the time', () => {
 })
 ```
 
-对于特殊情况，请使用 [jest.runOnlyPendingTimers()](https://jestjs.io/docs/en/timer-mocks#run-pending-timers)。
+> 对于特殊情况，请使用 [jest.runOnlyPendingTimers()](https://jestjs.io/docs/en/timer-mocks#run-pending-timers)。
 
 **注意：** 您应该在测试用例中调用 `jest.useFakeTimers()` 以使用其他假计时器方法。
 
-### 模拟 getters 和 setters
+### 模拟对象方法
 
 ```js
-const getTitle = jest.fn(() => 'pizza')
-const setTitle = jest.fn()
-const location = {}
-Object.defineProperty(location, 'title', {
-  get: getTitle,
-  set: setTitle,
-})
+const spy = jest.spyOn(console, 'log')
+  .mockImplementation(() => {})
+
+expect(console.log.mock.calls)
+  .toEqual([['dope'], ['nope']])
+spy.mockRestore()
+```
+
+```js
+const spy = jest.spyOn(ajax, 'request')
+  .mockImplementation(
+    () => Promise.resolve({success: true})
+  )
+
+expect(spy).toHaveBeenCalled()
+spy.mockRestore()
 ```
 
 ### 清除和恢复模拟
@@ -558,8 +769,10 @@ Object.defineProperty(location, 'title', {
 // 清除模拟使用日期
 // （fn.mock.calls、fn.mock.instances）
 fn.mockClear()
+
 // 清除并删除任何模拟的返回值或实现
 fn.mockReset()
+
 // 重置并恢复初始实现
 fn.mockRestore()
 ```

docs/koajs.md

@@ -0,0 +1,424 @@
+Koajs 备忘清单
+===
+
+基于 Node.js 平台的下一代 web 开发框架，包含 [Koa](https://koajs.com/) 的 API 参考列表和一些示例。
+
+
+入门
+---
+
+### Hello World
+<!--rehype:wrap-class=row-span-2-->
+
+[Koa](https://koajs.com/) 需要 [node v7.6.0](https://nodejs.org) 或更高版本来支持ES2015、异步方法，你可以安装自己支持的 `node` 版本
+
+- 安装依赖
+  ```bash
+  $ mkdir myapp # 创建目录
+  $ cd myapp    # 进入目录
+  $ nvm install 7
+  $ npm init -y # 初始化一个配置
+  $ npm install koa # 安装依赖
+  ```
+- 入口文件 `index.js` 添加代码：
+  ```js
+  const Koa = require('koa');
+  const app = new Koa();
+
+  app.use(async ctx => {
+    ctx.body = 'Hello World';
+  });
+
+  app.listen(3000);
+  ```
+- 使用以下命令运行应用程序
+  ```bash
+  $ node index.js
+  ```
+<!--rehype:className=style-timeline-->
+
+### 级联
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+const Koa = require('koa');
+const app = new Koa();
+// X-Response-Time x 响应时间
+app.use(async (ctx, next) => {
+  const start = Date.now();
+  await next();
+  const ms = Date.now() - start;
+  ctx.set('X-Response-Time', `${ms}ms`);
+});
+// 记录器 logger
+app.use(async (ctx, next) => {
+  const start = Date.now();
+  await next();
+  const ms = Date.now() - start;
+  console.log(
+    `${ctx.method} ${ctx.url} - ${ms}`
+  );
+});
+// 响应 response
+app.use(async ctx => {
+  ctx.body = 'Hello World';
+});
+app.listen(3000);
+```
+
+### 配置
+
+:- | :-
+:- | :-
+`app.env` | 默认为 `NODE_ENV` 或 `development`
+`app.keys` | 签名 `cookie` 密钥数组
+`app.proxy` | 何时信任真正的代理头字段
+`app.subdomainOffset` | 要忽略的 `.subdomains` 的偏移量，默认为 `2`
+`app.proxyIpHeader` | 代理 `ip` 头，默认为 `X-Forwarded-For`
+`app.maxIpsCount` | 从代理 `ip` 头读取的最大 `ips` 数，默认为 `0`（表示无穷大）
+<!--rehype:className=style-list style-list-arrow-->
+
+### app.callback()
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`app.listen(...)` [#](https://koajs.com/#app-listen-) | 为一个绑定 `3000` 端口的简单 `Koa` 应用
+`app.callback()` [#](https://koajs.com/#app-callback-) | 返回一个适合 `http.createServer()` 方法的回调函数用来处理请求
+`app.use(function)` [#](https://koajs.com/#app-use-function-) | 添加指定的中间件，详情请看 [Middleware](https://github.com/koajs/koa/wiki#middleware)
+`app.keys` [#](https://koajs.com/#app-keys-) | 设置签名 `cookie` 密钥
+`app.context` [#](https://koajs.com/#app-context) | 从中创建 `ctx` 的原型
+<!--rehype:className=style-list style-list-arrow-->
+
+### 错误处理
+
+```js
+app.on('error', (err, ctx) => {
+  log.error('server error', err, ctx)
+});
+```
+
+默认情况下 `Koa` 会将所有错误信息输出到 `stderr`， 除非 `app.silent` 是 `true`。当 `err.status` 是 `404` 或者 `err.expose` 时，默认错误处理程序也不会输出错误
+
+### Context 示例
+
+```js
+app.use(async ctx => {
+  ctx; // 这是上下文 Context
+  ctx.request;  // 这是 koa Request
+  ctx.response; // 这是 koa Response
+});
+```
+
+### app.listen(...)
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```js
+const Koa = require('koa');
+const app = new Koa();
+app.listen(3000);
+```
+
+`app.listen(...)` 实际上是以下代码的语法糖:
+
+```js
+const http = require('http');
+const Koa = require('koa');
+const app = new Koa();
+http.createServer(app.callback()).listen(3000);
+```
+
+这意味着您可以同时支持 `HTTPS` 和 `HTTPS`，或者在 `多个端口` 监听同一个应用
+
+```js
+const http = require('http');
+const https = require('https');
+const Koa = require('koa');
+const app = new Koa();
+http.createServer(app.callback()).listen(3000);
+https.createServer(app.callback()).listen(3001);
+```
+
+### ctx.throw 示例
+
+```js
+ctx.throw(400);
+ctx.throw(400, 'name required');
+ctx.throw(400, 'name required', { user: user });
+```
+
+`this.throw('name required', 400)` 等价于
+
+```js
+const err = new Error('name required');
+err.status = 400;
+err.expose = true;
+throw err;
+```
+
+### ctx.assert 示例
+
+```js
+ctx.assert(
+  ctx.state.user,
+  401,
+  'User not found. Please login!'
+);
+```
+
+### Context(上下文) API
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`ctx.req` | Node 的 request 对象
+`ctx.res` | Node 的 response 对象
+`ctx.request` | Koa 的 Request 对象
+`ctx.response` | Koa 的 Response 对象
+`ctx.state` | 推荐的命名空间，用于通过中间件传递信息到前端视图
+`ctx.app` | 应用实例引用
+`ctx.app.emit` | 发出由第一个参数定义的类型的事件
+`ctx.cookies.get(name, [options])` | 获得 `cookie` 中名为 `name` 的值
+`ctx.cookies.set(name, value, [options])` | 设置 `cookie` 中名为 `name` 的值
+`ctx.throw([status], [msg], [properties])` | 抛出包含 `.status` 属性的错误，默认为 `500`
+`ctx.assert(value, [status], [msg], [properties])` | 当 `!value` 时， `Helper` 方法抛出一个类似 `.throw()` 的错误
+`ctx.respond` | 避免使用 `Koa` 的内置响应处理功能，您可以直接赋值 `this.repond = false`
+<!--rehype:className=style-list style-list-arrow-->
+
+### ctx.cookies.set 参数
+
+:- | :-
+:- | :-
+`maxAge` | 表示从Date开始的毫秒数 `now()` 到期。
+`expires` | 一个 `Date` 对象，指示 `cookie` 的到期日期（默认情况下在会话结束时到期）
+`path` | 表示 `cookie` 路径的字符串（默认为`/`）
+`domain` | 表示 `cookie` 的域的字符串（无默认值）
+`secure` | 一个布尔值，指示 `cookie` 是否只通过HTTPS发送（HTTP默认为false，HTTPS默认为true）。阅读有关此选项的更多信息
+`httpOnly` | 一个布尔值，指示cookie是否只通过HTTP（S）发送，而不可用于客户端 JavaScript（默认为true）
+`sameSite` | 一个布尔值或字符串，指示cookie是否为“同一站点”cookie（默认为false）。这可以设置为“strict”、“lax”、“none”或true（映射为“strect”）
+`signed` | 一个布尔值，指示是否对cookie进行签名（默认为false）。如果这是真的，还将发送另一个附加了.sig后缀的同名cookie，其中一个27字节的url安全base64 SHA1值表示cookie name=cookie值相对于第一个Keygrip键的哈希值。此签名密钥用于在下次收到cookie时检测篡改
+`overwrite` | 一个布尔值，指示是否覆盖以前设置的同名 `cookie`（默认为false）。如果为true，则在设置此Cookie时，将从set-Cookie标头中筛选出在同一请求期间设置的具有相同名称的所有Cookie（无论路径或域如何）
+<!--rehype:className=style-list style-list-arrow-->
+
+### 请求(Request)
+<!--rehype:wrap-class=row-span-5-->
+
+:- | :-
+:- | :-
+`request.header` | 请求头对象
+`request.header=` | 设置请求头对象
+`request.headers` | 请求头对象。等价于 request.header.
+`request.headers=` | 设置请求头对象。 等价于request.header=.
+`request.method` | 请求方法
+`request.method=` | 设置请求方法, 在实现中间件时非常有用，比如 methodOverride()
+`request.length` | 以数字的形式返回 request 的内容长度(Content-Length)，或者返回 undefined。
+`request.url` | 获得请求url地址.
+`request.url=` | 设置请求地址，用于重写url地址时
+`request.originalUrl` | 获取请求原始地址
+`request.origin` | 获取URL原始地址, 包含 protocol 和 host
+`request.href` | 获取完整的请求URL, 包含 protocol, host 和 url
+`request.path` | 获取请求路径名
+`request.path=` | 设置请求路径名并保留当前查询字符串
+`request.querystring` | 获取查询参数字符串(url中?后面的部分)，不包含?
+`request.querystring=` | 设置原始查询字符串
+`request.search` | 获取查询参数字符串，包含?
+`request.search=` | 设置原始查询字符串
+`request.host` | 获取 host (hostname:port)。 当 app.proxy 设置为 true 时，支持 X-Forwarded-Host
+`request.hostname` | 获取 hostname。当 app.proxy 设置为 true 时，支持 X-Forwarded-Host。
+`request.URL` | 获取 WHATWG 解析的对象.
+`request.type` | 获取请求 Content-Type，不包含像 "charset" 这样的参数。
+`request.charset` | 获取请求 charset，没有则返回 `undefined`
+`request.query` | 将查询参数字符串进行解析并以对象的形式返回，如果没有查询参数字字符串则返回一个空对象
+`request.query=` | 根据给定的对象设置查询参数字符串
+`request.fresh` | 检查请求缓存是否 "fresh"(内容没有发生变化)
+`request.stale` | 与 req.fresh 相反
+`request.protocol` | 返回请求协议，"https" 或者 "http"
+`request.secure` | 简化版 this.protocol == "https"，用来检查请求是否通过 TLS 发送
+`request.ip` | 请求远程地址，当 app.proxy 设置为 true 时，支持 X-Forwarded-Host
+`request.ips` | 当 X-Forwarded-For 存在并且 app.proxy 有效，将会返回一个有序（从 upstream 到 downstream）ip 数组
+`request.subdomains` | 以数组形式返回子域名
+`request.is(types...)` | 检查请求所包含的 "Content-Type" 是否为给定的 type 值
+`request.accepts(types)` | 检查给定的类型 types(s) 是否可被接受，当为 true 时返回最佳匹配，否则返回 false
+`request.acceptsEncodings(encodings)` | 检查 `encodings` 是否可以被接受，当为 `true` 时返回最佳匹配，否则返回 `false`
+`request.acceptsCharsets(charsets)` | 检查 `charsets` 是否可以被接受，如果为 `true` 则返回最佳匹配，否则返回 `false`
+`request.acceptsLanguages(langs)` | 检查 `langs` 是否可以被接受，如果为 `true` 则返回最佳匹配，否则返回 `false`
+`request.idempotent` | 检查请求是否为幂等(idempotent)
+`request.socket` | 返回请求的socket
+`request.get(field)` | 返回请求头
+<!--rehype:className=style-list style-list-arrow-->
+
+### 响应(Response)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`response.header` | Response header 对象
+`response.headers` | Response header 对象。等价于 response.header.
+`response.socket` | Request socket.
+`response.status` | 获取响应状态。 默认情况下，response.status设置为404，而不像node's res.statusCode默认为200。
+`response.status=` | 通过数字设置响应状态
+`response.message` | 获取响应状态消息。默认情况下, response.message关联response.status。
+`response.message=` | 将响应状态消息设置为给定值。
+`response.length=` | 将响应Content-Length设置为给定值。
+`response.length` | 如果 Content-Length 作为数值存在，或者可以通过 ctx.body 来进行计算，则返回相应数值，否则返回 undefined。
+`response.body` | 获取响应体。
+`response.body=` | 设置响应体为如 `string`,`Buffer`,`Stream`,`Object\|Array`,`null`
+`response.get(field)` | 获取 response header 中字段值，field 不区分大小写
+`response.set(field, value)` | 设置 response header 字段 field 的值为 value
+`response.append(field, value)`| 添加额外的字段field 的值为 val
+`response.set(fields)` | 使用对象同时设置 response header 中多个字段的值
+`response.remove(field)` | 移除 response header 中字段 filed
+`response.type` | 获取 response Content-Type，不包含像"charset"这样的参数
+`response.type=` | 通过 mime 类型的字符串或者文件扩展名设置 response Content-Type
+`response.is(types...)` | 跟 `ctx.request.is()` 非常类似。用来检查响应类型是否是所提供的类型之一
+`response.redirect(url, [alt])` | 执行 [302] 重定向到对应 url
+`response.attachment([filename])` | 设置 "attachment" 的 Content-Disposition，用于给客户端发送信号来提示下载
+`response.headerSent` | 检查 response header 是否已经发送，用于在发生错误时检查客户端是否被通知。
+`response.lastModified` | 如果存在 Last-Modified，则以 Date 的形式返回。
+`response.lastModified=` | 以 UTC 格式设置 Last-Modified。您可以使用 Date 或 date 字符串来进行设置。
+`response.etag=` | 设置 包含 "s 的 ETag
+`response.vary(field)` | 不同于field.
+`response.flushHeaders()` | 刷新任何设置的响应头，并开始响应体
+<!--rehype:className=style-list style-list-arrow-->
+
+### 请求(Request)别名
+
+以下访问器和别名与 [Request](#请求request) 等价：
+
+- `ctx.header`
+- `ctx.headers`
+- `ctx.method`
+- `ctx.method=`
+- `ctx.url`
+- `ctx.url=`
+- `ctx.originalUrl`
+- `ctx.origin`
+- `ctx.href`
+- `ctx.path`
+- `ctx.path=`
+- `ctx.query`
+- `ctx.query=`
+- `ctx.querystring`
+- `ctx.querystring=`
+- `ctx.host`
+- `ctx.hostname`
+- `ctx.fresh`
+- `ctx.stale`
+- `ctx.socket`
+- `ctx.protocol`
+- `ctx.secure`
+- `ctx.ip`
+- `ctx.ips`
+- `ctx.subdomains`
+- `ctx.is()`
+- `ctx.accepts()`
+- `ctx.acceptsEncodings()`
+- `ctx.acceptsCharsets()`
+- `ctx.acceptsLanguages()`
+- `ctx.get()`
+
+### 响应(Response)别名
+
+以下访问器和别名与 [Response](#响应response) 等价：
+
+- `ctx.body`
+- `ctx.body=`
+- `ctx.status`
+- `ctx.status=`
+- `ctx.message`
+- `ctx.message=`
+- `ctx.length=`
+- `ctx.length`
+- `ctx.type=`
+- `ctx.type`
+- `ctx.headerSent`
+- `ctx.redirect()`
+- `ctx.attachment()`
+- `ctx.set()`
+- `ctx.append()`
+- `ctx.remove()`
+- `ctx.lastModified=`
+- `ctx.etag=`
+
+### request.fresh 示例
+
+```js
+// freshness 检查需要状态 20x 或 304
+ctx.status = 200;
+ctx.set('ETag', '123');
+
+// 缓存正常
+if (ctx.fresh) {
+  ctx.status = 304;
+  return;
+}
+
+// 缓存已过时
+// 获取新数据
+ctx.body = await db.find('something');
+```
+
+### ctx.is 示例
+
+```js
+// Content-Type: text/html; charset=utf-8
+ctx.is('html'); // => 'html'
+ctx.is('text/html'); // => 'text/html'
+ctx.is('text/*', 'text/html');
+// => 'text/html'
+// 当 Content-Type 为 application/json 时
+ctx.is('json', 'urlencoded'); // => 'json'
+ctx.is('application/json');
+// => 'application/json'
+ctx.is('html', 'application/*');
+// => 'application/json'
+
+ctx.is('html'); // => false
+```
+
+### ctx.accepts 示例
+
+```js
+// 接受: text/*, application/json
+ctx.accepts('html');
+// => "html"
+ctx.accepts('text/html');
+// => "text/html"
+ctx.accepts('json', 'text');
+// => "json"
+ctx.accepts('application/json');
+// => "application/json"
+```
+
+### request.acceptsCharsets 示例
+
+```js
+// Accept-Charset: utf-8, iso-8859-1;q=0.2, utf-7;q=0.5
+ctx.acceptsCharsets('utf-8', 'utf-7');
+// => "utf-8"
+
+ctx.acceptsCharsets(['utf-7', 'utf-8']);
+// => "utf-8"
+```
+
+检查 `charsets` 是否可以被接受，如果为 `true` 则返回最佳匹配， 否则返回 `false`
+
+### response.set 示例
+
+```js
+ctx.set({
+  'Etag': '1234',
+  'Last-Modified': date
+});
+```
+
+使用对象同时设置 response header 中多个字段的值
+
+### response.type 示例
+
+```js
+const ct = ctx.type;
+// => "image/png"
+```
+
+获取 response Content-Type，不包含像"charset"这样的参数

docs/lerna.md

@@ -0,0 +1,568 @@
+Lerna 备忘清单
+===
+
+本备忘单旨在快速理解 [Lerna v6](https://github.com/lerna/lerna) 所涉及的主要概念，显示了它的常用命令使用清单。
+
+入门
+----
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+现代构建系统，用于管理和发布来自同一存储库的多个 JavaScript/TypeScript 包。
+
+```bash
+$ npx lerna@latest init
+```
+
+下面是示例目录结构
+
+```shell {15}
+├── README.md
+├── remixapp   # web 应用 (remixapp)
+│   ├── src
+│   └── package.json
+│
+├── packages
+│   ├── footer # 组件(@remixapp/footer)
+│   │   ├── src
+│   │   └── package.json
+│   │
+│   └── header # 组件(@remixapp/header)
+│       ├── src
+│       └── package.json
+│
+├── lerna.json
+└── package.json
+```
+
+### 引导程序 (Bootstrap)
+<!--rehype:wrap-class=row-span-2-->
+
+它在 `package.json` 中依赖于它们，如下所示：
+
+```json {3,4}
+"dependencies": {
+  // ....
+  "@remixapp/header": "*",
+  "@remixapp/footer": "*"
+}
+```
+
+`remixapp` 应用程序导入`页眉`和`页脚`库，如下所示：
+
+```jsx
+import { Header } from "header";
+import { Footer } from "footer";
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <div>Content!</div>
+      <Footer />
+    </>
+  );
+}
+```
+
+### useWorkspaces
+
+```json {3}
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "useWorkspaces": true,
+  "version": "0.0.0"
+}
+```
+<!--rehype:className=wrap-text -->
+
+在 `lerna.json` 中配置 `useWorkspaces` 告诉 `Lerna` 将包链接过程委托给你的包管理器 (此功能由 npm、yarn 和 pnpm 支持)。
+
+### 任务运行
+
+```bash
+npx lerna run test --scope=header # 单个
+```
+
+多个任务运行
+
+```bash
+npx lerna run test --scope=header,footer
+```
+
+忽略 `header`,`footer` 其它包中运行任务运行
+
+```bash
+npx lerna run build --ignore=header,footer
+```
+
+命令索引
+---
+
+### run/exec 运行命令
+
+```bash
+# 在所有包含它的包中运行 npm run my-script
+$ lerna run <script> -- [..args]
+$ lerna run test
+$ lerna run build
+
+# 观看所有包并在更改时转换，流式前缀输出
+$ lerna run --parallel watch
+
+# 在所有包中运行命令
+$ lerna exec -- <command> [..args]
+$ lerna exec -- rm -rf ./node_modules
+$ lerna exec -- protractor conf.js
+```
+
+---
+
+:- | :-
+:- | :-
+`--npm-client <client>` [#](https://github.com/lerna/lerna/tree/main/commands/run#--npm-client-client) | 必须是知道如何运行 npm 生命周期脚本的可执行文件，默认值是 `npm`
+`--stream` [#](https://github.com/lerna/lerna/tree/main/commands/run#--stream) | 立即从子进程流式输出，以原始包名称为前缀
+`--parallel` [#](https://github.com/lerna/lerna/tree/main/commands/run#--parallel) | 类似于 `--stream` 但完全忽略并发和拓扑排序，立即在所有匹配的包中运行给定的命令或脚本，并带有前缀流输出
+`--no-bail` [#](https://github.com/lerna/lerna/tree/main/commands/run#--no-bail) | 默认情况下，如果任何脚本运行返回非零退出代码，`lerna run` 将退出并出现错误。传递 `--no-bail` 以禁用此行为
+`--no-prefix` [#](https://github.com/lerna/lerna/tree/main/commands/run#--no-prefix) | 当输出为流式传输（`--stream` 或 `--parallel`）时禁用包名称前缀。当将结果传送到其他进程（例如编辑器插件）时，此选项很有用
+`--profile` [#](https://github.com/lerna/lerna/tree/main/commands/run#--profile) | 分析脚本执行并生成性能配置文件
+`--profile-location <location>` [#](https://github.com/lerna/lerna/tree/main/commands/run#--profile-location-location) | 您可以为性能配置文件输出提供自定义位置。提供的路径将相对于当前工作目录进行解析。
+`useNx=false` [#](https://github.com/lerna/lerna/tree/main/commands/run#usenxfalse) | 通过将 `useNx` 设置为 `false`，您可以使用 `lerna` 中的遗留任务运行实现 (`p-map` 和 `p-queue`)，而不是使用由 [Nx](https://nx.dev) 提供支持的默认现代任务运行器实现。
+<!--rehype:className=style-list-arrow-->
+
+### publish 发布包
+<!--rehype:wrap-class=row-span-3-->
+
+```bash
+# 发布自上次发布以来已更改的软件包
+$ lerna publish              
+# 显式发布在当前提交中标记的包
+$ lerna publish from-git     
+# 显式发布注册表中不存在最新版本的软件包
+$ lerna publish from-package
+# 使用下一个语义预发布版本，例如
+$ lerna publish --canary
+# 1.0.0 => 1.0.1-alpha.0+${SHA}
+# 自上次提交以来更改的包
+# 随后的金丝雀发布将产生1.0.1-alpha.1+${SHA}等
+
+$ lerna publish --canary --preid beta
+# 1.0.0 => 1.0.1-beta.0+${SHA}
+
+# 以下是等价的：
+$ lerna publish --canary minor
+$ lerna publish --canary preminor
+# 1.0.0 => 1.1.0-alpha.0+${SHA}
+```
+
+---
+
+:- | :-
+:- | :-
+`--canary` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--canary) | 使用此标志运行时，以更精细的方式（每次提交）发布包
+`--contents <dir>` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--contents-dir) | 要发布的子目录。 必须适用于所有包，并且必须包含 `package.json` 文件
+`--dist-tag <tag>` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--dist-tag-tag) | 使用此标志运行时，将使用给定的 `npm dist-tag`（默认为 `latest`）发布到 `npm`
+`--git-head <sha>` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--git-head-sha) | 打包 `tarball` 时将显式 `SHA` 设置为清单上的 `gitHead`，仅允许使用 `from-package` 位置
+`--graph-type <all\|dependencies>` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--graph-type-alldependencies) | 设置在构建包图时使用哪种依赖项。默认值是依赖项，即仅包含包的 `package.json` 的依赖项部分中列出的包
+`--ignore-scripts` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--ignore-scripts) | 传递时，此标志将在 `lerna` 发布期间禁用运行[生命周期脚本](https://github.com/lerna/lerna/tree/main/commands/publish#lifecycle-scripts)
+`--ignore-prepublish` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--ignore-prepublish) | 传递时，此标志将禁用在 `lerna` 发布期间运行[已弃用](https://docs.npmjs.com/cli/v8/using-npm/scripts#prepare-and-prepublish)的[预发布脚本](https://github.com/lerna/lerna/tree/main/commands/publish#lifecycle-scripts)
+`--legacy-auth` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--legacy-auth) | 发布需要身份验证的包时，您正在使用仅使用旧版 `Base64` `用户名:密码` 的内部托管 NPM 注册表。这与 NPM 发布 `_auth` 标志相同
+`--no-git-reset` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--no-git-reset) | 默认情况下，`lerna publish` 确保对工作树的任何更改都已重置
+`--no-granular-pathspec` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--no-granular-pathspec) | 默认情况下，`lerna publish` 将尝试（如果启用）`git checkout` 仅在发布过程中临时修改的叶包清单
+`--verify-access` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--verify-access) | 从历史上看，`lerna` 试图通过使用给定令牌执行一些抢占式 `npm API` 请求来快速解决授权/身份验证问题
+`--otp` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--otp) | 发布需要双重身份验证的包时，您可以使用 `--otp` 指定一次性密码
+`--preid` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--preid) | 与同名的 `lerna` 版本选项不同，该选项只适用于 `--canary` 版本计算
+`--pre-dist-tag <tag>` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--pre-dist-tag-tag) | 与 `--dist-tag` 的工作方式相同，但仅适用于使用预发布版本发布的软件包
+`--registry <url>` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--registry-url) | 使用此标志运行时，转发的 `npm` 命令将为您的包使用指定的注册表
+`--tag-version-prefix` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--tag-version-prefix) | 此选项允许提供自定义前缀而不是默认前缀：`v`
+`--temp-tag` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--temp-tag) | 传递时，此标志将更改默认发布过程，首先将所有更改的包发布到临时 `dist-tag(lerna-temp)`，然后将新版本移动到 `--dist-tag` 配置的 `dist-tag` (默认`latest`)
+`--yes` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--yes) | 使用此标志运行时，`lerna publish` 将跳过所有确认提示
+<!--rehype:className=style-list-arrow-->
+
+#### 不推荐使用的选项
+
+:- | :-
+:- | :-
+`--no-verify-access` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--no-verify-access) | 旧的抢先访问验证现在默认关闭，因此不需要 `--no-verify-access`
+`--skip-npm` [#](https://github.com/lerna/lerna/tree/main/commands/publish#--skip-npm) | 直接调用 [lerna version](#version-修改版本号)
+<!--rehype:className=style-list-arrow-->
+
+#### 每个包中的配置
+
+```json
+"publishConfig": {
+  "access": "public",
+  "registry": "http://my-registry.com",
+  "tag": "flippin-sweet",
+  "directory": "dist"
+}
+```
+
+----
+
+:- | :-
+:- | :-
+`access` [#](https://github.com/lerna/lerna/tree/main/commands/publish#publishconfigaccess) | 要发布具有范围的包(例如，`@mycompany/rocks`)
+`registry` [#](https://github.com/lerna/lerna/tree/main/commands/publish#publishconfigregistry) | 通过设置注册表来自定义每个包的注册表
+`tag` [#](https://github.com/lerna/lerna/tree/main/commands/publish#publishconfigtag) | 您可以通过设置标签来自定义每个包的 `dist-tag`
+`directory` [#](https://github.com/lerna/lerna/tree/main/commands/publish#publishconfigtag) | 这个 _非标准_ 字段允许您像 `--contents` 一样自定义发布的子目录，但基于每个包
+<!--rehype:className=style-list-arrow-->
+
+### version 修改版本号
+<!--rehype:wrap-class=row-span-3-->
+
+```bash
+$ lerna version 1.0.1 # 明确的
+$ lerna version patch # semver 关键字
+$ lerna version       # 从提示中选择
+
+$ lerna version [major | minor | ...]
+# 使用下一个语义版本值
+# 这会跳过“为...选择新版本”提示
+# 强制所有包版本化
+$ lerna version --force-publish
+$ lerna version -m "chore(doc): publish %s"
+# 提交消息 = "chore(doc): publish v1.0.0"
+$ lerna version -m "chore(doc): publish %v"
+# 提交消息 = "chore(doc): publish 1.0.0"
+```
+
+---
+
+- `major` 重大的
+- `minor` 次要的
+- `patch` 修补
+- `premajor` 主要的
+- `preminor` 初级
+- `prepatch` 预补丁
+- `prerelease` 预发行
+<!--rehype:className=cols-2-->
+
+----
+
+:- | :-
+:- | :-
+`--allow-branch <glob>` [#](https://github.com/lerna/lerna/tree/main/commands/version#--allow-branch-glob) | 与启用 `lerna version` 的 `git` 分支匹配的 `glob` 白名单
+`--amend` [#](https://github.com/lerna/lerna/tree/main/commands/version#--amend) | 使用此标志运行时，`lerna version` 将在当前提交上执行所有更改，而不是添加新的
+`--changelog-preset` [#](https://github.com/lerna/lerna/tree/main/commands/version#--changelog-preset) | 默认情况下，更改日志预设设置为 [angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular#angular-convention)
+`--conventional-commits` [#](https://github.com/lerna/lerna/tree/main/commands/version#--conventional-commits) | 使用常规提交规范来确定[版本 bump](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-recommended-bump) 并生成 CHANGELOG.md 文件
+`--conventional-graduate` [#](https://github.com/lerna/lerna/tree/main/commands/version#--conventional-graduate) | 将使用 `*` 对指定的包(逗号分隔)或所有包进行分级
+`--conventional-prerelease` [#](https://github.com/lerna/lerna/tree/main/commands/version#--conventional-prerelease) | 预发布版本发布指定的包
+`--create-release <type>` [#](https://github.com/lerna/lerna/tree/main/commands/version#--create-release-type) | 根据更改的包创建正式的 `GitHub` 或 `GitLab` 版本
+`--exact` [#](https://github.com/lerna/lerna/tree/main/commands/version#--exact) | 在更新的包中精确指定更新的依赖项（没有标点符号），而不是与 [semver](./semver.md) 兼容（使用`^`）
+`--force-publish` [#](https://github.com/lerna/lerna/tree/main/commands/version#--force-publish) | 强制发布指定的包
+`--git-remote <name>` [#](https://github.com/lerna/lerna/tree/main/commands/version#--git-remote-name) | 把 `git` 更改推送到指定的远程位置，而不是`origin`
+`--ignore-changes` [#](https://github.com/lerna/lerna/tree/main/commands/version#--ignore-changes) | 检测更改的包时忽略与 `glob` 匹配的文件中的更改
+`--ignore-scripts` [#](https://github.com/lerna/lerna/tree/main/commands/version#--ignore-scripts) | 禁用在 `lerna version` 期间运行的生命周期脚本
+`--include-merged-tags` [#](https://github.com/lerna/lerna/tree/main/commands/version#--include-merged-tags) | 在检测到更改的包时包括来自合并分支的标签
+`--message <msg>` [#](https://github.com/lerna/lerna/tree/main/commands/version#--message-msg) | 此选项别名为 `-m` 以与 `git commit` 进行奇偶校验
+`--no-changelog` [#](https://github.com/lerna/lerna/tree/main/commands/version#--no-changelog) | 使用常规提交时，不要生成任何 CHANGELOG.md 文件
+`--no-commit-hooks` [#](https://github.com/lerna/lerna/tree/main/commands/version#--no-commit-hooks) | 允许 `git commit hooks` 在提交版本更改时运行。通过 `--no-commit-hooks` 禁用此行为
+`--no-git-tag-version` [#](https://github.com/lerna/lerna/tree/main/commands/version#--no-git-tag-version) | 将提交对 `package.json` 文件的更改并标记发布。通过 `--no-git-tag-version` 禁用该行为
+`--no-granular-pathspec` [#](https://github.com/lerna/lerna/tree/main/commands/version#--no-granular-pathspec) | 仅添加在版本控制过程中更改的叶包清单(可能还有变更日志)。这产生了 `git add --packages/*/package.json` 的等价物，但针对更改的内容量身定制
+`--no-private` [#](https://github.com/lerna/lerna/tree/main/commands/version#--no-private) | 在选择版本、提交和标记版本时包含私有包。通过 `--no-private` 禁用此行为
+`--no-push` [#](https://github.com/lerna/lerna/tree/main/commands/version#--no-push) | 将已提交和标记的更改推送到配置的 `git remote`。通过 `--no-push` 禁用此行为
+`--preid` [#](https://github.com/lerna/lerna/tree/main/commands/version#--preid) | 使用此标志运行时，lerna 版本将使用指定的[预发布标识符](https://semver.org/#spec-item-9)增加 `premajor`、`preminor`、`prepatch` 或 `prerelease` [semver](./semver.md) bumps
+`--sign-git-commit` [#](https://github.com/lerna/lerna/tree/main/commands/version#--sign-git-commit) | 此选项类似于同名的 npm 版本选项
+`--sign-git-tag` [#](https://github.com/lerna/lerna/tree/main/commands/version#--sign-git-tag) | 此选项类似于同名的 `npm` 版本选项
+`--force-git-tag` [#](https://github.com/lerna/lerna/tree/main/commands/version#--force-git-tag) | 此选项替换任何现有标记而不是失败
+`--tag-version-prefix` [#](https://github.com/lerna/lerna/tree/main/commands/version#--tag-version-prefix) | 此选项允许提供自定义前缀而不是默认前缀：`v`
+`--yes` [#](https://github.com/lerna/lerna/tree/main/commands/version#--yes) | 使用此标志运行时，`lerna` 版本将跳过所有确认提示
+<!--rehype:className=style-list-arrow-->
+
+#### 不推荐使用的选项
+
+:- | :-
+:- | :-
+`--cd-version` [#](https://github.com/lerna/lerna/tree/main/commands/version#--cd-version) | 将 `semver` 关键字传递给 [bump](https://github.com/lerna/lerna/tree/main/commands/version#semver-bump) 位置
+`--repo-version` [#](https://github.com/lerna/lerna/tree/main/commands/version#--repo-version) | 将明确的版本号传递给 [bump](https://github.com/lerna/lerna/tree/main/commands/version#semver-bump) 位置
+`--skip-git` [#](https://github.com/lerna/lerna/tree/main/commands/version#--skip-git) | 请改用 `--no-git-tag-version` 和 `--no-push`
+<!--rehype:className=style-list-arrow-->
+
+### bootstrap
+
+将本地包`链接`在一起，并`安装`其余的包依赖项
+
+```bash
+$ lerna bootstrap -- --production \
+                     --no-optional
+$ lerna bootstrap --hoist
+```
+
+:- | :-
+:- | :-
+`--hoist [glob]` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--strict) | 在 `repo` 根目录安装与 `glob` 匹配的外部依赖项，以便它们可用于所有包
+`--strict` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--nohoist-glob) | 与提升 _(hoist)_ 一起使用时，会在发出版本警告后抛出错误并停止引导
+`--nohoist [glob]` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--nohoist-glob) | 不要在 `repo` 根目录安装与 `glob` 匹配的外部依赖项。这可用于选择不提升某些依赖项
+`--ignore` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--ignore) | 当与 `bootstrap` 命令一起使用时，还可以在 `lerna` 中设置 `--ignore` 标志
+<!--rehype:className=style-list-arrow-->
+
+#### 选项
+
+:- | :-
+:- | :-
+`--ignore-prepublish` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--ignore-prepublish) | 跳过默认在引导程序包中运行的预发布生命周期脚本
+`--ignore-scripts` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--ignore-scripts) | 跳过通常在引导程序包中运行（准备等）的任何生命周期脚本
+`--registry <url>` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--registry-url) | 指定 npm 包的仓库地址
+`--npm-client <client>` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--npm-client-client) | 必须是知道如何安装 `npm` 包依赖项的可执行文件
+`--use-workspaces` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--use-workspaces) | 启用与 `Yarn Workspaces` 的集成(从 `yarn@0.27+` 开始可用)
+`--no-ci` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--no-ci) | 在 `CI` 环境中调用 `npm ci` 而不是 `npm install`
+`--force-local` [#](https://github.com/lerna/lerna/tree/main/commands/bootstrap#--force-local) | 此标志会导致引导命令始终对本地依赖项进行符号链接，而不管匹配的版本范围如何
+<!--rehype:className=style-list-arrow-->
+
+
+### info 本地环境信息
+
+```bash
+$ lerna info
+
+lerna notice cli v6.0.0
+ Environment info:
+
+  System(系统):
+    OS: macOS 12.2
+    CPU: (8) x64 Apple M1
+  Binaries(二进制文件):
+    Node: 16.17.0 - /usr/local/bin/node
+    Yarn: 1.22.10 - /usr/local/bin/yarn
+    npm: 8.5.0 - /usr/local/bin/npm
+  Utilities(实用程序):
+    Git: 2.33.0 - /opt/homebrew/bin/git
+  npmPackages:
+    lerna: ^6.0.0 => 6.0.0
+```
+
+### 过滤选项
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```bash
+$ lerna exec --scope my-component -- ls -la
+$ lerna run --scope toolbar-* test
+$ lerna run --scope package-1 --scope *-2 lint
+
+$ lerna exec --ignore package-{1,2,5}  -- ls -la
+$ lerna run --ignore package-1  test
+$ lerna run --ignore package-@(1|2) --ignore package-3 lint
+
+# 列出自最新标签以来已更改的包的内容
+$ lerna exec --since -- ls -la
+# 对自 main 以来发生更改的所有包运行测试
+$ lerna run test --since main
+# 列出自 some-branch 以来发生变化的所有包
+$ lerna ls --since some-branch
+
+# my-component 及其所有依赖项将被引导
+$ lerna bootstrap --scope my-component --include-dependencies
+
+$ lerna bootstrap --scope "package-*" --ignore "package-util-*" --include-dependencies
+# 所有匹配 “package-util-*” 的包都将被忽略，除非它们是
+# 依赖于名称与 “package-*” 匹配的包
+```
+
+#### 选项
+
+:- | :-
+:- | :-
+`--scope <glob>` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--scope-glob) | 仅包括名称与给定 `glob` 匹配的包
+`--ignore <glob>` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--ignore-glob) | 排除名称与给定 `glob` 匹配的包
+`--no-private` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--no-private) | 排除私有包
+`--since [ref]` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--since-ref) | 仅包括自指定 `ref` 以来已更改的包
+`--exclude-dependents` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--exclude-dependents) | 使用 `--since` 运行命令时排除所有传递依赖项，覆盖默认的“changed”算法
+`--include-dependents` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--include-dependents) | 无论 `--scope`、`--ignore` 或 `--since` 是什么，在运行命令时都包括所有传递依赖项
+`--include-dependencies` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--include-dependencies) | 无论 `--scope`、`--ignore` 或 `--since` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--since-ref) 是什么，在运行命令时都包括所有传递依赖项
+`--include-merged-tags` [#](https://github.com/lerna/lerna/tree/main/core/filter-options#--include-merged-tags) | 使用 `--since` 运行命令时包括来自合并分支的标签
+
+### list
+
+列出本地程序包，也尊重所有可用的[过滤选项](#过滤选项)
+
+```bash
+# 与 lerna list 相同，它本身类似于 ls 命令
+lerna ls
+# 相当于 lerna ls -l，显示长输出
+lerna ll
+# 相当于 lerna ls -la，显示所有包(包括私有包）
+lerna la
+```
+
+#### 选项
+
+:- | :-
+:- | :-
+`--json` | 显示为 JSON [#](https://github.com/lerna/lerna/tree/main/commands/publish#--json)
+`--ndjson` | 换行符分隔 [#](https://github.com/lerna/lerna/tree/main/commands/publish#--ndjson)
+`-a,--all` | 所有包 [#](https://github.com/lerna/lerna/tree/main/commands/publish#--all)
+`-l,--long` | 显示扩展信息 [#](https://github.com/lerna/lerna/tree/main/commands/publish#--long)
+`-p,--parseable` | 显示可解析的输出 [#](https://github.com/lerna/lerna/tree/main/commands/publish#--parseable)
+`--toposort` | 按拓扑排序 [#](https://github.com/lerna/lerna/tree/main/commands/publish#--toposort)
+`--graph` | JSON 格式邻接依赖关系图 [#](https://github.com/lerna/lerna/tree/main/commands/publish#--graph)
+
+### changed
+
+列出自上次标记版本以来已更改的本地软件包
+
+- `lerna changed` 支持 `lerna ls` 支持的所有[选项](#选项-1)
+- 与 `lerna ls` 不同的是不支持过滤器选项
+<!--rehype:className=style-round-->
+
+`lerna changed` 支持 `lerna version` 的以下选项
+
+:- | :-
+:- | :-
+`--conventional-graduate` | [#](https://github.com/lerna/lerna/tree/main/commands/publishhttps://github.com/lerna/lerna/tree/main/commands/version#--conventional-graduate) 
+`--force-publish` | [#](https://github.com/lerna/lerna/tree/main/commands/publishhttps://github.com/lerna/lerna/tree/main/commands/version#--force-publish) 
+`--ignore-changes` | [#](https://github.com/lerna/lerna/tree/main/commands/publishhttps://github.com/lerna/lerna/tree/main/commands/version#--ignore-changes) 
+`--include-merged-tags` | [#](https://github.com/lerna/lerna/tree/main/commands/publishhttps://github.com/lerna/lerna/tree/main/commands/version#--include-merged-tags)
+
+### init
+
+创建新的 Lerna 仓库或将现有仓库升级到当前版本 Lerna
+
+- 如果 `lerna` 不存在，请将其添加到 `package.json` 中的 `devDependency`
+- 创建一个 `lerna.json` 配置文件来存储版本号
+- 如果不存在 `.gitignore`，则生成一个忽略文件
+<!--rehype:className=style-timeline-->
+
+----
+
+```shell
+$ lerna init --independent
+```
+
+----
+
+:- | :-
+:- | :-
+`--independent` [#](https://github.com/lerna/lerna/tree/main/commands/init#--independent) | 使用独立版本控制模式 [#](https://github.com/lerna/lerna/tree/main/commands/init#--independent)
+`--exact` [#](https://github.com/lerna/lerna/tree/main/commands/init#--exact) | 添加或更新 `lerna` 的本地版本时将使用插入符范围 [#](https://github.com/lerna/lerna/tree/main/commands/init#--exact)
+
+它将配置 `lerna.json` 以强制所有后续执行完全匹配
+
+```js
+{
+  "command": {
+    "init": {
+      "exact": true
+    }
+  },
+  "version": "0.0.0"
+}
+```
+
+### import
+
+将一个包导入到带有提交历史的 `monorepo`
+
+```bash
+# 开始使用 Lerna
+$ git init lerna-repo && cd lerna-repo
+$ npx lerna init
+$ npm install
+# 添加提交
+$ git add .
+# 如果没有提交，导入命令将失败
+$ git commit -m "Initial lerna commit"
+# 导入其他存储库
+$ npx lerna import <外部存储库的路径>
+$ npx lerna import ~/Product --flatten
+```
+
+选项
+
+:- | :-
+:- | :-
+`--flatten` [#](https://github.com/lerna/lerna/tree/main/commands/import#--flatten) | 当导入具有冲突的合并提交的存储库时，导入命令将无法尝试应用所有提交
+`--dest` [#](https://github.com/lerna/lerna/tree/main/commands/import#--dest) | 导入仓库时，可以通过 `lerna.json` 中列出的目录来指定目标目录
+`--preserve-commit` [#](https://github.com/lerna/lerna/tree/main/commands/import#--preserve-commit) | 每个 git 提交都有一个作者和一个提交者
+<!--rehype:className=style-list-arrow-->
+
+### add
+<!--rehype:wrap-class=row-span-2-->
+
+将依赖项添加到匹配的包
+
+```shell
+$ lerna add <package>[@version] \
+        [--dev] [--exact] [--peer]
+```
+
+选项
+
+:- | :-
+:- | :-
+`--dev` [#](https://github.com/lerna/lerna/tree/main/commands/add#--dev) | 将新包添加到 `devDependencies`
+`--exact` [#](https://github.com/lerna/lerna/tree/main/commands/add#--exact) | 添加具有精确版本（例如 `1.0.1`）而不是默认 `^` semver 范围（例如 `^1.0.1`）的新包
+`--peer` [#](https://github.com/lerna/lerna/tree/main/commands/add#--peer) | 将新包添加到 `peerDependencies`
+`--registry <url>` [#](https://github.com/lerna/lerna/tree/main/commands/add#--registry-url) | 使用自定义注册表安装目标包
+`--no-bootstrap` [#](https://github.com/lerna/lerna/tree/main/commands/add#--no-bootstrap) | 跳过链式 `lerna bootstrap`
+<!--rehype:className=style-list-arrow-->
+
+实例
+
+```bash
+# 将 mod-1 包添加到“prefix-”前缀文件夹中的包中
+$ lerna add mod-1 packages/prefix-*
+# 将 mod-1 安装到mod-2
+$ lerna add mod-1 --scope=mod-2
+# 在 devDependencies 中安装 mod-1 到 mod-2
+$ lerna add mod-1 --scope=mod-2 --dev
+# 在 peerDependencies 中安装 mod-1 到 mod-2
+$ lerna add mod-1 --scope=mod-2 --peer
+# 在除 mod-1 之外的所有模块中安装 mod-1
+$ lerna add mod-1
+# 在所有模块中安装 babel-core
+$ lerna add babel-core
+```
+
+### diff
+
+比较自上次发布以来的所有包或单个包
+
+```bash
+$ lerna diff [package]
+$ lerna diff
+$ lerna diff package-name # 区分一个特定的包
+```
+
+类似于 `lerna changed`，此命令运行 `git diff`
+
+
+### clean
+
+从所有包中删除 `node_modules` 目录
+
+```bash
+$ lerna clean
+```
+
+接受所有[过滤选项](#过滤选项)。`lerna clean` 不会从根 `node_modules` 目录中删除模块，即使您启用了 `--hoist` 选项
+
+### add-caching
+
+运行设置基本缓存选项的向导
+
+```bash
+$ lerna add-caching
+```
+
+### link
+
+将所有相互依赖的包符号链接在一起
+
+```bash
+$ lerna link
+```
+
+[`--force-local`](https://github.com/lerna/lerna/tree/main/commands/link#--force-local) 设置会导致链接命令始终对本地依赖项进行符号链接
+
+### repair
+
+更新配置文件以匹配当前安装的 lerna 版本
+
+```bash
+$ npm i lerna@latest
+$ lerna repair
+```
+
+[`lerna repair`](https://github.com/lerna/lerna/tree/main/core/lerna/commands/repair#usage) 在升级后最有用，可确保应用新版本 lerna 的任何配置文件更改

docs/lessjs.md

@@ -0,0 +1,719 @@
+Less 备忘清单
+===
+
+本备忘单旨在快速理解 [Less](https://github.com/less/less.js) 所涉及的主要概念，显示了它的常用方法使用清单。
+
+入门
+---
+
+### 介绍
+
+Less(Leaner Style Sheets 的缩写)是一门向后兼容的 [`CSS`](./css.md) 扩展语言
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_
+
+在 Node.js 环境中使用 `Less`
+
+```bash
+$ npm install -g less
+$ lessc styles.less styles.css
+```
+
+在浏览器环境中使用 `Less`
+
+```html
+<link rel="stylesheet/less" type="text/css" href="styles.less" />
+<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
+```
+<!--rehype:className=wrap-text -->
+
+### 变量(Variables)
+
+```less
+@width: 10px;
+@height: @width + 10px;
+
+#header {
+  width: @width;
+  height: @height;
+}
+```
+
+编译 css 为：
+
+```css
+#header {
+  width: 10px;
+  height: 20px;
+}
+```
+
+另见: [变量的更多信息](https://lesscss.org/features/#variables-feature)
+
+### 混合(Mixins)
+
+```less {1,8,13}
+.bordered {
+  border-top: dotted 1px black;
+  border-bottom: solid 2px black;
+}
+
+#menu a {
+  color: #111;
+  .bordered();
+}
+
+.post a {
+  color: red;
+  .bordered();
+}
+```
+
+另见: [混合(Mixin)的更多信息](https://lesscss.org/features/#mixins-feature)
+
+
+### 嵌套(Nesting)
+
+```css
+#header {
+  color: black;
+}
+#header .navigation {
+  font-size: 12px;
+}
+#header .logo {
+  width: 300px;
+}
+```
+
+👇👇 更改为 less 的写法 ✅ 👇👇
+
+```less
+#header {
+  color: black;
+  .navigation {
+    font-size: 12px;
+  }
+  .logo {
+    width: 300px;
+  }
+}
+```
+
+### 父选择器 &
+
+```less
+.button {
+  color: blue;
+  &-ok {
+    background-image: url("ok.png");
+  }
+  &:hover {
+    color: green;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.button {
+  color: blue;
+}
+.button-ok {
+  background-image: url("ok.png");
+}
+.button:hover {
+  color: green;
+}
+```
+
+### @规则嵌套和冒泡
+<!--rehype:wrap-class=row-span-2-->
+
+```less
+.component {
+  width: 300px;
+  @media (min-width: 768px) {
+    width: 600px;
+    @media  (min-resolution: 192dpi) {
+      background-image: url(/img/icon2x.png);
+    }
+  }
+  @media (min-width: 1280px) {
+    width: 800px;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.component {
+  width: 300px;
+}
+@media (min-width: 768px) {
+  .component {
+    width: 600px;
+  }
+}
+@media (min-width: 768px) and (min-resolution: 192dpi) {
+  .component {
+    background-image: url(/img/icon2x.png);
+  }
+}
+@media (min-width: 1280px) {
+  .component {
+    width: 800px;
+  }
+}
+```
+<!--rehype:className=wrap-text -->
+
+### 运算(Operations)
+<!--rehype:wrap-class=row-span-2-->
+
+算术运算符 `+`、`-`、`*`、`/` 对任何数字、颜色或变量进行运算
+
+```less
+@conversion-1: 5cm + 10mm; // 结果是 6cm
+@conversion-2: 2 - 3cm - 5mm; // 结果 -1.5cm
+@incompatible-units: 2 + 5px - 3cm;
+// 结果是 4px
+@base: 5%;
+@filler: @base * 2; // 结果是 10%
+@other: @base + @filler; // 结果是 15%
+
+@base: 2cm * 3mm; // 结果是 6cm
+@color: (#224488 / 2); // 结果是 #112244
+background-color: #112244 + #111;
+// 结果是 #223355
+@color: #222 / 2;
+// 结果是 `#222 / 2`, not #111
+background-color: (#FFFFFF / 16);
+// 结果是 #101010
+```
+
+#### calc() 特例
+
+为了与 `CSS` 保持兼容，`calc()` 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值
+
+```less
+@var: 50vh/2;
+width: calc(50% + (@var - 20px));
+// 结果是 calc(50% + (25vh - 20px))
+```
+
+### 转义(Escaping)
+<!--rehype:wrap-class=row-span-2-->
+
+```less
+@min768: ~"(min-width: 768px)";
+.element {
+  @media @min768 {
+    font-size: 1.2rem;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+@media (min-width: 768px) {
+  .element {
+    font-size: 1.2rem;
+  }
+}
+```
+
+从 Less 3.5 开始，可以简写为
+
+```less
+@min768: (min-width: 768px);
+.element {
+  @media @min768 {
+    font-size: 1.2rem;
+  }
+}
+```
+
+在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了
+
+### 函数(Functions)
+
+```less
+@base: #f04615;
+@width: 0.5;
+
+.class {
+  width: percentage(@width); // 返回 `50%`
+  color: saturate(@base, 5%);
+  background-color: 
+      spin(lighten(@base, 25%), 8);
+}
+```
+
+Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
+
+### 命名空间和访问符
+
+```less
+#bundle() {
+  .button {
+    display: block;
+    border: 1px solid black;
+    background-color: grey;
+    &:hover {
+      background-color: white;
+    }
+  }
+  .tab { ... }
+  .citation { ... }
+}
+```
+
+把 `.button` 类混合到 `#header a` 中，我们可以这样做
+
+```less
+#header a {
+  color: orange;
+  #bundle.button();
+  // 还可以书写为 #bundle > .button 形式
+}
+```
+
+### 映射(Maps)
+
+```less
+#colors() {
+  primary: blue;
+  secondary: green;
+}
+
+.button {
+  color: #colors[primary];
+  border: 1px solid #colors[secondary];
+}
+```
+
+输出符合预期(css)：
+
+```css
+.button {
+  color: blue;
+  border: 1px solid green;
+}
+```
+
+另见：[映射(Maps)](https://lesscss.org/features/#maps-feature)
+
+### 作用域（Scope）
+
+```less
+@var: red;
+
+#page {
+  @var: white;
+  #header {
+    color: @var; // white
+  }
+}
+```
+
+和上面实例代码相同
+
+```less
+@var: red;
+
+#page {
+  #header {
+    color: @var; // white
+  }
+  @var: white;
+}
+```
+
+另见：[懒加载](https://lesscss.org/features/#variables-feature-lazy-loading)
+
+### 注释（Comments）
+
+```less
+/* 一个块注释
+ * style comment! */
+@var: red;
+
+// 这一行被注释掉了！
+@var: white;
+```
+
+块注释和行注释都可以使用
+
+### 导入（Importing）
+
+```less
+@import "library"; // library.less
+@import "typo.css";
+```
+
+另见：[导入(Importing)的知识](https://lesscss.org/features/#imports-feature)
+
+### Extend
+<!--rehype:wrap-class=row-span-2-->
+
+```less
+nav ul {
+  &:extend(.inline);
+  background: blue;
+}
+.inline {
+  color: red;
+}
+```
+
+编译 css 为：
+
+```css
+nav ul {
+  background: blue;
+}
+.inline,
+nav ul {
+  color: red;
+}
+```
+
+函数
+---
+
+### 逻辑函数 if & boolean
+
+```less
+@bg: black;
+@bg-light: boolean(luma(@bg) > 50%);
+
+div {
+  background: @bg; 
+  color: if(@bg-light, black, white);
+}
+```
+
+编译 css 为：
+
+```css
+div {
+  background: black;
+  color: white;
+}
+```
+
+### 字符串函数
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`escape` | 将 [URL 编码](http://en.wikipedia.org/wiki/Percent-encoding)应用于输入字符串中的特殊字符
+`e` | 字符串转义
+`%` | 第一个参数是带有占位符的字符串
+
+```less
+escape('a=1') // 输出 a%3D1
+
+@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
+filter: e(@mscode);
+// 输出 filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
+
+format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
+// 输出 format-a-d: "repetitions: 3 file: "directory/file.less"";
+```
+
+### 替换字符串 replace
+<!--rehype:wrap-class=col-span-2-->
+
+```less
+replace("Hello, Mars?", "Mars\?", "Earth!");
+replace("One + one = 4", "one", "2", "gi");
+replace('This is a string.', "(string)\.$", "new $1.");
+replace(~"bar-1", '1', '2');
+```
+
+预期输出
+
+```
+"Hello, Earth!";
+"2 + 2 = 4";
+'This is a new string.';
+bar-2;
+```
+
+### length
+
+```less
+@list: "banana", "tomato", "potato", "peach";
+n: length(@list);
+```
+
+预期输出
+
+```css
+n: 4;
+```
+
+返回值列表中的元素数
+
+### extract
+
+```less
+@list: apple, pear, coconut, orange;
+value: extract(@list, 3);
+```
+
+预期输出
+
+```css
+value: coconut;
+```
+
+返回列表中指定位置的值
+
+### range
+
+```less
+value: range(4);
+// 输出 value: 1 2 3 4;
+value: range(10px, 30px, 10);
+// 输出 value: 10px 20px 30px;
+```
+
+生成跨越一系列值的列表
+
+### each
+<!--rehype:wrap-class=row-span-3-->
+
+```less
+@selectors: blue, green, red;
+
+each(@selectors, {
+  .sel-@{value} {
+    a: b;
+  }
+});
+```
+
+预期输出
+
+```css
+.sel-blue {
+  a: b;
+}
+.sel-green {
+  a: b;
+}
+.sel-red {
+  a: b;
+}
+```
+
+每个列表成员的每个规则集都绑定到 `@value`、`@key` 和 `@index` 变量
+
+```less
+@set: {
+  one: blue;
+  two: green;
+  three: red;
+}
+.set {
+  each(@set, {
+    @{key}-@{index}: @value;
+  });
+}
+```
+
+预期输出
+
+```css
+.set {
+  one-1: blue;
+  two-2: green;
+  three-3: red;
+}
+```
+
+将规则集的评估绑定到列表的每个成员
+
+### each()
+
+```less
+set-2() {
+  one: blue;
+  two: green;
+  three: red;
+}
+.set-2 {
+  // 调用 mixin 并迭代每个规则
+  each(.set-2(), .(@v, @k, @i) {
+    @{k}-@{i}: @v;
+  });
+}
+```
+
+预期输出
+
+```css
+.set-2 {
+  one-1: blue;
+  two-2: green;
+  three-3: red;
+}
+```
+
+### 使用 `range` 和 `each` 创建一个 `for` 循环
+
+```less
+each(range(4), {
+  .col-@{value} {
+    height: (@value * 50px);
+  }
+});
+```
+
+预期输出
+
+```css
+.col-1 {
+  height: 50px;
+}
+.col-2 {
+  height: 100px;
+}
+.col-3 {
+  height: 150px;
+}
+.col-4 {
+  height: 200px;
+}
+```
+
+### 数学函数
+<!--rehype:wrap-class=row-span-3-->
+
+:- | :-
+:- | :-
+`ceil(2.4)` _(输出 3)_ | 向上舍入到下一个最大整数 [#](https://lesscss.org/functions/#math-functions-ceil)
+`floor(2.6)` _(输出 2)_ | 向下舍入到下一个最小整数 [#](https://lesscss.org/functions/#math-functions-floor)
+`percentage(0.5)` _(输出 50%)_ | 将浮点数转换为百分比字符串 [#](https://lesscss.org/functions/#math-functions-floor)
+`round(1.67)` _(输出 2)_ | 应用舍入 [#](https://lesscss.org/functions/#math-functions-round)
+`sqrt(25cm)` _(输出 5cm)_ | 计算数字的平方根。保持单位不变 [#](https://lesscss.org/functions/#math-functions-sqrt)
+`abs(25cm)` _(输出 25cm)_ | 计算数字的绝对值。 保持单位不变 [#](https://lesscss.org/functions/#math-functions-abs)
+`sin(1deg)` _(输出 0.01745240643728351)_ | 计算正弦函数 [#](https://lesscss.org/functions/#math-functions-sin)
+`asin(-0.8414709848078965)` _(输出 -1rad)_ | 计算反正弦（正弦的倒数）函数 [#](https://lesscss.org/functions/#math-functions-asin)
+`cos(1deg)` _(输出 0.9998476951563913)_ | 计算余弦函数 [#](https://lesscss.org/functions/#math-functions-cos)
+`acos(0.5403023058681398)` _(输出 1rad)_ | 计算反余弦（余弦的倒数）函数 [#](https://lesscss.org/functions/#math-functions-acos)
+`tan(1deg)` _(输出 0.017455064928217585)_ | 计算正切函数 [#](https://lesscss.org/functions/#math-functions-tan)
+`atan(-1.5574077246549023)` _(输出 -1rad)_ | 计算反正切（正切的倒数）函数 [#](https://lesscss.org/functions/#math-functions-atan)
+`pi()` _(输出 3.141592653589793)_ | π (pi) [#](https://lesscss.org/functions/#math-functions-pi)
+`pow(0cm, 0px)` _(输出 1cm)_ | 返回第一个参数的第二个参数次幂的值 [#](https://lesscss.org/functions/#math-functions-pow)
+`mod(11cm, 6px)` _(输出 5cm)_ | 返回第一个参数模数第二个参数的值 [#](https://lesscss.org/functions/#math-functions-mod)
+`min(5, 10)` _(输出 5)_ | 返回一个或多个值中的最小值 [#](https://lesscss.org/functions/#math-functions-min)
+`max(5, 10)` _(输出 10)_ | 返回一个或多个值中的最大值 [#](https://lesscss.org/functions/#math-functions-min)
+<!--rehype:className=style-list-arrow-->
+
+### 颜色定义函数
+
+:- | :-
+:- | :-
+`rgb`| [#](https://lesscss.org/functions/#color-definition-rgb)
+`rgba`| [#](https://lesscss.org/functions/#color-definition-rgba)
+`argb`| [#](https://lesscss.org/functions/#color-definition-argb)
+`hsl`| [#](https://lesscss.org/functions/#color-definition-hsl)
+`hsla`| [#](https://lesscss.org/functions/#color-definition-hsla)
+`hsv`| [#](https://lesscss.org/functions/#color-definition-hsv)
+`hsva`| [#](https://lesscss.org/functions/#color-definition-hsva)
+
+### 类型函数
+
+:- | :-
+:- | :-
+`isnumber`| 值是否为数字 [#](https://lesscss.org/functions/#type-functions-isnumber)
+`isstring`| 值是否为字符串 [#](https://lesscss.org/functions/#type-functions-isstring)
+`iscolor`| 值是否为颜色值 [#](https://lesscss.org/functions/#type-functions-iscolor)
+`iskeyword`| 值是否为 keyword [#](https://lesscss.org/functions/#type-functions-iskeyword)
+`isurl`| 值是否为 url 值 [#](https://lesscss.org/functions/#type-functions-isurl)
+`ispixel`| 值是否为像素值 [#](https://lesscss.org/functions/#type-functions-ispixel)
+`isem`| 值是否为 em 值 [#](https://lesscss.org/functions/#type-functions-isem)
+`ispercentage`| 值是否为 百分百 值 [#](https://lesscss.org/functions/#type-functions-ispercentage)
+`isunit`| 值是是否为指定单位的数字 [#](https://lesscss.org/functions/#type-functions-isunit)
+`isruleset`| 值是否为规则集 [#](https://lesscss.org/functions/#type-functions-isruleset)
+`isdefined`| 值是否为 defined [#](https://lesscss.org/functions/#type-functions-isdefined)
+
+### 杂项函数
+
+:- | :-
+:- | :-
+`color`| [#](https://lesscss.org/functions/#misc-functions-color)
+`image-size`| [#](https://lesscss.org/functions/#misc-functions-image-size)
+`image-width`| [#](https://lesscss.org/functions/#misc-functions-image-width)
+`image-height`| [#](https://lesscss.org/functions/#misc-functions-image-height)
+`convert`| [#](https://lesscss.org/functions/#misc-functions-convert)
+`data-uri`| [#](https://lesscss.org/functions/#misc-functions-data-uri)
+`default`| [#](https://lesscss.org/functions/#misc-functions-default)
+`unit`| [#](https://lesscss.org/functions/#misc-functions-unit)
+`get-unit`| [#](https://lesscss.org/functions/#misc-functions-get-unit)
+`svg-gradient`| [#](https://lesscss.org/functions/#misc-functions-svg-gradient)
+
+### 颜色通道函数
+
+:- | :-
+:- | :-
+`hue`| [#](https://lesscss.org/functions/#color-channel-hue)
+`saturation`| [#](https://lesscss.org/functions/#color-channel-saturation)
+`lightness`| [#](https://lesscss.org/functions/#color-channel-lightness)
+`hsvhue`| [#](https://lesscss.org/functions/#color-channel-hsvhue)
+`hsvsaturation`| [#](https://lesscss.org/functions/#color-channel-hsvsaturation)
+`hsvvalue`| [#](https://lesscss.org/functions/#color-channel-hsvvalue)
+`red`| [#](https://lesscss.org/functions/#color-channel-red)
+`green`| [#](https://lesscss.org/functions/#color-channel-green)
+`blue`| [#](https://lesscss.org/functions/#color-channel-blue)
+`alpha`| [#](https://lesscss.org/functions/#color-channel-alpha)
+`luma`| [#](https://lesscss.org/functions/#color-channel-luma)
+`luminance`| [#](https://lesscss.org/functions/#color-channel-luminance)
+
+### 色彩运算函数
+
+:- | :-
+:- | :-
+`saturate`| [#](https://lesscss.org/functions/#color-operations-saturate)
+`desaturate`| [#](https://lesscss.org/functions/#color-operations-desaturate)
+`lighten`| [#](https://lesscss.org/functions/#color-operations-lighten)
+`darken`| [#](https://lesscss.org/functions/#color-operations-darken)
+`fadein`| [#](https://lesscss.org/functions/#color-operations-fadein)
+`fadeout`| [#](https://lesscss.org/functions/#color-operations-fadeout)
+`fade`| [#](https://lesscss.org/functions/#color-operations-fade)
+`spin`| [#](https://lesscss.org/functions/#color-operations-spin)
+`mix`| [#](https://lesscss.org/functions/#color-operations-mix)
+`tint`| [#](https://lesscss.org/functions/#color-operations-tint)
+`shade`| [#](https://lesscss.org/functions/#color-operations-shade)
+`greyscale`| [#](https://lesscss.org/functions/#color-operations-greyscale)
+`contrast`| [#](https://lesscss.org/functions/#color-operations-contrast)
+
+### 颜色混合功能
+
+:- | :-
+:- | :-
+`multiply`| [#](https://lesscss.org/functions/#color-blending-multiply)
+`screen`| [#](https://lesscss.org/functions/#color-blending-screen)
+`overlay`| [#](https://lesscss.org/functions/#color-blending-overlay)
+`softlight`| [#](https://lesscss.org/functions/#color-blending-softlight)
+`hardlight`| [#](https://lesscss.org/functions/#color-blending-hardlight)
+`difference`| [#](https://lesscss.org/functions/#color-blending-difference)
+`exclusion`| [#](https://lesscss.org/functions/#color-blending-exclusion)
+`average`| [#](https://lesscss.org/functions/#color-blending-average)
+`negation`| [#](https://lesscss.org/functions/#color-blending-negation)
+
+另见
+---
+
+- [Less.js 官网](http://lesscss.org) _(lesscss.org)_
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [Stylus 备忘清单](./stylus.md) _(jaywcjlove.github.io)_
+- [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_

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/markdown.md

@@ -42,7 +42,7 @@ Header 2
 ```
 
 ### 无序列表
-<!--rehype:wrap-style=grid-row: span 2/span 2;-->
+<!--rehype:wrap-class=row-span-3-->
 
 ```markdown
 * Item 1
@@ -64,7 +64,7 @@ Header 2
 + Item 1
 + Item 2
 ```
-或者
+或者**任务**列表
 
 ```markdown
 - [ ] Checkbox off
@@ -80,41 +80,27 @@ Header 2
     b. item 3b
 ```
 
-
-
 ### 链接
 
 ```markdown
 [link](http://google.com)
-```
 
-```markdown
 [link][google]
 [google]: http://google.com
-```
 
-```markdown
 <http://google.com>
 ```
 
 ### 强调
 
 ```markdown
-*斜体*
-_斜体_
-```
+*斜体*    _斜体_    **粗体**   __粗体__
 
-```markdown
-**粗体**
-__粗体__
-```
-
-```markdown
-`内联代码`
-~~删除~~
+`内联代码`  ~~删除~~
 ```
 
 ### 水平线
+<!--rehype:wrap-class=row-span-2-->
 
 连字符
 
@@ -134,9 +120,15 @@ __粗体__
 ___
 ```
 
+### 换行
 
+```markdown
+在当前行的结尾加 2 个空格··
+这行就会新起一行\
+反斜杠也可以换行
+```
 
-
+尾部添加两个空格，或者添加 `\` 反斜杠
 
 ### 代码
 
@@ -165,33 +157,49 @@ console.log("This is a block code")
 ```
 
 ### 表格
-<!--rehype:wrap-style=grid-column: span 2/span 2;-->
 
 ```markdown
-|     左栏     |     中间栏     |     右栏     |
-|:------------|:-------------:|-------------:|
-| 单元格 1     |   居中         |        $1600 |
-| 单元格 2     |   单元格 3     |          $12 |
+|     左栏   |     中间栏     |  右栏     |
+| ----------| ------------ | --------- |
+| 单元格 1   |   居中        |     $1600 |
+| 单元格 2   |   单元格 3    |       $12 |
 ```
 
 简单的风格
 
 ```markdown
-    左栏     |     中间栏     |     右栏
-:----------:|:-------------:|:-----------:
-  单元格 1   |   居中         |    $1600
-  单元格 2   |   单元格 3     |     $12
+ 左栏 | 中间栏 | 右栏
+:-------: | :-------:|:-------:
+单元格 1   | 居中      |    $1600
+单元格 2   | 单元格 3  |     $12
 ```
 
 Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 
-### 图片
-<!--rehype:wrap-style=grid-column: span 2/span 2;-->
+### 脚注 (Footnotes)
 
 ```markdown
-![GitHub Logo](/images/logo.png)
+这是一个简单的脚注[^1]。
 
-![Alt Text](url)
+一个脚注也可以有多行[^2]。
+
+你也可以使用文字，更贴合你的写作风格[^note]。
+
+[^1]：我的参考。
+[^2]：每个新行都应以 2 个空格为前缀。
+  这允许你有一个多行的脚注。
+[^note]：
+    推荐使用数字命名脚注，但文本更容易识别和链接。
+    脚注使用了不同的语法，使用 4 个空格作为新行。
+```
+
+### 图片
+<!--rehype:wrap-class=col-span-2-->
+
+```markdown
+![图片名称](http://图片网址/images/logo.png)
+
+![替代文字](url)
 ```
 
 #### 带链接的图片
@@ -199,19 +207,19 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 ```markdown
 [![GitHub Logo](/images/logo.png)](https://github.com/)
 
-[![Alt Text](image_url)](link_url)
+[![替代文字](image_url)](link_url)
 ```
 
 #### 参考风格
 
 ```markdown
-![alt text][logo]
+![替代文字][logo]
 
 [logo]: /images/logo.png "Logo Title"
 ```
 
-
 ### 反斜杠转义
+<!--rehype:wrap-class=row-span-2-->
 
 | 字符 | 转义 | 描述 |
 |------------|--------|-------------|
@@ -226,4 +234,16 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 | \+         | \\\+   | plus sign 加号               |
 | \-         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
 | \.         | \\\.   | dot 点                      |
-| \!         | \\\!   | exclamation mark 感叹号      |
+| \!         | \\\!   | exclamation mark 感叹号      |
+
+### 行内 HTML 元素
+<!--rehype:wrap-class=col-span-2-->
+
+```html
+目前只支持部分段内 HTML 元素效果，包括 <kdb>, <b>, <i>, <em>, <sup>, <sub>, <br>
+```
+
+另见
+----
+
+- [GitHub 风格的 Markdown 规范](https://github.github.com/gfm/) _(github.com)_

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/netcat.md

@@ -0,0 +1,231 @@
+Netcat 备忘清单
+===
+
+该备忘单提供了在 Linux 和 Unix 上使用 Netcat 的各种方法。
+
+入门
+------
+<!--rehype:body-class=cols-5-->
+
+### 用法
+<!--rehype:wrap-class=col-span-2-->
+
+连接到位于任何地方的主机
+
+```shell
+$ nc [options] [host] [port]
+```
+
+监听传入连接
+
+```shell 
+$ nc -lp port [host] [port]
+```
+
+### 选项示例
+<!--rehype:wrap-class=col-span-3 row-span-2-->
+
+
+选项 | 示例 | 说明 
+:- | :- | :-
+`-h`   | nc -h                      | 帮助
+`-z`   | nc -z 192.168.1.9 1-100    | 端口扫描主机或 `IP` 地址
+`-v`   | nc -zv 192.168.1.9 1-100   | 提供详细输出
+`-n`   | nc -zn 192.168.1.9 1-100   | 通过禁用 `DNS` 解析进行快速扫描
+`-l`   | nc -lp 8000                | `TCP` 侦听模式 _(用于入站连接)_
+`-w`   | nc -w 180 192.168.1.9 8000 | 定义超时值
+`-k`   | nc -kl 8000                | 断线后继续收听
+`-u`   | nc -u 192.168.1.9 8000     | 使用 `UDP` 而不是 `TCP`
+`-q`   | nc -q 1 192.168.1.9 8000   | 客户在 `EOF` 后熬夜
+`-4`   | nc -4 -l 8000              | 仅限 `IPv4`
+`-6`   | nc -6 -l 8000              | 仅限 `IPv6`
+
+
+### 聊天客户端-服务器
+<!--rehype:wrap-class=col-span-2-->
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000
+```
+
+Netcat 示例
+--------
+
+### Banner 抓取
+
+```shell
+$ nc website.com 80
+GET index.html HTTP/1.1
+HEAD / HTTP/1.1
+```
+
+或者
+
+```shell
+echo "" | nc -zv -wl 192.168.1.1 801-805
+```
+
+### 端口扫描
+
+扫描 `21` 到 `25` 之间的端口
+
+```shell
+$ nc -zvn 192.168.1.1 21-25
+```
+
+扫描端口 `22`、`3306` 和 `8080`
+
+```shell
+$ nc -zvn 192.168.1.1 22 3306 8080
+```
+
+### 代理和端口转发
+
+```shell
+$ nc -lp 8001 -c "nc 127.0.0.1 8000"
+```
+
+或者
+
+```shell
+$ nc -l 8001 | nc 127.0.0.1 8000
+```
+
+创建从一个本地端口到另一个本地端口的隧道
+
+### 下载文件
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000 < file.txt
+```
+
+客户端 Client
+
+```shell
+$ nc -nv 192.168.1.9 8000 > file.txt
+```
+
+假设您想将文件 `file.txt` 从服务器 A 传输到客户端 B。
+
+### 上传文件
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000 > file.txt
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000 < file.txt
+```
+
+假设您想将文件 `file.txt` 从客户端 `B` 传输到服务器 `A`
+
+### 目录传输
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ tar -cvf – dir_name | nc -l 8000
+```
+
+客户端 Client
+
+```shell
+$ nc -n 192.168.1.9 8000 | tar -xvf -
+```
+
+假设您想通过网络将目录从 `A` 传输到 `B`
+
+### 加密传输
+<!--rehype:wrap-class=col-span-2-->
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -l 8000 | openssl enc -d -des3 -pass pass:password > file.txt
+```
+
+客户端 Client
+
+```shell
+$ openssl enc -des3 -pass pass:password | nc 192.168.1.9 8000
+```
+
+在通过网络传输之前加密数据
+
+### 克隆
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ dd if=/dev/sda | nc -l 8000
+```
+
+客户端 Client
+
+```shell
+$ nc -n 192.168.1.9 8000 | dd of=/dev/sda
+```
+
+克隆 linux PC 非常简单。假设你的系统盘是 /dev/sda
+
+### 视频流
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ cat video.avi | nc -l 8000
+```
+
+客户端 Client
+
+```shell {.wrap}
+$ nc 192.168.1.9 8000 | mplayer -vo x11 -cache 3000 -
+```
+
+使用 netcat 流式传输视频
+
+### 远程 shell
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000 -e /bin/bash
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000
+```
+
+我们已经使用 `telnet` 和 `ssh` 使用远程 `Shell`，但是如果它们没有安装并且我们没有安装它们的权限，那么我们也可以使用 `netcat` 创建远程 `shell`
+
+### 逆转 shell
+
+服务器 Server (192.168.1.9)
+
+```shell
+$ nc -lv 8000
+```
+
+客户端 Client
+
+```shell
+$ nc 192.168.1.9 8000 -v -e /bin/bash
+```
+
+反向 `shell` 通常用于绕过防火墙限制，例如阻止入站连接

docs/netstat.md

@@ -0,0 +1,209 @@
+Netstat 备忘清单
+===
+
+此快速参考备忘单提供了各种使用 netstat 命令的方法
+
+入门
+-----
+
+### 入门实例
+
+端口 80 上的所有连接
+
+```shell
+$ netstat -anp | grep :80
+```
+
+网络统计帮助
+
+```shell
+$ netstat -h
+```
+
+### 监听
+
+选项 | 说明
+:- | :-
+`netstat -ltunp` | 所有监听端口
+`netstat -ltn`   | 监听 TCP 端口
+`netstat -lun`   | 监听 UDP 端口
+`netstat -lx`    | 监听 Unix 端口
+`netstat -lt` | 仅列出侦听 TCP 端口
+`netstat -lu` | 仅列出侦听 UDP 端口
+`netstat -l` | 列出所有监听条件
+
+### 连接
+<!--rehype:wrap-class=row-span-2-->
+
+选项 | 说明
+:- | :-
+`netstat -a`  | 所有连接
+`netstat -at` | 所有 TCP 连接
+`netstat -au` | 所有 UDP 连接
+`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
+
+
+选项 | 说明
+:- | :-
+`netstat` | 活动连接
+`netstat -a` | 所有连接
+`netstat -at` | 所有 TCP 连接
+`netstat -au` | 所有 UDP 连接
+`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
+`netstat -tnl` | 监听 TCP 端口
+`netstat -unl` | 监听 UDP 端口
+
+
+### 网络
+
+选项 | 说明
+:- | :-
+`netstat -i`  | 显示网络接口
+`netstat -ie` | 显示网络接口扩展信息
+`netstat -n` | 仅显示 IP 地址
+`netstat -F` | 尽可能显示 IP 地址的域名
+
+### 路由
+
+
+选项 | 说明
+:- | :-
+`netstat -r`  | 显示路由表
+`netstat -rn` | 显示路由表，不解析主机
+
+### 统计数据
+<!--rehype:wrap-class=row-span-3-->
+
+选项 | 说明
+:- | :-
+`netstat -s`  | 显示统计信息
+`netstat -st` | 显示 TCP 统计信息
+`netstat -su` | 显示 UDP 统计信息
+`netstat -ltpe` | 使用进程信息和扩展信息显示 TCP 的侦听连接
+`netstat -tp` | 显示带有 PID 编号的服务名称
+`sudo netstat -nlpt` | 列出进程名称/PID 和用户 ID
+`netstat -nlptue` | 所有带有 PID 和扩展信息的侦听端口
+`netstat -M` | 显示伪装的连接
+
+### 显示没有域名的 TCP 连接
+
+```bash
+$ netstat --tcp --numeric
+```
+
+### 显示活动/已建立的连接
+
+```bash
+$ netstat -atnp | grep ESTA
+```
+
+### 获取活动连接的连续列表
+
+```bash
+$ watch -d -n0 "netstat -atnp | grep ESTA"
+```
+
+### 显示到特定端口的所有打开连接
+
+```bash
+$ netstat -anp | grep":"
+```
+
+插入`端口`号（上图）代替冒号 `:`
+
+### 检查服务是否正在运行
+
+```bash
+$ sudo netstat -aple | grep ntp
+```
+
+你可以用`http`、`smtp`代替`ntp`
+
+Netstat – 安全命令
+---
+
+### 显示具有大量连接的 IP
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+$ netstat -tn 2>/dev/null | grep :80 | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -nr | head
+```
+<!--rehype:className=wrap-text -->
+
+### 连接到端口 80 的 IP 地址
+<!--rehype:wrap-class=col-span-3-->
+
+```bash
+$ netstat -tn 2>/dev/null | grep ':80 ' | awk '{print $5}' |sed -e 's/::ffff://' | cut -f1 -d: | sort | uniq -c | sort -rn | head
+```
+<!--rehype:className=wrap-text -->
+
+### 显示端口 80 上的活动连接数
+
+```bash
+$ netstat -an |grep :80 |wc -l
+```
+
+### 仅显示外部 IP 地址
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ netstat -antu | grep :80 | grep -v LISTEN | awk '{print $5}'
+```
+
+### 显示活动 SYNC_REC
+<!--rehype:wrap-class=row-span-2-->
+
+以下命令将输出服务器上正在发生和正在发生的活动 `SYNC_REC` 数量。数量应该很低(小于 `5`)。如果该数字为两位数，则您可能正在遭受 `DoS` 攻击或被邮件轰炸。
+
+```bash
+$ netstat -n -p|grep SYN_REC | wc -l
+```
+
+#### 列出发送 SYN_REC 连接的唯一 IP 地址
+
+```bash
+$ netstat -n -p | grep SYN_REC | awk '{print $5}' | awk -F: '{print $1}'
+```
+<!--rehype:className=wrap-text -->
+
+与上面的命令一样，该命令也列出了发送 `SYN_REC` 连接状态的节点的所有唯一 `IP` 地址
+
+### 每个远程 IP 的连接数
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+$ netstat -antu | awk '{print $5}' | awk -F: '{print $1}' | sort | uniq -c | sort -n
+```
+<!--rehype:className=wrap-text -->
+
+或者
+
+```bash
+$ netstat -antu | awk '$5 ~ /[0-9]:/{split($5, a, ":"); ips[a[1]]++} END {for (ip in ips) print ips[ip], ip | "sort -k1 -nr"}'
+```
+<!--rehype:className=wrap-text -->
+
+### 检查开放端口（ipv4 和 ipv6）
+
+```bash
+$ netstat -plntu
+```
+
+### 检查开放端口（ipv4 和 ipv6）
+
+```bash
+$ netstat -plnt
+```
+
+### 每个 IP 的打开连接数
+
+```bash
+$ netstat -an | grep 80 | wc -l
+```
+
+### 活跃的互联网连接
+
+```bash
+$ netstat -pnut -w | column -t -s $'\t'
+```

docs/nginx.md

@@ -0,0 +1,870 @@
+NGINX 备忘清单
+===
+
+这个 nginx 快速参考备忘单显示了它的常用命和配置使用清单。
+
+入门
+----
+
+### 服务管理
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+sudo systemctl status nginx # nginx当前状态
+sudo systemctl reload nginx # 重新加载 nginx
+sudo systemctl restart nginx # 重启nginx
+
+sudo nginx -t   # 检查语法
+nginx           # 启动
+nginx -s reload # 重启
+nginx -s stop   # 关闭进程
+nginx -s quit   # 平滑关闭nginx
+nginx -V        # 查看nginx的安装状态，
+```
+
+### Docker 安装
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+docker run --name some-nginx -v /some/content:/usr/share/nginx/html:ro -d nginx
+```
+
+### 简单代理
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+location / {
+  proxy_pass http://127.0.0.1:3000;
+  proxy_redirect      off;
+  proxy_set_header    Host $host;
+}
+```
+
+### 全局变量
+<!--rehype:wrap-class=col-span-2 row-span-4-->
+
+| 变量 | 说明
+:- | :-
+`$args` | 这个变量等于请求行中的参数，同 `$query_string`
+`$remote_port` | 客户端的端口
+`$content_length` | 请求头中的 `Content-length` 字段
+`$remote_user` | 已经经过 `Auth Basic Module` 验证的用户名
+`$content_type` | 请求头中的 `Content-Type` 字段
+`$request_filename` | 当前请求的文件路径，由 `root` 或alias指令与URI请求生成
+`$document_root` | 当前请求在 `root` 指令中指定的值
+`$scheme` | HTTP方法（如http，https）
+`$host` | 请求主机头字段，否则为服务器名称
+`$hostname` | 主机名
+`$http_user_agent` | 客户端`agent`信息
+`$http_cookie` | 客户端`cookie`信息
+`$server_protocol` | 请求使用的协议，通常是`HTTP/1.0`或`HTTP/1.1`
+`$server_addr` | 服务器地址，在完成一次系统调用后可以确定这个值
+`$server_name` | 服务器名称
+`$server_port` | 请求到达服务器的端口号
+`$limit_rate` | 这个变量可以限制连接速率
+`$request_method` | 客户端请求的动作，如 GET/POST
+`$request_uri` | 包含请求参数的原始URI，不包含主机名，如：`/foo/bar.php?arg=baz`
+`$remote_addr` | 客户端的IP地址
+`$uri` | 不带请求参数的当前URI，`$uri`不包含主机名，如 `/foo/bar.html`
+`$document_uri` | 与 `$uri` 相同
+`$nginx_version` | `nginx` 版本
+
+更多全局变量[查看官方文档](https://nginx.org/en/docs/varindex.html)
+
+### 监听端口
+
+```nginx
+server {
+  listen 80;      # 标准 HTTP 协议
+  listen 443 ssl; # 标准 HTTPS 协议
+  listen 443 ssl http2; # 对于 http2
+  listen [::]:80; # 使用 IPv6 在 80 上收听
+  # 仅收听使用 IPv6
+  listen [::]:80 ipv6only=on;
+}
+```
+
+### 域名 (server_name)
+
+```nginx
+server {
+  # 监听 example.com
+  server_name example.com;
+  # 监听多个域
+  server_name example.com www.example.com;
+  # 监听所有子域
+  server_name *.example.com;
+  # 监听所有顶级域
+  server_name example.*;
+  # 监听未指定的主机名（监听 IP 地址本身）
+  server_name "";
+}
+```
+
+### 负载均衡(简单实例)
+
+```nginx
+upstream node_js {
+  server 0.0.0.0:3000;
+  server 0.0.0.0:4000;
+  server 127.155.142.421;
+}
+```
+
+### 负载均衡(权重)
+
+```nginx
+upstream test {
+  server localhost:8080 weight=9;
+  server localhost:8081 weight=1;
+}
+```
+
+### upstream ip_hash
+
+```nginx {2}
+upstream test {
+  ip_hash;
+  server localhost:8080;
+  server localhost:8081;
+}
+```
+
+解决负载均衡 `session` 的问题
+
+### upstream fair
+
+```nginx {2}
+upstream backend {
+  fair;
+  server localhost:8080;
+  server localhost:8081;
+}
+```
+
+响应时间短的优先分配
+
+### server 可选参数
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`weight` | 访问权重数值越高，收到请求越多
+`fail_timeout` | 指定的时间内必须提供响应
+`max_fails` | 尝试失败服务器连接的最大次数
+`down` | 标记一个服务器不再接受任何请求
+`backup` | 有服务器宕机，标记的机器接收请求
+
+配置示例
+
+```nginx
+upstream test {
+  server 127.0.0.1:83 weight=9; # 权重
+  server 127.0.0.1:83 weight=1; # 权重
+  # 失败超时时间
+  server 127.0.0.1:83 max_fails=3;
+  server 127.0.0.1:83 weight=3 down;
+}
+```
+
+### upstream url_hash
+
+```nginx {2,3}
+upstream backend {
+  hash $request_uri;
+  hash_method crc32;
+  server localhost:8080;
+  server localhost:8081;
+}
+```
+
+按访问url的hash结果来分配请求
+
+### upstream keepalive
+
+```nginx {4}
+upstream memcached_backend {
+    server 127.0.0.1:11211;
+    server 10.0.0.2:11211;
+    keepalive 32;
+}
+```
+
+激活缓存以连接到上游服务器
+
+### 子文件夹中的代理
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx {1,2}
+location /folder/ { # / 很重要！
+  proxy_pass http://127.0.0.1:3000/; # / 很重要！
+  proxy_redirect      off;
+  proxy_set_header    Host            $host;
+  proxy_set_header    X-Real-IP       $remote_addr;
+  proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
+}
+```
+
+### 反向代理
+<!--rehype:wrap-class=row-span-3-->
+
+#### 基础 
+
+```nginx
+server {
+  listen 80;
+  server_name example.com;
+  
+  location / {
+    proxy_pass http://0.0.0.0:3000;
+    # 其中 0.0.0.0:3000 是绑定在 
+    # 0.0.0.0端口3000 列表上的 Node.js 服务器
+  }
+}
+```
+
+#### 基础 + (upstream)
+
+```nginx
+upstream node_js {
+  server 0.0.0.0:3000;
+  # 其中 0.0.0.0:3000 是绑定在 
+  # 0.0.0.0端口3000 列表上的 Node.js 服务器
+}
+
+server {
+  listen 80;
+  server_name example.com;
+  
+  location / {
+    proxy_pass http://node_js;
+  }
+}
+```
+
+#### 升级连接（适用于支持 WebSockets 的应用程序）
+
+```nginx
+upstream node_js {
+  server 0.0.0.0:3000;
+}
+
+server {
+  listen 80;
+  server_name example.com;
+  
+  location / {
+    proxy_pass http://node_js;
+    proxy_redirect off;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_set_header Host $host;
+	
+  }
+}
+```
+
+适用于 Node.js、Streamlit、Jupyter 等
+
+### 静态资源（传统 Web 服务器）
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+server {
+  listen 80;
+  server_name example.com;
+  root /path/to/website;
+  # root /www/data/ 示例，如果里面没有'root'，它将寻找 /www/data/index.html
+  location / {
+  }
+  location /images/ { # 如果里面没有“root”，它将寻找 /www/data/images/index.html
+  }
+  location /videos/ { # 由于里面有“root”，它会寻找 /www/media/videos/index.html
+      root /www/media;
+  }
+}
+```
+
+### HTTPS 协议
+<!--rehype:wrap-class=col-span-2-->
+
+大多数 SSL 选项取决于您的应用程序做什么或需要什么
+
+```nginx
+server {
+  listen 443 ssl http2;
+  server_name example.com;
+  ssl on;
+
+  ssl_certificate /path/to/cert.pem;
+  ssl_certificate_key /path/to/privkey.pem;
+
+  ssl_stapling on;
+  ssl_stapling_verify on;
+  ssl_trusted_certificate /path/to/fullchain.pem;
+
+  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+  ssl_session_timeout 1d;
+  ssl_session_cache shared:SSL:50m;
+  add_header Strict-Transport-Security max-age=15768000;
+}
+```
+
+您可以使用 Let's Encrypt 轻松保护您的网站/应用程序。去 [lets-encrypt](https://certbot.eff.org/lets-encrypt/ubuntuxenial-nginx.html) 获取更多信息
+
+
+### 重定向(301永久)
+<!--rehype:wrap-class=row-span-2-->
+
+将 www.example.com 重定向到 example.com
+
+```nginx
+server {
+  listen 80;
+  server_name www.example.com;
+  return 301 http://example.com$request_uri;
+}
+```
+
+将 http 重定向到 https
+
+```nginx
+server {
+  listen 80;
+  server_name example.com;
+  return 301 https://example.com$request_uri;
+}
+```
+
+### 重定向(302临时)
+
+```nginx
+server {
+  listen 80;
+  server_name yourdomain.com;
+  return 302 http://otherdomain.com;
+}
+```
+
+### 永久重定向到 HTTPS 安全域
+
+```nginx
+server {
+  listen 80;
+  server_name yourdomain.com;
+  return 301 https://$host$request_uri;
+}
+```
+
+### 重定向参数
+
+:- | :-
+:- | :-
+`permanent` | 永久性重定向。日志中的状态码为 `301`
+`redirect` | 临时重定向。日志中的状态码为 `302`
+
+### HTTP 请求端真实的IP
+
+```nginx
+location / {
+  proxy_set_header X-Forwarded-For $remote_addr;
+}
+```
+<!--rehype:className=wrap-text -->
+
+示例
+----
+<!--rehype:body-class=cols-6-->
+
+### websocket 的代理 keepalive
+<!--rehype:wrap-class=col-span-3-->
+
+```nginx
+# Upstreams
+upstream backend {
+    server 127.0.0.1:3000;
+    keepalive 5;
+}
+# HTTP Server
+server {
+  server_name your_hostname.com;
+  error_log /var/log/nginx/rocketchat.access.log;
+  location / {
+      proxy_pass http://backend;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forward-Proto http;
+      proxy_set_header X-Nginx-Proxy true;
+      proxy_redirect off;
+  }
+}
+```
+<!--rehype:className=wrap-text -->
+
+### Apache 的反向代理
+<!--rehype:wrap-class=col-span-3-->
+
+```nginx
+server {
+  server_name domain.tld;
+
+  access_log /log/domain.tld.access.log;
+  error_log /log/domain.tld.error.log;
+  root /var/www/domain.tld/htdocs;
+
+  # 将请求传递给 Apache 后端
+  location / {
+      proxy_pass http://backend;
+  }
+  # 使用后备处理静态文件
+  location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|woff2|ttf|m4a|mp4|ttf|rss|atom|jpe?g|gif|cur|heic|png|tiff|ico|zip|webm|mp3|aac|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf|webp)$ {
+      add_header "Access-Control-Allow-Origin" "*";
+      access_log off;
+      log_not_found off;
+      expires max;
+      try_files $uri @fallback;
+  }
+  # 如果找不到文件，则回退以将请求传递给 Apache
+  location @fallback {
+      proxy_pass http://backend;
+  }
+}
+```
+<!--rehype:className=wrap-text -->
+
+### Gitlab 的反向代理
+<!--rehype:wrap-class=col-span-4 row-span-3-->
+
+```nginx
+server {
+  #侦听的80端口
+  listen       80;
+  server_name  git.example.cn;
+  location / {
+    proxy_pass   http://localhost:3000;
+    # 以下是一些反向代理的配置可删除
+    proxy_redirect             off;
+    # 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
+    proxy_set_header           Host $host;
+    client_max_body_size       10m;  # 允许客户端请求的最大单文件字节数
+    client_body_buffer_size    128k; # 缓冲区代理缓冲用户端请求的最大字节数
+    proxy_connect_timeout      300;  # nginx跟后端服务器连接超时时间(代理连接超时)
+    proxy_send_timeout         300;  # 后端服务器数据回传时间(代理发送超时)
+    proxy_read_timeout         300;  # 连接成功后，后端服务器响应时间(代理接收超时)
+    # 设置代理服务器（nginx）保存用户头信息的缓冲区大小
+    proxy_buffer_size          4k;
+    # proxy_buffers缓冲区，网页平均在32k以下的话，这样设置
+    proxy_buffers              4 32k;
+    # 高负荷下缓冲大小（proxy_buffers*2）
+    proxy_busy_buffers_size    64k;
+  }
+}
+```
+
+### 重定向整个网站
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+server {
+  server_name old-site.com;
+  return 301 $scheme://new-site.com$request_uri;
+}
+```
+<!--rehype:className=wrap-text -->
+
+### 重定向单页
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+server {
+  location = /oldpage.html {
+    return 301 http://example.org/newpage.html;
+  }
+}
+```
+<!--rehype:className=wrap-text -->
+
+### 重定向整个子路径
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+location /old-site {
+  rewrite ^/old-site/(.*) http://example.org/new-site/$1 permanent;
+}
+```
+<!--rehype:className=wrap-text -->
+
+### 负载均衡
+<!--rehype:wrap-class=col-span-3-->
+
+```nginx
+upstream example {
+  ip_hash;
+  # upstream的负载均衡，weight是权重，可以根据机器配置定义权重。
+  # weigth参数表示权值，权值越高被分配到的几率越大。
+  server 192.168.122.11:8081 ;
+  server 127.0.0.1:82 weight=3;
+  server 127.0.0.1:83 weight=3 down;
+  server 127.0.0.1:84 weight=3; max_fails=3  fail_timeout=20s;
+  server 127.0.0.1:85 weight=4;;
+  keepalive 32;
+}
+server {
+  #侦听的80端口
+  listen       80;
+  server_name  git.example.cn;
+  location / {
+    # 在这里设置一个代理，和 upstream 的名字一样
+    proxy_pass   http://example;
+  }
+}
+```
+
+### 内容缓存
+<!--rehype:wrap-class=col-span-3-->
+
+允许浏览器基本上永久地缓存静态内容。 Nginx 将为您设置 Expires 和 Cache-Control 头信息
+
+```nginx {3}
+location /static {
+    root /data;
+    expires max;
+}
+```
+
+如果要求浏览器永远不会缓存响应（例如用于跟踪请求），请使用 `-1`
+
+```nginx {3}
+location = /empty.gif {
+    empty_gif;
+    expires -1;
+}
+```
+
+### 跨域问题
+<!--rehype:wrap-class=col-span-3-->
+
+```nginx
+server {
+  listen 80;
+  server_name api.xxx.com;
+    
+  add_header 'Access-Control-Allow-Origin' '*';
+  add_header 'Access-Control-Allow-Credentials' 'true';
+  add_header 'Access-Control-Allow-Methods' 'GET,POST,HEAD';
+
+  location / {
+    proxy_pass http://127.0.0.1:3000;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header Host  $http_host;    
+  } 
+}
+```
+
+### 重定向 URI 来解决跨域问题
+<!--rehype:wrap-class=col-span-3 row-span-2-->
+
+```nginx
+upstream test {
+  server 127.0.0.1:8080;
+  server localhost:8081;
+}
+server {
+  listen 80;
+  server_name api.xxx.com;
+  location / { 
+    root  html;                   # 去请求../html文件夹里的文件
+    index  index.html index.htm;  # 首页响应地址
+  }
+  # 用于拦截请求，匹配任何以 /api/开头的地址，
+  # 匹配符合以后，停止往下搜索正则。
+  location ^~/api/{ 
+    # 代表重写拦截进来的请求，并且只能对域名后边的除去传递的参数外的字符串起作用
+    # 例如www.a.com/api/msg?meth=1&par=2重写，只对/api/msg重写。
+    # rewrite后面的参数是一个简单的正则 ^/api/(.*)$，
+    # $1代表正则中的第一个()，$2代表第二个()的值，以此类推。
+    rewrite ^/api/(.*)$ /$1 break;
+    
+    # 把请求代理到其他主机 
+    # 其中 http://www.b.com/ 写法和 http://www.b.com写法的区别如下
+    # 如果你的请求地址是他 http://server/html/test.jsp
+    # 配置一： http://www.b.com/ 后面有“/” 
+    #         将反向代理成 http://www.b.com/html/test.jsp 访问
+    # 配置一： http://www.b.com 后面没有有“/” 
+    #         将反向代理成 http://www.b.com/test.jsp 访问
+    proxy_pass http://test;
+
+    # 如果 proxy_pass  URL 是 http://a.xx.com/platform/ 这种情况
+    # proxy_cookie_path应该设置成 /platform/ / (注意两个斜杠之间有空格)。
+    proxy_cookie_path /platfrom/ /;
+
+    # 设置 Cookie 头通过
+    proxy_pass_header Set-Cookie;
+  } 
+}
+```
+
+### 跳转到带 www 的域上面
+<!--rehype:wrap-class=col-span-3-->
+
+```nginx
+server {
+  listen 80;
+  # 配置正常的带www的域名
+  server_name www.wangchujiang.com;
+  root /home/www/wabg/download;
+  location / {
+      try_files $uri $uri/ /index.html =404;
+  }
+}
+
+server {
+  # 将不带 www 的 wangchujiang.com 
+  # 永久性重定向到 https://www.wangchujiang.com
+  server_name wangchujiang.com;
+  rewrite ^(.*) https://www.wangchujiang.com$1 permanent;
+}
+```
+
+### 代理转发
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```nginx
+upstream server-api {
+  # api 代理服务地址
+  server 127.0.0.1:3110;    
+}
+upstream server-resource {
+  # 静态资源 代理服务地址
+  server 127.0.0.1:3120;
+}
+server {
+  listen       3111;
+  server_name  localhost; # 这里指定域名
+  root /home/www/server-statics;
+  # 匹配 api 路由的反向代理到API服务
+  location ^~/api/ {
+      rewrite ^/(.*)$ /$1 break;
+      proxy_pass http://server-api;
+  }
+  # 假设这里验证码也在API服务中
+  location ^~/captcha {
+      rewrite ^/(.*)$ /$1 break;
+      proxy_pass http://server-api;
+  }
+  # 假设你的图片资源全部在另外一个服务上面
+  location ^~/img/ {
+      rewrite ^/(.*)$ /$1 break;
+      proxy_pass http://server-resource;
+  }
+  # 路由在前端，后端没有真实路由，
+  # 路由不存在的 404 状态的页面返回 /index.html
+  # 使用场景，用在 React/Vue项目没有真实路由
+  location / {
+    try_files $uri $uri/ /index.html =404;
+    #                      空格很重要 ^
+  }
+}
+```
+
+### 屏蔽 IP
+<!--rehype:wrap-class=col-span-4-->
+
+可以放到 `http`, `server`, `location`, `limit_except` 语句块
+
+```nginx
+include blockip.conf;
+```
+
+在 `blockip.conf` 里面输入内容，如：
+
+```nginx
+deny 165.91.122.67;
+
+deny IP;            # 屏蔽单个 ip 访问
+allow IP;           # 允许单个 ip 访问
+deny all;           # 屏蔽所有 ip 访问
+allow all;          # 允许所有 ip 访问
+deny 123.0.0.0/8;   # 屏蔽整个段即从 123.0.0.1 到 123.255.255.254 访问的命令
+deny 124.45.0.0/16; # 屏蔽IP段即从 123.45.0.1 到 123.45.255.254 访问的命令
+deny 123.45.6.0/24; # 屏蔽IP段即从 123.45.6.1 到 123.45.6.254 访问的命令
+
+# 如果你想实现这样的应用，除了几个IP外，其他全部拒绝
+allow 1.1.1.1; 
+allow 1.1.1.2;
+deny all; 
+```
+
+### 强制将 http 重定向到 https
+<!--rehype:wrap-class=col-span-4-->
+
+```nginx
+server {
+  listen       80;
+  server_name  example.com;
+  rewrite ^ https://$http_host$request_uri? permanent; # 强制将 http 重定向到 https
+  # 在错误页面和“服务器”响应头字段中启用或禁用发射nginx版本。 防止黑客利用版本漏洞攻击
+  server_tokens off;
+}
+```
+
+### 代理转发连接替换
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+location ^~/api/upload {
+  rewrite ^/(.*)$ /wfs/v1/upload break;
+  proxy_pass http://wfs-api;
+}
+```
+
+将地址 `/api/upload` 替换为 `/wfs/v1/upload`
+
+### 爬虫 User-Agent 过滤
+<!--rehype:wrap-class=col-span-4-->
+
+```nginx
+location / {
+  if ($http_user_agent ~* "python|curl|java|wget|httpclient|okhttp") {
+      return 503;
+  }
+  # 正常处理
+  # ...
+}
+```
+
+### 图片防盗链
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+location ~* \.(gif|jpg|png|swf|flv)$ {
+  root html;
+
+  valid_referers none blocked *.nginx.com;
+
+  if ($invalid_referer) {
+    rewrite ^/ www.nginx.cn;
+    # return 404;
+  }
+}
+```
+
+### 虚拟目录配置
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+location /img/ {
+  alias /var/www/image/;
+}
+# 访问 /img/ 目录里面的文件时，
+# 会自动去 /var/www/image/ 目录找文件
+location /img/ {
+  root /var/www/image;
+}
+# 访问 /img/ 目录下的文件时，
+# 会去 /var/www/image/img/ 目录下找文件
+```
+
+### 屏蔽文件目录
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+通用备份和归档文件
+
+```nginx
+location ~* "\.(old|orig|original|php#|php~|php_bak|save|swo|aspx?|tpl|sh|bash|bak?|cfg|cgi|dll|exe|git|hg|ini|jsp|log|mdb|out|sql|svn|swp|tar|rdf)$" {
+    deny all;
+}
+```
+<!--rehype:className=wrap-text -->
+
+拒绝访问 `.git` 和 `.svn` 目录
+
+```nginx
+location ~ (.git|.svn) {
+    deny all;
+}
+```
+<!--rehype:className=wrap-text -->
+
+拒绝访问隐藏文件和目录
+
+```nginx
+location ~ /\.(?!well-known\/) {
+    deny all;
+}
+```
+
+### 防盗图配置
+<!--rehype:wrap-class=col-span-4-->
+
+```nginx
+location ~ \/public\/(css|js|img)\/.*\.(js|css|gif|jpg|jpeg|png|bmp|swf) {
+  valid_referers none blocked *.jslite.io;
+  if ($invalid_referer) {
+      rewrite ^/  http://wangchujiang.com/piratesp.png;
+  }
+}
+```
+
+### 阻止常见攻击
+<!--rehype:wrap-class=col-span-2-->
+
+#### base64编码的网址
+
+```nginx
+location ~* "(base64_encode)(.*)(\()" {
+    deny all;
+}
+```
+
+#### javascript eval() url
+
+```nginx
+location ~* "(eval\()" {
+    deny all;
+}
+```
+
+### Gzip 配置
+<!--rehype:wrap-class=col-span-4 row-span-2-->
+
+```nginx
+gzip  on;
+gzip_buffers 16 8k;
+gzip_comp_level 6;
+gzip_http_version 1.1;
+gzip_min_length 256;
+gzip_proxied any;
+gzip_vary on;
+gzip_types
+    text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
+    text/javascript application/javascript application/x-javascript
+    text/x-json application/json application/x-web-app-manifest+json
+    text/css text/plain text/x-component
+    font/opentype application/x-font-ttf application/vnd.ms-fontobject
+    image/x-icon;
+gzip_disable  "msie6";
+```
+
+### 使网站不可索引
+<!--rehype:wrap-class=col-span-2-->
+
+```nginx
+add_header X-Robots-Tag "noindex";
+
+location = /robots.txt {
+  return 200 "User-agent: *\nDisallow: /\n";
+}
+```
+
+另见
+---
+
+- [Nginx 安装维护入门学习笔记](https://jaywcjlove.github.io/nginx-tutorial) _(jaywcjlove.github.io)_
+- [](https://virtubox.github.io/advanced-nginx-cheatsheet/) _(virtubox.github.io)_

docs/npm.md

@@ -21,6 +21,7 @@ npm 备忘清单
 | `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。
 
@@ -40,6 +41,7 @@ npm 备忘清单
 | `npm i /path/to/repo`                | 绝对路径            |
 | `npm i ./archive.tgz`                | 压缩包             |
 | `npm i https://site.com/archive.tgz` | 通过 HTTP 压缩包    |
+<!--rehype:class=auto-wrap-->
 
 ### 清单
 
@@ -49,6 +51,7 @@ npm 备忘清单
 | `npm list -g --depth 0` | 列出所有全局安装包的安装版本 | 
 | `npm view`              | 列出此软件中所有依赖项的最新版本 | 
 | `npm outdated`          | 仅列出此软件中已过时的依赖项  |
+<!--rehype:class=auto-wrap-->
 
 ### 更新
 
@@ -105,7 +108,7 @@ npm access restricted <package-name>
 公开私有包
 
 ```bash
-npm access restricted <package-name>
+npm access public <package-name>
 ```
 
 授予私有包访问权限
@@ -138,6 +141,16 @@ npm unpublish <package-name>@<version>
 
 注意：如果您取消发布整个包，则必须在 24 小时后才能发布该包的任何新版本。
 
+### 发布包 npmjs.org
+
+```bash
+npm publish
+# 第一次需要指定公开参数
+npm publish --access public
+```
+
+发布公开包，到 npmjs.org
+
 配置
 ---
 
@@ -157,7 +170,7 @@ npm unpublish <package-name>@<version>
 ```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) 解析
@@ -180,19 +193,21 @@ npm unpublish <package-name>@<version>
 `.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":{
@@ -200,4 +215,37 @@ registry=https://registry.npmmirror.com
 }
 ```
 
-请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
+替换 npm 仓库地址为 npmmirror(淘宝) 镜像地址
+
+```bash
+npm config set registry https://registry.npmmirror.com
+```
+
+请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
+
+#### electronjs 镜像和缓存
+
+```ini
+ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
+ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
+; ELECTRON_CUSTOM_DIR="{{ version }}"
+```
+<!--rehype:className=wrap-text -->
+
+### 身份验证相关配置
+
+```ini
+//registry.npmjs.org/:_authToken=MYTOKEN
+; 将适用于 @myorg 和 @another
+//somewhere.com/:_authToken=MYTOKEN
+; 将适用于 @myorg
+//somewhere.com/myorg/:_authToken=MYTOKEN1
+; 将适用于 @another
+//somewhere.com/another/:_authToken=MYTOKEN2
+```
+
+另见
+----
+
+- [npm 仓库、网站和命令行界面的文档](https://docs.npmjs.com/) _(npmjs.com)_
+- [npmmirror 中国镜像站](https://npmmirror.com/) _(npmmirror.com)_

docs/package.json.md

@@ -101,7 +101,7 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 
 鼓励使用开源 [(OSI-approved)](https://opensource.org/licenses/alphabetical) 许可证，除非你有特别的原因不用它。 如果你开发的包是你工作的一部分，最好和公司讨论后再做决定。
 
-**license字段必须是以下之一:**
+#### **license字段必须是以下之一**
 
 - 如果你使用标准的许可证，需要一个有效地 [SPDX 许可证标识](https://spdx.org/licenses/)。
 - 如果你用多种标准许可证，需要有效的 [SPDX 许可证表达式2.0语法表达式](https://www.npmjs.com/package/spdx)。
@@ -475,8 +475,19 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 
 这些是只在你的包开发期间需要，但是生产环境不会被安装的包。
 
+### `overrides`
+
+```json
+{
+  "overrides": {
+    "foo": "1.0.0"
+  }
+}
+```
+
+对依赖项的依赖项进行特定更改，例如用已知的安全问题替换依赖项的版本
+
 ### `peerDependencies`
-<!--rehype:wrap-class=col-span-2-->
 
 ```json
 {
@@ -530,6 +541,8 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 }
 ```
 
+它允许对等依赖项标记为可选
+
 系统
 ----
 

docs/quickreference.md

@@ -1,7 +1,7 @@
 Quick Reference 备忘清单
 ===
 
-这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！
+这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与[贡献](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)！
 
 入门
 ---
@@ -51,8 +51,8 @@ HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静
 
 #### 语法
 
-`<!--rehype:` + `key=value` + `&` + `key=value` + `-->`  
-`标识开始`     + `参数`     + `分隔符` + `参数`  + `标识结束`
+`<!--rehype:` _+_ `key=value` _+_ **`&`** _+_ `key=value` _+_ `-->`  
+`标识开始` + `参数` + `分隔符(&)` + `参数`  + `标识结束`
 
 #### 示例
 
@@ -72,7 +72,6 @@ HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静
 ```
 <!--rehype:className=wrap-text -->
 
-
 #### 参数说明
 
 类 | 说明
@@ -142,6 +141,8 @@ export const Student = (
   ```jsx {1,4-5}
 ```
 
+代码行高亮可以和代码行号一起使用。
+
 ### Tooltips
 
 [鼠标移动到上面有提示](https://github.com/jaywcjlove/reference) _Tooltips 的提示内容_<!--rehype:tooltips-->
@@ -180,11 +181,17 @@ export const Student = (
 ### 代码行号
 
 ```jsx showLineNumbers
-export const Student = (
-  <div className="Student"></div>
-);
+export const Student = <div>学生</div>;
+const school = <div>学校</div>;
 ```
 
+下面是 `Markdown` 代码示例
+
+```markdown
+  ```jsx showLineNumbers
+```
+
+标记语言后面添加 `showLineNumbers` 标识
 
 ### 内置类样式
 
@@ -194,6 +201,7 @@ export const Student = (
 `wrap-text` | 超出换行
 `show-header` | 展示表头
 `style-none` | 隐藏 `<ul>` 列表样式
+`style-list` | `<table>` 单元格行展示
 <!--rehype:className=shortcuts-->
 
 ### 颜色标签
@@ -203,9 +211,34 @@ export const Student = (
 `<yel>` | <yel>黄色</yel>
 `<pur>` | <pur>紫色</pur>
 `<code>` 或 <code>\`\`</code> | <code>绿</code>`色`
+`<del>` 或 `~~删除~~` | <del>~~红色~~</del>
 <!--rehype:className=shortcuts-->
 
 
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+
+```
+隐藏卡片标题，在 H3 标题下面添加注释样式
+```
+
+```markdown
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+```
+<!--rehype:className=wrap-text -->
+
+### HTML 代码预览
+
+```
+  ```html preview
+  这里是你的 HTML 代码
+  \```
+```
+
+上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
+
+
 布局
 ---
 
@@ -241,6 +274,7 @@ H2 部分
 `cols-3` | `3` 栏卡片布局
 `cols-4` | `4` 栏卡片布局
 `cols-5` | `5` 栏卡片布局
+`cols-{1~6}` | `1~6` 栏卡片布局
 <!--rehype:className=show-header -->
 
 ### 占位布局 style 写法
@@ -263,7 +297,6 @@ H2 部分
 
 放在 `## H2 部分` 下面的注释配置，与 `<!--rehype:body-class=cols-2-->` 相同，设置 2 栏布局。
 
-
 ### H3 部分
 
 ```markdown
@@ -279,9 +312,11 @@ H2 部分
 `col-span-2` | `2` 列占位
 `col-span-3` | `3` 列占位
 `col-span-4` | `4` 列占位
+`col-span-5` | `5` 列占位
 `row-span-2` | `2` 行占位
 `row-span-3` | `3` 行占位
 `row-span-4` | `4` 行占位
+`row-span-5` | `5` 行占位
 <!--rehype:className=show-header -->
 
 ### 卡片合并行布局 1
@@ -517,16 +552,16 @@ H2 部分
 
 #### Date
 
-|      |      |
-| ---- | ---- |
+:- | :-
+:- | :-
 `%m/%d/%Y` | 06/05/2013
 `%A, %B %e, %Y` | Sunday, June 5, 2013
 `%b %e %a` | Jun 5 Sun
 
 #### Time
 
-|      |      |
-| ---- | ---- |
+:- | :-
+:- | :-
 `%H:%M` | 23:05
 `%I:%M %p` | 11:05 PM
 
@@ -534,8 +569,8 @@ H2 部分
 
 ### 快捷键
 
-|      |      |
-| ---- | ---- |
+:- | :-
+:- | :-
 `V` | Vector
 `P` | Pencil
 `T` | Text
@@ -555,6 +590,39 @@ H2 部分
 
 `<!--rehype:className=show-header-->`
 
+### 列表样式展示表格
+
+:- | :-
+:- | :-
+`visualEffectState.inactive` | 后台应一直显示为非激活状态。
+`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
+`titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
+<!--rehype:className=style-list-->
+
+`<!--rehype:className=style-list-->`
+
+### 列表箭头样式展示表格
+
+:- | :-
+:- | :-
+`visualEffectState.inactive` | 后台应一直显示为非激活状态。
+`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
+`titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
+<!--rehype:className=style-list-arrow-->
+
+`<!--rehype:className=style-list-arrow-->`
+
+### 隐藏表头强制小尺寸自动换行
+
+:- | :-
+:- | :-
+`visualEffectState.inactive` | 后台应一直显示为非激活状态。
+`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
+`titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
+<!--rehype:className=auto-wrap-->
+
+`<!--rehype:className=auto-wrap-->`
+
 列表
 ---
 
@@ -578,6 +646,25 @@ H2 部分
 
 `<!--rehype:className=cols-4-->`
 
+### 列表步骤
+<!--rehype:wrap-class=row-span-2-->
+
+- **重命名为 new_name**
+  ```bash
+  $ git branch -m <new_name>
+  ```
+- 推送和**重置**
+  ```bash
+  $ git push origin -u <new_name>
+  ```
+- 删除远程分支
+  ```bash
+  $ git push origin --delete <old>
+  ```
+<!--rehype:className=style-timeline-->
+
+`<!--rehype:className=style-timeline-->`
+
 ### 没有标记
 
 - Item 1
@@ -586,10 +673,31 @@ H2 部分
 - Item 4
 - Item 5
 - Item 6
+- Item 7
+- Item 8
+- Item 9
 <!--rehype:className=cols-3 style-none-->
 
 `<!--rehype:className=cols-3 style-none-->`
 
+### 圆圈标记
+
+- Item 1
+- Item 2
+- Item 3
+<!--rehype:className=style-round-->
+
+`<!--rehype:className=style-round-->`
+
+### 箭头标记
+
+- Item 1
+- Item 2
+- Item 3
+<!--rehype:className=style-arrow-->
+
+`<!--rehype:className=style-arrow-->`
+
 H2 部分 - 5列效果展示
 ---
 <!--rehype:body-class=cols-5-->

docs/react.md

@@ -12,9 +12,9 @@ React 备忘清单
 React 是一个用于构建用户界面的 JavaScript 库。
 
 - [React 官方文档](https://reactjs.org/) _(reactjs.org)_
+- [Styled Components 备忘清单](./styled-components.md) _(jaywcjlove.github.io)_
 
 ```js
-import React from 'react'
 import {createRoot} from 'react-dom/client'
 import App from './App'
 ```
@@ -46,14 +46,15 @@ import ReactDOM from 'react-dom'
 export class Hello extends Component {
   ...
 }
+export default function World() {
+  /* ... */
+}
 ```
 
-使用 `export` 或者 `export default` 导出 `Hello` 组件
+使用 `export` 导出 **`Hello`**，`export default` 导出 **`World`** 组件
 
 ```jsx
-import { Hello } from './hello.js';
-
-const Example = <Hello />;
+import World, { Hello } from './hello.js';
 ```
 
 使用 `import` 导入 `Hello` 组件，在示例中使用。
@@ -327,7 +328,7 @@ const Student = () => (
 
 从 `v16.2.0` 开始 `Fragment` 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 `<></>` 效果是一样的。
 
-```jsx
+```jsx {2,5}
 const Student = () => (
   <>
     <Avatar src="./demo.jpg" />
@@ -340,7 +341,7 @@ const Student = () => (
 
 ### 返回字符串
 
-```jsx
+```jsx {2}
 render() {
   return 'Look ma, no spans!';
 }
@@ -1011,12 +1012,313 @@ Menu.Item = ({ children }) => (
 <Menu>
 ```
 
-生命周期
----
-
 Hooks
 ---
 
+### Hooks API 参考
+<!--rehype:wrap-class=row-span-2-->
+
+#### 基础 Hook
+
+方法 | 描述
+:- | -
+`useState` | 返回一个 `state`，更新 `state` 的函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate)
+`useEffect` | 可能有副作用代码的函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect)
+`useContext` | 接收并返回该 `context` 的当前值 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext)
+
+#### 额外的 Hook
+
+方法 | 描述
+:- | -
+`useReducer` | `useState` 的替代方案 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate)
+`useCallback` | 返回一个回调函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback)
+`useMemo` | 返回一个 [memoized](https://en.wikipedia.org/wiki/Memoization) 值[#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo)
+`useRef` | 返回一个可变的 `ref` 对象 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useref)
+`useImperativeHandle` | 暴露给父组件的实例值 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle)
+`useLayoutEffect` | DOM 变更后同步调用函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect)
+`useDebugValue` | 开发者工具中显示标签 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue)
+`useDeferredValue` | 接受并返回该值的新副本 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usedeferredvalue)
+`useTransition` | 过渡任务的等待状态 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition)
+`useId` | 用于生成唯一 ID [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useid)
+
+#### Library Hooks
+
+方法 | 描述
+:- | -
+`useSyncExternalStore` | 读取和订阅外部数据源 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore)
+`useInsertionEffect` |  DOM 突变之前 同步触发 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore)
+
+### 函数式更新
+<!--rehype:wrap-class=col-span-2-->
+
+```jsx
+function Counter({ initialCount }) {
+  const [count, setCount] = useState(initialCount);
+  return (
+    <>
+      Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button>
+      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
+    </>
+  );
+}
+```
+
+### useRef
+
+```jsx
+function TextInputWithFocusButton() {
+  const $input = useRef(null);
+  const onButtonClick = () => {
+    $input.current.focus();
+  };
+  return (
+    <>
+      <input ref={$input} type="text" />
+      <button onClick={onButtonClick}>
+        聚焦输入
+      </button>
+    </>
+  );
+}
+```
+
+`current` 指向已挂载到 DOM 上的文本输入元素
+
+### useImperativeHandle
+
+```jsx
+function FancyInput(props, ref) {
+  const inputRef = useRef();
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRef.current.focus();
+    }
+  }));
+  return <input ref={inputRef} />;
+}
+FancyInput = forwardRef(FancyInput);
+```
+
+父组件使用
+
+```jsx
+<FancyInput ref={inputRef} />
+inputRef.current.focus()
+```
+
+### useEffect
+
+```jsx
+useEffect(() => {
+  const subs = props.source.subscribe();
+  return () => {
+    subs.unsubscribe();
+  };
+}, [props.source]);
+```
+
+### useCallback
+
+```jsx
+const memoizedCallback = useCallback(
+  () => {
+    doSomething(a, b);
+  },
+  [a, b],
+);
+```
+
+### useMemo
+
+```jsx
+const memoizedValue = useMemo(
+  () => {
+    return computeExpensiveValue(a, b)
+  },
+  [a, b]
+);
+```
+
+### useId
+
+```jsx
+function Checkbox() {
+  const id = useId();
+  return (
+    <>
+      <label htmlFor={id}>
+        你喜欢React吗？
+      </label>
+      <input id={id} type="checkbox" />
+    </>
+  );
+};
+```
+
+用于生成跨服务端和客户端稳定的唯一 `ID` 的同时避免 `hydration` 不匹配
+
+### useDebugValue
+
+```jsx
+function useFriendStatus(friendID) {
+  const [
+    isOnline, setIsOnline
+  ] = useState(null);
+  // ...
+  // 在开发者工具中的这个 Hook 旁边显示标签
+  // e.g. "FriendStatus: Online"
+  useDebugValue(
+    isOnline ? 'Online' : 'Offline'
+  );
+  return isOnline;
+}
+```
+<!--rehype:className=wrap-text -->
+
+不推荐你向每个自定义 `Hook` 添加 `debug` 值
+
+### componentDidMount & componentWillUnmount
+
+```jsx
+useEffect(
+  () => {
+    // componentDidMount
+    // 组件挂载时，可以在这里完成你的任务
+    return () => {
+      // componentWillUnmount
+      // 卸载时执行，清除 effect
+    };
+  },
+  [ ]
+);
+```
+
+这是一个类似 `class` 组件中 `componentDidMount` & `componentWillUnmount` 两个生命周期函数的写法。
+
+生命周期
+---
+<!--rehype:body-class=cols-2-->
+
+### 挂载
+<!--rehype:wrap-class=row-span-2-->
+
+方法 | 描述
+:- | -
+`constructor` _(props)_  | 渲染前 [#](https://zh-hans.reactjs.org/docs/react-component.html#constructor)
+`static getDerivedStateFromProps()` | 调用 `render` 方法之前调用 [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
+`render()`               |  `class` 组件中唯一必须实现的方法 [#](https://reactjs.org/docs/react-component.html#render)
+`componentDidMount()`    | 在组件挂载后(插入 DOM 树中)立即调用 [#](https://reactjs.org/docs/react-component.html#componentdidmount)
+`UNSAFE_componentWillMount()` | 在挂载之前被调用，建议使用 `constructor()` [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount)
+
+在 `constructor()` 上设置初始状态。在 `componentDidMount()` 上添加 DOM 事件处理程序、计时器（等），然后在 `componentWillUnmount()` 上删除它们。
+
+### 卸载
+
+方法 | 描述
+:- | -
+`componentWillUnmount()` | 在组件卸载及销毁之前直接调用 [#](https://zh-hans.reactjs.org/docs/react-component.html#componentwillunmount)
+
+### 过时 API
+
+过时方法 | 新方法
+:- | -
+~~`componentWillMount()`~~ | `UNSAFE_componentWillMount()`  [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount)
+~~`componentWillReceiveProps()`~~ | `UNSAFE_componentWillReceiveProps()`  [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)
+~~`componentWillUpdate()`~~ | `UNSAFE_componentWillUpdate()`  [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillupdate)
+
+17+ 之后不再支持，在 `17` 版本之后，只有新的 `UNSAFE_` 生命周期名称可以使用。
+
+### 更新
+<!--rehype:wrap-class=col-span-2-->
+
+方法 | 描述
+:- | -
+`static getDerivedStateFromProps(props, state)` | 调用 `render` 之前调用，在初始挂载及后续更新时都会被调用 [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
+`shouldComponentUpdate(nextProps, nextState)` | 如果返回 `false`，则跳过 `render()` [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
+`render()` | 在不修改组件 `state` 的情况下，每次调用时都返回相同的结果 [#](https://zh-hans.reactjs.org/docs/react-component.html#render)
+`getSnapshotBeforeUpdate()` | 在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置） [#](https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate)
+`componentDidUpdate()` | 这里使用 `setState()`，但记得比较 `props`。首次渲染不会执行此方法 [#](https://zh-hans.reactjs.org/docs/react-component.html#componentdidupdate)
+
+### 错误处理
+<!--rehype:wrap-class=col-span-2-->
+
+方法 | 描述
+:- | -
+`static getDerivedStateFromError(error)` | 后代组件抛出错误后被调用，它将抛出的错误作为参数，并返回一个值以更新 `state` [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror)
+`componentDidCatch(error, info)` | 在后代组件抛出错误后被调用，会在“提交”阶段被调用，因此允许执行副作用 [#](https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch)
+
+### render()
+
+```jsx {2}
+class Welcome extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}</h1>;
+  }
+}
+```
+
+### constructor()
+
+```jsx {1}
+constructor(props) {
+  super(props);
+  // 不要在这里调用 this.setState()
+  this.state = { counter: 0 };
+  this.handleClick = this.handleClick.bind(this);
+}
+```
+
+### static getDerivedStateFromError()
+<!--rehype:wrap-class=row-span-2-->
+
+```jsx {7,13}
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // 更新 state 使下一次渲染可以显降级 UI
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // 你可以渲染任何自定义的降级  UI
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+### componentDidUpdate()
+
+```jsx {1}
+componentDidUpdate(prevProps) {
+  // 典型用法（不要忘记比较 props）：
+  if (this.props.uid !== prevProps.uid) {
+    this.fetchData(this.props.uid);
+  }
+}
+```
+
+### getSnapshotBeforeUpdate()
+
+```jsx
+getSnapshotBeforeUpdate(prevProps, prevState) {
+  // 我们是否在 list 中添加新的 items ？
+  // 捕获滚动​​位置以便我们稍后调整滚动位置。
+  if (prevProps.list.length < this.props.list.length) {
+    const list = this.listRef.current;
+    return list.scrollHeight - list.scrollTop;
+  }
+  return null;
+}
+```
 
 PropTypes 属性类型检查
 ---

docs/regex.md

@@ -65,7 +65,7 @@ RegEX 备忘清单
 - \$
 - \\
 - \?
-<!--rehype:className=cols-3-->
+<!--rehype:className=cols-3 style-none-->
 
 使用 `\` 转义这些特殊字符
 
@@ -175,6 +175,33 @@ RegEX 备忘清单
 `(?(?=...)yes\|no)`  | 有条件的前瞻
 `(?(?<=...)yes\|no)` | 有条件的往后看
 
+### 递归
+
+:-|-
+:-|-
+`(?R)`      | 递归整个模式
+`(?1)`      | 递归第一个子模式
+`(?+1)`     | 递归第一个相对子模式
+`(?&name)`  | 递归子模式`name`
+`(?P=name)` | 匹配子模式`name`
+`(?P>name)` | 递归子模式`name`
+
+### 标志/修饰符
+
+:-|-
+:-|-
+`g`   | 全部
+`m`   | 多行
+`i`   | 不区分大小写
+`x`   | 忽略空格
+`s`   | 单线
+`u`   | 统一码
+`X`   | 扩展
+`U`   | 不贪心
+`A`   | 锚
+`J`   | 重复的组名
+`d`   | 结果包含捕获组子字符串开始和结束的索引
+
 ### 零宽度断言
 
 :-|-
@@ -190,34 +217,6 @@ RegEX 备忘清单
 
 零宽度断言 允许您在主模式之前（向后看）或之后（lookahead）匹配一个组，而不会将其包含在结果中。
 
-### 标志/修饰符
-
-:-|-
-:-|-
-`g`   | 全球的
-`m`   | 多行
-`i`   | 不区分大小写
-`x`   | 忽略空格
-`s`   | 单线
-`u`   | 统一码
-`X`   | 扩展
-`U`   | 不贪心
-`A`   | 锚
-`J`   | 重复的组名
-
-
-### 递归
-
-:-|-
-:-|-
-`(?R)`      | 递归整个模式
-`(?1)`      | 递归第一个子模式
-`(?+1)`     | 递归第一个相对子模式
-`(?&name)`  | 递归子模式`name`
-`(?P=name)` | 匹配子模式`name`
-`(?P>name)` | 递归子模式`name`
-
-
 ### POSIX 字符类
 <!--rehype:wrap-class=col-span-2-->
 
@@ -287,6 +286,27 @@ RegEX 备忘清单
 使用 `\` 搜索这些特殊字符：<br> `[ \ ^ $ . | ? * + ( ) { }`
 
 
+### 速记类
+
+范例 | 说明
+:-|-
+`\w            ` | “单词”字符 <br> _(字母、数字或下划线)_ 
+`\d            ` | 数字 
+`\s            ` | 空格 <br> _(空格、制表符、vtab、换行符)_ 
+`\W, \D, or \S ` | 不是单词、数字或空格 
+`[\D\S]        ` | 表示不是数字或空格，两者都匹配 
+`[^\d\s]       ` | 禁止数字和空格 
+
+### 出现次数
+
+范例 | 说明
+:-|-
+`colou?r`           | 匹配 <yel>color</yel> 或 <yel>color</yel>
+`[BW]ill[ieamy's]*` | 匹配 <yel>Bill</yel>、<yel>Willy</yel>、<yel>William's</yel> 等。
+`[a-zA-Z]+`         | 匹配 1 个或多个字母
+`\d{3}-\d{2}-\d{4}` | 匹配 SSN
+`[a-z]\w{1,7}`      | 匹配 UW NetID
+
 ### 备择方案
 
 范例 | 说明
@@ -309,28 +329,6 @@ RegEX 备忘清单
 
 在 `[ ]` 中总是转义 `. \ ]` 有时是 `^ - .`
 
-
-### 速记类
-
-范例 | 说明
-:-|-
-`\w            ` | “单词”字符 <br> _(字母、数字或下划线)_ 
-`\d            ` | 数字 
-`\s            ` | 空格 <br> _(空格、制表符、vtab、换行符)_ 
-`\W, \D, or \S ` | 不是单词、数字或空格 
-`[\D\S]        ` | 表示不是数字或空格，两者都匹配 
-`[^\d\s]       ` | 禁止数字和空格 
-
-### 出现次数
-
-范例 | 说明
-:-|-
-`colou?r`           | 匹配 <yel>color</yel> 或 <yel>color</yel>
-`[BW]ill[ieamy's]*` | 匹配 <yel>Bill</yel>、<yel>Willy</yel>、<yel>William's</yel> 等。
-`[a-zA-Z]+`         | 匹配 1 个或多个字母
-`\d{3}-\d{2}-\d{4}` | 匹配 SSN
-`[a-z]\w{1,7}`      | 匹配 UW NetID
-
 ### 贪婪与懒惰
 
 范例 | 说明
@@ -340,7 +338,6 @@ RegEX 备忘清单
 `*?  +? {n,}?`<br>_lazy_ | 尽可能少匹配
 `<.+?>`                  | 在 \<<yel>b</yel>>bold\<<yel>\/b</yel>> 中找到 2 个匹配项
 
-
 ### 范围
 <!--rehype:wrap-class=col-span-2-->
 
@@ -370,7 +367,6 @@ RegEX 备忘清单
 `(?-x)`             | 自由空间模式关闭
 /regex/`ismx`       | 修改整个字符串的模式
 
-
 ### 组
 
 范例 | 说明
@@ -394,7 +390,7 @@ RegEX 备忘清单
 
 范例 | 说明
 :-|-
-`on(?:click\|load)` | 快于：<br>`on(click\|load)`
+`on(?:click\|load)` | 快于：`on(click\|load)`
 
 尽可能使用非捕获或原子组
 
@@ -543,8 +539,11 @@ M(?(?=.*?\bher\b)s|r)\.
 如果想要匹配句子中的 `.` 则要写成 `\.` 以下这个例子 `\.?` 是选择性匹配.
 
 ### 锚点
+<!--rehype:wrap-class=row-span-2-->
 
-#### `^` 号
+匹配指定开头或结尾的字符串就要使用到锚点。
+
+#### `^` 号 (符串的开头)
 
 表达式 | 匹配示例
 :- | -
@@ -552,32 +551,32 @@ M(?(?=.*?\bher\b)s|r)\.
 `^(T\|t)he` | `The` car is parked in the garage.
 <!--rehype:className=show-header-->
 
-#### `$` 号
+#### `$` 号 (否是最后一个)
 
 表达式 | 匹配示例
 :- | -
 `(at\.)` | The fat c`at.` s`at.` on the m`at.`
-`(at\.)$` | The fat cat. sat. on the m`at`.
+`(at\.)$` | The fat cat. sat. on the m`at.`
 <!--rehype:className=show-header-->
 
 ### 简写字符集
-<!--rehype:wrap-class=row-span-3-->
+<!--rehype:wrap-class=row-span-4-->
 
 |简写|描述|
 |:----:|----|
 |`.`|除换行符外的所有字符|
-|`\w`|匹配所有字母数字，等同于 `[a-zA-Z0-9_]`|
-|`\W`|匹配所有非字母数字，即符号，等同于： `[^\w]`|
+|`\w`|匹配所有字母数字<br />等同于 `[a-zA-Z0-9_]`|
+|`\W`|匹配所有非字母数字，即符号<br />等同于： `[^\w]`|
 |`\d`|匹配数字： `[0-9]`|
 |`\D`|匹配非数字： `[^\d]`|
-|`\s`|匹配所有空格字符，等同于： `[\t\n\f\r\p{Z}]`|
+|`\s`|匹配所有空格字符<br />等同于：`[\t\n\f\r\p{Z}]`|
 |`\S`|匹配所有非空格字符： `[^\s]`|
 |`\f`|匹配一个换页符|
 |`\n`|匹配一个换行符|
 |`\r`|匹配一个回车符|
 |`\t`|匹配一个制表符|
 |`\v`|匹配一个垂直制表符|
-|`\p`|匹配 CR/LF（等同于 `\r\n`），用来匹配 DOS 行终止符|
+|`\p`|匹配 CR/LF(等同于 `\r\n`)<br />用来匹配 DOS 行终止符|
 <!--rehype:className=show-header-->
 
 正则表达式提供一些常用的字符集简写。
@@ -756,6 +755,38 @@ False
 JavaScript 中的正则表达式
 ---------------
 
+### RegExp
+<!--rehype:wrap-class=row-span-4-->
+
+#### 属性
+
+:- | :-
+:- | :-
+`dotAll` | 是否使用了 `s` 修饰符
+`flags` | 返回标志的字符串
+`global` | 是否使用了 `g` (全部)修饰符
+`hasIndices` | 是否使用了 `d` 修饰符
+`ignoreCase` | 匹配文本的时候是否忽略大小写 `i`
+`multiline` | 是否进行多行搜索 `m`
+`lastIndex` | 该索引表示从哪里开始下一个匹配
+`source` | 正则表达式的文本
+`sticky` | 搜索是否是 sticky
+`unicode` | Unicode 功能是否开启
+
+#### 方法
+
+:- | :-
+:- | :-
+`match()` | 获取匹配结果
+`matchAll()` | 所有匹配项
+`replace()` | 替换所有符合正则模式的匹配项
+`search()` | 搜索以取得匹配正则模式的项
+`split()` | 切割字符串返回字符串数组
+~~`compile()`~~ | （重新）编译正则表达式
+`exec()` | 指定字符串中执行一个搜索匹配
+`test()` | 正则表达式与指定的字符串是否匹配
+`toString()` | 返回该正则表达式的字符串
+
 ### test()
 
 ```javascript
@@ -763,11 +794,8 @@ let textA = 'I like APPles very much';
 let textB = 'I like APPles';
 let regex = /apples$/i
  
-// Output: false
-console.log(regex.test(textA));
- 
-// Output: true
-console.log(regex.test(textB));
+console.log(regex.test(textA)); // false
+console.log(regex.test(textB)); // true
 ```
 
 ### search()
@@ -776,29 +804,22 @@ console.log(regex.test(textB));
 let text = 'I like APPles very much';
 let regexA = /apples/;
 let regexB = /apples/i;
- 
-// Output: -1
-console.log(text.search(regexA));
- 
-// Output: 7
-console.log(text.search(regexB));
-```
 
+console.log(text.search(regexA)); // -1
+console.log(text.search(regexB)); // 7
+```
 
 ### exec()
 
 ```javascript
 let text = 'Do you like apples?';
 let regex= /apples/;
- 
 // Output: apples
 console.log(regex.exec(text)[0]);
- 
 // Output: Do you like apples?
 console.log(regex.exec(text).input);
 ```
 
-
 ### match()
 
 ```javascript
@@ -809,7 +830,6 @@ let regex = /apples/gi;
 console.log(text.match(regex));
 ```
 
-
 ### split() 
 <!--rehype:wrap-class=col-span-2-->
 
@@ -844,15 +864,33 @@ let result = text.replace(regex, 'mangoes');
 console.log(result);
 ```
 
+### 属性示例
+
+```javascript
+/d/s.dotAll;             // => true
+/d/g.global;             // => true
+/d/ig.flags;             // => "gi"
+/d/d.hasIndices;         // => true
+/d/i.ignoreCase;         // => true
+```
+
+### 多行文本中使用正则表达式
+
+```js
+let s = "Please yes\nmake my day!";
+
+s.match(/yes[^]*day/);
+// 返回 'yes\nmake my day'
+```
 
 ### replaceAll()
 
 ```javascript
 let regex = /apples/gi;
 let text = 'Here are apples and apPleS';
-// Output: Here are mangoes and mangoes
-let result = text.replaceAll(regex, "mangoes");
-console.log(result);
+
+text.replaceAll(regex, "mangoes");
+// 返回: Here are mangoes and mangoes
 ```
 <!--rehype:className=wrap-text-->
 
@@ -879,6 +917,7 @@ PHP中的正则表达式
 ```php
 $str = "Visit Microsoft!";
 $regex = "/microsoft/i";
+
 // Output: Visit QuickRef!
 echo preg_replace($regex, "QuickRef", $str); 
 ```

docs/resolutions.md

@@ -0,0 +1,278 @@
+Resolutions 备忘清单
+===
+
+此备忘清单列出了流行手机、平板电脑、笔记本电脑和手表的屏幕尺寸、可视窗口尺寸和 CSS 媒体查询
+
+入门
+------
+
+### 介绍
+<!--rehype:style=display:none;&wrap-style=padding-top:0;&wrap-class=col-span-3-->
+
+- 分辨率是像素数（单个颜色点）
+- 可视窗口由屏幕上网页填充的矩形大小定义
+- 屏幕分辨率是指屏幕上显示的文本和图像的清晰度
+- 用于设计
+<!--rehype:className=style-round-->
+
+解析度清单列表
+------
+
+### 手机
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| Apple iPhone 11 (2019)             | 6.1 <sub>inch</sub>  | 828 x 1792 <sub>px</sub>  | 414 x 896 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | iOS 13.0      |
+| Apple iPhone 11 Pro (2019)         | 5.8 <sub>inch</sub>  | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 13.0      |
+| Apple iPhone 11 Pro Max (2019)     | 6.5 <sub>inch</sub>  | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 13.0      |
+| Apple iPhone 12 (2020)             | 6.1 <sub>inch</sub>  | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub>  | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 12 Pro (2020)         | 6.1 <sub>inch</sub>  | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub>  | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 12 Pro Max (2020)     | 6.7 <sub>inch</sub>  | 1284 x 2778 <sub>px</sub> | 428 x 926 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 12 mini (2020)        | 5.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 476 <sub>ppi</sub> | 159 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | iOS 14.1      |
+| Apple iPhone 5                     | 4 <sub>inch</sub>    | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 6         |
+| Apple iPhone 5c                    | 4 <sub>inch</sub>    | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 7         |
+| Apple iPhone 5s                    | 4 <sub>inch</sub>    | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 7         |
+| Apple iPhone 6                     | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 8         |
+| Apple iPhone 6s                    | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 9         |
+| Apple iPhone 6s Plus               | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 9         |
+| Apple iPhone 7                     | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 10.0.1    |
+| Apple iPhone 7 Plus                | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 10.0.1    |
+| Apple iPhone 8                     | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 11        |
+| Apple iPhone 8 Plus                | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 11        |
+| Apple iPhone SE                    | 4.0 <sub>inch</sub>  | 640 x 1136 <sub>px</sub>  | 320 x 568 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | iOS 9.3.2     |
+| Apple iPhone SE (2020)             | 4.7 <sub>inch</sub>  | 750 x 1334 <sub>px</sub>  | 375 x 667 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | iOS 13.0      |
+| Apple iPhone X                     | 5.8 <sub>inch</sub>  | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 11.1.1    |
+| Apple iPhone XR                    | 6.1 <sub>inch</sub>  | 828 x 1792 <sub>px</sub>  | 414 x 896 <sub>px</sub>  | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | iOS 12        |
+| Apple iPhone XS                    | 5.8 <sub>inch</sub>  | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 12        |
+| Apple iPhone XS Max                | 6.5 <sub>inch</sub>  | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub>  | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | iOS 12        |
+| Google Pixel                       | 5.0 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub>  | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.1   |
+| Google Pixel                       | 5.0 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 411 x 731 <sub>px</sub>  | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.6 <sub>xxhdpi</sub>   | Android 7.1   |
+| Google Pixel 2                     | 5.0 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub>  | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.0   |
+| Google Pixel 2 XL                  | 6.0 <sub>inch</sub>  | 1440 x 2880 <sub>px</sub> |                          | 538 <sub>ppi</sub> | 154 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 8.0   |
+| Google Pixel 3 (2018)              | 5.5 <sub>inch</sub>  | 1080 x 2160 <sub>px</sub> | 393 x 786 <sub>px</sub>  | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Google Pixel 3 XL (2018)           | 6.3 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> | 412 x 846 <sub>px</sub>  | 523 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| Google Pixel 3a (2019)             | 5.6 <sub>inch</sub>  | 1080 x 2220 <sub>px</sub> | 393 x 808 <sub>px</sub>  | 441 <sub>ppi</sub> | 160 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Google Pixel 3a XL (2019)          | 6 <sub>inch</sub>    | 1080 x 2160 <sub>px</sub> | 412 x 823 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Google Pixel 4 (2019)              | 5.7 <sub>inch</sub>  | 1080 x 2280 <sub>px</sub> | 393 x 830 <sub>px</sub>  | 444 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 10.0  |
+| Google Pixel 4 XL (2019)           | 6.3 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 537 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10    |
+| Google Pixel 4a (2020)             | 5.81 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 10.0  |
+| Google Pixel 5 (2020)              | 6 <sub>inch</sub>    | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 432 <sub>ppi</sub> | 157 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 11.0  |
+| Google Pixel XL                    | 5.5 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> |                          | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 7.1   |
+| HTC Desire 10 Lifestyle            | 5.5 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  | 360 x 640 <sub>px</sub>  | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 6.0   |
+| HTC Desire 628                     | 5.0 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  | 360 x 640 <sub>px</sub>  | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 5.1   |
+| Honor 6X (2016)                    | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 403 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 6.0   |
+| Honor 7X (2017)                    | 5.93 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub>  | 407 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 7.0   |
+| Honor 8X (2018)                    | 6.5 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 397 <sub>ppi</sub> | 132 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 8.1   |
+| Honor 9X (2019)                    | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 9.0   |
+| Huawei Mate 10 Lite (2017)         | 5.9 <sub>inch</sub>  | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub>  | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 7.0   |
+| Huawei Mate 20 Lite (2018)         | 6.3 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 8.1   |
+| Huawei Mate 20 Pro (2018)          | 6.39 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 538 <sub>ppi</sub> | 135 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 9.0   |
+| Huawei Mate 30 (2019)              | 6.62 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 389 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 10.0  |
+| Huawei Mate 30 Pro (2019)          | 6.53 <sub>inch</sub> | 1176 x 2400 <sub>px</sub> | 392 x 800 <sub>px</sub>  | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 10.0  |
+| Huawei Nova 7i (2020)              | 6.4 <sub>inch</sub>  | 1080 x 2310 <sub>px</sub> | 360 x 770 <sub>px</sub>  | 398 <sub>ppi</sub> | 133 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 10.0  |
+| Huawei Y9 Prime (2019)             | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 9.0   |
+| Huawei Y9s (2019)                  | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub>  | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 9.0   |
+| LG G5                              | 5.3 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 554 <sub>ppi</sub> | 139 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 6.0.1 |
+| Motorola Moto E5 Plus              | 6.0 <sub>inch</sub>  | 720 x 1440 <sub>px</sub>  |                          | 268 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 8.0   |
+| OnePlus 6                          | 6.28 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.1   |
+| OnePlus 6T                         | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| OnePlus 7                          | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| OnePlus 7 Pro                      | 6.67 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 516 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| OnePlus 7T (2019)                  | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| OnePlus 8 (2020)                   | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| OnePlus 8 Pro (2020)               | 6.78 <sub>inch</sub> | 1440 x 3168 <sub>px</sub> | 412 x 906 <sub>px</sub>  | 513 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10.0  |
+| OnePlus 8T (2020)                  | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 11.0  |
+| OnePlus Nord (2020)                | 6.44 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 408 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Redmi Note 9 Pro (2020)            | 6.67 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 393 x 873 <sub>px</sub>  | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 10.0  |
+| Samsung A50 (2019)                 | 6.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A30 (2019)          | 6.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A50s (2019)         | 6.4 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub>  | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A51 (2019)          | 6.5 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 405 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy A6s                 | 6.0 <sub>inch</sub>  | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub>  | 402 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android  8.0  |
+| Samsung Galaxy A70s (2019)         | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Galaxy A71 (2020)          | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy Fold (2019)         | 7.3 <sub>inch</sub>  | 1536 x 2152 <sub>px</sub> | 768 x 1076 <sub>px</sub> | 362 <sub>ppi</sub> | 181 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 9.0   |
+| Samsung Galaxy J4                  | 5.5 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  |                          |                    | 134 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 8.0   |
+| Samsung Galaxy J5                  | 5.0 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  |                          | 294 <sub>ppi</sub> |                    | 2 <sub>xhdpi</sub>      | Android 5.1   |
+| Samsung Galaxy J5 Prime            | 5.0 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  |                          | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 6.0.1 |
+| Samsung Galaxy J6                  | 5.6 <sub>inch</sub>  | 720 x 1480 <sub>px</sub>  |                          | 293 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 8.0   |
+| Samsung Galaxy J7                  | 5.5 <sub>inch</sub>  | 720 x 1280 <sub>px</sub>  | 360 x 640 <sub>px</sub>  | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub>    | Android 6.0.1 |
+| Samsung Galaxy J7 Prime            | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Samsung Galaxy J7 Prime2 (2018)    | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub>  | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.0   |
+| Samsung Galaxy J7 Pro              | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> |                          | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub>     | Android 7.0   |
+| Samsung Galaxy J8                  | 6.0 <sub>inch</sub>  | 720 x 1480 <sub>px</sub>  |                          | 274 <sub>ppi</sub> | 137 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 8.0   |
+| Samsung Galaxy Note20 (2020)       | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy Note20 Ultra (2020) | 6.9 <sub>inch</sub>  | 1440 x 3088 <sub>px</sub> | 412 x 883 <sub>px</sub>  | 496 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10.0  |
+| Samsung Galaxy Note8               | 6.3 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> |                          | 521 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 7.1.1 |
+| Samsung Galaxy On8                 | 5.5 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Samsung Galaxy S10                 | 6.1 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 360 x 760 <sub>px</sub>  | 550 <sub>ppi</sub> | 138 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 9.0   |
+| Samsung Galaxy S10 Lite (2020)     | 6.7 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 394 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy S10+                | 6.4 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 522 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| Samsung Galaxy S20 (2020)          | 6.4 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 360 x 800 <sub>px</sub>  | 563 <sub>ppi</sub> | 141 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 10.0  |
+| Samsung Galaxy S20 FE (2020)       | 6.5 <sub>inch</sub>  | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub>  | 407 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy S20 Ultra (2020)    | 6.9 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 412 x 915 <sub>px</sub>  | 511 <sub>ppi</sub> | 146 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 10.0  |
+| Samsung Galaxy S20+ (2020)         | 6.7 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub>  | 525 <sub>ppi</sub> | 140 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy S21 Ultra (2021)    | 6.8 <sub>inch</sub>  | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub>  | 515 <sub>ppi</sub> | 137 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 11.0  |
+| Samsung Galaxy S8                  | 5.8 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub>  | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 7.0   |
+| Samsung Galaxy S8+                 | 6.2 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> |                          | 529 <sub>ppi</sub> | 132 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 7.0   |
+| Samsung Galaxy S9                  | 5.8 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub>  | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 8.0   |
+| Samsung Galaxy S9+                 | 6.2 <sub>inch</sub>  | 1440 x 2960 <sub>px</sub> |                          | 529 <sub>ppi</sub> | 151 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub>    | Android 8.0   |
+| Samsung Galaxy Z Flip (2020)       | 6.7 <sub>inch</sub>  | 1080 x 2636 <sub>px</sub> | 412 x 1004 <sub>px</sub> | 425 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0  |
+| Samsung Galaxy Z Fold2 (2020)      | 7.6 <sub>inch</sub>  | 1768 x 2208 <sub>px</sub> | 884 x 1104 <sub>px</sub> | 373 <sub>ppi</sub> | 187 <sub>ppi</sub> | 2 <sub>xhdpi</sub>      | Android 10.0  |
+| Samsung Note10 (2019)              | 6.3 <sub>inch</sub>  | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0   |
+| Samsung Note10+ (2019)             | 6.8 <sub>inch</sub>  | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub>  | 498 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub>  | Android 9.0   |
+| Samsung S6                         | 5.1 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 5.0.2 |
+| Samsung S6 edge                    | 5.1 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 5.0.2 |
+| Samsung S7                         | 5.1 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 6.0   |
+| Samsung S7 edge                    | 5.5 <sub>inch</sub>  | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub>  | Android 6.0   |
+| Sony Xperia X                      | 5 <sub>inch</sub>    | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 441 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Sony Xperia XZ                     | 5.2 <sub>inch</sub>  | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub>  | 424 <sub>ppi</sub> | 141 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub>   | Android 6.0.1 |
+| Xiaomi Redmi Note 7 (2019)         | 6.3 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Xiaomi Redmi Note 8 (2019)         | 6.3 <sub>inch</sub>  | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+| Xiaomi Redmi Note 8 Pro (2019)     | 6.53 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub>  | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub>  | Android 9.0   |
+<!--rehype:className=show-header-->
+
+
+### 平板
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| Apple iPad 10.2" (2019)     | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad 10.2" (2020)     | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  14     |
+| Apple iPad Air              | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7          |
+| Apple iPad Air 10.5" (2019) | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Air 10.9" (2020) | 10.9 <sub>inch</sub> | 1640 x 2360 <sub>px</sub> | 820 x 1180 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  14     |
+| Apple iPad Air 2            | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1        |
+| Apple iPad Mini 7.9" (2019) | 7.9 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Pro              | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9          |
+| Apple iPad Pro 10.5 (2017)  | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 11         |
+| Apple iPad Pro 11" (2018)   | 11 <sub>inch</sub>   | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Pro 11" (2020)   | 11 <sub>inch</sub>   | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.4   |
+| Apple iPad Pro 12.9" (2018) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.1.2 |
+| Apple iPad Pro 12.9" (2020) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | iPadOS  13.4   |
+| Apple iPad Pro 9.7          | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9.3.2      |
+| Apple iPad Pro 9.7 (2017)   | 9.7 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 10.3       |
+| Apple iPad mini 3           | 7.9 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 324 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9          |
+| Apple iPad mini 4           | 7.9 <sub>inch</sub>  | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub>  | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1        |
+| Google Pixel C (2015)       | 10.2 <sub>inch</sub> | 2560x1800 <sub>px</sub>   | 1280 x 900 <sub>px</sub>  | 308 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | Android 6.0.1  |
+<!--rehype:className=show-header-->
+
+
+### 笔记本电脑
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| MacBook 2015 12"     | 12 <sub>inch</sub>   | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook 2016 12"     | 12 <sub>inch</sub>   | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook 2017 12"     | 12 <sub>inch</sub>   | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Air 2014 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub>  | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | OS X Mavericks  |
+| MacBook Air 2014 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub>  | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | OS X Mavericks  |
+| MacBook Air 2015 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub>  | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | OS X El Capitan |
+| MacBook Air 2015 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub>  | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | macOS Sierra    |
+| MacBook Air 2017 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub>  | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub>  | macOS Mojave    |
+| MacBook Air 2018 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave    |
+| MacBook Air 2020 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 114 <sub>ppi</sub> | 2 <sub>xhdpi</sub>   | macOS Catalina  |
+| MacBook Pro 13" 2018 | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave    |
+| MacBook Pro 15" 2018 | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave    |
+| MacBook Pro 16" 2019 | 16 <sub>inch</sub>   | 3072 x 1920 <sub>px</sub> | 1536 x 960 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Catalina  |
+| MacBook Pro 2014 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2014 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2015 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2015 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2016 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2016 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2017 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+| MacBook Pro 2017 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra    |
+<!--rehype:className=show-header-->
+
+### 智能手表
+<!--rehype:wrap-class=col-span-3-->
+
+| 设备                  | 屏幕尺寸              | 解析度                     | 可视窗口                  | 密度                | 设备密度             | 比率                 | 系统             |
+|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
+| Apple Watch SE (40mm) (2020)        | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Apple Watch SE (44mm) (2020)        | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Apple Watch Series 3 (38mm)         | 1.5 <sub>inch</sub>  | 340 x 272 <sub>px</sub> | 170 x 136 <sub>px</sub> | 290 <sub>ppi</sub> | 145 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 4.0                      |
+| Apple Watch Series 3 (42mm)         | 1.65 <sub>inch</sub> | 390 x 312 <sub>px</sub> | 195 x 156 <sub>px</sub> | 303 <sub>ppi</sub> | 152 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 4.0                      |
+| Apple Watch Series 4 (40mm)         | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 5.0                      |
+| Apple Watch Series 4 (44mm)         | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 5.0                      |
+| Apple Watch Series 5 (40mm)  (2019) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 6.0                      |
+| Apple Watch Series 5 (44mm)  (2019) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 6.0                      |
+| Apple Watch Series 6 (40mm)  (2020) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Apple Watch Series 6 (44mm)  (2020) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | watchOS 7.0                      |
+| Asus Zenwatch 2 (2015)              | 1.63 <sub>inch</sub> | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> |                                  |
+| Asus Zenwatch 3 (2016)              | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1              |
+| Asus Zenwatch 3 (2016)              | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1              |
+| Huawei Watch GT (2018)              | 1.39 <sub>inch</sub> | 454 x 454 <sub>px</sub> | 227 x 227 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  |                                  |
+| Huawei Watch Magic (2018)           | 1.2 <sub>inch</sub>  | 390 x 390 <sub>px</sub> | 195 x 195 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  |                                  |
+| LG G Watch R (2015)                 | 1.3 <sub>inch</sub>  | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 245 <sub>ppi</sub> | 163 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 1.0              |
+| LG Watch Sport (2017)               | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | Android Wear 2.0                 |
+| LG Watch Urbane 2nd Edition (2016)  | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub>  | Android Wear 2.0                 |
+| LG Watch W7 (2018)                  | 1.2 <sub>inch</sub>  | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 300 <sub>ppi</sub> | 200 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.0              |
+| Samsung Galaxy Watch (2018)         | 1.3 <sub>inch</sub>  | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Tizen-based <br/>wearable OS 4.0 |
+<!--rehype:className=show-header-->
+
+### 常见的显示分辨率（N/A = 不适用）
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+标准 | 纵横比 | 可视窗口 | 百万像素 | Steam(%) | Stat Counter(%)
+:- |:- |:- |:- |:- |:- |
+`nHD` | 16:9 | 640 x 360 <sub>px</sub> | 0.230 | N/A | 0.47
+`SVGA` | 4:3 | 800 x 600 <sub>px</sub> | 0.480 | N/A | 0.76
+`XGA` | 4:3 | 1024 x 768 <sub>px</sub> | 0.786 | 0.38 | 2.78
+`WXGA` | 16:9 | 1280 x 720 <sub>px</sub> | 0.922 | 0.36 | 4.82
+`WXGA` | 16:10 | 1280 x 800 <sub>px</sub> | 1.024 | 0.61 | 3.08
+`SXGA` | 5:4 | 1280 x 1024 <sub>px</sub> | 1.311 | 1.24 | 2.47
+`HD` | ≈16:9 | 1360 x 768 <sub>px</sub> | 1.044 | 1.55 | 1.38
+`HD` | ≈16:9 | 1366 x 768 <sub>px</sub> | 1.049 | 10.22 | 23.26
+`WXGA+` | 16:10 | 1440 x 900 <sub>px</sub> | 1.296 | 3.12 | 6.98
+N/A | 16:9 | 1536 x 864 <sub>px</sub> | 1.327 | N/A | 8.5
+`HD+` | 16:9 | 1600 x 900 <sub>px</sub> | 1.440 | 2.59 | 4.14
+`WSXGA+` | 16:10 | 1680 x 1050 <sub>px</sub> | 1.764 | 1.97 | 2.23
+`FHD` | 16:9 | 1920 x 1080 <sub>px</sub> | 2.074 | 64.81 | 20.41
+`WUXGA` | 16:10 | 1920 x 1200 <sub>px</sub> | 2.304 | 0.81 | 0.93
+`QWXGA` | 16:9 | 2048 x 1152 <sub>px</sub> | 2.359 | N/A | 0.51 
+`QXGA` |  4:3 | 2048 x 1536 <sub>px</sub> | 3.145 | - | -
+`UWFHD` | ≈21:9 | 2560 x 1080 <sub>px</sub> | 2.765 | 1.13 | N/A 
+`QHD` | 16:9 | 2560 x 1440 <sub>px</sub> | 3.686 | 6.23 | 2.15 
+`WQXGA` | 16:10 | 2560 x 1600 <sub>px</sub> | 4.096 | &lt;0.58 | &lt;2.4 
+`UWQHD` | ≈21:9 | 3440 x 1440 <sub>px</sub> | 4.954 | 0.87 | N/A 
+`4K UHD`| 16:9 | 3840 x 2160 <sub>px</sub> | 8.294 | 2.12 | N/A 
+`Other` | - | - | - | 2.00 | 15.09
+<!--rehype:className=show-header-->
+
+### 屏幕分辨率
+
+解析度 | 像素
+:- |:- 
+`540p / qHD` | 960×540<sub>px</sub>
+`720p / HD` | 1280×720<sub>px</sub>
+`1080p / Full HD / FHD` | 19201080<sub>px</sub>
+`2K` | 2048×1080<sub>px</sub>
+`1440p / QHD / QuadHD / WQHD` | 2560×1440<sub>px</sub>
+`2160p / UHD` | 3840×2160<sub>px</sub>
+`4K` | 4096×2160<sub>px</sub>
+`5K` | 5120×2880<sub>px</sub>
+`8K / 8K UHD` | 7680×4320<sub>px</sub>
+
+### 显示分辨率和用例
+
+解析度名称 | 设备
+:- |:-
+`8K` _(8K UHD)_ | `TVs`
+`“Cinema” 4K` _(4K)_ | 投影仪
+`UHD` _(4K, Ultra HD, Ultra-High Definition)_ | `TVs`, 监视器, 智能手机
+`2K` _(none)_ | 投影仪
+`WUXGA` _(Widescreen Ultra Extended Graphics Array)_ | 监视器, 投影仪
+`1080p` _(Full HD, FHD, HD, High Definition)_ | `TVs`, 监视器, 智能手机
+`720p` _(HD, High Definition)_ `TVs`, 智能手机
+<!--rehype:className=style-list-arrow-->
+
+另见
+---
+
+- [通用解析度列表](https://en.wikipedia.org/wiki/List_of_common_resolutions) _(en.wikipedia.org)_
+- [显示屏分辨率](https://en.wikipedia.org/wiki/Display_resolution) _(en.wikipedia.org)_

docs/sass.md

@@ -0,0 +1,620 @@
+Sass
+===
+
+这是一份快速参考备忘单，列出了 [SASS](https://sass-lang.com) 最有用的功能。
+
+Sass 基础
+--------
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
+- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_
+
+Sass 是一种 CSS 的预编译语言
+
+```bash
+$ npm install -g sass
+```
+
+在 Node.js 环境中使用 Sass
+
+```bash
+$ sass source/index.scss build/index.css
+$ sass --watch input.scss output.css
+$ sass --watch app/sass:public/css
+```
+
+### 变量
+
+```scss
+$defaultLinkColor: #46EAC2;
+a {
+  color: $defaultLinkColor;
+}
+```
+
+### 字符串插值
+
+```scss
+$wk: -webkit-;
+.rounded-box {
+  #{$wk}border-radius: 4px;
+}
+```
+
+### 注释
+
+```scss
+/*
+ 这是多行注释
+ 块注释
+ 块注释
+*/
+// 这是一条单行注释
+```
+
+### Extend
+
+```scss
+.button {
+  ···
+}
+.push-button {
+  @extend .button;
+}
+```
+
+### 嵌套(Nesting)
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+nav {
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+  li { display: inline-block; }
+  a {
+    display: block;
+  }
+}
+```
+
+编译 css 为：
+
+```scss
+nav ul {
+  padding: 0;
+  list-style: none;
+}
+nav li {
+  display: inline-block;
+}
+nav a {
+  display: block;
+}
+```
+
+### 模块（片段）
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+// _base.scss
+$font-stack:    Helvetica, sans-serif;
+$primary-color: #333;
+```
+
+注意以下划线开头的 Sass 文件
+
+```scss
+// styles.scss
+@use 'base';
+
+.inverse {
+  background-color: base.$primary-color;
+  color: white;
+}
+```
+
+编译 css 为：
+
+```css
+.inverse {
+  background-color: #333;
+  color: white;
+}
+```
+
+### 混合(Mixins)
+
+```scss
+@mixin heading-font {
+    font-family: sans-serif;
+    font-weight: bold;
+}
+h1 {
+    @include heading-font;
+}
+```
+
+查看: [混合(Mixins)](#sass-混合mixins)
+
+### @import
+
+```scss
+@import './other_sass_file';
+@import '/code', 'lists';
+// 纯 CSS @imports
+@import "theme.css";
+@import url(theme);
+```
+
+`.sass` 或 `.sass` 扩展名是可选的。
+
+Sass 混合(Mixins)
+------
+
+
+### 参数
+
+```scss
+@mixin font-size($n) {
+  font-size: $n * 1.2em;
+}
+```
+
+----
+
+```scss
+body {
+  @include font-size(2);
+}
+```
+
+### 默认值
+
+```scss
+@mixin pad($n: 10px) {
+    padding: $n;
+}
+```
+
+----
+
+```scss
+body {
+    @include pad(15px);
+}
+```
+
+### 默认变量
+
+```scss
+$default-padding: 10px;
+@mixin pad($n: $default-padding) {
+  padding: $n;
+}
+body {
+  @include pad(15px);
+}
+```
+
+Sass 颜色函数
+--------
+<!--rehype:body-class=cols-2-->
+
+### rgba
+
+```scss
+rgb(100, 120, 140)
+rgba(100, 120, 140, .5)
+rgba($color, .5)
+```
+
+### Mixing
+
+```scss
+mix($a, $b, 10%)   // 10% a, 90% b
+```
+
+### 修改 HSLA
+
+```scss
+darken($color, 5%)
+lighten($color, 5%)
+```
+
+```scss
+saturate($color, 5%)
+desaturate($color, 5%)
+grayscale($color)
+```
+
+```scss
+adjust-hue($color, 15deg)
+complement($color)    // like adjust-hue(_, 180deg)
+invert($color)
+```
+
+```scss
+fade-in($color, .5)   // aka opacify()
+fade-out($color, .5)  // aka transparentize()
+rgba($color, .5)      // sets alpha to .5
+```
+
+### 获取值
+<!--rehype:wrap-class=row-span-2-->
+
+#### HSLA
+
+```scss
+hue($color)         // 0deg..360deg
+saturation($color)  // 0%..100%
+lightness($color)   // 0%..100%
+alpha($color)       // 0..1 (aka opacity())
+```
+
+#### RGB
+
+```scss
+red($color)         // 0..255
+green($color)
+blue($color)
+```
+
+---
+
+:- | :-
+:- | :-
+`color.red()` | 用于获取颜色的红色通道
+`color.green()` | 用于获得颜色的绿色通道
+`color.blue()` | 用于获取颜色的蓝色通道
+`color.hue()` | 以获得颜色的色调
+`color.saturation()` | 用于获得颜色的饱和度
+`color.lightness()` | 以获得颜色的亮度
+
+另见: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
+
+### Sass 内置了对颜色值的支持
+
+```scss
+@debug rgb(204, 102, 153);  // #c69
+@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
+@debug hsl(228, 7%, 86%);        // #dadbdf
+@debug hsla(20, 20%, 85%, 0.7);  // rgb(225, 215, 210, 0.7)
+```
+
+### 调整
+
+```scss
+// 固定金额变动
+adjust-color($color, $blue: 5)
+adjust-color($color, $lightness: -30%) // darken(_, 30%)
+adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
+adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)
+// 通过百分比变化
+scale-color($color, $lightness: 50%)
+// 完全改变一个属性
+change-color($color, $hue: 180deg)
+change-color($color, $blue: 250)
+```
+
+支持的: `$red`, `$green`, `$blue`, `$hue`, `$saturation`, `$lightness`, `$alpha`
+
+Sass 其他函数
+--------
+
+### 字符串
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+unquote('hello')
+quote(bold); // "bold"
+```
+
+```scss
+to-upper-case(hello)
+to-lower-case(hello)
+```
+
+----
+
+```scss
+str-length(hello world)
+// "ello" - 它是从 1 开始的，而不是从 0 开始的
+str-slice(hello, 2, 5)
+str-insert("abcd", "X", 1) // "Xabcd"
+```
+
+### Numbers
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+floor(4.2)  // 4
+ceil(4.2)   // 5
+round(4.2)  // 4
+abs(-10px) // 10px
+```
+
+----
+
+```scss
+min(1px, 4px)  // 1px
+$widths: 50px, 30px, 100px
+@debug math.min($widths...)  // 30px
+```
+
+----
+
+```scss
+percentage(.5)   // 50%
+random(3)        // 0..3
+```
+
+### Units
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+### Units
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+### Misc
+
+```scss
+// 检查 $red
+variable-exists(red)
+// 检查@mixin red-text
+mixin-exists(red-text)
+function-exists(redify)
+```
+
+----
+
+```scss
+global-variable-exists(red)
+```
+
+----
+
+```scss
+// .menu li a
+selector-append('.menu', 'li', 'a')
+// .menu:hover li
+selector-nest('.menu', '&:hover li')
+selector-extend(...)
+selector-parse(...)
+selector-replace(...)
+selector-unify(...)
+```
+
+Sass 功能检查
+--------
+<!--rehype:body-class=cols-2-->
+
+### 功能检查
+
+```scss
+meta.feature-exists($feature)
+feature-exists($feature) //=> boolean
+```
+
+----
+
+```scss
+@mixin debug-content-exists {
+  @debug meta.content-exists();
+  @content;
+}
+
+@include debug-content-exists; // false
+@include debug-content-exists { // true
+  // Content!
+}
+```
+
+### 功能
+
+:- | :-
+:- | :-
+`global-variable-shadowing` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着局部变量将隐藏全局变量，除非它具有 `!global` 标志
+`extend-selector-pseudoclass` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着 `@extend` 规则将影响嵌套在伪类中的选择器，如 `:not()`
+`units-level-3` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位
+`at-error` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着支持 `@error` 规则
+`custom-property` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着自定义属性声明值不支持除插值之外的任何表达式
+<!--rehype:className=style-list-arrow-->
+
+Sass 循环
+--------
+
+### For 循环
+
+```scss
+$base-color: #036;
+
+@for $i from 1 through 3 {
+  ul:nth-child(3n + #{$i}) {
+    background-color: lighten($base-color, $i * 5%);
+  }
+}
+```
+
+编译 css 为：
+
+```css
+ul:nth-child(3n + 1) {
+  background-color: #004080;
+}
+
+ul:nth-child(3n + 2) {
+  background-color: #004d99;
+}
+
+ul:nth-child(3n + 3) {
+  background-color: #0059b3;
+}
+```
+
+### Each 循环（简单）
+
+```scss
+$sizes: 40px, 50px;
+
+@each $size in $sizes {
+  .icon-#{$size} {
+    font-size: $size;
+    height: $size;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.icon-40px {
+  font-size: 40px;
+  height: 40px;
+}
+
+.icon-50px {
+  font-size: 50px;
+  height: 50px;
+}
+```
+
+### Each 循环（嵌套）
+
+```scss
+$icons: ("eye": "\f112", "start": "\f12e");
+
+@each $name, $glyph in $icons {
+  .icon-#{$name}:before {
+    display: inline-block;
+    font-family: "Icon Font";
+    content: $glyph;
+  }
+}
+```
+
+编译 css 为：
+
+```css
+.icon-eye:before {
+  display: inline-block;
+  font-family: "Icon Font";
+  content: "";
+}
+.icon-start:before {
+  display: inline-block;
+  font-family: "Icon Font";
+  content: "";
+}
+```
+
+### While 循环
+<!--rehype:wrap-class=col-span-2-->
+
+```scss
+@use "sass:math";
+
+/// 将 `$value` 除以 `$ratio` 直到它低于 `$base`
+@function scale-below($value, $base, $ratio: 1.618) {
+  @while $value > $base {
+    $value: math.div($value, $ratio);
+  }
+  @return $value;
+}
+
+$normal-font-size: 16px;
+sup {
+  font-size: scale-below(20px, 16px);
+}
+```
+
+编译 css 为：
+
+```css
+sup {
+  font-size: 12.36094px;
+}
+```
+
+Sass 其它功能
+--------
+
+### 条件句
+<!--rehype:wrap-class=row-span-2-->
+
+```scss
+@mixin avatar($size, $circle: false) {
+  width: $size;
+  height: $size;
+
+  @if $circle {
+    border-radius: $size / 2;
+  }
+}
+
+.square-av {
+  @include avatar(100px, $circle: false);
+}
+.circle-av {
+  @include avatar(100px, $circle: true);
+}
+```
+
+编译 css 为：
+
+```css
+.square-av {
+  width: 100px;
+  height: 100px;
+}
+
+.circle-av {
+  width: 100px;
+  height: 100px;
+  border-radius: 50px;
+}
+```
+
+### 插值
+
+```scss
+.#{$klass} { ... }      // Class
+call($function-name)    // Functions
+@media #{$tablet}
+font: #{$size}/#{$line-height}
+url("#{$background}.jpg")
+```
+
+### 列表
+
+```scss
+$list: (a b c);
+nth($list, 1)  // starts with 1
+length($list)
+@each $item in $list { ... }
+```
+
+### Maps
+<!--rehype:wrap-class=col-span-2-->
+
+```scss
+$map: (key1: value1, key2: value2, key3: value3);
+map-get($map, key1)
+```
+
+另见
+----
+
+- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
+- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_

docs/screen.md

@@ -0,0 +1,141 @@
+Screen 备忘清单
+====
+
+这是 screen 命令的快速参考指南备忘单。
+
+入门
+----
+
+### 快速开始
+
+```shell
+$ screen 
+```
+
+---
+
+1\. 按 <kbd>Ctrl-A</kbd> <kbd>D</kbd> 分离会话
+
+---
+
+2\. 列出所有屏幕会话
+
+```shell
+$ screen -ls
+```
+
+3\. 重新附加屏幕会话
+
+```shell
+$ screen -r <name/pid>
+```
+
+
+### 选项
+<!--rehype:wrap-class=col-span-2-->
+
+选项 | 示例 | 说明
+:-|:-|:-
+`-S`    | screen -S debug                       | 使用会话名称启动新会话
+`-ls`   | screen -ls                            | 列出正在运行的会话/屏幕
+`-x`    | screen -x                             | 附加到正在运行的会话
+`-r`    | screen -r debug                       | 使用名称附加到正在运行的会话
+`-R`    | screen -R debug                       | 附加到会话 _(如果它不存在将创建)_
+`-d`    | screen -d -m wget xxxx.com/large.file | 分离模式下的开始屏幕
+`-X`    | screen -X -S debug kill               | 终止正在运行的会话
+<!--rehype:className=show-header-->
+
+
+### 进入
+
+Command | Description
+:-|:-
+`screen -S <name>` | 使用会话名称开始新的屏幕会话
+`screen -ls`       | 列出正在运行的会话/屏幕
+`screen -x`        | 附加到正在运行的会话
+`screen -r <name>` | 使用名称附加到正在运行的会话
+`screen -dRR`      | “终极附加”
+
+### 窗口管理
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+Command | Description
+:-|:-
+`Ctrl-A` `C`                           | 创建新窗口
+`Ctrl-A` `Ctrl-A`                      | 更改为上次访问的活动窗口
+`Ctrl-A` `0...9`                       | 按编号切换到窗口
+`Ctrl-A` `'` `<0...9 or title>`        | 按编号或名称更改为窗口
+`Ctrl-A` `N` or `Ctrl-A` `<space>`     | 切换到列表中的下一个窗口
+`Ctrl-A` `P` or `Ctrl-A` `<backspace>` | 切换到列表中的上一个窗口
+`Ctrl-A` `"`                           | 查看窗口列表
+`Ctrl-A` `W`                           | 显示窗口栏
+`Ctrl-A` `K`                           | 杀死当前窗口 _(不推荐)_
+`Ctrl-A` `\`                           | 杀死所有窗口 _(不推荐)_
+`Ctrl-A` `A`                           | 重命名当前窗口
+<!--rehype:className=shortcuts-->
+
+### 出去
+
+Command | Description
+:-|:-
+`Ctrl-A` `D`     | 分离
+`Ctrl-A` `D` `D` | 分离和注销 <br> _(快速退出)_
+`Ctrl-A` `:`     | 退出所有会话
+`Ctrl-A` `C-\`   | 强制退出屏幕<br> _(不推荐)_
+<!--rehype:className=shortcuts-->
+
+### 帮助
+
+| Command      | Description                    |
+|--------------|--------------------------------|
+| `Ctrl-A` `?` | 查看帮助 _(列出键绑定)_ |
+<!--rehype:className=shortcuts-->
+
+### 杂项
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+Command | Description
+:-|:-
+`Ctrl-A` `C-l`    | 重绘窗口
+`Ctrl-A` `[`      | 复制模式
+`Ctrl-A` `ESC`    | 复制模式
+`Ctrl-A` `]`      | 粘贴
+`Ctrl-A` `M`      | 活动监控窗口
+`Ctrl-A` `_`      | 静音监控窗口
+`Ctrl-A` `Ctrl-V` | 输入二合字母 _(非 ASCII 字符)_
+`Ctrl-A` `X`      | 锁定（密码保护）显示
+`Ctrl-A` `:`      | 输入屏幕命令
+`Ctrl-A` `H`      | 在屏幕会话中启用日志记录
+<!--rehype:className=shortcuts-->
+
+
+### 分屏
+
+Command | Description
+:-|:-
+`Ctrl-A` `S`   | 水平分割显示
+`Ctrl-A` `V`   | 垂直分割显示
+`Ctrl-A` `\|`   | 垂直拆分显示
+`Ctrl-A` `TAB` | 跳转到下一个显示区域
+`Ctrl-A` `X`   | 删除当前区域
+`Ctrl-A` `Q`   | 删除除当前区域之外的所有区域
+<!--rehype:className=shortcuts-->
+
+
+### 滚动
+
+Command | Description
+:-|:-
+`Ctrl-a esc` | 进入滚动模式
+`Ctrl-u`     | 向上滑动
+`Ctrl-d`     | 向下滚动
+`esc esc`    | 退出滚动模式
+<!--rehype:className=shortcuts-->
+
+### 屏幕技巧
+
+[SSH](./ssh.md) 并附加在一行中
+
+```shell
+$ ssh -t user@host screen -x <name/pid>
+```

docs/sed.md

@@ -1,6 +1,8 @@
 Sed 备忘清单
 ====
 
+Sed 是一个流编辑器，此 Sed 备忘清单包含 Sed 命令和一些常见的 Sed 技巧。
+
 入门
 ----
 

docs/semver.md

@@ -54,7 +54,6 @@ Semver 备忘清单
 <!--rehype:className=shortcuts-->
 
 ### 连字符范围
-<!--rehype:wrap-class=row-span-3-->
 
 | 范围               | 描述           |
 | ---                | ---                   |
@@ -80,6 +79,43 @@ Semver 备忘清单
 
 如果左边是部分的（例如，`1.2`），则假定缺少的部分为`0`（例如，` 1.2.0`）。
 
+### 有效的语义版本
+<!--rehype:wrap-class=row-span-4-->
+
+```js
+0.0.4
+1.2.3
+10.20.30
+1.1.2-prerelease+meta
+1.1.2+meta
+1.1.2+meta-valid
+1.0.0-alpha
+1.0.0-beta
+1.0.0-alpha.beta
+1.0.0-alpha.beta.1
+1.0.0-alpha.1
+1.0.0-alpha0.valid
+1.0.0-alpha.0valid
+1.0.0-alpha-a.b-c-somethinglong+build.1-aef.1-its-okay
+1.0.0-rc.1+build.1
+2.0.0-rc.1+build.123
+1.2.3-beta
+10.2.3-DEV-SNAPSHOT
+1.2.3-SNAPSHOT-123
+1.0.0
+2.0.0
+1.1.7
+2.0.0+build.1848
+2.0.1-alpha.1227
+1.0.0-alpha+beta
+1.2.3----RC-SNAPSHOT.12.9.1--.12+788
+1.2.3----R-S.12.9.1--.12+meta
+1.2.3----RC-SNAPSHOT.12.9.1--.12
+1.0.0+0.build.1-rc.10000aaa-kk-0.1
+99999999999999999999999.999999999999999999.99999999999999999
+1.0.0-0A.is.legal
+```
+
 ### 组合范围
 
 | 范围                | 描述                  |
@@ -88,13 +124,8 @@ Semver 备忘清单
 | `0.14.x \|\| 15.x.x` | 或 (双竖线分隔)   |
 <!--rehype:className=shortcuts show-header-->
 
-### 预发布
-
-```
-1.2.3-prerelease+build
-```
-
 ### 解释
+<!--rehype:wrap-class=row-span-2-->
 
 | 范围              | 描述           |
 | ---                | ---          |
@@ -104,6 +135,13 @@ Semver 备忘清单
 | `1.x.x` | 表示定义了公共 API     |
 <!--rehype:className=shortcuts-->
 
+### 预发布
+
+```
+1.2.3-prerelease+build
+1.1.2-prerelease+meta
+```
+
 
 另见
 ----

docs/stylus.md

@@ -0,0 +1,557 @@
+Stylus 备忘清单
+===
+
+本备忘单旨在快速理解 [stylus](https://github.com/stylus/stylus) 所涉及的主要概念，显示了它的常用方法使用清单。
+
+入门
+---
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+为 Node.js 构建的富有表现力、健壮、功能丰富的 [CSS](./css.md) 语言
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
+
+```bash
+# npm
+$ npm install stylus -g
+# pnpm
+$ pnpm add -g stylus
+```
+
+在 Node.js 环境中使用 `stylus`
+
+```bash
+$ stylus one.styl two.styl
+# stylus 从标准输入读取并输出到标准输出
+$ stylus --compress < some.styl > some.css
+# 将 css 目录中的文件编译输出到 `public/css`
+$ stylus css --out public/css
+```
+
+转换 CSS，输出 `*.styl` 文件
+
+```
+$ stylus --css < test.css > test.styl
+$ stylus --css test.css /tmp/out.styl
+```
+
+### 支持 CSS 嵌套语法
+
+```stylus
+.box {
+  color: blue;
+  .button {
+    color: red;
+  }
+}
+```
+
+Stylus 是一个 CSS 预处理器。另见: [stylus-lang.com](http://stylus-lang.com/)
+
+### 支持类 python 缩进语法
+
+```stylus
+.box
+  color: blue
+  .button
+    color: red
+```
+
+也有效！冒号也是可选的。这通常用于 Stylus 文档的语法
+
+### 混合 Mixins
+
+```stylus
+caps-type()
+  letter-spacing: 0.05em
+```
+
+----
+
+```stylus {2}
+h5
+  caps-type()
+```
+
+编译 css 为：
+
+```css
+h5 {
+  letter-spacing: 0.05em;
+}
+```
+
+另见：下面[Mixins](#混合-Mixins)
+
+### 变量 Variables
+
+```stylus
+royal-blue = #36a
+```
+
+----
+
+```stylus
+div
+  color: royal-blue
+```
+
+标识符（变量名、函数等）也可以包括 `$` 字符
+
+```stylus
+$font-size = 14px
+body {
+  font: $font-size sans-serif;
+}
+```
+
+另见：[变量 Variables](https://stylus-lang.com/docs/variables.html)
+
+混合 Mixins
+------
+
+### 没有参数
+
+```stylus {1}
+red-border()
+  border: solid 2px red
+```
+
+----
+
+```stylus {2}
+div
+  red-border()
+```
+
+另见: [Mixins](http://stylus-lang.com/docs/mixins.html)
+
+### 有参数
+
+```stylus {1}
+border-radius(n)
+  -webkit-border-radius: n
+  border-radius: n
+```
+
+----
+
+```stylus {2,3}
+div
+  border-radius: 2px
+  border-radius(2px)
+```
+
+Mixins can be applied in two different ways.
+
+### 参数默认值
+
+```stylus {1}
+border-radius(n = 2px)
+  -webkit-border-radius: n
+```
+
+### 块混合
+
+```stylus {3}
+mobile()
+  @media (max-width: 480px)
+    {block}
+```
+
+----
+
+```stylus {1}
++mobile()
+  width: 10px
+```
+
+另见: [块混合](http://stylus-lang.com/docs/mixins.html#block-mixins)
+
+### Rest 参数
+
+```stylus {1}
+shadow(offset-x, args...)
+  box-shadow: offset-x args
+  margin-top: offset-x
+```
+
+----
+
+```stylus
+#login
+  shadow: 1px 2px 5px #eee
+```
+
+另见: [Rest 参数](http://stylus-lang.com/docs/vargs.html)
+
+函数 Functions
+---------
+
+### 函数 Functions
+
+```stylus {1}
+add(a, b)
+  a + b
+```
+
+----
+
+```stylus {2}
+body
+  padding: add(10px, 5)
+```
+
+另见: [Functions](http://stylus-lang.com/docs/functions.html)
+
+### 参数默认值
+
+```stylus {1}
+add(a, b = 2)
+  a + b
+```
+
+另见: [参数默认值](http://stylus-lang.com/docs/functions.html#argument-defaults)
+
+### 命名参数
+
+```stylus
+shadow(x, y)
+  x y (y * 1.5) #000
+```
+
+----
+
+```stylus {2}
+.button
+  box-shadow: shadow(x: 2, y: 4)
+```
+
+另见: [命名参数](http://stylus-lang.com/docs/functions.html#named-parameters)
+
+### 多个返回值
+
+```stylus {2}
+sizes()
+  8px 16px
+```
+
+----
+
+```stylus
+sizes()[0]  // → 8px
+sizes()[1]  // → 16px
+```
+
+另见: [多个返回值](http://stylus-lang.com/docs/functions.html#multiple-return-values)
+
+### arguments
+
+```stylus
+sum()
+  n = 0
+  for num in arguments
+    n = n + num
+```
+
+----
+
+```stylus
+sum(1,2,3,4,5) // => 15
+```
+
+参数 local 可用于所有函数体，并包含所有传递的参数
+
+### hash 示例
+
+```stylus
+get(hash, key)
+  return pair[1] if pair[0] == key for pair in hash
+
+hash = (one 1) (two 2) (three 3)
+
+get(hash, two)
+// => 2
+```
+<!--rehype:className=wrap-text -->
+
+值 Values
+------
+
+### 条件赋值
+
+```stylus {2}
+royal-blue = #36a
+royal-blue ?= #89f
+```
+
+----
+
+```stylus
+div
+  color: royal-blue  // #36a
+```
+
+`?=` 只会在之前未设置的情况下设置变量
+
+另见: [条件赋值](https://stylus-lang.com/docs/operators.html#conditional-assignment--)
+
+### 属性查找
+
+```stylus {2,3}
+.logo
+  width: w = 150
+  margin-left: -(w / 2)
+  // or
+  height: 80px
+  margin-top: -(@height / 2)
+```
+
+另见: [属性查找](https://stylus-lang.com/docs/variables.html#property-lookup)
+
+### 插值
+
+```stylus
+-{prefix}-border-radius: 2px
+```
+
+另见: [Interpolation](https://stylus-lang.com/docs/interpolation.html)
+
+### Color operators
+
+```stylus
+#888 + 50%    // → #c3c3c3 (lighten)
+#888 - 50%    // → #444 (darken)
+#f00 + 50deg  // → #ffd500 (hue)
+```
+
+### Casting
+
+```stylus
+n = 5px
+```
+
+----
+
+```stylus {1,2}
+foo: (n)em
+foo: (n * 5)%
+```
+
+### Lookup
+
+```stylus {3}
+light-blue = #3bd
+name = 'blue'
+lookup('light-' + name)
+```
+
+另见: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)
+
+高级功能
+-----------------
+
+### 有条件的
+<!--rehype:wrap-class=row-span-2-->
+
+```stylus
+if color == blue
+  display: block
+else if true and true
+  display: inline
+else if 'hey' is not 'bye'
+  display: flex
+else
+  display: none
+```
+
+别名:
+
+:- | :-
+:- | :-
+| `==` | `is` |
+| `!=` | `is not` |
+| `!=` | `isnt` |
+
+另见: [Conditionals](https://stylus-lang.com/docs/functions.html#conditionals)
+
+### 对于循环
+
+```stylus {5}
+font-size-1 = 10px
+font-size-2 = 20px
+font-size-3 = 30px
+for i in 1..3
+  .text-{i}
+    font-size: lookup('font-size-' + i)
+```
+### 定义检查
+
+```stylus {1}
+if ohnoes is defined
+  color: blue
+```
+
+另见: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
+
+### False 值
+
+```stylus
+0
+null
+false
+''
+```
+
+### 类型检查
+
+```stylus
+if val is a 'string'
+if val is a 'ident'
+if #fff is a 'rgba'    // → true
+```
+
+另见: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)
+
+内置函数
+------------------
+
+### 颜色函数
+<!--rehype:wrap-class=row-span-4-->
+
+```stylus
+alpha(#fff)   //→ 1
+alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
+```
+
+----
+
+```stylus
+dark(black)  //→ true
+light(black) //→ false
+```
+
+----
+
+```stylus
+hue(#0a0)         //→ 50deg
+saturation(#f00)  //→ 100%
+lightness(#f00)   //→ 50%
+luminosity(#f00)  //→ 0.2126
+```
+
+----
+
+```stylus
+hue(#0a0, 0deg)
+saturation(#f00, 50%)
+lightness(#f00)
+```
+
+----
+
+```stylus
+lighten(color, 10%)
+darken(color, 10%)
+saturate(color, 10%)
+desaturate(color, 10%)
+invert(color)
+```
+
+----
+
+```stylus
+tint(color, 50%)  // mix with white
+shade(color, 50%) // mix with black
+```
+
+----
+
+```stylus
+unquote(string)
+```
+
+另见: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
+
+### 图片尺寸
+
+返回给定图像的宽度和高度
+
+```stylus
+width:  image-size('tux.png')[0]
+height: image-size('tux.png')[1]
+```
+
+另见: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
+
+### 缓存 Caching
+<!--rehype:wrap-class=row-span-2-->
+
+```stylus
+size($width)
+  +cache('w' + $width)
+    width: $width
+.a { size: 10px }
+.b { size: 10px }
+```
+
+----
+
+```stylus
+// 输出: .a, b { width: 10px }
+```
+
+在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 `@extend` 第一次调用的选择器。另见: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
+
+### Embed URL
+
+```
+background: embedurl('logo.png')
+// → background: url("data:image/png;base64,…")
+```
+<!--rehype:className=wrap-text -->
+
+另见: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)
+
+### 添加属性
+
+```stylus
+gradient(color)
+  add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
+  color
+```
+
+----
+
+```stylus
+body
+  background: gradient(red)
+```
+
+另见: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
+
+### sprintf
+
+```stylus
+'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
+// → -webkit-gradient(linear, 0 0, 0 100%)
+```
+<!--rehype:className=wrap-text -->
+
+----
+
+```stylus
+s("rgba(0, 0, 0, %s)", 0.3)
+```
+
+另见: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
+
+另见
+---
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
+- [Less.js 备忘清单](./lessjs.md) _(jaywcjlove.github.io)_

docs/sublime-text.md

@@ -0,0 +1,150 @@
+Sublime Text 备忘清单
+===
+
+这个 [Sublime Text](https://www.sublimetext.com/) 快速参考备忘单显示了它的键盘快捷键和命令。
+
+## 快捷键
+
+### 文本编辑初学者
+<!--rehype:wrap-class=row-span-3-->
+
+[Sublime Text](https://www.sublimetext.com/) 是一个用于代码、标记的复杂文本编辑器。
+
+快捷键 | 说明
+:- | -
+`⌘ D`    | 选择单词(重复包括单词的下一个实例)
+`⌘ L`    | 选择行(重复以包括下一行)
+`⌘ ⇧ L`  | 将选择拆分为多行(多行编辑)
+`⌘ ⇧ A`  | 选择标签内的文本(重复以展开)
+`⌃ ⇧ M`  | 选择大括号或尖括号(重复展开)
+`⌘ X`    | 剪切一行
+`⌃ M`    | 转到匹配的括号
+`⌃ ↩︎` or `↩︎`  | 在后面插入行
+`⌘ ↵`     | 在后面插入行
+`⇧ ⌘ ↵`   | 在前面插入行
+`⇧ ⌥ ▲`   | 选择当前行光标之前
+`⇧ ⌥ ▼`   | 选择当前行光标之后
+`⇧ ⌃ M`   | 选择当前括号的所有内容
+`⌥ ⇠/⇢`   | 进行逐词移动，相应的
+`⌥ ⇧ ⇠/⇢` | 进行逐词选择
+`⌘ U`     | 返回到历史光标位置(撤销)
+`⌃ M`     | 快速的在起始括号和结尾括号间切换
+`⌃ ⇧ M`   | 则可以快速选择括号间的内容
+`⌃ ⇧ J`   | 对于缩进型语言(例如Python)可以使用
+`⌃ ⌘ D`   | 复制整行
+<!--rehype:className=shortcuts-->
+
+查看：[Sublime Text](https://www.sublimetext.com/) 官网
+
+### 代码折叠
+
+快捷键 | 说明
+:- | -
+`⌘ Alt [` | 折叠最近的块
+`⌘ Alt ]` | 展开最近的块
+`⌘ K ⌘ 1` | 折叠所有第一级代码块
+`⌘ K ⌘ 2` | 折叠所有二级代码块
+`⌘ K ⌘ 3` | 折叠所有第三级代码块（等）
+`⌘ K ⌘ T` | 折叠所有 HTML 属性
+`⌘ K ⌘ 0` | 展开一切
+`⌘ K 0`   | 代码展开
+<!--rehype:className=shortcuts-->
+
+### macOS 键盘符号
+
+快捷键 | 说明
+:- | -
+`⌘`  | Command()  
+`⌃`  | Control  
+`⌥`  | Option(alt)  
+`⇧`  | Shift  
+`⇪`  | Caps Lock(大写)   
+`fn` | 功能键就是fn  
+`↩︎`  | return/Enter
+<!--rehype:className=shortcuts-->
+
+### 编辑
+
+快捷键 | 说明
+:- | -
+`⌘ ⇧ D` | 复制当前行/选择
+`⌘ ⇧ K` | 删除当前行/选择
+`⇧ del` | 删除当前行/选择
+`⌘ ⇧ ▲` | 移动队列
+`⌘ ⇧ ▼` | 下移一行
+`⌘ ▼/▲`| 移动到首行/尾行
+<!--rehype:className=shortcuts-->
+
+### 转到
+
+快捷键 | 说明
+:- | -
+`⌘ P`	   | 去任何地方
+`⌘ G`	   | 转到行号
+`⌘ R`	   | 转到符号
+`⌘ P, :` | 转到行号(`:`之后输入数字)
+`⌘ P, #` | 转到并列出字符串模糊匹配(`#`之后输入字符)
+`⌘ P, @` | 转到并列出符号(`@`之后开始输入符号名称)
+<!--rehype:className=shortcuts-->
+
+### 选择(Selecting)
+
+- `⌘ + D`  
+      选择光标所在的单词，并高亮该词出现的所有位置
+- `⌘ + D`  
+    择该词出现的下一个位置
+- `⌘ + U` 进行回退，使用Esc退
+<!--rehype:className=style-timeline shortcuts-->
+
+----
+
+快捷键 | 说明
+:- | -
+`⌃ K` / `⌘ K K` | 从光标处删除到行末尾
+<!--rehype:className=shortcuts-->
+
+### 拆分窗口
+
+快捷键 | 说明
+:- | -
+`⇧ ⌥ 2` | 将视图拆分为两列
+`⇧ ⌥ 1` | 将视图还原为单列
+`⇧ ⌥ 5` | 将视图设置为网格（4 组）
+`⌃ 2`   | 跳到第 2 组
+`⇧ ⌃ 2` | 将文件移动到组 2
+<!--rehype:className=shortcuts-->
+
+### 文本操作
+
+快捷键 | 说明
+:- | -
+`⌃ K ⌃ L`        | 转换为小写
+`⌃ K ⌃ U`        | 转换为大写
+`⇧ ⌃ K`          | 删除行
+`⌃BACKSPACE`     | 向后删除单词
+`⌃DEL`           | 删除单词转发
+<!--rehype:className=shortcuts-->
+
+### 命令行中启动编辑器
+<!--rehype:wrap-class=col-span-2-->
+
+```bash
+sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl\
+           /usr/local/bin/subl
+```
+<!--rehype:className=wrap-text -->
+
+#### 在命令行中使用 **subl** 命令
+
+```bash
+$ subl .
+$ subl README.md
+```
+
+软链放到这个目录 `/usr/local/bin/subl`，这是因为 `Rootless` 机制，不能存放到 ~~`/usr/bin/subl`~~ 位置。
+
+另见
+----
+
+- [Sublime Text 官网](https://www.sublimetext.com/) _(sublimetext.com)_
+- [Sublime 编辑器快捷键](https://jaywcjlove.github.io/handbook/Shortcuts/sublime.html) _(jaywcjlove.github.io)_

docs/toml.md

@@ -12,6 +12,7 @@ TOML 备忘清单
 
 - [Document](https://toml.io/en/latest) _(toml.io)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
+- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
 
 ### 示例
 
@@ -253,4 +254,15 @@ bat = "hi"
 name = { first = "Tom", last = "Preston-Werner" }
 point = { x = 1, y = 2 }
 animal = { type.name = "pug" }
-```
+```
+
+另见
+---
+
+- [Document](https://toml.io/en/latest) _(toml.io)_
+- [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
+- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
+
+
+- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
+- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_

docs/typescript.md

@@ -1258,6 +1258,7 @@ class MyComponent extends React.Component<Props, {}> {
 ```
 
 ### 泛型组件
+<!--rehype:wrap-class=col-span-2-->
 
 ```tsx
 // 一个泛型组件

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/webstorm.md

@@ -0,0 +1,191 @@
+WebStorm 备忘清单
+===
+
+此快速参考备忘单列出了在 Windows/Linux 或 Mac 上运行的 [WebStorm](https://www.jetbrains.com/webstorm/) 的默认键盘快捷键
+
+Webstorm Windows & Linux 键盘映射
+--------
+
+### 编辑
+<!--rehype:wrap-class=row-span-5-->
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `Space`| 基本代码完成
+`Alt` `Enter`| 显示意图操作，快速修复
+`Ctrl` `P`| 参数信息
+`Ctrl` `Q`| 快速文档查找
+`Ctrl` `mouse over`| 简要信息
+`Ctrl` `F1`| 插入符号处的错误或警告
+`Alt` `Insert`| 生成代码...
+`Ctrl` `Alt` `T`| 环绕...
+`Ctrl` `J`| 插入实时模板
+`Ctrl` `/`| 用行注释/取消注释
+`Ctrl` `Shift` `/`| 用块评论/取消评论
+`Ctrl` `W`| 选择连续增加的代码块
+`Ctrl` `Shift` `W`| 将当前选择减少到以前的状态
+`Alt+Q`| 上下文信息
+`Ctrl` `Alt` `L`| 重新格式化代码
+`Ctrl` `Alt` `I`| 自动缩进行
+`Tab`| 缩进选定的行
+`Shift` `Tab`| 取消缩进选定的行
+`Ctrl` `Shift` `V`| 从最近的缓冲区粘贴...
+`Ctrl` `D`| 复制当前行或选定块
+`Ctrl` `Y`| 删除插入符号处的行
+`Alt` `Shift` `Up`| 向上移动队列
+`Alt` `Shift` `Down`| 下移线
+`Ctrl` `Shift` `J`| 连接线
+`Ctrl` `Enter`| 分割线
+`Shift` `Enter`| 开始新行
+`Ctrl` `Shift` `U`| 在插入符号或选定块中切换单词的大小写
+`Ctrl` `Shift` `]`| 选择直到代码块结束
+`Ctrl` `Shift` `[`| 选择直到代码块开始
+`Ctrl` `Delete`| 删除到词尾
+`Ctrl` `Backspace`| 删除到单词开头
+`Ctrl` `+`| 展开代码块
+`Ctrl` `-`| 折叠代码块
+`Ctrl` `Shift` `+`| 展开全部
+`Ctrl` `Shift` `-`| 全部收缩
+`Ctrl` `F4`| 关闭活动编辑器选项卡
+<!--rehype:className=shortcuts-->
+
+### 一般的
+
+快捷键 | 说明
+:-|:-
+`Double Shift`| 到处搜索
+`Ctrl` `Shift` `A`| 寻找行动
+`Alt` `0...9`| 打开相应的工具窗口
+`Ctrl` `Shift` `F12`| 切换最大化编辑器
+`Alt` `Shift` `F`| 添加到收藏夹
+`Alt` `Shift` `I`| 检查当前文件
+`Ctrl` <kbd>\`</kbd>| 快速切换电流方案
+`Ctrl` `Alt` `S`| 打开设置对话框
+`Ctrl` `Tab`| 在工具和选项卡之间切换
+<!--rehype:className=shortcuts-->
+
+### 导航
+<!--rehype:wrap-class=row-span-4-->
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `B` _\|_ `Ctrl + Click` | 前往 declaration
+`Ctrl` `N` | 前往 class
+`Ctrl` `Shift` `N` | 转到文件
+`Ctrl` `Alt` `Shift` `N` | 转到符号
+`Alt` `Right` | 转到下一个编辑器选项卡
+`Alt` `Left` | 转到上一个编辑器选项卡
+`F12` | 返回上一个工具窗口
+`Esc` | 转到编辑器
+`Ctrl` `G` | 去行
+`Ctrl` `E` | 最近的文件弹出
+`Ctrl` `Alt` `Right` | 向前导航
+`Ctrl` `Alt` `Left` | 向后导航
+`Ctrl` `Shift` `Backspace` | 导航到最后一个编辑位置
+`Alt` `F1` | 在任何视图中选择当前文件或符号
+`Ctrl` `Alt` `B` | 转到实施
+`Ctrl` `Shift` `I` | 打开快速定义查找
+`Ctrl` `Shift` `B` | 转到类型声明
+`Ctrl` `U` | 转到超方法/超类
+`Alt` `Up` | 转到上一个方法
+`Alt` `Down` | 转到下一个方法
+`Ctrl` `]` _/_ `[` | 移动到代码块结束/开始
+`Cltrl` `Shift` `M` | 将插入符号移动到匹配的大括号
+`Ctrl` `F12` | 文件结构弹出
+`Ctrl` `H` | 类型层次结构
+`Ctrl` `Alt` `H` | 调用层次结构
+`F2` _/_ `Shift` `F2` | 下/上一个突出显示的错误
+`F4` _/_ `Ctrl` `Enter` | 跳转到源
+`Alt` `Home` | 跳转到导航栏
+`F11` | 切换书签
+`Ctrl` `Shift` `F11` | 使用助记符切换书签
+`Ctrl` `0...9` | 转到编号的书签
+`Shift` `F11` | 显示书签
+<!--rehype:className=shortcuts-->
+
+### 多个插入符号和选择
+
+快捷键 | 说明
+:-|:-
+`Alt` `Click`| 添加或删除插入符号
+`Shift` `Ctrl + Alt-J`| 选择所有出现
+`Alt` `J`| 选择下一个出现
+`Alt` `Shift` `J`| 取消选择事件
+`Esc`| 取消选择所有出现或插入符号
+<!--rehype:className=shortcuts-->
+
+### 调试
+
+快捷键 | 说明
+:-|:-
+`F8`| 跨过去
+`F7`| 踏入
+`Shift` `F7`| 智能步入
+`Shift` `F8`| 走出去
+`Alt` `F9`| 运行到光标
+`Alt` `F8`| 评估表达式
+`F9`| 简历计划
+`Ctrl` `F8`| 切换断点
+`Ctrl` `Shift` `F8`| 查看断点
+<!--rehype:className=shortcuts-->
+
+### 运行
+
+快捷键 | 说明
+:-|:-
+`Alt` `Shift` `F10`| 选择配置并运行
+`Alt` `Shift` `F9`| 选择配置和调试
+`Shift` `F10`| 运行
+`Shift` `F9`| 调试
+`Ctrl` `Shift` `F10`| 从编辑器运行上下文配置
+`Alt` `Shift` `R`| 重新运行测试
+`Alt` `F11`| 运行 Gulp/Grunt/npm 任务
+<!--rehype:className=shortcuts-->
+
+### 使用搜索
+
+快捷键 | 说明
+:-|:-
+`Alt` `F7`| 查找用法
+`Ctrl` `F7`| 在文件中查找用法
+`Ctrl` `Shift` `F7`| 突出显示文件中的用法
+`Ctrl` `Alt` `F7`| 显示用法
+<!--rehype:className=shortcuts-->
+
+### VCS/本地历史
+
+快捷键 | 说明
+:-|:-
+`Alt` <kbd>\`</kbd>| VCS 快速弹出窗口
+`Ctrl` `K`| 将项目提交到 VCS
+`Ctrl` `T`| 从 VCS 更新项目
+`Alt` `Shift` `C`| 查看最近的更改
+<!--rehype:className=shortcuts-->
+
+### 搜索/替换
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `F`| 寻找
+`F3`| 找下一个
+`Shift` `F3`| 查找上一个
+`Ctrl` `Shift` `F`| 在路径中查找
+`Ctrl` `R`| 代替
+`Ctrl` `Shift` `R`| 在路径中替换
+<!--rehype:className=shortcuts-->
+
+### 重构
+
+快捷键 | 说明
+:-|:-
+`Ctrl` `Alt` `Shift +T`| 重构这个
+`F5` _/_ `F6`| 复制/移动
+`Alt` `Delete`| 安全删除
+`Shift` `F6`| 改名
+`Ctrl` `F6`| 更改函数签名
+`Ctrl` `Alt` `N`| 内联变量
+`Ctrl` `Alt` `M`| 提取方法
+`Ctrl` `Alt` `V`| 提取变量
+`Ctrl` `Alt` `C`| 提取常数
+`Ctrl` `Alt` `P`| 提取参数
+<!--rehype:className=shortcuts-->

docs/yaml.md

@@ -0,0 +1,528 @@
+YAML 备忘清单
+====
+
+这是理解和编写 YAML 格式配置文件的快速参考备忘单。
+
+入门
+-----------
+
+### 介绍
+
+[YAML](https://yaml.org/) 是一种数据序列化语言，旨在供人类直接读写
+
+- YAML 不允许使用制表符
+- 元素部分之间必须有空间
+- YAML 区分大小写
+- 以 `.yaml` 或 `.yml` 扩展名结束您的 YAML 文件
+- YAML 是 JSON 的超集
+- Ansible playbook 是 YAML 文件
+<!--rehype:className=style-round-->
+
+
+### 标量类型
+<!--rehype:wrap-class=row-span-2-->
+
+```yaml
+n1: 1            # 整数
+n2: 1.234        # 浮点
+s1: 'abc'        # 字符串
+s2: "abc"        # 字符串
+s3: abc          # 字符串
+b: false         # 布尔类型
+d: 2015-04-05    # 日期类型
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "n1": 1,
+  "n2": 1.234,
+  "s1": "abc",
+  "s2": "abc",
+  "s3": "abc",
+  "b": false,
+  "d": "2015-04-05"
+}
+```
+
+使用空格缩进。 元素部分之间必须有空间。
+
+### 变量
+
+```yaml
+some_thing: &VAR_NAME foobar
+other_thing: *VAR_NAME
+```
+
+#### ↓ 等效的 JSON
+
+```json {.wrap}
+{
+  "some_thing": "foobar",
+  "other_thing": "foobar"
+}
+```
+
+### 注释
+
+```yaml
+# A single line comment example
+# block level comment example
+# comment line 1
+# comment line 2
+# comment line 3
+```
+
+### 多行字符串
+
+```yaml
+description: |
+  hello
+  world
+```
+
+#### ↓ 等效的 JSON
+
+```json {.wrap}
+{"description": "hello\nworld\n"}
+```
+
+### 继承
+<!--rehype:wrap-class=row-span-2-->
+
+```yaml
+parent: &defaults
+  a: 2
+  b: 3
+child:
+  <<: *defaults
+  b: 4
+```
+
+#### ↓ 等效的 JSON
+
+```json {.wrap}
+{
+  "parent": {
+    "a": 2,
+    "b": 3
+  },
+  "child": {
+    "a": 2,
+    "b": 4
+  }
+}
+```
+
+### 参考
+<!--rehype:wrap-class=row-span-2-->
+
+```yaml
+values: &ref
+  - Will be
+  - reused below
+  
+other_values:
+  i_am_ref: *ref
+```
+
+#### ↓ 等效的 JSON
+
+```json {.wrap}
+{
+  "values": [
+    "Will be",
+    "reused below"
+  ],
+  "other_values": {
+    "i_am_ref": [
+      "Will be",
+      "reused below"
+    ]
+  }
+}
+```
+
+### 折叠的字符串
+
+```yaml
+description: >
+  hello
+  world
+```
+
+#### ↓ 等效的 JSON
+
+```json {.wrap}
+{"description": "hello world\n"}
+```
+
+### 两份文件
+
+```yaml
+---
+document: this is doc 1
+---
+document: this is doc 2
+```
+
+YAML使用`---`将指令与文档内容分开。
+
+YAML Collections
+-----------
+
+### 序列
+
+```yaml
+- Mark McGwire
+- Sammy Sosa
+- Ken Griffey
+```
+
+#### ↓ 等效的 JSON
+
+```json
+[
+  "Mark McGwire",
+  "Sammy Sosa",
+  "Ken Griffey"
+]
+```
+
+### 映射
+
+```yaml
+hr:  65       # Home runs
+avg: 0.278    # Batting average
+rbi: 147      # Runs Batted In
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "hr": 65,
+  "avg": 0.278,
+  "rbi": 147
+}
+```
+
+### 映射到序列
+
+```yaml
+attributes:
+  - a1
+  - a2
+methods: [getter, setter]
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "attributes": ["a1", "a2"],
+  "methods": ["getter", "setter"]
+}
+```
+
+### 映射序列
+
+```yaml
+children:
+  - name: Jimmy Smith
+    age: 15
+  - name: Jimmy Smith
+    age: 15
+  -
+    name: Sammy Sosa
+    age: 12
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "children": [
+    {"name": "Jimmy Smith", "age": 15},
+    {"name": "Jimmy Smith", "age": 15},
+    {"name": "Sammy Sosa", "age": 12}
+  ]
+}
+```
+
+### 序列的序列
+
+```yaml
+my_sequences:
+  - [1, 2, 3]
+  - [4, 5, 6]
+  -  
+    - 7
+    - 8
+    - 9
+    - 0 
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "my_sequences": [
+    [1, 2, 3],
+    [4, 5, 6],
+    [7, 8, 9, 0]
+  ]
+}
+```
+
+### 映射的映射
+
+```yaml
+Mark McGwire: {hr: 65, avg: 0.278}
+Sammy Sosa: {
+    hr: 63,
+    avg: 0.288
+  }
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "Mark McGwire": {
+    "hr": 65,
+    "avg": 0.278
+  },
+  "Sammy Sosa": {
+    "hr": 63,
+    "avg": 0.288
+  }
+}
+```
+
+### 嵌套集合
+
+```yaml
+Jack:
+  id: 1
+  name: Franc
+  salary: 25000
+  hobby:
+    - a
+    - b
+  location: {country: "A", city: "A-A"}
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "Jack": {
+    "id": 1,
+    "name": "Franc",
+    "salary": 25000,
+    "hobby": ["a", "b"],
+    "location": {
+        "country": "A", "city": "A-A"
+    }
+  }
+}
+```
+
+### 无序集
+
+```yaml
+set1: !!set
+  ? one
+  ? two
+set2: !!set {'one', "two"}
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "set1": {"one": null, "two": null},
+  "set2": {"one": null, "two": null}
+}
+```
+
+集合表示为一个映射，其中每个键都与一个空值相关联
+
+
+### 有序映射
+
+```yaml
+ordered: !!omap
+- Mark McGwire: 65
+- Sammy Sosa: 63
+- Ken Griffy: 58
+```
+
+#### ↓ 等效的 JSON
+
+```json
+{
+  "ordered": [
+     {"Mark McGwire": 65},
+     {"Sammy Sosa": 63},
+     {"Ken Griffy": 58}
+  ]
+}
+```
+
+YAML 参考
+--------------
+
+### 条款
+
+- 序列又名数组或列表
+- 标量又名字符串或数字
+- 映射又名哈希或字典
+<!--rehype:className=style-round-->
+
+基于 YAML.org [refcard](https://yaml.org/refcard.html)。
+
+### 文档指标
+
+:- | :-
+:- | :-
+`%`   | 指令指标
+`---` | 文档标题
+`...` | 文档终结者
+
+### 收集指标
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`?`  | 关键指标
+`:`  | 价值指标
+`-`  | 嵌套系列条目指示器
+`,`  | 单独的内联分支条目
+`[]` | 环绕串联系列分支
+`{}` | 环绕在线键控分支
+
+### 别名指标
+
+:- | :-
+:- | :-
+`&` | 锚属性
+`*` | 别名指示符
+
+### 特殊键
+
+:- | :-
+:- | :-
+`=`  | 默认“值”映射键
+`<<` | 合并来自另一个映射的键
+
+### 标量指标
+
+:- | :-
+:- | :-
+`''`  | 环绕内联未转义标量
+`"`   | 环绕内嵌转义标量
+`|`   | 块标量指示器
+`>`   | 折叠标量指示器
+`-`   | 剥离 chomp 修饰符（`\|-` 或 `>-`）
+`+`   | 保留 chomp 修饰符（`\|+` 或 `>+`）
+`1-9` | 显式缩进修饰符（`\|1` 或 `>2`）。 <br/> 修饰符可以组合（`\|2-`, `>+1`）
+
+### 标签属性（通常未指定）
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :-
+:- | :-
+`none`   | 未指定的标签（由应用程序自动解析）
+`!`      | 非特定标签（默认情况下，`!!map`/`!!seq`/`!!str`）
+`!foo`   | 主要（按照惯例，表示本地 `!foo` 标记）
+`!!foo`  | 次要的（按照惯例，表示 `tag:yaml.org,2002:foo`）
+`!h!foo` | 需要 `%TAG !h! <prefix>`（然后表示 `<prefix>foo`）
+`!<foo>` | 逐字标记（始终表示“foo”）
+<!--rehype:class=auto-wrap-->
+
+### 杂项指标
+
+|     |                             |
+|-----|-----------------------------|
+| `#` | 一次性评论指示器 |
+| <code>\`@</code> | 两者都保留供将来使用 |
+
+
+### 核心类型（默认自动标签）
+<!--rehype:wrap-class=row-span-2-->
+
+|         |                                          |
+|---------|------------------------------------------|
+| `!!map` | `{Hash table, dictionary, mapping}`      |
+| `!!seq` | `{List, array, tuple, vector, sequence}` |
+| `!!str` | Unicode 字符串                            |
+
+### 转义码
+<!--rehype:wrap-class=row-span-3-->
+
+#### Numeric
+
+- `\x12` (8-bit)
+- `\u1234` (16-bit)
+- `\U00102030` (32-bit)
+<!--rehype:className=cols-2 style-none-->
+
+#### Protective
+
+- `\\` (\\)
+- `\"` (")
+- `\ ` ( )
+- `\<TAB>` (TAB)
+<!--rehype:className=cols-3 style-none-->
+
+#### C
+- `\0` (NUL)
+- `\a` (BEL)
+- `\b` (BS)
+- `\f` (FF)
+- `\n` (LF)
+- `\r` (CR)
+- `\t` (TAB)
+- `\v` (VTAB)
+<!--rehype:className=cols-3 style-none-->
+
+#### 额外的
+
+- `\e` (ESC)
+- `\_` (NBSP)
+- `\N` (NEL)
+- `\L` (LS)
+- `\P` (PS)
+<!--rehype:className=cols-3 style-none-->
+  
+### 更多类型
+
+|          |                             |
+|----------|-----------------------------|
+| `!!set`  | `{cherries, plums, apples}` |
+| `!!omap` | `[one: 1, two: 2]`          |
+
+### 与语言无关的标量类型
+<!--rehype:wrap-class=col-span-2-->
+
+|                           |                                            |
+|---------------------------|--------------------------------------------|
+| `{~, null}`               | 空（无值）。 |
+| `[1234, 0x4D2, 02333]`    | [十进制整数、十六进制整数、八进制整数] |
+| `[1_230.15, 12.3015e+02]` | [固定浮点数，指数浮点数] |
+| `[.inf, -.Inf, .NAN]`     | [无穷大（浮点数），负数，不是数字] |
+| `{Y, true, Yes, ON}`      | 布尔真 |
+| `{n, FALSE, No, off}`     | 布尔假 |
+<!--rehype:class=auto-wrap-->
+
+另见
+---
+
+- [YAML Reference Card](https://yaml.org/refcard.html) _(yaml.org)_
+- [Learn X in Y minutes](https://learnxinyminutes.com/docs/yaml/) _(learnxinyminutes.com)_
+- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
+- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
+- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_

package.json

@@ -1,31 +1,39 @@
 {
-  "name": "reference",
-  "version": "1.0.0",
+  "name": "@wcj/reference",
+  "version": "1.12.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",
-    "url": "git+https://github.com/jaywcjlove/reference.git"
+    "url": "https://github.com/jaywcjlove/reference.git"
   },
   "bugs": {
     "url": "https://github.com/jaywcjlove/reference/issues"
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.1.0",
+    "@wcj/markdown-to-html": "^2.1.1",
     "chokidar": "^3.5.3",
     "fs-extra": "^10.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
     "recursive-readdir-files": "^2.3.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-document": "^6.1.0",
     "rehype-slug": "^5.0.1",
     "remark-gemoji": "^7.0.1"
+  },
+  "engines": {
+    "node": ">=16.0.0"
   }
 }

scripts/assets/c.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 38 42">
+<path fill="currentColor" fill-rule="evenodd" d="M20.096,0.28575 C21.6507561,1.15835976 24.653163,2.84381008 27.7615951,4.58873655 L28.7451648,5.14086432 C32.0250464,6.98202246 35.2659268,8.80121341 36.903,9.71975 C37.582,10.09975 38,10.80375 38,11.56575 L38,30.43275 C38,31.19475 37.582,31.89875 36.903,32.27975 C35.3482439,33.1523598 32.345837,34.8378101 29.2374049,36.5827365 L28.2538352,37.1348643 C24.9739536,38.9760225 21.7330732,40.7952134 20.096,41.71375 C19.417,42.09475 18.581,42.09475 17.903,41.71375 C16.3482439,40.8411402 13.345837,39.1556899 10.2374049,37.4107635 L9.2538352,36.8586357 C5.9739536,35.0174775 2.73307317,33.1982866 1.096,32.27975 C0.418,31.89875 0,31.19575 0,30.43375 L0,11.56675 C0,10.80475 0.418,10.10075 1.097,9.71975 C4.451,7.83675 14.549,2.16875 17.903,0.28575 C18.582,-0.09525 19.418,-0.09525 20.096,0.28575 Z M19,6.99975 C11.273,6.99975 5,13.27275 5,20.99975 C5,28.72675 11.273,34.99975 19,34.99975 C24.2106279,34.99975 28.7600712,32.1471979 31.1706024,27.9198213 L25.0359394,24.544542 C23.8185152,26.6113911 21.5699125,27.99975 19,27.99975 C15.137,27.99975 12,24.86275 12,20.99975 C12,17.13575 15.136,13.99975 19,13.99975 C21.527968,13.99975 23.7450291,15.3427307 24.9755084,17.353858 L31.0544381,13.8798146 C28.6157645,9.76264004 24.1280833,6.99975 19,6.99975 Z"/>
+</svg>

scripts/assets/colors-named.svg

@@ -0,0 +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" />
+</svg>

scripts/assets/css.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
+  <path d="m64 32 35 403.22L255.77 480 413 435.15 448 32Zm290.68 334.9L256.07 395l-98.46-28.24-6.75-77.76h48.26l3.43 39.56 53.59 15.16.13.28 53.47-14.85 5.64-64.15H203l-4-50h120.65l4.35-51H140l-4-49h240.58Z"/>
+</svg>

scripts/assets/electron.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" height="1em" width="1em">
+  <path d="M86.76 255a9.89 9.89 0 0 0 4.87-1.29 9.82 9.82 0 0 0 3.65-13.43c-16.46-28.56-17.81-52.12-7.45-70 14.26-24.57 53.61-33.65 105.27-24.29a9.86 9.86 0 0 0 11.45-7.9 9.84 9.84 0 0 0-7.93-11.44c-29.19-5.28-56-5.18-77.39.3-22.3 5.71-39 17.28-48.45 33.48-14 24.19-12.7 54.73 7.42 89.62a9.85 9.85 0 0 0 8.56 4.95Zm274.85-111.27c32.24.42 52.61 9.31 62.79 26.86 14.21 24.48 2.52 62.81-31.27 102.52a9.82 9.82 0 0 0 7.51 16.18 9.88 9.88 0 0 0 7.52-3.46c19.12-22.47 32.35-45.54 38.25-66.71 6.14-22 4.43-42.21-5-58.38-13.8-23.78-40.13-36.15-79.59-36.67h-.14a9.83 9.83 0 0 0-.12 19.66Zm-35.14 271.16a9.88 9.88 0 0 0-13.5 3.35c-16.41 27.15-36.57 42.1-56.77 42.1-28.49 0-56-29.31-73.73-78.42a9.87 9.87 0 0 0-12.59-5.92 9.83 9.83 0 0 0-6 12.58c10 27.77 23.47 50.75 39 66.46 16.11 16.34 34.55 25 53.32 25 27.38 0 53.54-18.33 73.65-51.61a9.81 9.81 0 0 0-3.38-13.5Zm105.23-76.35a32.14 32.14 0 0 0-29.9 44.33c-41.8 19.5-119.8 4.79-191.87-36.62-32.91-18.9-62.16-41.86-84.6-66.39a9.9 9.9 0 0 0-13.91-.65 9.8 9.8 0 0 0-.65 13.9c23.79 26 54.68 50.28 89.33 70.18 40.28 23.13 82.27 38.63 121.43 44.81a225.54 225.54 0 0 0 35 2.91c23.12 0 43-4.3 58.51-12.79a32.2 32.2 0 1 0 16.7-59.68Zm0 44.66a12.6 12.6 0 0 1-7.82-2.72 10 10 0 0 0-2.2-2.21 12.61 12.61 0 1 1 10 4.93Z"/>
+  <path d="M82.09 338.59c.57-21.26 12.41-47 33.68-73.16 23.19-28.45 56.69-56 94.34-77.65 33.25-19.1 65.2-31.9 98.07-38.91a9.83 9.83 0 1 0-4.12-19.22c-34.85 7.43-68.78 21-103.79 41.09C116.09 219.09 59.9 289.88 62.46 343.9a32.32 32.32 0 1 0 19.63-5.31ZM80.3 383.2a12.5 12.5 0 1 1 12.59-12.5 12.56 12.56 0 0 1-12.59 12.5Z"/>
+  <path d="M256.2 96.32a32.23 32.23 0 0 0 26.53-13.81c17.89 11.69 34 35 45.81 66.12 13 34.39 19.84 75.38 19.84 118.54 0 37.18-5.19 72.35-15 103.6a9.72 9.72 0 0 0 .66 7.49 9.82 9.82 0 0 0 5.8 4.84 9.89 9.89 0 0 0 12.34-6.44c10.42-33.14 15.93-70.34 15.93-109.49 0-47.17-7.77-91.77-22.47-129-14.41-36.48-34.13-62.4-57.14-75.16a32.3 32.3 0 1 0-32.3 33.31Zm0-44.66a12.5 12.5 0 1 1-12.59 12.5 12.56 12.56 0 0 1 12.59-12.5Zm-5.2 191.7a24.35 24.35 0 0 0 5.16 48.16 24.68 24.68 0 0 0 5.16-.55A24.36 24.36 0 1 0 251 243.36Z"/>
+</svg>

scripts/assets/emmet.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 153 151">
+  <path d="M76.2378757,0 C118.342892,0 152.475751,33.7082594 152.475751,75.2895046 C152.475751,116.87075 118.342892,150.579009 76.2378757,150.579009 C34.1328596,150.579009 0,116.87075 0,75.2895046 C0,33.7082594 34.1328596,0 76.2378757,0 Z M60.5934369,46.9019586 L19.8384036,56.9645627 L92.6150779,128.835332 L102.803239,88.5872762 L94.3131047,80.2021662 L87.0356763,108.950356 L70.5395345,92.6594199 L75.3909542,73.9732442 L56.2267408,78.5252622 L39.7305989,62.2343264 L68.8415078,55.0474265 L60.5934369,46.9019586 Z M116.873372,33.007443 L76.1189361,43.0694569 L84.367007,51.2149248 L102.561176,47.1421909 L98.1944795,64.8703887 L106.684613,73.2549084 L116.873372,33.007443 Z" transform="translate(0 .421)"/>
+</svg>

scripts/assets/expressjs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 230 230" height="1em" width="1em"><path d="M176.09375,0 C205.86535,-5.46895416e-15 230,24.1346502 230,53.90625 L230,176.09375 C230,205.86535 205.86535,230 176.09375,230 L53.90625,230 C24.1346502,230 3.64596944e-15,205.86535 0,176.09375 L0,53.90625 C-3.64596944e-15,24.1346502 24.1346502,5.46895416e-15 53.90625,0 L176.09375,0 Z M96.3915625,71.8417578 C72.1633984,52.8083594 36.9455469,65.5976172 28.3034766,96.3196875 C26.8542969,101.414727 26.205625,106.860156 25.15625,111.855469 C25.15625,114.753001 25.1735062,117.650508 25.2065625,120.547852 C25.5560547,122.146172 26.205625,123.845117 26.205625,125.543164 C27.040801,136.25108 31.3566466,146.391645 38.4944531,154.417148 C53.2945034,168.337492 75.3687421,171.159676 93.1949219,161.410586 C103.851236,155.025409 110.993734,144.108874 112.576914,131.787305 C107.831367,130.339023 105.333711,131.188047 103.784805,136.183359 C101.384533,146.161673 94.1154179,154.257423 84.4522266,157.714414 C55.1290234,167.505586 32.2,148.323047 33.4991406,116.551602 L113.426836,116.551602 C114.12582,98.7679297 110.578789,82.9823828 96.3915625,71.8417578 Z M134.6075,70.6917578 C131.648507,65.8588504 125.699893,63.7717491 120.369961,65.6964453 L156.287695,112.505039 L117.672852,164.308047 C122.86047,166.177143 128.629968,163.911928 131.160195,159.012656 C140.551562,145.274648 150.842266,132.03707 161.132969,118.249648 L164.880352,123.244961 C173.522422,135.133984 182.513984,146.773242 190.656523,158.962344 C193.339516,164.091123 199.430792,166.407513 204.84375,164.357461 C192.654648,148.072383 180.815937,132.187109 168.876602,116.35125 C167.81759,115.403944 167.212286,114.050351 167.212286,112.629473 C167.212286,111.208595 167.81759,109.855001 168.876602,108.907695 C175.370508,100.864883 181.514922,92.5723047 187.759062,84.3300391 L201.696523,65.8464844 C196.612958,63.8698897 190.855156,66.0182947 188.308906,70.8417969 C179.766562,82.9311719 170.624961,94.6207422 161.382734,106.860156 C152.191719,94.5210156 142.949492,82.8817578 134.6075,70.6917578 Z M70.8691642,70.1898981 L71.5147266,70.1940234 C90.8967188,70.3431641 105.433437,86.6785547 105.883555,109.707305 L33.5988672,109.707305 L33.5485547,109.607578 C34.4982031,85.8789453 49.9342578,69.8939453 71.5147266,70.1940234 Z"/></svg>

scripts/assets/github-actions.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 107 107">
+<g fill="none" fill-rule="evenodd" transform="translate(2.982 2.982)">
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M19.7678571,0 C30.6853432,0 39.5357143,8.85037111 39.5357143,19.7678571 C39.5357143,30.6853432 30.6853432,39.5357143 19.7678571,39.5357143 C8.85037111,39.5357143 0,30.6853432 0,19.7678571 C0,8.85037111 8.85037111,0 19.7678571,0 L19.7678571,0 Z M48.3214286,39.5357143 C55.5997526,39.5357143 61.5,45.4359617 61.5,52.7142857 C61.5,59.9926097 55.5997526,65.8928571 48.3214286,65.8928571 C41.0431045,65.8928571 35.1428571,59.9926097 35.1428571,52.7142857 C35.1428571,45.4359617 41.0431045,39.5357143 48.3214286,39.5357143 Z M48.3214286,74.6785714 C55.5997526,74.6785714 61.5,80.5788188 61.5,87.8571429 C61.5,95.1354669 55.5997526,101.035714 48.3214286,101.035714 C41.0431045,101.035714 35.1428571,95.1354669 35.1428571,87.8571429 C35.1428571,80.5788188 41.0431045,74.6785714 48.3214286,74.6785714 Z"/>
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M87.8571429,74.6785714 C95.1354669,74.6785714 101.035714,80.5788188 101.035714,87.8571429 C101.035714,95.1354669 95.1354669,101.035714 87.8571429,101.035714 C80.5788188,101.035714 74.6785714,95.1354669 74.6785714,87.8571429 C74.6785714,80.5788188 80.5788188,74.6785714 87.8571429,74.6785714 Z"/>
+<polyline stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" points="52.793 49.655 46.05 56.387 42.778 53.125"/>
+<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" transform="translate(74.679 39.536)">
+<path d="M13.1785714,0 C20.4568955,0 26.3571429,5.9002474 26.3571429,13.1785714 C26.3571429,20.4568955 20.4568955,26.3571429 13.1785714,26.3571429 C5.9002474,26.3571429 0,20.4568955 0,13.1785714 C0,5.9002474 5.9002474,0 13.1785714,0 Z"/>
+<polyline points="17.651 10.119 10.907 16.851 7.635 13.589"/></g>
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M16.5456964,10.9074643 L27.7760357,17.9799643 C28.4178266,18.3833884 28.8062276,19.0892404 28.8035611,19.8472901 C28.8008672,20.6053399 28.4074847,21.3084277 27.7628571,21.7073036 L16.5325179,28.6699821 C15.8550724,29.0900649 15.0032059,29.1101448 14.3067197,28.7224479 C13.6102335,28.3347509 13.1785714,27.6001388 13.1785714,26.8030179 L13.1785714,12.7656429 C13.1785714,11.9658375 13.6135044,11.2293022 14.3137561,10.8428619 C15.0140079,10.4564216 15.8689689,10.481168 16.5456964,10.9074643 L16.5456964,10.9074643 Z M17.5714286,39.5357143 L17.5714286,72.4821429 C17.5714286,80.9735357 24.5494821,87.8571429 32.9464286,87.8571429 L35.1428571,87.8571429"/>
+<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.393" d="M17.5714286,39.6125893 C17.5714286,46.8484564 23.4372579,52.7142857 30.673125,52.7142857 L35.0308393,52.7142857 M61.6208036,52.7142857 L74.6785714,52.7142857"/>
+<path fill="currentColor" fill-rule="nonzero" d="M43.9285714,85.660714 C44.7136722,85.6611066 45.4389259,86.0803154 45.8311365,86.7604287 C46.223347,87.4405421 46.2229284,88.2782346 45.8300382,88.9579556 C45.4371481,89.6376766 44.7114757,90.0561603 43.926375,90.0557681 C42.7127145,90.0551613 41.72934,89.0708033 41.7299463,87.8571429 C41.7305531,86.6434824 42.7149109,85.6601078 43.9285714,85.660714 M52.7142857,85.660714 C53.4993864,85.6611066 54.2246401,86.0803154 54.6168507,86.7604287 C55.0090613,87.4405421 55.0086427,88.2782346 54.6157525,88.9579556 C54.2228624,89.6376766 53.49719,90.0561603 52.7120893,90.0557681 C51.4984288,90.0551613 50.5150543,89.0708033 50.5156606,87.8571429 C50.5162674,86.6434824 51.5006252,85.6601078 52.7142857,85.660714"/>
+<line x1="72.493" x2="70.268" y1="87.873" y2="87.945" stroke="currentColor" stroke-linecap="round" stroke-width="4.393"/>
+</g>
+</svg>

scripts/assets/golang.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 120 120"><path fill="currentColor" d="M60,0 C93.137085,-6.08718376e-15 120,26.862915 120,60 C120,93.137085 93.137085,120 60,120 C26.862915,120 4.05812251e-15,93.137085 0,60 C-4.05812251e-15,26.862915 26.862915,6.08718376e-15 60,0 Z M66.9375,44.8284375 C63.140625,42.2503125 58.921875,41.7346875 54.515625,42.5315625 C49.125,43.5159375 44.71875,46.2815625 41.390625,50.6409375 C38.296875,54.6721875 36.796875,59.2659375 37.40625,64.3753125 C37.921875,68.6878125 39.890625,72.1565625 43.359375,74.7815625 C47.109375,77.5940625 51.375,78.4846875 55.96875,77.8753125 C61.546875,77.1253125 65.953125,74.3596875 69.328125,69.9065625 C70.0941964,68.8967411 70.7503316,67.8351849 71.2989326,66.7266981 C72.0855742,69.5828677 73.6756442,72.0358799 75.984375,74.0315625 C79.265625,76.8440625 83.15625,78.0628125 87.421875,78.1565625 C88.640625,78.0159375 89.90625,77.9690625 91.171875,77.7346875 C95.53125,76.8440625 99.328125,74.8753125 102.421875,71.7346875 C106.78125,67.3284375 108.609375,62.1721875 107.8125,55.8440625 C107.203125,51.3440625 104.90625,47.9221875 101.203125,45.3909375 C97.125,42.6253125 92.625,42.1565625 87.84375,43.0003125 C82.265625,43.9846875 78.140625,46.3284375 74.71875,50.8284375 C73.2524636,52.7475477 72.1531891,54.7757695 71.4756823,56.9222289 L56.390625,56.9221875 C55.6875,56.9221875 55.359375,57.3909375 55.21875,57.6721875 C54.5625,58.8909375 53.4375,61.3284375 52.828125,62.7815625 C52.5,63.5784375 52.734375,64.1878125 53.71875,64.1878125 L62.765625,64.1878125 C62.296875,64.8440625 61.921875,65.4065625 61.5,65.9221875 C59.390625,68.3128125 56.71875,69.4378125 53.53125,69.0159375 C49.828125,68.5003125 47.25,65.4065625 47.203125,61.6565625 C47.15625,57.8596875 48.796875,54.8128125 51.984375,52.7503125 C54.65625,51.0159375 57.515625,50.5940625 60.46875,52.0471875 C61.453125,52.5159375 61.96875,53.0315625 62.671875,53.8284375 C63.28125,54.5315625 63.328125,54.4846875 64.03125,54.2971875 C66.9375,53.5471875 68.953125,52.9846875 71.90625,52.2346875 C72.46875,52.0940625 72.65625,51.8596875 72.375,51.4378125 C71.203125,48.7190625 69.421875,46.4690625 66.9375,44.8284375 Z M88.875,51.4378125 C93.328125,50.4065625 97.59375,53.0315625 98.4375,57.6721875 C98.53125,58.1409375 98.53125,58.6096875 98.578125,59.2190625 C98.34375,63.2503125 96.328125,66.2503125 92.625,68.1721875 C90.140625,69.4378125 87.5625,69.5784375 84.984375,68.4534375 C81.609375,66.9534375 79.828125,63.2503125 80.671875,59.5940625 C81.703125,55.1878125 84.515625,52.4221875 88.875,51.4378125 Z M33.609375,59.9690625 L24.234375,59.9690625 C24.046875,59.9690625 23.859375,60.1096875 23.765625,60.2503125 L23.109375,61.4221875 C23.015625,61.5628125 23.0625,61.7034375 23.25,61.7034375 L33.46875,61.7503125 C33.609375,61.7503125 33.796875,61.6096875 33.796875,61.4221875 L33.890625,60.2971875 C33.890625,60.1096875 33.796875,59.9690625 33.609375,59.9690625 Z M34.640625,55.6565625 L13.265625,55.6565625 C13.078125,55.6565625 12.84375,55.7503125 12.75,55.8909375 L11.765625,57.1565625 C11.671875,57.2971875 11.71875,57.3909375 11.90625,57.3909375 L34.078125,57.3440625 C34.265625,57.3440625 34.453125,57.2503125 34.5,57.0628125 L34.875,55.9378125 C34.921875,55.7971875 34.828125,55.6565625 34.640625,55.6565625 Z M37.078125,51.3440625 L20.34375,51.3440625 C20.15625,51.3440625 19.921875,51.4378125 19.828125,51.5784375 L18.84375,52.8440625 C18.75,52.9846875 18.796875,53.0784375 18.984375,53.0784375 L35.953125,53.1253125 C36.09375,53.1253125 36.328125,52.9846875 36.421875,52.8440625 L37.21875,51.6253125 C37.3125,51.4846875 37.265625,51.3440625 37.078125,51.3440625 Z"/></svg>

scripts/assets/grep.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M5 3a2 2 0 0 0-2 2v4.758A4.5 4.5 0 0 1 9.973 13h3.529a.5.5 0 0 1 0 1h-3.53a4.499 4.499 0 0 1-.411 1.439L11.122 17h3.879a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm2.5 4.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm2-.25h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM9 10.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm-6.615 1.405A3.5 3.5 0 0 0 7.6 16.3l2.543 2.558a.5.5 0 0 0 .707-.708L8.3 15.6a3.5 3.5 0 1 0-5.916-3.695Zm5.194.206a2.5 2.5 0 1 1-4.157 2.778 2.5 2.5 0 0 1 4.157-2.778Z" />
+</svg>

scripts/assets/homebrew.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="M7.938 0a.214.214 0 0 0-.206.156c-.316 1.104.179 2.15.838 2.935.153.181.313.347.476.501a2.039 2.039 0 0 0-.665.02c-1.184.233-2.193.985-2.74 2.532a3.893 3.893 0 0 0-.2 1.466 1.565 1.565 0 0 0-1.156 1.504 1.59 1.59 0 0 0 1.227 1.541l.026 12.046c0 .195.1.377.264.482a.214.214 0 0 0 .008.005c.537.31 2.047.812 5.21.812 3.238 0 4.7-.678 5.181-1.04a.214.214 0 0 0 .008-.007.571.571 0 0 0 .206-.439c.002-.344.002-1.136.002-1.604a.143.143 0 0 1 .147-.144c.397.006.869.006 1.318.005a1.826 1.826 0 0 0 1.832-1.825v-5.804a1.826 1.826 0 0 0-1.825-1.826H16.56a.14.14 0 0 1-.143-.144V10.6h.007v-.001a1.573 1.573 0 0 0 1.356-1.556c0-.816-.627-1.489-1.424-1.563-.025-1.438-.437-2.126-.736-2.58a.214.214 0 0 0-.005-.007c-.364-.51-1.193-1.282-2.275-1.316-.503-.016-.842.124-1.125.254-.217.1-.42.177-.67.22.002-1.286.945-1.981.945-1.981a.214.214 0 0 0 .05-.298s-.087-.122-.21-.26c-.121-.136-.269-.294-.47-.378a.214.214 0 0 0-.079-.017.214.214 0 0 0-.145.055 4.308 4.308 0 0 0-.875 1.101 3.42 3.42 0 0 0-.133.273 3.497 3.497 0 0 0-.381-.846C9.794.978 9.063.436 8.017.016A.214.214 0 0 0 7.939 0zm.156.524c.85.378 1.43.83 1.79 1.403.274.438.426.962.484 1.584a3.07 3.07 0 0 0-.012.462 6.897 6.897 0 0 1-.168-.052 5.487 5.487 0 0 1-1.29-1.106c-.551-.657-.935-1.46-.804-2.291zM11.8 1.618c.07.054.141.101.212.18.034.039.032.04.058.073-.332.308-1.07 1.144-.952 2.453a.214.214 0 0 0 .222.195c.469-.017.782-.172 1.056-.299.273-.126.508-.228.931-.214.875.027 1.639.715 1.939 1.134.295.449.65 1 .663 2.36a1.66 1.66 0 0 0-.41.142 1.938 1.938 0 0 0-1.77-1.16 1.94 1.94 0 0 0-1.87 1.448 1.783 1.783 0 0 0-1.356-.64c-.484 0-.91.205-1.233.517a1.873 1.873 0 0 0-1.85-1.625c-.649 0-1.218.335-1.552.84a3.1 3.1 0 0 1 .157-.735c.51-1.437 1.355-2.045 2.42-2.254.367-.073.664-.011.99.095.325.106.671.262 1.094.342a.214.214 0 0 0 .252-.245c-.112-.67.073-1.266.336-1.744a3.71 3.71 0 0 1 .663-.863zM7.44 6.611a1.442 1.442 0 0 1 1.363 1.925.214.214 0 0 0 .168.283h.005a.214.214 0 0 0 .238-.146 1.373 1.373 0 0 1 2.613-.01.214.214 0 0 0 .417-.09 1.509 1.509 0 0 1 1.504-1.664c.678 0 1.249.445 1.442 1.056a.214.214 0 0 0 .259.143l.15-.04a.214.214 0 0 0 .051-.02 1.139 1.139 0 0 1 1.702.995 1.14 1.14 0 0 1-.985 1.131.214.214 0 0 0-.001 0 2.215 2.215 0 0 0-.485.126 10.65 10.65 0 0 1-1.176.365.214.214 0 0 0-.162.186 1.276 1.276 0 0 1-.146.478 2.07 2.07 0 0 0-.239 1.111l.001.151a.438.438 0 0 1-.16.36.665.665 0 0 1-.43.14.586.586 0 0 1-.588-.59.803.803 0 0 0-.38-.681.214.214 0 0 0-.002-.002c-.24-.145-.43-.37-.532-.636a.214.214 0 0 0-.207-.138 19.469 19.469 0 0 1-5.37-.6l-.003-.002a9.007 9.007 0 0 0-.838-.194h.003a1.16 1.16 0 0 1-.937-1.134c0-.619.488-1.118 1.101-1.14a.214.214 0 0 0 .204-.176 1.443 1.443 0 0 1 1.42-1.187zm8.549 4.106v.455c0 .314.259.573.572.573h1.329a1.397 1.397 0 0 1 1.397 1.397v5.804a1.396 1.396 0 0 1-1.402 1.396.214.214 0 0 0-.002 0c-.448.002-.918 0-1.31-.005a.573.573 0 0 0-.584.573c0 .468 0 1.262-.002 1.603a.214.214 0 0 0 0 .001c0 .042-.019.08-.05.107-.346.26-1.75.95-4.915.95-3.107 0-4.587-.52-4.99-.752a.143.143 0 0 1-.065-.118l-.025-11.955c.145.033.288.07.431.11a.214.214 0 0 0 .003 0c.115.031.246.064.383.097v10.37c0 .129.069.247.18.31.453.217 1.767.732 4.071.732 2.32 0 3.595-.626 4.022-.884a.357.357 0 0 0 .164-.3l.001-10.21c.267-.075.531-.158.792-.254zm-7.99.894a.493.493 0 0 1 .494.493v8.578a.493.493 0 0 1-.493.493.493.493 0 0 1-.494-.493v-8.578A.493.493 0 0 1 8 11.611zm8.652 1.14a.663.663 0 0 0-.662.662v5.208a.663.663 0 0 0 .662.662h1.14a.663.663 0 0 0 .662-.662v-5.209a.663.663 0 0 0-.662-.662zm0 .428h1.14a.233.233 0 0 1 .233.233v5.21a.233.233 0 0 1-.233.232h-1.14a.233.233 0 0 1-.233-.233v-5.209a.233.233 0 0 1 .233-.233z"/>
+</svg>

scripts/assets/html.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
+  <path d="m64 32 34.94 403.21L255.77 480 413 435.15 448 32Zm308 132H188l4 51h176l-13.51 151.39L256 394.48l-98.68-28-6.78-77.48h48.26l3.42 39.29L256 343.07l53.42-14.92L315 264H148l-12.59-149.59H376.2Z"/>
+</svg>

scripts/assets/htop.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81v8.37C2 19.83 4.17 22 7.81 22h8.37c3.64 0 5.81-2.17 5.81-5.81V7.81C22 4.17 19.83 2 16.19 2ZM7.63 18.15c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-2.07c0-.41.34-.75.75-.75s.75.34.75.75v2.07Zm5.12 0c0 .41-.34.75-.75.75s-.75-.34-.75-.75V14c0-.41.34-.75.75-.75s.75.34.75.75v4.15Zm5.12 0c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-6.22c0-.41.34-.75.75-.75s.75.34.75.75v6.22Zm0-9.38c0 .41-.34.75-.75.75s-.75-.34-.75-.75V7.8a19.532 19.532 0 0 1-9.31 5.36c-.06.02-.12.02-.18.02-.34 0-.64-.23-.73-.57-.1-.4.14-.81.55-.91a18.07 18.07 0 0 0 8.75-5.11H14.2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h2.93c.04 0 .07.02.11.02.05.01.1.01.15.03.05.02.09.05.14.08.03.02.06.03.09.05.01.01.01.02.02.02.04.04.07.08.1.12.03.04.06.07.07.11.02.04.02.08.03.13.01.05.03.1.03.16 0 .01.01.02.01.03v2.93h-.01Z" fill="currentColor"/>
+</svg>

scripts/assets/koajs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 230 230"><path d="M176.09375,0 C205.86535,-5.46895416e-15 230,24.1346502 230,53.90625 L230,176.09375 C230,205.86535 205.86535,230 176.09375,230 L53.90625,230 C24.1346502,230 3.64596944e-15,205.86535 0,176.09375 L0,53.90625 C-3.64596944e-15,24.1346502 24.1346502,5.46895416e-15 53.90625,0 L176.09375,0 Z M46.6655391,74 L39,74 L39,156 L46.6655391,156 L46.6655391,129.650518 L49.6224434,126.261287 L69.8814961,156 L77.547334,156 L54.002666,121.450727 L71.8528652,101.333433 L70.7576602,101.333433 L46.6655391,128.447878 L46.6655391,74 Z M166.63517,101.605824 C155.279402,101.605824 148.80559,105.323536 147.426199,105.960807 L147.850535,106.70429 C150.50383,105.217325 158.675584,102.455817 165.255779,102.455817 C175.471142,102.455817 176.406034,109.037681 176.428332,111.278315 L176.428388,111.441925 C176.424978,111.802842 176.39908,112.014881 176.39908,112.014881 L176.39908,129.646341 C175.125475,129.54013 169.7131,129.327706 164.937229,129.752553 C146.046211,131.027095 143.499299,136.337984 144.560438,143.454176 C145.19724,147.702947 147.319816,155.562622 159.737021,155.562622 C170.24352,155.562622 174.276504,149.933396 176.39908,146.10977 L176.39908,147.596736 C176.39908,147.596736 176.396486,147.62746 176.394995,147.684985 L176.394581,147.834611 C176.41733,149.115868 177.139684,155.137775 188.709902,155.137775 L192,155.137476 L192,154.287782 L188.70601,154.287921 C188.703429,154.288003 188.699579,154.288109 188.694503,154.288209 L188.616885,154.288028 C187.942429,154.274794 183.828246,153.934323 183.828246,147.596437 L183.828246,112.015179 C183.828246,108.403679 182.023922,101.605824 166.63517,101.605824 Z M111.11141,101.498121 C96.1873359,101.498121 84.7236914,111.37582 84.7236914,129.113791 C84.7236914,148.44464 96.5115645,155.45462 110.246303,155.45462 C125.170377,155.45462 136.634021,145.576921 136.634021,127.839249 C136.634021,108.508101 124.846148,101.498121 111.11141,101.498121 Z M164.943803,130.353127 C170.178674,129.705713 175.099477,130.137422 176.356049,130.245125 L176.356049,143.304406 C176.041682,147.621499 169.550537,154.852853 161.593939,154.852853 C154.26518,154.852853 152.694838,148.700921 152.275881,143.412408 C151.647744,135.533639 153.846521,131.648255 164.943803,130.353127 Z M111.117088,102.20789 C121.305932,102.20789 129.523107,109.148952 129.523107,127.835669 C129.523107,144.920854 120.97752,154.744851 110.240625,154.744851 C100.051482,154.744851 91.8346055,147.804087 91.8346055,129.117072 C91.8346055,112.031887 100.380193,102.20789 111.117088,102.20789 Z"/></svg>

scripts/assets/lessjs.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 210 90">
+<path d="M201.009375,32.7796875 C201.009375,26.053125 202.059375,22.0828125 202.059375,14.8640625 C202.059375,3.6421875 197.925,0.0328125 188.770313,0.0328125 L182.04375,0.0328125 L182.04375,7.9734375 L184.110938,7.9734375 C188.770313,7.9734375 189.7875,9.515625 189.7875,15.225 C189.7875,20.5734375 189.2625,25.921875 189.2625,32.1234375 C189.2625,40.0640625 191.854687,43.1484375 197.00625,44.3625 L197.00625,44.8875 C191.821875,46.1015625 189.2625,49.1859375 189.2625,57.1265625 C189.2625,63.328125 189.7875,68.3484375 189.7875,74.025 C189.7875,79.8984375 188.573437,81.440625 184.110938,81.440625 L184.110938,81.6046875 L182.04375,81.6046875 L182.04375,89.8734375 L188.770313,89.8734375 C197.892188,89.8734375 202.059375,86.2640625 202.059375,75.0421875 C202.059375,67.6265625 201.009375,63.8203125 201.009375,57.1265625 C201.009375,53.5171875 203.240625,49.7109375 209.967187,49.3828125 L209.967187,40.425 C203.240625,40.1953125 201.009375,36.3890625 201.009375,32.7796875 Z M166.359375,43.2796875 C161.175,41.2125 156.351562,39.9984375 156.351562,36.553125 C156.351562,33.9609375 158.41875,32.41875 162.225,32.41875 C166.03125,32.41875 169.476562,33.9609375 173.25,36.7171875 L180.140625,27.5953125 C175.842187,24.3140625 169.96875,20.86875 162.028125,20.86875 C150.314063,20.86875 142.373438,27.5953125 142.373438,37.078125 C142.373438,45.5109375 149.789063,49.8421875 155.990625,52.2375 C161.339063,54.3046875 166.523438,56.04375 166.523438,59.4890625 C166.523438,62.08125 164.45625,63.7875 159.796875,63.7875 C155.498438,63.7875 151.167188,62.0484375 146.507813,58.4390625 L139.617188,68.446875 C144.801563,72.7453125 152.709375,75.6984375 159.271875,75.6984375 C173.053125,75.6984375 180.46875,68.446875 180.46875,58.9640625 C180.46875,49.48125 173.085938,45.5109375 166.359375,43.2796875 L166.359375,43.2796875 Z M48.5953125,62.7703125 C47.38125,62.7703125 45.8390625,61.7203125 45.8390625,58.471875 L45.8390625,7.10542736e-15 L21.3609375,7.10542736e-15 C12.0421875,7.10542736e-15 7.9078125,3.609375 7.9078125,14.83125 C7.9078125,22.246875 8.9578125,26.38125 8.9578125,32.746875 C8.9578125,36.35625 6.7265625,40.1625 -6.99440506e-15,40.490625 L-6.99440506e-15,49.4484375 C6.7265625,49.6125 8.9578125,53.41875 8.9578125,57.028125 C8.9578125,63.39375 7.9078125,67.2 7.9078125,74.615625 C7.9078125,85.8375 12.0421875,89.446875 21.196875,89.446875 L27.9234375,89.446875 L27.9234375,81.50625 L25.85625,81.50625 C21.5578125,81.50625 20.1796875,79.7671875 20.1796875,74.090625 C20.1796875,68.4140625 20.7046875,63.5578125 20.7046875,57.1921875 C20.7046875,49.2515625 18.1125,46.1671875 12.9609375,44.953125 L12.9609375,44.428125 C18.1453125,43.2140625 20.7046875,40.1296875 20.7046875,32.1890625 C20.7046875,25.9875 20.1796875,20.9671875 20.1796875,15.290625 C20.1796875,9.6140625 21.39375,8.0390625 25.85625,8.0390625 L30.4828125,8.0390625 L30.4828125,57.5203125 C30.4828125,68.053125 34.0921875,74.94375 44.625,74.94375 C47.90625,74.94375 50.4984375,74.41875 52.36875,73.7296875 L50.6296875,62.5078125 C49.6125,62.7703125 49.1203125,62.7703125 48.5953125,62.7703125 Z M124.621875,43.2796875 C119.273437,41.2125 114.45,39.9984375 114.45,36.553125 C114.45,33.9609375 116.517187,32.41875 120.323437,32.41875 C124.129687,32.41875 127.575,33.9609375 131.348437,36.7171875 L138.239062,27.5953125 C133.940625,24.3140625 128.067187,20.86875 120.126562,20.86875 C108.4125,20.86875 100.471875,27.5953125 100.471875,37.078125 C100.471875,45.5109375 107.8875,49.8421875 114.089062,52.2375 C119.4375,54.3046875 124.621875,56.04375 124.621875,59.4890625 C124.621875,62.08125 122.554687,63.7875 117.895312,63.7875 C113.596875,63.7875 109.265625,62.0484375 104.60625,58.4390625 L97.8796875,68.446875 C103.064062,72.7453125 110.971875,75.6984375 117.534375,75.6984375 C131.315625,75.6984375 138.731358,68.446875 138.731358,58.9640625 C138.764062,49.48125 131.348437,45.5109375 124.621875,43.2796875 Z M73.7625,20.7046875 C61.1625,20.7046875 49.1203125,31.2375 49.4484375,47.775 C49.4484375,64.8375 60.6703125,74.8453125 75.46875,74.8453125 C81.6703125,74.8453125 88.5609375,72.6140625 93.909375,68.971875 L88.725,59.85 C84.91875,62.08125 81.309375,63.13125 77.503125,63.13125 C70.6125,63.13125 65.2640625,59.85 63.8859375,51.909375 L95.1234375,51.909375 C95.2875,50.6953125 95.6484375,48.3 95.6484375,45.54375 C95.8453125,31.565625 88.2328125,20.7046875 73.7625,20.7046875 L73.7625,20.7046875 Z M63.91875,42.4265625 C64.96875,35.5359375 69.103125,32.2546875 73.9265625,32.2546875 C80.128125,32.2546875 82.55625,36.553125 82.55625,42.4265625 L63.91875,42.4265625 L63.91875,42.4265625 Z" transform="translate(.033 .08)"/></svg>

scripts/assets/menu.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
+  <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
+</svg>

scripts/assets/netcat.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 30 27">
+<path fill="currentColor" fill-rule="evenodd" d="M24.1575957,7.91399838 C19.6909292,2.9579985 10.7162627,2.9579985 6.2509295,7.91399838 C4.72692954,9.60599833 4.04826289,11.7206649 4.28826288,14.0313316 C4.61226288,17.1499981 5.87759618,19.8033314 7.83359613,21.6193314 C7.8642628,21.0966647 7.86159613,20.4646647 7.78559613,19.6833314 L7.46692947,16.4099982 L10.3602627,17.9726648 C13.4069293,19.6179981 17.0002626,19.6179981 20.0455958,17.9726648 L22.9389291,16.4099982 L22.6215958,19.6833314 C22.5442624,20.4646647 22.5429291,21.0966647 22.5735958,21.6193314 C24.5295957,19.8033314 25.794929,17.1499981 26.118929,14.0313316 C26.358929,11.7206649 25.682929,9.60599833 24.1575957,7.91399838 M29.6015956,14.3926649 C29.0642623,19.5833314 26.430929,23.8366646 22.3789291,26.0646646 L21.1455958,26.7433312 L20.2189292,25.6833313 C20.1015958,25.5486646 19.2989292,24.5486646 19.0975958,22.153998 C16.7162626,22.8913313 13.6909293,22.8913313 11.3109294,22.153998 C11.109596,24.5486646 10.3069294,25.5486646 10.1895961,25.6833313 L9.26159609,26.7433312 L8.02826279,26.0646646 C3.97626289,23.837998 1.34426296,19.5833314 0.805596305,14.3926649 C0.46426298,11.1153316 1.47492962,7.98333171 3.64959623,5.56999844 C9.51359609,-0.934001402 20.8949291,-0.934001402 26.7575957,5.56999844 C28.9335956,7.98333171 29.9429289,11.1153316 29.6015956,14.3926649" transform="matrix(1 0 0 -1 0 27.435)"/>
+</svg>

scripts/assets/netstat.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+  <path d="M26.58 32h-18a1 1 0 1 0 0 2h18a1 1 0 0 0 0-2Z"/>
+  <path d="M31.73 15.4h-6.17a18.87 18.87 0 0 1-1.62 2.52 2.33 2.33 0 0 1 .33 1.19 22 22 0 0 0 5 .45 11.88 11.88 0 0 1-.61 1.53h-.56a17.41 17.41 0 0 1-4.32-.56 2.29 2.29 0 0 1-3 .62 18.43 18.43 0 0 1-7 3.5 2.34 2.34 0 0 1-1.57 1.79l-.29.06a11.93 11.93 0 0 1-3.39-2.8h.66a2.33 2.33 0 0 1 4.37-.58A16.94 16.94 0 0 0 19.78 20a2.32 2.32 0 0 1-.18-1.17c-.42-.24-.84-.49-1.25-.76a17.53 17.53 0 0 1-5.35-5.6 2.31 2.31 0 0 1-2.28-.63 27.31 27.31 0 0 0-5 4.74v-.57a12 12 0 0 1 .14-1.73 18.75 18.75 0 0 1 4.2-3.8 2.28 2.28 0 0 1 1.1-2.25c-.12-.43-.24-.86-.33-1.3 0-.14 0-.29-.11-.64a12 12 0 0 1 1.37-.87c.1.59.14.9.21 1.21s.2.85.32 1.27h.25a2.33 2.33 0 0 1 1.13.63 18.59 18.59 0 0 1 6.39-1L23 3A14 14 0 0 0 3.75 16c0 .45 0 .89.07 1.33A14 14 0 0 0 31.76 16c0-.2-.02-.4-.03-.6Z" />
+  <path d="M14.26 11.64a16 16 0 0 0 4.93 5.23c.34.23.69.43 1 .63a2.28 2.28 0 0 1 2.58-.57 17.29 17.29 0 0 0 1-1.54h-1.6A3.68 3.68 0 0 1 19 9.89l.56-.89a17.08 17.08 0 0 0-4.84.88 2.25 2.25 0 0 1-.47 1.77Z" />
+  <path d="M26.85 1.14 21.13 11a1.28 1.28 0 0 0 1.1 2h11.45a1.28 1.28 0 0 0 1.1-2l-5.72-9.86a1.28 1.28 0 0 0-2.21 0Z"/>
+  <path fill="none" d="M0 0h36v36H0z"/>
+</svg>

scripts/assets/nginx.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 46 52">
+  <path d="M21.6686953,0.373850863 C22.4859141,-0.124616954 23.5140859,-0.124616954 24.3575391,0.373850863 L44.6555781,12.0199042 C45.4992109,12.491911 46,13.3837179 46,14.3541925 L46,37.6459416 C46,38.6164162 45.4992109,39.5084019 44.6555781,39.9804087 L24.3575391,51.6262832 C23.5403203,52.1245723 22.5123281,52.1245723 21.6686953,51.6262832 L1.37083594,39.9804087 C0.948929687,39.7444053 0.606265625,39.4295553 0.369078125,39.009934 C0.105476562,38.5903128 0,38.1444094 0,37.672045 L0,14.3541925 C0,13.3837179 0.500789062,12.491911 1.37101563,12.0199042 Z M32.1078203,14.5377872 C31.4147694,14.5348957 30.749258,14.8075453 30.2591927,15.2951641 C29.7691273,15.782783 29.4951098,16.444972 29.4980391,17.134563 L29.4980391,30.0655834 L18.5843594,17.0821774 L17.7937344,16.1378062 C16.9238672,15.0623815 15.4739687,14.5640925 14.2348437,14.5640925 C12.5215234,14.5640925 11.2825549,15.6919028 11.2825549,17.0821774 L11.2825549,34.8918533 C11.2796492,35.5814132 11.5536421,36.2435748 12.0436685,36.7311885 C12.5336949,37.2188021 13.1991599,37.4914728 13.8921797,37.4886291 C14.5852306,37.4915206 15.250742,37.218871 15.7408073,36.7312522 C16.2308727,36.2436333 16.5048902,35.5814443 16.5019609,34.8918533 L16.5019609,21.9869363 L28.2062656,35.8886101 C29.0761328,36.9640348 30.5260312,37.4623238 31.7651562,37.4623238 C33.4784766,37.4623238 34.7174451,36.3345135 34.7174451,34.9444177 L34.7174451,17.134563 C34.7203508,16.4450031 34.4463579,15.7828415 33.9563315,15.2952278 C33.4663051,14.8076142 32.8008401,14.5349435 32.1078203,14.5377872 Z"/>
+</svg>

scripts/assets/quickreference.svg

@@ -1,5 +1,5 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
-  <path opacity=".4" 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="currentColor"/>
-  <path 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="currentColor" />
-  <path 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="currentColor" />
+  <path 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="#c9d1d9"/>
+  <path 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="#228e6c" />
+  <path 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="#228e6c" />
 </svg>

scripts/assets/sass.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
+  <path d="M55.094 35.56a13.19 13.19 0 0 0-5.8 1.35c-.6-1.188-1.2-2.225-1.3-3-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588a14.36 14.36 0 0 0-.538 1.913c-.225 1.175-2.575 5.338-3.913 7.526-.438-.85-.813-1.6-.888-2.2-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588-.263 1.138-.538 1.913c-.263.775-3.388 7.726-4.2 9.538-.413.925-.775 1.663-1.038 2.163s-.012.038-.037.088l-.35.663v.012c-.175.313-.363.613-.45.613-.062 0-.188-.838.025-1.988.463-2.413 1.588-6.176 1.575-6.313 0-.062.213-.725-.725-1.063-.913-.338-1.238.225-1.313.225s-.138.2-.138.2 1.013-4.238-1.938-4.238c-1.85 0-4.4 2.013-5.663 3.85l-6.376 3.488-.138-.15C11.178 35.66 4.565 32.96 4.84 27.835c.1-1.863.75-6.776 12.7-12.726 9.788-4.875 17.627-3.538 18.99-.563 1.938 4.25-4.188 12.15-14.364 13.29-3.875.438-5.913-1.063-6.426-1.625-.538-.588-.613-.613-.813-.5-.325.175-.125.7 0 1.013.3.788 1.55 2.188 3.675 2.888 1.863.613 6.413.95 11.914-1.175 6.163-2.388 10.976-9.013 9.563-14.55-1.438-5.638-10.788-7.488-19.627-4.35C15.19 11.41 9.5 14.334 5.4 18.172.515 22.722-.26 26.698.064 28.348c1.138 5.888 9.25 9.726 12.5 12.564l-.45.25c-1.625.8-7.813 4.038-9.363 7.463-1.75 3.875.275 6.663 1.625 7.038 4.175 1.163 8.45-.925 10.763-4.363 2.3-3.438 2.025-7.9.963-9.938l-.038-.075 1.275-.75a74.573 74.573 0 0 1 2.35-1.325c-.4 1.088-.688 2.375-.838 4.25-.175 2.2.725 5.05 1.913 6.176.525.488 1.15.5 1.538.5 1.375 0 2-1.138 2.688-2.5.85-1.663 1.6-3.588 1.6-3.588s-.938 5.213 1.625 5.213c.938 0 1.875-1.213 2.3-1.838v.012s.025-.038.075-.125c.1-.15.15-.238.15-.238v-.025c.375-.65 1.213-2.138 2.463-4.6 1.613-3.175 3.163-7.15 3.163-7.15s.15.975.613 2.575c.275.95.875 1.988 1.338 3l-.6.825.012.013a35.62 35.62 0 0 1-.988 1.25c-1.275 1.525-2.8 3.263-3 3.763-.238.588-.188 1.025.275 1.375.338.25.938.3 1.575.25 1.15-.075 1.95-.363 2.35-.538a8.14 8.14 0 0 0 2.025-1.063c1.25-.925 2.013-2.238 1.938-3.988-.038-.963-.35-1.913-.738-2.813l.338-.5c1.975-2.888 3.5-6.063 3.5-6.063s.15.975.613 2.575c.238.813.713 1.7 1.138 2.575-1.85 1.513-3.013 3.263-3.413 4.413-.738 2.125-.163 3.088.925 3.313.488.1 1.188-.125 1.713-.35a7.76 7.76 0 0 0 2.163-1.113c1.25-.925 2.45-2.213 2.388-3.95-.038-.8-.25-1.588-.538-2.338 1.575-.65 3.613-1.025 6.2-.713 5.563.65 6.663 4.125 6.45 5.575s-1.375 2.25-1.763 2.5c-.388.238-.513.325-.475.5.05.263.225.25.563.2.463-.075 2.925-1.188 3.025-3.863.15-3.438-3.113-7.188-8.9-7.15zM12.19 50.025c-1.838 2.013-4.425 2.775-5.525 2.125-1.188-.688-.725-3.65 1.538-5.788 1.375-1.3 3.163-2.5 4.338-3.238l1.138-.688c.075-.05.125-.075.125-.075.088-.05.188-.113.288-.175.838 3.05.038 5.725-1.9 7.838zm13.44-9.138c-.638 1.563-1.988 5.575-2.8 5.35-.7-.188-1.125-3.225-.138-6.226.5-1.513 1.563-3.313 2.188-4.013 1.013-1.125 2.113-1.5 2.388-1.038.325.6-1.238 4.95-1.638 5.926zm11.088 5.3c-.275.138-.525.238-.638.163-.088-.05.113-.238.113-.238s1.388-1.488 1.938-2.175l1.088-1.388v.15c0 1.8-1.725 3-2.5 3.488zm8.55-1.95c-.2-.15-.175-.613.5-2.063.263-.575.863-1.538 1.9-2.45.125.375.2.738.188 1.075-.013 2.25-1.613 3.088-2.588 3.438z" />
+</svg>

scripts/assets/ssh.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
-  <path d="M4.5 9c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H7v.75H3.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H5v-.75h3.5V9h-4m6 0c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H13v.75H9.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H11v-.75h3.5V9h-4m5 0v6H17v-2.5h2V15h1.5V9H19v2h-2V9h-1.5Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 1024 1024">
+<path fill="currentColor" d="M924.999924,0 C979.676115,-1.00438532e-14 1023.99992,44.3238098 1023.99992,99 L1023.99992,924.999924 C1023.99992,979.676115 979.676115,1023.99992 924.999924,1023.99992 L99,1023.99992 C44.3238098,1023.99992 2.09067569e-14,979.676115 0,924.999924 L0,99 C-6.69590214e-15,44.3238098 44.3238098,2.42547079e-14 99,0 L924.999924,0 Z M297.983357,621.999996 C235.914893,621.999996 189.713556,661.247852 189.713556,713.578343 C189.713556,761.703699 223.78121,786.93446 254.5821,800.017085 L296.583318,818.239305 C325.050813,830.387461 340.451258,836.928764 340.451258,857.95441 C340.451258,877.578338 325.984169,891.595432 292.849882,891.595432 C266.715783,891.595432 238.714972,878.045577 217.714368,858.421639 C214.914289,856.085462 211.180843,856.552701 209.314121,858.888879 L177.579873,895.800557 C175.713151,897.669505 175.246467,901.407401 177.579873,903.743578 C207.447408,933.179475 249.448625,949.999996 291.916516,949.999996 C362.851901,949.999996 407.653208,907.014234 407.653208,853.749275 C407.653208,806.558398 379.185713,781.327626 342.317981,765.441584 L300.783436,748.153834 C274.649348,737.407396 255.98214,729.931614 255.98214,710.774926 C255.98214,692.552697 270.449229,680.87179 297.983357,680.87179 C322.717407,680.87179 341.384614,689.74928 360.518505,705.635322 C363.318584,707.971499 367.05203,707.03703 368.918753,704.700843 L396.452881,670.125352 C398.319604,668.256404 398.319604,664.518508 395.986198,662.182331 C371.252149,637.418799 334.85109,621.999996 297.983357,621.999996 Z M544.855967,621.999996 C482.787502,621.999996 436.586166,661.247852 436.586166,713.578343 C436.586166,761.703699 470.653819,786.93446 501.45471,800.017085 L543.455927,818.239305 C571.923422,830.387461 587.323867,836.928764 587.323867,857.95441 C587.323867,877.578338 572.856778,891.595432 539.722491,891.595432 C513.588403,891.595432 485.587591,878.045577 464.586977,858.421639 C461.786898,856.085462 458.053453,856.552701 456.18673,858.888879 L424.452483,895.800557 C422.58576,897.669505 422.119077,901.407401 424.452483,903.743578 C454.320017,933.179475 496.321234,949.999996 538.789125,949.999996 C609.72452,949.999996 654.525817,907.014234 654.525817,853.749275 C654.525817,806.558398 626.058322,781.327626 589.19059,765.441584 L547.656056,748.153834 C521.521957,737.407396 502.854749,729.931614 502.854749,710.774926 C502.854749,692.552697 517.321838,680.87179 544.855967,680.87179 C569.590016,680.87179 588.257224,689.74928 607.391114,705.635322 C610.191194,707.971499 613.924639,707.03703 615.791362,704.700843 L643.32549,670.125352 C645.192213,668.256404 645.192213,664.518508 642.858807,662.182331 C618.124758,637.418799 581.723709,621.999996 544.855967,621.999996 Z M758.127976,627.60683 L703.993075,627.60683 C701.659669,627.60683 697.926234,629.475778 697.926234,633.213664 L697.926234,938.786319 C697.926234,941.122496 700.25963,944.393152 703.993075,944.393152 L758.127976,944.393152 C760.461382,944.393152 763.728134,942.524204 763.728134,938.786319 L763.728134,808.894575 L876.198064,808.894575 L876.198064,938.786319 C876.198064,941.122496 878.064787,944.393152 881.798222,944.393152 L935.933123,944.393152 C938.266529,944.393152 941.999974,942.524204 941.999974,938.786319 L941.999974,633.213664 C941.999974,630.877486 939.666568,627.60683 935.933123,627.60683 L881.798222,627.60683 C879.464826,627.60683 876.198064,629.475778 876.198064,633.213664 L876.198064,750.022782 L763.728134,750.022782 L763.728134,633.213664 C763.728134,630.877486 761.861421,627.60683 758.127976,627.60683 Z"/>
+</svg>

scripts/assets/styled-components.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="m16.214 6.762-.075.391c-.116.741-.074.953.244 1.228l.307.254-.318 1.418c-.19.846-.423 1.555-.571 1.788-.127.201-.275.497-.307.656-.053.19-.233.381-.508.55-.243.138-.72.508-1.058.805-.27.243-.456.392-.557.456l-.33.261a1.4 1.4 0 0 0-.189.411c-.023.107-.01.178.024.23.033.05.09.085.168.107a.954.954 0 0 0 .282.023 3 3 0 0 0 .632-.112c.07-.019.125-.037.173-.053.074-.091.245-.263.548-.562.804-.793 1.111-1.227.794-1.11-.117.042-.064-.064.137-.276.424-.413.667-1.037 1.175-2.994.402-1.545.402-1.567.698-1.567.139 0 .532.024.532.024V6.762h-.902zm3.839 3.165c-.064 0-.17.096-.233.202-.116.19.021.306 1.767 1.396 1.037.657 1.873 1.217 1.852 1.26-.021.031-.868.582-1.883 1.217-1.842 1.142-1.852 1.153-1.683 1.386.212.275 0 .37 2.391-1.122L24 13.155v-.836l-1.937-1.196c-1.047-.656-1.957-1.185-2.01-1.196zm-16.085.117c-.053 0-.963.54-2.01 1.185L0 12.425v.836l1.947 1.217c1.08.666 1.99 1.217 2.032 1.217.042 0 .127-.096.212-.212.127-.201.02-.286-1.768-1.418C.72 12.996.54 12.848.71 12.732c.106-.074.91-.572 1.778-1.111 1.979-1.217 1.873-1.133 1.714-1.387-.063-.105-.17-.2-.233-.19zm8.684.023c-.292-.002-.92.443-2.8 1.978-.081.193-.088.326-.051.412.024.059.068.1.129.13.06.03.138.048.224.055.171.015.373-.012.536-.044l.11-.025a.386.386 0 0 1 .144-.118c.116-.064.603-.508 1.09-.984.857-.868 1.058-1.26.709-1.387a.24.24 0 0 0-.09-.017zm2.196.603c-.257.007-.72.305-1.513.938-.398.323-.65.497-.785.533l-.524.414c-.197.36-.226.583-.174.706a.25.25 0 0 0 .138.134.644.644 0 0 0 .24.045 2.18 2.18 0 0 0 .58-.085 3.466 3.466 0 0 0 .291-.092l.029-.012.053-.028c.1-.129.33-.372.618-.652.91-.878 1.375-1.502 1.28-1.735-.043-.113-.117-.17-.233-.166zm-2.424 1.08c-.074.008-.24.136-.539.398-.432.382-.903.602-1.066.504a3.97 3.97 0 0 1-.114.024c-.166.033-.373.06-.558.045a.708.708 0 0 1-.252-.063.337.337 0 0 1-.168-.17c-.037-.09-.037-.202.005-.345l-.65.534-1.471 1.217v1.973l4.82-3.797a.41.41 0 0 1 .016-.123c.037-.134.035-.202-.023-.196zm2.074.639c-.073 0-.195.103-.39.31-.265.283-.682.557-.903.613l-.034.018a2.191 2.191 0 0 1-.11.042c-.06.02-.138.044-.228.068-.18.049-.404.094-.604.089a.732.732 0 0 1-.275-.054.344.344 0 0 1-.184-.18c-.058-.139-.035-.334.092-.611L7.61 16.033v1.205h1.868l3.962-3.112c.103-.114.258-.27.467-.465.56-.519.687-.698.687-.963 0-.206-.023-.31-.096-.31zm.943 1.95-.339.338c-.19.18-.529.402-.761.497l-.046.02-.003.005-.01.01c-.009.007-.013.008-.02.011a3.432 3.432 0 0 1-.282.093 3.058 3.058 0 0 1-.65.115 1.035 1.035 0 0 1-.31-.027.364.364 0 0 1-.218-.144c-.048-.074-.062-.173-.035-.295a1.11 1.11 0 0 1 .095-.25l-3.197 2.526h4.252l.508-.582c.698-.814 1.016-1.396 1.016-1.894z"/>
+</svg>

scripts/assets/stylus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 64 64">
+  <path d="M9.864 42.916c1.66-1.986 1.855-4.036.57-7.844-.814-2.4-2.165-4.264-1.172-5.76 1.058-1.595 3.304-.05 1.432 2.083l.374.26c2.246.26 3.353-2.816 1.676-3.694-4.427-2.3-8.3 2.132-6.6 7.275.732 2.18 1.758 4.492.928 6.33-.716 1.58-2.1 2.506-3.027 2.54-1.937.098-.65-4.345 1.58-5.452.195-.098.472-.228.212-.553-2.75-.3-4.362.96-5.3 2.734-2.702 5.16 5.126 7.063 9.3 2.083zM58.2 27.748c.635 1.562 1.595 3.108 1.025 4.476-.472 1.172-1.1 1.66-1.774 1.774-.96.163-.7-2.848.944-3.743.146-.08.358-.472.163-.7-2.083-.114-3.255.88-3.9 2.197-1.84 3.857 4.166 4.915 7.112 1.123 1.172-1.514 1.22-3 .098-5.73-.716-1.725-1.806-3-1.123-4.15.732-1.204 2.5-.163 1.172 1.448l.293.163c1.7.098 2.4-2.18 1.107-2.75-3.434-1.465-6.64 2.23-5.126 5.9zM36.456 23.63c-1.188-.944-4.524.635-5.468 2.978-1.188 2.978-2.946 7.324-4.67 9.228-1.823 2.002-2.002.456-1.823-.7.423-2.718 3.076-9.016 4.524-10.8-.537-.797-4.052-.684-6.494 3.108-.9 1.432-2.995 6.2-5.306 9.96-.505.814-1.14.244-.65-1.66.553-2.197 2.18-8.235 4.28-12.987 5.5-1.1 11.343-1.855 15.82-1.872.602-.163 1-.7 0-.732-3.857-.13-9.65.325-15.07 1 1.04-2.063 2.163-3.733 3.3-4.433-1.237-.78-3.743-.472-5.175 1.644-.635.944-1.27 2.083-1.872 3.32-3.97.618-7.372 1.318-9.098 1.97-1.8.684-1.595 2.848-.505 2.44 2.262-.846 5.322-1.725 8.723-2.506-2.165 4.882-3.857 10.644-4.264 12.987-1 5.696 2.523 5.664 4.248 3.418 1.872-2.457 5.777-11.1 6.38-12 .18-.3.423-.146.293.13-4.362 8.707-3.987 12.076-.456 11.327 1.595-.342 4.345-3.076 5.06-4.492.146-.342.456-.3.4-.163-2.767 7.177-6.282 12.987-8.642 14.8-2.148 1.644-3.743-1.92 3.857-7.03 1.123-.765.602-1.806-.667-1.448-3.922.618-15.152 4.183-20.083 7.6-.374.26-.716.472-.7 1 .016.3.553.195.814.033 6.38-3.825 11.604-5.322 17.593-6.575.08.033.18.05.26.016.277-.065.26.08.08.195-.407.228-.814.44-.9.472-4.036 1.58-6.477 5.06-5.615 6.835.732 1.53 4.687.976 6.56-.033 4.6-2.5 7.926-7.372 10.204-14.1 1.986-5.973 4.492-12.743 5.078-12.938zM63.13 37.415c-7.47-.976-23.582.325-30.694 2.213-2.116.553-1.53 1.676-.456 1.465.016 0 .472-.114.488-.114 5.843-1.14 20.018-2.132 28.285-.553.993.18 3.97-2.8 2.376-3zm-24.6-.88c2.083-1.042 5.175-7.486 7.2-11.018.146-.26.407-.05.26.13-5.143 8.853-2.962 9.88-.928 9.748 2.718-.163 5.224-4.07 5.777-4.947.228-.342.358-.065.228.18-.13.407-.602 1.123-1.042 2.1-.618 1.383.033 1.92.57 2.165.846.407 3.157.146 3.515-1.27-2.3-.05 3.222-10.953 3.792-11.62-1.546-.895-3.938.08-5.03 2.23-2.327 4.606-4.28 8.316-5.5 8.38-2.376.13 2.734-10.27 3.564-10.595-.505-.732-3.743-.423-5.55 2.376-.65 1-4.622 8.04-5.598 9.195-1.725 2.05-1.855.293-1.367-1.758.163-.7.44-1.595.797-2.588 1.14-2.57 2.36-3.385 3.108-4.215 5.03-5.582 7.9-10.107 6.77-11.88-1-1.58-4.378-.88-6.542 2.376-3.987 5.973-7.665 14.16-8.137 17.902-.456 3.743 2.262 4.02 4.1 3.108zm2.116-10.953c.18-.407.293-.52.602-1.204 1.8-3.938 4.036-8.088 5.582-10.025.96-1 2.3.358-.13 4.1a37.625 37.625 0 0 1-4.834 6.038c-.456.52-.863.944-1.042 1.188-.13.163-.277.13-.18-.098z"/>
+</svg>

scripts/assets/sublime-text.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="M20.953.004a.397.397 0 0 0-.18.017L3.225 5.585c-.175.055-.323.214-.402.398a.42.42 0 0 0-.06.22v5.726a.42.42 0 0 0 .06.22c.079.183.227.341.402.397l7.454 2.364-7.454 2.363c-.255.08-.463.374-.463.655v5.688c0 .282.208.444.463.363l17.55-5.565c.237-.075.426-.336.452-.6.003-.022.013-.04.013-.065V12.06c0-.281-.208-.575-.463-.656L13.4 9.065l7.375-2.339c.255-.08.462-.375.462-.656V.384c0-.211-.117-.355-.283-.38z"/>
+</svg>

scripts/assets/swift.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 150 150">
+  <path d="M149.996652,41.5504118 C149.996652,40.0404009 149.969865,38.5370862 149.929684,37.0237271 C149.889479,33.7232863 149.600703,30.4305622 149.065807,27.1735006 C148.507382,23.9127729 147.466929,20.7532587 145.978615,17.7987099 C142.956518,11.8649909 138.1316,7.04156844 132.19675,4.0211156 C129.242865,2.53082012 126.082821,1.49033249 122.821331,0.934130935 C119.563242,0.396319522 116.269046,0.106431705 112.967097,0.066962791 C111.456985,0.0267851164 109.953569,0.0100444187 108.440109,0 L41.5565427,0 C40.0464306,0 38.5430153,0.0267851164 37.0295549,0.066962791 C36.2092058,0.0903997679 35.3855083,0.117184884 34.5618108,0.157362559 C32.0854761,0.256798914 29.6181641,0.516263128 27.1753203,0.934130935 C24.7417426,1.35877149 22.3608012,2.04348485 20.0734408,2.97649606 C19.3010849,3.30014955 18.5410063,3.64835606 17.7932051,4.0211156 C15.5863952,5.15055914 13.519722,6.53499141 11.6355641,8.14602353 C11.0060717,8.68507399 10.4000179,9.2442133 9.81740256,9.8200933 C7.47219368,12.1591083 5.51152349,14.8541431 4.00799143,17.8054061 C2.51889323,20.7596305 1.47840127,23.9192644 0.920800036,27.1801969 C0.390726031,30.4353902 0.106428217,33.7258611 0.0703156391,37.0237271 C0.0267869101,38.5337381 0.0100450913,40.0370527 0,41.5504118 L0,108.456284 C0,109.966295 0.0267869101,111.46961 0.0703156391,112.979621 C0.110229315,116.280076 0.39900748,119.572822 0.934193491,122.829848 C1.49106583,126.090961 2.53159273,129.250701 4.02138488,132.204638 C7.04518753,138.133686 11.8652306,142.95575 17.7932051,145.982233 C20.747852,147.46998 23.9076759,148.509267 27.1686236,149.065869 C30.4267126,149.60368 33.7209094,149.893568 37.0228582,149.933037 C38.5296219,149.973215 40.0363856,149.989956 41.549846,150 L108.446806,150 C109.956918,150 111.460333,149.973215 112.973793,149.933037 C116.276759,149.891708 119.571929,149.601833 122.831376,149.065869 C126.092204,148.508782 129.251957,147.469519 132.206795,145.982233 C138.136507,142.956565 142.95707,138.132809 145.978615,132.20129 C147.468407,129.247353 148.508934,126.087613 149.065807,122.826499 C149.603754,119.569766 149.893662,116.276895 149.933033,112.976273 C149.973213,111.46961 149.989955,109.962947 150,108.452936 L150,46.9241758 C149.996652,45.1329211 149.996652,43.3416665 149.996652,41.5504118 Z M126.598286,122.240575 C119.901558,109.206268 107.4356,112.440571 101.046922,115.721747 C100.471003,116.056561 99.8816911,116.391375 99.2890308,116.726189 L99.1483995,116.809893 C85.9223626,123.840986 68.1659896,124.356599 50.312514,116.682663 C35.779112,110.381458 23.4900254,99.8344883 15.0575919,86.4255262 C19.1601349,89.4606647 23.5534617,92.08168 28.1731327,94.2501283 C47.0445109,103.089217 66.0096433,102.449722 79.4030984,94.2501283 C60.3174249,79.5685364 44.3792134,60.4339189 32.161034,44.9588179 C29.8334165,42.2434232 27.7304143,39.3433109 25.8728068,36.2871364 C40.5051565,49.6796946 63.6088665,66.4940515 71.9061119,71.1479654 C54.3037636,52.5691391 38.7941426,29.6511239 39.5207375,30.3877146 C67.2418412,58.3178947 92.819992,74.1110689 92.819992,74.1110689 C93.7843207,74.640075 94.4941738,75.0652887 95.0734408,75.4503248 C95.6092689,74.0835027 96.0741937,72.6899392 96.4663601,71.2751948 C100.892897,55.0936363 95.9105317,36.5951653 84.6432876,21.3209527 C110.355373,36.7491797 125.553596,66.075534 119.32564,90.8785518 C119.178312,91.45778 119.007545,92.0169193 118.843475,92.5827548 C131.741372,108.452936 128.232287,125.451441 126.588241,122.243923 L126.598286,122.240575 Z"/>
+</svg>

scripts/assets/swiftui.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 150 150">
+  <path d="M149.996652,41.5504118 C149.996652,40.0404009 149.969865,38.5370862 149.929684,37.0237271 C149.889479,33.7232863 149.600703,30.4305622 149.065807,27.1735006 C148.507382,23.9127729 147.466929,20.7532587 145.978615,17.7987099 C142.956518,11.8649909 138.1316,7.04156844 132.19675,4.0211156 C129.242865,2.53082012 126.082821,1.49033249 122.821331,0.934130935 C119.563242,0.396319522 116.269046,0.106431705 112.967097,0.066962791 C111.456985,0.0267851164 109.953569,0.0100444187 108.440109,0 L41.5565427,0 C40.0464306,0 38.5430153,0.0267851164 37.0295549,0.066962791 C36.2092058,0.0903997679 35.3855083,0.117184884 34.5618108,0.157362559 C32.0854761,0.256798914 29.6181641,0.516263128 27.1753203,0.934130935 C24.7417426,1.35877149 22.3608012,2.04348485 20.0734408,2.97649606 C19.3010849,3.30014955 18.5410063,3.64835606 17.7932051,4.0211156 C15.5863952,5.15055914 13.519722,6.53499141 11.6355641,8.14602353 C11.0060717,8.68507399 10.4000179,9.2442133 9.81740256,9.8200933 C7.47219368,12.1591083 5.51152349,14.8541431 4.00799143,17.8054061 C2.51889323,20.7596305 1.47840127,23.9192644 0.920800036,27.1801969 C0.390726031,30.4353902 0.106428217,33.7258611 0.0703156391,37.0237271 C0.0267869101,38.5337381 0.0100450913,40.0370527 0,41.5504118 L0,108.456284 C0,109.966295 0.0267869101,111.46961 0.0703156391,112.979621 C0.110229315,116.280076 0.39900748,119.572822 0.934193491,122.829848 C1.49106583,126.090961 2.53159273,129.250701 4.02138488,132.204638 C7.04518753,138.133686 11.8652306,142.95575 17.7932051,145.982233 C20.747852,147.46998 23.9076759,148.509267 27.1686236,149.065869 C30.4267126,149.60368 33.7209094,149.893568 37.0228582,149.933037 C38.5296219,149.973215 40.0363856,149.989956 41.549846,150 L108.446806,150 C109.956918,150 111.460333,149.973215 112.973793,149.933037 C116.276759,149.891708 119.571929,149.601833 122.831376,149.065869 C126.092204,148.508782 129.251957,147.469519 132.206795,145.982233 C138.136507,142.956565 142.95707,138.132809 145.978615,132.20129 C147.468407,129.247353 148.508934,126.087613 149.065807,122.826499 C149.603754,119.569766 149.893662,116.276895 149.933033,112.976273 C149.973213,111.46961 149.989955,109.962947 150,108.452936 L150,46.9241758 C149.996652,45.1329211 149.996652,43.3416665 149.996652,41.5504118 Z M126.598286,122.240575 C119.901558,109.206268 107.4356,112.440571 101.046922,115.721747 C100.471003,116.056561 99.8816911,116.391375 99.2890308,116.726189 L99.1483995,116.809893 C85.9223626,123.840986 68.1659896,124.356599 50.312514,116.682663 C35.779112,110.381458 23.4900254,99.8344883 15.0575919,86.4255262 C19.1601349,89.4606647 23.5534617,92.08168 28.1731327,94.2501283 C47.0445109,103.089217 66.0096433,102.449722 79.4030984,94.2501283 C60.3174249,79.5685364 44.3792134,60.4339189 32.161034,44.9588179 C29.8334165,42.2434232 27.7304143,39.3433109 25.8728068,36.2871364 C40.5051565,49.6796946 63.6088665,66.4940515 71.9061119,71.1479654 C54.3037636,52.5691391 38.7941426,29.6511239 39.5207375,30.3877146 C67.2418412,58.3178947 92.819992,74.1110689 92.819992,74.1110689 C93.7843207,74.640075 94.4941738,75.0652887 95.0734408,75.4503248 C95.6092689,74.0835027 96.0741937,72.6899392 96.4663601,71.2751948 C100.892897,55.0936363 95.9105317,36.5951653 84.6432876,21.3209527 C110.355373,36.7491797 125.553596,66.075534 119.32564,90.8785518 C119.178312,91.45778 119.007545,92.0169193 118.843475,92.5827548 C131.741372,108.452936 128.232287,125.451441 126.588241,122.243923 L126.598286,122.240575 Z"/>
+</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/vue2.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/webstorm.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 14" height="1em" width="1em">
+  <path d="m13 5.065-.96-2.378-.6-1.44L8.65 1l-.435.42-.555-.21-1.763.938L4 1.022l-3 1.23 1.612 9.586L9.25 13l.42-2.13.075-.045h-6.57v-7.65h7.65v7.013L13 8.898l-1.313-2.46m-8.362 4.238h7.35V3.325h-7.35v7.35zm3.45-.863H3.963V9.34h2.812v.473zm2.063-5.648c.412 0 .824.15 1.14.398l-.353.525a1.383 1.383 0 0 0-.787-.3c-.248 0-.398.112-.398.284 0 .202.136.278.66.405.615.173.975.398.975.938 0 .622-.473.975-1.125.975a2.16 2.16 0 0 1-1.312-.502l.389-.489c.285.225.563.375.923.375.278 0 .45-.112.45-.3 0-.173-.114-.262-.615-.397-.623-.165-1.02-.338-1.02-.952v-.022c0-.563.45-.938 1.073-.938Zm-4.313.06.472 1.8.525-1.8h.525l.526 1.8.464-1.8h.736l-.9 3.112h-.586l-.502-1.8-.51 1.8h-.577l-.9-3.112h.728z"/>
+</svg>

scripts/assets/xpath.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M10 2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H8v2h5V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H8v6h5v-1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H7a1 1 0 0 1-1-1V8H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6zm9 16h-4v2h4v-2zm0-8h-4v2h4v-2zM9 4H5v2h4V4z"/>
+</svg>

scripts/assets/yaml.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 470.647">
+  <polygon points="235.793 0 143.978 137.674 143.978 224.949 87.702 224.949 87.702 137.674 0 0 63.25 0 119.018 88.646 175.243 0 235.793 0 235.793 0"/>
+  <path d="M330.294,175.451h-101.861l-20.717,50.024h-45.106l95.38,-224.949h46.137l91.51,224.949h-48.2l-17.144,-50.024zm-16.92,-44.911l-31.226,-82.55l-34.837,82.55h66.063z"/>
+  <polygon points="87.701 250.177 87.701 470.647 135.004 470.647 135.004 318.569 184.509 420.789 221.743 420.789 272.939 314.976 272.939 470.602 318.318 470.602 318.318 250.177 256.358 250.177 201.381 349.883 149.021 250.177 87.701 250.177 87.701 250.177"/>
+  <polygon points="512 422.735 395.638 422.735 395.638 250.125 347.442 250.125 347.442 469.647 512 469.647 512 422.737 512 422.735"/>
+</svg>

scripts/build.mjs

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