Skip to content

Commit

Permalink
deploy: f5aae38
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifyun
ifyun committed Mar 6, 2024
1 parent d3a6179 commit 3b0b8f0
Show file tree
Hide file tree
Showing 8 changed files with 359 additions and 226 deletions.
121 changes: 121 additions & 0 deletions docs/01.start.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
# 使用

## 开始

- 创建一个 HTML 文件
- 创建一个 `<div id="app"></div>` 元素
- 引入 `jian-doc.umd.js`

可以从此处获取：[jian-doc.umd.js](https://ifyun.github.io/jian-doc/jian-doc.umd.js)

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Documents</title>
<script>
window.$config = {
prefix: "docs",
logo: "logo.svg",
logoRound: false,
name: "My Documents"
}
</script>
</head>
<body>
<div id="app"></div>
<script src="jian-doc.umd.js"></script>
</body>
</html>
```

> 可以将 `src` 设为 [https://ifyun.github.io/jian-doc/jian-doc.umd.js](https://ifyun.github.io/jian-doc/jian-doc.umd.js)
`window.$config`：

- `prefix`：如果你想把文档放在子目录，则设置此选项
- `logo`：链接或者相对路径(`prefix` 不影响此选项)
- `logoRound`：是否使用圆角 Logo

根据以上的配置，你的目录结构应该长这样：

```bash
.
├─ docs
│ ├─ introcduction.md
│ ├─ quick-start.md
│ └─ @menu.md
├─ index.html
├─ jian-doc.umd.js
└─ logo.svg
```

- `@menu.md` 将被渲染为菜单
- 不存在 `@menu.md`，`README.md` 中的标题会渲染为菜单
- 同时存在，`README.md` 作为默认文档显示

## 菜单示例

```markdown
- **UNIX 环境编程**
- [文件读写](unixp/文件读写.md)
- [Socket](unixp/socket.md)
- **Web**
- [CSS 的黑魔法](web/css_magic.md)
```

## 实时预览

- Visual Studio Code 可以使用 [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) 插件
- IntelliJ IDEA，WebStorm 可以在编辑器中选择浏览器打开

## 自定义主题

你可以覆写主题变量来修改样式，例如自定义字体/字重：

```css
:root {
--font: "Source Han Sans SC", sans-serif !important;
--font-weight: 300 !important;
--font-weight-bold: 500 !important;
}
```

### 主题变量

| CSS 变量 | 说明 |
| :------------------------ | :--------------------------- |
| `--font` | 全局字体 |
| `--font-code` | 代码字体 |
| `--markdown-font-size` | 文档字体大小 |
| `--background` | 全局背景色 |
| `--font-weight` | 字重 |
| `--font-weight-bold` | 粗体字重 |
| `--font-color` | 字体颜色 |
| `--font-color-menu` | 菜单字体色 |
| `--side-color-back` | 菜单背景色 |
| `--active-color` | 菜单/导航字体高亮颜色 |
| `--link-color` | 链接字体色 |
| `--inline-code-color` | 行内代码字体色 |
| `--inline-code-back` | 行内代码背景色 |
| `--block-code-back` | 代码块背景色 |
| `--line-number-color` | 代码块行号字体色 |
| `--quote-border-color` | 引用边框色(左侧) |
| `--quote-font-color` | 引用字体色 |
| `--kbd-color` | 键盘字体色 |
| `--kbd-back` | 键盘背景色 |
| `--kbd-shadow-color` | 键盘阴影色 |
| `--scrollbar-color` | 滚动条颜色 |
| `--scrollbar-color-hover` | 滚动条高亮颜色 |
| `--border-color-normal` | 边框色(轻) |
| `--border-color-heavy` | 边框色(重) |
| `--border-color-code` | 代码块边框色(行号与内容之间) |

需要修改暗色样式？请使用 `color-scheme` 属性选择器：

```css
:root[color-scheme="dark"] {
--background: #1b1b1f;
}
```
52 changes: 52 additions & 0 deletions docs/02.extend.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# 扩展

## 代码高亮

引入 `highlight.js`：

```html
<link
rel="stylesheet"
href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/atom-one-dark.min.css" />
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/xml.min.js"></script>
```

可选择你喜欢的主题和需要的语言。

- 可在此页面查找语言：https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/
- 可在此页面查找主题：https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/

## 公式

引入 `katex`：

```html
<link
rel="stylesheet"
href="https://unpkg.com/katex@0.16.9/dist/katex.min.css" />
<script src="https://unpkg.com/katex@0.16.9/dist/katex.min.js"></script>
```

行内公式用 `$` 符号包围：`$E=mc^2$`

独立公式用 `$$` 包围：

```
$$
(x - a)^2 + (y - b)^2 = r^2
$$
```

## 图表

引入 `mermaid`，挂载到 `window` 对象：

```html
<script type="module">
import mermaid from "https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs"
window.mermaid = mermaid
</script>
```

代码块语言为 `mermaid` 即可编写图表，可以在 [https://mermaid.js.org/](https://mermaid.js.org/) 查看如何编写图表。
118 changes: 118 additions & 0 deletions docs/03.style_preview.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
# 文档样式预览

## 段落

Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。

## 列表

1. Abandon
2. Abnormal
3. Abolish

- 放弃
- 反常的
- 彻底废除

## 表格

| 单词 | 发音 | 释义 |
| :------- | :----------- | :------- |
| Abandon | `/əˈbændən/` | 放弃 |
| Abnormal | `/æbˈnɔːml/` | 反常的 |
| Abolish | `/əˈbɒlɪʃ/` | 彻底废除 |

## 键盘

按下 <kbd>Ctrl</kbd> + <kbd>A</kbd> 全选，<kbd>Alt</kbd> + <kbd>f4</kbd> 关闭窗口。

## 代码

```c
#include <stdio.h>

int main() {
printf("Hello, World!");
return 0;
}
```

## 数学公式

行内公式：$E=mc^2$

独立公式：

$$
y= \begin{cases} x^2, & x>0,\\ x^2 +x-8, & x \le 0 \end{cases}
$$

$$
A_{m,n} =
\begin{pmatrix}
a_{1,1} & a_{1,2} & \cdots & a_{1,n} \\
a_{2,1} & a_{2,2} & \cdots & a_{2,n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m,1} & a_{m,2} & \cdots & a_{m,n}
\end{pmatrix}
$$

## 图表

### Git 图

```mermaid
gitGraph
commit
commit
branch dev
commit
commit
checkout main
commit
merge dev
commit
commit
```

### 序列图

```mermaid
sequenceDiagram
participant C as Client
participant S as Server
Note right of S: LISTEN
C ->> S : SYN = 1, seq = x
Note left of C: SYN_SENT
S ->> C : SYN = 1, ACK = 1, seq = y, ack = x + 1
Note right of S: SYN_RECV
C ->> S : ACK = 1, seq = x + 1, ack = y + 1
Note left of C: ESTABLISHED
Note right of S: ESTABLISHED
```

### 状态图

```mermaid
stateDiagram
[*] --> NEW
NEW --> RUNNABLE: Thread.start()
state RUNNABLE {
RUNNING --> READY
READY --> RUNNING
}
RUNNABLE --> BLOCKED: 未获取到锁
BLOCKED --> RUNNABLE: 获取到锁
RUNNABLE --> TIMED_WAITING: Thread.sleep(long)\nObject.wait(long)
TIMED_WAITING --> RUNNABLE: Object.notify()
RUNNABLE --> WAITING: Thread.join()
WAITING --> RUNNABLE: Object.notify()
RUNNABLE --> TERMINATED: 执行完成
TERMINATED --> [*]
```
34 changes: 34 additions & 0 deletions docs/04.deploy.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# 部署

## GitHub Pages

1. 项目本身作为文档：

在仓库的 Settings -> Pages 选项中选择 `main` 分支 `/(root)` 目录

2. 项目的 `docs` 目录作为文档：

- 将文档(`index.html` 所在的目录)放在项目的 `docs` 目录中
- 在仓库的 Settings -> Pages 选项中选择 `main` 分支 `/docs` 目录

## 本地部署

### Python

如果有 Python 环境，在文档目录运行 `python -m http.server 80` 即可。

### Nginx

就是静态网站的配置方式，可参考以下配置：

```nginx
server {
listen 80;
listen [::]:80;
location / {
root <文档项目路径>;
index index.html;
}
}
```
4 changes: 4 additions & 0 deletions docs/@menu.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
- [使用](01.start.md)
- [扩展](02.extend.md)
- [样式预览](03.style_preview.md)
- [部署](04.deploy.md)
Loading

0 comments on commit 3b0b8f0

Please sign in to comment.