mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-18 15:33:10 +00:00
Centralize external links
This commit is contained in:
mark
@@ -60,13 +60,10 @@ schemaSection = "blog"
|
||||
light = "#f8f9fa"
|
||||
dark = "#212529"
|
||||
|
||||
|
||||
|
||||
[main]
|
||||
featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
|
||||
logo = "/img/logo_embedded.svg"
|
||||
|
||||
|
||||
[comments]
|
||||
enabled = false
|
||||
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.
|
||||
# Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
|
||||
#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"
|
||||
@@ -17,7 +17,7 @@ N/A
|
||||
|
||||
## 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
|
||||
<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.
|
||||
|
||||
<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
|
||||
|
||||
@@ -9,7 +9,7 @@ layout: docs
|
||||
|
||||
## 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
|
||||
|
||||
@@ -34,6 +34,3 @@ As an example, the following shortcode displays an image with rounded corners an
|
||||
|
||||
The result looks like this:
|
||||
{{< 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
|
||||
|
||||
@@ -6,7 +6,7 @@ group: getting-started
|
||||
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
|
||||
|
||||
@@ -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:
|
||||
|
||||
* Javascript (`assets/*.js`) using [eslint][eslint].
|
||||
* CSS and SASS (`assets/scss/**/*.{css,sass,scss,sss,less}`) using [stylelint][stylelint].
|
||||
* Markdown (`*.md` and `content/**/*.md`) using [markdownlint-cli2][markdownlint].
|
||||
* Javascript (`assets/*.js`) using [eslint]({{< param "links.eslint" >}}).
|
||||
* CSS and SASS (`assets/scss/**/*.{css,sass,scss,sss,less}`) using [stylelint]({{< param "links.stylelint" >}}).
|
||||
* Markdown (`*.md` and `content/**/*.md`) using [markdownlint-cli2]({{< param "links.markdownlint" >}}).
|
||||
|
||||
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 %}}
|
||||
npm install
|
||||
{{% /command %}}
|
||||
|
||||
<!-- MARKDOWN PUBLIC LINKS -->
|
||||
[npm]: https://www.npmjs.com
|
||||
[eslint]: https://eslint.org
|
||||
[stylelint]: https://stylelint.io/
|
||||
[markdownlint]: https://github.com/DavidAnson/markdownlint-cli2
|
||||
|
||||
@@ -11,21 +11,21 @@ The Hinode theme is fully open source and welcomes any contributions, either big
|
||||
|
||||
## 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
|
||||
|
||||
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.
|
||||
- Use the GitHub [issue search][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].
|
||||
- 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]({{< param "links.repository" >}}).
|
||||
- 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 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
|
||||
|
||||
@@ -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>
|
||||
```
|
||||
|
||||
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
|
||||
git pull [--rebase] upstream main
|
||||
```
|
||||
|
||||
1. Push your topic branch up to your fork:
|
||||
4. Push your topic branch up to your fork:
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
@@ -82,7 +82,7 @@ In general, run `npm run lint` before committing to ensure your changes follow o
|
||||
|
||||
### 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 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
|
||||
|
||||
[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
|
||||
|
||||
@@ -105,39 +105,19 @@ Bundle related client-side javascript in a logically named file. Add the file to
|
||||
|
||||
### 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 |
|
||||
|-------|-------------------------------------------------------------------------|---------------------------------|
|
||||
| MD013 | [Line length][markdown_md013] | |
|
||||
| MD024 | [Multiple headings with the same content][markdown_md024] | |
|
||||
| MD026 | [Trailing punctuation in heading][markdown_md026] | |
|
||||
| MD033 | [Inline HTML][markdown_md033] | |
|
||||
| MD034 | [Bare URL used][markdown_md034] | |
|
||||
| MD051 | [Link fragments should be valid][markdown_md051] | |
|
||||
| MD053 | [Link and image reference definitions should be needed][markdown_md053] | Disabled due to false positives |
|
||||
|-------|-----------------------------------------------------------------------------------------------|---------------------------------|
|
||||
| MD013 | [Line length]({{< param "links.markdown_md013" >}}) | |
|
||||
| MD024 | [Multiple headings with the same content]({{< param "links.markdown_md024" >}}) | |
|
||||
| MD026 | [Trailing punctuation in heading]({{< param "links.markdown_md026" >}}) | |
|
||||
| MD033 | [Inline HTML]({{< param "links.markdown_md033" >}}) | |
|
||||
| MD034 | [Bare URL used]({{< param "links.markdown_md034" >}}) | |
|
||||
| MD051 | [Link fragments should be valid]({{< param "links.markdown_md051" >}}) | |
|
||||
| MD053 | [Link and image reference definitions should be needed]({{< param "links.markdown_md053" >}}) | Disabled due to false positives |
|
||||
{.table}
|
||||
|
||||
## 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.
|
||||
|
||||
[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
|
||||
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.
|
||||
|
||||
@@ -12,11 +12,11 @@ aliases:
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
@@ -24,7 +24,7 @@ Start a new Hinode project in three steps:
|
||||
|
||||
### 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.
|
||||
|
||||
@@ -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. |
|
||||
| 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. |
|
||||
| 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`. |
|
||||
| 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]. |
|
||||
| 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]({{< 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]({{< param "links.netlify" >}}). |
|
||||
{.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
|
||||
|
||||
@@ -183,7 +183,7 @@ order by last_name;
|
||||
|
||||
## 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 |
|
||||
|-----------|----------|-------------|
|
||||
@@ -202,7 +202,3 @@ Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en
|
||||
|
||||
Het resultaat ziet er als volgt uit:
|
||||
{{< 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
|
||||
|
||||
Reference in New Issue
Block a user