Quick Reference 备忘清单

.
├── CONTRIBUTING.md   # 贡献说明
├── Dockerfile
├── LICENSE
├── README.md  # 🌐 Home(首页)内容
├── dist       # 📦 编译后的静态资源目录
├── docs       # 👈 Markdown 文档(速查表)
│   ├── bash.md
│   ├── ....
│   └── yaml.md
├── .refsrc.json # refs 配置
├── package.json
└── assets  # LOGO 图标文件资源

一个简单的备忘清单包含 页面大标题<h1>，放在大标题下面的 介绍 文本，<h2> 分类标题，<h3> 内容为 卡片

备忘清单 (页面大标题)
===

这是您可以在当前清单上使用的样式参考！备忘清单介绍

入门 (分类标题)
---

### 介绍 (卡片)

卡片内容

上面 markdown 内容存放到 docs 目录中，命名为 xxx.md

[Django](./docs/django.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing-->

添加 contributing 类名，会在卡片下方默认添加 👆待完善需要您的参与

class=tag&data-info=👆看看还缺点儿什么？

上面示例将默认提示更改为： 👆看看还缺点儿什么？

[Django](./docs/django.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=tag&data-lang=Python-->

添加 class=tag&data-lang=Python 类名和参数，会在卡片右上角标记 Python

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

[email protected]

将 .refsrc.json 存放在项目的根目录下

{
  "title": "文档网站名称",
  "description": "{{description}} 网站说明",
  "keywords": "关键字,refs-cli,refs,cli",
  "data-info": "👆 需要你的参与",
  "search": {
    "label": "搜索",
    "placeholder": "搜索备忘清单",
    "cancel": "取消"
  },
  "editor": {
    "label": "编辑"
  },
  "github": {
    "url": "https://<github url>"
  },
  "home": {
    "label": "首页",
    "url": "https://<你的网站>"
  },
  "footer": "<br />备案号：支持HTML字符串",
  "license": "支持 HTML 字符串"
}

支持 JSON, JSONC, JSON5, YAML, TOML, INI, CJS, Typescript, 和 ESM 配置加载。

将 .refsrc.toml 存放在项目的根目录下

title = "Refs CLI 文档网站名称"
description = "{{description}}. 网站说明"
keywords = "关键字,reference,refs-cli,cli"
data-info = "👆 需要你的参与"

[search]
  label = "搜索"
  placeholder = "搜索备忘清单"
  cancel = "取消"

[editor]
  label = "编辑"

[github]
  url = "<github url>"

[home]
  label = "首页"
  url = "https://<你的网站>"

footer = "<br />备案号：支持HTML字符串"
license = "支持 HTML 字符串"

导航菜单

REF_URL=http://ref.ecdata.cn/
REF_LABEL=网站首页

页脚添加 (支持 HTML 字符串)

REF_FOOTER=备案号：沪ICP备20220000000号-1

修改版权信息 (支持 HTML 字符串)

LICENSE=Copyright (c) <b>2022</b> 小弟调调™

在项目根目录中创建 .env 文件

_我是红色_<!--rehype:style=color: red;-->
**加粗红色**<!--rehype:style=color: red;-->

上面添加注释样式，文字 我是红色 文字变红了

**加粗变大红色**
<!--rehype:style=color: red;font-size: 18px-->

上面添加注释样式，文字 加粗变大红色 变红并且大了

\```js
function () {}
\```
<!--rehype:className=wrap-text-->

如果代码块内容太长，使用强制换行类(wrap-text)解决

| Key | value | 
| ---- | ---- |
| `键` | 值    |
<!--rehype:className=show-header-->

注释配置添加 show-header 类，放置在表格下面，表头将被展示出来。

鼠标移动到上面有提示Tooltips 的提示内容

添加注释配置 <!--rehype:tooltips--> 添加一个 Tooltips 提示。

### H3 部分(卡片)背景颜色
<!--rehype:wrap-style=background: #8dffd42e;-->

### 红色标题
<!--rehype:style=background:#e91e63;-->

在 H3 标题下面添加样式标注 <!--rehype:style=background:#e91e63;-->

首列添加 <!--rehype:className=shortcuts--> 样式类，展示快捷键样式。

列尾添加 <!--rehype:className=shortcuts-last--> 样式类，展示快捷键样式。

export const Student = <div>学生</div>;
const school = <div>学校</div>;

下面是 Markdown 代码示例

  ```jsx showLineNumbers

标记语言后面添加 showLineNumbers 标识

  ```html preview
  <b>这里是你的 HTML 代码</b>
  \```

这里是你的 HTML 代码

上面的 markdown 代码在 meta 位置添加 preview 标识，HTML 代码将被执行预览

隐藏卡片标题，在 H3 标题下面添加注释样式

### 隐藏卡片标题
<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->

$$c = \pm\sqrt{a^2 + b^2}
L = \frac{1}{2} \rho v^2 S C_L$$

上面示例 Markdown 代码源码

  ```KaTeX
  c = \pm\sqrt{a^2 + b^2}
  L = \frac{1}{2} \rho v^2 S C_L

还可以单行展示 $c = \pm\sqrt{a^2 + b^2}$，需要标记 `KaTeX:数学公式` 将被显示成数学公式，这是基于 KaTeX 生成

### H3 部分
<!--rehype:wrap-style=grid-row: span 2/span 2;-->

放在 ### H3 部分 下面的注释配置，与 <!--rehype:wrap-class=row-span-2--> 相同，设置 2 行占位布局。

## H2 部分
<!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));-->

放在 ## H2 部分 下面的注释配置，与 <!--rehype:body-class=cols-2--> 相同，设置 2 栏布局。

### 卡片 1 (H3 部分)
<!--rehype:wrap-class=row-span-2-->
### 卡片 2 (H3 部分)
<!--rehype:wrap-class=col-span-3-->
### 卡片 3 (H3 部分)

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆   H3 Title 1  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### H3 Title 1
<!--rehype:wrap-class=col-span-3-->
### Title 2

### Title 3

### Title 4

第一标题添加 col-span-3 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
┆   ┆ ╰┈┈┈╯ ╰┈┈┈╯
┆   ┆ ╭┈┈┈╮ ╭┈┈┈╮
┆   ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
<!--rehype:wrap-class=row-span-2-->
### Title 2
### Title 3
### Title 4
### Title 5

在 Title 1 标题添加 row-span-2 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ┆   ┆ ╰┈┈┈╯
╭┈┈┈╮ ┆   ┆ ╭┈┈┈╮
┆ 4 ┆ ┆   ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
<!--rehype:wrap-class=row-span-2-->
### Title 3
### Title 4
### Title 5

在 Title 2 标题添加 row-span-2 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ┆   ┆
╭┈┈┈╮ ╭┈┈┈╮ ┆   ┆
┆ 4 ┆ ┆ 5 ┆ ┆   ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
### Title 3
<!--rehype:wrap-class=row-span-2-->
### Title 4
### Title 5

在 Title 3 标题添加 row-span-2 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ 
╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4 ┆ ┆ 5       ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
### Title 3
### Title 4
### Title 5
<!--rehype:wrap-class=col-span-2-->

在 Title 5 标题添加 col-span-2 占位类

╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1 ┆ ┆ 2       ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
<!--rehype:wrap-class=col-span-2-->
### Title 3
### Title 4
### Title 5

在 Title 2 标题添加 col-span-2 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 4       ┆ ┆ 5 ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
### Title 3
### Title 4
<!--rehype:wrap-class=col-span-2-->
### Title 5

在 Title 4 标题添加 col-span-2 占位类

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆     H3 Title 1      ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

H2 部分
----
<!--rehype:body-class=cols-4-->
### Title 1
<!--rehype:wrap-class=col-span-4-->
### Title 2
### Title 3
### Title 4
### Title 5

在 H2 部分 标题添加 cols-4，和 Title 1 添加 col-span-4 合并栏

# <!--rehype:className=shortcuts-->

# <!--rehype:className=show-header-->

# <!--rehype:className=style-list-->

# <!--rehype:className=style-list-arrow-->

# <!--rehype:className=auto-wrap-->

# 添加 <!--rehype:className=code-nowrap-->

• Item 1
• Item 2
• Item 3

#示例

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

# <!--rehype:className=cols-4-->

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

# <!--rehype:className=cols-3 style-none-->

• Item 1
• Item 2
• Item 3

# <!--rehype:className=style-round-->

• Item 1
• Item 2
• Item 3

# <!--rehype:className=style-arrow-->

...红色标题配置

# <!--rehype:style=background:#e91e63;-->

...黄色标题配置

# <!--rehype:style=background:#d7a100;-->

每个盒子(卡片)都是一个 H3 部分。 盒子将包含 H3 自身内的所有东西。

#示例 这是一个包含段落的基本部分

注释配置：
`<!--rehype:wrap-style=background: #1e7da173;-->`

#示例