MDShow内容展示平台

一个现代化、可扩展、基于 React 和 Markdown 的动态内容平台，用于展示及查看相应的md内容。

本项目是一个完整的动态内容平台，通过简单的 Markdown 文件即可创建结构化的展示内容，提供响应式设计和直观的用户体验，适用于各类在线展示、在线课程、教程和文档、知识库等。

• 🔄 基于文件系统的内容管理 - 通过 Markdown 文件组织课程内容
• 📝 完整 Markdown 支持 - 支持标题、列表、代码块、表格、引用等 Markdown 元素
• 📱 响应式设计 - 完美适配桌面、平板和移动设备
• 🧩 自动内容发现 - 自动扫描并加载章节和页面内容
• 🔍 交互式导航系统 - 章节目录、可折叠菜单、前后页面导航
• 🌐 静态网站生成 - 构建后可部署到任何静态托管服务
• 🎨 主题定制功能 - 通过配置文件自定义颜色和样式
• 🛠️ 可视化配置工具 - 无需编辑代码即可管理章节结构和顺序
• 📊 特性展示组件 - 在首页展示产品或内容核心特性
• 🔄 动态路由系统 - 基于文件结构自动生成导航路由
• 🏃‍♂️ 快速开发体验 - 热重载和即时预览更改
• ⚙️ 开发模式 API 服务 - 内容配置管理后端支持
• 🗂️ 灵活的内容组织 - 通过文件名前缀控制显示顺序
• 🔗 章节间导航链接 - 自动生成前/后页面导航

• Node.js 18.0 或更高版本

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 本地访问开发服务器（包括外部设备访问）
npm run dev:host

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

生成的文件将位于 dist 目录下，可部署到任何静态网站托管服务。

src/
├── chapters/            # 展示内容 (Markdown 文件)
│   ├── intro/           # 平台简介章节
│   ├── features/        # 核心功能章节
│   ├── deployment/      # 部署指南章节
│   ├── development/     # 开发指南章节
│   ├── usage/           # 使用教程章节
│   └── advanced/        # 高级应用章节
├── components/          # 页面组件
│   ├── CourseContent.tsx  # 内容展示组件
│   ├── HomePage.tsx       # 首页组件
│   └── ConfigPage.tsx     # 内容配置管理组件
├── config/              # 配置文件
│   └── content-config.json  # 内容配置
├── server/              # 服务器端代码
│   ├── index.ts           # API服务器入口
│   └── api-handlers.ts    # API处理函数
├── utils/
│   ├── contentLoader.ts   # 内容加载和管理
│   └── configLoader.ts    # 配置加载
├── App.tsx              # 路由配置
└── main.tsx             # 应用入口

展示内容通过 Markdown 文件组织，系统使用 Vite 的 import.meta.glob 功能在构建时扫描 src/chapters 目录，自动发现和加载章节内容。

1. 在 src/chapters 下创建对应章节文件夹
2. 在章节文件夹中添加 Markdown 文件
3. 系统会自动从 Markdown 文件的第一个 # 标题中提取小节标题
4. 构建导航菜单时会自动包含新添加的内容

# 小节标题

## 学习目标
- 目标一
- 目标二
- 目标三

## 内容概述
简要介绍本节内容和重点...

## 核心内容
### 1. 主题一
详细说明...

### 2. 主题二
详细说明...

## 小结
总结本节要点...

平台支持通过 src/config/content-config.json 文件进行整体配置，无需修改代码：

{
  "site": {
    "title": "平台标题",
    "subtitle": "平台副标题",
    "description": "平台描述"
  },
  "theme": {
    "primaryColor": "主题颜色", // tailwind颜色名称，如 "indigo"
    "secondaryColor": "次要颜色"
  },
  "features": [
    { 
      "icon": "图标名称", // lucide-react图标名称
      "title": "特性标题", 
      "description": "特性描述" 
    }
  ],
  "chapterMappings": {
    "文件夹名称": "显示的章节名称"
  },
  "chapterOrder": ["排序的章节文件夹名"],
  "ui": {
    "语言相关的文本配置"
  }
}

MDShow 提供了可视化的内容配置管理页面，让您可以轻松管理章节结构，而无需手动编辑配置文件：

1. 在开发环境中，通过首页顶部的管理栏访问配置页面，或直接访问 /config 路径
2. 配置页面功能包括：
   • 自动扫描文件系统中的章节和小节
   • 自定义章节显示名称
   • 调整章节顺序
   • 查看每个章节下的小节列表
   • 一键保存配置到 content-config.json

注意：配置管理功能仅在开发环境可用，构建后的静态网站无法使用此功能。

1. 修改基本信息：修改 site 部分的标题、副标题和描述
2. 更改主题色：在 theme 部分修改 primaryColor（使用 Tailwind 颜色名称）
3. 自定义特性：编辑 features 数组，可指定 Lucide 图标
4. 章节映射：通过 chapterMappings 配置文件夹名称与显示名称的对应关系
5. 章节顺序：使用 chapterOrder 自定义章节顺序
6. 多语言支持：修改 ui 部分的文本内容支持不同语言

项目构建后生成纯静态文件，可部署到各种静态托管服务：

1. Netlify/Vercel: 直接连接 GitHub 仓库自动部署
2. GitHub Pages: 使用 GitHub Actions 自动部署
3. 自托管服务器: 将 dist 目录上传到 Web 服务器

MIT License

🌟 如果觉得有用，别忘了给项目点个星！