Moodle CMS自定义主题技术问询：导航模板、样式控制及框架替换

一、创建自定义导航模板并实现样式完全控制 #

Moodle基于Mustache模板系统管理页面组件，自定义导航需按以下步骤操作：

1. 定位目标模板
   核心导航模板存于lib/templates/navigation目录，父主题（如Boost）的导航模板在其templates目录下（比如navbar.mustache）。

2. 复制并修改模板
   在你的自定义主题templates目录下创建同名文件（如templates/navbar.mustache），复制父主题或核心模板内容后，按需调整HTML结构，比如添加自定义类、增减导航节点。

3. 添加动态渲染逻辑（可选）
   若需动态调整导航内容，在主题lib.php中实现专属渲染函数（替换dpu为你的主题名）：

function theme_dpu_render_navigation(global_navigation $navigation, $options = null) {
    // 移除不需要的节点
    $navigation->remove_node('home');
    // 添加自定义导航节点
    $custom_node = navigation_node::create(
        '自定义页面',
        new moodle_url('/local/custompage/index.php'),
        navigation_node::TYPE_CUSTOM,
        null,
        'custom_page',
        new pix_icon('t/custom', '')
    );
    $navigation->add_node($custom_node);
    return parent::theme_boost_render_navigation($navigation, $options);
}

4. 完全控制样式

• 在scss/post.scss中直接覆盖默认导航类，或给自定义元素添加专属类：

.custom-navbar {
    background-color: #2c3e50;
    .custom-nav-link {
        color: #ecf0f1;
        &:hover {
            color: #3498db;
        }
    }
}

• 确保config.php中设置正确的父主题（如'parents' => ['boost']）并启用SCSS编译：'enable_scss' => true。

二、主题模板的来源及父主题渲染逻辑 #

1. 模板来源

• 核心模板：Moodle官方提供的通用组件模板，存于lib/templates，覆盖表单、消息提示等基础元素。
• 父主题模板：自定义主题继承的父主题（如Boost）提供的主题专属模板，存于父主题templates目录。
• 自定义主题模板：你创建的templates目录下的文件，优先级最高，会直接覆盖核心和父主题的同名模板。

2. 父主题渲染逻辑
   Moodle遵循模板优先级链：自定义主题模板 > 父主题模板 > 核心模板。渲染组件时，系统按以下顺序查找：

• 先检查当前自定义主题的templates目录；
• 若未找到，查找父主题的templates目录；
• 最后使用核心模板。
  你可通过Mustache语法{{> template_name}}引入父主题模板片段，或完全替换整个模板。

三、禁用Bootstrap并替换为Tailwind CSS #

可以实现，但需处理核心及插件对Bootstrap类的依赖：

1. 禁用Bootstrap加载
   在主题lib.php中重写SCSS加载函数，移除Bootstrap引入：

function theme_dpu_get_main_scss_content($theme) {
    // 不加载父主题的Bootstrap SCSS
    $scss = '';
    // 加载自定义SCSS
    $scss .= file_get_contents($theme->dir . '/scss/post.scss');
    return $scss;
}

2. 引入Tailwind CSS

• 在templates/head.mustache中添加Tailwind的CDN链接或本地文件：

<script src="https://cdn.tailwindcss.com"></script>
<!-- 本地引入示例 -->
<link rel="stylesheet" href="{{wwwroot}}/theme/dpu/tailwind.css">

• 若用本地编译，配置tailwind.config.js扫描主题模板：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './templates/**/*.mustache',
    './lib.php'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 兼容Bootstrap类

• 批量替换模板中的Bootstrap类为Tailwind类，比如class="container"改为class="container mx-auto"；
• 对核心插件中无法修改的Bootstrap类，在SCSS中添加兼容样式：

.container {
    @apply mx-auto;
}
.row {
    @apply flex flex-wrap;
}

内容的提问来源于stack exchange，提问作者Savin Nikita