GitHubHelp

XiGou/hu-chenfeng

★ 0Forks 0JavaScriptGitHub ↗Compare

Project website ↗

README

户晨风 · 摘录

户晨风的精华摘录静态站点 —— 从 2023–2025 年直播文字稿中手工挑选的只言片语，以极简主义的风格呈现，专注文本与多媒体。

基于 Vite + Vue 3 构建，站彻底 MPA（多页应用）：首页 / 观点 / 语录 / 展厅各自为独立 URL 页面，构建期全量预渲染（SSR），无需执行 JS 即可阅读内容；另有一页客户端交互的「纯享模式」黑胶唱机。

✨ 特性

  • 极简主义 UI：白底、留白、衬线正文，专注内容本身
  • 站彻底 MPA：每个栏目独立 URL 页，互链导航——
    • 首页（选读 Essence）：/ 从全集文字稿中摘取的精华片段列表，每条链接到独立详情页 选读/<id>.html
    • 观点 Viewpoints：/viewpoints.html AI 通读全集后归纳的核心立场
    • 语录 Quotations：/quotations.html 按主题整理的语录小文章
    • 展厅 Gallery：/gallery.html 图像资料集锦，点击查看大图
    • 纯享模式 Pure：/pure.html 黑胶唱机式沉浸聆听，遍历全部选读顺序或随机播放心声（客户端交互页）
  • 全量预渲染（SSR）：构建期用 @vue/server-renderer 渲染所有页面内容到静态 HTML，搜索引擎与无 JS 环境可直接读取正文
  • 实时检索：每页搜索框可按关键词实时过滤当前栏目内容（客户端交互）
  • 连播（podcast 式）：首页可一键开启「顺序连播 / 随机连播」，像听播客一样从一条选读自动听到下一条——每条播完自动打开对应详情页；详情页顶部有连播状态条，可随时停止
  • 纯享模式（黑胶唱机）：/pure.html 独立沉浸页，左侧旋转黑胶唱片（中央把随机 gallery 图 mask 成圆标）+ 播放列表，右侧滚动展示当前选读正文；遍历全部选读自动生成播放列表，可顺序或随机播放，支持进度拖拽与键盘快捷键
  • 首页分页：选读数量超过 20 个时首页自动分页（每页 20 条），页码导航置于列表底部；检索时自动展示全部匹配
  • 多媒体可选：选读可独立附带音频、外链（视频/YouTube 等）
  • 波形播放器：选读详情页用 Wavesurfer.js 渲染音频波形，带播放/暂停、点按跳转与「播放着色」进度；无 JS 时自动回退原生播放器；连播模式下自动开播、播完自动接续下一条
  • 悬浮 BGM 播放器：右下角悬浮迷你播放器，可在多首静态 BGM 中任选一首循环播放
  • 独立分享页：每条选读构建时生成独立静态 HTML（站点/选读/<id>.html），含 OG / Twitter Card meta，可直接分享到 X(Twitter) 并点播音频
  • 搜索引擎收录：构建期自动生成 sitemap.xml，收录首页 / 各栏目 / 每条选读的干净 canonical 地址，便于 Google / Bing 等收录页面；配 SITE_URL 时烘成绝对 https

🛠 技术栈

层 技术
构建 Vite 6（MPA 多入口）
框架 Vue 3（<script setup>）
预渲染 @vue/server-renderer（Vue 自带）
样式 原生 CSS 变量

🚀 本地开发

npm install
npm run dev      # 开发服务器（http://localhost:5173）
npm run build    # 生产构建 → dist/（MPA + SSR 预渲染 + 选读详情页 + sitemap.xml）
npm run preview  # 预览构建产物

☁️ 部署

通过根目录 .cnb.yml 流水线，push 到 main 分支自动构建并部署：

  • 构建：vite build → pre-render.mjs（SSR 预渲染列表页 + 选读详情页 + 生成 sitemap.xml）
  • 公网部署：将 dist/ 静态产物同步到腾讯云 COS 对象存储

路径兼容：构建产物中的页面资源（JS / CSS / 音频 / BGM）均使用相对路径引用（vite.config.js 中 base: "./"），资源文件可适配任意部署位置。 选读详情页 og meta 通过读取 SITE_URL 环境变量在构建期烘成绝对 https（各部署平台在自身 CI 设置中配置，GitHub Pages 用 https://xigou.github.io/hu-chenfeng，CF/COS 用 https://hu-chenfeng.19960312.xyz），保证 X/Twitter 等爬虫能正确出预览卡片。未配置时产物保持域名无关，og meta 走相对路径。 og:url 使用不带 .html 后缀的 canonical 干净地址（如 /选读/1），GitHub Pages 与 Cloudflare 均支持无后缀路径解析到对应 .html，同时避免 CF 对 .html 走 308 重定向。 构建期同时产出 dist/sitemap.xml，同样依赖 SITE_URL 生成绝对地址供搜索引擎收录；未配置时生成站点相对路径，需接入 SITE_URL 后重建。可向 Google Search Console / Bing Webmaster 提交 {站点}/sitemap.xml。

📁 项目结构

├── index.html                  # 首页入口 HTML（选读列表）
├── detail.html                 # 选读详情页 HTML 壳（构建期复制为 选读/<id>.html）
├── viewpoints.html             # 观点栏目入口 HTML
├── quotations.html             # 语录栏目入口 HTML
├── gallery.html                # 展厅栏目入口 HTML
├── pure.html                   # 纯享模式（黑胶唱机）入口 HTML
├── vite.config.js              # Vite 配置（MPA 多入口）
├── scripts/
│   └── pre-render.mjs          # SSR 预渲染（列表页 + 选读详情页 + og 注入 + sitemap.xml）
├── src/
│   ├── layout/
│   │   └── PageShell.vue       # 共享页面骨架（页头 + 栏目导航 + BGM）
│   ├── pages/
│   │   ├── HomePage.vue        # 首页（选读 Essence 列表）
│   │   ├── ViewpointsPage.vue  # 观点页
│   │   ├── QuotationsPage.vue  # 语录页
│   │   ├── GalleryPage.vue     # 展厅页
│   │   └── PurePlayerPage.vue # 纯享模式（黑胶唱机）页
│   ├── main/
│   │   ├── home.js             # 首页客户端入口（hydrate）
│   │   ├── viewpoints.js       # 观点页客户端入口
│   │   ├── quotations.js       # 语录页客户端入口
│   │   ├── gallery.js          # 展厅页客户端入口
│   │   ├── pure.js             # 纯享模式客户端入口
│   │   └── detail.js           # 选读详情页客户端入口（hydrate）
│   ├── ssr/
│   │   └── entry.js            # SSR 渲染入口（供 pre-render.mjs 使用）
│   ├── components/
│   │   ├── Masthead.vue        # 页头
│   │   ├── Toc.vue             # 选读列表 + 检索
│   │   ├── Viewpoints.vue      # 观点内容组件
│   │   ├── Quotes.vue          # 语录内容组件（列表 + 详情切换）
│   │   ├── Gallery.vue         # 展厅内容组件（网格 + 灯箱）
│   │   ├── About.vue           # 关于浮层
│   │   ├── BgmPlayer.vue       # 悬浮迷你 BGM 播放器
│   │   ├── EssenceDetail.vue   # 选读详情页内容组件（批注/正文/媒体/分享）
│   │   ├── WaveAudio.vue       # 选读详情波形音频播放器
│   │   └── ShareBar.vue        # 复制链接 / 分享到 X 操作条
│   ├── data/
│   │   ├── essence.js          # 选读数据（meta + md 汇总）
│   │   ├── essence/            # 选读 Markdown 文件
│   │   ├── viewpoints.js       # 观点数据
│   │   ├── quotes.js           # 语录数据
│   │   ├── gallery.js          # 展厅数据
│   │   └── bgm.js              # BGM 曲目配置
│   ├── styles/main.css         # 全局样式
│   └── styles/pure.css         # 纯享模式样式
├── public/404.html             # 404 页面
├── .cnb.yml                    # CNB 构建部署流水线
└── .github/workflows/          # GitHub Actions 部署

🗺 页面路由

URL 内容
/ 或 /index.html 首页 —— 选读（Essence）精华列表 + 检索
/viewpoints.html 观点 —— 户晨风核心立场
/quotations.html 语录 —— 按主题辑录的言论小文章
/gallery.html 展厅 —— 图像资料集锦
/pure.html 纯享模式 —— 黑胶唱机沉浸聆听（客户端交互）
/选读/<id>（文件为 <id>.html） 选读详情页（独立静态页，分享用；canonical 不带 .html 后缀）

Contributors

XiGou

Issues