turingflow-blog-001

个人作品集/博客网站模板，适用于设计师、开发者、自由职业者展示作品和服务。

技术栈

• React 19 + Vite 7
• Tailwind CSS 4
• React Router DOM 7
• Lucide React (图标库)

快速开始

pnpm install
pnpm run dev

目录结构

src/
├── App.jsx              # 应用入口，包含路由配置
├── main.jsx             # React 挂载点
├── index.css            # 全局样式 (Tailwind)
├── components/          # 可复用组件
│   ├── NavBar.jsx       # 导航栏
│   ├── Footer.jsx       # 页脚
│   ├── Button.jsx       # 按钮组件
│   ├── AboutCard.jsx    # 关于卡片
│   ├── ProjectCards.jsx # 项目卡片列表
│   ├── Testimonials.jsx # 客户评价
│   ├── Faq.jsx          # 常见问题
│   └── ...              # 其他组件
├── pages/               # 页面组件
│   ├── Home.jsx         # 首页
│   ├── About.jsx        # 关于页面
│   ├── Services.jsx     # 服务页面
│   ├── Portfolio.jsx    # 作品集列表
│   ├── ProductDetail.jsx# 作品详情
│   ├── Blog.jsx         # 博客列表
│   ├── BlogDetail.jsx   # 博客详情
│   └── Contact.jsx      # 联系页面
├── data/                # 静态数据 (JSON)
│   ├── menu.json        # 导航菜单配置
│   ├── projects.json    # 作品集数据
│   ├── blog.json        # 博客文章数据
│   ├── testimonials.json# 客户评价数据
│   ├── brands.json      # 合作品牌数据
│   ├── certifications.json # 资质认证数据
│   ├── faq.json         # 常见问题数据
│   └── work.json        # 工作经历数据
└── lib/                 # 工具库
    └── Head.jsx         # 页面头部管理

路由配置

路径	页面	说明
/	Home	首页
/about	About	关于我
/services	Services	服务介绍
/portfolio	Portfolio	作品集列表
/portfolio/:slug	ProductDetail	作品详情
/blog	Blog	博客列表
/blog/:slug	BlogDetail	博客详情
/contact	Contact	联系方式

数据结构

导航菜单 (data/menu.json)

[
  { "label": "首页", "path": "/" },
  { "label": "关于", "path": "/about" },
  { "label": "服务", "path": "/services" }
]

项目数据 (data/projects.json)

[
  {
    "id": 1,
    "slug": "project-name",
    "title": "项目标题",
    "description": "项目描述",
    "image": "/images/project.jpg",
    "category": "Web Design",
    "tags": ["React", "Tailwind"]
  }
]

博客数据 (data/blog.json)

[
  {
    "id": 1,
    "slug": "article-slug",
    "title": "文章标题",
    "excerpt": "文章摘要",
    "content": "文章正文内容...",
    "image": "/images/blog.jpg",
    "date": "2024-01-15",
    "author": "作者名",
    "tags": ["设计", "开发"]
  }
]

常见修改任务

修改网站信息

1. 编辑 index.html 中的 <title> 和 meta 标签
2. 修改 src/components/NavBar.jsx 中的 Logo 和网站名称
3. 修改 src/components/Footer.jsx 中的版权信息

修改导航菜单

编辑 src/data/menu.json，添加或删除菜单项

添加新页面

1. 在 src/pages/ 创建新页面组件
2. 在 src/App.jsx 的 Routes 中添加路由

修改样式主题

编辑 src/index.css 中的 CSS 变量或 Tailwind 配置

添加作品/博客

编辑 src/data/projects.json 或 src/data/blog.json

布局说明

• PageShell 组件统一控制页面最大宽度 (max-w-7xl)
• 响应式断点：lg:px-10 (大屏增加内边距)
• 所有页面共享 NavBar 和 Footer

图片资源

• 存放在 public/ 目录
• 引用路径：/images/xxx.jpg