Quick Reference 备忘清单 === 这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与[贡献](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)！ 入门 --- ### 本地编译预览 将仓库克隆到本地调试页面。请参阅[贡献指南](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)了解如何开始 #### 克隆仓库 ```shell git clone git@github.com:jaywcjlove/reference.git ``` #### 安装依赖编译生成 HTML 页面 ```shell npm i # 安装依赖 npm run build # 编译输出 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 ├── .refsrc.json # refs 配置 ├── package.json └── assets # LOGO 图标文件资源 ``` ### 添加一个备忘清单 一个简单的备忘清单包含 `页面大标题

`，放在大标题下面的 `介绍` 文本，`

` 分类标题，`

` 内容为 `卡片` ```markdown 备忘清单 (页面大标题) === 这是您可以在当前清单上使用的样式参考！备忘清单介绍 入门 (分类标题) --- ### 介绍 (卡片) 卡片内容 ``` 上面 markdown 内容存放到 `docs` 目录中，命名为 `xxx.md` ### 首页导航 首页(`README.md`)存放在仓库的根目录，通过这个 `README.md` 自动生成首页导航，下面是导航实例： ```markdown ## Linux 命令 [Cron](./docs/cron.md) ``` 首页导航图标存放在 `/assets` 目录中，如果你的备忘清单定义为 `docs/cron.md`，那么你的图标就定义为 `cron.svg` 存放到 `/assets` 目录中，重新编译首页当行菜单就拥有了图标。 - 图标存放在 [`/assets`](https://github.com/jaywcjlove/reference/tree/main/assets) 目录中 - 图片名称与清单名称保持一致 `cron.md` -> `cron.svg` (注意大小写) - SVG 图标尺寸 `` 标识卡片样式 ### 首页提示配置 ```markdown [Django](./docs/django.md) ``` 添加 `contributing` 类名，会在卡片下方默认添加 `👆待完善需要您的参与` ```markdown class=tag&data-info=👆看看还缺点儿什么？ ``` 上面示例将默认提示更改为： `👆看看还缺点儿什么？` ```markdown [Django](./docs/django.md) ``` 添加 `class=tag&data-lang=Python` 类名和参数，会在卡片右上角标记 _`Python`_ ### 命令帮助 ```bash Usage: refs-cli [output-dir] [--help|h] 显示帮助信息 Options: --version, -v 显示版本号 --help, -h 显示帮助信息 --watch, -w 观看并编译 Markdown 文件 --output, -o 输出目录。默认（分布） --force, -f 强制文件重新生成 Example: $ npx refs-cli $ refs-cli --watch $ refs-cli --output website $ refs-cli refs-cli@v0.0.1 ``` ### 配置 Config 将 `.refsrc.json` 存放在项目的根目录下 ```json { "title": "文档网站名称", "description": "{{description}} 网站说明", "keywords": "关键字,refs-cli,refs,cli", "data-info": "👆 需要你的参与", "search": { "label": "搜索", "placeholder": "搜索备忘清单", "cancel": "取消" }, "editor": { "label": "编辑" }, "github": { "url": "https://" }, "home": { "label": "首页", "url": "https://<你的网站>" }, "footer": "
备案号：支持HTML字符串", "license": "支持 HTML 字符串" } ``` 支持 [JSON](https://www.json.org), [JSONC](https://github.com/microsoft/node-jsonc-parser), [JSON5](https://json5.org/), [YAML](https://yaml.org/), [TOML](https://toml.io), [INI](https://en.wikipedia.org/wiki/INI_file), [CJS](http://www.commonjs.org), [Typescript](https://www.typescriptlang.org/), 和 ESM 配置加载。 ### `TOML` 配置示例 将 `.refsrc.toml` 存放在项目的根目录下 ```toml title = "Refs CLI 文档网站名称" description = "{{description}}. 网站说明" keywords = "关键字,reference,refs-cli,cli" data-info = "👆 需要你的参与" [search] label = "搜索" placeholder = "搜索备忘清单" cancel = "取消" [editor] label = "编辑" [github] url = "" [home] label = "首页" url = "https://<你的网站>" footer = "
备案号：支持HTML字符串" license = "支持 HTML 字符串" ``` ### 支持更多配置加载 - `.refsrc` - `.refsrc.json` - `.refsrc.json5` - `.refsrc.jsonc` - `.refsrc.yaml` - `.refsrc.yml` - `.refsrc.toml` - `.refsrc.ini` - `.refsrc.js` - `.refsrc.ts` - `.refsrc.cjs` - `.refsrc.mjs` - `.config/refsrc` - `.config/refsrc.json` - `.config/refsrc.json5` - `.config/refsrc.jsonc` - `.config/refsrc.yaml` - `.config/refsrc.yml` - `.config/refsrc.toml` - `.config/refsrc.ini` - `.config/refsrc.js` - `.config/refsrc.ts` - `.config/refsrc.cjs` - `.config/refsrc.mjs` - `refs.config.js` - `refs.config.ts` - `refs.config.cjs` - `refs.config.mjs` ### 环境变量 导航菜单 ```ini REF_URL=http://ref.ecdata.cn/ REF_LABEL=网站首页 ``` 页脚添加 (支持 HTML 字符串) ```ini REF_FOOTER=备案号：沪ICP备20220000000号-1 ``` 修改版权信息 (支持 HTML 字符串) ```ini LICENSE=Copyright (c) 2022 小弟调调™ ``` 在项目根目录中创建 **.env** 文件 Markdown 语法注释 --- ### 介绍 在备忘清单采用 `HTML 注释语法`，标识网站布局和一些样式，目的是为了在 `GitHub` 中也是正常毫无瑕疵的预览 [`Markdown`](./markdown.md)。 ```markdown ### 卡片标题 卡片 Markdown 内容展示，下面注释语法为文字内容改变样式 ``` 上面基础示例，使用 `col-span-2` 类标识，卡片占 `2` 列位置，参考现有备忘清单的源代码是一个好习惯！ ### 注释语法介绍 - 在某个 [`Markdown`](./markdown.md) 语法下方或者后面，添加 HTML注释 - 以 `` 结束，包裹参数内容 - 内容采用 URL 参数的字符拼接方式 #### 语法 `` `标识开始` + `参数` + `分隔符(&)` + `参数` + `标识结束` #### 示例 ```markdown ## H2 部分 ### H3 部分 ``` #### 示例，三行占位，标题红色 ```markdown ### 标题 ``` #### 参数说明 类 | 说明 ---- | ---- `body-style` | 包裹所有卡片`外壳`的样式 `body-class` | 用于卡片栏布局，添加`类`名 `wrap-style` | 卡片栏添加 [CSS](./css.md) 样式 `wrap-class` | 用于卡片占位，添加`类`名 ### 文字颜色 ```markdown _我是红色_ **加粗红色** ``` 上面添加注释样式，文字 _我是红色_ 文字变`红`了 ### 文字大小 ```markdown **加粗变大红色** ``` 上面添加注释样式，文字 _加粗变大红色_ 变`红`并且`大`了 ### 强制换行 ```markdown \```js function () {} \``` ``` 如果代码块内容太长，使用强制换行类(`wrap-text`)解决 ### 展示表格表头 ```markdown | Key | value | | ---- | ---- | | `键` | 值 | ``` 注释配置添加 `show-header` 类，放置在表格下面，表头将被展示出来。 ### 代码行高亮 ```jsx {1,4-5} import React from "react"; import "./Student.css"; export const Student = (
); ``` 上面 `{1,4-5}` 行代码高亮，下面是 [`Markdown`](./markdown.md) 代码示例 ```markdown ```jsx {1,4-5} ``` 代码行高亮可以和代码行号一起使用。 ### Tooltips [鼠标移动到上面有提示](https://github.com/jaywcjlove/reference) _Tooltips 的提示内容_ 添加注释配置 `` 添加一个 Tooltips 提示。 ### H3 部分(卡片)背景颜色 ```markdown ### H3 部分(卡片)背景颜色 ``` ### 红色标题 ```markdown ### 红色标题 ``` 在 H3 标题下面添加样式标注 `` ### 快捷键样式 | Key | value | | ---- | ---- | | `快捷键` | 说明 | | `快捷键` | 说明 | 列表添加 `` 样式类，展示快捷键样式。 ### 代码行号 ```jsx showLineNumbers export const Student =
学生
; const school =
学校
; ``` 下面是 `Markdown` 代码示例 ```markdown ```jsx showLineNumbers ``` 标记语言后面添加 `showLineNumbers` 标识 ### 内置类样式 :- | - :- | - `shortcuts` | 快捷键样式 `wrap-text` | 超出换行 `show-header` | 展示表头 `style-none` | 隐藏 `