教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载导读本指南面向想要在 Coding Train编码列车网站仓库website-archive中提交自己作品版本的开发者无论是你照着某个 Coding Challenge、教程Tutorial或课程Course改编出的代码还是基于某个挑战做的网页小游戏都可以通过向对应 Markdown 文件的 YAML front matter 中添加一条contributions记录让作品展示在官网对应视频页面下。读完本文你将掌握如何定位正确的集合文件、如何按格式规范写入贡献条目、如何用video_id代替直接 YouTube 链接以及如何通过 Pull Request 完成提交并获得仓库源码层面的格式校验与渲染逻辑佐证。一、先搞清楚什么是「社区贡献」在这套基于 Jekyll 的静态网站体系中每个视频页面如某个 Coding Challenge都由一个 Markdown 文件驱动其头部front matter中的contributions字段用于存放社区成员提交的自制版本。站在渲染层看视频页面模板 会先判断page.can_contribute是否为true若为真则渲染出一个 Community Contributions 区块并在有/无贡献时分别提示「你也可以添加自己的版本」或「还没有人做过这个挑战的变体来做第一个吧」。是否允许贡献由can_contribute字段控制而它的默认值在 _config.yml 的 defaults 中按集合类型统一设定集合类型can_contribute默认值说明CodingChallengestrue编码挑战天然鼓励社区变体GuestTutorialstrue客座教程同样开放TeachableMachinetrueTeachable Machine 教程开放challengesCabana 系列true同 Coding ChallengesStreamsfalse直播流不允许添加贡献Tutorials / Courses / beginners / learningfalse教程类默认关闭个别视频可单独开启因此只有当对应文件或其所在集合默认值允许贡献时你提交的条目才会真正展示在页面上。这一点也是本指南反复强调「把贡献加到 Coding Challenge / 教程 / 课程 / 客座教程集合而不是 Streams 集合」的底层原因。二、第一步定位正确的集合文件官方指南给出的流程非常明确先找到与你作品对应的原始视频的 Markdown 文件。这些文件位于仓库中以_开头的集合目录中可选的集合名有四个_CodingChallenges_Courses_Tutorials_GuestTutorials为什么要加到这里而不是 Streams指南明确建议不要把你的贡献加到直播流集合Streams里虽然技术上可行因为用户搜索内容时会直接跳转到对应的挑战/教程本身把贡献放在正确的位置才能让更多人看到。2.1 用视频编号快速导航每个集合目录下的文件名都以视频编号开头例如_CodingChallenges/079-number-guessing-chatbot.md对应第 79 期「Number Guessing Chatbot」挑战。官方 Tip直接用标题里的视频编号如 Tutorial #1.2来定位子文件夹效率最高。2.2 找不到文件怎么办如果集合目录中还没有你需要的文件你可以自行创建它——此时需要参考内容贡献指南其中详细说明了视频文件的命名规范编号-短标题.md小写、用-连接、去掉 # 等特殊字符以及 front matter 各字段的写法title、video_number、date、video_id、repository、web_editor、can_contribute等。关于编号的一点提醒编码挑战和直播流的分集编号可以带小数点如46.1但最多只能拆到 9 个分集否则排序算法会失效见内容贡献指南。三、第二步在 front matter 中添加你的贡献找到文件后打开它定位到两个---之间的 YAML front matter 中的contributions:字段。如果该字段还不存在自行添加即可。3.1 官方完整示例Number Guessing Chatbot指南以「数字猜谜聊天机器人」挑战为例文件位于_CodingChallenges/079-number-guessing-chatbot.md其 front matter 形如--- title: Number Guessing Chatbot video_number: 79 date: 2017-10-13 video_id: zGe1m_bLOFk contributions: - title: My awesome version of the number guessing chatbot author: name: Daniel Shiffman url: http://shiffman.net url: https://codingtrain.github.io/Rainbow-Code source: https://github.com/codingtrain/Rainbow-Code ---对照仓库中的真实文件可以看到该挑战确实已经积累了社区贡献olback的 Guess the number、David的 Guess my number, chat、Suman Kumar的 Hack Natashas Mind 等格式与指南示例完全一致。3.2 直接复制追加即可如果contributions:下已有条目你只需把下面这段模板复制粘贴到最后一个条目的后面注意保持相同的缩进层级-与字段名之间、嵌套的name/url均需对齐- title: Your versions title (choose a nice one!) author: name: Your name (will be displayed on the page) url: A link to your homepage/codepen/... (where people can find more of your work) url: A link to your version running (preferably) in the browser source: The link to your repository or website containing your versions code各字段含义字段含义是否必填title你的版本的标题起个好名字必填author.name你的名字会展示在页面上必填url你的版本最好能在浏览器中运行的链接必填author.url你的主页 / CodePen 等让别人能找到你的更多作品可选source包含你作品源码的仓库或网站链接可选video_id当版本无法在浏览器中运行时用 YouTube 视频 ID 代替url二选一3.3 特殊情况无法在浏览器运行改用video_id如果你的作品没法直接在浏览器里跑但你有展示它的 YouTube 视频直接粘贴 YouTube 链接不会被系统接受——正确做法是把 URL 末尾的 video id 填进video_id字段- title: Your versions title (choose a nice one!) author: name: Your name (will be displayed on the page) url: A link to your homepage/codepen/... (where people can find more of your work) video_id: the video id to your youtube video source: The link to your repository or website containing your versions code这一约束在源码测试中同样有据可查unit_testing/formats.js 的linkUrl校验器会直接拒绝youtube.com/watch/youtu.be形式的 URL 并提示 references a YouTube url instead of video_id同时validateVideoId要求video_id至少为 5 个非#/字符。3.4 不是所有键值对都要填指南特别强调只有title、author.name和url是必需的其余都是可选项同时别忘了把模板里的占位默认值替换成你自己的真实信息。如果你没有个人主页author.url完全可以省略。Tip无需克隆仓库直接用 GitHub 网页编辑添加贡献不一定非要 clone 仓库直接打开目标文件点击右上角形似钢笔的编辑按钮Edit on GitHub即可修改之后照常发起 Pull Request。四、源码视角贡献条目的格式校验与渲染4.1 格式定义PropTypes schema仓库的单元测试为贡献条目定义了严格的结构约束见 unit_testing/formats.jsconst contribution (module.exports.contribution exact({ ...link, author: link.author.isRequired }));它由通用link结构formats.js扩展而来link支持的可选属性包括author、time、url、video_id、playlist_id、source、web_editor其中author既可以写成{ name, url }对象也可以直接写字符串仓库中真实案例可见 _CodingChallenges/046.1-asteroids-part-1.md 里author: Aryaman Kejriwal的写法。而contribution在link之上强制要求author必须存在且title、author.name、url为必填——与指南中「只有这三个键必需」的说明完全对应。4.2 测试如何执行unit_testing/yaml.test.js 将仓库中各集合目录逐一映射到formats.js中定义的格式_CodingChallenges、_Courses、_GuestTutorials、_Tutorials、_Streams等随后对每个文件的 YAML 做类型与结构断言包括「标题与内部编号一致」「video_id全局唯一」「YouTube 链接应使用video_id而非直链」等。也就是说你添加的contributions条目在上游 CI 中会经过 PropTypes 校验格式错误会导致测试失败从而在合并前被拦截。4.3 贡献如何被渲染在模板 video.html 中贡献列表通过3-modules/link-list.html渲染而 _jekyll/includes/3-modules/link-list.html 展示了每条记录的呈现逻辑优先拼接video_id/playlist_id为 YouTube 链接url区分外链与站内相对链接author存在时显示「by 作者名可点击」source存在时追加 (Source Code) 源码链接。另外多分集视频如46.1、46.2的贡献只会展示在第一分集页面上video.html 中按video_number取.1分集作为贡献承载页这也是指南建议把贡献放在正确文件的原因之一。五、第三步创建 Pull Request最后一步是提交变更。官方流程如下在你的改动上创建Pull Request如果你 fork 并 clone 了仓库提交分支后点击 New Pull Request如果用的是网页编辑GitHub 会引导你直接创建。填写必填信息标题和描述点击 Open。强烈建议在 PR 描述中附上可运行的 demo 链接或视频 / GIF / 屏幕录制这能让维护者快速预览贡献并给出反馈大幅提升审查效率。PR 模板中还有一个位置让你表达「是否愿意让 The Coding Train 在社交媒体上分享你的贡献」的偏好按需勾选即可。提交之后会怎样指南明确说明一旦有对该仓库具备写权限的贡献者审查了你的改动你就会收到通知。也就是说合并前会有人工审查环节而单元测试unit_testing目录下的 Jest 测试可通过cd unit-testing npm install npm test本地运行详见页面贡献指南会在 CI 阶段先行把关格式正确性。六、相关配套指南社区贡献只是仓库协作体系的一环与之配套的还有内容贡献指南如何把新发布的视频完整接入网站集合选择、series 概念、命名规范、front matter 全字段说明、custom_sections扩展等。页面贡献指南如何新增/更新视频页面本身含完整 YAML 模板、代码目录与页面的对应关系P5/Processing/JavaScript/Node等默认目录名、本地单元测试与 lint 命令。核心贡献指南如何 fork、用 Docker 或原生 Jekyll 搭建本地开发环境docker-compose up或bundle install bundle exec jekyll serve预览地址http://localhost:4000以及故障排查渠道。结语社区贡献机制让 Coding Train 网站成为一个「官方视频 社区变体」共存的开放平台你只需要定位集合文件 → 按 YAML 格式追加一条contributions记录 → 发起带演示链接的 Pull Request三步就能让自己的作品与全球创作者的版本并列展示在对应视频页面下。格式规范由 unit_testing/formats.js 与 unit_testing/yaml.test.js 自动把关渲染逻辑由 video.html 与 link-list.html 负责你只需把真实信息填进模板剩下的交给审查流程。感谢你把作品分享给世界赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐Bug报告Bug报告 描述问题 简要清晰地描述遇到的bug 复现步骤 1. 执行命令 ... 2. 操作 .... 3. 观察到错误 .... 预期行为 应该人工智能计算机视觉深度学习Smooothy性能优化虚拟滚动与渲染性能提升技巧Smooothy性能优化虚拟滚动与渲染性能提升技巧 Smooothy是一个专注于提供流畅滚动体验的开源项目通过虚拟滚动技术和高效渲染策略帮助开发者解决大量后端Web框架Coding Train 网站核心贡献指南基于 Jekyll 的本地环境搭建与 Pull Request 提交流程Coding Train 网站核心贡献指南基于 Jekyll 的本地环境搭建与 Pull Request 提交流程 《Core Contribution Gu教程文档示例工程上一篇设计国际象棋游戏Chess Game低层设计指南需求建模、UML 类图与多语言实现下一篇三步快速上手如何将小爱音箱改造成智能AI语音助手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考