如何在Jekyll的dev.html布局中分别引入page1.md与page2.md？

嘿，我之前刚好碰到过类似的需求，给你几个实用的解决思路，你可以根据自己的场景选：

方案一：通过页面属性精准定位（推荐，不影响页面独立访问） #

Jekyll的site.pages变量包含了所有生成的页面，我们可以通过页面的Front Matter属性（比如标题、自定义ID）来筛选出目标页面，然后单独输出它们的内容。

步骤1：给目标页面配置Front Matter #

在page1.md和page2.md里添加标识性的属性，比如自定义一个page_slug，或者直接用title：

# page1.md的Front Matter
---
title: "我的页面1"
page_slug: page1
# 这里不用改layout，保留原来的设置，这样页面本身还能正常访问
---

# page2.md的Front Matter
---
title: "我的页面2"
page_slug: page2
---

步骤2：在dev.html中筛选并输出内容 #

在你的dev.html布局里，用Liquid语法筛选出对应的页面，然后输出它的content：

<!-- dev.html 代码 -->
{% extends default %}

{% block content %}
  <!-- 引入page1的内容 -->
  <section class="page1-section">
    {% assign target_page = site.pages | where: "page_slug", "page1" | first %}
    {{ target_page.content }}
  </section>

  <!-- 引入page2的内容 -->
  <section class="page2-section">
    {% assign target_page = site.pages | where: "page_slug", "page2" | first %}
    {{ target_page.content }}
  </section>
{% endblock %}

如果担心重名，也可以用页面的path来精准匹配，比如where: "path", "_pages/page1.md"（根据你的实际文件路径调整）。

方案二：将页面转为include片段（适合不需要独立访问的场景） #

如果page1.md和page2.md不需要作为独立页面访问，你可以把它们移动到_includes文件夹下，然后直接用Jekyll的include标签引入：

<!-- dev.html 代码 -->
{% extends default %}

{% block content %}
  {% include page1.md %}
  {% include page2.md %}
{% endblock %}

这种方式更简单，但代价是这两个文件不能再作为独立页面访问了，适合纯内容片段的场景。

注意事项 #

• 如果你用方案一，确保筛选条件唯一，避免匹配到多个页面（用| first可以取到第一个匹配的结果）；
• target_page.content是已经转成HTML的内容，直接输出就能渲染成页面元素；
• 如果页面有自己的布局，target_page.content只会包含页面的主体内容，不会带上外层的布局（因为Jekyll会把布局和内容分开处理）。

内容的提问来源于stack exchange，提问作者Ady96