released v1.3.0

feat: add css.md cheatsheet.
chore: update package.json.
2025-06-17 04:31:22 +08:00 · 2022-10-16 01:25:11 +08:00 · 2022-10-16 01:21:33 +08:00 · 2022-10-15 13:33:34 +08:00 · 2022-10-15 13:32:34 +08:00 · 2022-10-15 13:32:12 +08:00
34 changed files with 7721 additions and 124 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -45,8 +45,8 @@ jobs:
          name: ${{ steps.create_tag.outputs.version }}
          tag: ${{ steps.create_tag.outputs.version }}
          body: |
-
-            ${{ steps.changelog.outputs.compareurl }}
+            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 }}

--- a/README.md
+++ b/README.md
@ -15,29 +15,39 @@ Quick Reference
 ## 编程

 [Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
+[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
 [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
-[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/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));-->
-[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/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));-->
+[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));-->
+[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));-->
+[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));-->
+<!--rehype:class=home-card-->
+
 ## 工具包

-[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
 [nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 193 9/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));-->
 [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));-->
 [Sublime Text](./docs/sublime-text.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));-->
 [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));-->
 [XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
@ -48,9 +58,12 @@ Quick Reference
 [Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(239 68 113/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));-->
 [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-->

 ## 其它
@ -66,7 +79,7 @@ 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/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-->

--- a/docs/c.md
+++ b/docs/c.md
--- a/docs/css.md
+++ b/docs/css.md
--- a/docs/docker.md
+++ b/docs/docker.md
@ -232,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
--- a/docs/electron.md
+++ b/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)_
--- a/docs/emmet.md
+++ b/docs/emmet.md
@ -1,7 +1,7 @@
-Emmet
+Emmet 备忘清单
 ====

-[Emmet](https://emmet.io/) 是一个用于提升 HTML 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。
+[Emmet](https://emmet.io/) 是一个用于提升 [HTML](./html.md) 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。


 Emmet 语法
--- a/docs/find.md
+++ b/docs/find.md
@ -1,7 +1,7 @@
 Find 备忘清单
 ===

-这是 Linux find 命令备忘单的快速参考列表，包含常用选项和示例。
+这是 Linux find 命令备忘清单的快速参考列表，包含常用选项和示例。

 入门
 ----
--- a/docs/grep.md
+++ b/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-Za-z]`    | 任何大小写字母
+`[0-9]`       | 任何数字
+`[0-9A-Za-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)_
--- a/docs/html.md
+++ b/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)_
--- a/docs/htop.md
+++ b/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--> 
--- a/docs/http-status-code.md
+++ b/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-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-->

 ### 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` | 未执行请求的操作。不允许的文件名

 永久性否定的完成答复，该命令不成功，错误是永久性的。如果客户端重试命令，将再次出现同样的错误。

--- a/docs/jest.md
+++ b/docs/jest.md
@ -1,7 +1,7 @@
 Jest 备忘清单
 ===

-Jest 是一款优雅、简洁的 JavaScript 测试框架。
+Jest 是一款优雅、简洁的 JavaScript 测试框架，这里介绍了它的入门和 一些 API 的索引。

 入门
 ----
@ -10,7 +10,7 @@ Jest 是一款优雅、简洁的 JavaScript 测试框架。
 ### 介绍
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-[Jest](https://jestjs.io/) 是一款优雅、简洁的 JavaScript 测试框架。
+[Jest v29](https://jestjs.io/) 是一款优雅、简洁的 JavaScript 测试框架。

 - `无需配置` 大多数 JS 项目中即装即用，无需配置
 - `优秀接口` 从 `it` 到 `expect` - Jest 将工具包整合在一处。文档齐全、不断维护，非常不错。
--- a/docs/lerna.md
+++ b/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 的任何配置文件更改
--- a/docs/package.json.md
+++ b/docs/package.json.md
@ -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
 }
 ```

+它允许对等依赖项标记为可选
+
 系统
 ----

--- a/docs/quickreference.md
+++ b/docs/quickreference.md
@ -191,6 +191,8 @@ const school = <div>学校</div>;
  ```jsx showLineNumbers
 ```

+标记语言后面添加 `showLineNumbers` 标识
+
 ### 内置类样式

 :- | -
@ -199,6 +201,7 @@ const school = <div>学校</div>;
 `wrap-text` | 超出换行
 `show-header` | 展示表头
 `style-none` | 隐藏 `<ul>` 列表样式
+`style-list` | `<table>` 单元格行展示
 <!--rehype:className=shortcuts-->

 ### 颜色标签
@ -247,6 +250,7 @@ H2 部分
 `cols-3` | `3` 栏卡片布局
 `cols-4` | `4` 栏卡片布局
 `cols-5` | `5` 栏卡片布局
+`cols-{1~6}` | `1~6` 栏卡片布局
 <!--rehype:className=show-header -->

 ### 占位布局 style 写法
@ -285,9 +289,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
@ -523,16 +529,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

@ -540,8 +546,8 @@ H2 部分

 ### 快捷键

-|      |      |
-| ---- | ---- |
+:- | :-
+:- | :-
 `V` | Vector
 `P` | Pencil
 `T` | Text
@ -561,6 +567,28 @@ 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-->`
+
 列表
 ---

@ -627,6 +655,15 @@ H2 部分

 `<!--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-->
--- a/docs/screen.md
+++ b/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>
+```
--- a/docs/sed.md
+++ b/docs/sed.md
@ -1,6 +1,8 @@
 Sed 备忘清单
 ====

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

--- a/docs/vue2.md
+++ b/docs/vue2.md
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
-  "name": "reference",
-  "version": "1.1.0",
+  "name": "@wcj/reference",
+  "version": "1.3.0",
  "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
  "author": "jaywcjlove",
  "license": "MIT",
--- a/scripts/assets/c.svg
+++ b/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>
--- a/scripts/assets/css.svg
+++ b/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>
--- a/scripts/assets/electron.svg
+++ b/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>
--- a/scripts/assets/grep.svg
+++ b/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>
--- a/scripts/assets/html.svg
+++ b/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>
--- a/scripts/assets/htop.svg
+++ b/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>
--- a/scripts/assets/lerna.svg
+++ b/scripts/assets/lerna.svg
--- a/scripts/assets/quickreference.svg
+++ b/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>
--- a/scripts/assets/vue2.svg
+++ b/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>
--- a/scripts/assets/yaml.svg
+++ b/scripts/assets/yaml.svg
@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 470.647">
+<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"/>
--- a/scripts/create.mjs
+++ b/scripts/create.mjs
@ -10,8 +10,9 @@ import { rehypeUrls } from './utils/rehypeUrls.mjs';
 import { tooltips } from './utils/tooltips.mjs';
 import { homeCardIcons } from './utils/homeCardIcons.mjs';
 import { getTocsTree } from './utils/getTocsTree.mjs';
+import { rehypeTitle } from './utils/rehypeTitle.mjs';

-const favicon = `data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.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%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23777%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3C%2Fsvg%3E`;
+const favicon = `data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.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%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E`;

 export function create(str = '', options = {}) {
  let title = str.match(/[^===]+(?=[===])/g) || [];
@ -39,6 +40,7 @@ export function create(str = '', options = {}) {
      }],
    ],
    rewrite: (node, index, parent) => {
+      rehypeTitle(node, options.filename);
      homeCardIcons(node, parent, options.isHome);
      tooltips(node, index, parent);
      htmlTagAddAttri(node, options);
--- a/scripts/style.css
+++ b/scripts/style.css
@ -1,3 +1,6 @@
+html {
+  scroll-behavior: smooth;
+}
 body {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
@ -117,10 +120,7 @@ body {
 }

 *, ::before, ::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: #e5e7eb;
+  box-sizing: border-box;
 }

 blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
@ -149,7 +149,7 @@ pur {
 }

 .wrap-body em, .wrap-body sup, .wrap-body sub {
-  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+  color: var(--color-fg-subtle);
 }

 table {
@ -211,6 +211,26 @@ table.show-header thead {
  display: table-header-group;
 }

+table.style-list td + td, table.style-list-arrow td + td {
+  padding-top: 0 !important;
+}
+
+table.style-list td, table.style-list-arrow td {
+  display: block;
+  text-align: left !important;
+}
+
+table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
+  content: '';
+  display: inline-block;
+  width: 0px;
+  height: 0px;
+  border-right: 6px solid transparent;
+  border-top: 5px solid transparent;
+  border-left: 6px solid #228e6c;
+  border-bottom: 5px solid transparent;
+}
+
 tt, code {
  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
  font-size: 1em;
@ -281,6 +301,9 @@ body.home .h1wrap .wrap-body p {
  text-indent: 2rem;
 }

+body:not(.home) .h2wrap > .wrap-body > ul {
+  list-style: initial;
+}

 body.home .h1wrap p {
  text-align: left;
@ -391,6 +414,7 @@ a.text-grey {
  padding-bottom: 0.5rem;
  border-radius: 9999px;
  transition: all .3s;
+  border: 0;
 }

 .header-nav .menu {
@ -432,6 +456,11 @@ a.text-grey {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 3rem;
+  display: inline-flex;
+}
+
+.wrap-header.h1wrap > h1 > svg {
+  margin-right: 1rem;
 }

 .h1wrap-body {
@ -459,24 +488,32 @@ a.text-grey {
  color: rgb(148 163 184/1);
 }

-body:not(.home) .h2wrap > h2 a::after {
+body:not(.home) .h2wrap > h2 a::after, body:not(.home) .h3wrap > h3 a::after {
  content: '#';
  padding-right: 0.5rem;
  color: rgb(16 185 129/1);
 }
+body:not(.home) .h3wrap > h3 a::after {
+  position: absolute;
+  left: -18px;
+  font-size: 1rem;
+  display: none;
+}
+body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
+  display: initial;
+}

 .wrap-header.h3wrap {
  z-index: 0;
-  display: flex;
-  height: 100%;
  width: 100%;
-  flex-direction: column;
+  flex: 1;
 }

 .wrap-header.h3wrap > h3 {
+  position: sticky;
+  float: right;
+  margin-top: -24px;
  color: rgb(226 232 240/1);
-  position: absolute;
-  right: 0px;
  top: 0px;
  z-index: 10;
  border-top-right-radius: 0.5rem;
@ -634,9 +671,18 @@ body:not(.home) .h2wrap > h2 a::after {
  width: 0.5rem;
  border-color: #228e6c;
  background: transparent;
+  border-style: solid;
  top: 14px;
 }

+.h2wrap-body ul.style-arrow li:before {
+  position: absolute;
+  background-color: transparent;
+  border-radius: initial;
+  left: 16px;
+  top: 13px;
+}
+
 .wrap-body ul:last-child {
  margin-bottom: 0;
 }
@ -645,7 +691,10 @@ body:not(.home) .h2wrap > h2 a::after {
  border-bottom: 0;
 }

-.h3wrap hr {
+.h3wrap hr, .h3wrap-body hr {
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
  border-bottom: 1px solid var(--color-border-default);
 }

@ -702,6 +751,9 @@ body:not(.home) .h2wrap > h2 a::after {
 .col-span-4 {
  grid-column: span 4/span 4;
 }
+.col-span-5 {
+  grid-column: span 5/span 5;
+}
 .row-span-2 {
  grid-row: span 2/span 2;
 }
@ -711,6 +763,9 @@ body:not(.home) .h2wrap > h2 a::after {
 .row-span-4 {
  grid-row: span 4/span 4;
 }
+.row-span-5 {
+  grid-row: span 5/span 5;
+}
 .wrap-text {
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
--- a/scripts/utils/homeCardIcons.mjs
+++ b/scripts/utils/homeCardIcons.mjs
@ -2,7 +2,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import { getSVGNode } from './getSVGNode.mjs';

-const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')
+export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')

 export function homeCardIcons(node, parent, isHome) {
  if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {
--- a/scripts/utils/rehypeTitle.mjs
+++ b/scripts/utils/rehypeTitle.mjs
@ -0,0 +1,19 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { getSVGNode } from './getSVGNode.mjs';
+import { ICONS_PATH } from './homeCardIcons.mjs';
+
+export function rehypeTitle(node, iconName) {
+  if (node.type === 'element' && node.tagName === 'h1' && iconName !== 'index') {
+    const iconPath = path.resolve(ICONS_PATH, `${iconName}.svg`);
+    const iconDefaultPath = path.resolve(ICONS_PATH, `list.svg`);
+    const iconExist = fs.existsSync(iconPath);
+    if (iconExist) {
+      const svgNode = getSVGNode(iconPath);
+      node.children = [ ...svgNode, ...node.children ];
+    } else {
+      const svgNode = getSVGNode(iconDefaultPath);
+      node.children = [ ...svgNode, ...node.children ];
+    }
+  }
+}
Author	SHA1	Message	Date
jaywcjlove	57e41a7fd6	released v1.3.0	2022-10-16 01:25:11 +08:00
jaywcjlove	9832aea099	feat: add `css.md` cheatsheet.	2022-10-16 01:21:33 +08:00
jaywcjlove	dcb0c1667c	chore: update `package.json`.	2022-10-15 13:33:34 +08:00
jaywcjlove	25a9ba86fa	doc: update `docs/lerna.md`.	2022-10-15 13:32:34 +08:00
jaywcjlove	cadc7dad14	website: title auto add icon.	2022-10-15 13:32:12 +08:00
jaywcjlove	a24f6a91a4	doc: update `lerna.md`.	2022-10-15 12:36:02 +08:00
jaywcjlove	0f091beebd	website: update website style.	2022-10-14 18:04:45 +08:00
jaywcjlove	2c276e72ac	feat: add `lerna.md` cheatsheet.	2022-10-14 18:02:55 +08:00
jaywcjlove	313df63ce2	website: add `ul.style-arrow` style.	2022-10-14 17:57:54 +08:00
jaywcjlove	9e3b2b913f	feat(build): add `style-list-arrow` className.	2022-10-14 16:30:07 +08:00
jaywcjlove	ce71a63350	doc: update `package.json.md`.	2022-10-14 11:07:10 +08:00
jaywcjlove	96c50ca289	doc: Update README.md	2022-10-13 18:00:38 +08:00
jaywcjlove	4460aa9246	doc: update `docs/c.md`	2022-10-13 16:40:26 +08:00
jaywcjlove	877a763274	doc: update `docs/c.md`.	2022-10-13 16:31:20 +08:00
jaywcjlove	15c899a89f	doc: update `docs/c.md`.	2022-10-13 16:15:18 +08:00
jaywcjlove	4275ee8ace	doc: update `http-status-code.md`.	2022-10-13 14:41:23 +08:00
jaywcjlove	7db4389708	feat: add `c.md` cheatsheet.	2022-10-13 01:19:47 +08:00
jaywcjlove	3b8415f692	chore: update workflows config.	2022-10-12 21:43:05 +08:00
jaywcjlove	6baf60a095	doc: update `docker.md`.	2022-10-12 17:23:53 +08:00
jaywcjlove	489f29bb14	feat: add `htop.md` cheatsheet.	2022-10-12 17:09:52 +08:00
jaywcjlove	1dad75e9b2	doc: update README.md	2022-10-12 15:04:18 +08:00
jaywcjlove	bf286ba518	released v1.2.0	2022-10-12 15:00:59 +08:00
jaywcjlove	fb96ea19c5	chore: update workflows config.	2022-10-12 14:59:35 +08:00
jaywcjlove	03a4241228	feat: add `html.md` cheatsheet.	2022-10-12 14:56:55 +08:00
jaywcjlove	c661cfa852	doc: update . (#5 )	2022-10-12 10:31:35 +08:00
jaywcjlove	31df164656	doc: update `vue2.md`. (#5 )	2022-10-11 16:39:10 +08:00
jaywcjlove	327e35baf7	doc: update `quickreference.md`.	2022-10-11 15:00:30 +08:00
jaywcjlove	518249913e	doc: update `vue2.md`. (#5 )	2022-10-11 14:50:42 +08:00
jaywcjlove	078df00bf5	doc: update `vue2.md`. (#5 )	2022-10-11 11:13:35 +08:00
jaywcjlove	79b5f6da26	doc: update `vue2.md`. (#5 )	2022-10-11 09:39:47 +08:00
jaywcjlove	878990a290	doc: update `vue2.md`. (#5 )	2022-10-11 09:09:15 +08:00
jaywcjlove	f55c4219c4	doc: update `vue2.md`. (#5 )	2022-10-11 00:51:54 +08:00
jaywcjlove	502aa0ab15	doc: update `vue2.md`. (#5 )	2022-10-11 00:31:09 +08:00
jaywcjlove	81001e2594	doc: update `vue2.md`. (#5 )	2022-10-11 00:15:31 +08:00
jaywcjlove	da18c16d26	doc: update `vue2.md`. (#5 )	2022-10-11 00:03:13 +08:00
jaywcjlove	9168e56f39	feat: add `vue2.md` cheatsheet.	2022-10-10 23:16:24 +08:00
jaywcjlove	32f0936c36	feat: add `grep.md` cheatsheet.	2022-10-10 21:48:53 +08:00
jaywcjlove	9cf8737419	feat: add `screen.md` cheatsheet.	2022-10-10 21:22:44 +08:00
jaywcjlove	d903719a33	feat: add `quickreference.md` cheatsheet.	2022-10-09 21:27:49 +08:00