这是您可以在 Quick Reference 备忘单上使用的样式参考,快速参与贡献

入门

本地编译预览

将仓库克隆到本地调试页面。请参阅贡献指南了解如何开始

克隆仓库

1
git clone git@github.com:jaywcjlove/reference.git

安装依赖编译生成 HTML 页面

1
2
npm i         # 安装依赖
npm run build # 编译输出 HTML

HTML 存放在仓库根目录下的 dist 目录中,将 dist/index.html 静态页面在浏览器中打开预览。

1
npm run start # 监听 md 文件编译输出 HTML

目录结构

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

添加一个备忘清单

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

1
2
3
4
5
6
7
8
9
10
备忘清单 (页面大标题)

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

入门 (分类标题)
---

### 介绍 (卡片)

卡片内容

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

首页导航

首页(README.md)存放在仓库的根目录,通过这个 README.md 自动生成首页导航,下面是导航实例:

1
2
## Linux 命令

首页导航图标存放在 /assets 目录中,如果你的备忘清单定义为 docs/cron.md,那么你的图标就定义为 cron.svg 存放到 /assets 目录中,重新编译首页当行菜单就拥有了图标。

  • 图标存放在 /assets 目录中
  • 图片名称与清单名称保持一致 cron.md -> cron.svg (注意大小写)
  • SVG 图标尺寸 <svg height="1em" width="1em"
  • SVG 图标颜色使用继承颜色值 <svg fill="currentColor"

首页提示配置

1
2
3
4
5
6
```

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

```markdown
class=tag&data-info=👆看看还缺点儿什么?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```

添加 `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 存放在项目的根目录下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"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 配置加载。

TOML 配置示例

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 字符串"

支持更多配置加载

  • .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

环境变量

导航菜单

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

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

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

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

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

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

Markdown 语法注释

介绍

在备忘清单采用 HTML 注释语法,标识网站布局和一些样式,目的是为了在 GitHub 中也是正常毫无瑕疵的预览 Markdown

1
2
3
### 卡片标题

卡片 Markdown 内容展示,下面注释语法为文字内容改变样式

上面基础示例,使用 col-span-2 类标识,卡片占 2 列位置,参考现有备忘清单的源代码是一个好习惯!

注释语法介绍

  • 在某个 Markdown 语法下方或者后面,添加 HTML注释
  • 内容采用 URL 参数的字符拼接方式

语法

标识开始 + 参数 + 分隔符(&) + 参数 + 标识结束

示例

1
2
3
## H2 部分

### H3 部分

示例,三行占位,标题红色

1
### 标题

参数说明

说明
body-style 包裹所有卡片外壳的样式
body-class 用于卡片栏布局,添加
wrap-style 卡片栏添加 CSS 样式
wrap-class 用于卡片占位,添加

文字颜色

1
2
3
4
5
6
7
```


### 文字大小

```markdown
**加粗变大红色**

强制换行

1
2
3
\```js
function () {}
\```

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

展示表格表头

1
2
3
| Key | value | 
| ---- | ---- |
| `键` | 值 |

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

代码行高亮

{1,4-5}
1
2
3
4
5
6
import React from "react";
import "./Student.css";

export const Student = (
<div className="Student"></div>
);

上面 {1,4-5} 行代码高亮,下面是 Markdown 代码示例

1
```jsx {1,4-5}

代码行高亮可以和代码行号一起使用。

Tooltips

H3 部分(卡片)背景颜色

1
### H3 部分(卡片)背景颜色

红色标题

1
### 红色标题

快捷键样式

Key value
快捷键 说明
快捷键 说明

代码行号

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

下面是 Markdown 代码示例

1
```jsx showLineNumbers

标记语言后面添加 showLineNumbers 标识

内置类样式

:- -
shortcuts 快捷键样式
wrap-text 超出换行
show-header 展示表头
style-none 隐藏 <ul> 列表样式
style-list <table> 单元格行展示

颜色标签

:- -
<yel> 黄色
<red> 红色
<pur> 紫色
<code>`` 绿
<del>~~删除~~ 红色

HTML 代码预览

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

preview
1
<b>这里是你的 HTML 代码</b>

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

隐藏卡片标题

1
隐藏卡片标题,在 H3 标题下面添加注释样式
{2}
1
### 隐藏卡片标题

注释类配置

说明

KaTeX 数学渲染

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

上面示例 Markdown 代码源码

{1}
1
2
3
```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 部分

1
2
3
4
5
6
H2 部分
---

### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)

上面实例 H2 部分 标题下面有三个卡片,默认 3 栏布局。

{3}
1
2
3
4
5
H2 部分
---
### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)

使用注释配置为 H2 部分 添加 col-span-2 类,将 3 栏布局变成 2 栏布局。

说明
cols-1 1 栏卡片布局
cols-2 2 栏卡片布局
cols-3 3 栏卡片布局
cols-4 4 栏卡片布局
cols-5 5 栏卡片布局
cols-{1~6} 1~6 栏卡片布局

占位布局 style 写法

{2}
1
### H3 部分

卡片栏布局 style 写法

{2}
1
## H2 部分

H3 部分

{2,4}
1
2
3
### 卡片 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

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

上面布局效果 Markdown 源码:

1
2
3
4
5
6
### H3 Title 1
### Title 2

### Title 3

### Title 4

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

卡片列合并布局 2

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

上面布局效果 Markdown 源码:

1
2
3
4
5
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 3

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

上面布局效果 Markdown 源码:

1
2
3
4
5
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 4

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

上面布局效果 Markdown 源码:

1
2
3
4
5
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 5

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

上面布局效果 Markdown 源码:

1
2
3
4
5
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 6

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

上面布局效果 Markdown 源码:

1
2
3
4
5
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 7

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

上面布局效果 Markdown 源码:

1
2
3
4
5
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 8

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

上面布局效果 Markdown 源码:

1
2
3
4
5
6
7
H2 部分
----
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5

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

卡片列合并布局 9

1
2
3
4
5
6
7
8
9
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆
┆ ┆ ╰┈┈┈╯
┆ ┆ ╭┈┈┈╮
┆ ┆ ┆ 3 ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 4 ┆ ┆ 5 ┆ ┆ 6 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码:

1
2
3
4
5
6
### Title 1
### Title 2
### Title 3
### Title 4
### Title 5
### Title 6

表格

基本表格

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

快捷键

:- :-
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 的标准标题栏

隐藏表头强制小尺寸自动换行

:- :-
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

    1
    $ git branch -m <new_name>
  • 推送和重置

    1
    $ git push origin -u <new_name>
  • 删除远程分支

    1
    $ git push origin --delete <old>

没有标记

  • 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

1
...

Two

1
...

Three

1
...

Four

1
...

Five

1
...

H3 部分 - 占位效果展示

row-span-2

1
...合并两行

col-span-2

1
...合并两列

红色标题

1
...红色标题配置

黄色标题

1
...黄色标题配置

col-span-3

卡片子项

H4 子标题

  • pre
  • table
  • ul

H4 子标题

  • pre
  • table
  • ul

H3 部分

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

H3 部分背景颜色

1
注释配置:

评论
avatar
竹山一叶
技术分享 个人心得
Follow Me
公告
欢迎光临小站,这里是我日常工作和学习中收集和整理的总结,希望能对你有所帮助:)

本站的内容经过个人加工总结而来,也参考了网友们分享的资料,如有侵权,请第一时间联系我,我将及时进行修改或删除😊
目录
  1. 1. 入门
    1. 1.1. 本地编译预览
      1. 1.1.1. 克隆仓库
      2. 1.1.2. 安装依赖编译生成 HTML 页面
    2. 1.2. 目录结构
    3. 1.3. 添加一个备忘清单
    4. 1.4. 首页导航
    5. 1.5. 首页提示配置
    6. 1.6. 配置 Config
    7. 1.7. TOML 配置示例
    8. 1.8. 支持更多配置加载
    9. 1.9. 环境变量
  2. 2. Markdown 语法注释
    1. 2.1. 介绍
    2. 2.2. 注释语法介绍
      1. 2.2.1. 语法
      2. 2.2.2. 示例
      3. 2.2.3. 示例,三行占位,标题红色
      4. 2.2.4. 参数说明
    3. 2.3. 文字颜色
    4. 2.4. 强制换行
    5. 2.5. 展示表格表头
    6. 2.6. 代码行高亮
    7. 2.7. Tooltips
    8. 2.8. H3 部分(卡片)背景颜色
    9. 2.9. 红色标题
    10. 2.10. 快捷键样式
    11. 2.11. 代码行号
    12. 2.12. 内置类样式
    13. 2.13. 颜色标签
    14. 2.14. HTML 代码预览
    15. 2.15. 隐藏卡片标题
    16. 2.16. 注释类配置
    17. 2.17. KaTeX 数学渲染
  3. 3. 布局
    1. 3.1. H2 部分
    2. 3.2. 占位布局 style 写法
    3. 3.3. 卡片栏布局 style 写法
    4. 3.4. H3 部分
    5. 3.5. 卡片合并行布局 1
    6. 3.6. 卡片列合并布局 2
    7. 3.7. 卡片列合并布局 3
    8. 3.8. 卡片列合并布局 4
    9. 3.9. 卡片列合并布局 5
    10. 3.10. 卡片列合并布局 6
    11. 3.11. 卡片列合并布局 7
    12. 3.12. 卡片列合并布局 8
    13. 3.13. 卡片列合并布局 9
  4. 4. 表格
    1. 4.1. 基本表格
      1. 4.1.1. Date
      2. 4.1.2. Time (H4)
    2. 4.2. 快捷键
    3. 4.3. 展示标题
    4. 4.4. 列表样式展示表格
    5. 4.5. 列表箭头样式展示表格
    6. 4.6. 隐藏表头强制小尺寸自动换行
    7. 4.7. 表格末尾列左对齐
    8. 4.8. 强制 code 不换行
  5. 5. 列表
    1. 5.1. 一栏(默认)
    2. 5.2. 四列
    3. 5.3. 列表步骤
    4. 5.4. 没有标记
    5. 5.5. 圆圈标记
    6. 5.6. 箭头标记
  6. 6. H2 部分 - 5列效果展示
    1. 6.1. One
    2. 6.2. Two
    3. 6.3. Three
    4. 6.4. Four
    5. 6.5. Five
  7. 7. H3 部分 - 占位效果展示
    1. 7.1. row-span-2
    2. 7.2. col-span-2
    3. 7.3. 红色标题
    4. 7.4. 黄色标题
    5. 7.5. col-span-3
    6. 7.6. 卡片子项
      1. 7.6.1. H4 子标题
      2. 7.6.2. H4 子标题
    7. 7.7. H3 部分
    8. 7.8. H3 部分背景颜色
最新文章
网站资讯
文章数目 :
437
已运行时间 :
本站总字数 :
431.6k
本站访客数 :
本站总访问量 :
最后更新时间 :
文章归档文章分类文章标签复制本文标题复制本文地址
随便逛逛