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 目录，自动发现和加载章节内容。

添加新章节和小节

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

Markdown 文件结构示例

# 小节标题

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

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

## 核心内容
### 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": {
    "语言相关的文本配置"
  }
}