configurations.md

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.

Name	Type	Required	Description	Default	Example
author	string	Yes	Author name.		"John Doe"
info	string	Yes	An headline, job title or similar.		"Full Stack Developer"
description	string	Yes	Description of the site.		"John Doe's personal website"
keywords	string	Yes	Site keywords.		"blog,developer,personal"
avatarURL	string	No	Photo of the author.		"images/avatar.jpg"
gravatar	string	No	Gravatar photo of the author		"[email protected]"
faviconSVG	string	No	Custom path to a SCG favicon.	"/img/favicon.svg"	"/img/favicon.svg"
favicon_32	string	No	Custom path to a 32x32 favicon.	"/img/favicon-32x32.png"	"/img/favicon-32x32.png"
favicon_16	string	No	Custom path to a 16x16 favicon.	"/img/favicon-16x16.png"	"/img/favicon-16x16.png"
touchIcon	string	No	Custom path to an apple-touch-icon	"/images/apple-touch-icon.png"	"/images/apple-touch-icon.png"
mask_icon	string	No	Custom path to a mask-icon	"/images/safari-pinned-tab.svg"	"/images/safari-pinned-tab.svg"
mask_icon_color	string	No	Custom color for mask-icon color	"#5bbad5"	"#5bbad5"
since	string	No	Date shown in the footer before now year		"2020"
maxSeeAlsoItems	number	No	Series see also post count	5	10
commit	string	No	Show the last git commit in the footer		"https://github.com/luizdepra/hugo-coder/tree/"
rtl	bool	No	Enable the Right To Left mode.	false	true or false
math	bool	No	Enable MathJax Module and add JS into your site.	false	true or false
katex	bool	No	Enable katex for all content types.	false	true or false
colorScheme	string	No	Specify light/dark colorscheme	"auto"	"auto" or "light" or "dark"
hideColorSchemeToggle	bool	No	If true, hides the color scheme toggle	false	true or false
customCSS	list	No	Add extra CSS files to the website.	[]	["css/extra-style.css"]
customSCSS	list	No	Add extra SCSS files to the website.	[]	["scss/extra-style.scss"]
customJS	list	No	Add extra JS files to the website.	[]	["js/extra-script.js"]
customRemoteJS	list	No	Add extra remote JS files to the website.	[]	["https://www.example.com/file.js"]
enableTwemoji	bool	No	Adds support for Twemoji	false	true or false
disableDefaultJsScripts	bool	No	If true, disables default js scripts (coder.js)	false	true or false

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.

Configuration	Type	Required	Description	Example
name	string	Yes	Icon name.	"Github"
icon	string	Yes	FontAwesome icon classes.	"fa-brands fa-github"
weight	int	Yes	Icon order.	1
url	string	Yes	URL to redirect.	"https://github.com/johndoe/"

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.

Configuration	Type	Required	Description	Example
name	string	Yes	Menu Item name.	"Posts"
weight	int	Yes	Menu Item order.	1
url	string	Yes	URL to redirect.	"/posts/"
class	string	No	Menu Item extra class attribute.	"menu-item"
target	string	No	URL target attribute.	"_blank"
rel	string	No	URL rel attribute.	"alternate"
type	string	No	URL type attribute.	"application/rss+xml"

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.

Configuration	Type	Required	Description	Example
childsrc	string list	Yes		["'self'"]
fontsrc	string list	Yes		["'self'"]
formaction	string list	Yes		["'self'"]
framesrc	string list	Yes		["'self'"]
imgsrc	string list	Yes		["'self'"]
objectsrc	string list	Yes		["'self'"]
stylesrc	string list	Yes		["'self'"]
scriptsrc	string list	Yes		["'self'"]
connectsrc	string list	Yes		["'self'"]

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 = "[email protected]"

  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.

Name	Type	Required	Description	Default	Example
tags	list	No	Add tag(s) to this post.		["Hugo", "Go"]
categories	list	No	Add categorie(s) to this post.		["Hugo", "Go"]
series	list	No	Add series to this post (used by OpenGraph).		["Theme Demo"]
author	list	No	Add author to this post.		["John Doe"]
externalLink	string	No	Link to an external post.		"https://github.com/luizdepra/hugo-coder/wiki"
featuredImage	string	No	Link/path to add an image below post metadata.		"https://github.com/luizdepra/hugo-coder/blob/master/images/screenshot.png"
math	bool	No	If true, MathJax is enabled only for this post.	false	true or false
katex	bool	No	If true, katex is enabled only for this post.	false	true or false
disableComments	bool	No	If true, comments are disabled.	false	true or false
canonicalUrl	string	No	Link to override in	false	"https://my-company.com/blog/my-blog-post-that-I-repost-without-hurtiong-seo"

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