Markdown 文档方案使用指南
✅ 是的，网页可以直接适配 Markdown 文档！
你只需要修改 .md 文件，网页内容就会自动更新。
🎯 方案说明
文件结构
docs/pc/
├── index-md.html # HTML 页面（自动加载 Markdown）
└── markdown/ # Markdown 文件夹
├── quickstart.md # 快速入门指南
├── product-manage.md # 产品管理操作手册
├── category-manage.md # 分类管理操作手册
└── ... # 其他文档
工作原理
- HTML 作为模板：提供页面框架、导航、样式
- Markdown 存储内容：所有文字内容都在
.md文件里 - 自动解析渲染：使用 marked.js 库自动将 Markdown 转换为 HTML
📝 如何修改内容
方法一：直接编辑 Markdown 文件
- 打开
markdown/quickstart.md - 修改内容（支持标准 Markdown 语法）
- 保存文件
- 刷新网页，内容立即更新
方法二：新增文档
- 在
markdown/文件夹创建新的.md文件
# 例如创建"数据分析操作手册"
touch markdown/data-analysis.md
- 编写 Markdown 内容
# 数据分析操作手册
> 面向企业管理员
## 数据概览
...
- 在 HTML 的左侧导航中添加菜单项
数据分析操作手册
📖 Markdown 语法示例
标题
# 一级标题
二级标题
三级标题
四级标题
文字样式
加粗文字
斜体文字
代码或关键词
~~删除线~~
列表
- 无序列表项 1
- 无序列表项 2
- 有序列表项 1
- 有序列表项 2
引用和提示
> 这是一段引用文字
会显示为蓝色提示框
💡 提示：这是一个重要提示
⚠️ 注意：这是一个警告信息
代码块
javascript
function hello() {
console.log('Hello World');
}
表格
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 内容 | 内容 | 内容 |
链接和图片
链接文字
🚀 如何使用
本地预览
注意：由于浏览器安全限制，直接打开 HTML 文件可能无法加载 Markdown。
请使用本地服务器：
# 方法一：Python 服务器
cd docs/website
python -m http.server 8000
方法二：Node.js 服务器
npx http-server
然后访问：http://localhost:8000/docs/pc/index-md.html
部署到服务器
- 上传整个
website文件夹到服务器 - 确保服务器支持静态文件访问
- 访问对应 URL 即可
💡 优势对比
传统 HTML 方案 ❌
- 需要修改 HTML 文件
- 需要懂 HTML 标签
- 内容和样式混在一起
- 容易出错
Markdown 方案 ✅
- 只需修改
.md文件 - 语法简单，易学易用
- 内容和样式分离
- 非技术人员也能编辑
📋 已创建的示例文件
| 文件 | 说明 | 状态 |
|------|------|------|
| index-md.html | 支持 Markdown 的 HTML 页面 | ✅ |
| markdown/quickstart.md | 快速入门指南 | ✅ |
| markdown/product-manage.md | 产品管理操作手册 | ✅ |
🎨 自定义样式
如需修改 Markdown 渲染样式，编辑 index-md.html 中的 CSS：
/ 修改标题颜色 /
.markdown-body h2 {
color: #2563eb;
border-left-color: #2563eb;
}
/ 修改引用框样式 /
.markdown-body blockquote {
background: #eff6ff;
border-left-color: #2563eb;
}
⚠️ 注意事项
- Markdown 文件编码：请使用 UTF-8 编码保存
- 文件路径：确保
data-md属性中的路径正确 - 本地测试：需要使用本地服务器，不能直接打开 HTML
- 图片路径：图片建议放在
images/文件夹，使用相对路径
📚 参考资料
现在你可以直接编辑 Markdown 文件来更新网页内容了！ 🎉