hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-18 15:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Centralize external links

Browse Source
This commit is contained in:
mark
2023-01-14 07:44:47 +01:00
parent 8bb66ff0cd
commit b61c68ce68
7 changed files with 75 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
config/_default/params.toml
View File

@@ -60,13 +60,10 @@ schemaSection = "blog"
light = "#f8f9fa" light = "#f8f9fa"
dark = "#212529" dark = "#212529"
[main] [main]
featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
logo = "/img/logo_embedded.svg" logo = "/img/logo_embedded.svg"
[comments] [comments]
enabled = false enabled = false
repo = "" # Replace with your repository. repo = "" # Replace with your repository.
@@ -75,3 +72,41 @@ schemaSection = "blog"
# By default, light and dark mode correspond to github-light and github-dark, respectively. # By default, light and dark mode correspond to github-light and github-dark, respectively.
# Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark. # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
#theme = "" #theme = ""
[links]
bootstrap = "https://getbootstrap.com"
bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
cc_by_nc_4_0 = "https://creativecommons.org/licenses/by-nc/4.0/"
commit_message = "https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html"
contrast_checker = "https://accessibleweb.com/color-contrast-checker/"
css_codeguide = "https://codeguide.co/#css"
eslint = "https://eslint.org"
flexsearch = "https://github.com/nextapps-de/flexsearch"
git_download = "https://git-scm.com"
github_pr = "https://help.github.com/articles/about-pull-requests/"
github_rebase = "https://help.github.com/articles/about-git-rebase/"
html_codeguide = "https://codeguide.co/#html"
hugo = "https://gohugo.io"
hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
issue_tracker = "https://github.com/markdumay/hugo-theme-hinode/issues"
license = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
markdown_md013 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length"
markdown_md024 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content"
markdown_md026 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md026---trailing-punctuation-in-heading"
markdown_md033 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md033---inline-html"
markdown_md034 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md034---bare-url-used"
markdown_md051 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md051---link-fragments-should-be-valid"
markdown_md053 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md053---link-and-image-reference-definitions-should-be-needed"
markdown_rules = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md"
markdownlint = "https://github.com/DavidAnson/markdownlint-cli2"
mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
netlify = "https://www.netlify.com"
nodejs = "https://nodejs.org"
npm = "https://www.npmjs.com"
observatory = "https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org"
pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F"
repository = "https://github.com/markdumay/hugo-theme-hinode"
repository_child = "https://github.com/markdumay/hugo-theme-hinode-child.git"
stylelint = "https://stylelint.io"
utterances = "https://utteranc.es"
wcag_contrast = "https://www.w3.org/TR/WCAG20/#visual-audio-contrast"

5
content/en/docs/0.8/components/badge.md
View File

@@ -17,7 +17,7 @@ N/A
## Example ## Example
Use HTML code to display a badge for a heading. See the Bootstrap [documentation][bs_badge_heading] for more options. The following example displays a badge for a heading of size four. Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
```html ```html
<h6>Example heading of size four <span class="badge bg-secondary">New</span></h6> <h6>Example heading of size four <span class="badge bg-secondary">New</span></h6>
@@ -26,6 +26,3 @@ Use HTML code to display a badge for a heading. See the Bootstrap [documentation
The result looks like this. The result looks like this.
<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4> <h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
<!-- MARKDOWN PUBLIC LINKS -->
[bs_badge_heading]: https://getbootstrap.com/docs/5.2/components/badge/#headings

5
content/en/docs/0.8/components/image.md
View File

@@ -9,7 +9,7 @@ layout: docs
## Overview ## Overview
Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file][hugo_imaging] (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers. Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set]({{< param "links.mozilla_image" >}}) to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file]({{< param "links.hugo_imaging" >}}) (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.
## Arguments ## Arguments
@@ -34,6 +34,3 @@ As an example, the following shortcode displays an image with rounded corners an
The result looks like this: The result looks like this:
{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}} {{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

14
content/en/docs/0.8/getting-started/commands.md
View File

@@ -6,7 +6,7 @@ group: getting-started
layout: docs layout: docs
--- ---
The Hinode theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies. The `package.json` file in the repository root defines several commands to simplify local development and testing. The following paragraphs describe the main commands. The Hinode theme uses [Node Package Manager]({{< param "links.npm" >}}) to automate the build process and to keep track of dependencies. The `package.json` file in the repository root defines several commands to simplify local development and testing. The following paragraphs describe the main commands.
## Starting a local server ## Starting a local server
@@ -40,9 +40,9 @@ npm run build:debug
Use the the following command to analyze the source code and to test for any stylistic errors. The lint command validates three types of files in the `assets` folder and `content` folder: Use the the following command to analyze the source code and to test for any stylistic errors. The lint command validates three types of files in the `assets` folder and `content` folder:
* Javascript (`assets/*.js`) using [eslint][eslint]. * Javascript (`assets/*.js`) using [eslint]({{< param "links.eslint" >}}).
* CSS and SASS (`assets/scss/**/*.{css,sass,scss,sss,less}`) using [stylelint][stylelint]. * CSS and SASS (`assets/scss/**/*.{css,sass,scss,sss,less}`) using [stylelint]({{< param "links.stylelint" >}}).
* Markdown (`*.md` and `content/**/*.md`) using [markdownlint-cli2][markdownlint]. * Markdown (`*.md` and `content/**/*.md`) using [markdownlint-cli2]({{< param "links.markdownlint" >}}).
The basic configuration of these linting tools is defined in the repository root. The basic configuration of these linting tools is defined in the repository root.
@@ -73,9 +73,3 @@ Be sure to install the upgraded dependencies if needed:
{{% command %}} {{% command %}}
npm install npm install
{{% /command %}} {{% /command %}}
<!-- MARKDOWN PUBLIC LINKS -->
[npm]: https://www.npmjs.com
[eslint]: https://eslint.org
[stylelint]: https://stylelint.io/
[markdownlint]: https://github.com/DavidAnson/markdownlint-cli2

66
content/en/docs/0.8/getting-started/contribute.md
View File

@@ -11,21 +11,21 @@ The Hinode theme is fully open source and welcomes any contributions, either big
## Using the issue tracker ## Using the issue tracker
The [issue tracker][issue_tracker] on GitHub is the preferred channel for bug reports, feature requests and submitting pull requests. The [issue tracker]({{< param "links.issue_tracker" >}}) on GitHub is the preferred channel for bug reports, feature requests and submitting pull requests.
## Bug reports ## Bug reports
A bug is a *demonstrable problem* that is caused by the code in the repository. This may also include issues with the documentation or configuration files. Before filing a bug report, please consider the following guidelines: A bug is a *demonstrable problem* that is caused by the code in the repository. This may also include issues with the documentation or configuration files. Before filing a bug report, please consider the following guidelines:
- Validate your HTML and Markdown content to ensure your problem isn't caused by a simple error in your own code. - Validate your HTML and Markdown content to ensure your problem isn't caused by a simple error in your own code.
- Use the GitHub [issue search][issue_tracker] — check if the issue has already been reported. - Use the GitHub [issue search]({{< param "links.issue_tracker" >}}) — check if the issue has already been reported.
- Check if the issue has been fixed — try to reproduce it using the latest main in the [repository][repository]. - Check if the issue has been fixed — try to reproduce it using the latest main in the [repository]({{< param "links.repository" >}}).
- Isolate the problem — ideally create a reduced test case. - Isolate the problem — ideally create a reduced test case.
- Use the provided template in the [issue tracker][issue_tracker] to capture the context, evidence and steps on how to reproduce the issue. - Use the provided template in the [issue tracker]({{< param "links.issue_tracker" >}}) to capture the context, evidence and steps on how to reproduce the issue.
## Feature requests ## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. Please use the provided template in the [issue tracker][issue_tracker] to capture the idea and context. Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. Please use the provided template in the [issue tracker]({{< param "links.issue_tracker" >}}) to capture the idea and context.
## Pull requests ## Pull requests
@@ -58,23 +58,23 @@ Adhering to the following process is the best way to get your work included in t
git checkout -b <topic-branch-name> git checkout -b <topic-branch-name>
``` ```
1. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines][commit_message]. Use Git's [interactive rebase][github_rebase] feature to tidy up your commits before making them public. 2. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines]({{< param "links.commit_message" >}}). Use Git's [interactive rebase]({{< param "links.github_rebase" >}}) feature to tidy up your commits before making them public.
1. Locally merge (or rebase) the upstream development branch into your topic branch: 3. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash ```bash
git pull [--rebase] upstream main git pull [--rebase] upstream main
``` ```
1. Push your topic branch up to your fork: 4. Push your topic branch up to your fork:
```bash ```bash
git push origin <topic-branch-name> git push origin <topic-branch-name>
``` ```
1. Open a [Pull Request][github_pr] with a clear title and description against the main branch. 5. Open a [Pull Request]({{< param "links.github_pr" >}})with a clear title and description against the main branch.
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT license][license] (if it includes code changes) and under the terms of the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license (if it includes documentation changes). **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT license]({{< param "links.license" >}}) (if it includes code changes) and under the terms of the Creative Commons ([CC BY-NC 4.0)]({{< param "links.cc_by_nc_4_0" >}}) license (if it includes documentation changes).
## Coding guidelines ## Coding guidelines
@@ -82,7 +82,7 @@ In general, run `npm run lint` before committing to ensure your changes follow o
### HTML ### HTML
[Adhere to the Code Guide][html_codeguide]. [Adhere to the Code Guide]({{< param "links.html_codeguide" >}}).
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags). - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
- Use npm packages for third-party JS when possible. - Use npm packages for third-party JS when possible.
@@ -90,9 +90,9 @@ In general, run `npm run lint` before committing to ensure your changes follow o
### CSS ### CSS
[Adhere to the Code Guide][css_codeguide]. [Adhere to the Code Guide]({{< param "links.css_codeguide" >}}).
- When feasible, default color palettes should comply with [WCAG color contrast guidelines][wcag_contrast]. - When feasible, default color palettes should comply with [WCAG color contrast guidelines]({{< param "links.wcag_contrast" >}}).
### Javascript ### Javascript
@@ -105,39 +105,19 @@ Bundle related client-side javascript in a logically named file. Add the file to
### Markdown ### Markdown
See [markdown rules][markdown_rules] for more details. The following rules are globally disabled: See [markdown rules]({{< param "links.markdown_rules" >}}) for more details. The following rules are globally disabled:
| # | Rule | Remarks | | # | Rule | Remarks |
|-------|-------------------------------------------------------------------------|---------------------------------| |-------|-----------------------------------------------------------------------------------------------|---------------------------------|
| MD013 | [Line length][markdown_md013] | | | MD013 | [Line length]({{< param "links.markdown_md013" >}}) | |
| MD024 | [Multiple headings with the same content][markdown_md024] | | | MD024 | [Multiple headings with the same content]({{< param "links.markdown_md024" >}}) | |
| MD026 | [Trailing punctuation in heading][markdown_md026] | | | MD026 | [Trailing punctuation in heading]({{< param "links.markdown_md026" >}}) | |
| MD033 | [Inline HTML][markdown_md033] | | | MD033 | [Inline HTML]({{< param "links.markdown_md033" >}}) | |
| MD034 | [Bare URL used][markdown_md034] | | | MD034 | [Bare URL used]({{< param "links.markdown_md034" >}}) | |
| MD051 | [Link fragments should be valid][markdown_md051] | | | MD051 | [Link fragments should be valid]({{< param "links.markdown_md051" >}}) | |
| MD053 | [Link and image reference definitions should be needed][markdown_md053] | Disabled due to false positives | | MD053 | [Link and image reference definitions should be needed]({{< param "links.markdown_md053" >}}) | Disabled due to false positives |
{.table} {.table}
## License ## License
By contributing your code, you agree to license your contribution under the [MIT license][license]. By contributing to the documentation, you agree to license your contribution under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license. By contributing your code, you agree to license your contribution under the [MIT license]({{< param "links.license" >}}). By contributing to the documentation, you agree to license your contribution under the Creative Commons ([CC BY-NC 4.0)]({{< param "links.cc_by_nc_4_0" >}}) license.
[issue_tracker]: https://github.com/markdumay/hugo-theme-hinode/issues
[license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
[cc-by-nc-4.0]: https://creativecommons.org/licenses/by-nc/4.0/
[github_rebase]: https://help.github.com/articles/about-git-rebase/
[repository]: https://github.com/markdumay/hugo-theme-hinode
[commit_message]: https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html
[github_pr]: https://help.github.com/articles/about-pull-requests/
[html_codeguide]: https://codeguide.co/#html
[css_codeguide]: https://codeguide.co/#css
[wcag_contrast]: https://www.w3.org/TR/WCAG20/#visual-audio-contrast
[markdown_rules]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
[markdown_md013]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length
[markdown_md024]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content
[markdown_md026]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md026---trailing-punctuation-in-heading
[markdown_md033]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md033---inline-html
[markdown_md034]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md034---bare-url-used
[markdown_md051]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md051---link-fragments-should-be-valid
[markdown_md053]: https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md053---link-and-image-reference-definitions-should-be-needed

31
content/en/docs/0.8/getting-started/introduction.md
View File

@@ -12,11 +12,11 @@ aliases:
layout: docs layout: docs
--- ---
Hinode is a clean blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies. More information is available on the [about]({{< ref "about" >}} "about") page. Hinode is a clean blog theme for [Hugo]({{< param "links.hugo" >}}), an open-source static site generator. Based on the [Bootstrap 5]({{< param "links.bootstrap" >}}) framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch]({{< param "links.flexsearch" >}}) to enable full text search across your site. Finally, the theme uses [Node Package Manager]({{< param "links.npm" >}}) to automate the build process and to keep track of dependencies. More information is available on the [about]({{< ref "about" >}} "about") page.
## Prerequisites ## Prerequisites
Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website][git_download]. Next, download and install [Node.js][nodejs] (it includes npm) for your platform. Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website]({{< param "links.git_download" >}}). Next, download and install [Node.js]({{< param "links.nodejs" >}}) (it includes npm) for your platform.
## Installation ## Installation
@@ -24,7 +24,7 @@ Start a new Hinode project in three steps:
### 1. Create a new site ### 1. Create a new site
Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically. Hinode is available as a [child theme]({{< param "links.repository_child" >}}), and a [main theme]({{< param "links.repository" >}}). The child theme uses [npm]({{< param "links.npm" >}}) to link to the latest available version of the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
Not quite sure? Use the Hinode child theme. Not quite sure? Use the Hinode child theme.
@@ -60,26 +60,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
|-------|---------| |-------|---------|
| Menu items | `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer. | | Menu items | `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer. |
| Content | Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`. | | Content | Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`. |
| Theme style | Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font. | | Theme style | Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker]({{< param "links.contrast_checker" >}}) to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font. |
| Comments | Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo` of the `[comments]` section of `params.toml`. | | Comments | Comments are powered by [utterances]({{< param "links.utterances" >}}), a lightweight comments widget built on GitHub issues. Update the `repo` of the `[comments]` section of `params.toml`. |
| Security policy | The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify]. | | Security policy | The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify]({{< param "links.netlify" >}}). |
{.table} {.table}
<!-- MARKDOWN PUBLIC LINKS -->
[bootstrap]: https://getbootstrap.com
[contrast_checker]: https://accessibleweb.com/color-contrast-checker/
[flexsearch]: https://github.com/nextapps-de/flexsearch
[git_download]: https://git-scm.com
[hugo]: https://gohugo.io
[netlify]: https://www.netlify.com
[nodejs]: https://nodejs.org
[npm]: https://www.npmjs.com
[utterances]: https://utteranc.es
<!-- MARKDOWN MAINTAINED LINKS -->
<!-- TODO: add blog link
[blog]: https://markdumay.com
[blog]: https://github.com/markdumay
-->
[repository]: https://github.com/markdumay/hugo-theme-hinode.git
[repository_child]: https://github.com/markdumay/hugo-theme-hinode-child.git

6
content/nl/blog/custom-shortcodes.md
View File

@@ -183,7 +183,7 @@ order by last_name;
## Image Shortcode ## Image Shortcode
Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set][mozilla_image] om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie][hugo_imaging] (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. De shortcode ondersteunt de volgende parameters: Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set]({{< param "links.mozilla_image" >}}) om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie]({{< param "links.hugo_imaging" >}}) (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. De shortcode ondersteunt de volgende parameters:
| Parameter | Verplicht | Toelichting | | Parameter | Verplicht | Toelichting |
|-----------|----------|-------------| |-----------|----------|-------------|
@@ -202,7 +202,3 @@ Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en
Het resultaat ziet er als volgt uit: Het resultaat ziet er als volgt uit:
{{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded">}} {{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded">}}
<!-- MARKDOWN PUBLIC LINKS -->
[mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration