Material Design Lite Showcase 页面解析从 front matter 到案例展示的实现与构建【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-liteMaterial Design LiteMDL官方文档站点中的 Showcase 页面docs/_pages/showcase.md用于集中展示一批真实上线、使用 MDL 构建的 Google 官方站点。本文以该页面为主体结合仓库中的渲染模板、样式表与构建脚本完整讲解 Showcase 页面的数据模型、渲染原理、响应式截图规范与静态站点构建流水线帮助读者掌握如何在自有文档站或内容型站点中复刻同样的“案例展示”机制。Showcase 页面是什么Showcase 是 MDL 文档站导航栏见 docs/_templates/layout.html 中的showcase/index.html导航项下的一个独立页面其定位是展示“已经用 MDL 上线”的 Google.com 系站点作为框架真实落地效果的实证并希望后续扩展覆盖第三方与社区站点。原页面正文仅有一段说明文字核心内容全部承载于 front matter 中结构化定义的sites列表。从仓库现状看该页面与 Templates 模板页对应 docs/_templates/templates.html共享同一套“截图 元信息”的展示视觉体系这一点在 docs/_assets/main.css 中.templates与.showcase两套选择器几乎一一对应的写法如.templates .content与.showcase .content、.showcase .docs-layout .template可以得到印证。案例数据模型front matter 中的 sites 列表Showcase 页面的全部案例数据不是硬编码在正文 HTML 中而是以 YAML front matter 形式写在 docs/_pages/showcase.md 的头部每条案例包含四个字段字段类型含义与用途name字符串案例的内部标识同时决定截图文件名assets/showcase/{{name}}.jpg与模板的 CSS 修饰类名template--{{name}}title字符串站点名称渲染为案例卡片的大标题template__headerdescription字符串站点简介渲染为卡片内的说明段落url字符串站点外链地址绑定到 “Visit” 按钮的target_blank跳转仓库中实际收录的 6 个案例分别是Google Wallet、Google Contributor、Google for Work Partner Program、reWork with Google、Google Developers 与 Google Project Sunroof覆盖了支付、广告、企业合作、人力资源研究、开发者文档与能源测算等不同类型的内容站点——这一组合本身也说明了 MDL 面向“静态内容型网站”的定位见 README.md 中 “static content websites” 的表述。页面头部还设置了layout: showcase、title: Showcase: sites using MDL、bodyclass: showcase与include_prefix: ../等元数据其中layout决定了后续构建时选择哪个模板文件bodyclass用于给body挂上样式钩子类include_prefix则用于拼接相对资源路径。渲染原理swig 模板中的案例循环front matter 数据最终通过 docs/_templates/showcase.html 渲染为页面。该模板的核心是一段 swig 模板引擎的循环{% for template in page.sites %} section classtemplate template--{{ template.name }} docs-text-styling mdl-grid mdl-cell mdl-cell--12-col img src.../assets/showcase/{{ template.name }}.jpg srcset.../assets/showcase/{{ template.name }}.jpg 1x, .../assets/showcase/{{ template.name }}_2x.jpg 2x classtemplate__preview mdl-cell mdl-cell--8-col ... h3 classtemplate__header ...{{ template.title }}/h3 p classmdl-cell mdl-cell--12-col{{ template.description }}/p a href..._{{ template.name }}_2x.jpg ...Screenshot/a a href{{ template.url }} target_blank ...Visit/a /section {% endfor %}几个值得注意的实现细节响应式截图每张案例图同时提供 1x 与 2x 两个版本_2x.jpg后缀通过srcset让高分屏设备自动加载两倍分辨率图片截图链接也直接指向 2x 大图便于查看细节。MDL 组件自举卡片内的两个按钮使用了mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon类即 MDL 的按钮组件与涟漪ripple动效组件——展示 MDL 的页面本身就是用 MDL 组件搭建的这是典型的“自举dogfooding”实践。网格布局整体采用mdl-grid/mdl-cell网格系统截图占 8 列、元信息占 4 列且元信息内部继续用mdl-grid mdl-grid--no-spacing细分桌面、平板、手机三档断点由mdl-cell--6-col-desktop / mdl-cell--4-col-tablet / mdl-cell--2-col-phone控制。正文内容{{content|safe}}先于循环输出即 docs/_pages/showcase.md 中那段对 Showcase 用途的说明文字会被渲染在案例列表之前。配套样式docs/_assets/main.css 中的 showcase 规则案例卡片的视觉呈现由 docs/_assets/main.css 中.showcase与.template相关规则控制主要包括.showcase .content设置内容区左内边距与 960px 最大宽度docs-layout-content .content设置 40px 上下留白.showcase .docs-layout .template使用margin-left: -16px抵消网格间距保证卡片与页面左缘对齐.template卡片宽度 100%、margin-bottom: 72px、align-items: flex-start保证多张案例纵向排列并顶部对齐.template .template__meta预留padding-left: 24px在小屏.is-small-screen下归零元信息内部子元素统一margin-bottom: 24px末元素归零操作链接margin-left: -8px修正图标按钮的内边距。此外.showcase .docs-layout-header.mdl-layout__header为页面头部指定了背景图templates.png2x 屏切换templates_2x.png页头导航中激活态的.showcase .docs-navigation .showcase高亮规则也在此文件中定义。构建流水线_pages 如何变成 dist 下的 index.htmlShowcase 页是文档站点静态构建的一部分构建脚本位于 gulpfile.babel.js其核心是pages任务gulpfile.babel.js#L432-L457gulp.src(docs/_pages/*.md)收集所有 Markdown 页面含 showcase.mdfrontMatter插件解析 YAML 头部并把结果挂到file.page上remove: true表示从正文中剥离 front mattermarked把 Markdown 正文转成 HTMLapplyTemplate()gulpfile.babel.js#L335-L350根据file.page.layout字段拼接模板路径docs/_templates/${layout}.html用 swig 编译并注入{site, page, content}数据——Showcase 页即由此命中showcase.html模板rename将非 index 的页面改为目录化结构showcase.md→dist/showcase/index.html最后输出到dist目录。截图等静态资源则由assets任务gulpfile.babel.js#L462 附近将docs/_assets/**/*整体复制到构建产物中保证assets/showcase/*.jpg与页面同目录部署。页面开发时可用serve任务配合gulp.watch([docs/**/*])实现增量重建与浏览器热刷新gulpfile.babel.js#L502 附近。截图资源规范Showcase 页面依赖的截图存放在 docs/_assets/showcase/每个案例需要两张常规图{{name}}.jpg约 708x397与二倍图{{name}}_2x.jpg约 1415x793。以wallet、developers、sunroof等案例为例其截图呈现了 MDL 风格导航栏、卡片式内容区与按钮控件与srcset的 1x/2x 约定一一对应。新增一个案例时只需在 front matter 的sites中追加一条记录并补充同名截图文件即可无需改动模板。如何在自有站点复用这一模式即使不打算引入完整的 gulp 文档站构建链Showcase 页面的设计思路也可以直接迁移到任意静态站点数据与展示分离把案例列表名称、简介、链接、截图存成结构化数据front matter / JSON / YAML展示层用模板循环渲染新增案例零模板改动响应式截图为每个案例准备 1x/2x 两套截图用srcset声明兼顾加载速度与高分屏清晰度网格 组件化卡片复用mdl-grid/mdl-cell与mdl-button含 ripple等 MDL 组件直接拼装案例卡片与内容型站点的整体风格天然统一收录入口原页面通过 issue 渠道接受站点收录申请正文中保留了提交申请所需信息模板站点描述、主链接、截图在自建站点中可对应替换为表单或邮件入口。小结MDL 的 Showcase 页面虽小却集中体现了这个仓库“数据驱动渲染 自举组件 静态构建”的文档站工程实践front matter 定义案例数据、swig 模板负责循环渲染、srcset处理响应式截图、MDL 组件拼装交互卡片、gulp 流水线完成从 Markdown 到静态页面的构建。对希望在自己项目中搭建“案例展示 / 作品集”页面的开发者而言docs/_pages/showcase.md 连同 docs/_templates/showcase.html、gulpfile.babel.js 构成了一份可直接参考的完整实现样例。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Material Design Lite Showcase 页面解析：从 front matter 到案例展示的实现与构建
Material Design Lite Showcase 页面解析从 front matter 到案例展示的实现与构建【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-liteMaterial Design LiteMDL官方文档站点中的 Showcase 页面docs/_pages/showcase.md用于集中展示一批真实上线、使用 MDL 构建的 Google 官方站点。本文以该页面为主体结合仓库中的渲染模板、样式表与构建脚本完整讲解 Showcase 页面的数据模型、渲染原理、响应式截图规范与静态站点构建流水线帮助读者掌握如何在自有文档站或内容型站点中复刻同样的“案例展示”机制。Showcase 页面是什么Showcase 是 MDL 文档站导航栏见 docs/_templates/layout.html 中的showcase/index.html导航项下的一个独立页面其定位是展示“已经用 MDL 上线”的 Google.com 系站点作为框架真实落地效果的实证并希望后续扩展覆盖第三方与社区站点。原页面正文仅有一段说明文字核心内容全部承载于 front matter 中结构化定义的sites列表。从仓库现状看该页面与 Templates 模板页对应 docs/_templates/templates.html共享同一套“截图 元信息”的展示视觉体系这一点在 docs/_assets/main.css 中.templates与.showcase两套选择器几乎一一对应的写法如.templates .content与.showcase .content、.showcase .docs-layout .template可以得到印证。案例数据模型front matter 中的 sites 列表Showcase 页面的全部案例数据不是硬编码在正文 HTML 中而是以 YAML front matter 形式写在 docs/_pages/showcase.md 的头部每条案例包含四个字段字段类型含义与用途name字符串案例的内部标识同时决定截图文件名assets/showcase/{{name}}.jpg与模板的 CSS 修饰类名template--{{name}}title字符串站点名称渲染为案例卡片的大标题template__headerdescription字符串站点简介渲染为卡片内的说明段落url字符串站点外链地址绑定到 “Visit” 按钮的target_blank跳转仓库中实际收录的 6 个案例分别是Google Wallet、Google Contributor、Google for Work Partner Program、reWork with Google、Google Developers 与 Google Project Sunroof覆盖了支付、广告、企业合作、人力资源研究、开发者文档与能源测算等不同类型的内容站点——这一组合本身也说明了 MDL 面向“静态内容型网站”的定位见 README.md 中 “static content websites” 的表述。页面头部还设置了layout: showcase、title: Showcase: sites using MDL、bodyclass: showcase与include_prefix: ../等元数据其中layout决定了后续构建时选择哪个模板文件bodyclass用于给body挂上样式钩子类include_prefix则用于拼接相对资源路径。渲染原理swig 模板中的案例循环front matter 数据最终通过 docs/_templates/showcase.html 渲染为页面。该模板的核心是一段 swig 模板引擎的循环{% for template in page.sites %} section classtemplate template--{{ template.name }} docs-text-styling mdl-grid mdl-cell mdl-cell--12-col img src.../assets/showcase/{{ template.name }}.jpg srcset.../assets/showcase/{{ template.name }}.jpg 1x, .../assets/showcase/{{ template.name }}_2x.jpg 2x classtemplate__preview mdl-cell mdl-cell--8-col ... h3 classtemplate__header ...{{ template.title }}/h3 p classmdl-cell mdl-cell--12-col{{ template.description }}/p a href..._{{ template.name }}_2x.jpg ...Screenshot/a a href{{ template.url }} target_blank ...Visit/a /section {% endfor %}几个值得注意的实现细节响应式截图每张案例图同时提供 1x 与 2x 两个版本_2x.jpg后缀通过srcset让高分屏设备自动加载两倍分辨率图片截图链接也直接指向 2x 大图便于查看细节。MDL 组件自举卡片内的两个按钮使用了mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon类即 MDL 的按钮组件与涟漪ripple动效组件——展示 MDL 的页面本身就是用 MDL 组件搭建的这是典型的“自举dogfooding”实践。网格布局整体采用mdl-grid/mdl-cell网格系统截图占 8 列、元信息占 4 列且元信息内部继续用mdl-grid mdl-grid--no-spacing细分桌面、平板、手机三档断点由mdl-cell--6-col-desktop / mdl-cell--4-col-tablet / mdl-cell--2-col-phone控制。正文内容{{content|safe}}先于循环输出即 docs/_pages/showcase.md 中那段对 Showcase 用途的说明文字会被渲染在案例列表之前。配套样式docs/_assets/main.css 中的 showcase 规则案例卡片的视觉呈现由 docs/_assets/main.css 中.showcase与.template相关规则控制主要包括.showcase .content设置内容区左内边距与 960px 最大宽度docs-layout-content .content设置 40px 上下留白.showcase .docs-layout .template使用margin-left: -16px抵消网格间距保证卡片与页面左缘对齐.template卡片宽度 100%、margin-bottom: 72px、align-items: flex-start保证多张案例纵向排列并顶部对齐.template .template__meta预留padding-left: 24px在小屏.is-small-screen下归零元信息内部子元素统一margin-bottom: 24px末元素归零操作链接margin-left: -8px修正图标按钮的内边距。此外.showcase .docs-layout-header.mdl-layout__header为页面头部指定了背景图templates.png2x 屏切换templates_2x.png页头导航中激活态的.showcase .docs-navigation .showcase高亮规则也在此文件中定义。构建流水线_pages 如何变成 dist 下的 index.htmlShowcase 页是文档站点静态构建的一部分构建脚本位于 gulpfile.babel.js其核心是pages任务gulpfile.babel.js#L432-L457gulp.src(docs/_pages/*.md)收集所有 Markdown 页面含 showcase.mdfrontMatter插件解析 YAML 头部并把结果挂到file.page上remove: true表示从正文中剥离 front mattermarked把 Markdown 正文转成 HTMLapplyTemplate()gulpfile.babel.js#L335-L350根据file.page.layout字段拼接模板路径docs/_templates/${layout}.html用 swig 编译并注入{site, page, content}数据——Showcase 页即由此命中showcase.html模板rename将非 index 的页面改为目录化结构showcase.md→dist/showcase/index.html最后输出到dist目录。截图等静态资源则由assets任务gulpfile.babel.js#L462 附近将docs/_assets/**/*整体复制到构建产物中保证assets/showcase/*.jpg与页面同目录部署。页面开发时可用serve任务配合gulp.watch([docs/**/*])实现增量重建与浏览器热刷新gulpfile.babel.js#L502 附近。截图资源规范Showcase 页面依赖的截图存放在 docs/_assets/showcase/每个案例需要两张常规图{{name}}.jpg约 708x397与二倍图{{name}}_2x.jpg约 1415x793。以wallet、developers、sunroof等案例为例其截图呈现了 MDL 风格导航栏、卡片式内容区与按钮控件与srcset的 1x/2x 约定一一对应。新增一个案例时只需在 front matter 的sites中追加一条记录并补充同名截图文件即可无需改动模板。如何在自有站点复用这一模式即使不打算引入完整的 gulp 文档站构建链Showcase 页面的设计思路也可以直接迁移到任意静态站点数据与展示分离把案例列表名称、简介、链接、截图存成结构化数据front matter / JSON / YAML展示层用模板循环渲染新增案例零模板改动响应式截图为每个案例准备 1x/2x 两套截图用srcset声明兼顾加载速度与高分屏清晰度网格 组件化卡片复用mdl-grid/mdl-cell与mdl-button含 ripple等 MDL 组件直接拼装案例卡片与内容型站点的整体风格天然统一收录入口原页面通过 issue 渠道接受站点收录申请正文中保留了提交申请所需信息模板站点描述、主链接、截图在自建站点中可对应替换为表单或邮件入口。小结MDL 的 Showcase 页面虽小却集中体现了这个仓库“数据驱动渲染 自举组件 静态构建”的文档站工程实践front matter 定义案例数据、swig 模板负责循环渲染、srcset处理响应式截图、MDL 组件拼装交互卡片、gulp 流水线完成从 Markdown 到静态页面的构建。对希望在自己项目中搭建“案例展示 / 作品集”页面的开发者而言docs/_pages/showcase.md 连同 docs/_templates/showcase.html、gulpfile.babel.js 构成了一份可直接参考的完整实现样例。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考