[Blog] Hugo Notes

· 3 min read · (435 words)
Blog

Documenting the blogging process.

Simple Concept & Cheat sheet

Directory Structure

.
├── archetypes   // default template
├── config.toml  // configuration
├── content      // post folder, home, ...
├── data         // store other config data (yaml,toml, json)
├── layouts      // custom template (html), overwrite themes
├── static       // styles (css,js)
└── themes  .    // structure as above
            ├── archetypes
            ├── config.toml
            ├── content
            ├── data
            ├── layouts
            ├── static
            └── themes

Basic Command

  • hugo new site SITE_NAME // create the above structured directory
  • hugo new PAGE_NAME.md // generate new page
  • hugo serve -D // preview in localhost:1313, -D: view drafts
  • hugo version // check the version, or if it exists.

Resource

Dev. Notes

Theme

  • Candidates:
Theme Pros(+) Cons(-) Comments
✔️ hugo-bootstrap-premium - Good looking
- support Bootstrap(?)		 messy/complex structure - link from: this blog
- free Bootstrap theme: Bootswatch
hugo-bootstrap - clear structure
- support Bootstrap		 above styles are better (fonts, icons) build my own!
minos - simple & clear
- flooting smart toc		 - too plain…
- do not like the fonts		 link from: this blog

ToC (Table of Content)

  • in .html:
  • for hugo-bootstrap-premium:
    • /theme/layouts/_default/single.html > partial /theme/layouts/partial/bloc/content/sidebar.html
  • @TODO:
    • Change to smart toc
    • Taxonomies order: Topics, tags
    • Floating/Fixed toc (sliding?), how about axonomies??

Image Path

Count Taxonomies (tags & Topics)

  • Some sample code: (in /sidebar.html)
<ul>
	<!-- Get all posts-->
	{{ $posts := where .Site.Pages "Type" "post" }}
	<!-- loop all tags that you've used -->
	{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
		
		<!-- (re)set the counter to 0 -->
		{{ $.Scratch.Set "tagCounter" 0 }}
		<!-- increment counter if post contains the current tag-->
		{{ range $posts}}
			{{ if in .Params.tags $name }}
				{{ $.Scratch.Add "tagCounter" 1 }}
			{{ end }}
		{{ end }}
		
		<li>{{ $.Scratch.Get "tagCounter" }} articles in {{ $name }}</li>
	{{end}}
</ul>

  • Credits: https://discourse.gohugo.io/t/show-count-of-handpicked-categories-or-tags/2369

  • Problems:

    • codes in sidebar.html (not exactly as above), there are some lower cases and upper cases problems, which make it hard to filter/display taxonomy.

  • Hugo built-in functions related to ths problem:
    Usage: {{FunctionName ObjectItem}} or {{"ObjectItem" | FunctionName}}

  • @TODO: two types of taxonomies:

    • tags: for small keywords, eg. #hashtag, or categorize by programming languages
    • Topics: for general categories, maybe «one Post one Topic»
    • Create multicolor tags

@ TODO


TableOfContents
Latest Posts
Tags