91网交付说明
91网完整网站方案与JSON数据
本页按需求顺序展示网站定位、首页模块JSON、板块分类、热门话题、FAQ、用户评价、社交分享和内页栏目说明。实际页面使用外部CSS，以满足交付中的外部样式要求。
网站定位说明
{
"style": "现代极简高端风格：大量留白、简洁线条、柔和渐变、细腻悬停动画和移动端优先排版。",
"users": "关注视频教程、生活视频、入口导航、社区话题复盘和移动端浏览体验的中文用户。",
"tone": "克制、可信、专业、友好，强调原创整理、公开信息和规范讨论。"
}
首页模块JSON
[
{
"key": "hero",
"title": "91网首屏视频社区",
"description": "以视频教程、视频演示和精选话题构建高端中文论坛首页。"
},
{
"key": "concept",
"title": "91网社区理念",
"description": "强调原创、清晰、克制表达与移动端友好阅读。"
},
{
"key": "featured",
"title": "91网热门视频话题",
"description": "以生活技能视频卡片呈现播放量、点赞数和评论数。"
},
{
"key": "boards",
"title": "91网核心板块分类",
"description": "通过极简网格组织教程视频、生活视频、工具导航和社区帮助。"
},
{
"key": "reputation",
"title": "91网用户口碑",
"description": "展示真实社区评价、内容可信度和更新体验。"
},
{
"key": "faq",
"title": "91网FAQ",
"description": "用折叠式问答解释入口、视频内容、移动端体验和规范。"
},
{
"key": "join",
"title": "加入91网讨论",
"description": "引导用户提交主题建议或参与视频话题讨论。"
}
]
板块分类JSON
[
{
"title": "91网视频教程区",
"slug": "/boards/#video-guide",
"summary": "聚合生活技能视频教程、剪辑方法和观看指南。",
"style": "留白卡片，强调视频标签与步骤化阅读。"
},
{
"title": "91网生活视频区",
"slug": "/boards/#life-video",
"summary": "分享收纳、厨房、学习效率等生活视频演示。",
"style": "横向滚动网格，适合移动端快速浏览。"
},
{
"title": "91网话题观察区",
"slug": "/boards/#topic-watch",
"summary": "整理近日热门主题，重视事实核查与温和讨论。",
"style": "细线分隔，减少传统论坛噪音。"
},
{
"title": "91网网址导航区",
"slug": "/boards/#nav-guide",
"summary": "说明当前访问域名、入口识别和导航使用方式。",
"style": "高对比信息块，提升信任感。"
},
{
"title": "91网工具浏览器区",
"slug": "/boards/#browser",
"summary": "讨论浏览器兼容、移动端适配和页面加载体验。",
"style": "技术感标签与轻量提示结合。"
},
{
"title": "91网社区帮助区",
"slug": "/help/",
"summary": "收录FAQ、社区规范和联系入口。",
"style": "简洁问答布局，降低使用成本。"
}
]
热门话题JSON
[
{
"id": "video-setup",
"title": "91网生活技能视频：三分钟桌面整理演示",
"summary": "一条以桌面整理为主题的91视频教程，采用分步骤视频演示说明收纳逻辑、工具摆放和移动端观看技巧。",
"image": "images/life-video-1.webp",
"tags": [
"视频",
"教程视频",
"生活视频",
"收纳技巧"
],
"views": "128.6万",
"likes": "8.9万",
"comments": "12,430"
},
{
"id": "video-cooking",
"title": "91网美食视频教程：轻食早餐流程复盘",
"summary": "通过视频卡片展示食材准备、时间分配与摆盘演示，帮助用户快速理解生活视频分享的结构。",
"image": "images/life-video-2.webp",
"tags": [
"视频",
"美食视频教程",
"生活视频",
"效率"
],
"views": "96.2万",
"likes": "6.4万",
"comments": "9,218"
},
{
"id": "video-study",
"title": "91网学习效率视频演示：番茄钟与复盘卡片",
"summary": "围绕学习效率制作视频演示，补充图文步骤、标签说明和移动端流畅阅读体验。",
"image": "images/life-video-3.webp",
"tags": [
"视频",
"教程视频",
"学习生活视频",
"方法论"
],
"views": "83.5万",
"likes": "5.7万",
"comments": "7,540"
},
{
"id": "video-browser",
"title": "91网浏览器使用视频：入口识别与安全查看",
"summary": "以视频简介形式讲清当前域名识别、导航入口和页面加载判断，避免误点和无效资源。",
"image": "images/life-video-4.webp",
"tags": [
"视频",
"教程视频",
"91网浏览器",
"入口指南"
],
"views": "77.9万",
"likes": "4.8万",
"comments": "6,936"
},
{
"id": "video-topic",
"title": "91网话题广场视频：近日热门讨论整理",
"summary": "通过轻量视频卡片与评论数据呈现91大事件近日讨论，强调公开信息、原创整理与友好表达。",
"image": "images/life-video-5.webp",
"tags": [
"视频",
"生活视频",
"91大事件近日",
"话题"
],
"views": "72.4万",
"likes": "4.1万",
"comments": "5,880"
},
{
"id": "video-mobile",
"title": "91网移动端视频体验：手机浏览排版演示",
"summary": "展示手机、平板环境下的视频封面、播放按钮和互动数据布局，提升百度移动端友好度。",
"image": "images/life-video-6.webp",
"tags": [
"视频",
"教程视频",
"移动端适配",
"新91视频"
],
"views": "68.1万",
"likes": "3.9万",
"comments": "4,752"
}
]
FAQ JSON
[
{
"q": "91网当前访问域名如何查看？",
"a": "页面顶部、页脚和图片说明会自动读取当前访问域名，不在源码中写死固定域名。"
},
{
"q": "91网为什么强调视频内容？",
"a": "首页围绕视频教程、视频演示和生活视频分享组织内容，便于搜索引擎理解页面主题，也方便移动端用户快速浏览。"
},
{
"q": "91网搜索框能真实检索吗？",
"a": "搜索框由JS控制，仅作为前端交互演示，不连接后端服务，也不会请求无法访问的接口。"
},
{
"q": "91网视频卡片是否需要真实视频文件？",
"a": "本静态交付使用H5结构和JS悬停交互展示播放按钮，可后续替换为真实视频资源。"
},
{
"q": "91网如何避免关键词堆砌？",
"a": "标题、描述、标签和正文采用自然分布，围绕视频、教程、生活场景和社区讨论展开。"
},
{
"q": "91网移动端体验如何保障？",
"a": "页面使用响应式网格、懒加载图片和轻量脚本，手机与平板都能保持清晰排版。"
}
]
用户评价JSON
[
{
"name": "林同学",
"role": "学习效率爱好者",
"text": "91网的视频教程卡片很清楚，播放量、评论数和标签一眼能看懂，手机上阅读也很轻松。"
},
{
"name": "周先生",
"role": "生活技能分享者",
"text": "相比传统论坛，91网留白更多，话题页不拥挤，生活视频演示的结构更适合复盘。"
},
{
"name": "Mia",
"role": "内容剪辑用户",
"text": "91网的精选内容把视频简介、图文说明和标签放在一起，做选题时很省时间。"
},
{
"name": "阿杰",
"role": "移动端用户",
"text": "我经常用手机浏览91网，卡片加载快，按钮和FAQ交互都很顺手。"
},
{
"name": "陈女士",
"role": "社区观察员",
"text": "91网强调规范讨论和原创整理，不把页面做得花哨，整体更可信。"
},
{
"name": "North",
"role": "前端学习者",
"text": "动态域名和结构化数据的处理很细，适合学习百度SEO页面组织方式。"
}
]
社交分享JSON
[
{
"platform": "微信",
"action": "复制当前访问域名与91网视频摘要"
},
{
"platform": "微博",
"action": "分享91网近日热门视频话题"
},
{
"platform": "抖音",
"action": "记录91网生活技能视频灵感"
},
{
"platform": "B站",
"action": "整理91网教程视频复盘笔记"
},
{
"platform": "小红书",
"action": "发布91网生活视频清单笔记"
}
]
前端首页HTML结构与样式说明
首页采用header、nav、main、section、footer语义化结构；实际样式统一写入assets/css/style.css，避免重复内联并保持快速加载。
<header><nav>91网导航</nav></header><main><section class="hero">91网视频社区首屏</section><section>91网热门视频</section><section>91网FAQ</section></main><footer>91网页脚</footer>
内页随机调用栏目
[
{
"title": "91网品牌故事",
"path": "/story/",
"description": "说明91网如何以简洁、高级、可信的方式组织中文视频社区。",
"style": "大面积留白与品牌叙事结合。"
},
{
"title": "91网精选推荐",
"path": "/guide/",
"description": "精选视频教程、生活视频和入口导航建议，帮助用户快速找到重点。",
"style": "排行榜与卡片式推荐结合。"
},
{
"title": "91网社区规范",
"path": "/rules/",
"description": "强调原创、尊重、合法合规和不传播低俗侵权内容。",
"style": "清晰条款与信任提示结合。"
},
{
"title": "91网最新动态",
"path": "/events/",
"description": "展示近期视频专题、社区活动和内容更新节奏。",
"style": "时间线与轻量信息流结合。"
},
{
"title": "91网帮助中心",
"path": "/help/",
"description": "集中解答访问域名、搜索框、视频卡片和移动端适配问题。",
"style": "FAQ折叠组件与简洁说明结合。"
}
]