通过一个可运行的角色与研究筛选示例，了解 Forty-Two 支持的 WordPress 工作流程、Web 配色方案和人员目录模式。
组合角色与研究领域筛选条件，查看无结果状态，然后清除所选条件。
Michigan Engineering 官方网页配色、字体排版、培训与发布指南。预览的几何布局和运行逻辑均为原创。
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|---|---|
Maize / Blue | #FFCB05 / #00274C | 主要品牌组合；辅助色不能取代它。 |
Base text / surface | #131516 / #FAFAFA | Puma Black 和 Base White。 |
February Grey | #E9E9E9 | 浅色中性色，用于区隔或作为辅助界面表面。 |
Community Blue | #1E406B | 辅助蓝色调。 |
Research Blue | #2A5993 | 辅助蓝色调。 |
Hyperlink Blue | #1779BA | 指定的网页链接色；仍需结合具体情境检查对比度。 |
Web A2 Amethyst | #663289 | 使用网页系统配色；较早的一般品牌页面列出了不同的紫色。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|---|---|
Interface/headline family | Roboto | 官方网页字体系列；字重用于表达强调。 |
Paragraph family | Open Sans | 官方指南明确指定它用于网页段落。 |
Playfair Display | Print-oriented serif option | 不要据此推断所有网页标题都应使用它。 |
Page and section names | Sentence case | 也适用于锚点链接、推广标题和说明文字。 |
CTA punctuation | No punctuation | 有文档记录的写作规范；保留有意义的措辞。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|---|---|
Runtime | Institution-supported WordPress Forty-Two theme | 可通过 C&M 或 CAEN 托管方案获取，并非已验证的公开 npm SDK。 |
Composition | Blocks and patterns | 元素/组件在编辑器中对应区块；更大的组合可对应模式。 |
People directory | Role and Research filters; Query Sort or Sidebar layouts | 官方文档中的清单；此处未能公开验证具体插件 API。 |
Deprecated component | Accordion Item | 已列为弃用；不要在新页面中推荐。 |
Navigation maintenance | Appearance > Editor > Navigation | 创建页面后，在目标菜单中添加或重新排序该页面。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|---|---|
Preview runtime | Original HTML/CSS/JS | 演示文档中描述的概念；不会加载受限的机构主题。 |
Preview typography | Arial; 17px body / 1.6 line-height | 有意采用的后备方案和原创尺寸，并非官方令牌。 |
Preview geometry | 1040px max; 220px filter sidebar; 32px gap | 原创构图，并非已发布的 Forty-Two 网格数值。 |
Preview compact breakpoint | 700px | 将筛选条件置于结果上方；这是应用层的选择。 |
Filter semantics | Role AND research area | 原创的本地交集筛选，并包含无结果恢复机制。 |
实用指南，介绍如何为真实界面选择、应用和评审此系统。
完整指导、实现起点和源代码链接。
Forty-Two 是 Michigan Engineering 的设计系统，也是受支持的 WordPress 主题。官方概述介绍了元素、组件和组件组，它们在编辑器中分别对应区块和模式。该主题通过 Communications & Marketing 或 CAEN 托管方案提供给工程学院的院系和单位。不应将它描述为任何项目都能安装的通用 npm 软件包。
此处的本地示例是对文档中人员目录概念的透明演绎。它使用已发布的网页配色和虚构人物资料，布局与筛选代码则为原创。经授权的机构网站应使用受支持的主题及其当前模式，而不是将此演示复制到自定义 HTML 区块中，并假定两者等效。
Maize 和 Blue 构成主要品牌标识。网页配色还包含 Base Puma Black、Base White 和指定的蓝色调，包括 Hyperlink Blue。辅助色调用于搭配主要颜色；不应因此给每个学术主题都配上互不相关的醒目背景。此示例将品牌色用于页眉，并在结果区域周围使用克制的中性色。
网页系统配色与一般品牌页面中的部分辅助色值有所不同，包括 A2 Amethyst。参考表采用专门的网页系统来源。任何偏离主题默认值的做法仍需检查对比度。颜色有官方名称，并不意味着它在所有背景上都适合用于小字号文本。
Engineering 字体指南将 Roboto 和 Open Sans 列为主要网页字体，并指定段落使用 Open Sans。指南提及 Playfair Display 的用途面向印刷，因此不能据此认定网页标题必须使用衬线字体。此预览明确使用 Arial 作为后备字体；正文的 17px 字号和标题字号是演示用选择，并非虚构的 Forty-Two 字体排版令牌。
写作指南要求页面标题、分区标题、锚点标签、宣传标题和说明文字使用句首字母大写的格式。这适合人员目录：清晰的姓名、职位和研究简介，比宣传口号包含更多信息。在实际网站上应准确使用机构名称，也不要为个人简介添加未经核实的资历。
官方培训索引包含人员配置、添加职位或研究领域，以及两种筛选布局：查询排序和侧边栏。这些内容表明，人员及其分类由内容管理，而不是在每个列表页面上手动重复创建区块。目前无法公开检索到插件的具体属性，因此本指南不会编造短代码名称或查询键。
在这个独立示例中，每个人只有一个职位和一个领域。两个筛选条件会同时生效。这个刻意简化的模型清楚展示了交集效果：教职人员加机器人学不会返回结果，而研究人员加机器人学会返回一条结果。生产环境中的分类体系可以更丰富，但在构建界面前，应明确其 AND/OR 逻辑。
// Original local filter composition; not a Forty-Two plugin API. const matches = (person, role, area) => (role === 'all' || person.role === role) && (area === 'all' || person.area === area); // Apply both conditions; clearing one filter must preserve the other. // Announce the result count and offer recovery when the intersection is empty.
更改筛选条件后，显示的个人资料和结果数量实时播报区域会随之更新。焦点不会离开选择框，因此键盘用户可以比较不同选项，而不必反复返回控件。无结果提示会说明当前组合没有匹配项，并提示用户更改任一字段或清除两个字段。
清除筛选条件会恢复默认值和全部个人资料，并将焦点移回第一个筛选框。个人资料顺序保持不变。这样可以避免目录中一个不易察觉的问题：每次更改筛选条件时，人员不仅会被移除，顺序也会意外改变。此处的姓名和简介均为虚构，不代表任何真实大学的任职信息。
培训资源目录包含专家、活动、查询循环、最新文章和人员模式。应选择与内容模型相匹配的模式，而不是用互不关联的文本框拼出外观相似的网格。人员模式可以保留人员记录与展示该记录的目录之间的关联。
旧版 Accordion Item 已明确标记为弃用。它出现在历史培训材料中，并不意味着推荐在新实现中使用。如果现有页面使用较旧的区块，请在替换前查阅最新培训网站和受支持的维护流程；更改呈现方式时，应保留有意义的内容和现有目标链接。
官方新建页面清单说明，发布页面并不会自动让用户找到它。请为页面指定父级，然后将其添加到所需的页眉、子导航、职位/研究领域筛选或页脚中。在有文档说明的编辑器流程中，打开“外观”、“编辑器”和“导航”，选择相应菜单，添加页面，并在列表视图中调整位置。
对于获准参与的 Forty-Two 项目，此编辑器工作流是具体的集成路径。本资源不会编造公开的 SDK 命令。配置区块说明了受支持的托管方式，并链接到培训材料；完整的本地代码示例则另行标注，供独立学习使用。
工程学院的无障碍指南指出，Forty-Two 默认组件采用符合无障碍要求的对比度；但更改颜色可能会破坏这一优势。个人资料内容也需要有意义的标题、清晰易懂的链接标签、准确的图片替代文本，以及易于理解的空状态。预览会检查响应式布局和筛选行为，但不会认证其符合机构规范。
原始预览不使用 Block M、大学标识或真实教职员工数据。机构徽标通过经过身份验证的品牌渠道分发，属于独立于这些教学配色的身份系统。真正的 Engineering 网站应遵循受支持的品牌和发布流程；独立原型则应如实标明其性质。
原创本地筛选规则，让有文档说明的目录概念具体可见。
// Original local filter composition; not a Forty-Two plugin API. const matches = (person, role, area) => (role === 'all' || person.role === role) && (area === 'all' || person.area === area); // Apply both conditions; clearing one filter must preserve the other. // Announce the result count and offer recovery when the intersection is empty.
包含两个筛选条件、结果播报、无结果恢复提示和重置功能。
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research collaborators</title><style>*{box-sizing:border-box}body{margin:0;color:#131516;background:#fafafa;font:17px/1.6 Arial,sans-serif}header{background:#00274c;color:#fafafa;border-top:8px solid #ffcb05;padding:32px}h1{font-size:36px;line-height:1.15;margin:8px 0 16px}h2{font-size:23px;line-height:1.25;margin:0 0 8px}main,header>div{max-width:1040px;margin:auto}.layout{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px}label{display:block;font-weight:bold;margin:0 0 8px}select,button{font:inherit;padding:10px;width:100%;border:1px solid #00274c;margin-bottom:24px;background:white;color:#00274c}button{cursor:pointer;font-weight:bold}button:focus-visible,select:focus-visible{outline:3px solid #00274c;outline-offset:3px}article{padding:24px 0;border-top:1px solid #e9e9e9}article p{margin:8px 0}.role{color:#1e406b;font-weight:bold}.topic{display:inline-block;background:#e9e9e9;padding:4px 10px;font-size:14px}#empty{border-left:6px solid #ffcb05;padding:16px;background:white}footer{font-size:14px;padding:24px 32px;border-top:1px solid #e9e9e9}[hidden]{display:none!important}@media(max-width:700px){.layout{grid-template-columns:1fr;padding:24px;gap:8px}header{padding:24px}h1{font-size:30px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters button{grid-column:1/-1;margin-bottom:8px}select{margin-bottom:8px}}</style><header><div><small>INDEPENDENT RESEARCH DIRECTORY</small><h1>Find a collaborator</h1><p>Explore fictional profiles by role and research area.</p></div></header><main><div class="layout"><aside class="filters" aria-label="Filter people"><div><label for="role">Role</label><select id="role"><option value="all">All roles</option><option value="faculty">Faculty</option><option value="staff">Research staff</option></select></div><div><label for="area">Research area</label><select id="area"><option value="all">All areas</option><option value="energy">Energy</option><option value="robotics">Robotics</option><option value="materials">Materials</option></select></div><button id="reset">Clear filters</button></aside><section aria-label="Matching people"><p id="count" role="status">3 people</p><article data-role="faculty" data-area="energy"><h2>Avery Chen</h2><p class="role">Faculty</p><p>Studies ways to make community energy systems easier to understand and maintain.</p><span class="topic">Energy</span></article><article data-role="staff" data-area="robotics"><h2>Jordan Ellis</h2><p class="role">Research staff</p><p>Supports experiments in human-centred robotics and field testing.</p><span class="topic">Robotics</span></article><article data-role="faculty" data-area="materials"><h2>Samira Patel</h2><p class="role">Faculty</p><p>Explores how durable materials can support repair and reuse.</p><span class="topic">Materials</span></article><div id="empty" hidden><h2>No matching people</h2><p>Try another role or research area, or clear both filters.</p></div></section></div><footer>OpenDesign interpretation of Forty-Two’s documented people-directory concept and web palette. Fictional profiles; Arial fallback, original layout and filtering. Not the university’s WordPress theme or an official directory.</footer></main><script>const role=document.querySelector('#role'),area=document.querySelector('#area');function filter(){let n=0;document.querySelectorAll('article').forEach(a=>{a.hidden=!((role.value==='all'||role.value===a.dataset.role)&&(area.value==='all'||area.value===a.dataset.area));if(!a.hidden)n++});document.querySelector('#count').textContent=n+' '+(n===1?'person':'people');document.querySelector('#empty').hidden=n!==0}role.onchange=area.onchange=filter;document.querySelector('#reset').onclick=()=>{role.value=area.value='all';filter();role.focus()};</script></html>这是采用机构主题，而不是安装公开软件包。独立的 HTML 示例内容完整，可在本地运行。Sources 中的完整可运行示例 ZIP 还提供了准确的预览依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/michigan-forty-two.html。请勿通过 file:// 打开基于模块的示例。
Supported institutional adoption: 1. Confirm the site is a Michigan Engineering department or unit project. 2. Arrange a Forty-Two WordPress site through Communications & Marketing or CAEN web publishing. 3. Use the Training site to select an existing block/pattern and create page stubs. 4. Build People content with the supported role/research-area structure and the current People pattern. 5. Connect the page to the intended navigation and filters in Appearance > Editor. 6. Preview real content, contrast and narrow layouts before publishing through the institution's process. Independent study: Open the complete HTML example below locally. It does not install or reproduce the institution's theme.
对于经授权的 Michigan Engineering 网站，请使用受支持的 Forty-Two WordPress 主题和当前的人员模式。将职务和研究领域作为维护中的分类使用，采用网站专用配色和文档规定的字体排印，并将新页面加入导航。对于独立原型，请标明原创的几何设计和运行时，使用虚构人物，避免使用机构徽标。实现清晰的组合筛选和空状态恢复。
对 OpenDesign 的独立诠释。不包含受支持的 Forty-Two WordPress 主题及其确切插件内部实现；所有个人资料均为虚构。
