9.5 KiB
title | date | draft | description | summary | slug | tags | ||
---|---|---|---|---|---|---|---|---|
快速开始 | 2020-08-15 | false | Congo的启动方法 | 这一部分假设你已经安装了Congo主题,并准备开始进行基本配置任务,如选择颜色方案、菜单和内容结构。 | getting-started |
|
{{< alert >}} 本节假定您已经[安装了Congo主题]({{< ref "docs/installation" >}})。 {{< /alert >}}
Congo提供的配置文件包含主题定制的所有可能设置。默认情况下,其中许多设置项都被注释掉,但您可以简单地取消注释以激活或更改特定功能。
基本配置
在创建任何内容之前,有一些新安装需要设置的事项。首先在config.toml
文件中,设置baseURL
和languageCode
参数。languageCode
应设置为您将用于撰写内容的主要语言。
# config/_default/config.toml
baseURL = "https://your_domain.com/"
languageCode = "en"
下一步是配置语言设置。虽然Congo支持多语言设置,但目前,只需配置主要语言即可。
找到config文件夹中的languages.en.toml
文件。如果您的主要语言是英语,可以直接使用此文件。否则,将其重命名,以便文件名中包含正确的语言代码。例如,对于法语,将文件重命名为languages.fr.toml
。
{{< alert >}}
语言配置文件名中的语言代码应与config.toml
中的languageCode
设置相匹配。
{{< /alert >}}
# config/_default/languages.en.toml
title = "My awesome website"
[author]
name = "My name"
image = "img/author.jpg"
headline = "A generally awesome human"
bio = "A little bit about me"
links = [
{ twitter = "https://twitter.com/username" }
]
[author]
配置确定在网站上显示作者信息的方式。图像应放置在站点的assets/
文件夹中。链接将按照它们列出的顺序显示。
如果需要更多细节,每个配置选项的详细信息都在[配置]({{< ref "configuration" >}})部分中有介绍。
颜色方案
Congo默认情况下提供了一些颜色方案。要更改方案,只需设置colorScheme
主题参数。有效选项为congo
(默认)、avocado
、cherry
、fire
、ocean
、sapphire
和slate
。
{{< alert >}}
colorScheme
值应以小写形式提供。
{{< /alert >}}
# config/_default/params.toml
colorScheme = "congo"
Congo定义了一个在整个主题中使用的三色调色板。每个主色包含十种基于包含在Tailwind中的颜色的阴影。
Congo(默认)
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
Avocado
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
Cherry
{{< swatches "#737373" "#f43f5e" "#22c55e" >}}
Fire
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
Ocean
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
Sapphire
{{< swatches "#64748b" "#6366f1" "#ec4899" >}}
Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
尽管这些是默认的方案,但您还可以创建自己的方案。有关详细信息,请参阅[高级自定义]({{< ref "advanced-customisation#colour-schemes" >}})部分。
组织内容
Congo不会强制您使用特定的内容类型,默认情况下,您可以自由定义您的内容。您可以选择使用 pages 来创建静态站点,使用 posts 来撰写博客,或使用 projects 来展示项目。这种自由度使您能够根据您的需求和偏好来组织和呈现内容。
目录结构
以下是基本Congo项目的快速概览。所有内容都放置在content
文件夹中:
.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── congo
{{< alert >}}
这里需要注意的关键一点是,在content目录中,普通文章页面的命名为index.md
,而列表页面的命名为_index.md
。任何与文章相关的静态文件都应放置在与索引文件相邻的子目录中。
{{< /alert >}}
对于Congo主题的设计,充分利用了Hugo页面束的优势,了解Hugo希望内容如何被组织是很重要的。务必阅读Hugo官方文档以获取更多信息。
特色、封面和缩略图图片
Congo主题支持在文章列表和单独的文章页面顶部显示图像。有三种类型的图像,每种都有其特定的用途:feature
(特色,这个不知道怎么翻译,可能是“主图” ?)、cover
(封面)和thumb
(缩略图)。
在下面的示例中,为first-post
文章提供了封面和缩略图图像:
.
└── content
└── posts
├── _index.md
└── first-post
├── cover.jpg
├── index.md
└── thumb.jpg
thumb
图像用作文章缩略图,将显示在文章列表中,而cover
图像将显示在单个文章页面的内容顶部。
{{< alert >}} 为了提供最大性能,缩略图图像将自动裁剪并调整大小为4:3的比例。封面图像将自动调整大小以适应其内容,但允许任何比例。 {{< /alert >}}
feature
图像是一种特殊类型,当存在时,它将用于替代thumb
和cover
图像。特色图像也出现在文章元数据中,在将内容共享到Facebook和Twitter等第三方网络时包含在其中。
主题将智能检测文章图像并自动将其添加到您的站点。您不必在正文中引用它们,只需将以适当命名的文件放在页面资源中即可。如果图像文件名中的任何地方都包含术语feature
、cover
或thumb
,那么它将用于该用途。
[示例部分]({{< ref "samples" >}})提供了这些图像的许多示例(您可以查看源代码以查看文件结构)。
分类法
Congo 在分类方面也非常灵活。有些人喜欢使用标签(tags)和分类(categories)来对内容进行分组,而其他人可能更倾向于使用主题(topics)。
Hugo默认使用文章、标签和分类,如果这符合您的需求,那么这将运行良好。但是,如果您希望自定义此设置,可以通过创建taxonomies.toml
配置文件来实现:
# config/_default/taxonomies.toml
topic = "topics"
这将使用主题替换默认的标签和分类。有关在命名分类法时的更多信息,请参阅Hugo分类法文档。
创建新分类法时,您将需要调整网站上的导航链接,以指向正确的部分,下面有相关说明。
菜单
Congo有两个菜单,可以根据您站点的内容和布局进行自定义。main
菜单显示在站点页眉中,而footer
菜单显示在页面底部,正好在版权声明上方。
这两个菜单都在menus.en.toml
文件中配置。与语言配置文件类似,如果您希望使用其他语言,请将此文件重命名并用所需的语言代码替换en
。菜单链接将按weight
从低到高排序,然后按name
字母顺序排序。
# config/_default/menus.en.toml
[[main]]
name = "博客"
pageRef = "posts"
weight = 10
[[main]]
name = "主题"
pageRef = "topics"
weight = 20
[[main]]
name = "GitHub"
url = "https://github.com/jpanther/congo"
weight = 30
[main.params]
icon = "github"
showName = false
target = "_blank"
[[main]]
identifier = "search"
weight = 99
[main.params]
action = "search"
icon = "search"
[[footer]]
name = "隐私"
pageRef = "privacy"
基本链接
name
参数指定了菜单链接中使用的文本。您还可以选择提供 title
,用于填充链接的 HTML title 属性。
pageRef
参数允许您轻松引用 Hugo 内容页面和分类法。这是配置菜单的最快方法,因为您只需引用任何 Hugo 内容项,它将自动构建正确的链接。要链接到外部 URL,可以使用 url
参数。
通过使用特殊的主题参数,可以进一步自定义。在链接中提供 params
允许添加 icon
,通过 showName
切换链接文本的能力,并可选择设置 URL 的 target
。在上面的示例中,GitHub 链接将只显示为图标,并在新窗口中打开链接。
操作链接
有一个特殊情况,用于创建执行主题操作的菜单项。这些链接项通过 action
参数进行标识,该参数指定链接应执行的操作。操作链接允许使用与其他链接(基本链接)相同的自定义参数,并且可以用图标或文本名称进行样式设置。
Congo内置有三个有效的主题操作:
appearance
将创建一个指向外观切换器(深色主题还是浅色主题)的链接locale
将创建一个下拉选择器,以切换语言访问已翻译的内容search
将创建指向站内搜索的链接
这两个菜单都是完全可选的,如果不需要,可以注释掉。使用默认文件中提供的模板作为配置指南。
更详细配置
上述步骤是最基本的配置。如果现在运行 hugo server
,您将看到一个空白的 Congo 网站。更详细配置在 [基本配置]({{< ref "configuration" >}}) 部分进行介绍。