website/MARKDOWN_CONTENT_GUIDE.md

Markdown 内容管理指南

本指南说明如何使用 Markdown 文件管理首页的各个 Section 内容。

概述

为了方便内容维护，首页以下 Section 已改为使用 Markdown 文件作为数据源：

• ✅ 解决方案 (Solutions) - /src/data/solutionsData.ts
• ✅ 客户案例 (Cases) - /src/data/casesData.ts
• ✅ 博客与资讯 (Blog) - /src/data/markdownBlogData.ts (已存在)
• ⚠️ 开发文档 (Docs) - 已有 markdown 支持，但 DocsSection 组件仍使用硬编码数据

文件结构

src/
├── data/
│   ├── solutionsData.ts      # 解决方案数据加载器 (新增)
│   ├── casesData.ts           # 客户案例数据加载器 (新增)
│   └── markdownBlogData.ts    # 博客数据加载器 (已存在)
├── components/sections/
│   ├── SolutionsSection.tsx   # 解决方案组件 (已更新)
│   ├── CasesSection.tsx       # 客户案例组件 (已更新)
│   ├── BlogSection.tsx        # 博客组件 (已使用 markdown)
│   └── DocsSection.tsx        # 文档组件 (待更新)

数据格式

解决方案 (Solutions)

每个解决方案包含以下字段：

---
id: elderly-care                    # 唯一标识符
title: 养老院智慧康养              # 标题
subtitle: 专业照护，温暖相伴      # 副标题
description: 为养老机构提供...     # 描述
icon: Home                          # 图标名称 (lucide-react)
image: /images/elderly-care.jpg     # 图片路径
order: 1                            # 显示顺序
category: healthcare                # 分类（可选）
benefits:                           # 优势列表
  - 24小时健康监测
  - 智能预警系统
  - 个性化护理方案
  - 家属远程关怀
---

# 解决方案详细内容

Markdown 正文内容...

可用图标名称：

• Home - 家庭/养老院
• Hospital - 医院
• Building2 - 企业/建筑
• FlaskConical - 科研/实验

客户案例 (Cases)

每个客户案例包含以下字段：

---
id: xiehe-hospital                  # 唯一标识符
company: 北京协和医院               # 公司名称
logo: XH                            # Logo 缩写
author: 张主任                      # 作者姓名
position: 信息科主任                # 职位
rating: 5                           # 评分 (1-5)
testimonial: 灵境万象的...         # 客户评价
order: 1                            # 显示顺序
category: hospital                  # 分类（可选）
metrics:                            # 指标数据
  - label: 诊疗效率提升
    value: 45%
  - label: 数据准确率
    value: 99.8%
---

# 客户案例详细内容

Markdown 正文内容...

如何添加新内容

添加新的解决方案

1. 打开 /src/data/solutionsData.ts
2. 在 solutionContents 数组中添加新的内容：

const solutionContents = [
  // ... 现有内容
  `---
id: new-solution
title: 新解决方案
subtitle: 解决方案副标题
description: 详细描述...
icon: Home
image: /images/new-solution.jpg
order: 5
benefits:
  - 优势1
  - 优势2
---

# 新解决方案

详细的 Markdown 内容...
`,
];

添加新的客户案例

1. 打开 /src/data/casesData.ts
2. 在 caseContents 数组中添加新的内容：

const caseContents = [
  // ... 现有内容
  `---
id: new-case
company: 新客户公司
logo: NC
author: 负责人
position: 职位
rating: 5
testimonial: 客户评价内容...
order: 5
metrics:
  - label: 指标1
    value: 80%
  - label: 指标2
    value: 95%
---

# 客户案例

详细内容...
`,
];

如何修改现有内容

修改解决方案

1. 打开 /src/data/solutionsData.ts
2. 找到对应的解决方案（通过 id 查找）
3. 修改 YAML front matter 中的字段或 Markdown 正文
4. 保存文件，Vite 会自动热重载

修改客户案例

1. 打开 /src/data/casesData.ts
2. 找到对应的案例（通过 id 查找）
3. 修改内容
4. 保存文件

API 使用

Solutions API

import { loadSolutions, getSolutionById, getSolutionsByCategory } from '@/data/solutionsData';

// 加载所有解决方案
const solutions = await loadSolutions();

// 根据 ID 获取单个解决方案
const solution = await getSolutionById('elderly-care');

// 根据分类获取解决方案
const healthcareSolutions = await getSolutionsByCategory('healthcare');

Cases API

import { loadCases, getCaseById, getCasesByCategory } from '@/data/casesData';

// 加载所有客户案例
const cases = await loadCases();

// 根据 ID 获取单个案例
const case = await getCaseById('xiehe-hospital');

// 根据分类获取案例
const hospitalCases = await getCasesByCategory('hospital');

优势

使用 Markdown 管理内容的优势：

1. 易于维护 - 内容与代码分离，非技术人员也可以编辑
2. 版本控制 - 可以通过 Git 跟踪内容变更历史
3. 结构化数据 - YAML front matter 提供结构化的元数据
4. 富文本支持 - Markdown 支持格式化文本、代码块、列表等
5. 集中管理 - 所有内容集中在数据文件中，便于统一管理

未来改进

建议的改进方向：

1. 将内容提取到独立文件

   • 创建 /src/content/solutions/ 目录
   • 每个解决方案一个独立的 .md 文件
   • 使用 Vite 的 import.meta.glob 动态加载

2. 添加图片管理

   • 将图片放在 /public/images/solutions/ 和 /public/images/cases/
   • 建议使用 webp 格式以提高性能

3. 国际化支持

   • 为每个语言创建单独的内容文件
   • 例如：solution-elderly-care.zh.md, solution-elderly-care.en.md

4. CMS 集成

   • 未来可以考虑集成 Headless CMS (如 Strapi, Contentful)
   • 提供可视化编辑界面

示例文件

完整的示例请参考：

• 解决方案：/src/data/solutionsData.ts 中的 solutionContents
• 客户案例：/src/data/casesData.ts 中的 caseContents
• 博客文章：/src/content/blog/*.md

注意事项

1. ID 唯一性：每个内容项的 id 必须唯一
2. 顺序控制：使用 order 字段控制显示顺序（数字越小越靠前）
3. 图标名称：确保使用的图标名称在 iconMap 中已定义
4. YAML 格式：注意 YAML 的缩进和格式（使用空格，不要使用 Tab）
5. 热重载：修改内容后，开发服务器会自动重新加载

技术栈

• Markdown 解析：自定义 front matter 解析器
• 数据加载：异步加载函数 with caching
• 图标系统：lucide-react
• 状态管理：React useState/useEffect

---

创建时间：2025-12-02 最后更新：2025-12-02 维护者：OmniVerse Development Team