ac90205395
覆盖最新版本代码，包含： - 新增品牌百科、公司百科页面及CMS管理 - 新增微信引导组件(WechatCTA) - 新增品牌/公司图片资源 - 全站组件/页面/数据/样式更新 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
583 行
17 KiB
Markdown
583 行
17 KiB
Markdown
# 呼籁旅行官网 - 后端对接 & 运营维护文档
|
||
|
||
> 域名：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，丢到任何静态服务器即可 |
|
||
|
||
### 部署流程
|
||
```bash
|
||
# 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` — 品牌基础信息
|
||
|
||
> 影响页面：首页、关于页、联系页
|
||
|
||
```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` — 产品线
|
||
|
||
> 影响页面：产品页、首页产品预览、小蒙马页
|
||
|
||
```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）
|
||
|
||
```json
|
||
{
|
||
"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示例：**
|
||
```json
|
||
{
|
||
"id": "new-question-id",
|
||
"question": "新问题？",
|
||
"answer": "新答案...",
|
||
"relatedLinks": [
|
||
{ "text": "链接文字", "url": "/products" }
|
||
]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 3.4 `data/reviews.json` — 客户评价
|
||
|
||
> 影响页面：评价页、首页精选评价
|
||
|
||
```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` — 关于我们
|
||
|
||
> 影响页面：关于页
|
||
|
||
```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` — 联系方式
|
||
|
||
> 影响页面：联系页、页脚
|
||
|
||
```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配置
|
||
|
||
> 影响：每个页面的标题、描述、搜索引擎展示
|
||
|
||
```json
|
||
{
|
||
"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` — 导航菜单
|
||
|
||
> 影响：顶部导航栏、底部链接
|
||
|
||
```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对比等）
|
||
|
||
```json
|
||
{
|
||
"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` — 出行指南
|
||
|
||
> 影响页面：出行指南页
|
||
|
||
```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` 数组中添加：
|
||
```javascript
|
||
{ 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运行环境
|