如何让Moodle课程横幅自动获取课程名称与教师信息

我在Moodle平台创建了多门课程，每门课程都带有默认横幅（如图所示）：

横幅中的黄色文本应为课程名称，白色文本为授课教师姓名。目前我需要手动为每门课程制作横幅，曾搜索动态横幅相关内容，但仅找到演示可行性的视频，未获取具体实现方法。当前使用的横幅代码如下：

<div id="Aristides"></div>

<script>
    var largura = window.screen.width;

    var turma = 'Turma de Teste';

    var professor = 'Professor de Teste';

    var imgSvg = ''; <!-- any svg, left empty for better question size-->


    if (largura > 1300) {
        var element = document.getElementById('Aristides');
        element.innerHTML = '<div style="border-radius: 10px; background: linear-gradient(81deg, rgba(250,157,8,1) 3%, rgba(175,109,3,1) 5%, rgba(14,86,126,1) 5.1%, rgba(95,188,236,1) 47%, rgba(82,164,207,1) 50%, rgba(95,188,236,1) 50.1%, rgba(14,86,126,1) 94.9%, rgba(175,109,3,1) 95%, rgba(250,157,8,1) 97%); width: 100%; display: flex;"><a href="https://storyset.com/business" style="max-width: 450px; min-width: 450px; padding-left: 5%;">' + imgSvg + '</a><div style="display: flex; flex-direction: column; width: 100%; justify-content: space-between; max-height: 450px;"><h1 style="color: #fff; font-weight: bold; text-align: center; margin-top: 40px; font-size: 52px; font-family: Cambria, Cochin, Georgia, Times, serif; text-shadow: 2px 2px 5px rgb(0,0,0,0.3);"> Bem-vindo(a) à Sala Virtual! </h1><h2 style="color: rgba(255,185,8); font-weight: bold; text-align: center; justify-content: center; margin-bottom: 40px; font-size: 38px; font-family: Cambria, Cochin, Georgia, Times, serif; text-shadow: 2px 2px 5px rgb(0,0,0,0.3);">' + turma + '</h2><h3 style="color: #fff; font-weight: bold; text-align: center; margin-bottom: 50px; font-size: 22px; font-family: Gill Sans, sans-serif; text-shadow: 2px 2px 5px rgb(0,0,0,0.3);"> Professor(a): ' + professor + '</h3></div></div>'
    } else {
        var element = document.getElementById('Aristides');
        element.innerHTML = '<div style="border-radius: 10px; background: linear-gradient(175deg, rgba(250,157,8,1) 3%, rgba(175,109,3,1) 5%, rgba(14,86,126,1) 5.3%, rgba(95,188,236,1) 47%, rgba(82,164,207,1) 50%, rgba(95,188,236,1) 50.3%, rgba(14,86,126,1) 94.7%, rgba(175,109,3,1) 95%, rgba(250,157,8,1) 97%); width: 100%; display: flex; flex-direction: column; align-items: center;"><a href="https://storyset.com/business" style="max-width: 268px; min-width: 270px;">' + imgSvg + '</a><div style="display: flex; flex-direction: column; max-width: 260px; justify-content: space-between; max-height: 450px;"><h1 style="color: #fff; font-weight: bold; text-align: center; margin-top: 20px; font-size: 30px; font-family: Cambria, Cochin, Georgia, Times, serif;"> Bem-vindo(a) à Sala Virtual! </h1><h2 style="color: rgba(255,185,8); font-weight: bold; text-align: center; justify-content: center; margin-bottom: 20px; font-size: 20px; font-family: Cambria, Cochin, Georgia, Times, serif;">' + turma + '</h2><h3 style="color: #fff; font-weight: bold; text-align: center; margin-bottom: 25px; font-size: 13px; font-family: Gill Sans, sans-serif;"> Professor(a): ' + professor + '</h3></div></div>'
    }
</script>

请问是否有方法让横幅自动获取对应课程的完整名称与教师姓名并显示在指定位置，同时保持当前横幅样式为默认设置？

可以通过两种方式实现自动获取课程名称和教师信息，同时保留原有横幅样式：

方法一：利用Moodle内置全局变量与页面元素提取（快速实现） #

Moodle在课程页面会加载全局变量M.course，其中包含课程的完整名称；教师信息可以通过页面中的教师列表元素提取。修改原有脚本，替换硬编码的变量即可：

<div id="Aristides"></div>

<script>
// 等待页面加载完成后执行，确保能获取到页面元素
document.addEventListener('DOMContentLoaded', function() {
    var largura = window.screen.width;

    // 从Moodle全局变量获取课程完整名称
    var turma = M.course?.fullname || 'Turma não encontrada';

    // 提取教师姓名（支持多个教师，用逗号分隔）
    var professorElements = document.querySelectorAll('.teachers .userinfo .fullname');
    var professorList = Array.from(professorElements).map(el => el.textContent.trim());
    var professor = professorList.length > 0 ? professorList.join(', ') : 'Professor(a) não encontrado(a)';

    var imgSvg = ''; <!-- any svg, left empty for better question size-->

    if (largura > 1300) {
        var element = document.getElementById('Aristides');
        element.innerHTML = '<div style="border-radius: 10px; background: linear-gradient(81deg, rgba(250,157,8,1) 3%, rgba(175,109,3,1) 5%, rgba(14,86,126,1) 5.1%, rgba(95,188,236,1) 47%, rgba(82,164,207,1) 50%, rgba(95,188,236,1) 50.1%, rgba(14,86,126,1) 94.9%, rgba(175,109,3,1) 95%, rgba(250,157,8,1) 97%); width: 100%; display: flex;"><a href="https://storyset.com/business" style="max-width: 450px; min-width: 450px; padding-left: 5%;">' + imgSvg + '</a><div style="display: flex; flex-direction: column; width: 100%; justify-content: space-between; max-height: 450px;"><h1 style="color: #fff; font-weight: bold; text-align: center; margin-top: 40px; font-size: 52px; font-family: Cambria, Cochin, Georgia, Times, serif; text-shadow: 2px 2px 5px rgb(0,0,0,0.3);"> Bem-vindo(a) à Sala Virtual! </h1><h2 style="color: rgba(255,185,8); font-weight: bold; text-align: center; justify-content: center; margin-bottom: 40px; font-size: 38px; font-family: Cambria, Cochin, Georgia, Times, serif; text-shadow: 2px 2px 5px rgb(0,0,0,0.3);">' + turma + '</h2><h3 style="color: #fff; font-weight: bold; text-align: center; margin-bottom: 50px; font-size: 22px; font-family: Gill Sans, sans-serif; text-shadow: 2px 2px 5px rgb(0,0,0,0.3);"> Professor(a): ' + professor + '</h3></div></div>'
    } else {
        var element = document.getElementById('Aristides');
        element.innerHTML = '<div style="border-radius: 10px; background: linear-gradient(175deg, rgba(250,157,8,1) 3%, rgba(175,109,3,1) 5%, rgba(14,86,126,1) 5.3%, rgba(95,188,236,1) 47%, rgba(82,164,207,1) 50%, rgba(95,188,236,1) 50.3%, rgba(14,86,126,1) 94.7%, rgba(175,109,3,1) 95%, rgba(250,157,8,1) 97%); width: 100%; display: flex; flex-direction: column; align-items: center;"><a href="https://storyset.com/business" style="max-width: 268px; min-width: 270px;">' + imgSvg + '</a><div style="display: flex; flex-direction: column; max-width: 260px; justify-content: space-between; max-height: 450px;"><h1 style="color: #fff; font-weight: bold; text-align: center; margin-top: 20px; font-size: 30px; font-family: Cambria, Cochin, Georgia, Times, serif;"> Bem-vindo(a) à Sala Virtual! </h1><h2 style="color: rgba(255,185,8); font-weight: bold; text-align: center; justify-content: center; margin-bottom: 20px; font-size: 20px; font-family: Cambria, Cochin, Georgia, Times, serif;">' + turma + '</h2><h3 style="color: #fff; font-weight: bold; text-align: center; margin-bottom: 25px; font-size: 13px; font-family: Gill Sans, sans-serif;"> Professor(a): ' + professor + '</h3></div></div>'
    }
});
</script>

关键修改说明： #

• 添加DOMContentLoaded事件监听，确保页面元素加载完成后再提取信息，避免获取失败
• 用M.course.fullname替代硬编码的课程名称，这是Moodle官方提供的全局变量，可靠性更高
• 通过document.querySelectorAll提取页面中所有教师的姓名，处理成逗号分隔的列表，同时添加默认值防止获取失败

方法二：通过Moodle主题或插件自定义（更稳定） #

如果需要更稳定的实现（避免页面结构变化导致元素提取失败），可以：

1. 修改主题模板：在课程页面的模板文件中，直接将课程名称和教师信息作为变量注入到HTML中，再通过脚本调用
2. 开发小插件：创建一个简单的本地插件，利用Moodle的API获取课程和教师数据，动态生成横幅

这种方式需要一定的Moodle开发基础，但适配性和稳定性更强。

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