Minimal Mistakes 页面创建指南从 Sample Page 模板到自定义 About 与内容页【免费下载链接】minimal-mistakes:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.项目地址: https://gitcode.com/gh_mirrors/mi/minimal-mistakes本文以 Minimal Mistakes 主题附带的docs/_pages/sample-page.md示例页面为切入点系统讲解在 Jekyll Minimal Mistakes 主题中创建、组织与管理静态页面的完整方法。读完本文你将掌握页面Pages与博客文章Posts的本质区别、_pages目录的组织规范、permalink 与 Front Matter 的配置技巧以及如何基于主题的single布局快速搭建 About、联系、归档等各类自定义页面并了解底层布局源码的工作原理。什么是 Jekyll 页面它与博客文章有何不同sample-page.md的 Front Matter 非常简洁只有四个字段--- title: Sample Page permalink: /sample-page/ date: 2016-02-24T03:02:2000:00 ---正如该示例页面所描述的页面Page是留在固定位置的内容——它不随日期滚动、不进入按时间排序的文章流而是长期稳定地出现在站点导航中在大多数主题里都会展示在导航栏。而博客文章Post则按发布时间归档、分页展示并通常配有日期、阅读时间、相关文章等元信息。两者的典型区分场景页面About关于我、Contact联系、Terms条款、Portfolio作品集入口、归档页等长期稳定的内容文章带有发布日期的博客日志、教程、新闻等随时间累积的内容。在 Minimal Mistakes 的默认配置中见 docs/_config.yml 的defaults段文章type: posts默认启用layout: single、author_profile、read_time、comments、share、related等特性而页面type: pages默认只启用layout: single和author_profile: true刻意保持精简——这正是页面内容需要长期稳定、不被时间轴打扰的设计意图。页面里通常写什么参考 Sample Page 的两种典型内容sample-page.md给出了两种最常见的页面内容范式可以直接套用到你的 About 页面个人介绍型个人博客 / 作品集Hi there! Im a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pia coladas. (And gettin caught in the rain.)机构 / 产品介绍型公司官网 / 项目主页The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.仓库中docs/_pages/目录下的真实页面就是这些范式的实际应用about.md个人介绍、terms.md条款、sitemap.md站点地图、sample-page.md示例页等。你可以直接复制这些文件到自己的站点作为起点修改内容后使用。组织页面使用_pages目录统一管理Minimal Mistakes 官方建议见 Working with Pages 文档把所有页面集中放到一个_pages目录中便于管理。推荐的文件命名方式是语义化命名避免像/about/index.md这样容易在多个index.md之间产生混淆的模式sample-project └── _pages/ ├── 404.md # custom 404 page ├── about.md # about page └── contact.md # contact page创建_pages目录后需要做两件事让 Jekyll 真正看到并处理这些文件Step 1在_config.yml中加入include: [_pages]include: - _pages这是 Jekyll 处理下划线开头目录默认会被排除的关键步骤。仓库的 docs/_config.yml 正是这样配置的。Step 2在每个页面的 YAML Front Matter 中设置 permalinkfilenamepermalink_pages/about.mdpermalink: /about/_pages/home.mdpermalink: /_pages/contact.mdpermalink: /contact/仓库中的实际例子可参考 docs/_pages/about.md 与 docs/_pages/404.md。sample-page.md本身也使用了permalink: /sample-page/来固定其访问地址。通过 Front Matter Defaults 批量设置页面参数逐页手写layout等重复配置效率很低。Jekyll 的 Front Matter Defaults 机制可以在_config.yml中按 scope 批量注入。文档推荐的页面默认配置如下defaults: # _pages - scope: path: type: pages values: layout: single author_profile: true仓库实际使用的配置略有差异docs/_config.yml 中scope.path为_pages效果相同所有页面自动应用single布局并显示作者侧边栏。任何页面仍可在自己的 Front Matter 中覆盖这些默认值例如某页想隐藏作者侧边栏写入author_profile: false即可。页面使用什么布局深入single布局源码页面默认继承的single布局源码见 _layouts/single.html是 Minimal Mistakes 中最常用的布局由default布局扩展而来提供侧边栏 主内容双栏结构。从源码可以梳理出它对页面内容的核心处理流程Hero 区域当 Front Matter 中设置了header.overlay_color、header.overlay_image或header.image时渲染页面头图page__hero.html面包屑当site.breadcrumbs为true且当前页面不是首页时渲染面包屑导航breadcrumbs.html标题与元信息默认无 overlay 头图时渲染页面标题和page__meta.html日期、阅读时间、分类/标签等元信息目录TOC当page.toc为true时在右侧渲染自动生成的目录基于toc.html支持toc_label、toc_icon、toc_sticky参数内容区输出{{ content }}若设置了page.link则在末尾追加一个Direct Link按钮页脚区渲染分类/标签信息page__taxonomy.html与页面日期page__date.html可选模块page.share为true时渲染社交分享按钮页面存在 ID 且related: true时渲染相关文章。页面常用 Front Matter 参数速查表均为可选默认值见括号内参数作用默认值layout使用的布局页面通常为single由 defaults 决定permalink覆盖页面访问地址按文件名生成title页面标题无excerpt页面摘要用于 SEO meta description 与归档列表自动取首段author_profile是否显示作者侧边栏truepages scopetoc/toc_label/toc_icon/toc_sticky控制右侧目录falseclasses: wide扩展主内容宽度占满原本目录的位置无share是否显示社交分享按钮由 defaults 决定comments是否显示评论需先在_config.yml配置评论提供方由 defaults 决定search: false从站点搜索索引中排除该页面默认参与索引header.image/header.overlay_image等页面头图无canonical_url自定义 canonical URL自动生成让页面更醒目头图与全宽版式给页面添加视觉头图只需在 Front Matter 中配置图片建议放在assets/images/目录宽度约1280pxheader: image: /assets/images/unsplash-image-1.jpg image_description: A description of the image # 无障碍 alt 文本 caption: Photo credit: Some photographer # 图片说明支持 Markdown希望主内容区扩展、占满右侧原本留给目录的空间可添加classes: wide把页面接入站点导航页面创建后要能被访问者找到最简单的做法是加入主导航。Minimal Mistakes 的主导航由数据文件_data/navigation.yml的main键驱动参考 docs/_data/navigation.ymlmain: - title: Quick-Start Guide url: /docs/quick-start-guide/ - title: Posts url: /year-archive/ - title: Pages url: /page-archive/导航采用 priority plus 设计模式优先展示能放得下的链接多余的折叠进菜单切换按钮。想添加自定义页面链接只需追加一个titleurl条目可选地加description键桌面端悬停时会显示提示文字外部链接可加target: _blank新窗口打开。对于文档型站点还可以用_data/navigation.yml中的其他键如docs配合页面 Front Matter 的sidebar.nav: docs构建侧边栏导航菜单支持一层嵌套子菜单——这与本仓库文档区docs/_docs/各篇的呈现方式一致。从 Sample Page 出发的落地步骤综合以上内容把sample-page.md改造成你自己的 About 页面的完整流程是复制docs/_pages/sample-page.md为_pages/about.md或直接修改改写 Front Matter设置有意义的title如About Me和permalink: /about/删除示例占位内容写入你的个人/团队介绍可参考上文两种范式确认_config.yml中include: [_pages]与页面 defaults 已配置可选添加header.image头图、classes: wide全宽版式、share: true分享按钮在_data/navigation.yml的main键中加入该页面链接本地运行bundle exec jekyll serve预览确认无问题后构建部署。正如sample-page.md结尾所提示的这个示例页面本身就是为了演示用途完成学习后应当删除它、创建属于你自己的页面——现在你已经掌握了完成这件事所需的全部配置与原理。【免费下载链接】minimal-mistakes:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.项目地址: https://gitcode.com/gh_mirrors/mi/minimal-mistakes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考