跳到主要内容
  1. 文档/

主页布局

1 分钟·

Congo 提供了完全灵活的首页布局。有两个主要的模板可供选择,并提供额外的设置以调整设计。此外,您还可以提供自己的模板,完全掌控首页内容。

首页的布局由params.toml配置文件中的 homepage.layout 设置控制。另外,所有布局都可以选择包含最近的文章列表。

Page布局 #

默认布局是page布局。它只是一个显示您的 Markdown 内容的普通内容页面。非常适用于静态网站,并提供了很大的灵活性。

首页布局截图

要启用页面布局,请在 params.toml 配置文件中设置 homepage.layout = "page"

Profile布局 #

profile布局非常适用于个人网站和博客。它通过提供图像和社交媒体链接,将作者的详细信息置于中心位置。

个人资料布局截图

作者信息存储在语言配置文件中。有关参数详细信息,请参阅 入门指南语言配置 部分。

此外,提供在主页内容中的任何 Markdown 内容将显示在作者资料下方。这允许额外的灵活性,以使用 Shortcodes 显示生物或其他自定义内容。

要启用profile布局,请在 params.toml 配置文件中设置 homepage.layout = "profile"

custom布局 #

如果内置的首页布局不满足您的需求,您可以选择提供自己的自定义布局。这允许您完全掌控页面内容,基本上为您提供了一个空白的画布。

要启用自定义布局,请在 params.toml 配置文件中设置 homepage.layout = "custom"

配置值设置后,创建一个新的 custom.html 文件并将其放置在 layouts/partials/home/custom.html。现在,custom.html 文件中的任何内容都将放置在站点首页的内容区域。您可以使用任何 HTML、Tailwind 或 Hugo 模板函数来定义布局。

要在自定义布局中包含最近的文章,请使用 recent-articles.html 部分。

例如,这个站点的首页使用自定义布局,允许在profile和page布局之间切换。访问 GitHub 仓库 查看它是如何工作的。

最近的文章 #

所有首页布局都可以选择在主页面内容下方显示最近的文章。要启用此功能,只需在 params.toml 配置文件中将 homepage.showRecent 设置为 true

具有最近文章的个人资料布局

此部分中列出的文章来自 mainSections 设置,该设置允许使用您网站上使用的所有内容类型。例如,如果您有用于 postsprojects 的内容部分,可以将此设置设置为 ["posts", "projects"],所有这两个部分中的文章都将用于填充最近的列表。主题期望此设置为数组,因此如果您只使用一个部分来存储所有内容,您应相应地设置为 ["blog"]