Author: fruit.com.cn

YMB Site

YMB 公开站点 React + Vite 项目，参考 YouTube 的内容发现信息架构，支持桌面端与移动端。

企业级目录

src/
├── app/          # 路由与全局 Store
├── layouts/      # AppShell、顶部栏、侧栏、移动端导航
├── pages/        # Home、Shorts、Subscriptions、Library、History、Search、Watch
├── components/   # MediaCard、SectionHeading 等复用组件
├── features/     # 后续业务域扩展入口
├── services/     # 目录检索与接口边界
├── data/         # 演示目录数据
├── i18n/         # ID / EN / zh-CN 语言包
└── lib/seo.js    # 页面 SEO 元数据入口

YouTube 对照的信息架构

• 顶部 AppBar：品牌、全局搜索、语言、通知、用户入口。
• 桌面侧栏：Home、Shorts、Subscriptions、Library、History、Liked videos。
• 首页：Hero 推荐、Topic chips、视频网格、Shorts 横滑、频道推荐。
• 观看页：16:9 播放器、标题/频道信息、Up next 推荐队列。
• 移动端：抽屉侧栏、底部四项导航、两列视频卡与横滑 Shorts。

运行

pnpm install
pnpm dev
pnpm build

包含

• 桌面端：顶部搜索、侧边导航、推荐网格、Shorts 横滑区、频道订阅。
• 移动端：顶部紧凑栏、双列内容、横滑 Shorts、底部导航。
• React：搜索、题材筛选、播放提示、关注切换、移动端菜单。
• 多语言：印尼语 ?lang=id、English ?lang=en、简体中文 ?lang=zh。
• SEO：动态 lang/title/description、canonical、hreflang、Open Graph、Twitter Card、JSON-LD、robots.txt、sitemap.xml。

部署前请将 ymb.example.com 替换为正式域名，并同步修改 index.html、app.js、robots.txt 与 sitemap.xml。