released v1.25.0

website: add search arrow selection.
website: fix windows path issue. #161
2025-06-17 20:51:21 +08:00 · 2022-11-22 00:19:57 +08:00 · 2022-11-22 00:18:06 +08:00 · 2022-11-21 23:43:42 +08:00 · 2022-11-21 23:28:07 +08:00 · 2022-11-21 23:19:37 +08:00
26 changed files with 1572 additions and 309 deletions
--- a/.github/workflows/win.yml
+++ b/.github/workflows/win.yml
@ -0,0 +1,27 @@
 name: Win CI
 on:
  push:
    branches:
      - main
 jobs:
  build:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm install
      - run: npm run build
      - run: |
          cd ${{ github.workspace }}
          ls
          cd dist
          ls
      - uses: actions/upload-artifact@v3
        with:
          name: dist
          path: ${{ github.workspace }}\dist\**\*
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -98,18 +98,21 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
  <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq"/>
 </a>
 <a href="https://github.com/mofelee" title="mofelee">
  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
 </a>
 <a href="https://github.com/Alex-Programer" title="Alex">
  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
 </a>
 <a href="https://github.com/expoli" title="expoli">
  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
 </a>
 <a href="https://github.com/mofelee" title="mofelee">
  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
 </a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
 <a href="https://github.com/partoneplay" title="partoneplay">
  <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
 </a>
@ -122,9 +125,6 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/13812700839" title="花殇">
  <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
 </a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
 <a href="https://github.com/Smartdousha" title="Anko">
  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
 </a>
@ -149,6 +149,9 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/Lihuagreek" title="Lihuagreek">
  <img src="https://avatars.githubusercontent.com/u/51040740?v=4" width="42;" alt="Lihuagreek"/>
 </a>
 <a href="https://github.com/LufsX" title="LufsX">
  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
 </a>
 <a href="https://github.com/mariuszmichalowski" title="Mariusz Michalowski">
  <img src="https://avatars.githubusercontent.com/u/92091891?v=4" width="42;" alt="Mariusz Michalowski"/>
 </a>
@ -197,6 +200,9 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/lykjjj" title="lykjjj">
  <img src="https://avatars.githubusercontent.com/u/58510058?v=4" width="42;" alt="lykjjj"/>
 </a>
 <a href="https://github.com/mancuoj" title="mancuoj">
  <img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"/>
 </a>
 <a href="https://github.com/onewesong" title="onewesong">
  <img src="https://avatars.githubusercontent.com/u/17920822?v=4" width="42;" alt="onewesong"/>
 </a>
@ -212,6 +218,9 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/lvzhenbo" title="吕振波">
  <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
 </a>
 <a href="https://github.com/qyl27" title="秋雨落">
  <img src="https://avatars.githubusercontent.com/u/53731501?v=4" width="42;" alt="秋雨落"/>
 </a>
 <a href="https://github.com/lisheng741" title="芦荟柚子茶">
  <img src="https://avatars.githubusercontent.com/u/53617305?v=4" width="42;" alt="芦荟柚子茶"/>
 </a><!--GAMFC-END-->
--- a/README.md
+++ b/README.md
@ -19,142 +19,147 @@ Quick Reference
 坑已挖，需要您的参与完善和贡献！🙏
 <!--rehype:style=padding-bottom: 23px;-->
-[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0/var(\-\-bg\-opacity));&class=contributing tag&data-lang=RedHad&data-info=👆看看还缺点儿什么？-->
+[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0);&class=contributing tag&data-lang=RedHat&data-info=👆看看还缺点儿什么？-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192);&class=contributing-->
-[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
+[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
-[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->
-[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
-[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128/var(\-\-bg\-opacity));-->
+[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->
-[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->
+[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
-[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
+[NestJS](./docs/nestjs.md)<!--rehype:style=background: rgb(237 21 67);&class=contributing-->
-[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
+[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168);&class=contributing-->
 [Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->
 [Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
 <!--rehype:class=home-card-->
 ## 编程
-[Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
+[Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223);-->
-[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
+[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192);-->
-[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
+[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
-[CPP](./docs/cpp.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
+[C++](./docs/cpp.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
-[Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255/var(\-\-bg\-opacity));-->
+[Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255);-->
-[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
+[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223);-->
-[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));&class=tag&data-lang=Docker-->
+[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153);&class=tag&data-lang=Docker-->
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
-[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
-[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146/var(\-\-bg\-opacity));-->
+[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193);-->
-[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146);-->
-[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60);-->
-[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
+[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60);-->
-[Julia](./docs/julia.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
+[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
-[Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
+[Julia](./docs/julia.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
-[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
+[Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
-[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
+[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->
-[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(1 117 143/var(\-\-bg\-opacity));&class=tag&data-lang=SQL-->
+[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156);-->
-[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->
+[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(1 117 143);&class=tag&data-lang=SQL-->
-[PHP](./docs/php.md)<!--rehype:style=background: rgb(79 91 147/var(\-\-bg\-opacity));-->
+[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168);&class=contributing-->
-[Python](./docs/python.md)<!--rehype:style=background: rgb(43 91 132/var(\-\-bg\-opacity));-->
+[PHP](./docs/php.md)<!--rehype:style=background: rgb(79 91 147);-->
-[PostgreSQL](./docs/postgres.md)<!--rehype:style=background: rgb(43 109 163/var(\-\-bg\-opacity));&class=tag&data-lang=SQL-->
+[Python](./docs/python.md)<!--rehype:style=background: rgb(43 91 132);-->
-[Ruby](./docs/ruby.md)<!--rehype:style=background: rgb(204 52 45/var(\-\-bg\-opacity));-->
+[PostgreSQL](./docs/postgres.md)<!--rehype:style=background: rgb(43 109 163);&class=tag&data-lang=SQL-->
-[Rust](./docs/rust.md)<!--rehype:style=background: rgb(71 71 71/var(\-\-bg\-opacity));-->
+[Ruby](./docs/ruby.md)<!--rehype:style=background: rgb(204 52 45);-->
-[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
+[Rust](./docs/rust.md)<!--rehype:style=background: rgb(71 71 71);-->
-[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));&class=tag&data-lang=swift-->
+[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57);-->
-[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247);&class=tag&data-lang=swift-->
-[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
+[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132);-->
-[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128/var(\-\-bg\-opacity));-->
+[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230);-->
-[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
+[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
 [Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
 <!--rehype:class=home-card-->
 ## 前端
-[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205);&class=tag&data-lang=CSS-->
-[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
+[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153);-->
-[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
+[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23);-->
-[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));&class=tag&data-lang=JS-->
+[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23);&class=tag&data-lang=JS-->
-[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
+[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184);-->
-[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63);&class=tag&data-lang=CSS-->
-[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154);&class=tag&data-lang=CSS-->
-[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
+[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39);-->
-[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
+[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->
-[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93);&class=tag&data-lang=CSS-->
-[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
+[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173);-->
-[RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
+[RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155);-->
-[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198);-->
-[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
+[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131);-->
-[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
+[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->
 <!--rehype:class=home-card-->
 ## Nodejs
-[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206);-->
-[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
+[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91);-->
-[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206);-->
-[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252/var(\-\-bg\-opacity));-->
+[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252);-->
-[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
+[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0);-->
-[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[NestJS](./docs/nestjs.md)<!--rehype:style=background: rgb(237 21 67);&class=contributing-->
-[Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(33 136 182/var(\-\-bg\-opacity));-->
+[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132);-->
 [Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(33 136 182);-->
 <!--rehype:class=home-card-->
 ## 工具
-[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(98 36 134/var(\-\-bg\-opacity));-->
+[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(98 36 134);-->
-[Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54/var(\-\-bg\-opacity));-->
+[Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54);-->
-[nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 153 0/var(\-\-bg\-opacity));-->
+[nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 153 0);-->
-[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
+[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141);-->
-[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0);&class=tag&data-lang=macOS-->
-[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
+[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0);-->
-[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
+[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230);-->
-[Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8/var(\-\-bg\-opacity));-->
+[Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8);-->
-[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(32 148 220/var(\-\-bg\-opacity));-->
+[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(32 148 220);-->
-[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
+[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230);-->
-[Xcode](./docs/xcode.md)<!--rehype:style=background: rgb(24 151 233/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Xcode](./docs/xcode.md)<!--rehype:style=background: rgb(24 151 233);&class=tag&data-lang=macOS-->
 <!--rehype:class=home-card-->
 ## 命令
-[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0/var(\-\-bg\-opacity));&class=contributing tag&data-lang=RedHad&data-info=👆看看还缺点儿什么？-->
+[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0);&class=contributing tag&data-lang=RedHat&data-info=👆看看还缺点儿什么？-->
-[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Conan](./docs/conan.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=tag&data-lang=C/C++-->
+[Conan](./docs/conan.md)<!--rehype:style=background: rgb(0 193 9);&class=tag&data-lang=C/C++-->
-[CocoaPods](./docs/cocoapods.md)<!--rehype:style=background: rgb(251 0 6/var(\-\-bg\-opacity));&class=tag&data-lang=C/C++-->
+[CocoaPods](./docs/cocoapods.md)<!--rehype:style=background: rgb(251 0 6);&class=tag&data-lang=C/C++-->
-[Cargo](./docs/cargo.md)<!--rehype:style=background: rgb(71 71 71/var(\-\-bg\-opacity));&class=tag&data-lang=Rust-->
+[Cargo](./docs/cargo.md)<!--rehype:style=background: rgb(71 71 71);&class=tag&data-lang=Rust-->
-[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
+[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68);-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192);&class=contributing-->
-[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
+[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62);-->
-[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129);-->
-[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->
-[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Homebrew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87);&class=tag&data-lang=macOS-->
-[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129);-->
-[jq](./docs/jq.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=JSON-->
+[jq](./docs/jq.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=JSON-->
-[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
+[Mitmproxy](./docs/mitmproxy.md)<!--rehype:style=background: rgb(4 92 135);-->
-[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135);-->
-[OpenSSL](./docs/openssl.md)<!--rehype:style=background: rgb(114 20 18/var(\-\-bg\-opacity));-->
+[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Systemd](./docs/systemd.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[OpenSSL](./docs/openssl.md)<!--rehype:style=background: rgb(114 20 18);-->
-[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[Systemd](./docs/systemd.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99);-->
-[Sysdig](./docs/sysdig.md)<!--rehype:style=background: rgb(1 171 199/var(\-\-bg\-opacity));-->
+[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99);-->
-[Tmux](./docs/tmux.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[Sysdig](./docs/sysdig.md)<!--rehype:style=background: rgb(1 171 199);-->
-[YUM](./docs/yum.md)<!--rehype:style=background: rgb(86 86 123/var(\-\-bg\-opacity));-->
+[Tmux](./docs/tmux.md)<!--rehype:style=background: rgb(99 99 99);-->
-[CMD](./docs/cmd.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[YUM](./docs/yum.md)<!--rehype:style=background: rgb(86 86 123);-->
-[APT](./docs/apt.md)<!--rehype:style=background: rgb(30 144 255/var(\-\-bg\-opacity));-->
+[CMD](./docs/cmd.md)<!--rehype:style=background: rgb(99 99 99);-->
-[tar](./docs/tar.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
+[APT](./docs/apt.md)<!--rehype:style=background: rgb(30 144 255);-->
 [tar](./docs/tar.md)<!--rehype:style=background: rgb(215 89 62);-->
 <!--rehype:class=home-card-->
 ## 其它
-[Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=排版说明-->
+[Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=排版说明-->
-[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255/var(\-\-bg\-opacity));-->
+[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255);-->
-[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=CSS-->
-[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129);-->
-[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=HTML-->
+[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=HTML-->
-[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129);-->
-[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129);-->
 <!--rehype:class=home-card-->
 ## 看到缺少什么了吗？
@ -178,18 +183,21 @@ Quick Reference
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
  <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq"/>
 </a>
 <a href="https://github.com/mofelee" title="mofelee">
  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
 </a>
 <a href="https://github.com/Alex-Programer" title="Alex">
  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
 </a>
 <a href="https://github.com/expoli" title="expoli">
  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
 </a>
 <a href="https://github.com/mofelee" title="mofelee">
  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
 </a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
 <a href="https://github.com/partoneplay" title="partoneplay">
  <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
 </a>
@ -202,9 +210,6 @@ Quick Reference
 <a href="https://github.com/13812700839" title="花殇">
  <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
 </a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
 <a href="https://github.com/Smartdousha" title="Anko">
  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
 </a>
@ -229,6 +234,9 @@ Quick Reference
 <a href="https://github.com/Lihuagreek" title="Lihuagreek">
  <img src="https://avatars.githubusercontent.com/u/51040740?v=4" width="42;" alt="Lihuagreek"/>
 </a>
 <a href="https://github.com/LufsX" title="LufsX">
  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
 </a>
 <a href="https://github.com/mariuszmichalowski" title="Mariusz Michalowski">
  <img src="https://avatars.githubusercontent.com/u/92091891?v=4" width="42;" alt="Mariusz Michalowski"/>
 </a>
@ -277,6 +285,9 @@ Quick Reference
 <a href="https://github.com/lykjjj" title="lykjjj">
  <img src="https://avatars.githubusercontent.com/u/58510058?v=4" width="42;" alt="lykjjj"/>
 </a>
 <a href="https://github.com/mancuoj" title="mancuoj">
  <img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"/>
 </a>
 <a href="https://github.com/onewesong" title="onewesong">
  <img src="https://avatars.githubusercontent.com/u/17920822?v=4" width="42;" alt="onewesong"/>
 </a>
@ -292,6 +303,9 @@ Quick Reference
 <a href="https://github.com/lvzhenbo" title="吕振波">
  <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
 </a>
 <a href="https://github.com/qyl27" title="秋雨落">
  <img src="https://avatars.githubusercontent.com/u/53731501?v=4" width="42;" alt="秋雨落"/>
 </a>
 <a href="https://github.com/lisheng741" title="芦荟柚子茶">
  <img src="https://avatars.githubusercontent.com/u/53617305?v=4" width="42;" alt="芦荟柚子茶"/>
 </a><!--GAMFC-END-->
@ -304,8 +318,8 @@ Quick Reference
 由于中国国内访问，时常打不开，你可以访问下面镜像网站。推荐我的[镜像网站](https://github.com/jaywcjlove/reference/issues/102#issue-1451649637)
-[ecdata.cn](http://ref.ecdata.cn/)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));height: 3rem;-->
+[ecdata.cn](http://ref.ecdata.cn/)<!--rehype:style=background: rgb(16 185 129);height: 3rem;-->
-[mofe.io](http://quickref.mofe.io)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));height: 3rem;-->
+[mofe.io](http://quickref.mofe.io)<!--rehype:style=background: rgb(16 185 129);height: 3rem;-->
 <!--rehype:class=home-card&style=margin:1.2rem 0;display: flex;justify-content: center;-->
 如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 [docker](https://hub.docker.com/r/wcjiang/reference) 快捷部署 web 版。
--- a/docs/cs.md
+++ b/docs/cs.md
@ -68,7 +68,7 @@ var bo = false;
    用于文档 **/
 ```
-### Strings
+### 字符串
 ```cs
 string first = "John";
@ -78,11 +78,11 @@ string name = first + " " + last;
 Console.WriteLine(name); // => John Doe
 ```
-查看: [Strings](#c-字符串)
+查看: [C#字符串](#c-字符串)
-### User Input
+### 用户输入
-```cs
+```cs showLineNumbers
 Console.WriteLine("Enter number:");
 if(int.TryParse(Console.ReadLine(),out int input))
 {
@ -90,9 +90,8 @@ if(int.TryParse(Console.ReadLine(),out int input))
  Console.WriteLine($"You entered {input}");
 }
 ```
 <!--rehype:className=wrap-text-->
-### 条件句
+### 条件判断
 ```cs
 int j = 10;
@ -170,7 +169,7 @@ Console.WriteLine(name); // => John Doe
 ### 逐字字符串
-```cs
+```cs showLineNumbers
 string longString = @"I can type any characters in here !#@$%^&*()__+ '' \n \t except double quotes and I will be taken literally. I even work with multiple lines.";
 ```
 <!--rehype:className=wrap-text-->
@ -199,10 +198,7 @@ Console.WriteLine(sb.ToString());
 对于频繁拼接字符串的场景（如：成百上千次循环），使用 `System.Text.StringBuilder` 提升性能
 <!--rehype:className=wrap-text-->
 ### 原始字符串文本
 <!--rehype:wrap-class=col-span-2-->
 ```cs
@ -217,18 +213,16 @@ string multiLine = """
 Console.WriteLine(multiLine); // => Content begin "Hello World!" /\n<>"" end.
 ```
 <!--rehype:className=wrap-text-->
 杂项
 -----------
-### 一般 .NET 条款
+### 常用 .NET 概念
-<!--rehype:wrap-class=col-span-2-->
+<!--rehype:wrap-class=col-span-3-->
-条款 | 定义
+概念 | 中文名 | 定义
-:- | -
+:- | -|--
-Runtime | 执行给定的已编译代码单元所需的服务集合
+Runtime | 运行时 | 执行给定的已编译代码单元所需的服务集合
-Common Language Runtime (CLR) | 主要定位、加载和托管 .NET 对象。<br/>CLR 还处理内存管理、应用程序托管、线程协调、执行安全检查和其他低级细节
+Common Language Runtime (CLR) | 通用语言运行库 | 主要定位、加载和托管 .NET 对象。<br/>CLR 还处理内存管理、应用程序托管、线程协调、执行安全检查和其他低级细节
-Managed code | 在 `.NET` 运行时编译和运行的代码。 C#/F#/VB 就是例子
+Managed code | 托管代码 | 在 `.NET` 运行时编译和运行的代码。 C#/F#/VB 就是例子
-Unmanaged code | 直接编译为机器代码且不能由 .NET 运行时直接托管的代码。<br/>不包含空闲内存管理、垃圾收集等。从 C/C++ 创建的 DLL 就是示例
+Unmanaged code | 非托管代码 | 直接编译为机器代码且不能由 .NET 运行时直接托管的代码。<br/>不包含空闲内存管理、垃圾收集等。从 C/C++ 创建的 DLL 就是示例
 <!--rehype:className=show-header-->
--- a/docs/css.md
+++ b/docs/css.md
@ -1260,6 +1260,186 @@ li::before {
 }
 ```
 CSS 函数
 -----------
 ### calc()
 ```css
 width: calc(100% - 80px);
 ```
 声明 CSS 属性值时执行一些计算
 ### clamp()
 ```css
 font-size: clamp(1rem, 10vw, 2rem);
 ```
 设置随窗口大小改变的字体大小
 ### attr()
 ```css
 p:before {
  content: attr(data-foo) " ";
 }
 ```
 获取选择到的元素的某一 HTML 属性值
 ### counter()
 <!--rehype:wrap-class=row-span-2-->
 返回一个代表计数器的当前值的字符串
 ```html
 <ol>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 ```
 ```css
 ol {
  counter-reset: listCounter;
 }
 li {
  counter-increment: listCounter;
 }
 li::after {
  content: "[" counter(listCounter) "] == ["
    counter(listCounter, upper-roman) "]";
 }
 ```
 显示
 ```
 1. [1]==[I]
 2. [2]==[II]
 3. [3]==[III]
 ```
 ### counters()
 ```css
 ol {
  counter-reset: count;
 }
 li {
  counter-increment: count;
 }
 li::marker {
   content: counters(count, '.', upper-alpha) ') ';
 }
 li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
 }
 ```
 嵌套计数器，返回表示指定计数器当前值的连接字符串
 ### env()
 ```html
 <meta name="viewport" content="... viewport-fit=cover">
 ```
 <!--rehype:className=wrap-text-->
 ---
 ```css
 body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
 }
 ```
 用户代理定义的环境变量值插入你的 CSS 中
 ### fit-content()
 ```css
 fit-content(200px)
 fit-content(5cm)
 fit-content(30vw)
 fit-content(100ch)
 ```
 将给定大小夹紧为可用大小
 ### max()
 从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
 ```css
 width: max(10vw, 4em, 80px);
 ```
 例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽
 ### min()
 ```css
 width: min(1vw, 4em, 80px);
 ```
 从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
 ### minmax()
 ```css
 minmax(200px, 1fr)
 minmax(400px, 50%)
 minmax(30%, 300px)
 minmax(100px, max-content)
 minmax(min-content, 400px)
 minmax(max-content, auto)
 minmax(auto, 300px)
 minmax(min-content, auto)
 ```
 ### repeat() 轨道列表的重复片段
 ```css
 repeat(auto-fill, 250px)
 repeat(auto-fit, 250px)
 repeat(4, 1fr)
 repeat(4, [col-start] 250px [col-end])
 repeat(4, [col-start] 60% [col-end])
 ```
 定义了一个长宽范围的闭区间
 ### url()
 ```css
 background: url("topbanner.png") #00D no-repeat fixed;
 list-style: square url(http://www.example.com/redball.png)
 ```
 <!--rehype:className=wrap-text-->
 ### var()
 ```css
 :root {
  --main-bg-color: pink;
 }
 body {
  background-color: var(--main-bg-color);
 }
 ```
 <!--rehype:className=wrap-text-->
 代替元素中任何属性中的值的任何部分
 CSS 技巧
 ------------
--- a/docs/flutter.md
+++ b/docs/flutter.md
@ -0,0 +1,421 @@
 Flutter 备忘清单
 ===
 包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考
 入门
 ---
 ### macOS 操作系统上安装和配置
 ```bash
 $ sudo softwareupdate --install-rosetta --agree-to-license
 ```
 <!--rehype:className=wrap-text-->
 在 [Apple 芯片的 Mac 电脑](https://support.apple.com/zh-cn/HT211814) 上，还需要安装 [Rosetta 2](https://github.com/flutter/website/pull/7119#issuecomment-1124537969) 环境因为 一些辅助工具 仍然需要，通过手动运行上面的命令来安装
 #### 获取 Flutter SDK
 - 安装包来获取最新的 stable Flutter SDK：
  - Intel [`flutter_macos_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.8-stable.zip)
  - Apple 芯片 [`flutter_macos_arm64_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.3.8-stable.zip)  
    想要获取到其他版本的安装包，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
 - 将文件解压到目标路径, 比如:
    ```bash
    $ cd ~/development
    $ unzip ~/Downloads/flutter_macos_3.3.8-stable.zip
    ```
    <!--rehype:className=wrap-text-->
 - 配置 `flutter` 的 PATH 环境变量：
    ```bash
    $ export PATH="$PATH:`pwd`/flutter/bin"
    ```
 - 运行 `flutter doctor` 命令
 <!--rehype:className=style-timeline-->
 ### Windows 操作系统上安装和配置
 - 点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：
  - [flutter_windows_3.3.8-stable.zip](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.8-stable.zip)
  - 要查看其他发行通道和以往的版本，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
 - 将压缩包解压，然后把其中的 `flutter` 目录整个放在你想放置 `Flutter SDK` 的路径中（例如 `C:\src\flutter`）
 - 更新 `path` 环境变量，在开始菜单的搜索功能键入`「env」`，然后选择 `编辑系统环境变量`。在 **`用户变量`** 一栏中，检查是否有 **`Path`** 这个条目：
  - 如果存在这个条目，以 `;` 分隔已有的内容，加入 `flutter\bin` 目录的完整路径。
  - 如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 `flutter\bin` 所在的完整路径作为新变量的值
 <!--rehype:className=style-timeline-->
 如果你不想安装指定版本的安装包。可以忽略步骤 `1` 和 `2`。从 `GitHub` 上的 `Flutter repo` 获取源代码，并根据需要，切换到指定的分支或标签
 ```bash
 C:\src>git clone https://github.com/flutter/flutter.git -b stable
 ```
 <!--rehype:className=wrap-text-->
 基础组件
 ---
 ### Text 样式文本
 ```dart
 Text("Hello world",
  textAlign: TextAlign.left,
 );
 Text("Hello world! I'm Jack. "*4,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
 );
 Text("Hello world",
  textScaleFactor: 1.5,
 );
 ```
 ### TextStyle 指定文本显示的样式
 ```dart
 Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,  
    fontFamily: "Courier",
    background: Paint()..color=Colors.yellow,
    decoration:TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
 );
 ```
 <!--rehype:className=wrap-text-->
 ### TextSpan 文本的一个“片段”
 ```dart
 Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutter.dev",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
 ))
 ```
 ### DefaultTextStyle 文本默认样式  
 <!--rehype:wrap-class=row-span-4-->
 ```dart
 DefaultTextStyle(
  // 1.设置文本默认样式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"),
      Text("I am Jack"),
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不继承默认样式
          color: Colors.grey
        ),
      ),
    ],
  ),
 );
 ```
 <!--rehype:className=wrap-text-->
 ### 字体设置加载
 <!--rehype:wrap-class=row-span-4-->
 - 在 asset 中声明，要先在 `pubspec.yaml` 中声明它
    ```yaml
    flutter:
      fonts:
        - family: Raleway
          fonts:
            - asset: assets/fonts/Raleway-Regular.ttf
            - asset: assets/fonts/Raleway-Medium.ttf
              weight: 500
            - asset: assets/fonts/Raleway-SemiBold.ttf
              weight: 600
        - family: AbrilFatface
          fonts:
            - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
    ```
 - 将字体文件复制到在 `pubspec.yaml` 中指定的位置
 - 使用字体
    ```dart
    // 声明文本样式
    const textStyle = const TextStyle(
      fontFamily: 'Raleway',
    );
    // 使用文本样式
    var buttonText = const Text(
      "Use the font for this text",
      style: textStyle,
    );
    ```
 <!--rehype:className=style-timeline-->
 ### ElevatedButton "漂浮"按钮
 ```dart
 ElevatedButton(
  child: Text("normal"),
  onPressed: () {},
 );
 ```
 ### TextButton 文本按钮
 ```dart
 TextButton(
  child: Text("normal"),
  onPressed: () {},
 )
 ```
 ### OutlineButton 边框阴影且背景透明按钮
 ```dart
 OutlineButton(
  child: Text("normal"),
  onPressed: () {},
 )
 ```
 ### IconButton 可点击的图标按钮
 ```dart
 IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
 )
 ```
 ### 带图标的按钮
 ```dart
 ElevatedButton.icon(
  icon: Icon(Icons.send),
  label: Text("发送"),
  onPressed: _onPressed,
 ),
 OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
 ),
 TextButton.icon(
  icon: Icon(Icons.info),
  label: Text("详情"),
  onPressed: _onPressed,
 ),
 ```
 ### 从 asset 中加载图片
 - 在工程根目录下创建一个`images目录`，并将图片 `aaa.png` 拷贝到该目录。
 - 在 `pubspec.yaml` 中的 `flutter` 部分添加如下内容：
    ```yaml
    assets:
      - images/aaa.png
    ```
    注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。
 - 加载该图片
    ```dart
    Image(
      image: AssetImage("images/aaa.png"),
      width: 100.0
    );
    ```
    Image 也提供了一个快捷的构造函数 `Image.asset` 用于从 `asset` 中加载、显示图片：
    ```dart
    Image.asset("images/aaa.png",
      width: 100.0,
    )
    ```
 <!--rehype:className=style-timeline-->
 ### 从网络加载图片
 ```dart
 Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
 )
 ```
 <!--rehype:className=wrap-text-->
 Image 也提供了一个快捷的构造函数 `Image.network` 用于从网络加载、显示图片：
 ```dart
 Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
 )
 ```
 <!--rehype:className=wrap-text-->
 ### Image 参数
 <!--rehype:wrap-class=row-span-2-->
 ```dart
 const Image({
  ...
  this.width, // 图片的宽
  this.height, // 图片高度
  this.color, // 图片的混合色值
  this.colorBlendMode, // 混合模式
  this.fit,// 缩放模式
  // 对齐方式
  this.alignment = Alignment.center,
  // 重复方式
  this.repeat = ImageRepeat.noRepeat,
  ...
 })
 ```
 ### Switch 单选开关
 ```dart
 Switch(
  value: true,//当前状态
  onChanged:(value){
    // 重新构建页面  
  },
 ),
 ```
 ### Checkbox 复选框
 <!--rehype:wrap-class=row-span-2-->
 ```dart
 Checkbox(
  value: true,
  // 选中时的颜色
  activeColor: Colors.red,
  onChanged:(value){
    // ...
  },
 )
 ```
 ### TextField 文本输入框
 ```dart
 TextField(
    autofocus: true,
    onChanged: (v) {
      print("onChange: $v");
    }
 )
 ```
 ### LinearProgressIndicator 线性、条状的进度条
 模糊进度条(会执行一个动画)
 ```dart
 LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
 ),
 ```
 <!--rehype:className=wrap-text-->
 进度条显示 `50%`
 ```dart
 LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
 )
 ```
 <!--rehype:className=wrap-text-->
 ### CircularProgressIndicator 圆形进度条
 模糊进度条(会执行一个旋转动画)
 ```dart
 CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
 ),
 ```
 <!--rehype:className=wrap-text-->
 进度条显示 `50%`，会显示一个半圆
 ```dart
 CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
 ),
 ```
 <!--rehype:className=wrap-text-->
 ### 自定义尺寸
 线性进度条高度指定为 `3`
 ```dart
 SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
 ),
 ```
 圆形进度条直径指定为 `100`
 ```dart
 SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
 ),
 ```
 另见
 ---
 - [Dart 备忘清单](./dart.md) _(jaywcjlove.github.io)_
 - [flutter 官网](https://flutter.dev) _(flutter.dev)_
 - [flutter 中文开发者社区](https://flutterchina.club/) _(flutterchina.club)_
--- a/docs/git.md
+++ b/docs/git.md
@ -928,7 +928,59 @@ Host github.com
 ```
 <!--rehype:className=wrap-text-->
 Conventional Commmits
 ----
 ### 格式
 <!--rehype:wrap-class=col-span-3-->
 ```text
 <type>(<scope>): <short summary>
  │       │             │
  │       │             └─⫸ 紧凑简短的描述，无需大写，也不需要用句号结尾
  │       │
  │       └─⫸ Commit 范围: animations|bazel|benchpress|common|compiler|compiler-cli|core|
  │                          elements|forms|http|language-service|localize|platform-browser|
  │                          platform-browser-dynamic|platform-server|router|service-worker|
  │                          upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve|
  │                          devtools....
  │
  └─⫸ Commit 类型: build|ci|doc|docs|feat|fix|perf|refactor|test
                    website|chore|style|type|revert
 ```
 ### 常用
 <!--rehype:wrap-class=row-span-1-->
 |   类型   |  描述 |
 | ----------|------------ |
 | `feat:`   | 新特性     |
 | `fix(scope):`   | 修复 scope 中的 Bug |
 | `feat!:` / `feat(scope)!:` | breaking change /  重构 API |
 | `chore(deps):` | 更新依赖 |
 <!--rehype:className=left-align-->
 ### Commit 类型
 <!--rehype:wrap-class=col-span-2-->
 |   类型   |  描述 |
 | ----------|------------ |
 | `build:` | 变更影响的是**构建系统**或者**外部依赖** (如: gulp, npm) |
 | `ci:` | 修改了 CI 配置文件或脚本 (如: Github Action, Travis) |
 | `chore:` | **【重要】** 变更不影响源代码或测试（如更新了辅助工具、库等) |
 | `docs:` | 只修改了文档 |
 | `feat:` | **【重要】** 一个新特性 |
 | `fix:` | **【重要】** 修复了一个 Bug |
 | `perf:` | 增强性能的代码变更 |
 | `refactor:` | 并非修复 Bug 或添加新特性的代码变更 |
 | `revert:` | 回退代码 |
 | `style:` | 变更不影响一些有意义的代码 (如: 删除空格、格式化代码、添加分号等) |
 | `test:` | 添加测试代码或修正已有的测试 |
 <!--rehype:className=left-align-->
 另见
 ---
 - [最常用的 git 提示和技巧](https://github.com/git-tips/tips)
 - [Conventional Commits 官方网站](https://www.conventionalcommits.org/zh-hans/v1.0.0/) _(conventionalcommits.org)_
 - [Conventional Commits Cheatsheet](https://gist.github.com/Zekfad/f51cb06ac76e2457f11c80ed705c95a3) _(gist.github.com)_
--- a/docs/golang.md
+++ b/docs/golang.md
@ -401,7 +401,7 @@ for _, num := range nums {
 fmt.Println("sum:", sum)
 ```
-### While 循环
+### For 循环
 ```go
 i := 1
@ -701,22 +701,22 @@ Golang 并发
 ```go
 package main
 import (
-        "fmt"
+    "fmt"
-        "time"
+    "time"
 )
 func f(from string) {
-        for i := 0; i < 3; i++ {
+    for i := 0; i < 3; i++ {
-                fmt.Println(from, ":", i)
+            fmt.Println(from, ":", i)
-        }
+    }
 }
 func main() {
-        f("direct")
+    f("direct")
-        go f("goroutine")
+    go f("goroutine")
-        go func(msg string) {
+    go func(msg string) {
-                fmt.Println(msg)
+            fmt.Println(msg)
-        }("going")
+    }("going")
-        time.Sleep(time.Second)
+    time.Sleep(time.Second)
-        fmt.Println("done")
+    fmt.Println("done")
 }
 ```
@ -728,23 +728,23 @@ func main() {
 ```go
 package main
 import (
-        "fmt"
+    "fmt"
-        "sync"
+    "sync"
-        "time"
+    "time"
 )
 func w(id int, wg *sync.WaitGroup) {
-        defer wg.Done()
+    defer wg.Done()
-        fmt.Printf("%d starting\n", id)
+    fmt.Printf("%d starting\n", id)
-        time.Sleep(time.Second)
+    time.Sleep(time.Second)
-        fmt.Printf("%d done\n", id)
+    fmt.Printf("%d done\n", id)
 }
 func main() {
-        var wg sync.WaitGroup
+    var wg sync.WaitGroup
-        for i := 1; i <= 5; i++ {
+    for i := 1; i <= 5; i++ {
-                wg.Add(1)
+            wg.Add(1)
-                go w(i, &wg)
+            go w(i, &wg)
-        }
+    }
-        wg.Wait()
+    wg.Wait()
 }
 ```
--- a/docs/homebrew.md
+++ b/docs/homebrew.md
@ -77,7 +77,7 @@ Cask 命令用于与图形应用程序交互
 `brew upgrade`  | 升级所有软件包
 `brew list`     | 已安装列表
 `brew outdated` | 升级需要什么？
-`brew doctor`   | 诊断冲泡问题
+`brew doctor`   | 诊断 brew 问题
 `brew pin <formula>` | 防止指定软件包升级
 `brew unpin <formula>` | 允许升级指定的软件包
@ -86,11 +86,14 @@ Cask 命令用于与图形应用程序交互
 ```bash
 $ brew cleanup # 删除旧版本的已安装软件包
 $ brew cleanup <formula> # 删除旧版本指定软件包
 $ brew cleanup -s # 删除未安装的软件包
 $ brew cleanup --prune=all # 删除所有 Homebrew 缓存
 $ rm -rf $(brew --cache) # 直接删除 Homebrew 的缓存目录
 # 显示所有将被删除的软件包(试运行)
 $ brew cleanup -n
 ```
-### brew 源码仓库
+### Brew 源码仓库
 ```bash
 # 列出所有当前点击的源码仓库（点击）
@ -111,7 +114,7 @@ $ brew untap <user/repo>
 $ brew list
 # 显示所有本地可用的 brew 配方
 $ brew search
-# 对用于 brew 的软件包名称执行子字符串搜索
+# 搜索包含指定字符的 brew 配方
 $ brew search <text>
 # 显示有关软件包的信息
 $ brew info <formula>
--- a/docs/markdown.md
+++ b/docs/markdown.md
@ -158,19 +158,27 @@ console.log("This is a block code")
 ### 表格
 ```markdown
-|     左栏   |     中间栏     |  右栏     |
+| 左栏     | 中间栏   | 右栏  |
-| ----------| ------------ | --------- |
+| -------- | -------- | ----- |
-| 单元格 1   |   居中        |     $1600 |
+| 单元格 1 | 居中     | $1600 |
-| 单元格 2   |   单元格 3    |       $12 |
+| 单元格 2 | 单元格 3 | $12   |
 ```
 简单的风格
 ```markdown
- 左栏 | 中间栏 | 右栏
+左栏     | 中间栏   | 右栏  
-:-------: | :-------:|:-------:
+-------- | -------- | -----
-单元格 1   | 居中      |    $1600
+单元格 1 | 居中     | $1600
-单元格 2   | 单元格 3  |     $12
+单元格 2 | 单元格 3 | $12 
 ```
 增加 `:` 改变文字对齐方式
 ```markdown
 左栏     |  中间栏  |   右栏 
 :------- | :------: | -----: 
 左对齐   |   居中   | 右对齐
 ```
 Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
@ -222,18 +230,18 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 | 字符 | 转义 | 描述 |
 |------------|--------|-------------|
-| \\         | \\\\   | backslash 反斜杠             |
+| <pur>\\</pur>         | \\\\   | backslash 反斜杠             |
-| \`         | \\\`   | backtick 反引号              |
+| <pur>\`</pur>         | \\\`   | backtick 反引号              |
-| \*         | \\\*   | asterisk 星号                |
+| <pur>\*</pur>         | \\\*   | asterisk 星号                |
-| \_         | \\\_   | underscore 下划线            |
+| <pur>\_</pur>         | \\\_   | underscore 下划线            |
-| \{\}       | \\\{\} | curly braces 花括号          |
+| <pur>\{\}</pur>       | \\\{\} | curly braces 花括号          |
-| \[\]       | \\\[\] | square brackets 方括号       |
+| <pur>\[\]</pur>       | \\\[\] | square brackets 方括号       |
-| \(\)       | \\\(\) | parentheses 圆括号           |
+| <pur>\(\)</pur>       | \\\(\) | parentheses 圆括号           |
-| \#         | \\\#   | hash mark 哈希标记           |
+| <pur>\#</pur>         | \\\#   | hash mark 哈希标记           |
-| \+         | \\\+   | plus sign 加号               |
+| <pur>\+</pur>         | \\\+   | plus sign 加号               |
-| \-         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
+| <pur>\-</pur>         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
-| \.         | \\\.   | dot 点                      |
+| <pur>\.</pur>         | \\\.   | dot 点                      |
-| \!         | \\\!   | exclamation mark 感叹号      |
+| <pur>\!</pur>         | \\\!   | exclamation mark 感叹号      |
 ### 行内 HTML 元素
 <!--rehype:wrap-class=col-span-2-->
--- a/docs/mitmproxy.md
+++ b/docs/mitmproxy.md
@ -0,0 +1,282 @@
 Mitmproxy 备忘清单
 ====
 [Mitmproxy](https://mitmproxy.org/) 是一个免费开源的交互式 HTTPS 代理。这是 mitmproxy 的快速参考备忘单。
 入门
 -----
 ### 使用
 <!--rehype:wrap-class=col-span-2-->
 选项 | 范例 | 描述
 :--|--|--
 `-p`   | mitmproxy -p 8001                                  | 在端口 `8001` 上启动代理
 `-m`   | mitmproxy -p 8001 -m reverse:<http://127.0.0.1:4000> | `8001` 端口反向代理到4000端口
 `-w`   | mitmproxy -p 8001 -w traffic.mitm                  | 流到达时流向文件
 `-r`   | mitmproxy -r traffic.mitm                          | 从文件中读取流
 `-C`   | mitmproxy -C traffic.mitm                          | 从保存的文件重放客户端请求
 `-S`   | mitmproxy -S traffic.mitm                          | 从保存的文件重放服务器响应
 `-s`   | mitmproxy -s myScript.py                           | 执行脚本
 `-h`   | mitmproxy -h                                       | `mitmproxy` 快速帮助
 ### 移动
 ```markdown
        k                 Ctrl b
        ▲                   ▲▲
        │                   ││
 h ◀ ─── + ─── ▶ l           ││ page
        │                   ││
        ▼                   ▼▼
        j             Ctrl f / Space 
 ```
 ---
 :---|---
 :---|---
 `h`, `j`, `k` ,`l`   | 左、下、上、右
 `Ctrl` `b`           | 向上翻页
 `Space` / `Ctrl` `f` | 向下翻页
 `g` / `G`            | 转到开头/结尾
 `Arrows`             | 上下左右
 <!--rehype:className=shortcuts-->
 ### 安装
 - [mitmproxy 文档](https://docs.mitmproxy.org/stable/) _(mitmproxy.org)_
 - [mitmproxy 开源仓库](https://github.com/mitmproxy/mitmproxy) _(github.com)_
 ---
 ```bash
 $ brew install mitmproxy # macOS
 ```
 ### 代理模式
 Argument | Effect
 :-- | --
 `-R REVERSE_PROXY`, `--reverse REVERSE_PROXY` | 将所有请求转发到上游 HTTP 服务器：`http[s]://host[:port]`。客户端始终可以通过 `HTTPS` 和 `HTTP` 进行连接，与服务器的连接由指定的方案决定
 `--socks` | 设置 `SOCKS5` 代理模式
 `-T`, `--transparent` | 设置透明代理模式
 `-U UPSTREAM_PROXY`, `--upstream UPSTREAM_PROXY` | 将所有请求转发到上游代理服务器：`http://host[:port]`
 <!--rehype:className=style-list-->
 ### 流（视图）
 <!--rehype:wrap-class=row-span-2-->
 :---|---
 :---|---
 `A`        | 恢复所有拦截的流
 `D`        | 重复流
 `F`        | 设置焦点跟随
 `L`        | 从文件加载流
 `M`        | 切换查看标记流
 `S`        | 开始服务器回放
 `U`        | 取消设置所有标记
 `V`        | 还原对此流的更改
 `X`        | 杀死这个流
 `Z`        | 清除所有未显示的流
 `a`        | 恢复此拦截流
 `b`        | 将响应主体保存到文件
 `d`        | 从视图中删除流
 `e`        | 将此流导出到文件
 `f`        | 设置视图过滤器
 `m`        | 在此流程上切换标记
 `n`        | 创建新流程
 `o`        | 设置流列表顺序
 `r`        | 重播此流程
 `v`        | 反向流列表顺序
 `w`        | 将列出的流程保存到文件
 `\|`       | 在此流上运行脚本
 `Ctrl` `l` | 将剪辑发送到剪贴板
 <!--rehype:className=shortcuts-->
 ### 常见的快捷键
 :---|---
 :---|---
 `q`     | 返回/退出
 `z`     | 清除流列表
 `:`     | 命令提示符
 `E`     | 查看事件日志
 `O`     | 查看选项
 `r`     | 重播此流程
 `Tab`   | 下一个
 `Enter` | 选择
 <!--rehype:className=shortcuts-->
 ### 全局键绑定
 :---|---
 :---|---
 `-`            | 循环到下一个布局
 `?`            | 查看帮助
 `B`            | 启动附加的浏览器
 `C`            | 查看命令
 `I`            | 切换拦截
 `K`            | 查看按键绑定
 `P`            | 查看流程详细信息
 `Q`            | 立即退出
 `W`            | 流式传输到文件
 `i`            | 设置拦截
 `Ctrl` `right` | 聚焦下一个布局窗格
 `Shift` `tab`  | 聚焦下一个布局窗格
 <!--rehype:className=shortcuts-->
 ### 代理选项
 <!--rehype:wrap-class=col-span-2-->
 :---|---
 :---|---
 `-b ADDR`, `--bind-address ADDR` | 将代理绑定到的地址（默认为所有接口）
 `-I HOST`, `--ignore HOST` | 忽略主机并转发所有流量而不对其进行处理。在透明模式下，建议使用 IP 地址（范围），而不是主机名。在常规模式下，仅忽略 SSL 流量并应使用主机名。提供的值被解释为正则表达式并匹配 ip 或主机名。可以多次通过
 `--tcp HOST` | 与模式匹配的所有主机的通用 TCP SSL 代理模式。类似于 `--ignore`，但 SSL 连接被拦截。通信内容以详细模式打印到日志中
 `-n`, `--no-server` | 不要启动代理服务器。用于离线分析以前捕获的流
 `-p PORT`, `--port PORT` | 代理服务端口。默认值：`8080`
 `--http2`, `--no-http2` | 显式启用/禁用 `HTTP/2` 支持。默认情况下禁用，直到主要网站正确实施规范。默认值将在未来版本中更改
 `--no-websocket`, `--websocket` | 显式启用/禁用 `WebSocket` 支持。默认启用
 `--raw-tcp`, `--no-raw-tcp` | 显式启用/禁用实验性原始 `TCP` 支持。默认情况下禁用。默认值将在未来版本中更改
 `--spoof-source-address` | 使用客户端的 IP 进行服务器端连接。与 `–upstream-bind-address` 结合使用以欺骗固定源地址
 `--upstream-bind-address UPSTREAM_BIND_ADDRESS` | 将上游请求绑定到的地址（默认为无）
 <!--rehype:className=style-list-->
 Mitmproxy 过滤器
 ---------------
 ### 过滤器
 :---|---
 :---|---
 `f` | 设置视图过滤器 _(在流视图页面上)_
 <!--rehype:className=shortcuts-->
 ---
 - [RegEX 备忘清单](./regex.md) _(jaywcjlove.github.io)_
 正则表达式是 Python 风格的，可以指定为带引号的字符串
 ### 运算符
 :---|---
 :---|---
 `!`     | 一元非
 `&`     | 和
 `\|`     | 或者
 `(...)` | 分组
 ### 表达式
 <!--rehype:wrap-class=row-span-2-->
 :---|---
 :---|---
 `~a`           | 响应匹配资源：CSS、Javascript、Flash、图像。
 `~b` `regex`   | 主体 Body
 `~bq` `regex`  | 请求正文
 `~bs` `regex`  | 响应体
 `~c` `int`     | HTTP 响应代码
 `~d` `regex`   | 域
 `~dst` `regex` | 匹配目标地址
 `~e`           | 匹配错误
 `~h` `regex`   | 标头
 `~hq` `regex`  | 请求头
 `~hs` `regex`  | 响应头
 `~http`        | 匹配 HTTP 流
 `~m` `regex`   | 方法
 `~marked`      | 匹配标记流
 `~q`           | 匹配请求无响应
 `~s`           | 匹配响应
 `~src` `regex` | 匹配源地址
 `~t` `regex`   | 内容类型标头
 `~tcp`         | 匹配 TCP 流
 `~tq` `regex`  | 请求 Content-Type 标头
 `~ts` `regex`  | 响应内容类型标头
 `~u` `regex`   | 网址
 `~websocket`   | 匹配 WebSocket 流（和 HTTP-WebSocket 握手流）
 ### 流选择器
 表达式
 :---|---
 :---|---
 `@all` | 所有流程
 `@focus` | 目前关注的流程
 `@shown` | 当前显示的所有流程
 `@hidden` | 当前隐藏的所有流程
 `@marked` | 所有标记流
 `@unmarked` | 所有未标记的流
 mitmproxy 有一组方便的流选择器，可以在当前视图上操作
 ### 示例
 包含“google.com”的网址
 ```
 google\.com
 ```
 正文中包含字符串“test”的请求
 ```
 ~q ~b test
 ```
 除了带有 text/html 内容类型的请求之外的任何内容：
 ```
 !(~q & ~t "text/html")
 ```
 替换请求中的整个 GET 字符串（需要引号才能使其工作）：
 ```
 ":~q ~m GET:.*:/replacement.html"
 ```
 Mitmproxy 脚本
 -------
 <!--rehype:body-class=cols-2-->
 ### Custom response
 ```python
 from mitmproxy import http
 def request(flow: http.HTTPFlow) -> None:
    if flow.request.pretty_url == "http://example.com/path":
        flow.response = http.HTTPResponse.make(
            200,  # (optional) status code
            b"Hello World",  # (optional) content
            {"Content-Type": "text/html"}  # (optional) headers
        )
 ```
 从代理发送回复而不向远程服务器发送任何数据
 ### Add header
 ```python
 class AddHeader:
    def __init__(self):
        self.num = 0
    def response(self, flow):
        self.num = self.num + 1
        flow.response.headers["count"] = str(self.num)
 addons = [
    AddHeader()
 ]
 ```
 为每个响应添加一个 HTTP 标头
 另见
 -------
 - [mitmproxy addons](https://github.com/mitmproxy/mitmproxy/tree/master/examples/addons) _(github.com)_
 - [mitmproxy 文档](https://docs.mitmproxy.org/stable/) _(mitmproxy.org)_
 - [mitmproxy 开源仓库](https://github.com/mitmproxy/mitmproxy) _(github.com)_
 - [mitmproxy 备忘清单](https://www.stut-it.net/blog/2017/mitmproxy-cheatsheet.html) _(stut-it.net)_
--- a/docs/nestjs.md
+++ b/docs/nestjs.md
@ -0,0 +1,117 @@
 NestJS 备忘清单
 ===
 [NestJS](https://docs.nestjs.com/) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架
 创建应用
 ---
 ### NestCLI
 [NestJS](https://docs.nestjs.com/) 需要 [Node.js >= 12](https://nodejs.org)
 ```bash
 $ npm i -g @nestjs/cli
 $ nest new project-name
 ```
 [Nest CLI](https://docs.nestjs.com/cli/overview) 是一个命令行界面工具，可以帮助你初始化、开发和维护你的Nest应用程序，安装依赖并启动开发服务器
 ```bash
 $ cd <your-project-name>
 $ npm run start
 ```
 当你准备将应用发布到生产环境时，请运行：
 ```bash
 $ npm run build
 ```
 此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本
 ### CLI指令
 命令 | 别名 | 描述
 :-|-|-
 `new` | n | 使用模板快速创建应用
 `generate` | g | 自动生成`Controller`、`Providers` 和 `Modules`
 `build` | | 打包并输出./dist目录
 `start` | | 打包并运行
 `add`   | | 安装一个符合Nest的库，同`npm install`
 `info`  | i | 输出系统信息、CLI版本和Nest Package信息
 <!--rehype:className=show-header left-align-->
 ### Platform(平台)
 <!--rehype:wrap-class=row-span-2-->
 目前 `NestJS` 支持两个 `Node HTTP` 平台：[Express](https://expressjs.com/) 和 [Fastify](https://www.fastify.io/)。从技术上讲，一旦创建了适配器，Nest 便可以使用任何 Node HTTP 框架
 #### platform-express
 ```ts
 import { NestFactory } from '@nestjs/core'
 import { AppModule } from './app.module'
 import { NestExpressApplication } from '@nestjs/platform-express'
 async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule)
  await app.listen(3000)
 }
 bootstrap()
 ```
 <!--rehype:className=wrap-text-->
 #### platform-fastify
 ```ts
 import { NestFactory } from '@nestjs/core'
 import { AppModule } from './app.module'
 import { NestFastifyApplication } from '@nestjs/platform-fastify'
 async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(AppModule)
  app.enableCors() // 开启Cors
  app.register(fastifyCsrf)
  await app.listen(4000, '0.0.0.0')
  console.log(`Application is running on: ${await app.getUrl()}`)
 }
 bootstrap()
 ```
 <!--rehype:className=wrap-text-->
 ### 目录
 ```bash
 ├── src      # 源代码目录
 │   ├── app.module.ts          # 应用程序的根模块
 │   ├── app.controller.spec.ts # 控制器的单元测试
 │   ├── app.controller.ts      # 单个路由的基本控制器
 │   ├── app.service.ts         # 具有单一方法的基本服务
 │   └── main.ts # 应用程序的入口文件
 │               # 它使用核心函数 NestFactory 来创建 Nest 应用程序的实例
 └── test      # 测试目录
    ├── app.e2e-spec.ts
    └── jest-e2e.json
 ```
 ### JavaScript
 `NestCLI` 默认是使用`TypeScript`进行初始化项目的，如果需要使用`JavaScript`请使用以下指令
 ```bash
 $ git clone https://github.com/nestjs/javascript-starter.git
 $ cd <javascript-starter>
 $ npm install
 $ npm run start
 ```
 <!--rehype:className=wrap-text-->
 需要[注意]((https://docs.nestjs.com/first-steps#language))的一点是，`JavaScript`的版本是需要`Babel`的
 另见
 ---
 [NestJs 官方文档](https://docs.nestjs.com/)
--- a/docs/quickreference.md
+++ b/docs/quickreference.md
@ -37,9 +37,9 @@ npm run start # 监听 md 文件编译输出 HTML
 ├── CONTRIBUTING.md   # 贡献说明
 ├── Dockerfile
 ├── LICENSE
-├── README.md   # Home(首页) 内容
+├── README.md  # 🌐 Home(首页)内容
-├── dist        # 编译后的静态资源目录
+├── dist       # 📦 编译后的静态资源目录
-├── docs        # Markdown 文档（速查表）
+├── docs       # 👈 Markdown 文档(速查表)
 │   ├── bash.md
 │   ├── ....
 │   └── yaml.md
@ -433,17 +433,20 @@ H2 部分
 ### 卡片 3 (H3 部分)
 ```
-类 | 说明
+---
---- | ----
+
 :-- | --
 :-- | --
 合并 **列** 布局 |
 `col-span-2` | `2` 列占位
 `col-span-3` | `3` 列占位
 `col-span-4` | `4` 列占位
-`col-span-5` | `5` 列占位
+`col-span-{2~10}` | `{2~10}` 列占位
 合并 **行** 布局 |
 `row-span-2` | `2` 行占位
 `row-span-3` | `3` 行占位
 `row-span-4` | `4` 行占位
-`row-span-5` | `5` 行占位
+`row-span-{2~10}` | `{2~10}` 行占位
 <!--rehype:className=show-header -->
 ### 卡片合并行布局 1
@ -762,7 +765,7 @@ H2 部分
 列表
 ---
-### 一栏（默认）
+### 一栏(默认)
 - Item 1
 - Item 2
@ -881,7 +884,7 @@ H3 部分 - 占位效果展示
 <!--rehype:wrap-class=row-span-2-->
 ```
-...
+...合并两行
 ```
 `<!--rehype:wrap-class=row-span-2-->`
@ -890,7 +893,7 @@ H3 部分 - 占位效果展示
 <!--rehype:wrap-class=col-span-2-->
 ```
-...
+...合并两列
 ```
 `<!--rehype:wrap-class=col-span-2-->`
@ -899,7 +902,7 @@ H3 部分 - 占位效果展示
 <!--rehype:style=background:#e91e63;-->
 ```
-...
+...红色标题配置
 ```
 `<!--rehype:style=background:#e91e63;-->`
@ -908,7 +911,7 @@ H3 部分 - 占位效果展示
 <!--rehype:style=background:#d7a100;-->
 ```
-...
+...黄色标题配置
 ```
 `<!--rehype:style=background:#d7a100;-->`
--- a/docs/vue.md
+++ b/docs/vue.md
@ -64,11 +64,14 @@ $ npm run build
 <!--rehype:wrap-class=row-span-2-->
 ```js
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 const app = createApp({
-  data() {
+  setup() {
-    return { count: 0 }
+    const message = ref("Hello Vue3")
    return {
      message
    }
  }
 })
 app.mount('#app')
@ -90,11 +93,12 @@ app.mount('#app')
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <div id="app">{{ message }}</div>
 <script>
-  const { createApp } = Vue
+  const { createApp, ref } = Vue
  createApp({
-    data() {
+    setup() {
      const message = ref("Hello Vue3")
      return {
-        message: 'Hello Vue!'
+        message
      }
    }
  }).mount('#app')
@ -105,13 +109,14 @@ app.mount('#app')
 ### 使用 ES 模块构建版本
 ```html
-<div id="app">{{ message }}</div>
+<div id="app">{{ message, ref }}</div>
 <script type="module">
-  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
-    data() {
+    setup() {
      const message = ref("Hello Vue3")
      return {
-        message: 'Hello Vue!'
+        message
      }
    }
  }).mount('#app')
@ -164,21 +169,28 @@ app.mount('#app')
 ### 动态绑定多个值
 <!--rehype:wrap-class=row-span-2-->
 ```js
 data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
 }
 ```
 通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上
 ```html
-<div v-bind="objectOfAttrs"></div>
+<script setup>
  import comp from "./Comp.vue"
  import {ref} from "vue"
  const a = ref("hello")
  const b = ref("world")
 </script>
 <template>
  <comp v-bind="{a, b}"></comp>
 </template>
 ```
 如果你是使用的 `setup` 语法糖。需要使用 `defineprops` 声名（可以直接使用`a`/`b`）
 ```js
 const props = defineProps({
  a: String,
  b: String
 })
 ```
 ### 使用 JavaScript 表达式
@ -286,7 +298,7 @@ import { defineComponent, reactive } from 'vue';
 // `defineComponent`用于IDE推导类型
 export default defineComponent({
-  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
+  // setup 用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 });
@ -297,6 +309,7 @@ export default defineComponent({
  },
 });
 ```
 <!--rehype:className=wrap-text-->
 ### 声明方法
@ -327,6 +340,7 @@ export default defineComponent({
  },
 })
 ```
 <!--rehype:className=wrap-text-->
 ### `<script setup>` setup语法糖
@ -351,29 +365,27 @@ function increment() {
 **`setup`** 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时
 ### 用 `ref()` 定义响应式变量
 <!--rehype:wrap-class=row-span-2-->
 `reactive`只能用于对象、数组和 `Map`、`Set` 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 ```js
 // `reactive`只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 import { ref } from 'vue';
 const count = ref(0);
 console.log(count); // { value: 0 }
 console.log(count.value); // 0
 count.value++;
 console.log(count.value); // 1
 const objectRef = ref({ count: 0 });
 // 这是响应式的替换
 objectRef.value = { count: 1 };
 const obj = {
  foo: ref(1),
  bar: ref(2)
 };
 // 该函数接收一个 ref
 // 需要通过 .value 取值
 // 但它会保持响应性
@ -383,8 +395,9 @@ callSomeFunction(obj.foo);
 const { foo, bar } = obj;
 ```
 在 html 模板中不需要带 `.value` 就可以使用
 ```html
 <!-- PS: 在html模板中不需要带.value就可以使用 -->
 <script setup>
 import { ref } from 'vue';
@ -399,6 +412,7 @@ const count = ref(0);
 ```
 ### 有状态方法
 <!--rehype:wrap-class=col-span-2-->
 ```js
 import { reactive, defineComponent, onUnmounted } from 'vue';
@ -423,8 +437,9 @@ export default defineComponent({
 ```
 ### 响应式样式
 <!--rehype:wrap-class=col-span-2-->
-```js
+```html
 <script setup>
 import { ref } from 'vue'
 const open = ref(false);
@ -444,12 +459,13 @@ const open = ref(false);
 </style>
 ```
-响应式进阶 —— watch和computed
+响应式进阶 —— watch 和 computed
 ---
 ### 监听状态
 <!--rehype:wrap-class=row-span-2-->
-```js
+```html
 <script setup>
 import { ref, watch } from 'vue';
@ -469,11 +485,14 @@ watch(count, function() {
  <button @click="increment">
    {{ count }}
  </button>
-  <p>is event: {{ isEvent ? 'yes' : 'no' }}</p>
+  <p>
    is event: {{ isEvent ? 'yes' : 'no' }}
  </p>
 </template>
 ```
 ### 立即监听状态
 <!--rehype:wrap-class=col-span-2-->
 ```js
 watch(count, function() {
@ -483,15 +502,16 @@ watch(count, function() {
  immediate: true
 })
 ```
 <!--rehype:className=wrap-text-->
 ### 计算状态
 <!--rehype:wrap-class=col-span-2-->
-```js
+```html
 <script setup>
 import { ref, computed } from 'vue';
 const text = ref('')
 // computed 的回调函数里，会根据已有并用到的状态计算出新的状态
 const capital = computed(function(){
  return text.value.toUpperCase();
@ -509,11 +529,12 @@ const capital = computed(function(){
 ### defineProps
-```js
+```html
 <script setup>
 import { defineProps } from 'vue';
-// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力
+// 这里可以将 `username` 解构出来，
 // 但是一旦解构出来再使用，就不具备响应式能力
 defineProps({
  username: String
 })
@ -526,7 +547,7 @@ defineProps({
 子组件定义需要的参数
-```js
+```html
 <script setup>
 const username = 'vue'
 </script>
@ -540,14 +561,12 @@ const username = 'vue'
 ### defineEmits
-```js
+```html
 <script setup>
 import { defineEmits, ref } from 'vue';
 const emit = defineEmits(['search'])
 const keyword = ref('')
 const onSearch = function() {
  emit('search', keyword.value)
 }
@ -561,7 +580,7 @@ const onSearch = function() {
 子组件定义支持 `emit` 的函数
-```js
+```html
 <script setup>
 const onSearch = function(keyword){
  console.log(keyword)
@ -577,12 +596,11 @@ const onSearch = function(keyword){
 ### defineExpose
-```js
+```html
 <script setup>
 import { defineExpose, ref } from 'vue';
 const keyword = ref('')
 const onSearch = function() {
  console.log(keyword.value)
 }
@ -597,13 +615,12 @@ defineExpose({ onSearch })
 子组件对父组件暴露方法
-```js
+```html
 <script setup>
 import { ref } from 'vue'  
 const childrenRef = ref(null)
-
+const onSearch = function() {
 const onSearch = function(){
  childrenRef.value.onSearch()
 }
 </script>
@ -619,13 +636,15 @@ const onSearch = function(){
 ### Provide / Inject
 ```ts
 // types
 import type { InjectionKey, Ref } from 'vue'
 export const ProvideKey = Symbol() as InjectionKey<Ref<string>>
 ```
 <!--rehype:className=wrap-text-->
-```ts
+在应用中使用 `ProvideKey`
 ```html
 <script setup lang="ts">
 import { provide, ref } from 'vue'
 import { ProvideKey } from './types'
@ -683,8 +702,10 @@ API 参考
 `app.config.compilerOptions` | 配置运行时编译器的选项 [#](https://cn.vuejs.org/api/application.html#app-config-compileroptions)
 `app.config.globalProperties` | 注册全局属性对象 [#](https://cn.vuejs.org/api/application.html#app-config-globalproperties)
 `app.config.optionMergeStrategies` | 定义自定义组件选项的合并策略的对象 [#](https://cn.vuejs.org/api/application.html#app-config-optionmergestrategies)
 <!--rehype:className=style-list-->
 ### 全局 API - 通用
 <!--rehype:wrap-class=row-span-2-->
 :- | :-
 :- | :-
@ -692,7 +713,8 @@ API 参考
 `nextTick()` | 等待下一次 DOM 更新后执行回调 [#](https://cn.vuejs.org/api/general.html#nexttick)
 `defineComponent()` | 在定义 Vue 组件时提供类型推导的辅助函数 [#](https://cn.vuejs.org/api/general.html#definecomponent)
 `defineAsyncComponent()` | 定义一个异步组件 [#](https://cn.vuejs.org/api/general.html#defineasynccomponent)
-`defineCustomElement()` | [#](https://cn.vuejs.org/api/general.html#definecustomelement)
+`defineCustomElement()` | 和 `defineComponent` 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器 [#](https://cn.vuejs.org/api/general.html#definecustomelement)
 <!--rehype:className=style-list-->
 ### 组合式 API - setup()
@ -703,20 +725,14 @@ API 参考
 `Setup 上下文` | [#](https://cn.vuejs.org/api/composition-api-setup.html#setup-context)
 `与渲染函数一起使用` | [#](https://cn.vuejs.org/api/composition-api-setup.html#usage-with-render-functions)
-### 组合式 API - 响应式: 工具
+### 组合式 API - 依赖注入
 :- | :-
 :- | :-
-`isRef()` | 判断是否为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#isref)
+`provide()` | 提供一个可以被后代组件中注入使用的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide)
-`unref()` | 是 ref，返回内部值，否则返回参数本身 [#](https://cn.vuejs.org/api/reactivity-utilities.html#unref)
+`inject()` | 注入一个由祖先组件提供的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject)
 `toRef()` | 创建一个属性对应的 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#toref)
 `toRefs()` | 将对象上的每一个可枚举属性转换为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)
 `isProxy()` | 检查一个对象是否是由 `reactive()`、`readonly()`、`shallowReactive()` 或 `shallowReadonly()` 创建的代理 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy)
 `isReactive()` | 检查一个对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。  [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive)
 `isReadonly()` | 检查传入的值是否为只读对象 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly)
 ### 组合式 API - 生命周期钩子
 <!--rehype:wrap-class=row-span-3-->
 :- | :-
 :- | :-
@ -734,12 +750,18 @@ API 参考
 `onServerPrefetch()` | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch)
 <!--rehype:className=style-list-->
-### 组合式 API - 依赖注入
+### 组合式 API - 响应式: 工具
 :- | :-
 :- | :-
-`provide()` | 提供一个可以被后代组件中注入使用的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide)
+`isRef()` | 判断是否为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#isref)
-`inject()` | 注入一个由祖先组件提供的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject)
+`unref()` | 是 ref，返回内部值，否则返回参数本身 [#](https://cn.vuejs.org/api/reactivity-utilities.html#unref)
 `toRef()` | 创建一个属性对应的 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#toref)
 `toRefs()` | 将对象上的每一个可枚举属性转换为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)
 `isProxy()` | 检查一个对象是否是由 `reactive()`、`readonly()`、`shallowReactive()` 或 `shallowReadonly()` 创建的代理 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy)
 `isReactive()` | 检查一个对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。  [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive)
 `isReadonly()` | 检查传入的值是否为只读对象 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly)
 <!--rehype:className=style-list-->
 ### 组合式 API - 响应式: 核心
@ -753,6 +775,7 @@ API 参考
 `watchPostEffect()` | `watchEffect()` 使用 `flush: 'post'` 选项时的别名。 [#](https://cn.vuejs.org/api/reactivity-core.html#watchposteffect)
 `watchSyncEffect()` | `watchEffect()` 使用 `flush: 'sync'` 选项时的别名。 [#](https://cn.vuejs.org/api/reactivity-core.html#watchsynceffect)
 `watch()` | 侦听一个或多个响应式数据源 [#](https://cn.vuejs.org/api/reactivity-core.html#watch)
 <!--rehype:className=style-list-->
 ### 选项式 API - 状态选项
@ -765,9 +788,10 @@ API 参考
 `watch` | 声明在数据更改时调用的侦听回调 [#](https://cn.vuejs.org/api/options-state.html#watch)
 `emits` | 声明由组件触发的自定义事件 [#](https://cn.vuejs.org/api/options-state.html#emits)
 `expose` | 声明当组件实例被父组件通过模板引用访问时暴露的公共属性 [#](https://cn.vuejs.org/api/options-state.html#expose)
 <!--rehype:className=style-list-->
 ### 选项式 API - 生命周期选项
-<!--rehype:wrap-class=row-span-2-->
+<!--rehype:wrap-class=row-span-3-->
 :- | :-
 :- | :-
@ -785,6 +809,7 @@ API 参考
 `activated` | 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#activated)
 `deactivated` | 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#deactivated)
 `serverPrefetch` _SSR only_ | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch)
 <!--rehype:className=style-list-->
 ### 选项式 API - 其他杂项
@ -794,6 +819,7 @@ API 参考
 `inheritAttrs` | 是否启用默认的组件 `attribute` 透传行为 [#](https://cn.vuejs.org/api/options-misc.html#inheritattrs)
 `components` | 注册对当前组件实例可用的组件 [#](https://cn.vuejs.org/api/options-misc.html#components)
 `directives` | 注册对当前组件实例可用的指令 [#](https://cn.vuejs.org/api/options-misc.html#directives)
 <!--rehype:className=style-list-->
 ### 选项式 API - 渲染选项
@ -802,6 +828,7 @@ API 参考
 `template` | 声明组件的字符串模板 [#](https://cn.vuejs.org/api/options-rendering.html#template)
 `render` | 编程式地创建组件虚拟 DOM 树的函数 [#](https://cn.vuejs.org/api/options-rendering.html#render)
 `compilerOptions` | 配置组件模板的运行时编译器选项 [#](https://cn.vuejs.org/api/options-rendering.html#compileroptions)
 <!--rehype:className=style-list-->
 ### 选项式 API - 组件实例
 <!--rehype:wrap-class=row-span-2-->
@ -851,6 +878,7 @@ API 参考
 `v-once` | 只渲染元素和组件一次 [#](https://cn.vuejs.org/api/built-in-directives.html#v-once)
 `v-memo` _(3.2+)_ | 缓存一个模板的子树 [#](https://cn.vuejs.org/api/built-in-directives.html#v-memo)
 `v-cloak` | 保持在元素上直到实例结束编译 [#](https://cn.vuejs.org/api/built-in-directives.html#v-cloak)
 `serverPrefetch` _SSR only_ | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch)
 ### 内置内容 - 组件
@ -861,6 +889,7 @@ API 参考
 `<KeepAlive>` | 缓存包裹在其中的动态切换组件 [#](https://cn.vuejs.org/api/built-in-components.html#keepalive)
 `<Teleport>` | 将其插槽内容渲染到 DOM 中的另一个位置 [#](https://cn.vuejs.org/api/built-in-components.html#teleport)
 `<Suspense>` _(Experimental)_ | 协调对组件树中嵌套的异步依赖的处理 [#](https://cn.vuejs.org/api/built-in-components.html#suspense)
 <!--rehype:className=style-list-->
 ### 内置内容 - 特殊 Attributes
@ -948,6 +977,7 @@ API 参考
 `ComponentCustomOptions` | 扩展组件选项类型以支持自定义选项 [#](https://cn.vuejs.org/api/utility-types.html#componentcustomoptions)
 `ComponentCustomProps` | 扩展全局可用的 TSX props [#](https://cn.vuejs.org/api/utility-types.html#componentcustomprops)
 `CSSProperties` | 扩展在样式属性绑定上允许的值的类型 [#](https://cn.vuejs.org/api/utility-types.html#cssproperties)
 <!--rehype:className=style-list-->
 ### 进阶 API - 自定义渲染
--- a/docs/yum.md
+++ b/docs/yum.md
@ -416,7 +416,7 @@ yum install --downloadonly vsftpd
 ---
 - [YUM 官方网站](http://yum.baseurl.org/) _(yum.baseurl.org)_
- [YUM 备忘清单(适用于红帽 RedHad 企业 Linux)](https://access.redhat.com/sites/default/files/attachments/rh_yum_cheatsheet_1214_jcs_print-1.pdf) _(access.redhat.com)_
+- [YUM 备忘清单(适用于红帽 RedHat 企业 Linux)](https://access.redhat.com/sites/default/files/attachments/rh_yum_cheatsheet_1214_jcs_print-1.pdf) _(access.redhat.com)_
 - [用 yum 管理软件包](http://prefetch.net/articles/yum.html) _(prefetch.net)_
 - [Fedora 中的 Yum 文档](https://docs.fedoraproject.org/en-US/Fedora/15/html/Deployment_Guide/ch-yum.html) _(fedoraproject.org)_
 - [CentOS 中的 Yum 文档](http://wiki.centos.org/PackageManagement/Yum/) _(wiki.centos.org)_
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@wcj/reference",
-  "version": "1.24.0",
+  "version": "1.25.0",
  "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
  "author": "jaywcjlove",
  "license": "MIT",
--- a/scripts/assets/flutter.svg
+++ b/scripts/assets/flutter.svg
@ -0,0 +1,12 @@
 <svg viewBox="0 0 256 317" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
  <defs>
    <linearGradient x1="3.952%" y1="26.993%" x2="75.897%" y2="52.919%" id="a">
      <stop offset="0%"/>
      <stop stop-opacity="0" offset="100%"/>
    </linearGradient>
  </defs>
  <path fill="#47C5FB" d="M157.666 0 0 157.667l48.8 48.8L255.268.001zm-1.099 145.397L72.15 229.815l48.984 49.716 48.71-48.71 85.425-85.424z"/>
  <path fill="#00569E" d="m121.133 279.531 37.082 37.082h97.052l-85.425-85.792z"/>
  <path fill="#00B5F8" d="m71.6 230.364 48.801-48.801 49.441 49.258-48.71 48.71z"/>
  <path fill-opacity=".8" fill="url(#a)" d="m121.133 279.531 40.56-13.459 4.029-31.13z"/>
 </svg>
--- a/scripts/assets/mitmproxy.svg
+++ b/scripts/assets/mitmproxy.svg
@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 209 204">
 <g fill="none" fill-rule="evenodd" transform="translate(5 5.644)">
 <path fill="#F15A29" fill-rule="nonzero" d="M114,96.3562512 C114,104.088251 107.732,110.356251 100,110.356251 C92.268,110.356251 86,104.088251 86,96.3562512 C86,88.6242512 92.268,82.3562512 100,82.3562512 C107.732,82.3562512 114,88.6242512 114,96.3562512 Z"/>
 <path stroke="#F7941E" stroke-width="4" d="M119.5,96.3562512 C119.5,107.126251 110.77,115.856251 100,115.856251 C89.23,115.856251 80.5,107.126251 80.5,96.3562512 C80.5,85.5862512 89.23,76.8562512 100,76.8562512 C110.77,76.8562512 119.5,85.5862512 119.5,96.3562512 Z"/>
 <g stroke="currentColor" stroke-width="10">
 <path d="M130,96.3562512 C130,112.925251 116.569,126.356251 100,126.356251 C83.431,126.356251 70,112.925251 70,96.3562512 C70,79.7872512 83.431,66.3562512 100,66.3562512 C116.569,66.3562512 130,79.7872512 130,96.3562512 Z"/>
 <path d="M167,24.3562512 C133.273,-4.80574879 84.314,-8.11674879 46.967,16.2392512 C9.62,40.5952512 -7.089,86.7342512 6,129.356251 L44,129.356251 C55.0860053,149.157715 75.6966688,161.743751 98.3755043,162.561006 C121.05434,163.378261 142.517468,152.308398 155,133.356251 M0,96.3562512 L70,96.3562512"/></g>
 <path fill="#F7941E" fill-rule="nonzero" d="M164,125.356251 C164,128.66996 161.313708,131.356251 158,131.356251 C154.686292,131.356251 152,128.66996 152,125.356251 C152,122.042543 154.686292,119.356251 158,119.356251 C161.313708,119.356251 164,122.042543 164,125.356251 Z"/>
 <path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(148 115.356)"/>
 <path fill="#F7941E" fill-rule="nonzero" d="M179,31.3562512 C179,34.6699597 176.313708,37.3562512 173,37.3562512 C169.686292,37.3562512 167,34.6699597 167,31.3562512 C167,28.0425427 169.686292,25.3562512 173,25.3562512 C176.313708,25.3562512 179,28.0425427 179,31.3562512 Z"/>
 <g stroke="currentColor" transform="translate(33 21.356)">
 <path stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(130)"/>
 <path stroke-width="10" d="M0,147 C33.727,176.162 82.686,179.473 120.033,155.117 C157.38,130.761 174.089,84.622 161,42 L123,42 C111.913995,22.1985361 91.3033312,9.61250069 68.6244957,8.79524536 C45.9456602,7.97799002 24.4825319,19.0478528 12,38 M167,75 L97,75"/></g>
 <path fill="#F7941E" fill-rule="nonzero" d="M48,67.3562512 C48,70.6699597 45.3137085,73.3562512 42,73.3562512 C38.6862915,73.3562512 36,70.6699597 36,67.3562512 C36,64.0425427 38.6862915,61.3562512 42,61.3562512 C45.3137085,61.3562512 48,64.0425427 48,67.3562512 Z"/>
 <path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(32 57.356)"/>
 <path fill="#F7941E" fill-rule="nonzero" d="M33,161.356251 C33,163.499845 31.8564065,165.480607 30,166.552404 C28.1435936,167.624201 25.8564064,167.624201 24,166.552404 C22.1435935,165.480607 21,163.499845 21,161.356251 C21,158.042543 23.6862915,155.356251 27,155.356251 C30.3137085,155.356251 33,158.042543 33,161.356251 L33,161.356251 Z"/>
 <path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(17 151.356)"/>
 </g>
 </svg>
--- a/scripts/assets/nestjs.svg
+++ b/scripts/assets/nestjs.svg
@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="1em" width="1em">
  <path d="M9.97.033c-.122 0-.236.026-.34.06a.97.97 0 0 1 .407.568c.004.03.013.052.017.083s.01.052.01.08c.018.385-.1.433-.184.66a.934.934 0 0 0 .06.86.52.52 0 0 0 .052.096c-.166-1.106.757-1.273.927-1.618.013-.302-.236-.503-.433-.643a.97.97 0 0 0-.516-.15zm1.39.25c-.018.1-.004.074-.01.127l-.01.114-.03.105c-.01.035-.022.07-.035.105l-.048.1c-.013.018-.022.035-.035.052l-.026.04-.066.087c-.026.026-.048.057-.08.08s-.052.052-.083.074c-.092.07-.197.122-.293.188-.03.022-.06.04-.087.066a.64.64 0 0 0-.083.07c-.03.026-.052.052-.08.083s-.048.057-.066.087l-.06.092-.048.1-.035.1-.03.11c-.004.018-.004.04-.01.057s-.004.035-.01.052l-.004.11c0 .026 0 .052.004.08 0 .035.004.07.013.11s.013.07.022.105l.035.105.03.06-1.006-.39-.507-.13-.276-.066a8.12 8.12 0 0 0-.796-.118c-.01 0-.013-.004-.022-.004l-.783-.04-.573.022a8.35 8.35 0 0 0-.8.096l-.197.035-.394.087-.197.052-.188.083-.144.066c-.01.004-.018.004-.022.01l-.122.06c-.013.004-.022.01-.03.013l-.136.07c-.03.013-.06.03-.087.044-.013.01-.03.017-.04.022l-.114.066a1.1 1.1 0 0 0-.105.066l-.087.06-.096.07-.074.06c-.01.004-.018.013-.026.018l-.066.057c-.004.01-.013.013-.018.018l-.08.074-.087.083-.074.08c-.01.01-.022.018-.03.026a1.23 1.23 0 0 1-.074.079c-.004.01-.013.013-.018.022l-.1.105-.236.227c-.08.07-.162.136-.245.192l-.262.166a2.41 2.41 0 0 1-.276.13 3.15 3.15 0 0 1-.284.105c-.184.04-.372.114-.534.127-.035 0-.074.01-.11.013l-.11.026-.105.04a1.12 1.12 0 0 0-.105.048c-.03.022-.066.04-.096.06s-.06.048-.087.074-.06.052-.087.08l-.074.087c-.022.035-.048.066-.066.1a.77.77 0 0 0-.061.101l-.048.114-.04.114-.022.105c-.013.052-.013.105-.018.13s0 .058 0 .089a.25.25 0 0 0 .004.057c.004.03.01.057.018.083l.03.08c.013.03.03.057.048.083l.057.08.074.07a.64.64 0 0 0 .083.07c.105.092.13.122.267.192.022.013.044.022.07.035.013.013.013.017.018.026.004.035.013.07.022.105a.59.59 0 0 0 .035.105l.035.08c.004.01.01.018.013.022l.052.096.066.092.074.083c.026.026.052.048.083.074l.087.066c.03.022.06.04.096.057a.71.71 0 0 0 .101.048c.026.013.057.022.087.03s.057.018.074.022c-.013.236-.018.46.018.538.04.087.232-.18.424-.485-.026.302-.044.656 0 .76s.31-.232.538-.608c3.1-.717 5.93 1.426 6.227 4.452-.057-.472-.638-.735-.905-.67-.13.324-.354.74-.713.997a2.83 2.83 0 0 0-.044-.875 2.83 2.83 0 0 1-.542 1.102c-.415.03-.83-.17-1.05-.472-.018-.013-.022-.04-.035-.057l-.035-.092c-.013-.03-.022-.06-.026-.092s-.004-.06-.004-.096v-.066c.004-.03.013-.06.022-.092l.03-.092c.018-.03.03-.06.052-.092.074-.2.074-.38-.06-.48a.502.502 0 0 0-.083-.044c-.018-.004-.04-.013-.057-.018l-.035-.013-.092-.022a.33.33 0 0 0-.092-.013.71.71 0 0 0-.096-.009c-.022 0-.044.004-.066.004a.34.34 0 0 0-.096.013l-.092.017-.092.03-.087.04-.083.044c-1.02.665-.41 2.22.284 2.672-.262.048-.53.105-.603.162.18.122.376.22.582.302l.708.2c.363.08.73.105 1.102.083a4.16 4.16 0 0 0 3.813-3.551l.026.114.04.245.018.118.01.13.01.144v.07c0 .022.004.048.004.07s-.004.052-.004.08v.06c0 .03-.004.057-.004.087 0 .017 0 .035-.004.057l-.004.096c-.004.013-.004.026-.004.04l-.013.1c0 .013 0 .026-.004.04l-.017.127v.01l-.026.122-.026.13-.035.136-.035.136-.044.14-.096.254-.052.127-.06.122c-.004.013-.01.022-.013.03a4.167 4.167 0 0 1-1.238 1.482c-.035.022-.07.048-.105.074-.01.01-.022.013-.03.022l-.096.066.013.026h.004l.184-.026h.004l.34-.06a.664.664 0 0 0 .096-.022l.06-.013.092-.017.08-.022a8.41 8.41 0 0 0 1.268-.42 6.993 6.993 0 0 1-2.716 2.217 7.163 7.163 0 0 0 1.49-.258 6.986 6.986 0 0 0 4.133-3.302 6.98 6.98 0 0 1-1.176 2.812c.424-.28.813-.603 1.168-.97a6.93 6.93 0 0 0 1.841-3.717c.15.69.192 1.404.127 2.108 3.157-4.404.262-8.97-.95-10.172-.004-.01-.01-.013-.01-.022-.01.052-.013.105-.017.157-.013.1-.026.197-.044.293s-.048.192-.074.29-.066.188-.105.28-.083.18-.13.267a2.98 2.98 0 0 1-.157.249 3.114 3.114 0 0 1-.18.236 3.27 3.27 0 0 1-.206.219c-.044.04-.083.074-.127.11l-.1.087a2.44 2.44 0 0 1-.245.171 3.03 3.03 0 0 1-.258.149 6.638 6.638 0 0 1-.276.122 3.08 3.08 0 0 1-.284.092c-.096.026-.197.048-.293.066s-.2.026-.297.035c-.07.004-.14.01-.2.01-.1 0-.2-.01-.297-.018s-.2-.022-.298-.044a2.21 2.21 0 0 1-.293-.074h-.004c.096-.01.192-.018.29-.035s.197-.04.293-.066.192-.057.284-.092.188-.08.276-.122a3.06 3.06 0 0 0 .262-.144c.083-.057.166-.114.245-.175a2.39 2.39 0 0 0 .223-.197c.074-.066.14-.14.206-.214s.127-.157.184-.236c.01-.013.018-.03.026-.044l.127-.2c.048-.087.092-.175.13-.267s.074-.184.105-.28.052-.188.074-.284.035-.197.044-.293.017-.2.017-.297c0-.07-.004-.14-.01-.2-.01-.1-.022-.197-.035-.293a3.2 3.2 0 0 0-.066-.293c-.03-.092-.06-.188-.096-.28s-.08-.184-.122-.27-.096-.175-.15-.258-.114-.162-.175-.24l-.2-.223a2.73 2.73 0 0 0-.114-.109 8.05 8.05 0 0 0-.608-.429 1.184 1.184 0 0 0-.087-.044 1.711 1.711 0 0 0-.415-.184z" fill="currentColor" fill-rule="evenodd"/>
 </svg>
--- a/scripts/create.mjs
+++ b/scripts/create.mjs
@ -82,7 +82,14 @@ export function create(str = '', options = {}) {
      if (iconName) {
        detailData.icon = iconName;
      }
-      homeCardIcons(node, parent, options.isHome);
+      const resultHomeCard = homeCardIcons(node, parent, options.isHome);
      if (options.filename && resultHomeCard[options.filename]) {
        detailData.rgb = resultHomeCard[options.filename].rgb;
        detailData.name = resultHomeCard[options.filename].title;
        if (resultHomeCard[options.filename].tags) {
          detailData.tags = resultHomeCard[options.filename].tags;
        }
      }
      tooltips(node, index, parent);
      htmlTagAddAttri(node, options);
      rehypeUrls(node);
@ -111,7 +118,6 @@ export function create(str = '', options = {}) {
          }
          node.children.unshift(header(options));
          node.children.push(footer(options));
          // node.children.push(search(options));
          node.children = node.children.concat(search(options));
        }
      }
--- a/scripts/index.mjs
+++ b/scripts/index.mjs
@ -42,7 +42,7 @@ export async function createHTML(files = [], num = 0) {
  const { html, data } = create(mdstr.toString(), options);
  if (!options.isHome) {
    const searchData = await fs.readJSON(SEARCH_DATA_CACHE);
-    data.path = path.relative(OUTOUT, outputHTMLPath);
+    data.path = path.relative(OUTOUT, outputHTMLPath).replace(/[\\/]/g, '/');
    searchData[options.filename] = data;
    searchData.name = options.filename;
    await fs.writeJSON(SEARCH_DATA_CACHE, searchData);
@ -76,7 +76,7 @@ export async function run() {
    await copyCSSFile();
    await copyJSFile();
    const files = await recursiveReaddirFiles(process.cwd(), {
-      ignored: /\/(node_modules|\.git)/,
+      ignored: /[\\/](node_modules|\.git)/g,
      exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
      filter: (item) => item.ext === 'md',
    });
--- a/scripts/js/main.js
+++ b/scripts/js/main.js
@ -41,8 +41,9 @@ const fuse = new Fuse(REFS_DATA, {
  matchEmptyQuery: !0,
  threshold: .1,
  keys: [
-    { name: "title", weight: 12 }, 
+    { name: "name", weight: 20 }, 
    { name: 'intro', weight: 2 }, 
    { name: 'tags', weight: 2 }, 
    { name: 'sections.t', weight: 5 }
  ],
 });
@ -54,7 +55,9 @@ const closeBtn = document.getElementById('mysearch-close');
 const searchMenu = document.getElementById('mysearch-menu');
 const searchContent = document.getElementById('mysearch-content');
 const isHome = document.body.classList.contains('home');
-
+function getDocUrl(url = '') {
  return isHome ? url : url.replace('docs/', '');
 }
 searchBtn.addEventListener('click', (ev) => {
  ev.preventDefault();
  showSearch();
@ -64,15 +67,51 @@ closeBtn.addEventListener('click', hideSearch);
 searchBox.addEventListener('click', hideSearch);
 searchBox.firstChild.addEventListener('click', (ev) => ev.stopPropagation());
 searchInput.addEventListener('input', (evn) => searchResult(evn.target.value));
 let activeMenu = {}
 let result = []
 let inputValue = '';
 let activeIndex = 0
 document.addEventListener('keydown', (ev) => {
  if (ev.metaKey && ev.key.toLocaleLowerCase() === 'k') {
    searchBox.classList.contains('show') ? hideSearch() : showSearch();
  }
  if (ev.key.toLocaleLowerCase() === 'enter') {
    window.location.href = getDocUrl(activeMenu.path)
  }
  if (ev.key.toLocaleLowerCase() === 'arrowdown') {
    activeAnchorElm('down')
  }
  if (ev.key.toLocaleLowerCase() === 'arrowup') {
    activeAnchorElm('up')
  }
 });
 function activeAnchorElm(type) {
  if (type === 'down') {
    ++activeIndex;
  }
  if (type === 'up') {
    --activeIndex;
  }
  const data = Array.from(searchMenu.children);
  if (activeIndex < 0) activeIndex = 0;
  if (activeIndex >= data.length) activeIndex = data.length - 1;
  anchorElm = data[activeIndex];
  if (anchorElm) {
    data.forEach(item => item.classList.remove('active'));
    anchorElm.classList.add('active');
    activeMenu = result[activeIndex];
    activeIndex = activeIndex;
    searchSectionsResult(activeIndex);
  }
 }
 function showSearch() {
  document.body.classList.add('search');
  searchBox.classList.add('show');
  searchResult(searchInput.value || '');
  searchInput.focus();
 }
@ -80,31 +119,42 @@ function hideSearch() {
  document.body.classList.remove('search');
  searchBox.classList.remove('show');
 }
-let result = []
+function getValueReg(val = '') {
-let inputValue = '';
+  return new RegExp(val.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'), 'ig');
 }
 function searchResult(value) {
  inputValue = value;
  result = fuse.search(value);
  if (!value) {
    result = REFS_DATA.map(item => ({ item: item }));
  }
  let menuHTML = '';
  result.forEach((item, idx) => {
-    const label = item.item.title.replace(new RegExp(value, 'ig'), (txt) => {
+    const label = item.item.name.replace(getValueReg(value), (txt) => {
-      return `<mark>${txt}</mark>`
+      return `<mark>${txt}</mark>`;
    })
    const tags = (item.item.tags || []).join(',').replace(getValueReg(value), (txt) => {
      return `<mark>${txt}</mark>`;
    })
    const href = isHome ? item.item.path : item.item.path.replace('docs/', '');
    if (idx === 0) {
-      menuHTML += `<a href="${href}" class="active">${label}</a>`;
+      activeIndex = idx;
      activeMenu = item.item;
      menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
    } else {
-      menuHTML += `<a href="${href}">${label}</a>`;
+      menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
    }
  });
  searchMenu.innerHTML = menuHTML;
  searchSectionsResult();
-  const data = Array.from(searchMenu.children)
+  const data = Array.from(searchMenu.children);
  data.forEach((anchor, idx) => {
    anchor.onmouseenter = (evn) => {
      data.forEach(item => item.classList.remove('active'));
      evn.target.classList.add('active');
      activeMenu = result[idx];
      activeIndex = idx;
      searchSectionsResult(idx);
    }
  });
@ -113,26 +163,21 @@ function searchResult(value) {
    item.addEventListener('click', hideSearch);
  })
 }
 function searchSectionsResult(idx = 0) {
  const data = result[idx] || [];
-  const title = (data.item?.intro || '').replace(new RegExp(inputValue, 'ig'), (txt) => {
+  const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => `<mark>${txt}</mark>`);
    return `<mark>${txt}</mark>`
  });
  let sectionHTML = `<h3>${title}</h3><ol>`;
  if (data && data.item && data.item.sections) {
    data.item.sections.forEach((item, idx) => {
-      const label = item.t.replace(new RegExp(inputValue, 'ig'), (txt) => {
+      const label = item.t.replace(getValueReg(inputValue), (txt) => `<mark>${txt}</mark>`);
-        return `<mark>${txt}</mark>`
+      const href = getDocUrl(data.item.path);
      })
      const href = isHome ? data.item.path : data.item.path.replace('docs/', '');
      if (item.l < 3) {
-        sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`
+        sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`;
      } else {
-        sectionHTML += `<a href="${href + item.a}">${label}</a>`
+        sectionHTML += `<a href="${href + item.a}">${label}</a>`;
      }
      if (data.item.sections.length === idx + 1) {
-        sectionHTML += `</div></li>`
+        sectionHTML += `</div></li>`;
      }
    })
  }
--- a/scripts/nodes/search.mjs
+++ b/scripts/nodes/search.mjs
@ -62,7 +62,12 @@ export function search({ homePath = '', isHome } = {}) {
                    {
                      type: 'element',
                      tagName: 'input',
-                      properties: { id: ['mysearch-input'], type: 'search' },
+                      properties: {
                        id: ['mysearch-input'],
                        type: 'search',
                        placeholder: '搜索备忘清单',
                        autocomplete: 'off',
                      },
                      children: [],
                    },
                    {
--- a/scripts/style/style.css
+++ b/scripts/style/style.css
@ -549,7 +549,7 @@ a.text-grey {
 .header-nav .menu .searchbtn span:last-child {
  transition: all 0.3s;
  border: 1px solid var(--color-border-default);
-  border-radius: 3px;
+  border-radius: 0.4rem;
  padding: 1px 1px 1px 3px;
  letter-spacing: 3px;
 }
@ -853,11 +853,11 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 .h2wrap-body ul.style-timeline {
  counter-reset: stepCount;
 }
-.h2wrap-body ul.style-timeline li:first-child:before {
+.h2wrap-body ul.style-timeline > li:first-child:before {
  background-color: #228e6c;
  color: rgb(226 232 240/1);
 }
-.h2wrap-body ul.style-timeline li::before {
+.h2wrap-body ul.style-timeline > li::before {
  color: #228e6c;
  background-color: var(--color-canvas-default);
  counter-increment: stepCount;
@ -873,10 +873,10 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  top: -1px;
  left: -14px;
 }
-.h2wrap-body ul.style-timeline li:last-child {
+.h2wrap-body ul.style-timeline > li:last-child {
  border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
 }
-.h2wrap-body ul.style-timeline li {
+.h2wrap-body ul.style-timeline > li {
  border-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 25px !important;
@ -884,7 +884,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  margin-left: 30px;
  border-left-color: #46c69e96;
 }
-.h2wrap-body ul.style-timeline li > pre {
+.h2wrap-body ul.style-timeline > li > pre {
  padding: 0 !important;
  padding-top: 10px !important;
  height: initial !important;
@ -1234,7 +1234,6 @@ body.search {
  height: 100%;
 }
 #mysearch.show .mysearch-result > * {
  width: 50%;
  overflow-y: auto;
  padding: 0.6rem;
 }
@ -1260,6 +1259,10 @@ body.search {
  justify-content: center;
 }
 .mysearch-input input::placeholder {
  font-weight: normal;
  font-size: 1.3rem;
 }
 .mysearch-input {
  height: 3.5rem;
  display: flex;
@ -1315,12 +1318,24 @@ body.search {
  white-space: pre-wrap;
  text-decoration: none;
  color: var(--color-fg-default);
  align-items: center;
  justify-content: space-between;
 }
 #mysearch-menu a > sup {
  color: var(--color-fg-subtle);
  font-size: 0.7rem;
 }
 #mysearch-menu a:hover,
 #mysearch-menu a.active {
  background-color: var(--color-neutral-muted);
  border-radius: 0.5rem;
 }
 #mysearch-menu {
  width: 25rem;
 }
 #mysearch-content {
  flex: 1;
 }
 #mysearch-content ol li div a:hover {
  background-color: var(--primary-color);
  color: #fff;
--- a/scripts/utils/darkMode.mjs
+++ b/scripts/utils/darkMode.mjs
@ -4,7 +4,7 @@ import { getSVGNode } from './getSVGNode.mjs';
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
 export function darkMode({ homePath = '', isHome } = {}) {
-  const relativePath = homePath.replace(/\/?index.html$/, isHome ? '' : '/');
+  const relativePath = homePath.replace(/[\\/]?index.html$/, isHome ? '' : '/');
  const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
  const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
  const sunNode = getSVGNode(iconSunPath);
--- a/scripts/utils/homeCardIcons.mjs
+++ b/scripts/utils/homeCardIcons.mjs
@ -1,7 +1,11 @@
 import fs from 'fs-extra';
 import path from 'path';
 import { getCodeString } from 'rehype-rewrite';
 import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
 const resultHomeCard = {};
 const COLOR_REG = /background:(\s+)?rgb\(([\d]+\s+[\d]+\s+[\d]+(\s+)?)\);?/gi;
 export function homeCardIcons(node, parent, isHome) {
  if (
    isHome &&
@ -22,16 +26,23 @@ export function homeCardIcons(node, parent, isHome) {
  ) {
    node.children = node.children.map((child) => {
      const href = child.properties?.href;
-      if (href) {
+      if (href && href.endsWith('.md')) {
        const iconName = path.basename(href, '.md');
        const iconPath = path.resolve(ICONS_PATH, `${iconName}.svg`);
        const iconDefaultPath = path.resolve(ICONS_PATH, `list.svg`);
        const iconExist = fs.existsSync(iconPath);
        let color = '';
        child.properties.style = child.properties.style.replace(COLOR_REG, (str) => {
          color = str.replace(COLOR_REG, '$2');
          return str.replace(/(\);)/, '/ var(--bg-opacity)$1');
        });
        const tags = child.properties['data-lang'];
        const labelNode = {
          type: 'element',
          tagName: 'span',
          children: child.children,
        };
        const title = getCodeString(child.children);
        if (iconExist) {
          const svgNode = getSVGNode(iconPath);
          child.children = [...svgNode, labelNode];
@ -39,8 +50,15 @@ export function homeCardIcons(node, parent, isHome) {
          const svgNode = getSVGNode(iconDefaultPath);
          child.children = [...svgNode, labelNode];
        }
        resultHomeCard[iconName] = {
          md: iconName,
          title: title,
          rgb: color,
          tags: tags ? tags.split('/') : [],
        };
      }
      return child;
    });
  }
  return resultHomeCard;
 }
Author	SHA1	Message	Date
jaywcjlove	8a5153365d	released v1.25.0	2022-11-22 00:19:57 +08:00
jaywcjlove	b41c170b0c	website: add search arrow selection.	2022-11-22 00:18:06 +08:00
jaywcjlove	e0e7636ba4	website: fix windows path issue. #161	2022-11-21 23:43:42 +08:00
jaywcjlove	8399eafe6e	chore: udpate workflows config.	2022-11-21 23:28:07 +08:00
jaywcjlove	7f7a16f5e1	chore: udpate workflows config.	2022-11-21 23:19:37 +08:00
jaywcjlove	98a73126d7	chore: udpate workflows config.	2022-11-21 23:12:41 +08:00
jaywcjlove	f66f93f97e	chore: fix scripts issue.	2022-11-21 23:03:32 +08:00
jaywcjlove	12ca14cee9	test: add workflows config.	2022-11-21 22:54:56 +08:00
jaywcjlove	e4a0ff20ac	doc: update quickreference.md	2022-11-21 22:12:57 +08:00
jaywcjlove	08f7f0e18a	doc: update vue.md #10	2022-11-21 22:06:45 +08:00
github-actions[bot]	80e029fc3b	doc: modify README.md.	2022-11-21 13:04:38 +00:00
github-actions[bot]	0f5d2d03e9	doc: modify CONTRIBUTING.md.	2022-11-21 13:04:37 +00:00
mancuoj	f22b15c77d	docs: update markdown.md (#163 )	2022-11-21 21:03:18 +08:00
jaywcjlove	afbfcc2285	webite: optimize search result. fix #159	2022-11-21 16:13:20 +08:00
jaywcjlove	3b3e6f3eb8	doc: fix #160	2022-11-21 16:04:43 +08:00
jaywcjlove	32af5af854	website: add search enter shortcat key to jump to the page.	2022-11-21 15:59:20 +08:00
github-actions[bot]	c72654c5ab	doc: modify README.md.	2022-11-21 07:50:45 +00:00
github-actions[bot]	a43a282f36	doc: modify CONTRIBUTING.md.	2022-11-21 07:50:44 +00:00
mofelee	2decea91c7	doc: c++ typo & update READMe.md (#158 )	2022-11-21 15:49:25 +08:00
mofelee	9070aa7669	doc(git): update git.md (#156 )	2022-11-21 15:07:17 +08:00
mofelee	a24992709a	doc: redhat typo (#157 )	2022-11-21 15:06:20 +08:00
jaywcjlove	e7ef9347d6	doc: update markdown.md	2022-11-21 14:55:14 +08:00
jaywcjlove	1f73708838	doc: update vue.md #154 #10	2022-11-21 14:38:20 +08:00
jaywcjlove	849dc045e5	doc: update quickreference.md	2022-11-21 14:37:01 +08:00
fw_qaq	4cadbf1096	doc: update vue3 (#154 ) (#10 )	2022-11-21 14:36:08 +08:00
jaywcjlove	60eada1748	doc: update vue.md #10	2022-11-21 14:14:48 +08:00
jaywcjlove	b473d99111	fix: fix search error & add name field in data.json #105	2022-11-21 13:56:30 +08:00
github-actions[bot]	05f3df7e04	doc: modify README.md.	2022-11-21 02:30:33 +00:00
github-actions[bot]	0a34a8f5bc	doc: modify CONTRIBUTING.md.	2022-11-21 02:30:32 +00:00
jaywcjlove	1ae50452f5	doc: update cs.md #153 #152	2022-11-21 10:28:58 +08:00
秋雨落	516aed9f11	doc: maybe better translate of cs.md (#152 ) * doc: maybe better translate. Signed-off-by: 秋雨落 <i@rain.cx> * Update cs.md Signed-off-by: 秋雨落 <i@rain.cx>	2022-11-21 10:25:12 +08:00
github-actions[bot]	9dcf42e5d7	doc: modify README.md.	2022-11-21 01:52:05 +00:00
github-actions[bot]	d33bb6c7b6	doc: modify CONTRIBUTING.md.	2022-11-21 01:52:04 +00:00
jaywcjlove	a1f283b55f	doc: update nestjs.md #29	2022-11-21 09:50:46 +08:00
42:p	0b66ca4b90	docs: add nestjs.md (#151 ) (#29 ) * docs: 添加 'Provide / Inject' 组件传值 * feat: add nestjs.md cheatsheet.	2022-11-21 08:44:25 +08:00
jaywcjlove	473822f988	website: search input add palceholder.	2022-11-20 19:17:46 +08:00
jaywcjlove	63adae9cbc	doc: update mitmproxy.md #60	2022-11-20 19:05:44 +08:00
jaywcjlove	46d2f13e70	feat: add mitmproxy.md #60	2022-11-20 18:56:07 +08:00
jaywcjlove	99fe72ef73	doc: update css.md	2022-11-20 18:14:46 +08:00
jaywcjlove	3004986d2d	doc: update flutter.md #58 #149	2022-11-20 17:24:23 +08:00
jaywcjlove	0148846d7e	doc: update flutter.md #58 #149	2022-11-20 17:19:32 +08:00
jaywcjlove	68fba8a8ae	doc: update flutter.md #58 #149	2022-11-20 16:38:00 +08:00
github-actions[bot]	975888bc92	doc: modify README.md.	2022-11-20 08:07:19 +00:00
github-actions[bot]	558ce4c9eb	doc: modify CONTRIBUTING.md.	2022-11-20 08:07:19 +00:00
LufsX	10e4251f99	doc: update homebrew.md (#150 ) 添加更多的清理用例以及一些小小的修正	2022-11-20 16:06:20 +08:00
Jefferson	06b26437de	docs: add flutter.md (#149 ) * docs: update dart.md * docs: add flutter.md	2022-11-20 16:05:54 +08:00