Bulma 文档系统是一个全面的基础设施，旨在展示、解释和介绍 Bulma CSS 框架的特性和组件。本文档涵盖了 Bulma 文档网站的架构、内容组织和技术实现。有关实际 CSS 框架组件的信息，请参阅 组件。
文档系统是 Bulma 代码与其用户之间的主要接口。它使用 Jekyll 作为静态站点生成器构建，将结构化内容转化为一个有组织的、可导航的网站，包含交互式示例、代码片段和自定义工具。
来源：docs/index.html、docs/_layouts/default.html
文档网站建立在基于 Jekyll 的架构之上，该架构将内容与表示分离，从而实现可维护且一致的文档。
Jekyll 处理各种源文件以生成静态文档网站
来源：docs/index.html、docs/_layouts/default.html
文档系统遵循结构化的组织方式，包含以下关键目录：
| 目录 | 目的 |
|---|---|
docs/ | 所有文档文件的根目录 |
docs/_layouts/ | 定义页面结构的布局模板 |
docs/_includes/ | 可重用的 HTML 组件 |
docs/_sass/ | 用于样式的 SCSS 部分文件 |
docs/assets/ | 静态资源（JS、CSS、图像） |
docs/assets/css/ | 编译后的 CSS 文件 |
docs/assets/javascript/ | 用于交互的 JavaScript 文件 |
docs/assets/images/ | 文档中使用的图像 |
来源：所提供信息中的文件路径
文档系统使用 Markdown 文件、HTML include 和数据文件的组合来高效地管理内容。
来源：docs/index.html、docs/_includes/website/banner.html、docs/_includes/website/carbon.html
文档大量使用 Jekyll 的 include 系统将内容分解成可管理、可重用的组件。主页展示了这种方法。
这种模块化方法使维护更加容易，并确保文档的一致性。
来源：docs/index.html
文档使用围绕 Jekyll 模板构建的灵活布局系统。
默认布局提供了所有页面共享的通用结构。
docs/_layouts/default.html1-37
默认布局的关键特性：
来源：docs/_layouts/default.html
文档的不同部分使用专门的组件。
来源：docs/index.html、docs/_layouts/default.html
文档拥有自己的样式系统，建立在 Bulma 之上，并包含针对文档需求的额外 CSS 变量和样式。
一组丰富的 CSS 变量控制着文档的外观。
docs/assets/css/website.css3-83
这些变量能够实现一致的样式，并支持主题系统。
来源：docs/assets/css/website.css、docs/assets/css/website.min.css
文档支持多种主题，包括浅色和深色模式。
主题通过 CSS 变量和基于类的选择器组合来实现。
来源：docs/website.scss
特殊样式应用于文档特定元素。
Hero Sections：用于章节标题和介绍。 docs/_sass/docs/hero.scss4-38
颜色样本：显示颜色变量。 docs/website.scss322-350
代码高亮：代码片段的样式。 docs/website.scss297-316
来源：docs/_sass/docs/hero.scss、docs/website.scss
文档包含多个交互式元素，以增强用户体验。
定制器工具允许用户创建具有特定配置的自定义 Bulma 构建。它通过以下方式集成到文档中：
来源：docs/_layouts/default.html
主页包含动画元素以展示 Bulma 的功能。
docs/assets/javascript/home.js1-191
这些 JavaScript 提供了通过特性和赞助商的圆形动画来增加视觉趣味性。
来源：docs/assets/javascript/home.js
交互式代码示例允许用户在实际中使用 Bulma 组件。
来源：docs/website.scss
文档系统集成了几个外部服务和组件。
AlgoliaSearch 为文档提供搜索功能。
docs/_layouts/default.html25-32
来源：docs/_layouts/default.html
赞助商和支持者在文档中得到展示。
Carbon Ads：集成广告。 docs/_includes/website/carbon.html1-9
赞助商展示：赞助商的视觉展示。 docs/_sass/home/amis.scss1-73
来源：docs/_includes/website/carbon.html、docs/_sass/home/amis.scss
文档包含推广元素。
docs/_includes/website/banner.html1-14 docs/_includes/website/masterclass.html1-43
来源：docs/_includes/website/banner.html、docs/_includes/website/masterclass.html
下图说明了内容如何从源文件流经文档系统到达渲染页面。
来源：所有提供的文件
文档系统遵循特定的设计原则，以确保高质量的用户体验：
这些原则通过 CSS 架构、布局系统和组件设计得以实现。
Bulma 文档系统是一个复杂的、基于 Jekyll 的静态站点，它既是 Bulma CSS 框架的展示，也是其参考。通过其模块化架构、全面的样式系统和交互式元素，它为用户提供了一种学习和使用 Bulma 的有效方式。该系统在技术细节和可用性之间取得平衡，为初学者和经验丰富的开发人员提供高效使用该框架所需的信息。