块样本代码库结构

blockly-samples 代码库包含几种不同类别的项目。本页面旨在帮助您了解不同类别所在的位置,以及类别中的每个项目可能包含的内容。

Codelab

Codelab 是使用 Markdown 语法编写的互动式教程,发布在 blocklycodelabs.dev 上。Codelab 会混合使用自然语言、代码示例和屏幕截图来打造更有趣的教程体验。目标用户会遵循并在阅读时运行代码。

自定义渲染程序 Codelab 的屏幕截图

Codelab 目录包含模板,每个 Codelab 都有一个文件夹。每个 Codelab 文件夹都包含一个 Markdown 文件,以及此 Codelab 的所有资源(png、gif 等)。

示例

一些独立的示例项目演示了添加和扩展 Blockly 库的技术。它们通常由演示网页和一些支持代码组成。Codelab 会引导您逐步完成构建工作,而示例向您展示的是最终产品,供您按照自己的节奏进行探索。

blockly-react 示例的屏幕截图

示例代码应带有充分的注释,以便于复制。目标用户可能正在读取代码、在本地运行代码或复制代码段。

示例目录中的每个示例都有一个文件夹。每个示例都可以使用 npm install && npm run start 运行,并且每个示例包含一个带有额外上下文或指令的 README.md 文件。

插件

插件是一些独立的代码段,用于向 Blockly 中添加功能。插件可以添加字段、定义主题、创建渲染程序等等。目标用户是通过 npm 查找和使用插件的开发者。此代码库中定义的插件是第一方插件,这意味着这些插件受 Blockly 团队支持。

屏幕截图

插件目录中,每个插件都有一个文件夹。每个插件都有一个 src 目录(其中包含代码)和一个 test 目录(包含演示页面)。这些插件还包含一个 README.md 文件,为开发者提供关于该插件的用途和使用方法的信息。

GitHub 页面

Blockly-samples 有一个网页,其中的许多插件和演示都可以在 Playground 环境中提供。此页面托管在 GitHub 页面上,此网站的代码位于 blockly-samples 的 gh-pages 目录中。此目录包含网站上网页的模板。实际的网站内容是根据这些模板以及来自每个插件或托管示例的元数据生成的。