Configurations

• About Hugo Configurations
• Analytics
• Commenting Systems
  • Disqus
  • Commento
  • Utterances
  • Giscus
  • Cusdis
• Syntax Highlight
• Theme Parameters
• Social Icons Configuration
• Menu Items Configurations
• CSP
• Complete Example
• Front Matter
• Posts

About Hugo Configurations

This theme supports:

• Analytics

• Commenting Systems

• Disqus
• Commento
• Utterances
• Giscus
• Cusdis
• Telegram

Commenting Systems

Comments are displayed within post pages, but can be disabled with disableComments front-matter.

Disqus

Follow these steps.

Commento

[params]
  commentoURL = "https://cdn.commento.io" # Replace if you use a custom domain

Utterances

[params.utterances]
  repo = "" # https://utteranc.es/#heading-repository
  issueTerm = "" # https://utteranc.es/#heading-mapping
  label = "" # https://utteranc.es/#heading-issue-label
  theme = "" # https://utteranc.es/#heading-theme

Giscus

[params.giscus] # https://giscus.app
  repo = ""
  repoID = ""
  category = ""
  categoryID = ""
  mapping = ""
  term = ""
  strict = ""
  reactionsEnabled = ""
  emitMetadata = ""
  inputPosition = ""
  theme = ""
  lang = ""
  loading = ""

Telegram

[params.telegram] # https://comments.app/
  siteID = ""
  limit = ""
  height = ""
  color = ""
  dislikes = ""
  outlined = ""
  colorful = ""
  dark = ""

Cusdis

[params.cusdis] # https://cusdis.com
  data_app_id = ""

Syntax Highlight

The theme uses the Goldmark syntax highlight system. GitHub light and dark are set as the default styles. To choose a different style, make sure noClasses is not set to false (default is true) and add to your config.toml:

[markup.highlight]
style = "monokai"

All style are available here.

Alternatively, it is possible to use custom styles with generated CSS files. See here.

Theme Parameters

These are all the parameters used by hugo-coder theme.

Social Icons Configuration

Social Icons are optional. To use them you will need to set at least all the following required parameters for each icon.

An example:

[[params.social]]
  name = "Github"
  icon = "fa-brands fa-github fa-2x"
  weight = 1
  url = "https://github.com/johndoe/"
[[params.social]]
  name = "Gitlab"
  icon = "fa-brands fa-gitlab fa-2x"
  weight = 2
  url = "https://gitlab.com/johndoe/"
[[params.social]]
  name = "Twitter"
  icon = "fa-brands fa-x-twitter fa-2x"
  weight = 3
  url = "https://twitter.com/johndoe/"

Menu Items Configurations

Menu Items are optional. To use them you will need to set all the following required parameters for each icon.

An example:

[[menu.main]]
  name = "Blog"
  weight = 1
  url  = "posts/"
[[menu.main]]
  name = "About"
  weight = 2
  url = "about/"

CSP

CSP stands for Content Security Policy. These configurations are optional. To use them you will need to set all the following required parameters. See here for reference.

An example:

[params.csp]
  childsrc = ["'self'"]
  fontsrc = [
    "'self'",
    "https://fonts.gstatic.com",
    "https://cdn.jsdelivr.net/"
  ]
  formaction = ["'self'"]
  framesrc = ["'self'"]
  imgsrc = ["'self'"]
  objectsrc = ["'none'"]
  stylesrc = [
    "'self'",
    "'unsafe-inline'",
    "https://fonts.googleapis.com/",
    "https://cdn.jsdelivr.net/"
  ]
  scriptsrc = [
    "'self'",
    "'unsafe-inline'",
    "https://www.google-analytics.com"
  ]
  # connect-src directive – defines valid targets for XMLHttpRequest (AJAX), WebSockets or EventSource
  connectsrc = ["'self'"]

Complete Example

This is a complete configuration example with some recommended values.

baseurl = "http://www.example.com"
title = "johndoe"
theme = "hugo-coder"
languagecode = "en"
defaultcontentlanguage = "en"

paginate = 20

[services]
[services.disqus]
disqusShortname = "yourdiscussshortname"

[markup.highlight]
style = "github-dark"

[params]
  author = "John Doe"
  info = "Full Stack DevOps and Magician"
  description = "John Doe's personal website"
  keywords = "blog,developer,personal"
  avatarurl = "images/avatar.jpg"
  #gravatar = "john.doe@example.com"

  faviconSVG = "/img/favicon.svg"
  favicon_32 = "/img/favicon-32x32.png"
  favicon_16 = "/img/favicon-16x16.png"

  since = 2019

  enableTwemoji = true

  colorScheme = "auto"
  hidecolorschemetoggle = false

  # customCSS = ["css/custom.css"]
  # customSCSS = ["scss/custom.scss"]
  # customJS = ["js/custom.js"]

[taxonomies]
  category = "categories"
  series = "series"
  tag = "tags"
  author = "authors"

# Social links
[[params.social]]
  name = "Github"
  icon = "fa-brands fa-github fa-2x"
  weight = 1
  url = "https://github.com/johndoe/"
[[params.social]]
  name = "Gitlab"
  icon = "fa-brands fa-gitlab fa-2x"
  weight = 2
  url = "https://gitlab.com/johndoe/"
[[params.social]]
  name = "Twitter"
  icon = "fa-brands fa-x-twitter fa-2x"
  weight = 3
  url = "https://twitter.com/johndoe/"

# Menu links
[[menu.main]]
  name = "Blog"
  weight = 1
  url  = "posts/"
[[menu.main]]
  name = "About"
  weight = 2
  url = "about/"

Front Matter

Hugo documentation: https://gohugo.io/content-management/front-matter

This theme includes one content type:

• Posts, useful to display blog posts

Posts

These are the front matter variables used by hugo-coder theme.

"tags", "categories", "series" and "authors" are taxonomies defined in the config.toml file.