Replaced ``` code blocks with Code Toggler

2026-08-24 23:38:53 +00:00 · 2021-04-09 16:18:02 +02:00
parent c9d065c20e
commit 5d354c38d2
24 changed files with 84 additions and 86 deletions
@@ -77,9 +77,9 @@ Only the obvious non-global options can be overridden per language. Examples of

 You can disable one or more languages. This can be useful when working on a new translation.

-```toml
+{{< code-toggle file="config" >}}
 disableLanguages = ["fr", "ja"]
-```
+{{< /code-toggle >}}

 Note that you cannot disable the default content language.

@@ -330,12 +330,12 @@ From within your templates, use the `i18n` function like this:
 {{ i18n "home" }}
 ```

-The function will search for the `"home"` id from `i18n/en-US.toml` file:
+The function will search for the `"home"` id:

-```
+{{< code-toggle file="i18n/en-US" >}}
 [home]
 other = "Home"
-```
+{{< /code-toggle >}}

 The result will be

@@ -351,12 +351,12 @@ Often you will want to use the page variables in the translation strings. To do
 {{ i18n "wordCount" . }}
 ```

-The function will pass the `.` context to the `"wordCount"` id in `i18n/en-US.toml` file:
+The function will pass the `.` context to the `"wordCount"` id:

-```
+{{< code-toggle file="i18n/en-US" >}}
 [wordCount]
 other = "This article has {{ .WordCount }} words."
-```
+{{< /code-toggle >}}

 Assume `.WordCount` in the context has value is 101. The result will be:

@@ -372,13 +372,13 @@ In order to meet singular/plural requirement, you must pass a dictionary (map) w
 {{ i18n "readingTime" .ReadingTime }}
 ```

-The function will read `.Count` from `.ReadingTime` and evaluate where the number is singular (`one`) or plural (`other`). After that, it will pass to `readingTime` id in `i18n/en-US.toml` file:
+The function will read `.Count` from `.ReadingTime` and evaluate where the number is singular (`one`) or plural (`other`). After that, it will pass to `readingTime` id:

-```
+{{< code-toggle file="i18n/en-US" >}}
 [readingTime]
 one = "One minute to read"
 other = "{{.Count}} minutes to read"
-```
+{{< /code-toggle >}}

 Assume `.ReadingTime.Count` in the context has value of 525600. The result will be:

@@ -25,14 +25,14 @@ The `AddDate` function takes three arguments in logical order of `years`, `month

 Let's assume you have a file at `data/tweets.toml` that contains a list of Tweets to display on your site's homepage. The file is filled with `[[tweet]]` blocks; e.g.---

-```
+{{< code-toggle file="data/tweets" >}}
 [[tweet]]
 name = "Steve Francia"
 twitter_handle = "@spf13"
 quote = "I'm creator of Hugo. #metadocreference"
 link = "https://twitter.com/spf13"
 date = "2017-01-07T00:00:00Z"
-```
+{{< /code-toggle >}}

 Let's assume you want to grab Tweets from the last two years and present them in a random order. In conjunction with the [`where`](/functions/where/) and [`now`](/functions/now/) functions, you can limit our range to the last two years via `now.AddDate -2 0 0`, which represents a point in time 2 years, 0 days, and 0 hours before the time of your last site build.

@@ -52,13 +52,13 @@ Assume you want to add a `location = ""` field to your front matter for every ar
        └── provo.toml
 ```

-Here is an example of the data inside `data/locations/oslo.toml`:
+Here is an example:

-```
+{{< code-toggle file="data/locations/oslo" >}}
 website = "https://www.oslo.kommune.no"
 pop_city = 658390
 pop_metro = 1717900
-```
+{{< /code-toggle >}}

 The example we will use will be an article on Oslo, whose front matter should be set to exactly the same name as the corresponding file name in `data/locations/`:

@@ -22,9 +22,9 @@ It should not be used for HTML from a third-party, or HTML with unclosed tags or

 Given a site-wide [`config.toml`][config] with the following `copyright` value:

-```
+{{< code-toggle file="config" >}}
 copyright = "© 2015 Jane Doe.  <a href=\"https://creativecommons.org/licenses/by/4.0/\">Some rights reserved</a>."
-```
+{{< /code-toggle >}}

 `{{ .Site.Copyright | safeHTML }}` in a template would then output:

@@ -21,11 +21,11 @@ aliases: []

 Example: Given a site-wide `config.toml` that contains this menu entry:

-```
+{{< code-toggle file="config" >}}
 [[menu.main]]
    name = "IRC: #golang at freenode"
    url = "irc://irc.freenode.net/#golang"
-```
+{{< /code-toggle >}}

 * <span class="bad">`<a href="{{ .URL }}">` &rarr; `<a href="#ZgotmplZ">`</span>
 * <span class="good">`<a {{ printf "href=%q" .URL | safeHTMLAttr }}>` &rarr; `<a href="irc://irc.freenode.net/#golang">`</span>
@@ -166,12 +166,12 @@ section names to hard-coded values like `"posts"` or `"post"`.
 If the user has not set this config parameter in their site config, it
 will default to the _section with the most pages_.

-The user can override the default in `config.toml`:
+The user can override the default:

-```toml
+{{< code-toggle file="config" >}}
 [params]
  mainSections = ["blog", "docs"]
-```
+{{< /code-toggle >}}

 [intersect]: /functions/intersect/
 [wherekeyword]: https://www.techonthenet.com/sql/where.php
@@ -47,15 +47,15 @@ In addition to using a single site config file, one can use the `configDir` dire
 - Each file represents a configuration root object, such as `params.toml` for `[Params]`, `menu(s).toml` for `[Menu]`, `languages.toml` for `[Languages]` etc...
 - Each file's content must be top-level, for example:
  
-  In `config.toml` is:
-  ```toml
-  [Params]
-    foo = "bar"
-  ```
-  In `params.toml` is:
-  ```
+{{< code-toggle file="config" >}}
+[Params]
  foo = "bar"
-  ```
+{{< /code-toggle >}}
+
+{{< code-toggle file="params" >}}
+foo = "bar"
+{{< /code-toggle >}}
+
 - Each directory holds a group of files containing settings unique to an environment.
 - Files can be localized to become language specific.

@@ -465,20 +465,20 @@ Dates are important in Hugo, and you can configure how Hugo assigns dates to you

 The default configuration is:

-```toml
+{{< code-toggle file="config" >}}
 [frontmatter]
 date = ["date", "publishDate", "lastmod"]
 lastmod = [":git", "lastmod", "date", "publishDate"]
 publishDate = ["publishDate", "date"]
 expiryDate = ["expiryDate"]
-```
+{{< /code-toggle >}}

 If you, as an example, have a non-standard date parameter in some of your content, you can override the setting for `date`:

- ```toml
+{{< code-toggle file="config" >}}
 [frontmatter]
 date = ["myDate", ":default"]
-```
+{{< /code-toggle >}}

 The `:default` is a shortcut to the default settings. The above will set `.Date` to the date value in `myDate` if present, if not we will look in `date`,`publishDate`, `lastmod` and pick the first valid date.

@@ -492,10 +492,10 @@ The special date handlers are:

 An example:

- ```toml
+{{< code-toggle file="config" >}}
 [frontmatter]
 lastmod = ["lastmod", ":fileModTime", ":default"]
-```
+{{< /code-toggle >}}


 The above will try first to extract the value for `.Lastmod` starting with the `lastmod` front matter parameter, then the content file's modification timestamp. The last, `:default` should not be needed here, but Hugo will finally look for a valid date in `:git`, `date` and then `publishDate`.
@@ -506,10 +506,10 @@ The above will try first to extract the value for `.Lastmod` starting with the `

 An example:

-```toml
+{{< code-toggle file="config" >}}
 [frontmatter]
 date  = [":filename", ":default"]
-```
+{{< /code-toggle >}}

 The above will try first to extract the value for `.Date` from the filename, then it will look in front matter parameters `date`, `publishDate` and lastly `lastmod`.

@@ -183,15 +183,11 @@ Or...
 hugo server --disableLiveReload
 ```

-The latter flag can be omitted by adding the following key-value to  your `config.toml` or `config.yml` file, respectively:
+The latter flag can be omitted by adding the following:

-```
+{{< code-toggle file="config" >}}
 disableLiveReload = true
-```
-
-```
-disableLiveReload: true
-```
+{{< /code-toggle >}}

 ## Deploy Your Website

@@ -65,10 +65,10 @@ You can [set Hugo version](https://www.netlify.com/blog/2017/04/11/netlify-plus-

 For production:

-```
+{{< code-toggle file="netlify" >}}
 [context.production.environment]
  HUGO_VERSION = "0.53"
-```
+{{< /code-toggle >}}

 For testing:

@@ -36,13 +36,13 @@ Also see the [CLI Doc](/commands/hugo_mod_init/).
 The easiest way to use a Module for a theme is to import it in the config.

 1. Initialize the hugo module system: `hugo mod init github.com/<your_user>/<your_project>`
-2. Import the theme in your `config.toml`:
+2. Import the theme:

-```toml
+{{< code-toggle file="config" >}}
 [module]
  [[module.imports]]
    path = "github.com/spf13/hyde"
-```
+{{< /code-toggle >}}

 ## Update Modules

@@ -35,12 +35,10 @@ There are several ways to set up CSS purging with PostCSS in Hugo. If you have a

 The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [config/production](/getting-started/configuration/#configuration-directory).

-`config.toml`
-
-```toml
+{{< code-toggle file="config" >}}
 [build]
  writeStats = true
-```
+{{< /code-toggle >}}

 `postcss.config.js`

@@ -33,9 +33,9 @@ Hugo `0.18` was bringing full-parallel page rendering, so workarounds depending

 With Hugo `0.19`, you can control this behaviour by turning off page types you do not want ({{<gh 2534 >}}). In its most extreme case, if you put the below setting in your [`config.toml`](/getting-started/configuration/), you will get **nothing!**:

-```
+{{< code-toggle file="config" >}}
 disableKinds = ["page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"]
-```
+{{< /code-toggle >}}

 ### Other New Features

@@ -23,10 +23,12 @@ In `layouts/partials/mystyles.css`:

 Then in `config.toml` (note that by using the `.Param` lookup func, we can override the color in a page’s front matter if we want):

-    [params]
-    [params.colors]
-    main = "green"
-    text = "blue"
+{{< code-toggle file="config" >}}
+[params]
+[params.colors]
+main = "green"
+text = "blue"
+{{< /code-toggle >}}

 And then in `layouts/partials/head.html` (or the partial used to include the head section into your layout):

@@ -8,14 +8,14 @@ images:
 - images/blog/hugo-26-poster.png
 ---

-This release brings a choice of **AP Style or Chicago Style Title Case** ([8fb594bf](https://github.com/gohugoio/hugo/commit/8fb594bfb090c017d4e5cbb2905780221e202c41) [#989](https://github.com/gohugoio/hugo/issues/989)). You can also now configure Blackfriday to render **« French Guillemets »** ([cb9dfc26](https://github.com/gohugoio/hugo/commit/cb9dfc2613ae5125cafa450097fb0f62dd3770e7) [#3725](https://github.com/gohugoio/hugo/issues/3725)). To enable French Guillemets, put this in your site `config.toml`:
+This release brings a choice of **AP Style or Chicago Style Title Case** ([8fb594bf](https://github.com/gohugoio/hugo/commit/8fb594bfb090c017d4e5cbb2905780221e202c41) [#989](https://github.com/gohugoio/hugo/issues/989)). You can also now configure Blackfriday to render **« French Guillemets »** ([cb9dfc26](https://github.com/gohugoio/hugo/commit/cb9dfc2613ae5125cafa450097fb0f62dd3770e7) [#3725](https://github.com/gohugoio/hugo/issues/3725)). To enable French Guillemets:


-```bash
+{{< code-toggle file="config" >}}
 [blackfriday]
 angledQuotes = true
 smartypantsQuotesNBSP = true
-```
+{{< /code-toggle >}}

 Oh, and this release also fixes it so you should see no ugly long crashes no more when you step wrong in your templates ([794ea21e](https://github.com/gohugoio/hugo/commit/794ea21e9449b876c5514f1ce8fe61449bbe4980)).

@@ -25,12 +25,13 @@ Hugo now has:
 ## Notes
 Hugo now defaults to **smart crop** when cropping images, if you don't specify it when calling `.Fill`.

-You can get the old default by adding this to your `config.toml`:
+You can get the old default by adding this:

-```toml
+{{< code-toggle file="config" >}}
 [imaging]
 anchor = "center"
-```
+{{< /code-toggle >}}
+
 Also, we have removed the superflous anchor name from the processed filenames that does not use this anchor, so it can be wise to run `hugo --gc` once to remove unused images.

 ## Enhancements
@@ -13,7 +13,7 @@ This is a bug-fix release with a couple of important fixes. After getting feedba

 It adds support for overlapping file mounts, even for the filesystems where we walk down the directory structure. One relevant example that is fixed by this release:

-```toml
+{{< code-toggle file="config" >}}
 [module]
 [[module.mounts]]
 source="content1"
@@ -21,7 +21,7 @@ target="content"
 [[module.mounts]]
 source="content2"
 target="content/docs"
-```
+{{< /code-toggle >}}

 The above is obviously both common and very useful. This was never an issue with the situations where you load a specific file/directory (e.g. `resources.Get "a/b/c/d/sunset.jpg"`).

@@ -6,12 +6,12 @@ description: "Native inline, recursive import support in PostCSS/Tailwind, \"dep
 categories: ["Releases"]
 ---

-This release adds [inline `@import`](/hugo-pipes/postcss/#options) support to `resources.PostCSS`, with imports relative to Hugo's virtual, composable file system. Another useful addition is the new `build` [configuration section](/getting-started/configuration/#configure-build). As an example in `config.toml`:
+This release adds [inline `@import`](/hugo-pipes/postcss/#options) support to `resources.PostCSS`, with imports relative to Hugo's virtual, composable file system. Another useful addition is the new `build` [configuration section](/getting-started/configuration/#configure-build). As an example:

-```toml
+{{< code-toggle file="config" >}}
 [build]
  useResourceCacheWhen = "always"
-```
+{{< /code-toggle >}}

 The above will tell Hugo to _always_ use the cached build resources inside `resources/_gen` for the build steps requiring a non-standard dependency (PostCSS and SCSS/SASS). Valid values are `never`, `always` and `fallback` (default).

@@ -10,7 +10,7 @@ The two main items in Hugo 0.67.0 is custom HTTP header support in `hugo server`

 Being able to [configure HTTP headers](https://gohugo.io/getting-started/configuration/#configure-server) in your development server means that you can now verify how your site behaves with the intended Content Security Policy settings etc., e.g.:

-```toml
+{{< code-toggle file="config" >}}
 [server]
 [[server.headers]]
 for = "/**.html"
@@ -21,7 +21,7 @@ X-XSS-Protection = "1; mode=block"
 X-Content-Type-Options = "nosniff"
 Referrer-Policy = "strict-origin-when-cross-origin"
 Content-Security-Policy = "script-src localhost:1313"
-```
+{{< /code-toggle >}}

 **Note:** This release also changes how raw HTML files inside /content is processed to be in line with the documentation. See [#7030](https://github.com/gohugoio/hugo/issues/7030).

@@ -46,13 +46,13 @@ We have added a `force` flag to the [server redirects](https://gohugo.io/getting

 This is set to default `false`. If you want the old behaviour you need to add this flag to your configuration:

-```toml
+{{< code-toggle file="config" >}}
 [[redirects]]
 from = "/myspa/**"
 to = "/myspa/"
 status = 200
 force = true
-```
+{{< /code-toggle >}}

 ## Enhancements

@@ -128,12 +128,12 @@ There are several [Hugo Modules](https://gohugo.io/hugo-modules/)-related improv

 ## Minify - Keep Comments

-Keep comments when running `hugo --minify` with a new setting in config.toml. 
+Keep comments when running `hugo --minify` with a new setting:

-```toml
+{{< code-toggle file="config" >}}
 [minify.tdewolff.html]
 keepComments = true
-```
+{{< /code-toggle >}}

 The default value for this setting is `false`.

@@ -23,7 +23,8 @@ If you navigate to https://gohugo.io and look in the Chrome developer network co
 ## 1. Configure Netlify Output Formats

 Add a new custom media type and two new output formats to `config.toml`. For more on output formats in Hugo, see [Custom Output Formats](/templates/output-formats/).
-```bash
+
+```toml
 [outputs]
 home = [ "HTML", "RSS", "REDIR", "HEADERS" ]

@@ -51,7 +51,7 @@ The example below is a bit contrived, but it illustrates the flexibility of data

 `jacopastorius.toml` contains the content below. `johnpatitucci.toml` contains a similar list:

-```
+{{< code-toggle file="jacopastorius" >}}
 discography = [
 "1974 – Modern American Music … Period! The Criteria Sessions",
 "1974 – Jaco",
@@ -69,7 +69,7 @@ discography = [
 "2003 - Punk Jazz: The Jaco Pastorius Anthology (compilation)",
 "2007 - The Essential Jaco Pastorius (compilation)"
 ]
-```
+{{< /code-toggle >}}

 The list of bass players can be accessed via `.Site.Data.jazz.bass`, a single bass player by adding the filename without the suffix, e.g. `.Site.Data.jazz.bass.jacopastorius`.

@@ -66,7 +66,7 @@ Hugo also ships with an internal template for [Disqus comments][disqus], a popul

 ### Configure Disqus

-To use Hugo's Disqus template, you first need to set a single value in your site's `config.toml` or `config.yml`:
+To use Hugo's Disqus template, you first need to set a single configuration value:

 {{< code-toggle file="config" >}}
 disqusShortname = "yourdiscussshortname"
@@ -43,15 +43,15 @@ The table below shows the RSS template lookup order for the different page kinds

 By default, Hugo will create an unlimited number of RSS entries. You can limit the number of articles included in the built-in RSS templates by assigning a numeric value to `rssLimit:` field in your project's [`config` file][config].

-The following values will also be included in the RSS output if specified in your site’s configuration:
+The following values will also be included in the RSS output if specified:

-```toml
+{{< code-toggle file="config" >}}
 languageCode = "en-us"
 copyright = "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."

 [author]
    name = "My Name Here"
-```
+{{< /code-toggle >}}

 ## The Embedded rss.xml