覆盖最新版本代码,包含: - 新增品牌百科、公司百科页面及CMS管理 - 新增微信引导组件(WechatCTA) - 新增品牌/公司图片资源 - 全站组件/页面/数据/样式更新 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
17 KiB
呼籁旅行官网 - 后端对接 & 运营维护文档
域名: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— 添加新评价
添加新评价步骤:
- 将评价截图命名为
review-XXX.jpg(XXX为序号如083) - 放入
public/images/reviews/目录 - 在
items数组末尾添加新评价对象 - 截图建议宽度不超过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
七、注意事项
- 每次改完JSON必须重新 generate — 这是静态站,改JSON不会自动生效
- 不要删除
node_modules/— 删了要重新npm install - JSON格式很严格 — 少一个逗号、多一个逗号都会报错,建议用 VS Code 编辑
- 图片要放在
public/images/下 — 不要放在其他位置 - 缺少 favicon.ico — 需要补一个放在
public/目录下 - 部署只需要
.output/public/— 这个目录是纯静态HTML,不需要Node.js运行环境