教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载通知徽章Notification Badges是 Moodle 中用于在按钮、表格行、菜单项等界面元素旁展示待评分数量未读消息数等简明状态信息的 UI 组件。本文以 componentlibrary 组件文档 为骨架结合 core_renderer.php 与 badge 枚举 的源码实现完整讲解徽章的使用方法、六种内置样式、PHP 渲染调用方式以及如何在 Behat 测试与屏幕阅读器中正确处理徽章文本。什么是通知徽章通知徽章Notification badge是一种小巧的胶囊状pill状态指示器用于向用户简洁地展示信息或状态。它的典型使用场景包括在评分Grade按钮旁显示有 N 份作业待评分在导航菜单或表格行中标记存在新的、需要用户关注的信息在列表项右侧显示数量统计让用户一眼感知需要处理的条目数。与完整的警告框alert不同通知徽章只承担数量/状态标记这一单一职责通常以1、(2)之类的短文本或短标签形式出现并内嵌在按钮、链接、列表项等其他组件中。最简 HTML 用法原文档给出了一个内嵌在按钮中的经典示例徽章本身是一个span元素通过 Bootstrap 的badge、rounded-pill、text-bg-*系列类名完成外观渲染。button classbtn btn-outline-secondary Grade span classms-1 badge rounded-pill text-bg-primary titleNeeds grading span classvisually-hidden (/span1span classvisually-hidden)/span /span /button结构拆解部分说明ms-1在徽章与左侧文字之间留出间距margin-startbadge rounded-pillBootstrap 徽章基础样式 圆角胶囊外形text-bg-primary使用 primary 主题色的背景与文字组合titleNeeds grading悬停提示向用户解释该数字含义visually-hidden的括号仅供屏幕阅读器朗读的左右括号视觉上不可见详见下文无障碍实现原理在 PHP 中使用notice_badge()方法虽然可以直接手写 HTML但 Moodle 推荐通过core_renderer提供的notice_badge方法生成徽章这样既能保证输出风格统一也能自动处理无障碍相关的括号逻辑。方法签名与参数从源码 core_renderer.php 可以看到方法定义public function notice_badge( string $contents, badge $badgestyle badge::PRIMARY, string $title , ): string三个参数的含义如下contentsstring必填徽章内显示的内容通常是数字或短文本。badgestylecore\output\local\properties\badge可选徽章样式枚举默认为badge::PRIMARYprimary 样式。titlestring可选徽章的title悬停提示属性便于辅助理解徽章含义。需要特别说明的是contents为空字符串时方法会直接返回空串源码第 3029-3031 行因此调用方可以放心地传入($needgrading 0) ? $needgrading : 这类表达式无需自行判断——没有待办数量时徽章自然不渲染不会留下空壳元素。完整 PHP 渲染示例原文档提供了一个结合依赖注入Dependency Injection与action_link的完整示例// 获取核心渲染器通过依赖注入容器。 $renderer \core\di::get(\core\output\renderer_helper::class)-get_core_renderer(); // 将徽章存入变量。 $badge $renderer-notice_badge( contents: ($needgrading 0) ? $needgrading : , title: get_string(numberofsubmissionsneedgrading, assign), badgestyle: \core\output\local\properties\badge::SECONDARY, ); // 把徽章拼进一个链接里并渲染整个链接。 $content new action_link( url: new url(/some/index.php), text: get_string(gradeverb) . $badge, ); echo $renderer-render($content);示例中的关键点获取渲染器\core\di::get(\core\output\renderer_helper::class)-get_core_renderer()是 Moodle 5.0 起推荐的依赖注入写法取代了旧的全局$PAGE-get_renderer()方式。命名参数named argumentscontents:、title:、badgestyle:让调用意图一目了然。字符串拼接进链接get_string(gradeverb) . $badge把徽章 HTML 追加在Grade文本之后使徽章成为链接的一部分可点击、可悬停。条件渲染($needgrading 0) ? $needgrading : 配合方法内部的空值短路逻辑实现了有数据才显示的优雅降级。在真实模块中mod/assign的课程格式总览便使用了numberofsubmissionsneedgrading语言字符串配合徽章展示待评分数量见 assign/lang/en/assign.php、assign/classes/courseformat/overview.php与本示例的调用模式一致。六种内置徽章样式badge 枚举徽章样式由枚举类\core\output\local\properties\badge统一管理。源码 local/properties/badge.php 定义了六个 case并通过classes()方法映射为对应的 CSS 类枚举值样式值外观对应 CSS 类badge::PRIMARYprimary主题主色默认样式badge rounded-pill text-bg-primarybadge::SECONDARYsecondary通常为深灰色badge rounded-pill text-bg-secondarybadge::SUCCESSsuccess通常为绿色badge rounded-pill text-bg-successbadge::DANGERdanger通常为红色badge rounded-pill text-bg-dangerbadge::WARNINGwarning通常为黄色badge rounded-pill text-bg-warningbadge::INFOinfo通常为蓝色badge rounded-pill text-bg-info由于badge是 PHP 8.1 的原生enum badge: stringbacked enumbadgestyle参数既可以直接传入枚举 case如badge::SECONDARY枚举值本身也与 Bootstrap 的text-bg-*语义一一对应从源码的match表达式可以看出映射关系是硬编码且完全确定的。六种样式的 HTML 形态完全一致仅text-bg-*类名不同span classms-1 badge rounded-pill text-bg-primary title…/span !-- Primary -- span classms-1 badge rounded-pill text-bg-secondary title…/span !-- Secondary -- span classms-1 badge rounded-pill text-bg-success title…/span !-- Success -- span classms-1 badge rounded-pill text-bg-danger title…/span !-- Danger -- span classms-1 badge rounded-pill text-bg-warning title…/span !-- Warning -- span classms-1 badge rounded-pill text-bg-info title…/span !-- Info --无障碍实现原理括号如何被朗读细心的读者会发现示例 HTML 中出现了两处visually-hidden包裹的括号span classvisually-hidden (/span1span classvisually-hidden)/span这在视觉上毫无意义visually-hidden使内容不可见却有着明确的无障碍accessibility设计意图。源码 core_renderer.php 中可以看到// We want the badges to be read as content in parentesis. $contents trim($this-visually_hidden_text( ()) . $contents . trim($this-visually_hidden_text()));也就是说notice_badge()会自动为徽章内容包上一对仅供屏幕阅读器朗读的括号。这样视觉障碍用户听到的徽章内容与上下文是分离的、可独立理解的——例如在Grade按钮内屏幕阅读器会把Grade和1分别朗读且1被括号包裹读作 1 (1)从而明确这是按钮内的一个独立数量标记而不是与按钮文字混在一起的乱序文本。补充说明visually_hidden_text()本身也是core_renderer的公开方法见 core_renderer.php它生成一个带visually-hidden类的span是 Moodle 推荐的屏幕阅读器专用文本输出方式。在 Behat 中验证徽章徽章文本的断言需要遵循与无障碍设计一致的思路。原文档特别强调不要将徽章文本与其父元素文本放在一起断言因为 mustache 模板可能引入换行导致组合文本匹配不稳定。应当单独测试徽章文本。以Grade徽章为例推荐的 Behat 写法是And I should see Grade in the Assign with pending grades table_row And I should see (2) in the Assign with pending grades table_row两条断言的含义第一条验证行内存在 Grade 文本父元素文字第二条单独验证行内存在 (2) 文本——注意括号中的数字即徽章内容屏幕阅读器和 Behat 都会把徽章读作括号包裹的文本因此断言时要包含括号。这种父子分离的断言策略既与屏幕阅读器的朗读方式保持一致徽章被读作括号内文本又规避了 mustache 模板在不同场景下引入换行符导致的断言脆弱性是测试徽章相关界面的最佳实践。适用前提与注意事项版本前提notice_badge()与badge枚举为 Moodle 5.0 起新增的 API版权注释与依赖注入示例均指向 5.0 时代升级或移植到旧版本时需确认渲染器是否包含该方法。命名参数示例使用了 PHP 8.0 的命名参数语法请确保运行环境满足 Moodle 对 PHP 版本的要求Moodle 5.x 要求 PHP 8.1同时这也是原生枚举可用性的前提。空值短路contents传入空字符串时徽章完全不输出因此无数据不显示是方法的内置行为无需在调用方重复判断。样式选择默认PRIMARY适合绝大多数场景需要弱化视觉权重时可用SECONDARY表示警告、错误、成功等语义状态时分别对应WARNING、DANGER、SUCCESS请结合界面语义选择避免仅凭喜好配色。通过以上 API 与实战要点开发者即可在任意模块的渲染逻辑中快速产出风格统一、无障碍友好、且可被 Behat 稳定验证的通知徽章。赞分享教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载相关推荐Express 视图渲染与 EJS 模板引擎从服务端渲染到可复用模板的完整实战指南Express 视图渲染与 EJS 模板引擎从服务端渲染到可复用模板的完整实战指南 导读 本文围绕 Node.js/Express 应用中的视图层展开系教育后端前端Shields 静态徽章Static Badges完全指南从 URL 构造到源码实现原理Shields 静态徽章Static Badges完全指南从 URL 构造到源码实现原理 静态徽章是 Shields 项目最基础也最常用的能力之一无需任开发工具后端OpenCode完整指南如何用开源AI编程助手提升你的开发效率OpenCode完整指南如何用开源AI编程助手提升你的开发效率 OpenCode是一款专为开发者设计的开源AI编程助手它能将自然语言指令转化为可执行的代码人工智能AI 应用AI Agent代码智能体CLI开发者工具上一篇新手也能半小时画出第一张神经网络结构图Neural-Network-Architecture-Diagrams 上手全指南下一篇神经网络结构图绘制不用从零开始10分钟快速上手Neural-Network-Architecture-Diagrams创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考