From 7dab833cb5547b43cb70f60da7cb35dba90c8cbf Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sun, 13 Nov 2022 03:46:04 +0800
Subject: [PATCH] doc: update `quickreference.md`.

---
 README.md              |  11 +--
 docs/quickreference.md | 159 ++++++++++++++++++++++++++++++++---------
 2 files changed, 131 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 3697eca..d950022 100644
--- a/README.md
+++ b/README.md
@@ -147,10 +147,11 @@ Quick Reference
 [`我有一张备忘单(速查表)`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
 <!--rehype:style=margin-top:3rem-->
 
-<!--rehype:ignore:start-->
-## 贡献
+## 感谢所有贡献者
+<!--rehype:wrap-style=text-align: center;max-width: 650px;margin: 0 auto;&class=home-title-reset-->
 
-请参阅[贡献指南](./CONTRIBUTING.md)了解如何开始。一如既往，感谢我们出色的贡献者！
+请参阅 [Quick Reference](./docs/quickreference.md) 了解如何开始。一如既往，感谢我们出色的贡献者！
+<!--rehype:style=padding-bottom:1rem;-->
 
 <!--GAMFC--><a href="https://github.com/jaywcjlove">
   <img src="https://avatars.githubusercontent.com/u/1680273?v=4" width="42;" alt="小弟调调™"/>
@@ -186,8 +187,10 @@ Quick Reference
   <img src="https://avatars.githubusercontent.com/u/114141362?v=4" width="42;" alt="zxx-457"/>
 </a><!--GAMFC-END-->
 
-上图贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成贡献者图片。
+贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成
+<!--rehype:style=padding-top:1rem;-->
 
+<!--rehype:ignore:start-->
 ## License
 
 MIT © [Kenny Wong](https://github.com/jaywcjlove)
diff --git a/docs/quickreference.md b/docs/quickreference.md
index d599206..2880258 100644
--- a/docs/quickreference.md
+++ b/docs/quickreference.md
@@ -8,7 +8,7 @@ Quick Reference 备忘清单
 
 ### 本地编译预览
 
-简单的将仓库克隆下来本地调试页面展示。
+将仓库克隆到本地调试页面。请参阅[贡献指南](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)了解如何开始
 
 #### 克隆仓库
 
@@ -22,12 +22,101 @@ git clone git@github.com:jaywcjlove/reference.git
 ```shell
 npm i         # 安装依赖
 npm run build # 编译输出 HTML
-npm run start # 监听 md 文件编译输出 HTML
 ```
 
 HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静态页面在浏览器中打开预览。
 
+```shell
+npm run start # 监听 md 文件编译输出 HTML
+```
+
+### 目录结构
+
+```bash
+.
+├── CONTRIBUTING.md   # 贡献说明
+├── Dockerfile
+├── LICENSE
+├── README.md   # Home(首页) 内容
+├── dist        # 编译后的静态资源目录
+├── docs        # Markdown 文档（速查表）
+│   ├── bash.md
+│   ├── ....
+│   └── yaml.md
+├── package.json
+└── scripts     # MD 转 HTML 的编译脚本
+    ├── assets  # LOGO 图标文件资源
+    ├── ....
+    └── watch.mjs
+```
+
+### 添加一个备忘清单
+
+一个简单的备忘清单包含 `页面大标题<h1>`，放在大标题下面的 `介绍` 文本，`<h2>` 分类标题，`<h3>` 内容为 `卡片`
+
+```markdown
+备忘清单 (页面大标题)
+===
+
+这是您可以在当前清单上使用的样式参考！备忘清单介绍
+
+入门 (分类标题)
+---
+
+### 介绍 (卡片)
+
+卡片内容
+```
+
+上面 markdown 内容存放到 `docs` 目录中，命名为 `xxx.md`
+
+### 首页导航
+<!--rehype:wrap-class=col-span-2-->
+
+首页(`README.md`)存放在仓库的根目录，通过这个 `README.md` 自动生成首页导航，下面是导航实例：
+
+```markdown
+## Linux 命令
+
+[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
+<!--rehype:class=home-card-->
+```
+
+首页导航图标存放在 `scripts/assets` 目录中，如果你的备忘清单定义为 `docs/cron.md`，那么你的图标就定义为 `cron.svg` 存放到 `scripts/assets` 目录中，重新编译首页当行菜单就拥有了图标。
+
+- 图标存放在 [`scripts/assets`](https://github.com/jaywcjlove/reference/blob/main/scripts/assets) 目录中
+- 图片名称与清单名称保持一致 `cron.md` -> `cron.svg` (注意大小写)
+- SVG 图标尺寸 `<svg height="1em" width="1em"`
+- SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
+- 使用 `<!--rehype:class=home-card-->` 标识卡片样式
+
+### 首页提示配置
+
+```markdown
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing-->
+```
+<!--rehype:className=wrap-text -->
+
+添加 `contributing` 类名，会在卡片下方默认添加 `👆待完善需要您的参与`
+
+```markdown
+class=tag&data-info=👆看看还缺点儿什么？
+```
+
+上面示例将默认提示更改为： `👆看看还缺点儿什么？`
+
+```markdown
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=tag&data-lang=Python-->
+```
+<!--rehype:className=wrap-text -->
+
+添加 `class=tag&data-lang=Python` 类名和参数，会在卡片右上角标记 _`Python`_
+
+Markdown 语法注释
+---
+
 ### 介绍
+<!--rehype:wrap-class=row-span-2-->
 
 在备忘清单采用 `HTML 注释语法`，标识网站布局和一些样式，目的是为了在 `GitHub` 中也是正常毫无瑕疵的预览 [`Markdown`](./markdown.md)。
 
@@ -40,10 +129,10 @@ HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静
 ```
 <!--rehype:className=wrap-text -->
 
-使用 `col-span-2` 类标识，卡片占 `2` 列位置
+上面基础示例，使用 `col-span-2` 类标识，卡片占 `2` 列位置，参考现有备忘清单的源代码是一个好习惯！
 
 ### 注释语法介绍
-<!--rehype:wrap-class=row-span-3&style=color:black;background-color: #d7a100;-->
+<!--rehype:wrap-class=row-span-4&style=color:black;background-color: #d7a100;-->
 
 - 在某个 [`Markdown`](./markdown.md) 语法下方或者后面，添加 HTML注释
 - 以 `<!--rehype:` 开始，`-->` 结束，包裹参数内容
@@ -149,11 +238,11 @@ export const Student = (
 添加注释配置 `<!--rehype:tooltips-->` 添加一个 Tooltips 提示。
 
 ### H3 部分(卡片)背景颜色
-<!--rehype:wrap-style=background: #00c69357;-->
+<!--rehype:wrap-style=background: #8dffd42e;-->
 
 ```markdown
 ### H3 部分(卡片)背景颜色
-<!--rehype:wrap-style=background: #00c69357;-->
+<!--rehype:wrap-style=background: #8dffd42e;-->
 ```
 <!--rehype:className=wrap-text -->
 
@@ -214,35 +303,6 @@ const school = <div>学校</div>;
 `<del>` 或 `~~删除~~` | <del>~~红色~~</del>
 <!--rehype:className=shortcuts-->
 
-### 注释类配置
-<!--rehype:wrap-class=col-span-2 row-span-2-->
-
-类 | 说明
----- | ----
-`<!--rehype:className=wrap-text-->` | 强制换行
-`<!--rehype:className=show-header-->` | 展示表格表头
-`<!--rehype:className=shortcuts-->` | 快捷键样式
-`<!--rehype:className=auto-wrap-->` | 隐藏表头强制小尺寸自动换行
-`<!--rehype:className=style-list-arrow-->` | 列表箭头样式展示表格
-`<!--rehype:className=style-list-->` | 列表样式展示表格
-`<!--rehype:className=left-align-->` | 表格末尾列左对齐
-`<!--rehype:className=style-none-->` | \<li> 没有标记
-`<!--rehype:className=style-timeline-->` | 时间轴样式
-`<!--rehype:className=style-arrow-->` | 箭头标记
-
-### 隐藏卡片标题
-<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
-
-```
-隐藏卡片标题，在 H3 标题下面添加注释样式
-```
-
-```markdown {2}
-### 隐藏卡片标题
-<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
-```
-<!--rehype:className=wrap-text -->
-
 ### HTML 代码预览
 
 ```
@@ -259,6 +319,35 @@ const school = <div>学校</div>;
 
 上面的 [`markdown`](./markdown.md) 代码在 `meta` 位置添加 `preview` 标识，[HTML](./html.md) 代码将被执行预览
 
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+
+```
+隐藏卡片标题，在 H3 标题下面添加注释样式
+```
+
+```markdown {2}
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+```
+<!--rehype:className=wrap-text -->
+
+### 注释类配置
+<!--rehype:wrap-class=col-span-2-->
+
+类 | 说明
+---- | ----
+`<!--rehype:className=wrap-text-->` | 强制换行
+`<!--rehype:className=show-header-->` | 展示表格表头
+`<!--rehype:className=shortcuts-->` | 快捷键样式
+`<!--rehype:className=auto-wrap-->` | 隐藏表头强制小尺寸自动换行
+`<!--rehype:className=style-list-arrow-->` | 列表箭头样式展示表格
+`<!--rehype:className=style-list-->` | 列表样式展示表格
+`<!--rehype:className=left-align-->` | 表格末尾列左对齐
+`<!--rehype:className=style-none-->` | \<li> 没有标记
+`<!--rehype:className=style-timeline-->` | 时间轴样式
+`<!--rehype:className=style-arrow-->` | 箭头标记
+
 ### KaTeX 数学渲染
 
 ```KaTeX