Content Management Overview

Lruihao included in Documentation

2024-04-06 2024-04-16 About 2300 words 11 minutes - views

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

Contents

Find out how to create and organize your content quickly and intuitively in FixIt theme.

Contents Organization

A few suggestions to help you get a good looking site quickly:

Keep post pages in the content/posts directory, for example: content/posts/my-first-post.md
Keep other pages in the content directory, for example: content/about.md
Local resources organization

Local Resource Reference

There are three ways to reference local resources such as images and music:

Using page resources in page bundles. You can reference page resources by the value for Resources.GetMatch or the filepath of the resource relative to the page directory directly.
Store resources in the assets directory, which is /assets by default. The filepath of the resource to reference in the post is relative to the assets directory.
Store resources in the static directory, which is /static by default. The filepath of the resource to reference in the post is relative to the static directory.

The priority of references is also in the above order.

There are many places in the theme where the above local resource references can be used, such as links, images, image shortcode, music shortcode and some params in the front matter.

Images in page resources or assets directory processing will be supported in the future. It’s really cool!

Front matter

Hugo allows you to add front matter in yaml, toml or json to your content files.

Note

Not all of the below front matters need to be set in each of your posts. It is necessary only if the front matters and the page part in your theme configuration are inconsistent.

title: the title for the content.
subtitle: the subtitle for the content.
date: the datetime assigned to this page, which is usually fetched from the date field in front matter, but this behaviour is configurabl in the theme configuration.
lastmod: the datetime at which the content was last modified.
draft: if true, the content will not be rendered unless the --buildDrafts/-D flag is passed to the hugo command.

author: the author config for the content, the same as the params.author part in the theme configuration.

1
2
3
4
5
author:
  name: "" # the author's name
  link: "" # the link of the author
  email: "" # the email of the author, used to set a Gravatar avatar, which takes precedence over `author.avatar`
  avatar: "" # the local avatar of the author

authorAvatar: whether to enable the author’s avatar of the post.
description: the description for the content.
keywords: the keywords for the content.
license: the special lisence for this content.
images: page images for Open Graph and Twitter Cards.
tags: the tags for the content.
categories: the categories for the content.
featuredImage: the featured image for the content.
featuredImagePreview: the featured image for the content preview in the home page.
hiddenFromHomePage: if true, the content will not be shown in the home page.
hiddenFromSearch: if true, the content will not be shown in the search results.
hiddenFromRss: if true, the content will not be shown in the RSS feed.
hiddenFromRelated: if true, the content will not be shown in the related posts.
twemoji: if true, the content will enable the twemoji.
lightgallery: the same as the params.page.lightgallery part in the theme configuration.
ruby: if true, the content will enable the ruby extended syntax.
fraction: if true, the content will enable the fraction extended syntax.
fontawesome: if true, the content will enable the Font Awesome extended syntax.
linkToMarkdown: if true, the footer of the content will be shown the link to the orignal Markdown file.
linkToSource: if true, the footer of the content will be shown the link to the source file.
linkToEdit: if true, the footer of the content will be shown the link to the edit page.
linkToReport: if true, the footer of the content will be shown the link to the report issue.
rssFullText: if true, the full text content will be shown in RSS.
pageStyle: Detail see Page Style.
toc: the same as the params.page.toc part in the theme configuration.
expirationReminder: the same as the params.page.expirationReminder part in the theme configuration.
heading: the same as the params.page.heading part in the theme configuration.
code: the same as the params.page.code part in the theme configuration.
math: the same as the params.page.math part in the theme configuration.
mapbox: the same as the params.page.mapbox part in the theme configuration.
share: the same as the params.page.share part in the theme configuration.
comment: the same as the params.page.comment part in the theme configuration.
library: the same as the params.page.library part in the theme configuration.
seo: the same as the params.page.seo part in the theme configuration.
type: the rendering template of page, see templates for details.
menu: see Add content to Menu.
password: password of encrypted page content, see Content Encryption.
message: encryption prompt, see Content Encryption.
repost: the same as the params.page.repost part in the theme configuration.
autoBookmark: the same as the params.page.autoBookmark part in the theme configuration.
wordCount: the same as the params.page.wordCount part in the theme configuration.
readingTime: the same as the params.page.readingTime part in the theme configuration.
endFlag: the same as the params.page.endFlag part in the theme configuration.
reward: the same as the params.page.reward part in the theme configuration.
instantPage: the same as the params.page.instantPage part in the theme configuration.

Tip

featuredImage and featuredImagePreview support the complete usage of local resource references.

If the page resource with name: featured-image or name: featured-image-preview is set in the front matter, it is not necessary to set the parameter featuredImage or featuredImagePreview:

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

Some archetypes are embedded in the FixIt theme, which will take effect when creating new content with the following commands, and the front matter will be automatically brought in.

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

Here is a front matter example:

 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: "My First Post"
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
twemoji: false
lightgallery: true
ruby: true
fraction: true
fontawesome: true
linkToMarkdown: true
rssFullText: false
pageStyle: "normal"
gravatarForce: false

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"
    # located in "assets/"
    # Or
    # someCSS = "https://cdn.example.com/some.css"
  js:
    # someJS = "some.js"
    # located in "assets/"
    # Or
    # someJS = "https://cdn.example.com/some.js"
seo:
  images: []
  # ...
---

Content Summaries

FixIt theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.

Automatic Summary Splitting

By default, Hugo automatically takes the first 70 words of your content as its summary.

You may customize the summary length by setting summaryLength in the site configuration.

If you are creating content in a CJKChinese/Japanese/Korean language and want to use Hugo’s automatic summary splitting, set hasCJKLanguage to true in your site configuration.

Manual Summary Splitting

Alternatively, you may add the  summary divider where you want to split the article.

Content that comes before the summary divider will be used as that content’s summary.

Note

Be careful to enter  exactly; i.e., all lowercase and with no whitespace.

Front Matter Summary

You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the summary variable of the article front matter.

Use Description as Summary

You might want your description in the description variable of the article front matter as the summary.

You may add the  summary divider at the start of the article. Keep content that comes before the summary divider empty. Then FixIt theme will use your description as the summary.

Priority Order of Summary Selection

Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:

If there is a  summary divider present in the article but no content is before the divider, the description will be used as the summary.
If there is a  summary divider present in the article the text up to the divider will be provided as per the manual summary split method.
If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.
The text at the start of the article will be provided as per the automatic summary split method.

Note

It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.

Templates

Generally, you don’t need to set the type or layout parameter, because Hugo and fixit will help you choose. However, the FixIt theme provides some special templates for users to use.

Friends

Set layout: friends in the front matter and create data file named friends.yml in the yourSite/data/ directory, whose content format is as follows:

1
2
3
4
5
# Friend/Site info of one
- nickname: friend's name
  avatar: friend's avatar
  url: site link
  description: description of friend/site

Tip

You can use the following command to quickly create a friends page:

1
hugo new friends/index.md

Content Encryption

This part is shown in the content encryption page.

Markdown Syntax

This part is shown in the basic markdown syntax page and the extended markdown syntax page.

Shortcodes

This part is shown in the shortcodes page.

Multilingual and I18n

FixIt theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.

Compatibility

Language	Hugo Code	HTML `lang` Attribute
English	`en`	`en`
Simplified Chinese	`zh-cn`	`zh-CN`
Traditional Chinese	`zh-tw`	`zh-TW`
French	`fr`	`fr`
Polish	`pl`	`pl`
Brazilian Portuguese	`pt-br`	`pt-BR`
Italian	`it`	`it`
Spanish	`es`	`es`
German	`de`	`de`
Serbian	`sr`	`sr`
Russian	`ru`	`ru`
Romanian	`ro`	`ro`
Vietnamese	`vi`	`vi`

Basic Configuration

After learning how Hugo handle multilingual websites, define your languages in your site configuration.

For example with English, Chinese and French website:

 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, ...] determines default content language
defaultContentLanguage = "en"

[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 网站"
    # language code, CN only here
    languageCode = "zh-CN"
    languageName = "简体中文"
    # whether to include Chinese/Japanese/Korean
    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"
      name = "Catégories"
      pre = ""
      post = ""
      url = "/categories/"
      title = ""
      weight = 3

Then, for each new page, append the language code to the file name.

Single file my-page.md is split in three files:

in English: my-page.en.md
in Chinese: my-page.zh-cn.md
in French: my-page.fr.md

Tip

Use Front Matter parameter to translate urls too.

Overwrite Translation Strings

Translations strings are used for common default values used in the theme. Translations are available in some languages, but you may use another language or want to override default values.

To override these values, create a new file in your local I18n folder i18n/<languageCode>.toml and inspire yourself from themes/FixIt/i18n/en.toml.

By the way, as these translations could be used by other people, please take the time to propose a translation by making a PR to the theme!

Content Management Overview

Contents Organization

Front matter

Content Summaries

Automatic Summary Splitting

Manual Summary Splitting

Front Matter Summary

Use Description as Summary

Priority Order of Summary Selection

Templates

Friends

Content Encryption

Markdown Syntax

Shortcodes

Multilingual and I18n

Compatibility

Basic Configuration

Overwrite Translation Strings

Related Content