# 文档中心

这里的所有 `.md` 文件**无需任何转换**，浏览器访问 nginx 的 `/md/` 就能看到渲染效果；阅读记录另有直达入口 `/book/`。

## 怎么用

1. 把 `.md` 文件丢进本目录（或任意子目录）
2. 浏览器打开 `http://<主机IP>/md/` —— 首页会列出全部文档卡片，支持关键词筛选
3. 直接敲路径也行：`http://<主机IP>/md/快速开始.md`
   - 看原始 markdown：`?raw=1`

新增、修改、删除文件即时生效，磁盘上不生成任何 `.html` 中间文件。

## 文档清单

- [快速开始](快速开始.md) — 3 分钟跑起来
- [语法示例](语法示例.md) — 支持哪些 markdown 写法
- [部署与运维](部署与运维.md) — nginx 与首页的实现说明

## 首页长什么样

- 顶部渐变区：标题 + 文件/目录数量 + 最近更新时间 + 筛选框
- 顶栏：全屏阅读（隐藏左右栏）、源文件、主题切换（浅色/深色/护眼/暗蓝）
- 卡片区：目录优先，文件按修改时间倒序；角标区分 MD / DIR / IMG / FILE
- 目录下若有 `README.md`，会渲染成首页正文，子目录页面同理

## 多端适配

一套 CSS 覆盖电脑、平板、手机，窄屏自动换布局，不依赖 JS：

| 宽度 | 布局 | 变化 |
| --- | --- | --- |
| > 1180px | 左目录 + 正文 + 右大纲 | 桌面三栏 |
| 821–1180px | 左目录 + 正文 | 收起右侧大纲，目录收窄到 248px（平板横屏 / 小笔记本） |
| ≤ 820px | 正文 + 目录抽屉 | 单列；顶栏左上角多一个 ☰ 按钮，点开从左侧滑出抽屉，遮罩 / Esc / 关闭按钮 / 点条目即收起；无 JS 时退回正文下方的常驻列表 |
| ≤ 560px | 正文 + 目录抽屉 | 标题字号再降一档，留白收紧（手机） |

另外：

- **页脚吸底**：备案信息 `position: fixed` 常驻底部，正文底部按实测高度留出等量内边距（`--footer-h`，由 `render.js` 用 `ResizeObserver` 同步），不会遮住最后一段。
- 触屏设备加大列表与按钮的点击区域；刘海屏用 `viewport-fit=cover` + `env(safe-area-inset-*)` 避开安全区。
- 手机浏览器地址栏颜色随主题切换（`theme-color`）；正文表格与代码块在窄屏内横向滚动，不撑破页面。
- **目录调宽**：桌面端左栏右边缘有拖拽条，左右拖动可看长文件名，双击恢复默认宽度（296px，平板 248px）；宽度记在浏览器本地，☰ 收起时正文与全屏阅读一致，再展开沿用原宽度；键盘聚焦拖拽条后可用方向键微调。
- 目录栏、大纲、全屏按钮、悬浮按钮的高度都扣除页脚高度，避免被压住。

## 目录结构

```text
/app/markdown/          <- 文档目录（nginx 直接读取，对外 /md/）
/app/mdview/
  nginx.conf            <- nginx 配置（/md/ 前缀、静态附件），部署时复制到 /etc/nginx/nginx.conf
  mdview.js             <- njs：目录出首页，.md 出渲染页
  assets/               <- marked.min.js / render.js / theme.js / style.css（浅色/深色/护眼/暗蓝）
```