内容管理概述

Lruihao 收录于主题文档和内容管理

2024-04-06 2024-07-16 约 3700 字预计阅读 8 分钟 - 次阅读

/documentation/content-management/introduction/featured-image.webp

了解如何在 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 目录的。

引用的优先级符合以上的顺序。

封面图生成工具

页面模板

一般情况，你不需要设置 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
---

友情链接

在 Front matter 中设置 layout: friends，并在 yourSite/data/ 目录下创建 friends.yml，其内容格式如下：

1
2
3
4
5
# 朋友/站点信息例子
- nickname: 朋友名字
  avatar: 朋友头像
  url: 站点链接
  description: 对朋友或其站点的说明

技巧

你可以使用以下命令快速创建友情链接页面：

1
hugo new friends/index.md

Front Matter

Hugo 允许你在文章内容前面添加 yaml, toml 或者 json 格式的 Front matter，详见 Front matter。

注意

不是所有的以下 Front matter 都必须在你的每篇文章中设置。只有在文章的参数和你的主题配置中的 page 部分不一致时才有必要这么做。

技巧

FixIt 主题内嵌了一些原型 (Archetypes)，使用以下命令创建新内容时会自动带入常用的 Front matter：

1
2
3
hugo new posts/foo.md
# 或
hugo new --kind post-bundle posts/bar/

title: 文章标题
subtitle: 文章副标题
date: 这篇文章创建的日期时间它通常是从文章的 Front matter 中的 date 字段获取的，但是也可以在主题配置中设置
lastmod: 上次修改内容的日期时间
draft: 如果设为 true, 除非 hugo 命令使用了 --buildDrafts/-D 参数，这篇文章不会被渲染

author: 文章作者配置，和主题配置中的 params.author 部分相同

1
2
3
4
5
author:
  name: "" # 文章作者
  link: "" # 文章作者的链接
  email: "" # 文章作者的邮箱，用于设置 Gravatar 头像，优先于 `author.avatar`
  avatar: "" # 文章作者的头像

authorAvatar: 是否启用文章作者头像
description: 文章内容的描述
keywords: 文章内容的关键词
license: 这篇文章特殊的许可
images: 页面图片，用于 Open Graph 和 Twitter Cards
tags: 文章的标签
categories: 文章所属的类别
featuredImage: 文章的特色图片
featuredImagePreview: 用在主页预览的文章特色图片
hiddenFromHomePage: 如果设为 true, 这篇文章将不会显示在主页上
hiddenFromSearch: 如果设为 true, 这篇文章将不会显示在搜索结果中
hiddenFromRss: 如果设为 true, 这篇文章将不会显示在 RSS 中
hiddenFromRelated: 如果设为 true, 这篇文章将不会显示在相关文章中
twemoji: 如果设为 true, 这篇文章会使用 twemoji
lightgallery: 和主题配置中的 params.page.lightgallery 部分相同
ruby: 如果设为 true, 这篇文章会使用上标注释扩展语法
fraction: 如果设为 true, 这篇文章会使用分数扩展语法
fontawesome: 如果设为 true, 这篇文章会使用 Font Awesome 扩展语法
linkToMarkdown: 如果设为 true, 内容的页脚将显示指向原始 Markdown 文件的链接
linkToSource: 如果设为 true, 内容的页脚将显示指向源码的链接
linkToEdit: 如果设为 true, 内容的页脚将显示指向编辑页面的链接
linkToReport: 如果设为 true, 内容的页脚将显示指向报告问题的链接
rssFullText: 如果设为 true, 在 RSS 中将会显示全文内容
pageStyle: 页面样式，详见页面宽度
toc: 和主题配置中的 params.page.toc 部分相同
expirationReminder: 和主题配置中的 params.page.expirationReminder 部分相同
heading: 和主题配置中的 params.page.heading 部分相同
code: 和主题配置中的 params.page.code 部分相同
math: 和主题配置中的 params.page.math 部分相同
mapbox: 和主题配置中的 params.page.mapbox 部分相同
share: 和主题配置中的 params.page.share 部分相同
comment: 和主题配置中的 params.page.comment 部分相同
library: 和主题配置中的 params.page.library 部分相同
seo: 和主题配置中的 params.page.seo 部分相同
type: 页面渲染模板，详见页面模板
layout: 页面渲染模板，详见页面模板
menu: 详见添加内容到菜单
password: 加密页面内容的密码，详见内容加密
message: 加密提示信息，详见内容加密
repost: 和主题配置中的 params.page.repost 部分相同
autoBookmark: 和主题配置中的 params.page.autoBookmark 部分相同
wordCount: 和主题配置中的 params.page.wordCount 部分相同
readingTime: 和主题配置中的 params.page.readingTime 部分相同
endFlag: 和主题配置中的 params.page.endFlag 部分相同
reward: 和主题配置中的 params.page.reward 部分相同
instantPage: 和主题配置中的 params.page.instantPage 部分相同

titleIcon: 用于页面标题的图标，仅在 _index.md 中有效

featuredImage 和 featuredImagePreview 支持本地资源引用的完整用法。

如果带有在 Front matter 中设置了 name: featured-image 或 name: featured-image-preview 属性的页面资源，没有必要再设置 featuredImage 或 featuredImagePreview:

1
2
3
4
5
resources:
  - name: featured-image
    src: featured-image.jpg
  - name: featured-image-preview
    src: featured-image-preview.jpg

这是一个 Front matter 例子：

 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
---
title: "我的第一篇文章"
subtitle: ""
date: 2020-03-04T15:58:26+08:00
lastmod: 2020-03-04T15:58:26+08:00
draft: true
author: ""
authorLink: ""
authorEmail: ""
description: ""
keywords: ""
license: ""
images: []

tags: []
categories: []
featuredImage: ""
featuredImagePreview: ""

hiddenFromHomePage: false
hiddenFromSearch: false
hiddenFromRss: false
twemoji: false
lightgallery: true
ruby: true
fraction: true
fontawesome: true
linkToMarkdown: true
rssFullText: false
pageStyle: "normal"

toc:
  enable: true
  auto: true
expirationReminder:
  enable: false
  # ...
code:
  copy: true
  # ...
edit:
  enable: false
  # ...
math:
  enable: true
  # ...
mapbox:
  accessToken: ""
  # ...
share:
  enable: true
  # ...
comment:
  enable: true
  # ...
library:
  css:
    # someCSS = "some.css"
    # 位于 "assets/"
    # 或者
    # someCSS = "https://cdn.example.com/some.css"
  js:
    # someJS = "some.js"
    # 位于 "assets/"
    # 或者
    # someJS = "https://cdn.example.com/some.js"
seo:
  images: []
  # ...
---

内容摘要

FixIt 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要。

自动摘要拆分

默认情况下，Hugo 自动将内容的前 70 个单词作为摘要。

你可以通过在网站配置中设置 summaryLength 来自定义摘要长度。

如果你要使用 CJK中文/日语/韩语 语言创建内容，并且想使用 Hugo 的自动摘要拆分功能，请在网站配置中将 hasCJKLanguage 设置为 true。

手动摘要拆分

另外，你也可以添加  摘要分割符来拆分文章生成摘要。

摘要分隔符之前的内容将用作该文章的摘要。

注意

请小心输入 ，即全部为小写且没有空格。

Front Matter 摘要

你可能希望摘要不是文章开头的文字。在这种情况下，你可以在文章 Front matter 的 summary 变量中设置单独的摘要。

使用文章描述作为摘要

你可能希望将文章 Front matter 中的 description 变量的内容作为摘要。

你仍然需要在文章开头添加  摘要分割符。将摘要分隔符之前的内容保留为空。然后 FixIt 主题会将你的文章描述作为摘要。

比较

由于可以通过多种方式指定摘要，因此了解顺序很有用。如下：

类型	优先级	渲染 Markdown	渲染 Shortcodes	删除 HTML 标签	使用 `<p>` 换行
手动摘要	1	✔️	✔️	❌	✔️
Front matter	2	✔️	❌	❌	❌
自动摘要	3	✔️	✔️	✔️	❌

如果文章中有  摘要分隔符，但分隔符之前没有内容，则使用描述作为摘要。
如果文章中有  摘要分隔符，则将按照手动摘要拆分的方法获得摘要。
如果文章 Front matter 中有摘要变量，那么将以该值作为摘要。
按照自动摘要拆分方法。

警告

不建议在摘要内容中包含富文本块元素，这会导致渲染错误。例如代码块，图片，表格等。

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`

基本配置

学习了 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
# [en, zh-cn, fr, pl, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"

[languages]
  [languages.en]
    weight = 1
    title = "My Hugo FixIt Site"
    languageCode = "en"
    languageName = "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 大写
    languageCode = "zh-CN"
    languageName = "简体中文"
    # 是否包括中日韩文字
    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"
    languageCode = "fr"
    languageName = "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"
      pre = ""
      post = ""
      name = "Catégories"
      url = "/categories/"
      title = ""
      weight = 3

然后，对于每个新页面，将语言代码附加到文件名中。

单个文件 my-page.md 需要分为三个文件：

英语：my-page.en.md
中文：my-page.zh-cn.md
法语：my-page.fr.md

修改默认的翻译字符串

翻译字符串用于在主题中使用的常见默认值。目前提供一些语言的翻译，但你可能自定义其他语言或覆盖默认值。

要覆盖默认值，请在你项目的 i18n 目录中创建一个新文件 i18n/<languageCode>.toml，并从 themes/FixIt/i18n/en.toml 中获得提示。

另外，由于你的翻译可能会帮助到其他人，请花点时间通过创建一个 PR 来贡献主题翻译，谢谢！

内容管理概述

内容组织

页面模板

其他目录的文章

友情链接

Front Matter

内容摘要

自动摘要拆分

手动摘要拆分

Front Matter 摘要

使用文章描述作为摘要

比较

Markdown 语法

Shortcodes

内容加密

URL 管理

多语言和 I18n

兼容性

基本配置

修改默认的翻译字符串

相关内容