尧图网页设计 
教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载本文以 Moodle 组件库public/admin/tool/componentlibrary中的 Notifications 文档 为骨架结合core_renderer、core/notification模块与四类 Mustache 模板的源码实现系统讲解 Moodle 页面通知的渲染机制、类型映射、PHP/JavaScript 两种触发方式以及 Toast 轻提示的配置方法。读完本文你将能够在 Moodle 主题与插件开发中熟练输出规范、可访问的通知提示并能根据需求定制其样式与行为。工作机制通知与动作耦合的即时反馈Moodle 的通知Notification与用户动作action紧密耦合用于对动作结果给出即时反馈。从 notifications.md 的定位来看Moodle 通知有两条典型的展示路径PHP 渲染的通知显示在可操作内容的正上方跟随页面流自然出现适合表单提交、数据保存等同步操作的结果反馈JavaScript 触发的通知覆盖在用户界面上层overlay适合 AJAX 操作、模态确认等需要悬浮提示的场景。这一设计理念在代码层面也得到了印证public/lib/amd/src/notification.js中定义了通知的默认渲染区域#user-notificationsnotificationRegionId并通过Selectors.fallbackRegionParents依次回退到#region-main、[rolemain]与body寻找可用的父容器见 notification.js。也就是说JS 通知会尽量贴近主内容区顶部插入而非随意飘在页面上。基本结构示例Alert 通知的 DOM 骨架文档给出了一个最简通知的 HTML 示例其核心是一个带alert语义类与关闭按钮的divdiv classalert alert-info alert-block fade in foo bar rolealert>$OUTPUT-notification(message, info);方法签名定义于 core_renderer.phppublic function notification( $message, $type null, $closebutton true, ?string $title null, ?string $titleicon null )参数说明$message通知正文模板渲染时会经clean_text()清洗见 notification.php$type通知类型接受下表映射源码见 core_renderer.php传入类型实际类型对应模板 / alert 类successNOTIFY_SUCCESScore/notification_success/alert-successinfoNOTIFY_INFOcore/notification_info/alert-infowarningNOTIFY_WARNINGcore/notification_warning/alert-warningerrorNOTIFY_ERRORcore/notification_error/alert-dangernotifyproblem/notifytiny/notifyerror旧版NOTIFY_ERROR同 errornotifysuccess旧版NOTIFY_SUCCESS同 successnotifymessage/notifyredirect/redirectmessage旧版NOTIFY_INFO同 info从源码看若传入的类型不含空格且不匹配任何已知映射则会被当作附加 CSS 类extraclasses处理若含空格则按空格拆分后逐一识别core_renderer.php。$type缺省时notification类构造器会回退为NOTIFY_ERRORnotification.php。$closebutton是否显示关闭按钮默认true$title通知标题可选渲染为 alert 头部的h6标题块$titleicon标题图标格式为i/circleinfo, core或单组件时的i/circleinfo例如i/circleinfo, core会被解析为 icon 名i/circleinfo componentcorenotification.php。notification()内部会创建notification值对象把$type映射为模板名后调用render_from_template()完成渲染与之对应的底层类是 public/lib/classes/output/notification.php其中的get_template_name()方法给出了四类模板的最终映射表notification.php未知类型一律回退到 error 模板。对于需要更精细控制的场景也可以直接构造对象并链式调用设置器$notification new \core\output\notification(你的消息, \core\output\notification::NOTIFY_SUCCESS); $notification-set_show_closebutton(true); $notification-set_announce(true); $notification-set_extra_classes([foo, bar]); echo $OUTPUT-render($notification);其中set_announce()控制是否以rolealert形式向屏幕阅读器宣告notification.phpset_show_closebutton()控制关闭按钮notification.php。通知模板四种类型与可注入变量四种类型模板都继承自统一的基础模板core/notification_base仅通过覆写区块变量alertclass区分视觉类型{{ core/notification_base}} {{$alertclass}}alert-info{{/alertclass}} {{/core/notification_base}}notification_info.mustache→alert-infonotification_success.mustache→alert-successnotification_warning.mustache→alert-warningnotification_error.mustache→alert-danger组件库文档为三种非 info 模板各给出了一组可直接用于调试的示例上下文 JSON例如{ message: Your pants are on awesome!, closebutton: 1, announce: 1, extraclasses: foo bar }基础模板 notification_base.mustache 完整支持以下上下文变量变量类型作用messagestring已清洗通知正文使用三花括号{{{message}}}输出 HTMLextraclassesstring追加到alert上的附加 CSS 类如foo barclosebuttonbool为真时输出 Bootstrap 关闭按钮btn-close并为alert追加alert-dismissible类announcebool为真时输出rolealert>div classalert alert-info alert-block fade in foo bar alert-dismissible rolealert>require( [ core/notification ], function( Notification ) { document.querySelector([data-actionshownotification]).addEventListener(click, function() { Notification.alert(Notification message, Extra content for notification message); }); });对应页面中的触发按钮button classbtn btn-secondary>const notificationTypes { success: core/notification_success, info: core/notification_info, warning: core/notification_warning, error: core/notification_error, };一次典型的 JS 页内通知调用require([core/notification], function(Notification) { Notification.addNotification({ message: 保存成功, type: success, closebutton: true, announce: true }); });addNotification会通过core/templates的renderForPromise()渲染模板并借助Pending机制保证渲染完成后才触发后续动作notification.js。需要特别留意的是源码注释明确说明addNotification()不会把通知写入会话它只负责当前页面的即时展示会话级通知请走 PHP 侧或服务端持久化路径。Toast 通知core/toast轻提示Toast 是自动消失的 snackbar 式轻提示用于比完整 alert 更轻量的反馈。文档示例button classbtn btn-secondary>require( [ core/toast ], function( Toast ) { document.querySelector([data-actionshowtoastnotification]).addEventListener(click, function() { Toast.add(Toast message); }); });Toast.add(message, configuration)的完整配置项源码注释见 toast.js配置项默认值说明typeinfo取值success、info、warning、danger对应toast-success等类closeButtonfalse是否显示关闭按钮autohidetrue是否自动消失delay4000自动消失前的毫秒数visuallyHiddenfalse是否仅对屏幕阅读器播报设置为true时强制autohide true且关闭按钮被禁用见 toast.jstitle/subtitle无可选标题与副标题渲染进.toast-header带配置的进阶用法require([core/toast], function(Toast) { Toast.add(示例字符串, { type: warning, autohide: false, closeButton: true, }); });底层实现上core/toast首先通过addToastRegion()把 wrapper 模板.toast-wrapper容器注入页面然后渲染 message 模板该模板生成data-bs-delay、data-bs-autohide等属性并在{{#js}}区块内加载theme_boost/bootstrap/toast完成展示同时在hidden.bs.toast事件后把节点从 DOM 移除见 message.mustache。实践要点小结选择渲染路径同步的、随页面刷新的结果反馈优先用 PHP$OUTPUT-notification()异步操作或需要悬浮的反馈用core/notification的addNotification()轻量、短暂、自动消失的提示用core/toast。保持模板一致性不要手写裸alert容器应始终复用core/notification_*四类模板或基于core/notification_base继承定制以保持主题切换后的视觉统一。注意可访问性默认announce为真会为容器添加rolealert使用set_announce(false)或上下文announce: 0可关闭读屏器播报避免对普通提示造成干扰。消息清洗PHP 侧export_for_template()会对message调用clean_text()传入 HTML 前请确保来源可信或先经格式清洗。旧类型兼容若在旧代码中见到notifyproblem、notifysuccess、notifymessage等类型名它们仍会被映射到当前的四种类型可直接沿用或升级为新写法。上述全部结论均可回到组件库文档 notifications.md 及其对应的 core_renderer.php、notification.php、notification.js、toast.js 与 lib/templates 下的 Mustache 模板中逐一验证。赞分享教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载相关推荐Moodle Collapsable Sections 组件完全指南从 PHP 渲染到 Mustache 与 JS 控制Moodle Collapsable Sections 组件完全指南从 PHP 渲染到 Mustache 与 JS 控制 导读 Collapsable sec教育后端前端Moodle 组件库中 Mustache 模板的文档化与实时渲染指南Moodle 组件库中 Mustache 模板的文档化与实时渲染指南 本文基于 moodle templates.md https://link.gitcode教育后端前端Moodle 图标系统实战指南从 Font Awesome 映射、Mustache/ PHP 渲染到主题定制Moodle 图标系统实战指南从 Font Awesome 映射、Mustache/ PHP 渲染到主题定制 Moodle 的绝大多数界面图标都由 Font教育后端前端上一篇HelloGitHub 第 23 期精选20 个开源项目覆盖 C 到 AI 十大领域的技术解读下一篇yuzu模拟器金手指终极指南5种实用方法快速掌握游戏参数修改创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Moodle 组件库指南：Notifications 通知系统全解析（PHP 渲染、Mustache 模板与 JS/Toast 实现）
教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载本文以 Moodle 组件库public/admin/tool/componentlibrary中的 Notifications 文档 为骨架结合core_renderer、core/notification模块与四类 Mustache 模板的源码实现系统讲解 Moodle 页面通知的渲染机制、类型映射、PHP/JavaScript 两种触发方式以及 Toast 轻提示的配置方法。读完本文你将能够在 Moodle 主题与插件开发中熟练输出规范、可访问的通知提示并能根据需求定制其样式与行为。工作机制通知与动作耦合的即时反馈Moodle 的通知Notification与用户动作action紧密耦合用于对动作结果给出即时反馈。从 notifications.md 的定位来看Moodle 通知有两条典型的展示路径PHP 渲染的通知显示在可操作内容的正上方跟随页面流自然出现适合表单提交、数据保存等同步操作的结果反馈JavaScript 触发的通知覆盖在用户界面上层overlay适合 AJAX 操作、模态确认等需要悬浮提示的场景。这一设计理念在代码层面也得到了印证public/lib/amd/src/notification.js中定义了通知的默认渲染区域#user-notificationsnotificationRegionId并通过Selectors.fallbackRegionParents依次回退到#region-main、[rolemain]与body寻找可用的父容器见 notification.js。也就是说JS 通知会尽量贴近主内容区顶部插入而非随意飘在页面上。基本结构示例Alert 通知的 DOM 骨架文档给出了一个最简通知的 HTML 示例其核心是一个带alert语义类与关闭按钮的divdiv classalert alert-info alert-block fade in foo bar rolealert>$OUTPUT-notification(message, info);方法签名定义于 core_renderer.phppublic function notification( $message, $type null, $closebutton true, ?string $title null, ?string $titleicon null )参数说明$message通知正文模板渲染时会经clean_text()清洗见 notification.php$type通知类型接受下表映射源码见 core_renderer.php传入类型实际类型对应模板 / alert 类successNOTIFY_SUCCESScore/notification_success/alert-successinfoNOTIFY_INFOcore/notification_info/alert-infowarningNOTIFY_WARNINGcore/notification_warning/alert-warningerrorNOTIFY_ERRORcore/notification_error/alert-dangernotifyproblem/notifytiny/notifyerror旧版NOTIFY_ERROR同 errornotifysuccess旧版NOTIFY_SUCCESS同 successnotifymessage/notifyredirect/redirectmessage旧版NOTIFY_INFO同 info从源码看若传入的类型不含空格且不匹配任何已知映射则会被当作附加 CSS 类extraclasses处理若含空格则按空格拆分后逐一识别core_renderer.php。$type缺省时notification类构造器会回退为NOTIFY_ERRORnotification.php。$closebutton是否显示关闭按钮默认true$title通知标题可选渲染为 alert 头部的h6标题块$titleicon标题图标格式为i/circleinfo, core或单组件时的i/circleinfo例如i/circleinfo, core会被解析为 icon 名i/circleinfo componentcorenotification.php。notification()内部会创建notification值对象把$type映射为模板名后调用render_from_template()完成渲染与之对应的底层类是 public/lib/classes/output/notification.php其中的get_template_name()方法给出了四类模板的最终映射表notification.php未知类型一律回退到 error 模板。对于需要更精细控制的场景也可以直接构造对象并链式调用设置器$notification new \core\output\notification(你的消息, \core\output\notification::NOTIFY_SUCCESS); $notification-set_show_closebutton(true); $notification-set_announce(true); $notification-set_extra_classes([foo, bar]); echo $OUTPUT-render($notification);其中set_announce()控制是否以rolealert形式向屏幕阅读器宣告notification.phpset_show_closebutton()控制关闭按钮notification.php。通知模板四种类型与可注入变量四种类型模板都继承自统一的基础模板core/notification_base仅通过覆写区块变量alertclass区分视觉类型{{ core/notification_base}} {{$alertclass}}alert-info{{/alertclass}} {{/core/notification_base}}notification_info.mustache→alert-infonotification_success.mustache→alert-successnotification_warning.mustache→alert-warningnotification_error.mustache→alert-danger组件库文档为三种非 info 模板各给出了一组可直接用于调试的示例上下文 JSON例如{ message: Your pants are on awesome!, closebutton: 1, announce: 1, extraclasses: foo bar }基础模板 notification_base.mustache 完整支持以下上下文变量变量类型作用messagestring已清洗通知正文使用三花括号{{{message}}}输出 HTMLextraclassesstring追加到alert上的附加 CSS 类如foo barclosebuttonbool为真时输出 Bootstrap 关闭按钮btn-close并为alert追加alert-dismissible类announcebool为真时输出rolealert>div classalert alert-info alert-block fade in foo bar alert-dismissible rolealert>require( [ core/notification ], function( Notification ) { document.querySelector([data-actionshownotification]).addEventListener(click, function() { Notification.alert(Notification message, Extra content for notification message); }); });对应页面中的触发按钮button classbtn btn-secondary>const notificationTypes { success: core/notification_success, info: core/notification_info, warning: core/notification_warning, error: core/notification_error, };一次典型的 JS 页内通知调用require([core/notification], function(Notification) { Notification.addNotification({ message: 保存成功, type: success, closebutton: true, announce: true }); });addNotification会通过core/templates的renderForPromise()渲染模板并借助Pending机制保证渲染完成后才触发后续动作notification.js。需要特别留意的是源码注释明确说明addNotification()不会把通知写入会话它只负责当前页面的即时展示会话级通知请走 PHP 侧或服务端持久化路径。Toast 通知core/toast轻提示Toast 是自动消失的 snackbar 式轻提示用于比完整 alert 更轻量的反馈。文档示例button classbtn btn-secondary>require( [ core/toast ], function( Toast ) { document.querySelector([data-actionshowtoastnotification]).addEventListener(click, function() { Toast.add(Toast message); }); });Toast.add(message, configuration)的完整配置项源码注释见 toast.js配置项默认值说明typeinfo取值success、info、warning、danger对应toast-success等类closeButtonfalse是否显示关闭按钮autohidetrue是否自动消失delay4000自动消失前的毫秒数visuallyHiddenfalse是否仅对屏幕阅读器播报设置为true时强制autohide true且关闭按钮被禁用见 toast.jstitle/subtitle无可选标题与副标题渲染进.toast-header带配置的进阶用法require([core/toast], function(Toast) { Toast.add(示例字符串, { type: warning, autohide: false, closeButton: true, }); });底层实现上core/toast首先通过addToastRegion()把 wrapper 模板.toast-wrapper容器注入页面然后渲染 message 模板该模板生成data-bs-delay、data-bs-autohide等属性并在{{#js}}区块内加载theme_boost/bootstrap/toast完成展示同时在hidden.bs.toast事件后把节点从 DOM 移除见 message.mustache。实践要点小结选择渲染路径同步的、随页面刷新的结果反馈优先用 PHP$OUTPUT-notification()异步操作或需要悬浮的反馈用core/notification的addNotification()轻量、短暂、自动消失的提示用core/toast。保持模板一致性不要手写裸alert容器应始终复用core/notification_*四类模板或基于core/notification_base继承定制以保持主题切换后的视觉统一。注意可访问性默认announce为真会为容器添加rolealert使用set_announce(false)或上下文announce: 0可关闭读屏器播报避免对普通提示造成干扰。消息清洗PHP 侧export_for_template()会对message调用clean_text()传入 HTML 前请确保来源可信或先经格式清洗。旧类型兼容若在旧代码中见到notifyproblem、notifysuccess、notifymessage等类型名它们仍会被映射到当前的四种类型可直接沿用或升级为新写法。上述全部结论均可回到组件库文档 notifications.md 及其对应的 core_renderer.php、notification.php、notification.js、toast.js 与 lib/templates 下的 Mustache 模板中逐一验证。赞分享教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载相关推荐Moodle Collapsable Sections 组件完全指南从 PHP 渲染到 Mustache 与 JS 控制Moodle Collapsable Sections 组件完全指南从 PHP 渲染到 Mustache 与 JS 控制 导读 Collapsable sec教育后端前端Moodle 组件库中 Mustache 模板的文档化与实时渲染指南Moodle 组件库中 Mustache 模板的文档化与实时渲染指南 本文基于 moodle templates.md https://link.gitcode教育后端前端Moodle 图标系统实战指南从 Font Awesome 映射、Mustache/ PHP 渲染到主题定制Moodle 图标系统实战指南从 Font Awesome 映射、Mustache/ PHP 渲染到主题定制 Moodle 的绝大多数界面图标都由 Font教育后端前端上一篇HelloGitHub 第 23 期精选20 个开源项目覆盖 C 到 AI 十大领域的技术解读下一篇yuzu模拟器金手指终极指南5种实用方法快速掌握游戏参数修改创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考