mcpField
M
moodle5-theme

moodle5-theme

github.com/nicolasflores9设计与 UI151 次安装34 周前更新
代码仓库

关于 moodle5-theme

面向 Moodle 5.1.3 及以上版本的主题开发 Skill，帮助开发者创建或修改基于 Boost 的主题。它按任务提供参考指引，并覆盖 SCSS、Mustache 模板、设置和渲染器等开发环节。

主要功能

  1. 01新主题脚手架生成
  2. 02SCSS 与样式定制
  3. 03Mustache 模板覆盖
  4. 04管理设置与渲染器定制
  5. 05Bootstrap 5 迁移与缓存排查

适用场景

  1. 01从头搭建 Moodle 主题
  2. 02调整主题颜色和页面布局
  3. 03添加影响 SCSS 的管理设置

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nicolasflores9/skills --skill moodle5-theme

安装后在 Claude Code 中输入/moodle5-theme确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
references/
bootstrap5-migration.md
debugging.md
renderers.md
scss-pipeline.md
settings.md
structure.md
templates.md

详细介绍

Moodle 5 主题开发

用于创建和修改基于 Boost（Bootstrap 5.3）的 Moodle 5.1.3+ 主题的技能。

快速背景

Moodle 5.1+ 使用 Bootstrap 5.3，主题位于 public/theme/ 下，并会自动继承父主题的布局。SCSS 流水线分为三个阶段：pre-SCSS → main（预设）→ extra-SCSS。模板使用 Mustache，并支持 Moodle 专用辅助函数（{{#str}}、{{#pix}}、{{#js}}）。

工作流

1. 了解用户需求

生成代码前，请先确定：

  • 新建还是修改现有主题？ 如果是新建，请生成完整的脚手架。如果是修改现有主题，请询问主题名称（Frankenstyle 组件 theme_name）。
  • 用户想修改什么？ 样式/颜色（→ SCSS）、页面结构（→ 模板/布局）、管理员选项（→ 设置）、渲染行为（→ 渲染器）、图标/图片（→ pix_core/pix_plugins）。
  • 主题名称：将在所有文件中使用的 Frankenstyle 标识符（theme_mytheme）。
2. 查阅相应参考资料

根据修改类型，在生成代码前阅读对应的参考文件：

任务参考文件
创建新主题（脚手架）references/structure.md
修改样式、颜色、SCSSreferences/scss-pipeline.md
覆盖 Mustache 模板references/templates.md
添加/修改管理员设置references/settings.md
自定义渲染器或输出references/renderers.md
从 Bootstrap 4 迁移到 5references/bootstrap5-migration.md
缓存问题或调试references/debugging.md

只阅读与当前任务相关的文件。对于涉及多个方面的任务（例如，添加会影响 SCSS 的颜色设置），请阅读两份文件。

3. 生成可用代码

生成文件时，请遵循以下规则：

文件结构：所有主题都位于 public/theme/<name>/ 下。始终生成完整路径，让用户清楚每个文件应放置的位置。

必需文件（新建主题时）：

  • version.php — 插件元数据
  • config.php — 主题配置（继承、布局、SCSS 回调）
  • lang/en/theme_<name>.php — 最少语言字符串
  • lib.php — SCSS 回调和辅助函数

代码规范：

  • 每个 PHP 文件都以 <?php 开头，随后是 defined('MOODLE_INTERNAL') || die();（以 <?php require_once... 开头的布局文件除外）
  • 渲染器类使用命名空间 theme_<name>\output
  • 语言字符串始终放在语言文件中，绝不硬编码
  • 预设中的 SCSS 变量使用 !default；pre-SCSS 中不使用 !default，以强制覆盖
  • Mustache 模板包含 GPL 许可证声明模板和 @template 注释

SCSS — 编译顺序： 顺序至关重要，所有生成的 SCSS 都必须遵循以下三个阶段：

  1. prescsscallback — 覆盖 Bootstrap !default 的变量
  2. $THEME->scss — 带有 @import "moodle" 的主预设
  3. extrascsscallback — 具有最高层叠优先级的最终规则

Mustache 模板 — 覆盖： 要覆盖核心或插件模板，主题中的路径必须为： theme/<name>/templates/<component>/<template>.mustache

其中 <component> 是 Frankenstyle 名称：core、mod_quiz、block_myoverview 等。

设置 — 缓存失效： 每个会影响 CSS/SCSS 的设置都必须包含：

$setting->set_updatedcallback('theme_reset_all_caches');
4. Bootstrap 5.3 — 现代代码

所有生成的代码都必须使用 Bootstrap 5.3 语法：

  • 逻辑类：.ms-*、.me-*、.ps-*、.pe-*、.text-start、.text-end
  • 带 bs 前缀的数据属性：data-bs-toggle、data-bs-target
  • 不使用 jQuery：直接导入 Bootstrap 模块
  • 使用 .visually-hidden 替代 .sr-only

除非用户明确要求向后兼容，否则不要生成 Bootstrap 4 语法的代码。

5. 交付

生成完整、可正常使用的文件，并包含：

  • 文件在 Moodle 安装目录中的确切放置路径
  • 解释非显而易见部分的内联注释
  • 适用时的安装后说明（清除缓存、递增版本号）

修改 SCSS 或模板时，提醒用户清除缓存：

php admin/cli/purge_caches.php --theme
# Or more specifically:
php admin/cli/build_theme_css.php --themes=<name> --verbose

交互示例

用户：“我想在主题设置中添加一个自定义颜色字段，用于更改页眉颜色”

流程：

  1. 阅读 references/settings.md 和 references/scss-pipeline.md
  2. 在 settings.php 中生成 admin_setting_configcolourpicker 设置项
  3. 在 lang/en/theme_<name>.php 中添加语言字符串
  4. 在 lib.php 的 get_pre_scss() 中将该设置映射到 SCSS 变量
  5. 在 scss/post.scss 中创建 SCSS 规则，使用该变量设置页眉颜色
  6. 添加 set_updatedcallback('theme_reset_all_caches')

评论

支持 Markdown