Appearance
Quick Reference 备忘清单
这是您可以在 Quick Reference 备忘单上使用的样式参考,快速参与贡献!
入门
本地编译预览
将仓库克隆到本地调试页面。请参阅贡献指南了解如何开始
克隆仓库
shell
git clone git@github.com:jaywcjlove/reference.git安装依赖编译生成 HTML 页面
shell
npm i # 安装依赖
npm run build # 编译输出 HTMLHTML 存放在仓库根目录下的 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 图标文件资源添加一个备忘清单
一个简单的备忘清单包含 页面大标题<h1>,放在大标题下面的 介绍 文本,<h2> 分类标题,<h3> 内容为 卡片
markdown
备忘清单 (页面大标题)
===
这是您可以在当前清单上使用的样式参考!备忘清单介绍
入门 (分类标题)
---
### 介绍 (卡片)
卡片内容上面 markdown 内容存放到 docs 目录中,命名为 xxx.md
首页导航
首页(README.md)存放在仓库的根目录,通过这个 README.md 自动生成首页导航,下面是导航实例:
markdown
## Linux 命令
[Cron](./docs/cron.md)首页导航图标存放在 /assets 目录中,如果你的备忘清单定义为 docs/cron.md,那么你的图标就定义为 cron.svg 存放到 /assets 目录中,重新编译首页当行菜单就拥有了图标。
- 图标存放在
/assets目录中 - 图片名称与清单名称保持一致
cron.md->cron.svg(注意大小写) - SVG 图标尺寸
<svg height="1em" width="1em" - SVG 图标颜色使用继承颜色值
<svg fill="currentColor" - 使用 `` 标识卡片样式
首页提示配置
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, JSONC, JSON5, YAML, TOML, INI, CJS, Typescript, 和 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.mjsrefs.config.jsrefs.config.tsrefs.config.cjsrefs.config.mjs
环境变量
导航菜单
ini
REF_URL=http://ref.ecdata.cn/
REF_LABEL=网站首页页脚添加 (支持 HTML 字符串)
ini
REF_FOOTER=备案号:沪ICP备20220000000号-1修改版权信息 (支持 HTML 字符串)
ini
LICENSE=Copyright (c) <b>2022</b> 小弟调调™在项目根目录中创建 .env 文件
图片
markdown

<img
src="./quickreference.svg?#sss=1"
alt="alt text"
height="95"
width="95"
/>在 Markdown 中引入图片
Markdown 语法注释
介绍
在备忘清单采用 HTML 注释语法,标识网站布局和一些样式,目的是为了在 GitHub 中也是正常毫无瑕疵的预览 Markdown。
markdown
### 卡片标题
卡片 Markdown 内容展示,下面注释语法为文字内容改变样式上面基础示例,使用 col-span-2 类标识,卡片占 2 列位置,参考现有备忘清单的源代码是一个好习惯!
注释语法介绍
- 在某个
Markdown语法下方或者后面,添加 HTML注释 - 以 `` 结束,包裹参数内容
- 内容采用 URL 参数的字符拼接方式
语法
``标识开始 + 参数 + 分隔符(&) + 参数 + 标识结束
示例
markdown
## H2 部分
### H3 部分示例,三行占位,标题红色
markdown
### 标题参数说明
| 类 | 说明 |
|---|---|
body-style | 包裹所有卡片外壳的样式 |
body-class | 用于卡片栏布局,添加类名 |
wrap-style | 卡片栏添加 CSS 样式 |
wrap-class | 用于卡片占位,添加类名 |
文字颜色
markdown
_我是红色_
**加粗红色**上面添加注释样式,文字 我是红色 文字变红了
文字大小
markdown
**加粗变大红色**上面添加注释样式,文字 加粗变大红色 变红并且大了
强制换行
markdown
\```js
function () {}
\```如果代码块内容太长,使用强制换行类(wrap-text)解决
展示表格表头
markdown
| Key | value |
| ---- | ---- |
| `键` | 值 |注释配置添加 show-header 类,放置在表格下面,表头将被展示出来。
代码行高亮
jsx
import React from "react";
import "./Student.css";
export const Student = (
<div className="Student"></div>
);上面 {1,4-5} 行代码高亮,下面是 Markdown 代码示例
markdown
```jsx {1,4-5}代码行高亮可以和代码行号一起使用。
Tooltips
鼠标移动到上面有提示 Tooltips 的提示内容
添加注释配置 `` 添加一个 Tooltips 提示。
H3 部分(卡片)背景颜色
markdown
### H3 部分(卡片)背景颜色红色标题
markdown
### 红色标题在 H3 标题下面添加样式标注 ``
快捷键样式
| Key | value |
|---|---|
快捷键 | 说明 |
快捷键 | 说明 |
首列添加 `` 样式类,展示快捷键样式。
| Key | value |
|---|---|
| 说明 | 快捷键 |
| 说明 | 快捷键 |
列尾添加 `` 样式类,展示快捷键样式。
代码行号
jsx
export const Student = <div>学生</div>;
const school = <div>学校</div>;下面是 Markdown 代码示例
markdown
```jsx showLineNumbers标记语言后面添加 showLineNumbers 标识
内置类样式
| :- | - |
|---|---|
shortcuts | 快捷键样式 |
wrap-text | 超出换行 |
show-header | 展示表头 |
style-none | 隐藏 <ul> 列表样式 |
style-list | <table> 单元格行展示 |
颜色标签
| :- | - |
|---|---|
<yel> | |
<red> | |
** | 紫色** |
<code> 或 `` | 绿色 |
<del> 或 ~~删除~~ |
HTML 代码预览
```html preview
<b>这里是你的 HTML 代码</b>
\```html
<b>这里是你的 HTML 代码</b>上面的 markdown 代码在 meta 位置添加 preview 标识,HTML 代码将被执行预览
隐藏卡片标题
隐藏卡片标题,在 H3 标题下面添加注释样式markdown
### 隐藏卡片标题注释类配置
| 类 | 说明 |
|---|---|
| `` | 强制换行 |
| `` | 展示表格表头 |
| `` | 首列快捷键样式 |
| `` | 尾列快捷键样式 |
| `` | 隐藏表头强制小尺寸自动换行 |
| `` | 列表箭头样式展示表格 |
| `` | 列表样式展示表格 |
| `` | 表格末尾列左对齐 |
| `` | <li> 没有标记样式 |
| `` | 时间轴样式 |
| `` | 箭头标记 |
KaTeX 数学渲染
KaTeX
c = \pm\sqrt{a^2 + b^2}
L = \frac{1}{2} \rho v^2 S C_L上面示例 Markdown 代码源码
markdown
```KaTeX
c = \pm\sqrt{a^2 + b^2}
L = \frac{1}{2} \rho v^2 S C_L还可以单行展示 KaTeX:c = \pm\sqrt{a^2 + b^2},需要标记 `KaTeX:数学公式` 将被显示成数学公式,这是基于 KaTeX 生成
布局
H2 部分
markdown
H2 部分
---
### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)上面实例 H2 部分 标题下面有三个卡片,默认 3 栏布局。
markdown
H2 部分
---
### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)使用注释配置为 H2 部分 添加 col-span-2 类,将 栏布局变成 32 栏布局。
| 类 | 说明 |
|---|---|
cols-1 | 1 栏卡片布局 |
cols-2 | 2 栏卡片布局 |
cols-3 | 3 栏卡片布局 |
cols-4 | 4 栏卡片布局 |
cols-5 | 5 栏卡片布局 |
cols-{1~6} | 1~6 栏卡片布局 |
占位布局 style 写法
markdown
### H3 部分放在 ### H3 部分 下面的注释配置,与 `` 相同,设置 2 行占位布局。
卡片栏布局 style 写法
markdown
## H2 部分放在 ## H2 部分 下面的注释配置,与 `` 相同,设置 2 栏布局。
H3 部分
markdown
### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)| :-- | -- |
|---|---|
| 合并 列 布局 | |
col-span-2 | 2 列占位 |
col-span-3 | 3 列占位 |
col-span-4 | 4 列占位 |
col-span-{2~10} | {2~10} 列占位 |
| 合并 行 布局 | |
row-span-2 | 2 行占位 |
row-span-3 | 3 行占位 |
row-span-4 | 4 行占位 |
row-span-{2~10} | {2~10} 行占位 |
卡片合并行布局 1
shell
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ H3 Title 1 ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### H3 Title 1
### Title 2
### Title 3
### Title 4第一标题添加 col-span-3 占位类
卡片列合并布局 2
shell
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
┆ ┆ ╰┈┈┈╯ ╰┈┈┈╯
┆ ┆ ╭┈┈┈╮ ╭┈┈┈╮
┆ ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 Title 1 标题添加 row-span-2 占位类
卡片列合并布局 3
shell
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ┆ ┆ ╰┈┈┈╯
╭┈┈┈╮ ┆ ┆ ╭┈┈┈╮
┆ 4 ┆ ┆ ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 Title 2 标题添加 row-span-2 占位类
卡片列合并布局 4
shell
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ┆ ┆
╭┈┈┈╮ ╭┈┈┈╮ ┆ ┆
┆ 4 ┆ ┆ 5 ┆ ┆ ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 Title 3 标题添加 row-span-2 占位类
卡片列合并布局 5
shell
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 Title 5 标题添加 col-span-2 占位类
卡片列合并布局 6
shell
╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1 ┆ ┆ 2 ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 Title 2 标题添加 col-span-2 占位类
卡片列合并布局 7
shell
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 4 ┆ ┆ 5 ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 Title 4 标题添加 col-span-2 占位类
卡片列合并布局 8
shell
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ H3 Title 1 ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
H2 部分
----
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5在 H2 部分 标题添加 cols-4,和 Title 1 添加 col-span-4 合并栏
卡片列合并布局 9
shell
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆
┆ ┆ ╰┈┈┈╯
┆ ┆ ╭┈┈┈╮
┆ ┆ ┆ 3 ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 4 ┆ ┆ 5 ┆ ┆ 6 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯上面布局效果 Markdown 源码:
markdown
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5
### Title 6# 在 Title 1 标题添加 col-span-2 和 row-span-2 占位类,使用 空格 间隔。
表格
基本表格
Date
| :- | :- |
|---|---|
%m/%d/%Y | 06/05/2013 |
%A, %B %e, %Y | Sunday, June 5, 2013 |
%b %e %a | Jun 5 Sun |
Time (H4)
| :- | :- |
|---|---|
%H:%M | 23:05 |
%I:%M %p | 11:05 PM |
# 标题为 H4 的基本表格。
快捷键
| :- | :- |
|---|---|
V | Vector |
P | Pencil |
T | Text |
L | Line |
R | Rectangle |
O | Oval |
U | Rounded |
# ``
展示标题
| Prefix | Example | What |
|---|---|---|
// | //hr[@class='edge'] | Anywhere |
./ | ./a | Relative |
/ | /html/body/div | Root |
# ``
列表样式展示表格
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
# ``
列表圆圈样式展示表格
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
添加 style-list-arrow 和 circle 样式
列表实心圆圈样式展示表格
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
添加 style-list-arrow 和 circlefill 样式
列表方形展示表格
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
添加 style-list-arrow 和 square 样式
列表实心方形展示表格
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
添加 style-list-arrow 和 squarefill 样式
列表箭头样式展示表格
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
# ``
隐藏表头强制小尺寸自动换行
| :- | :- |
|---|---|
visualEffectState.inactive | 后台应一直显示为非激活状态。 |
titleBarStyle string (win/mac) | 窗口标题栏样式。默认值 (default) |
titleBarStyle.default | 分别返回 mac 或者 win 的标准标题栏 |
# ``
表格末尾列左对齐
| Prefix | What |
|---|---|
// | Anywhere |
./ | Relative |
#示例 默认表格末尾列右对齐,添加 `` 类让其左对齐
强制 code 不换行
| Command | Description |
|---|---|
adb remount | Remounts file system with read/write access |
adb reboot bootloader | Reboots the device into fastboot |
# 添加 ``
列表
一栏(默认)
- Item 1
- Item 2
- Item 3
四列
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
# ``
列表步骤
重命名为 new_name
bash$ git branch -m推送和重置
bash$ git push origin -u删除远程分支
bash$ git push origin --delete
# ``
没有标记
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
# ``
圆圈标记
- Item 1
- Item 2
- Item 3
# ``
箭头标记
- Item 1
- Item 2
- Item 3
# ``
H2 部分 - 5列效果展示
One
...Two
...Three
...Four
...Five
...H3 部分 - 占位效果展示
row-span-2
...合并两行# ``
col-span-2
...合并两列# ``
红色标题
...红色标题配置# ``
黄色标题
...黄色标题配置# ``
col-span-3
... #示例 三列合并
卡片子项
#示例 每个部分可以有以下子项:
H4 子标题
- pre
- table
- ul
H4 子标题
- pre
- table
- ul
H3 部分
每个盒子(卡片)都是一个 H3 部分。 盒子将包含 H3 自身内的所有东西。
#示例 这是一个包含段落的基本部分
H3 部分背景颜色
markdown
注释配置:
``
