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

克隆仓库

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

安装依赖编译生成 HTML 页面

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

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

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

.
├── 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

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

## Linux 命令

[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
<!--rehype:class=home-card-->

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

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

[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

refs-cli@v0.0.1

将 .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 文件

![alt text](./quickreference.svg?#sss=1)

<img
  src="./quickreference.svg?#sss=1"
  alt="alt text"
  height="95"
  width="95"
/>

在 Markdown 中引入图片