入门
+
入门
本地编译预览
-
简单的将仓库克隆下来本地调试页面展示。
+将仓库克隆到本地调试页面。请参阅贡献指南了解如何开始
克隆仓库
git clone git@github.com:jaywcjlove/reference.git
安装依赖编译生成 HTML 页面
npm i # 安装依赖
npm run build # 编译输出 HTML
-npm run start # 监听 md 文件编译输出 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
+├── package.json
+└── scripts # MD 转 HTML 的编译脚本
+ ├── assets # LOGO 图标文件资源
+ ├── ....
+ └── watch.mjs
+添加一个备忘清单
+
一个简单的备忘清单包含 页面大标题<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-->
+首页导航图标存放在 scripts/assets 目录中，如果你的备忘清单定义为 docs/cron.md，那么你的图标就定义为 cron.svg 存放到 scripts/assets 目录中，重新编译首页当行菜单就拥有了图标。
-
+
- 图标存放在
scripts/assets目录中
+ - 图片名称与清单名称保持一致
cron.md->cron.svg(注意大小写)
+ - SVG 图标尺寸
<svg height="1em" width="1em"
+ - SVG 图标颜色使用继承颜色值
<svg fill="currentColor"
+ - 使用
<!--rehype:class=home-card-->标识卡片样式
+
首页提示配置
+
[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing-->
+添加 contributing 类名，会在卡片下方默认添加 👆待完善需要您的参与
class=tag&data-info=👆看看还缺点儿什么？
+上面示例将默认提示更改为： 👆看看还缺点儿什么？
[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=tag&data-lang=Python-->
+添加 class=tag&data-lang=Python 类名和参数，会在卡片右上角标记 Python
Markdown 语法注释
+
介绍
+
在备忘清单采用 HTML 注释语法，标识网站布局和一些样式，目的是为了在 GitHub 中也是正常毫无瑕疵的预览 Markdown。
### 卡片标题
<!--rehype:wrap-class=col-span-2-->
@@ -66,9 +129,9 @@
<!--rehype:style=color: red;-->
使用 col-span-2 类标识，卡片占 2 列位置
注释语法介绍
-
+
上面基础示例，使用 col-span-2 类标识，卡片占 2 列位置，参考现有备忘清单的源代码是一个好习惯！
注释语法介绍
+
- 在某个
Markdown语法下方或者后面，添加 HTML注释 - 以
<!--rehype:开始，-->结束，包裹参数内容
@@ -157,10 +220,10 @@
Tooltips
添加注释配置 <!--rehype:tooltips--> 添加一个 Tooltips 提示。
H3 部分(卡片)背景颜色
-
+
H3 部分(卡片)背景颜色
+
### H3 部分(卡片)背景颜色
-<!--rehype:wrap-style=background: #00c69357;-->
+<!--rehype:wrap-style=background: #8dffd42e;-->
红色标题
@@ -262,8 +325,25 @@
-
| :- | - |
|---|---|
<yel> | |
<red> | |
<pur> | |
<code> 或 `` | 绿色 |
<del> 或 ~~删除~~ |
注释类配置
-
+
隐藏卡片标题
+
+
隐藏卡片标题，在 H3 标题下面添加注释样式
+### 隐藏卡片标题
+<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
+注释类配置
+
@@ -314,23 +394,6 @@
-
| 类 | 说明 |
|---|---|
<!--rehype:className=wrap-text--> | 强制换行 |
<!--rehype:className=show-header--> | 展示表格表头 |
<!--rehype:className=shortcuts--> | 快捷键样式 |
<!--rehype:className=auto-wrap--> | 隐藏表头强制小尺寸自动换行 |
<!--rehype:className=style-list-arrow--> | 列表箭头样式展示表格 |
<!--rehype:className=style-list--> | 列表样式展示表格 |
<!--rehype:className=left-align--> | 表格末尾列左对齐 |
<!--rehype:className=style-none--> | <li> 没有标记 |
<!--rehype:className=style-timeline--> | 时间轴样式 |
<!--rehype:className=style-arrow--> | 箭头标记 |
隐藏卡片标题
-
-
隐藏卡片标题，在 H3 标题下面添加注释样式
-### 隐藏卡片标题
-<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
-KaTeX 数学渲染
+
+
+
+
+
+
+
+
+
+
+