WordPress 区块主题让你可以以无数种方式布局首页，拥有无尽的灵活性。为了让你入门并展示其中的一些可能性，本教程将帮助你构建一个杂志风格的首页，展示几篇最新文章，然后为内页提供一个传统的文章列表。

首先，确保你的站点已激活一个区块主题——此技术在经典主题中无效。最终成果将是两个页面模板，每个模板每页显示12篇文章：

• 第一页 显示一篇特色文章，配有全宽特色图像。其下方是一组两篇文章。页面的其余部分是另外九篇文章组成的网格，横向排列三列。
• 第二页 使用一个查询循环来完成效果，同样以网格形式显示另外12篇文章。

在本教程结束时，你将知道如何在首页模板或任何页面模板中构建各种布局。

步骤 1 – 准备你的站点

在此步骤中，你将设置两个页面，并分别将它们设为首页和最新文章页面。

首先，进入 WordPress 仪表盘，点击左侧菜单中的页面。然后点击添加新页面。

对于首页，将其命名为“Home”，并保持内容区域空白。

对于博客页面，将其命名为“Blog”，并保持内容区域空白。同时记下此页面的 URL，稍后教程中会用到。

现在进入 WordPress 仪表盘，点击左侧菜单中的设置。然后点击阅读。你应该能看到两个字段，可以设置首页和博客页面。将名为“Home”的页面设置为网站的首页，将名为“Blog”的页面设置为“文章页面”。

在“阅读”设置中，你会看到首页显示选项。选择静态页面选项，然后从首页下拉菜单中选择你刚刚创建的“Home”页面，并从文章页面下拉菜单中选择你创建的“Blog”页面。

最后，将博客页面至多显示设置为12篇文章。

保存更改！

注意：如果你在已上线的站点上执行这些步骤（不推荐），你可能更愿意将此步骤留到最后。否则，你的更改可能会在你准备好之前改变网站的前端显示。

步骤 2 – 创建首页模板

创建一个首页模板，可以在站点编辑器中创建，也可以在激活的区块主题的模板目录中创建 front-page.html 模板。请记住，为了按上述计划在布局中每页显示12篇文章，你需要在阅读设置中设置每页显示12篇文章。下面的代码示例将为你提供一个总共显示12篇文章的布局。

你不必拘泥于此布局；你可以按你喜欢的任何方式配置文章布局。只需确保首页显示的近期文章总数与你在阅读设置中指定的文章数量一致。

查询循环一

在此示例中，第一个查询循环块配置为在列表视图布局中显示一篇文章，并禁用了继承查询模板选项。或者，你可以选择完全不同的模式或内容块，或自己创建。在这种情况下，文章模板块包含文章特色图像、文章日期、文章标题和文章摘要块。

查询循环二

遵循相同的概念，你可以在第一个块下方添加另一个查询循环块。在此示例中，第二个查询循环块设置为显示两篇文章。它有一个偏移量为1；如果偏移量为0，此查询将从重复第一个循环中的文章开始。

请注意，在这种情况下，文章模板块稍微复杂一些。（同样，你可以替换任何你喜欢的模式或块。）此示例包含一个两列的列块：文章特色图像块填充第一列的宽度，文章日期、文章标题和文章摘要块在第二列中。

查询循环三

第三个也是最后一个查询块设置为按上述计划在网格布局中显示九篇文章，并禁用了继承查询模板选项。现在偏移量是三篇文章：再次确保网格跳过你已经显示的三篇文章。和之前一样，你可以在此查询循环中替换任何你喜欢的块模式或块。选择权在你手中，可能性是无限的。另请注意：在每个查询块中，你都构建了不同的文章模板块，以满足页面该部分的设计需求。

在这种情况下，文章模板块包含文章特色图像、文章日期、文章标题和文章摘要块。

下一页链接

front-page 模板不应包含任何分页块。相反，直接在查询块下方添加一个段落块，并在该段落块中插入一个文本链接，指向你之前创建的“Blog”页面的第二页，此页面的模板将在下一步中创建。

为首页增添更多趣味

你的首页绝不限于查询块。你可以添加各种视觉趣味、营销工具等等！一些例子可能是：

• 封面块
• 行动号召
• 商店的特色产品
• 特别活动
• 等等

你也不仅限于在站点编辑器中工作。你也可以直接处理区块标记。

要处理该标记，你可以从下面的代码开始——将其粘贴到你的 front-page.html 文件中，或站点编辑器中 front-page 模板的代码视图中。你可能需要调整页眉和页脚模板部件以适应你的站点。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:query {"queryId":0,"query":{"perPage":"1","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"displayLayout":{"type":"list","columns":3},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:query {"queryId":0,"query":{"perPage":"2","pages":0,"offset":"1","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"displayLayout":{"type":"list","columns":2},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:post-featured-image {"isLink":true,"align":"wide"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"constrained","justifyContent":"left","contentSize":"500px"}} -->
<div class="wp-block-group"><!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:query {"queryId":0,"query":{"perPage":"9","pages":0,"offset":"3","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"displayLayout":{"type":"flex","columns":3},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><a href="/blog/page/2/" data-type="URL" data-id="/blog/page/2/">Next Page</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

步骤 3 – 文章页面模板

现在你将构建一个首页模板，可以在站点编辑器中创建，也可以在激活的区块主题的模板目录中创建 home.html 模板。

在此示例中，你的页面将有一个查询块，设置为显示12篇文章的网格，并且你将启用继承查询模板选项。同样，你可以为此使用任何你喜欢的模式或内容块组合——你不受任何预设的限制。

要构建教程中描述的文章页面，你的第四个文章模板块将显示文章特色图像、文章日期、文章标题和文章摘要块。

文章页面分页

在大多数情况下，你会希望为此页面模板包含分页链接，因为随着时间的推移，你将拥有超过十二篇文章——这些文章将生成更多页面，每个页面将显示接下来的十二篇文章。

现在，上一步的代码示例向查询循环块添加了一个分页块。该块设置为显示“下一页”和“上一页”的链接，而不是使用页码。这使博客的所有页面在视觉上保持一致。

如果你喜欢直接处理标记，这里再次提供一些 HTML 代码，你可以从你的 front-page.html 文件（或站点编辑器中 front-page 模板的代码视图）开始。你可能需要调整页眉和页脚模板部件以适应你的站点。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:query {"queryId":0,"query":{"perPage":"9","pages":0,"offset":"3","postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]},"displayLayout":{"type":"flex","columns":3},"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /-->

<!-- wp:post-date {"isLink":true} /-->

<!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->

<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0.5em"}}},"className":"to-front wp-block-query-pagination"} -->
<p class="to-front wp-block-query-pagination" style="margin-bottom:0.5em"><a href="/">Previous Page</a></p>
<!-- /wp:paragraph -->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"left"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

务必保存你的模板！完成后，前往站点的前端查看已就位的模板。

恭喜你完成本教程！

现在你拥有了知识和工具，可以在网站首页展示一个外观精美、与内页文章页面不同但保持一致的布局。这将帮助你为每位用户提供更具吸引力、个性化的体验，甚至可能提高他们在站点的停留时间和转化率。

但这仅仅是个开始。继续探索和实验，你会发现 WordPress 主题开发的无限可能，打造外观和性能都更出色的网站。