Hugo Tinkering Record: From 0 to 1

Hugo Installation

Official Documentation Tutorial

The official website has 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 it.

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 installation methods.

Configuration File Format

As a newbie, choosing between yaml, toml, and json for the configuration file format was my first question.

TOML

1. Case-sensitive
2. Files can only contain UTF-8 encoded Unicode characters
3. Insensitive to indentation

YAML

1. Files start with ' - ', marking the beginning of the document
2. Key-value pairs are separated by colons
3. Lists start with hyphens
4. Use indentation with one or more spaces to describe nested collections

JSON

1. Data is stored in name/value pairs
2. Records are separated by commas. Trailing commas without the following attributes are not allowed
3. Double quotes wrap 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"
}

Due to the troublesome comment form of JSON and the strict indentation form of YAML, I finally chose TOML as the configuration file format. I can also indent freely, which is convenient for me to view.

Scattered Knowledge Points

1. The symbol := is an assignment operator in the Python language (mainly called the walrus operator). The walrus operator compresses our code to make it shorter.

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

2. layout/baseof.html is the base of all pages
3. You can divide header, footer, etc. into parts in the layout/partials folder
4. Steps to add a new page:
5. You need to add a .md file in content
6. Add a page with the same name in layouts/_default
7. Menu activation active state code:
8. The method described in the official website instructions does not successfully add the active state, 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. Small knowledge point of position function in css!

.outer {
  position: relative;
}

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

7. Shortcode can shorten the code and write some methods. Similar to function, please refer to the writing method: Hugo-basic

References

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