Optitheme for Hugo

Motivation

I started using Hugo quite some time ago. I heavily modified the theme to fit my needs and thought it's time to create a theme that fits my needs.

Requirements

• Layout and Content

  • Cookie consent at bottom
  • Footer with privacy, imprint, terms of service
  • Automatic TOC for long pages
    • Parameter to disable TOC
  • Responsive images (modify figure template)
  • Breadcrumbs
  • 404-Page
  • Multi language support with translations
  • Meta data for author
  • Content listings
    • Parameter to disable listing
    • Parameter to filter unwanted entries
    • Description as Teasertext
    • Date format
    • Pagination
  • Social sharing
    • Facebook
    • Twitter
  • Favicon using parameter in config file

• CSS

  • CSS-grid module layout
  • CSS-only off canvas menu
  • SCSS for e.g. colors configurable using params in config file
  • Print CSS

• Performance

  • No external JavaScript libraries
  • No external Fonts
  • Minified HTML
    • Disable Hugo Generator inject
  • Inline CSS
  • Minified CSS
  • Minified JavaScript
  • Minified Images
  • Font-Awesome
    • Only required icons

• Audits and best practice

  • Validates in W3C
  • Pass Mobile friendly test
  • Score 100% in Google Lighthouse
    • Performance
    • Progressive Web App
    • Best practice
    • Accessability
    • SEO

• SEO

  • self referencing canonical tag
  • sitemap.xml
    • do not include noindex in sitemap.xml
  • robots.txt
    • reference sitemap.xml
  • Meta-Robots via front matter
  • SEO Title via front matter
  • Meta description via front matter
  • Schema.org markup

• Business /

  • Analytics
    • anonymize IP
  • Adsense

• Documentation

Template Settings

theme = "optitheme"
baseurl = "https://example.com/"
title = "Optitheme"
defaultContentLanguage = "en"
LanguageCode = "en"

paginate = 3
disableHugoGeneratorInject = true
disableKinds = ["taxonomyTerm"]
canonifyurls = true
enableRobotsTXT = true
timeout=20000
enableGitInfo = true

googleAnalytics = ""

[params]
	privacyPolicy = "privacy.html"
	ot_favicon = "favicon.png"

	ot_service_worker = true

[languages]
    [languages.en]
		weight = 1
        languageName = "English"
        languageCode = "en"
		url = "/"		
		title = "Optitheme - EN"

    [languages.de]
		weight = 2
        languageName = "Deutsch"
        languageCode = "de"
        url = "/de/"
		title = "Optitheme - DE"	
		
[menu]
	[[menu.main]]
		identifier = "about"
		name = "About Optitheme"
		pre = ""
		url = "/about/"
		weight = -110

	[[menu.main]]
		identifier = "de/about"
		name = "Über Optitheme"
		pre = ""
		url = "/de/about/"
		weight = -110	

[taxonomies]
  categories = "categories"	
		
[privacy]
  [privacy.googleAnalytics]
    anonymizeIP = true
    disable = false
    respectDoNotTrack = false
    useSessionStorage = false

[imaging]
	resampleFilter = "Lanczos"
	quality = 80
	anchor = "smart"
	
[sitemap]
	filename = "sitemap.xml"
	
[frontmatter]
	date = ["date", "publishDate", "lastmod", ":git"]

Content Settings

Here is an example for front matter for a content. Please note: true and false should not be written in quotes to have an effect.

---
title: "Title"
description: "Description"
ot_seo_title: ""
ot_meta_description: ""
# ot_meta_robots: "noindex"
# ot_showdate: false
# ot_showads: false
# ot_showtoc: false
# ot_showlist: false
# ot_showinlist: false

date: 2018-08-29T00:00:00Z
# lastmod: 2018-08-29T00:00:00Z
# publishDate: 2018-08-29T00:00:00Z
# expiryDate: 9999-12-31T00:00:00Z

# draft: true
# url: /example-url.html

# categories:
#   - "example"
#   - "hello"

# menu:
#   main:
#     name: "Name in main menu"
#    weight: 4
#   footer:
#     name: "Name in footer menu"
#    weight: -1

# ot_schema_org: ["Person", "Organization", "LodgingBusiness"]
---