configurations.md (18075B)
1 # Configurations 2 3 - [Configurations](#configurations) 4 - [About Hugo Configurations](#about-hugo-configurations) 5 - [Commenting Systems](#commenting-systems) 6 - [Disqus](#disqus) 7 - [Commento](#commento) 8 - [Utterances](#utterances) 9 - [Giscus](#giscus) 10 - [Telegram](#telegram) 11 - [Cusdis](#cusdis) 12 - [Mastodon](#mastodon) 13 - [Syntax Highlight](#syntax-highlight) 14 - [Theme Parameters](#theme-parameters) 15 - [Social Icons Configuration](#social-icons-configuration) 16 - [Menu Items Configurations](#menu-items-configurations) 17 - [CSP](#csp) 18 - [Complete Example](#complete-example) 19 - [Front Matter](#front-matter) 20 - [Posts](#posts) 21 22 ## About Hugo Configurations 23 24 This theme supports: 25 26 * [Analytics](/docs/analytics.md) 27 28 * Commenting Systems 29 * [Disqus](https://disqus.com/) 30 * [Commento](https://commento.io/) 31 * [Utterances](https://utteranc.es/) 32 * [Giscus](https://giscus.app/) 33 * [Cusdis](https://cusdis.com/) 34 * [Telegram](https://comments.app/) 35 36 ### Commenting Systems 37 38 Comments are displayed within post pages, but can be disabled with `disableComments` front-matter. 39 40 #### Disqus 41 42 Follow [these steps](https://gohugo.io/content-management/comments/#configure-disqus). 43 44 #### Commento 45 46 ```toml 47 [params] 48 commentoURL = "https://cdn.commento.io" # Replace if you use a custom domain 49 ``` 50 51 #### Utterances 52 53 ```toml 54 [params.utterances] 55 repo = "" # https://utteranc.es/#heading-repository 56 issueTerm = "" # https://utteranc.es/#heading-mapping 57 label = "" # https://utteranc.es/#heading-issue-label 58 theme = "" # https://utteranc.es/#heading-theme 59 ``` 60 61 #### Giscus 62 63 ```toml 64 [params.giscus] # https://giscus.app 65 repo = "" 66 repoID = "" 67 category = "" 68 categoryID = "" 69 mapping = "" 70 term = "" 71 strict = "" 72 reactionsEnabled = "" 73 emitMetadata = "" 74 inputPosition = "" 75 theme = "" 76 lang = "" 77 loading = "" 78 ``` 79 80 #### Telegram 81 82 ```toml 83 [params.telegram] # https://comments.app/ 84 siteID = "" 85 limit = "" 86 height = "" 87 color = "" 88 dislikes = "" 89 outlined = "" 90 colorful = "" 91 dark = "" 92 ``` 93 94 #### Cusdis 95 96 ```toml 97 [params.cusdis] # https://cusdis.com 98 data_app_id = "" 99 ``` 100 101 #### Mastodon 102 103 ```toml 104 [params.mastodon] 105 host = "" # Address of your Mastodon instance 106 username = "" # Your username 107 statusID = "" # ID os the status (post) that comments should be related 108 purifyCDN = "" # CDN address of pointing to a Purify package 109 110 ``` 111 112 ## Syntax Highlight 113 114 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 `hugo.toml`: 115 116 ``` 117 [markup.highlight] 118 style = "monokai" 119 ``` 120 121 All `style` are available [here](https://xyproto.github.io/splash/docs/all.html). 122 123 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). 124 125 ## Theme Parameters 126 127 These are all the parameters used by `hugo-coder` theme. 128 129 | Name | Type | Required | Description | Default | Example | 130 | ----------------------- | ------ | -------- | ------------------------------------------------------------------------ | --------------------------------- | ------------------------------------------------- | 131 | author | string | Yes | Author name. | | `"John Doe"` | 132 | info | string | Yes | An headline, job title or similar. | | `"Full Stack Developer"` | 133 | description | string | Yes | Description of the site. | | `"John Doe's personal website"` | 134 | keywords | string | Yes | Site keywords. | | `"blog,developer,personal"` | 135 | avatarURL | string | No | Photo of the author. | | `"images/avatar.jpg"` | 136 | gravatar | string | No | Gravatar photo of the author | | `"john.doe@example.com"` | 137 | fediverseCreator | string | No | The author's fediverse handle. | | `"@johndoe@example.com"` | 138 | faviconSVG | string | No | Custom path to a SCG favicon. | `"/img/favicon.svg"` | `"/img/favicon.svg"` | 139 | favicon_32 | string | No | Custom path to a 32x32 favicon. | `"/img/favicon-32x32.png"` | `"/img/favicon-32x32.png"` | 140 | favicon_16 | string | No | Custom path to a 16x16 favicon. | `"/img/favicon-16x16.png"` | `"/img/favicon-16x16.png"` | 141 | touchIcon | string | No | Custom path to an apple-touch-icon | `"/images/apple-touch-icon.png"` | `"/images/apple-touch-icon.png"` | 142 | mask_icon | string | No | Custom path to a mask-icon | `"/images/safari-pinned-tab.svg"` | `"/images/safari-pinned-tab.svg"` | 143 | mask_icon_color | string | No | Custom color for mask-icon color | `"#5bbad5"` | `"#5bbad5"` | 144 | since | string | No | Date shown in the footer before now year | | `"2020"` | 145 | maxSeeAlsoItems | number | No | Series see also post count | `5` | `10` | 146 | commit | string | No | Show the last git commit in the footer | | `"https://github.com/luizdepra/hugo-coder/tree/"` | 147 | rtl | bool | No | Enable the Right To Left mode. | `false` | `true` or `false` | 148 | math | bool | No | Enable MathJax Module and add JS into your site. | `false` | `true` or `false` | 149 | katex | bool | No | Enable KaTeX for all content types. | `false` | `true` or `false` | 150 | colorScheme | string | No | Specify light/dark colorscheme | `"auto"` | `"auto"` or `"light"` or `"dark"` | 151 | hideColorSchemeToggle | bool | No | If true, hides the color scheme toggle | `false` | `true` or `false` | 152 | customCSS | list | No | Add extra CSS files to the website. | [] | `["css/extra-style.css"]` | 153 | customSCSS | list | No | Add extra SCSS files to the website. | [] | `["scss/extra-style.scss"]` | 154 | customJS | list | No | Add extra JS files to the website. | [] | `["js/extra-script.js"]` | 155 | customRemoteJS | list | No | Add extra remote JS files to the website. | [] | `["https://www.example.com/file.js"]` | 156 | enableTwemoji | bool | No | Adds support for Twemoji | `false` | `true` or `false` | 157 | disableDefaultJsScripts | bool | No | If true, disables default js scripts (coder.js) | `false` | `true` or `false` | 158 | HeadTitle | string | No | When configured, it overrides the `<title>` tag with the provided string | "" | `"My custom title"` | 159 160 161 ### Social Icons Configuration 162 163 Social Icons are optional. To use them you will need to set at least all the following required parameters for each icon. 164 165 | Configuration | Type | Required | Description | Example | 166 | -------------- | ------ | -------- | ---------------------------------------- | ------------------------------- | 167 | name | string | Yes | Icon name. | `"Github"` | 168 | icon | string | Yes | FontAwesome icon classes. | `"fa-brands fa-github"` | 169 | weight | int | Yes | Icon order. | `1` | 170 | url | string | Yes | URL to redirect. | `"https://github.com/johndoe/"` | 171 172 An example: 173 174 ```toml 175 [[params.social]] 176 name = "Github" 177 icon = "fa-brands fa-github fa-2x" 178 weight = 1 179 url = "https://github.com/johndoe/" 180 [[params.social]] 181 name = "Gitlab" 182 icon = "fa-brands fa-gitlab fa-2x" 183 weight = 2 184 url = "https://gitlab.com/johndoe/" 185 [[params.social]] 186 name = "Twitter" 187 icon = "fa-brands fa-x-twitter fa-2x" 188 weight = 3 189 url = "https://twitter.com/johndoe/" 190 ``` 191 192 ### Menu Items Configurations 193 194 Menu Items are optional. To use them you will need to set all the following required parameters for each icon. 195 196 | Configuration | Type | Required | Description | Example | 197 | -------------- | ------ | -------- | ---------------------------------------- | ------------------------------- | 198 | name | string | Yes | Menu Item name. | `"Posts"` | 199 | weight | int | Yes | Menu Item order. | `1` | 200 | url | string | Yes | URL to redirect. | `"/posts/"` | 201 | class | string | No | Menu Item extra class attribute. | `"menu-item"` | 202 | target | string | No | URL target attribute. | `"_blank"` | 203 | rel | string | No | URL rel attribute. | `"alternate"` | 204 | type | string | No | URL type attribute. | `"application/rss+xml"` | 205 206 An example: 207 208 ```toml 209 [[menu.main]] 210 name = "Blog" 211 weight = 1 212 url = "posts/" 213 [[menu.main]] 214 name = "About" 215 weight = 2 216 url = "about/" 217 ``` 218 219 ### CSP 220 221 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. 222 223 | Configuration | Type | Required | Description | Example | 224 | -------------- | ----------- | -------- | ----------- | ------------------------------- | 225 | childsrc | string list | Yes | | `["'self'"]` | 226 | fontsrc | string list | Yes | | `["'self'"]` | 227 | formaction | string list | Yes | | `["'self'"]` | 228 | framesrc | string list | Yes | | `["'self'"]` | 229 | imgsrc | string list | Yes | | `["'self'"]` | 230 | objectsrc | string list | Yes | | `["'self'"]` | 231 | stylesrc | string list | Yes | | `["'self'"]` | 232 | scriptsrc | string list | Yes | | `["'self'"]` | 233 | connectsrc | string list | Yes | | `["'self'"]` | 234 235 An example: 236 237 ```toml 238 [params.csp] 239 childsrc = ["'self'"] 240 fontsrc = [ 241 "'self'", 242 "https://fonts.gstatic.com", 243 "https://cdn.jsdelivr.net/" 244 ] 245 formaction = ["'self'"] 246 framesrc = ["'self'"] 247 imgsrc = ["'self'"] 248 objectsrc = ["'none'"] 249 stylesrc = [ 250 "'self'", 251 "'unsafe-inline'", 252 "https://fonts.googleapis.com/", 253 "https://cdn.jsdelivr.net/" 254 ] 255 scriptsrc = [ 256 "'self'", 257 "'unsafe-inline'", 258 "https://www.google-analytics.com" 259 ] 260 # connect-src directive – defines valid targets for XMLHttpRequest (AJAX), WebSockets or EventSource 261 connectsrc = ["'self'"] 262 ``` 263 264 ## Complete Example 265 266 This is a complete configuration example with some recommended values. 267 268 ```toml 269 baseurl = "http://www.example.com" 270 title = "johndoe" 271 theme = "hugo-coder" 272 languagecode = "en" 273 defaultcontentlanguage = "en" 274 275 276 [pagination] 277 pagerSize = 20 278 279 [services] 280 [services.disqus] 281 shortname = "yourdiscussshortname" 282 283 [markup.highlight] 284 style = "github-dark" 285 286 [params] 287 author = "John Doe" 288 info = "Full Stack DevOps and Magician" 289 description = "John Doe's personal website" 290 keywords = "blog,developer,personal" 291 avatarurl = "images/avatar.jpg" 292 #gravatar = "john.doe@example.com" 293 294 faviconSVG = "/img/favicon.svg" 295 favicon_32 = "/img/favicon-32x32.png" 296 favicon_16 = "/img/favicon-16x16.png" 297 298 since = 2019 299 300 enableTwemoji = true 301 302 colorScheme = "auto" 303 hidecolorschemetoggle = false 304 305 # customCSS = ["css/custom.css"] 306 # customSCSS = ["scss/custom.scss"] 307 # customJS = ["js/custom.js"] 308 309 [taxonomies] 310 category = "categories" 311 series = "series" 312 tag = "tags" 313 author = "authors" 314 315 # Social links 316 [[params.social]] 317 name = "Github" 318 icon = "fa-brands fa-github fa-2x" 319 weight = 1 320 url = "https://github.com/johndoe/" 321 [[params.social]] 322 name = "Gitlab" 323 icon = "fa-brands fa-gitlab fa-2x" 324 weight = 2 325 url = "https://gitlab.com/johndoe/" 326 [[params.social]] 327 name = "Twitter" 328 icon = "fa-brands fa-x-twitter fa-2x" 329 weight = 3 330 url = "https://twitter.com/johndoe/" 331 332 # Menu links 333 [[menu.main]] 334 name = "Blog" 335 weight = 1 336 url = "posts/" 337 [[menu.main]] 338 name = "About" 339 weight = 2 340 url = "about/" 341 ``` 342 343 ## Front Matter 344 345 Hugo documentation: https://gohugo.io/content-management/front-matter 346 347 This theme includes one content type: 348 349 * [Posts](#posts), useful to display blog posts 350 351 ### Posts 352 353 These are the front matter variables used by `hugo-coder` theme. 354 355 | Name | Type | Required | Description | Default | Example | 356 | ---------------- | ------ | -------- | -------------------------------------------------- | ------- | ------------------------------------------------------------------------------- | 357 | tags | list | No | Add tag(s) to this post. | | `["Hugo", "Go"]` | 358 | categories | list | No | Add categorie(s) to this post. | | `["Hugo", "Go"]` | 359 | series | list | No | Add series to this post (used by OpenGraph). | | `["Theme Demo"]` | 360 | author | list | No | Add author to this post. | | `["John Doe"]` | 361 | externalLink | string | No | Link to an external post. | | `"https://github.com/luizdepra/hugo-coder/wiki"` | 362 | featuredImage | string | No | Link/path to add an image below post metadata. | | `"https://github.com/luizdepra/hugo-coder/blob/master/images/screenshot.png"` | 363 | math | bool | No | If true, MathJax is enabled only for this post. | `false` | `true` or `false` | 364 | katex | bool | No | If true, KaTeX is enabled only for this post. | `false` | `true` or `false` | 365 | disableComments | bool | No | If true, comments are disabled. | `false` | `true` or `false` | 366 | canonicalUrl | string | No | Link to override <link rel="canonical"/> in <head> | `false` | `"https://my-company.com/blog/my-blog-post-that-I-repost-without-hurtiong-seo"` | 367 368 > "tags", "categories", "series" and "authors" are taxonomies defined in the `hugo.toml` file.