了解如何在 FixIt 主题中快速,直观地创建和组织内容。
内容组织
以下是一些方便你清晰管理和生成文章的目录结构建议:
- 保持博客文章存放在
content/posts 目录,例如:content/posts/my-first-post.md - 保持简单的静态页面存放在
content 目录,例如:content/about.md - 使用
_index.md 翻译列表页面标题等,例如:content/posts/_index.md - 本地资源组织
有三种方法来引用 图片 和 音乐 等本地资源:
- 使用 捆绑页面 (Page bundles) 中的 页面资源。
你可以使用适用于
Resources.GetMatch 的值或者直接使用相对于当前页面目录的文件路径来引用页面资源。 - 将本地资源放在 assets 目录中,默认路径是
/assets。
引用资源的文件路径是相对于 assets 目录的。 - 将本地资源放在 static 目录中,默认路径是
/static。
引用资源的文件路径是相对于 static 目录的。
引用的优先级符合以上的顺序。
提示
推荐使用 CoverView 来为你的文章生成精美的封面图片。
- ✨ 在线工具:无需安装软件,在浏览器中即可使用
- 🎨 多种模板:提供多种预设模板和自定义选项
- 📐 适配主题:完美适配 FixIt 主题的设计风格
- 🚀 快速生成:一键下载快速生成封面
项目地址:Lruihao/CoverView
页面模板
一般情况,你不需要设置 type 或 layout 参数,因为 Hugo 和 FixIt 会帮你选择。但是一些特殊情况你需要明确指定模板。
其他目录的文章
有时候你可能需要把一些文章单独放在一个目录中,而不是 content/posts 目录。这时你需要在文章的 Front matter 中设置 type: posts 参数。
例如,把所有文档的文章放在 content/documentation 目录,这里面的文章都使用 posts 模板:
1
2
3
4
5
| ---
title: 内容管理总览
date: 2024-04-06T12:57:26+08:00
type: posts
---
|
提示
你可以在 content/documentation/_index.md 中设置 cascade.params.type 参数为 posts,这样 content/documentation 目录下的所有文章都会使用 posts 模板。
1
2
3
4
5
6
| ---
title: 主题文档
cascade:
params:
type: posts
---
|
友情链接

在 Front matter 中设置 layout: friends,并在 yourSite/data/ 目录下创建 friends.yml,其内容格式如下:
1
2
3
4
5
| # 朋友/站点信息例子
- nickname: 朋友名字
avatar: 朋友头像
url: 站点链接
description: 对朋友或其站点的说明
|
技巧
你可以使用以下命令快速创建友情链接页面:
1
| hugo new content friends/index.md
|
搜索结果

详见 CSE 支持。
项目页面
这是一个额外的主题组件,具体请查看 hugo-fixit/component-projects。
Front matter
这部分内容在 Front matter 中介绍。
内容摘要
FixIt 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要。
文章摘要预览
自动摘要拆分
默认情况下,Hugo 自动将内容的前 70 个单词作为摘要。
你可以通过在网站配置中设置 summaryLength 来自定义摘要长度。
如果你要使用 CJK 语言创建内容,并且想使用 Hugo 的自动摘要拆分功能,请在网站配置中将 hasCJKLanguage 设置为 true。
手动摘要拆分
另外,你也可以添加 <!--more--> 摘要分割符来拆分文章生成摘要。
摘要分隔符之前的内容将用作该文章的摘要。
注意
请小心输入 <!--more-->,即全部为小写且没有空格。
Front matter 摘要
你可能希望摘要不是文章开头的文字。在这种情况下,你可以在文章 Front matter 的 summary 变量中设置单独的摘要。
使用文章描述作为摘要
你可能希望将文章 Front matter 中的 description 变量的内容作为摘要。
你仍然需要在文章开头添加 <!--more--> 摘要分割符。将摘要分隔符之前的内容保留为空。然后 FixIt 主题会将你的文章描述作为摘要。
比较
每种摘要类型都有不同的特点:
| 类型 | 优先级 | 渲染 Markdown | 渲染 Shortcodes | 使用 <p> 换行 |
|---|
| 手动摘要 | 1 | ✔️ | ✔️ | ✔️ |
| Front matter | 2 | ✔️ | ❌ | ❌ |
| 自动摘要 | 3 | ✔️ | ✔️ | ✔️ |
- 如果文章中有
<!--more--> 摘要分隔符,但分隔符之前没有内容,则使用描述作为摘要。 - 如果文章中有
<!--more--> 摘要分隔符,则将按照手动摘要拆分的方法获得摘要。 - 如果文章 Front matter 中有摘要变量,那么将以该值作为摘要。
- 按照自动摘要拆分方法。
提示
如果你想要纯文本摘要,可以设置 params.summary_plainify 或者 Front matter summary_plainify。
Markdown 语法
这部分内容在 Markdown 基本语法页面 和 Markdown 扩展语法页面 中介绍。
Shortcodes
这部分内容在 Shortcodes 页面 中介绍。
内容加密
这部分内容在 内容加密页面 中介绍。
URL 管理
Hugo 有一个强大的 URL 管理系统,详见 Hugo URL 管理。
多语言和 I18n
FixIt 主题完全兼容 Hugo 的多语言模式,并且支持在网页上切换语言。
语言切换
兼容性
| 语言 | Hugo 代码 | HTML lang 属性 | 主题文档 |
|---|
| 英语 | en | en | |
| 简体中文 | zh-cn | zh-CN | |
| 繁体中文 | zh-tw | zh-TW | |
| 法语 | fr | fr | |
| 波兰语 | pl | pl | |
| 巴西葡萄牙语 | pt-br | pt-BR | |
| 意大利语 | it | it | |
| 西班牙语 | es | es | |
| 德语 | de | de | |
| 塞尔维亚语 | sr | sr | |
| 俄语 | ru | ru | |
| 罗马尼亚语 | ro | ro | |
| 越南语 | vi | vi | |
| 印地语 | hi | hi | |
| 日语 | ja | ja | |
| 韩语 | ko | ko | |
| 阿拉伯语 | ar | ar | |
| 波斯语 | fa | fa | |
| 乌尔都语 | ur | ur | |
基本配置
学习了 Hugo 如何处理多语言网站 之后,请在站点配置中定义你的网站语言。
例如,一个支持英语,中文和法语的网站配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| # [en, zh-cn, fr, pl, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"
[languages]
[languages.en]
weight = 1
title = "My Hugo FixIt Site"
locale = "en"
label = "English"
[[languages.en.menu.main]]
identifier = "posts"
pre = ""
post = ""
name = "Posts"
url = "/posts/"
title = ""
weight = 1
[[languages.en.menu.main]]
identifier = "tags"
pre = ""
post = ""
name = "Tags"
url = "/tags/"
title = ""
weight = 2
[[languages.en.menu.main]]
identifier = "categories"
pre = ""
post = ""
name = "Categories"
url = "/categories/"
title = ""
weight = 3
[languages.zh-cn]
weight = 2
title = "我的 Hugo FixIt 网站"
# 网站语言,仅在这里 CN 大写
locale = "zh-CN"
label = "简体中文"
# 是否包括中日韩文字
hasCJKLanguage = true
[[languages.zh-cn.menu.main]]
identifier = "posts"
pre = ""
post = ""
name = "文章"
url = "/posts/"
title = ""
weight = 1
[[languages.zh-cn.menu.main]]
identifier = "tags"
pre = ""
post = ""
name = "标签"
url = "/tags/"
title = ""
weight = 2
[[languages.zh-cn.menu.main]]
identifier = "categories"
pre = ""
post = ""
name = "分类"
url = "/categories/"
title = ""
weight = 3
[languages.fr]
weight = 3
title = "Mon nouveau site Hugo FixIt"
locale = "fr"
label = "Français"
[[languages.fr.menu.main]]
identifier = "posts"
pre = ""
post = ""
name = "Postes"
url = "/posts/"
title = ""
weight = 1
[[languages.fr.menu.main]]
identifier = "tags"
pre = ""
post = ""
name = "Balises"
url = "/tags/"
title = ""
weight = 2
[[languages.fr.menu.main]]
identifier = "categories"
name = "Catégories"
pre = ""
post = ""
url = "/categories/"
title = ""
weight = 3
|
然后,对于每个新页面,将语言代码附加到文件名中。
单个文件 my-page.md 需要分为三个文件:
- 英语:
my-page.en.md - 中文:
my-page.zh-cn.md - 法语:
my-page.fr.md
RTL 语言支持
对于阿拉伯语、波斯语等 RTL(从右到左)语言,需要在语言配置中将 direction 参数设置为 "rtl"。主题会通过 HTML dir 属性自动应用正确的文本方向。
1
2
3
4
5
6
| [languages.ar]
weight = 4
title = "موقعي Hugo FixIt"
locale = "ar"
label = "العربية"
direction = "rtl"
|
注意
LTR 语言无需设置 direction 参数,默认值即为 "ltr"。
在线演示请参见 RTL 测试的 英文版 和 阿拉伯语版 进行对比。
修改默认的翻译字符串
翻译字符串用于在主题中使用的常见默认值。
目前提供 一些语言 的翻译,但你可能自定义其他语言或覆盖默认值。
要覆盖默认值,请在你项目的 i18n 目录中创建一个新文件 i18n/<languageCode>.toml,并从 themes/FixIt/i18n/en.toml 中获得提示。
另外,由于你的翻译可能会帮助到其他人,请花点时间通过 创建一个 PR 来贡献主题翻译,谢谢!
自动翻译
通过 自动翻译 组件,你只需少量的配置,就可以使单语言站点自动翻译为多种语言。
自动翻译为多种语言