47 lines
1.8 KiB
Markdown
47 lines
1.8 KiB
Markdown
# Author: fruit.com.cn
|
|
|
|
# YMB Site
|
|
|
|
YMB 公开站点 React + Vite 项目，参考 YouTube 的内容发现信息架构，支持桌面端与移动端。
|
|
|
|
## 企业级目录
|
|
|
|
```text
|
|
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。
|
|
|
|
## 运行
|
|
|
|
```bash
|
|
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`。
|