# Configurations * [About Hugo Configurations](#about-hugo-configurations) * [Analytics](/docs/analytics.md) * [Commenting Systems](#commenting-systems) * [Disqus](#disqus) * [Commento](#commento) * [Utterances](#utterances) * [Giscus](#giscus) * [Cusdis](#cusdis) * [Syntax Highlight](#syntax-highlight) * [Theme Parameters](#theme-parameters) * [Social Icons Configuration](#social-icons-configuration) * [Menu Items Configurations](#menu-items-configurations) * [CSP](#csp) * [Complete Example](#complete-example) * [Front Matter](#front-matter) * [Posts](#posts) ## About Hugo Configurations This theme supports: * [Analytics](/docs/analytics.md) * Commenting Systems * [Disqus](https://disqus.com/) * [Commento](https://commento.io/) * [Utterances](https://utteranc.es/) * [Giscus](https://giscus.app/) * [Cusdis](https://cusdis.com/) * [Telegram](https://comments.app/) ### Commenting Systems Comments are displayed within post pages, but can be disabled with `disableComments` front-matter. #### Disqus Follow [these steps](https://gohugo.io/content-management/comments/#configure-disqus). #### Commento ```toml [params] commentoURL = "https://cdn.commento.io" # Replace if you use a custom domain ``` #### Utterances ```toml [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 ```toml [params.giscus] # https://giscus.app repo = "" repoID = "" category = "" categoryID = "" mapping = "" term = "" strict = "" reactionsEnabled = "" emitMetadata = "" inputPosition = "" theme = "" lang = "" loading = "" ``` #### Telegram ```toml [params.telegram] # https://comments.app/ siteID = "" limit = "" height = "" color = "" dislikes = "" outlined = "" colorful = "" dark = "" ``` #### Cusdis ```toml [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](https://xyproto.github.io/splash/docs/all.html). Alternatively, it is possible to use custom styles with generated CSS files. See [here](https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css). ## 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 | | `"john.doe@example.com"` | | 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: ```toml [[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: ```toml [[menu.main]] name = "Blog" weight = 1 url = "posts/" [[menu.main]] name = "About" weight = 2 url = "about/" ``` ### CSP CSP stands for [Content Security Policy](https://developers.google.com/web/fundamentals/security/csp). These configurations are optional. To use them you will need to set all the following required parameters. See [here](https://developers.google.com/web/fundamentals/security/csp#policy_applies_to_a_wide_variety_of_resources) 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: ```toml [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. ```toml 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](#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.