# 主题和区块创作技能

**URL:** https://meta.discourse.org/t/skills-for-authoring-themes-and-blocks/401629
**Category:** Development
**Tags:** theme-guides, blocks, skills
**Created:** [2026年四月27日 17:39 UTC](https://meta.discourse.org/t/skills-for-authoring-themes-and-blocks/401629 "2026-04-27T17:39:44Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2026年四月27日 17:39 UTC](https://meta.discourse.org/t/skills-for-authoring-themes-and-blocks/401629/1 "2026-04-27T17:39:45Z")

</div>

用于构建 Discourse 主题和区块组件的 Claude Code 技能库：

> **[GitHub - discourse/discourse-theme-skills: Claude Code skills for Discourse theme development](https://github.com/discourse/discourse-theme-skills)**
>
> Claude Code skills for Discourse theme development

### 🧰 包含内容

**主题创作技能** — 涵盖构建 Discourse 主题的完整范围：使用 `discourse_theme` CLI 进行脚手架搭建、SCSS 架构、视口库、本地化、设置、修饰符、值转换器、图标以及 CSS 变量。图标、变量和转换器的详细参考文件单独提供，可按需加载。[SKILL.md](https://github.com/discourse/discourse-theme-skills/blob/main/.claude/skills/discourse-theme-authoring/SKILL.md)

**区块创作技能** — 涵盖区块 API 的主题端内容：使用 `@block` 装饰器编写区块组件、定义参数（args）模式、将区块渲染到可用的核心出口（outlets）、条件判断、容器区块和布局分组，以及将主题翻译和设置集成到区块参数中。[SKILL.md](https://github.com/discourse/discourse-theme-skills/blob/main/.claude/skills/discourse-block-authoring/SKILL.md)

**示例主题** — 一个使用区块构建自定义主页的可用主题，展示了出口、条件和布局组合的实际模式。

* * *

### 🧩 关于区块 API

区块 API 是 Discourse 用于在主题和插件中构建模块化、可组合 UI 组件的新框架。区块是注册到命名出口（如 `homepage-blocks`、`hero-blocks` 或 `sidebar-discovery`）的 Glimmer 组件，并且可以根据路由、用户、视口、站点设置或插件可用性条件性地显示。

该系统的一个关键优势在于区块具有小而专注的作用域以及一致的模式。这使其非常适合 AI 辅助开发：具备区块技能的模型可以在单次操作中完成区块组件的脚手架搭建、将其注册到出口并连接条件。

本仓库中的示例主题展示了一个根据可用插件和内容自适应调整的主页。以下是基本主页的样貌，包含一个英雄区块和一个精选话题列表：

 ![Screenshot 2026-04-23 at 11-30-55 Discourse](https://global.discourse-cdn.com/meta/original/4X/e/3/8/e38d83686e5e13f1e0f06a0e81d9fe7f8a7a254d.png)  
 ![Screenshot 2026-04-23 at 11-46-29 Discourse](https://global.discourse-cdn.com/meta/original/4X/9/c/a/9caebd42d9d30c7fbfefdad697a4784d30098bdf.png)

当满足额外条件时（配置了精选标签、Discourse Events 插件已激活且 Discourse Leaderboard 插件可用），额外的区块会被条件性地渲染到布局中：

 ![Screenshot 2026-04-23 at 12-07-01 Discourse](https://global.discourse-cdn.com/meta/original/4X/8/f/9/8f9530d8ccfc3e55ea8a54e92bd9274845d22fcb.png)  
 ![Screenshot 2026-04-23 at 12-07-18 Discourse](https://global.discourse-cdn.com/meta/original/4X/f/b/5/fb556535f0809403fefaefc79a046cb233cebc47.png)

区块不仅限于主页。示例主题还使用 `sidebar-blocks` 出口添加_主页_链接，使用 `sidebar-discovery` 出口添加特定于分类的侧边栏内容，并在分类页面顶部使用 `category-banner` 区块：

 ![Screenshot 2026-04-23 at 11-46-02 Latest General topics - Discourse](https://global.discourse-cdn.com/meta/original/4X/9/4/6/946ec58f4a43a9496c057a5f3ffab2a4da5d67ad.png)  
 ![Screenshot 2026-04-23 at 11-46-14 Latest General topics - Discourse](https://global.discourse-cdn.com/meta/original/4X/8/3/4/83449a4f292674879aaa08bdc627efed3701cbbf.png)

DevTools 中的区块检查器会在页面上叠加显示出口标签和区块标识符。这使得理解布局结构和调试渲染位置变得非常容易：

 ![Screenshot 2026-04-23 at 11-36-45 Discourse](https://global.discourse-cdn.com/meta/original/4X/6/a/e/6ae12a39a34199a2fe8ca25128737ecf3c4003d6.png)  
 ![Screenshot 2026-04-27 at 18-32-00 Latest General topics - Discourse](https://global.discourse-cdn.com/meta/original/4X/5/2/5/5251501b8b0b5b6bdb466898500059a25e619c6a.png)

* * *

### 🎨 与设计平台 MCP 配合使用

这些技能与设计平台 MCP（如 Penpot 或 Figma MCP）配合效果极佳。连接其中一个后，Claude 可以直接从设计文件中读取组件规范和设计令牌，并使用该技能的约定进行实现。这缩短了设计与代码之间的循环，尤其是在基于结构化设计系统工作时。

* * *

### 🍴 分叉并调整

技能中的一些约定更多是基于偏好而非严格规范，例如 SCSS 文件夹架构。您可以分叉该仓库，并根据自己的工作流和约定调整这些技能。

* * *

### 💬 分享您的成果

请尝试一下并告诉我们您的体验！我们很想知道您如何使用这些技能、用它们构建了什么以及它们存在哪些不足。欢迎提供反馈、修正意见或进行分叉。

---

_[View the full topic](https://meta.discourse.org/t/skills-for-authoring-themes-and-blocks/401629)._