教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载课程卡片Course Cards是 Moodle 中用于在课程集合页面上展示课程摘要的可点击组件帮助用户通过记忆中的课程封面图或课程名称快速浏览并进入课程主页。本文以 public/admin/tool/componentlibrary/content/moodle/components/coursecards.md 的组件设计规范为骨架结合仓库内模板、导出器与调用方源码系统讲解课程卡片的渲染流程、数据字段、使用场景与占位图机制。读完本文你将掌握如何在自己的 Moodle 页面或插件中复用这套组件并理解其底层数据如何由course_summary_exporter供给。课程卡片是什么课程卡片是 Moodle 的组件库Component Library中标记为Available的标准化组件。它用于在课程列表中呈现单个课程的摘要信息并作为用户导航到课程主页course home page的入口。Moodle 的用户仪表盘user dashboard、我的课程总览块myoverview block与星标课程块starred courses block等页面都会通过 JavaScript 或 PHP 加载课程卡片。卡片由一份共享模板渲染即course/templates/coursecard.mustache。文档中强调了两条硬性规范卡片必须始终包含一张图片若后端未提供课程图片则使用占位图placeholder image兜底卡片的图片与标题必须可点击且点击后始终跳转到对应课程页面。课程卡片必须展示的信息根据组件文档每张课程卡片上应当始终展示以下四项内容信息项说明Course image课程封面图缺失时回退为占位图Course full name课程全名Course category课程分类Course favourited 状态该课程是否被用户收藏星标从 coursecard.mustache 的模板源码看这些要素对应以下实现图片区外层a href{{viewurl}} tabindex-1包裹的.card-img-top容器通过内联样式background-image: url({{{courseimage}}})呈现封面图并附带visually-hidden的全名文本保证可访问性全名.aalink.coursename链接内渲染$coursename区块同时引入core_course/favouriteicon局部模板显示收藏图标分类$coursecategory区块配合text-muted muted样式展示收藏状态由导出器输出的isfavourite字段驱动收藏图标渲染。此外模板还支持若干可选增强字段shortname课程简称仅在showshortname为真时展示由站点配置courselistshortnames控制visible课程对学生的可见性不可见时渲染 hidden from students 徽章progress/hasprogress课程学习进度百分比menu卡片操作菜单插槽。模板根节点div classcard course-card mx-1 rolelistitem>div classcard-grid mx-0 row row-cols-1 row-cols-sm-2 row-cols-lg-3 {{$classes}}{{/classes}}>{{ core_course/coursecards }} {{$classes}}flex-nowrap overflow-auto{{/classes}} {{$coursename}} {{{fullname}}} {{/coursename}} {{$coursecategory}} {{#showcoursecategory}} span classvisually-hidden {{#str}}aria:coursecategory, core_course{{/str}} /span div classtext-truncate{{{coursecategory}}}/div {{/showcoursecategory}} {{/coursecategory}} {{$divider}} {{#showcoursecategory}} div classpx-1|/div {{/showcoursecategory}} {{/divider}} {{/ core_course/coursecards }}从模板注释可知view-cards正是为 star 课程块的轮播carousel设计使用flex-nowrap overflow-auto实现横向滚动分类之间以竖线分隔符连接。这就是文档中 A deck of course cards一叠课程卡片与 A single card单张卡片的来源对应关系。数据从哪来course_summary_exporter课程卡片的数据结构并非由模板自行拼装而是由导出器类 course/classes/external/course_summary_exporter.php 统一提供。该类继承自\core\external\exporter将课程对象stdClass序列化为模板可用的上下文数据。在get_other_values()中可以看到卡片各字段的完整产出逻辑protected function get_other_values(renderer_base $output) { global $CFG; $courseimage self::get_course_image($this-data); if (!$courseimage) { $courseimage $output-get_generated_image_for_id($this-data-id); } $progress self::get_course_progress($this-data); $hasprogress false; if ($progress 0 || $progress 0) { $hasprogress true; } $progress floor($progress ?? 0); $coursecategory \core_course_category::get($this-data-category, MUST_EXIST, true); return array( fullnamedisplay get_course_display_name_for_list($this-data), viewurl (new moodle_url(/course/view.php, array(id $this-data-id)))-out(false), courseimage $courseimage, progress $progress, hasprogress $hasprogress, isfavourite $this-related[isfavourite], hidden boolval(get_user_preferences(block_myoverview_hidden_course_ . $this-data-id, 0)), showshortname $CFG-courselistshortnames ? true : false, coursecategory $coursecategory-name ); }关键逻辑逐条解读课程图片回退链先通过get_course_image()从core/course_image缓存读取课程封面图 URL拿不到返回false时调用$output-get_generated_image_for_id($course-id)生成占位图——这正是文档中占位图机制在真实数据流中的落点跳转链接viewurl统一指向/course/view.php?id{$course-id}保证卡片点击总是进入课程主页进度get_course_progress()委托\core_completion\progress::get_course_progress_percentage()计算课程完成百分比收藏状态isfavourite不是课程本身的属性而是通过构造函数传入的related参数注入构造时若未提供则默认false分类通过\core_course_category::get()读取课程分类名称隐藏状态读取用户偏好block_myoverview_hidden_course_{id}用于我的课程总览块的隐藏课程过滤。define_properties()定义了从课程对象直接映射的基础属性id、fullname、shortname、idnumber、summary、summaryformat、startdate、enddate、visible、showactivitydates、showcompletionconditions、pdfexportfontdefine_other_properties()则声明了派生属性fullnamedisplay、viewurl、courseimage、progress、hasprogress、isfavourite、hidden、timeaccess、showshortname、coursecategory。两套属性共同构成模板可用的完整上下文。值得一提的是导出器中get_course_pattern()与coursecolor()两个静态方法已标记为3.7 版本起废弃统一改用$OUTPUT-get_generated_image_for_id()与$OUTPUT-get_generated_color_for_id()新旧调用均生成基于 id 的可复现 SVG/色值。示例数据一张卡片的完整 JSON组件文档给出了可直接用于渲染调试的 JSON 示例deck 模式{ courses: [ { viewurl: https://moodlesite/course/view.php?id2, courseimage: https://placekitten.com/300/500, fullname: Mathematics Year One, isfavourite: true, coursecategory: Category 1, showcoursecategory: true, visible: true }, { viewurl: https://moodlesite/course/view.php?id3, courseimage: https://placekitten.com/330/500, fullname: Health and Safety, isfavourite: false, coursecategory: Business, showcoursecategory: true, visible: true }, { viewurl: https://moodlesite/course/view.php?id4, courseimage: https://placekitten.com/360/500, fullname: French Advanced, isfavourite: false, coursecategory: Languages, showcoursecategory: true, visible: true }, { viewurl: https://moodlesite/course/view.php?id4, courseimage: https://placekitten.com/360/400, fullname: French Year one, isfavourite: false, coursecategory: Languages, showcoursecategory: true, visible: true } ] }字段含义与取值说明字段类型说明viewurlstring卡片图片与标题的跳转链接指向课程主页courseimagestring课程封面图 URL缺图时后端会替换为生成的 SVG 占位图fullnamestring课程全名isfavouriteboolean是否已收藏驱动收藏图标coursecategorystring课程分类名称showcoursecategoryboolean是否展示分类控制分类文本与分隔符的渲染visibleboolean课程是否对学生可见为false时显示隐藏徽章真实调用链star 课程块如何渲染卡片组文档提到 The example below show a deck of cards as used on the starred courses block下图示例展示星标课程块中使用的卡片组。查看调用方源码可以还原完整的真实数据链路。public/blocks/starredcourses/classes/external.php 中的get_starred_courses()是核心服务端函数流程如下通过\core_favourites\service_factory::get_service_for_user_context($usercontext)获取当前用户收藏服务再调用find_favourites_by_type(core_course, courses, $offset, $limit)取回用户的课程收藏支持limit/offset分页参数用course_get_enrolled_courses_for_logged_in_user()过滤出用户已选课且被收藏的课程并按收藏时间倒序排序遍历收藏对每个课程构建course_summary_exporter并导出$exporter new course_summary_exporter($course, [context $context, isfavourite true]); $formattedcourse $exporter-export($renderer); $formattedcourses[] $formattedcourse;注意这里isfavourite恒为true因为列表本身就来源于收藏同时在导出前通过has_capability(moodle/course:viewhiddencourses, $context)检查隐藏课程的查看权限$course-visible为假且无权限的课程会被跳过函数返回值结构由get_starred_courses_returns()声明为external_multiple_structure(course_summary_exporter::get_read_structure())即一个course_summary_exporter数组——这保证前端通过 Web Service 拿到的数据与模板上下文严格同构。前端侧public/blocks/starredcourses/classes/output/main.php 的export_for_template()为view-cards模板提供userid、nocoursesimg与displaycategories上下文卡片列表则由 JS 通过上述 Web Service 拉取后填充。同样的 exporter 也被 public/blocks/timeline/classes/output/main.php时间线块复用印证了 课程卡片可在任何列出课程的地方使用 的设计意图。占位图机制由 id 生成唯一样式 SVG文档明确指出Cards usually dont really look great without images. Thats why we show a placeholder image when no course image is provided.没有图片的卡片通常观感不佳因此当未提供课程图片时展示占位图并给出核心调用方式$OUTPUT-get_generated_image_for_id($id);该占位图由核心渲染器提供内部使用一个基于 idnumber此处实际传入课程 id生成独一无二SVG 的库。其机制要点对同一$id始终生成相同的 SVG data URI保证同一课程的占位图长期稳定一致不会每次刷新变化输出为可内联的 data URI文档称其为 datauri可直接作为 CSSbackground-image或img的src使用组件文档的 Placeholder images 一节展示了九宫格占位图示例每张占位图均以background-image: url(data:...)形式渲染在.card容器中直观呈现了无图课程的实际效果。在导出器中占位图正是通过这段代码与课程图片无缝衔接$courseimage self::get_course_image($this-data); if (!$courseimage) { $courseimage $output-get_generated_image_for_id($this-data-id); }也就是说有图用图、无图生成占位图 这一规范在数据层已经强制执行模板侧无需再关心缺图分支。若你在自己的渲染代码中手动构造卡片上下文也应当遵循同样的回退逻辑否则卡片将违背组件库 卡片必须始终包含图片 的规范。使用课程卡片的设计指南组件文档在 Usage 一节给出了三条使用准则这里结合实现进一步展开保持简单Keep them simple卡片承载的信息由course_summary_exporter严格控制——图片、全名、分类、收藏状态四项核心信息加少量可选增强字段避免在卡片上堆砌过多内容最小化卡片上的操作数Minimize the number of actions on a card卡片默认唯一的交互就是点击跳转到课程页其余操作如菜单、进度通过$menu、$progress等插槽按需注入且menu插槽默认为空保证默认形态足够克制聪明地使用图片Use images smartly图片是用户识别课程的第一视觉线索封面图缺失时用基于 id 生成的稳定占位图填充避免空白卡片同时注意viewurl统一指向/course/view.php保证视觉一致性与导航可预期性。若要在自定义页面或插件中复用课程卡片推荐的做法是复用core_course/view-cards或core_course/coursecards模板数据通过course_summary_exporter或调用get_starred_courses这类现成 Web Service产出再配合isfavourite、showcoursecategory、visible等布尔字段控制细节渲染。这样既遵守组件库规范又最大限度复用核心代码。参考源码路径速查文件作用public/admin/tool/componentlibrary/content/moodle/components/coursecards.md课程卡片组件规范文档本文骨架public/course/templates/coursecard.mustache单张课程卡片模板public/course/templates/coursecards.mustache课程卡片网格容器public/course/templates/view-cards.mustache星标课程块使用的横向轮播卡片组public/course/classes/external/course_summary_exporter.php卡片数据导出器public/blocks/starredcourses/classes/external.php星标课程块 Web Service真实调用链示例public/blocks/starredcourses/classes/output/main.php星标课程块模板上下文public/blocks/timeline/classes/output/main.php时间线块中复用课程卡片的示例赞分享教育后端前端【免费下载链接】moodleMoodle - the worlds open source learning platform项目地址https://gitcode.com/gh_mirrors/mo/moodle点击查看免费下载相关推荐TiddlyWiki 社区记录与资源体系解析Community Cards 数据结构、提交规范与卡片渲染机制TiddlyWiki 社区记录与资源体系解析Community Cards 数据结构、提交规范与卡片渲染机制 本篇技术指南围绕 TiddlyWiki 5 仓库前端后端Mushroom Cards 数据流分析理解卡片与实体之间的通信机制Mushroom Cards 数据流分析理解卡片与实体之间的通信机制 Mushroom Cards 是一个专为 Home Assistant 设计的现代化仪表前端UI组件Penpot 数据结构与形状编辑全链路实战属性设计、数据迁移、组件同步与导入导出机制解析Penpot 数据结构与形状编辑全链路实战属性设计、数据迁移、组件同步与导入导出机制解析 Penpot 的数据结构是整个产品最复杂也最关键的部分之一设计文件前端设计系统图形学协同办公上一篇第三方Web智能合约项目指南下一篇从零开始掌握智能合约测试符号执行工具终极指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考