hulai-website/README-HANDOFF.md

呼籁旅行官网 - 后端对接 & 运营维护文档

域名：1814.love | 框架：Nuxt 3 SSG（静态站）| 语言：JavaScript + Vue 3 + Less

---

一、项目概览

这是一个纯静态网站，没有后端API、没有数据库。所有内容都存放在 /data/*.json 文件中，修改JSON即可更新网站内容。

技术栈

项目	说明
框架	Nuxt 3（Vue 3）
渲染方式	SSG 静态生成（npx nuxi generate）
样式	Less
部署产物	.output/public/ 目录，纯HTML/CSS/JS，丢到任何静态服务器即可

部署流程

# 1. 安装依赖（仅首次）
npm install

# 2. 生成静态文件
npx nuxi generate

# 3. 部署目录
.output/public/    # ← 这个目录就是最终产物，丢到nginx/CDN即可

# 4. 本地预览（可选）
npx serve .output/public

页面清单（共8页）

路径	页面	源文件
/	首页	pages/index.vue
/about	关于我们	pages/about.vue
/products	产品线（额吉的故乡V9）	pages/products.vue
/summer-camp	小蒙马夏令营	pages/summer-camp.vue
/guides	出行指南	pages/guides.vue
/faq	常见问答	pages/faq.vue
/reviews	客户评价	pages/reviews.vue
/contact	联系我们	pages/contact.vue

---

二、内容维护指南（运营同学看这里）

核心原则

所有内容都在 /data/ 目录的JSON文件里。 打开文件，改引号里的文字，重新 generate 就行。不需要懂代码。

修改流程

1. 用任意文本编辑器打开 data/ 下的JSON文件
2. 修改引号内的文字内容
3. 保存文件
4. 终端执行 npx nuxi generate
5. 将 .output/public/ 部署到服务器

⚠️ JSON编辑注意事项

• 所有内容必须在英文双引号 "..." 内
• 内容中如果有双引号，要用 \" 转义
• 最后一项后面不要加逗号
• 换行用 \n，不要直接回车
• 建议用 VS Code 编辑，会自动提示格式错误

---

三、数据文件详细说明

3.1 data/brand.json — 品牌基础信息

影响页面：首页、关于页、联系页

{
  "name": "呼籁旅行",                    // 品牌名
  "fullName": "内蒙古呼籁文旅投资开发集团有限公司",  // 公司全称
  "domain": "1814.love",                  // 域名
  "url": "https://1814.love",             // 完整URL
  "slogan": {
    "emotional": "情感化品牌主张",          // 首页大标题（情感层）
    "functional": "呼伦贝尔家庭定制游·一家一单一车"  // 功能层
  },
  "trustStats": [                          // 首页信任数据条（4项）
    {
      "value": "10000+",                  // 数字
      "unit": "组",                        // 单位
      "label": "已服务家庭",               // 标签
      "attribution": "来源说明（可选）"
    }
  ],
  "differentiators": [                     // 核心卖点（首页展示）
    {
      "title": "自有营地",                 // 卖点标题
      "description": "描述文字"            // 详细说明
    }
  ],
  "legal": {                               // 备案信息（页脚展示）
    "icp": "蒙ICP备2025XXXXX号-1"
  }
}

运营常改字段：

• trustStats[].value — 更新服务家庭数等数字
• slogan.emotional — 修改品牌主张
• differentiators[].description — 更新卖点描述

---

3.2 data/products.json — 产品线

影响页面：产品页、首页产品预览、小蒙马页

{
  "narrative": "产品线设计理念叙事文字...",

  "versions": [                            // 额吉的故乡V9系列（6个版本）
    {
      "id": "v9-4d3n",                    // 唯一标识，不要改
      "name": "额吉的故乡V9·4天3晚",      // 产品名称
      "days": 4,                           // 天数
      "nights": 3,                         // 晚数
      "audience": "假期有限的家庭",         // 目标人群
      "description": "产品描述...",         // 详细介绍
      "highlights": [                       // 3个亮点
        "亮点1",
        "亮点2",
        "亮点3"
      ],
      "tag": "精华版"                       // 标签（显示在卡片上）
    }
  ],

  "summerCamp": {                          // 小蒙马夏令营
    "name": "小蒙马夏令营",
    "positioning": "产品定位描述...",
    "days": 6,
    "nights": 5,
    "sessions": { "2025": 11, "2026plan": 30 },  // 期数数据
    "principles": ["原则1", "原则2", "原则3", "原则4"],
    "coreActivities": ["活动1", "活动2"],  // 核心体验项目
    "itinerary": ["Day1 ...", "Day2 ..."], // 每日行程概览
    "differenceFromV9": "与V9的区别说明..."
  },

  "selectionGuide": {                      // 选择指南
    "byVacationLength": [...],             // 按假期长度推荐
    "byChildAge": [...],                   // 按孩子年龄推荐
    "byPreference": [...]                  // 按偏好推荐
  },

  "pricingPhilosophy": "价格透明说明..."
}

运营常改字段：

• versions[].description / highlights — 更新产品描述和亮点
• summerCamp 整块 — 每年行程更新时修改
• summerCamp.sessions — 更新期数数据
• summerCamp.itinerary — 更新每日行程
• pricingPhilosophy — 价格说明

---

3.3 data/faq.json — 常见问答（SEO最重要的页面）

影响页面：FAQ页、Google/百度搜索结果（FAQ Schema）

{
  "categories": [
    {
      "id": "product",                    // 分类ID，不要改
      "name": "产品类",                    // 分类名称
      "questions": [
        {
          "id": "what-is-eqi",            // 问题ID，不要改
          "question": "额吉的故乡是什么？", // 问题
          "answer": "回答内容...",          // 答案（150-300字最佳）
          "relatedLinks": [                // 相关链接
            { "text": "查看产品详情", "url": "/products" }
          ]
        }
      ]
    }
  ]
}

现有分类（5个，共20+个问答）：

分类ID	名称	问答数
product	产品类	6
preparation	出行准备类	5
trust	信任类	5
experience	体验类	4
popular	高频咨询类	5

运营常改字段：

• questions[].answer — 更新答案内容
• 新增问答：在对应分类的 questions 数组末尾添加新对象

新增一个FAQ示例：

{
  "id": "new-question-id",
  "question": "新问题？",
  "answer": "新答案...",
  "relatedLinks": [
    { "text": "链接文字", "url": "/products" }
  ]
}

---

3.4 data/reviews.json — 客户评价

影响页面：评价页、首页精选评价

{
  "summary": {
    "totalCount": 10000,                   // 总评价数
    "approvalRate": "98%",                 // 好评率
    "keywords": ["贴心", "孩子玩疯了"]      // 高频关键词
  },
  "items": [
    {
      "id": 1,                             // 序号（递增，不要重复）
      "nickname": "圆满妈妈",              // 昵称
      "travelDate": "2024年6月",           // 出行时间
      "productVersion": "额吉的故乡V9·6天5晚",  // 产品版本
      "screenshot": "/images/reviews/review-001.jpg",  // 评价截图路径
      "content": "评价文字内容...",          // 评价文字（与截图一致，供AI抓取）
      "scenes": ["带小孩", "家庭游"],       // 出行场景标签
      "concerns": ["领队服务", "行程安排"]   // 关注点标签
    }
  ]
}

运营常改字段：

• summary.totalCount — 更新总评价数
• items — 添加新评价

添加新评价步骤：

1. 将评价截图命名为 review-XXX.jpg（XXX为序号如083）
2. 放入 public/images/reviews/ 目录
3. 在 items 数组末尾添加新评价对象
4. 截图建议宽度不超过1600px

可用的 scenes 标签： 带小孩、家庭游、闺蜜游、带老人、蜜月 可用的 concerns 标签： 领队服务、行程安排、住宿品质、餐饮体验、亲子活动、拍照摄影、性价比

---

3.5 data/about.json — 关于我们

影响页面：关于页

{
  "story": {
    "title": "品牌故事标题",
    "content": "品牌故事正文..."            // 支持较长文本
  },
  "subsidiaries": [                        // 旗下企业
    {
      "name": "企业名称",
      "role": "业务角色",
      "established": "成立年份"
    }
  ],
  "certifications": [                      // 资质荣誉
    {
      "name": "荣誉名称",
      "detail": "详细说明",
      "year": "2025"
    }
  ],
  "trademarks": { ... },                  // 商标信息
  "copyrights": [ ... ],                  // 版权信息
  "guarantees": [                          // 服务保障
    {
      "title": "保障标题",
      "description": "保障说明"
    }
  ],
  "xiaohongshu": {                         // 小红书数据
    "account": "Mr.小雷-呼籁旅行",
    "followers": "9.6万+",
    "likes": "26万+",
    "awards": ["获奖列表"],
    "description": "说明文字"
  },
  "team": {
    "serviceModel": "3管+1师+1队",
    "description": "团队说明...",
    "milestones": ["里程碑1", "里程碑2"]
  },
  "culture": {
    "values": [
      { "title": "真诚", "description": "说明" }
    ]
  }
}

运营常改字段：

• subsidiaries — 新增/调整子公司
• certifications — 新增荣誉资质
• xiaohongshu — 更新小红书数据（粉丝数、获赞数、荣誉）
• team.milestones — 添加团队新事件

---

3.6 data/contact.json — 联系方式

影响页面：联系页、页脚

{
  "channels": [
    {
      "type": "wechat",                   // 类型：wechat/mini-program/phone/address/email
      "label": "微信客服",                  // 显示名
      "value": "hulai1814",               // 值（微信号/电话/地址等）
      "description": "说明文字",
      "qrCode": "/images/qr-wechat.jpg",  // 二维码图片（可选）
      "primary": true                      // 是否主要渠道
    }
  ],
  "securityNotice": "安全提示文字..."
}

---

3.7 data/seo.json — 各页面SEO配置

影响：每个页面的标题、描述、搜索引擎展示

{
  "pages": {
    "home": {
      "title": "呼籁旅行 - 呼伦贝尔家庭定制游·一家一单一车",  // 浏览器标签页标题
      "description": "搜索引擎展示的描述文字...",               // 搜索结果摘要
      "h1": "呼籁旅行 — 呼伦贝尔家庭定制游",                  // 页面大标题
      "ogImage": "/images/og-home.jpg"                         // 社交分享图
    },
    "about": { ... },
    "products": { ... },
    "summer-camp": { ... },
    "faq": { ... },
    "reviews": { ... },
    "guides": { ... },
    "contact": { ... }
  }
}

运营常改字段：

• title — 控制搜索结果标题（建议60字以内）
• description — 控制搜索结果描述（建议150字以内）

---

3.8 data/navigation.json — 导航菜单

影响：顶部导航栏、底部链接

{
  "header": [                              // 顶部导航（按顺序展示）
    { "text": "首页", "to": "/" },
    { "text": "关于我们", "to": "/about" },
    { "text": "产品线", "to": "/products" },
    { "text": "小蒙马夏令营", "to": "/summer-camp" },
    { "text": "出行指南", "to": "/guides" },
    { "text": "常见问答", "to": "/faq" },
    { "text": "客户评价", "to": "/reviews" },
    { "text": "联系我们", "to": "/contact" }
  ],
  "footer": [                              // 底部分组链接
    {
      "title": "了解呼籁",
      "links": [
        { "text": "关于我们", "to": "/about" }
      ]
    }
  ]
}

---

3.9 data/versions.json — 产品版本迭代历史

影响页面：产品页（版本进化时间线、V8→V9对比等）

{
  "stats": {                               // 统计数据
    "totalIterations": 9,
    "totalUpgrades": "50+",
    "firstVersion": "2023年3月",
    "latestVersion": "2026年"
  },
  "upgrades2026": [                        // 当年核心升级项
    {
      "title": "升级标题",
      "description": "升级描述"
    }
  ],
  "highlights": [                          // V9亮点
    { "title": "亮点", "description": "说明" }
  ],
  "compareV8V9": [                         // V8→V9对比
    { "category": "分类", "v8": "旧版", "v9": "新版" }
  ],
  "timeline": [                            // 历史版本时间线
    {
      "version": "V1",
      "date": "2023.03",
      "title": "标题",
      "changes": [
        { "type": "add", "content": "新增内容" }
      ]
    }
  ],
  "philosophy": "产品哲学...",
  "quote": { "text": "引用", "author": "作者" }
}

---

3.10 data/guides.json — 出行指南

影响页面：出行指南页

{
  "sections": [
    {
      "id": "clothing",
      "title": "穿搭指南",
      "subtitle": "副标题",
      "months": [                          // 按月份的穿搭建议
        {
          "month": "5月",
          "tempRange": "白天5~26°C / 夜间-6~8°C",
          "style": "穿搭风格",
          "items": ["具体衣物1", "具体衣物2"],
          "tip": "小贴士"
        }
      ]
    },
    {
      "id": "activities",
      "title": "活动安全须知",
      "items": [
        {
          "name": "骑马穿越",
          "rules": ["规则1", "规则2"],
          "notes": "注意事项"
        }
      ]
    }
  ]
}

---

四、图片资源管理

目录结构

public/images/
├── logo.png                    # 网站Logo
├── logo-square.png             # 方形Logo
├── mascot-sticker-qr.png       # 吉祥物贴纸
├── mascot/                     # 吉祥物图片
│   ├── mascot-front.png        # 正面
│   ├── mascot-banner.png       # 横幅
│   └── xiaomengma.png          # 小蒙马
├── summer-camp/                # 小蒙马夏令营照片（4张）
│   ├── river-banner.jpg
│   ├── grassland-group.jpg
│   ├── birch-group.jpg
│   └── camp-graduation.jpg
├── team/                       # 团队照片（8张）
│   ├── hero-family.jpg
│   ├── hero-grassland.jpg
│   ├── guide-group.jpg
│   ├── guide-training.jpg
│   ├── campsite-team.jpg
│   ├── ranch-store.jpg
│   ├── route-survey.jpg
│   └── route-survey-2025.jpg
├── xiaohongshu/                # 小红书相关（2张）
│   ├── storefront.jpg
│   └── profile.jpg
└── reviews/                    # 评价截图（82张）
    ├── review-001.jpg
    ├── review-002.jpg
    └── ... review-082.jpg

添加图片规范

• 格式：JPG（照片）、PNG（Logo/图标）
• 尺寸：宽度不超过1600px
• 命名：英文小写+连字符，如 new-photo.jpg
• 路径：代码中引用时用 /images/xxx.jpg（以 / 开头的绝对路径）

---

五、sitemap 自动生成

文件位置：server/routes/sitemap.xml.js

如果新增页面，需要在这个文件的 pages 数组中添加：

{ url: '/new-page', priority: '0.8', changefreq: 'monthly' }

当前已配置的页面：

URL	优先级	更新频率
/	1.0	weekly
/faq	0.95	weekly
/products	0.9	weekly
/about	0.85	monthly
/summer-camp	0.85	monthly
/reviews	0.8	weekly
/contact	0.8	monthly
/guides	0.8	monthly

---

六、常见运营操作速查

更新信任数据（服务家庭数等）

→ 改 data/brand.json 的 trustStats

添加新客户评价

→ 1. 截图放 public/images/reviews/ → 2. 在 data/reviews.json 的 items 末尾加新对象

更新小蒙马夏令营行程

→ 改 data/products.json 的 summerCamp 部分

添加新FAQ

→ 在 data/faq.json 对应分类的 questions 数组末尾加新对象

更新小红书数据

→ 改 data/about.json 的 xiaohongshu 部分

修改页面SEO标题/描述

→ 改 data/seo.json 对应页面的 title 和 description

调整导航菜单

→ 改 data/navigation.json

---

七、注意事项

1. 每次改完JSON必须重新 generate — 这是静态站，改JSON不会自动生效
2. 不要删除 node_modules/ — 删了要重新 npm install
3. JSON格式很严格 — 少一个逗号、多一个逗号都会报错，建议用 VS Code 编辑
4. 图片要放在 public/images/ 下 — 不要放在其他位置
5. 缺少 favicon.ico — 需要补一个放在 public/ 目录下
6. 部署只需要 .output/public/ — 这个目录是纯静态HTML，不需要Node.js运行环境