HUGO: Architecture

Themes

Ananke theme

• https://themes.gohugo.io/gohugo-theme-ananke/
• https://github.com/theNewDynamic/gohugo-theme-ananke/blob/master/exampleSite/config.toml

Layout, templates

Template lookup order

• /layouts/index.html
• /layouts/_default/list.html
• /layouts/_default/single.html
• /themes/THEME/layouts/index.html
• /themes/THEME/layouts/_default/list.html
• /themes/THEME/layouts/_default/single.html

References

• https://bwaycer.github.io/hugo_tutorial.hugo/templates/homepage/
• https://gohugo.io/templates/lookup-order/

Template hierarchy (Ananke theme)

base.html
  {{ partial "site-style.html" . }}         ... Include CSS
  {{ partialCached "site-favicon.html" . }}
  {{ partial "site-header.html" .}}
  {{ block "main" . }}
  {{ partialCached "site-footer.html" . }}

site-header.html
  {{ .Title | default .Site.Title }} ....... The large page heading
  {{ partial "site-navigation.html" . }} ... Menu

site-navigation.html
  - Link upper-left corner
  - Main menu
  {{ partial "i18nlist.html" . }} .............. Language switch link
  {{ partialCached "social-follow.html" . }} ... Social media links
  
site-footer.html
  - Copyright
  {{ partial "social-follow.html" . }}

Page categories

• layouts/_default/single.html … for a page containing a single element (article, blog entry, …)
• layouts/_default/list.html … for section pages (articles, projects, …)

list.html
  {{- partial "summary.html" . -}}

• http://localhost:1313/tags/
  • All tags
  • layouts/_default/terms.html
• http://localhost:1313/tags/akka/
  • From single tag to other tagged content
  • layouts/_default/taxonomy.html

Special template when type = page

• layouts/page/single.html
• Quite simple in the Ananke theme, therefore it is not used
  • Does not provide a TOC for example

Default template when type != page

• layouts/_default/single.html
• Used for all pages on roland-haag.com

layouts/_default/single.html
  {{ partial "page-header.html" . }}
  {{ define "main" }}
    - Section title
    {{ partial "social-share.html" . }}
	{{- .Title -}}
	- Author
	- Date
	- Reading time, word count
	{{ template "_internal/disqus.html" . }}
    {{- partial "commento.html" . -}}
	{{- partial "menu-contextual.html" . -}}
	
menu-contextual.html
  - TOC
  - Related content (based on similar parameters like tags)

Partial templates (partials)

• https://bwaycer.github.io/hugo_tutorial.hugo/templates/partials/
• https://gohugo.io/templates/partials/
• https://gohugo.io/templates/partials/#partial-template-lookup-order

Comments in templates

• https://gohugo.io/templates/introduction/#comments

Custom site data

• https://gohugo.io/variables/site/
• https://gohugo.io/templates/data-templates/

FAQ

Difference between index.md and _index.md

• https://discourse.gohugo.io/t/what-is-the-difference-between-index-md-and-index-md/10330

index.md is a regular page which can contain other pages, images etc. as resources. Basically all files in the same folder and below will be part of a bundle.

_index.md is the content page for the list type of pages, i.e. pages that have children (home page, section page, taxonomy lists and taxonomy terms.

• https://gohugo.io/templates/section-templates/

Tags

hugo