Hugo Tinkering Log: From 0 to 1

Hugo Installation

Official Documentation Tutorial

The official website provides detailed installation tutorials for different systems: https://gohugo.io/installation/

Brew

If you are a Mac user, you can use the brew command to install.

brew install hugo

Note: This installation method may not install the latest version of hugo. If you want to use the latest version of hugo, please use other methods.

Configuration File Format

As a novice, deciding whether to choose yaml, toml, or json for the configuration file format was my first question.

TOML

1. Case sensitive
2. Files must contain only UTF-8 encoded Unicode characters
3. Indentation insensitive

YAML

1. Files start with ' - ' to mark the beginning of the document
2. Key-value pairs are separated by colons
3. Lists start with a hyphen
4. Nested collections are described using indentation with one or more spaces

JSON

1. Data is stored in name/value pairs
2. Records are separated by commas. Trailing commas without the following properties are not allowed
3. Double quotes enclose property names and strings
4. Single quotes are not allowed

String Differences

All formats support Strings, but JSON does not support multiline strings, nor does it support comments.

# TOML
key = "String Value"
multiline = """\
       The quick brown \
       fox jumps over \
       the lazy dog.\
       """

# YAML
key : String Value
multilinePreservedLinebreaks:
|
  L1 - The quick brown
  L2 - fox jumps over
  L3 - the lazy dog.
multilineReplaceLinebreaksWithWhitespace:
>
  This sentence ist just too long to keep it
  on the same line.

// JSON
{
  "key": "String Value"
}

Because of the troublesome comment format in JSON and the strict indentation format in YAML, I ultimately chose TOML as the configuration file format, which also allows me to indent freely, making it easier for me to view.

Miscellaneous Knowledge Points

1. This symbol := is the assignment operator in the Python language (primarily called the Walrus Operator), and the Walrus Operator compacts our code to make it shorter.

var a; // Definition
a = 1; // Assignment

2. layout/baseof.html is the foundation for all pages
3. The layout/partials folder can separate sections like header, footer, etc.
4. Steps for adding a new page:
5. You need to add an .md file in content
6. Add a page with the same name in layouts/_default
7. Menu activation active status code:
8. The method described in the official documentation did not successfully add the active status, so I looked for other ways to determine active

{{ range .Site.Menus.main }}
      {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
      {{- $page_url:= $currentPage.Permalink | absLangURL }}
        <li>
            <a {{- if eq $menu_item_url $page_url }} class="active" {{- end }} href="{{ .URL }}">
                {{ .Pre }}
                <span>{{ .Name }}</span>
            </a>
        </li>
      {{ end }}

6. A minor knowledge point about the position feature in CSS!

.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0px;
  left: 0px;
}

7. Shortcode can shorten code and write methods. Similar to a function, refer to the following for specific usage: Hugo-basic

References

• JSON vs. YAML vs. TOML
• In-depth Comparison of TOML, JSON, and YAML