网站建立的基本原则

[mtsubs]

蒙太奇字幕组官网 - 志愿者社区网站建立的基本原则

背景

蒙太奇字幕组正在从传统字幕组转变为一个开源协作的字幕社区，官网将成为实现组织愿景、宣传品牌故事、回馈社区的中央枢纽。该网站需要成为连接影视工作者、字幕创作者、字幕开发者和观众的交汇点。

当前网站部署在 GitHub Pages 上 (https://github.com/MontageSubs/montagesubs.github.io/ )，使用 Astro + Tailwind CSS 构建，并需要为未来迁移至 Codeberg 预留条件。由于这是志愿者项目，未来可能由其他人维护，因此代码质量和可维护性至关重要。

具体可见：《蒙太奇字幕组网站：使命、价值观与组织理念的集合》

技术栈

层级	技术	说明
前端框架	Astro	原生 i18n、零 JS 默认、静态输出、SEO 友好
样式	Tailwind CSS	与 Astro 集成良好
内容管理	Markdown + YAML 文件	Git 管理，无需 CMS
搜索	Pagefind	纯静态、构建时生成索引、按语言隔离
部署	GitHub Pages	GitHub Actions 自动构建部署
CI/CD	GitHub Actions	推送 main 分支自动触发
字体策略	系统字体栈或本地托管	严禁加载 Google Fonts 等外部字体，保护隐私与性能
订阅通知	RSS（Astro 官方插件）+ Substack 外链	不做浏览器推送通知
动态 API（第二阶段）	Cloudflare Workers + Turso	目前尚未开发，预留接口

网站信息架构

顶级导航

• 关于（About）- 组织使命、历史发展、核心团队
• 项目（Projects）- 字幕作品库、项目追踪
• 工具（Tools）- 字幕制作工具资源
• 知识库（Learn/Knowledge）- Wiki、文档、最佳实践
• 社区（Community）- 社区讨论、贡献者、合作伙伴
• 贡献（Contribute）- 如何参与、开发指南、行为准则

需求

核心建设原则

1. 社区愿景与宣传

   • 呈现蒙太奇字幕组从制作字幕到连接开发者再到连接影视工作者的发展路径
   • 体现 From the community, by the community, for the community 的众包理念
   • 展示四大群体（影视工作者、字幕创作者、字幕开发者、观众）的连接枢纽角色

2. 技术架构原则

   • 使用 Astro + Tailwind CSS 构建，暂时采用静态内容实现，但需预留扩展性
   • 避免使用 JavaScript，除非特殊样式无法实现
   • 代码设计应考虑未来轻后端扩展（Cloudflare Workers + Turso），确保易于维护和演进
   • 所有内部链接使用相对路径，不硬编码域名
   • CI/CD 不使用 GitHub 专属 API

3. 无障碍设计

   • 前端开发必须符合 WCAG 2.1 标准和欧盟 EN 301 549 标准
   • 实现与屏幕阅读器的完全兼容性

4. 多语言框架

   • 实现原生的多语言框架
   • 首先支持简体中文，规划扩展至繁体中文、英文等
   • 语言切换使用文字标识（简体中文 / English），禁止使用国旗图标

5. 代码质量与维护性

   • 代码应尽可能优雅，实现复用和易于维护
   • 使用标准方式实现功能，避免自造轮子；如必须自造，需提供工作原理解释
   • 禁止打补丁方式，问题应从根源解决
   • 代码应适合任何类型贡献者参与和维护

6. 响应式设计

   • 支持手机、平板、电脑、电视等各种显示设备的自适应显示
   • 支持现代浏览器

7. 隐私与用户体验

   • 明确规定 cookies 和 LocalStorage 的使用要求，能不使用就不使用
   • 任何使用必须经过充分讨论，确保遵守 GDPR 等相关法律
   • 禁止使用浏览器推送通知功能
   • 减少对第三方内容的引用（外部字体、外部图片、外部内容）
   • 使用 https://github.com/MontageSubs/external-assets 项目存储外部资源
   • 避免外部内容直接链接，确保用户加载体验和隐私保护

8. 设计理念

   • 追求轻量、高效、直观、美观，对所有人都友好
   • 设计应大气且不会过时，经得起时间考验
   • 避免频繁维护，适合长期无维护状态
   • 充分考虑包容性和友好性
   • 预判跨文化问题，避免在某些文化中产生冒犯性的内容

9. 内容策略

   • 页面文字内容应专业、易于理解、具通用性
   • 禁止俚语、隐喻和频繁使用 emoji
   • 体现字幕社区维护者的专业、严谨态度
   • 避免政治、可能被误解、价值观或意识形态表达
   • 避免在首页增加动态或需要频繁维护的内容
   • 禁止虚假宣传（如夸大下载数、点赞数等）

10. SEO 优化

    • 页面设计应充分考虑 SEO 优化需求
    • 确保内容 SEO 友好

11. 内容订阅

    • 项目页面和博客页面支持 RSS 订阅
    • 实现可选的内容订阅功能
    • 订阅渠道：项目内容（各社媒 + RSS），博客内容（Substack + RSS）

12. 搜索功能

    • 支持页面内搜索，中文页面搜索仅返回中文结果

13. 社区治理

    • 所有社区原则参照 Contributor Covenant 3.0 (https://www.contributor-covenant.org/version/3/0/)
    • 确保友好、非歧视性，充分考虑少数群体的友好和保护
    • 避免任何伤害性内容（设计或文案方面）

14. 部署与域名

    • 当前部署在 GitHub Pages，域名为 subs.js.org（来自 JS.ORG 捐助）
    • 预留迁移至 Codeberg 的条件

未来扩展预留

• 后端实现：Cloudflare Workers + Turso（第二阶段，暂不开发）
• 预期功能：匿名留言板（粉丝影视制作请愿）、页面内容点赞等交互功能

推荐实现路线

第一阶段：基础框架与文档

• 编写详细的技术规范文档，包括无障碍标准、多语言架构、代码风格指南
• 建立项目的贡献者文档和维护指南
• 配置开发环境和本地测试流程

第二阶段：核心功能实现

• 实现 Astro 项目基础结构，集成 Tailwind CSS
• 建立多语言框架和页面模板系统
• 实现首页、项目页面、博客页面的静态框架
• 集成 RSS 生成功能

第三阶段：无障碍与优化

• 完整的无障碍审计和修复（WCAG 2.1）
• SEO 优化审查和调整
• 响应式设计测试与调整

第四阶段：内容与视觉设计

• 品牌视觉系统建立
• 核心内容填充
• 搜索功能实现

第五阶段：测试与交付

• 跨浏览器兼容性测试
• 性能测试与优化
• 最终质量审查和打磨

验收标准

功能完整性

• 网站成功部署并可访问
• 支持简体中文和英文两种语言
• 所有核心页面完成（首页、项目、博客等）
• RSS 订阅功能正常工作
• 页面内搜索功能完整，中文搜索仅返回中文结果
• 所有内部链接使用相对路径

无障碍标准

• 通过 WCAG 2.1 验证工具自动检测 （ https://wave.webaim.org/ ）
• 通过屏幕阅读器（NVDA / JAWS）手动测试
• 符合 EN 301 549 标准要求
• 键盘导航完全可用
• 所有表单和交互元素标签明确

设计与用户体验

• 在手机（375px）、平板（768px）、桌面（1920px）、电视（4K）等多设备上显示正常
• 页面加载时间在 3 秒以内（不含第三方资源）
• 现代浏览器支持（Chrome、Firefox、Safari、Edge 最新两个版本）
• 设计风格统一，无过时感

隐私与合规

• 代码审查确认无不必要的 cookies 或 LocalStorage 使用
• 所有外部资源已本地化或通过 external-assets 项目管理
• 无浏览器推送通知功能
• 符合 GDPR 要求

代码质量

• 代码审查通过，符合风格指南
• 无 JavaScript 除非必要
• 代码高度模块化，易于维护
• 所有自定义功能有文档说明
• CI/CD 配置不依赖 GitHub 专属 API

内容质量

• 所有文案专业、准确、无 emoji 滥用
• 不包含虚假宣传或动态数据声明
• 多语言内容准确一致
• SEO 元数据完整（title、meta description 等）
• 内容符合 Contributor Covenant 3.0 原则

交付物清单

• 完整的可部署代码库
• 详细的部署和维护文档
• 贡献者指南
• 本地开发搭建说明
• 测试报告（无障碍、性能、兼容性）

时间表

• 2026 年 5 月中旬：完成所有功能开发
• 2026 年 5 月下旬：进一步打磨和验证
• 2026 年 5 月 31 日：完全可交付

相关资源

• 项目仓库：https://github.com/MontageSubs/montagesubs.github.io/
• 外部资源管理：https://github.com/MontageSubs/external-assets
• 社区准则：https://www.contributor-covenant.org/version/3/0/
• 技术栈文档：Astro、Tailwind CSS、JavaScript 社区 (JS.ORG)