mirror of
https://github.com/gohugoio/hugo.git
synced 2025-04-28 06:30:33 +03:00
Merge commit 'a6e635ca7d'
This commit is contained in:
Bjørn Erik Pedersen
commit
e99eba39e7
143 changed files with 3258 additions and 2109 deletions
|
|
@ -35,7 +35,7 @@ The template above is rendered to:
|
|||
|
||||
## Example of `after` with `first`: 2nd–4th most recent articles
|
||||
|
||||
You can use `after` in combination with the [`first`] function and Hugo's [powerful sorting methods][lists]. Let's assume you have a list page at `example.com/articles`. You have 10 articles, but you want your templating for the [list/section page] to show only two rows:
|
||||
You can use `after` in combination with the [`first`] function and Hugo's [powerful sorting methods](/quick-reference/page-collections/#sort). Let's assume you have a `section` page at `example.com/articles`. You have 10 articles, but you want your template to show only two rows:
|
||||
|
||||
1. The top row is titled "Featured" and shows only the most recently published article (i.e. by `publishdate` in the content files' front matter).
|
||||
2. The second row is titled "Recent Articles" and shows only the 2nd- to 4th-most recently published articles.
|
||||
|
|
@ -66,6 +66,4 @@ You can use `after` in combination with the [`first`] function and Hugo's [power
|
|||
{{< /code >}}
|
||||
|
||||
[`first`]: /functions/collections/first/
|
||||
[list/section page]: /templates/section-templates/
|
||||
[lists]: /templates/lists/#sort-content
|
||||
[`slice`]: /functions/collections/slice/
|
||||
|
|
|
|||
|
|
@ -28,4 +28,4 @@ aliases: [/functions/group]
|
|||
{{ end }}
|
||||
```
|
||||
|
||||
The page group you get from `group` is of the same type you get from the built-in [group methods](/templates/lists#group-content) in Hugo. The above example can be [paginated](/templates/pagination/#list-paginator-pages).
|
||||
The page group you get from `group` is of the same type you get from the built-in [group methods](/quick-reference/page-collections/#group) in Hugo. The example above can be [paginated](/templates/pagination/).
|
||||
|
|
|
|||
|
|
@ -25,6 +25,3 @@ A useful example is to use it as `AND` filters when combined with where:
|
|||
The above fetches regular pages not of `page` or `about` type unless they are pinned. And finally, we exclude all pages with no `images` set in Page parameters.
|
||||
|
||||
See [union](/functions/collections/union) for `OR`.
|
||||
|
||||
[partials]: /templates/partials/
|
||||
[single]: /templates/single-page-templates/
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
---
|
||||
title: crypto.FNV32a
|
||||
description: Returns the FNV (Fowler–Noll–Vo) 32-bit hash of a given string.
|
||||
description: Returns the 32-bit FNV (Fowler–Noll–Vo) non-cryptographic hash of the given string.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/hash/Xxhash
|
||||
- functions/crypto/HMAC
|
||||
- functions/crypto/MD5
|
||||
- functions/crypto/SHA1
|
||||
- functions/crypto/SHA256
|
||||
returnType: int
|
||||
signatures: [crypto.FNV32a STRING]
|
||||
aliases: [/functions/crypto.fnv32a]
|
||||
expiryDate: 2025-07-31 # deprecated 2024-07-31
|
||||
---
|
||||
|
||||
{{< new-in 0.98.0 >}}
|
||||
{{% deprecated-in 0.129.0 %}}
|
||||
Use [`hash.FNV32a`] instead.
|
||||
|
||||
This function calculates the 32-bit [FNV1a hash](https://en.wikipedia.org/wiki/Fowler%E2%80%93Noll%E2%80%93Vo_hash_function#FNV-1a_hash) of a given string according to the [specification](https://datatracker.ietf.org/doc/html/draft-eastlake-fnv-12):
|
||||
[`hash.FNV32a`]: /functions/hash/FNV32a/
|
||||
{{% /deprecated-in %}}
|
||||
|
||||
```go-html-template
|
||||
{{ crypto.FNV32a "Hello world" }} → 1498229191
|
||||
|
|
|
|||
129
docs/content/en/functions/css/PostCSS.md
Normal file
129
docs/content/en/functions/css/PostCSS.md
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
---
|
||||
title: css.PostCSS
|
||||
description: Processes the given resource with PostCSS using any PostCSS plugin.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [postCSS]
|
||||
related:
|
||||
- functions/css/Sass
|
||||
- functions/css/TailwindCSS
|
||||
returnType: resource.Resource
|
||||
signatures: ['css.PostCSS [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.128.0 >}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "css/main.css" | postCSS }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Setup
|
||||
|
||||
Follow the steps below to transform CSS using any of the available [PostCSS plugins].
|
||||
|
||||
Step 1
|
||||
: Install [Node.js].
|
||||
|
||||
Step 2
|
||||
: Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to your CSS rules:
|
||||
|
||||
```sh
|
||||
npm i -D postcss postcss-cli autoprefixer
|
||||
```
|
||||
|
||||
Step 3
|
||||
: Create a PostCSS configuration file in the root of your project. You must name this file `postcss.config.js` or another [supported file name]. For example:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer')
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
{{% note %}}
|
||||
{{% include "functions/resources/_common/postcss-windows-warning.md" %}}
|
||||
{{% /note %}}
|
||||
|
||||
Step 4
|
||||
: Place your CSS file within the `assets/css` directory.
|
||||
|
||||
Step 5
|
||||
: Process the resource with PostCSS:
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "css/main.css" | postCSS }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
The `css.PostCSS` method takes an optional map of options.
|
||||
|
||||
config
|
||||
: (`string`) The directory that contains the PostCSS configuration file. Default is the root of the project directory.
|
||||
|
||||
noMap
|
||||
: (`bool`) Default is `false`. If `true`, disables inline sourcemaps.
|
||||
|
||||
inlineImports
|
||||
: (`bool`) Default is `false`. Enable inlining of @import statements. It does so recursively, but will only import a file once. URL imports (e.g. `@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');`) and imports with media queries will be ignored. Note that this import routine does not care about the CSS spec, so you can have @import anywhere in the file. Hugo will look for imports relative to the module mount and will respect theme overrides.
|
||||
|
||||
skipInlineImportsNotFound
|
||||
: (`bool`) Default is `false`. Before Hugo 0.99.0 when `inlineImports` was enabled and we failed to resolve an import, we logged it as a warning. We now fail the build. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set `skipInlineImportsNotFound` to true.
|
||||
|
||||
```go-html-template
|
||||
{{ $opts := dict "config" "config-directory" "noMap" true }}
|
||||
{{ with resources.Get "css/main.css" | postCSS $opts }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## No configuration file
|
||||
|
||||
To avoid using a PostCSS configuration file, you can specify a minimal configuration using the options map.
|
||||
|
||||
use
|
||||
: (`string`) A space-delimited list of PostCSS plugins to use.
|
||||
|
||||
parser
|
||||
: (`string`) A custom PostCSS parser.
|
||||
|
||||
stringifier
|
||||
: (`string`) A custom PostCSS stringifier.
|
||||
|
||||
syntax
|
||||
: (`string`) Custom postcss syntax.
|
||||
|
||||
```go-html-template
|
||||
{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
|
||||
{{ with resources.Get "css/main.css" | postCSS $opts }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Check environment
|
||||
|
||||
The current Hugo environment name (set by `--environment` or in configuration or OS environment) is available in the Node context, which allows constructs like this:
|
||||
|
||||
```js
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const purgecss = require('@fullhuman/postcss-purgecss');
|
||||
module.exports = {
|
||||
plugins: [
|
||||
autoprefixer,
|
||||
process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
[node.js]: https://nodejs.org/en/download
|
||||
[postcss plugins]: https://www.postcss.parts/
|
||||
[supported file name]: https://github.com/postcss/postcss-load-config#usage
|
||||
[transpile to CSS]: /functions/css/sass/
|
||||
226
docs/content/en/functions/css/Sass.md
Normal file
226
docs/content/en/functions/css/Sass.md
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
---
|
||||
title: css.Sass
|
||||
description: Transpiles Sass to CSS.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [toCSS]
|
||||
related:
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
- functions/css/PostCSS
|
||||
- functions/resources/PostProcess
|
||||
returnType: resource.Resource
|
||||
signatures: ['css.Sass [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.128.0 >}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "sass/main.scss" }}
|
||||
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
|
||||
{{ with . | toCSS $opts }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ else }}
|
||||
{{ with . | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended edition, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language.
|
||||
|
||||
Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both.
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
[indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax
|
||||
|
||||
## Options
|
||||
|
||||
transpiler
|
||||
: (`string`) The transpiler to use, either `libsass` (default) or `dartsass`. Hugo's extended edition includes the LibSass transpiler. To use the Dart Sass transpiler, see the [installation instructions](#dart-sass) below.
|
||||
|
||||
targetPath
|
||||
: (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`.
|
||||
|
||||
vars
|
||||
: (`map`) A map of key-value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/).
|
||||
|
||||
```scss
|
||||
// LibSass
|
||||
@import "hugo:vars";
|
||||
|
||||
// Dart Sass
|
||||
@use "hugo:vars" as v;
|
||||
```
|
||||
|
||||
outputStyle
|
||||
: (`string`) Output styles available to LibSass include `nested` (default), `expanded`, `compact`, and `compressed`. Output styles available to Dart Sass include `expanded` (default) and `compressed`.
|
||||
|
||||
precision
|
||||
: (`int`) Precision of floating point math. Not applicable to Dart Sass.
|
||||
|
||||
enableSourceMap
|
||||
: (`bool`) If `true`, generates a source map.
|
||||
|
||||
sourceMapIncludeSources
|
||||
: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass.
|
||||
|
||||
includePaths
|
||||
: (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements.
|
||||
|
||||
```go-html-template
|
||||
{{ $opts := dict
|
||||
"transpiler" "dartsass"
|
||||
"targetPath" "css/style.css"
|
||||
"vars" site.Params.styles
|
||||
"enableSourceMap" (not hugo.IsProduction)
|
||||
"includePaths" (slice "node_modules/bootstrap/scss")
|
||||
}}
|
||||
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Dart Sass
|
||||
|
||||
The extended version of Hugo includes [LibSass] to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of [Dart Sass].
|
||||
|
||||
Use the latest features of the Sass language by installing Dart Sass in your development and production environments.
|
||||
|
||||
### Installation overview
|
||||
|
||||
Dart Sass is compatible with Hugo v0.114.0 and later.
|
||||
|
||||
If you have been using Embedded Dart Sass[^1] with Hugo v0.113.0 and earlier, uninstall Embedded Dart Sass, then install Dart Sass. If you have installed both, Hugo will use Dart Sass.
|
||||
|
||||
If you install Hugo as a [Snap package] there is no need to install Dart Sass. The Hugo Snap package includes Dart Sass.
|
||||
|
||||
[^1]: In 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass.
|
||||
|
||||
### Installing in a development environment
|
||||
|
||||
When you install Dart Sass somewhere in your PATH, Hugo will find it.
|
||||
|
||||
OS|Package manager|Site|Installation
|
||||
:--|:--|:--|:--
|
||||
Linux|Homebrew|[brew.sh]|`brew install sass/sass/sass`
|
||||
Linux|Snap|[snapcraft.io]|`sudo snap install dart-sass`
|
||||
macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass`
|
||||
Windows|Chocolatey|[chocolatey.org]|`choco install sass`
|
||||
Windows|Scoop|[scoop.sh]|`scoop install sass`
|
||||
|
||||
You may also install [prebuilt binaries] for Linux, macOS, and Windows.
|
||||
|
||||
Run `hugo env` to list the active transpilers.
|
||||
|
||||
### Installing in a production environment
|
||||
|
||||
For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries.
|
||||
|
||||
[^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your resources directory to your repository.
|
||||
|
||||
#### GitHub Pages
|
||||
|
||||
To install Dart Sass for your builds on GitHub Pages, add this step to the GitHub Pages workflow file:
|
||||
|
||||
```yaml
|
||||
- name: Install Dart Sass
|
||||
run: sudo snap install dart-sass
|
||||
```
|
||||
|
||||
If you are using GitHub Pages for the first time with your repository, GitHub provides a [starter workflow] for Hugo that includes Dart Sass. This is the simplest way to get started.
|
||||
|
||||
#### GitLab Pages
|
||||
|
||||
To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file should look something like this:
|
||||
|
||||
```yaml
|
||||
variables:
|
||||
HUGO_VERSION: 0.128.0
|
||||
DART_SASS_VERSION: 1.77.5
|
||||
GIT_DEPTH: 0
|
||||
GIT_STRATEGY: clone
|
||||
GIT_SUBMODULE_STRATEGY: recursive
|
||||
TZ: America/Los_Angeles
|
||||
image:
|
||||
name: golang:1.20-buster
|
||||
pages:
|
||||
script:
|
||||
# Install Dart Sass
|
||||
- curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
|
||||
- tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
|
||||
- cp -r dart-sass/* /usr/local/bin
|
||||
- rm -rf dart-sass*
|
||||
# Install Hugo
|
||||
- curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
|
||||
- apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
|
||||
- rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
|
||||
# Build
|
||||
- hugo --gc --minify
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
rules:
|
||||
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
|
||||
```
|
||||
|
||||
#### Netlify
|
||||
|
||||
To install Dart Sass for your builds on Netlify, the `netlify.toml` file should look something like this:
|
||||
|
||||
```toml
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.128.0"
|
||||
DART_SASS_VERSION = "1.77.5"
|
||||
TZ = "America/Los_Angeles"
|
||||
|
||||
[build]
|
||||
publish = "public"
|
||||
command = """\
|
||||
curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
|
||||
tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
|
||||
rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
|
||||
export PATH=/opt/build/repo/dart-sass:$PATH && \
|
||||
hugo --gc --minify \
|
||||
"""
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `css.Sass`. For example:
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "sass/main.scss" }}
|
||||
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
|
||||
{{ with . | toCSS $opts }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ else }}
|
||||
{{ with . | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
### Miscellaneous
|
||||
|
||||
If you build Hugo from source and run `mage test -v`, the test will fail if you install Dart Sass as a Snap package. This is due to the Snap package's strict confinement model.
|
||||
|
||||
[brew.sh]: https://brew.sh/
|
||||
[chocolatey.org]: https://community.chocolatey.org/packages/sass
|
||||
[ci/cd]: https://en.wikipedia.org/wiki/CI/CD
|
||||
[dart sass]: https://sass-lang.com/dart-sass
|
||||
[libsass]: https://sass-lang.com/libsass
|
||||
[prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest
|
||||
[scoop.sh]: https://scoop.sh/#/apps?q=sass
|
||||
[site configuration]: /getting-started/configuration/#configure-build
|
||||
[snap package]: /installation/linux/#snap
|
||||
[snapcraft.io]: https://snapcraft.io/dart-sass
|
||||
[starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml
|
||||
86
docs/content/en/functions/css/TailwindCSS.md
Normal file
86
docs/content/en/functions/css/TailwindCSS.md
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
---
|
||||
title: css.TailwindCSS
|
||||
description: Processes the given resource with the Tailwind CSS CLI.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
- functions/css/PostCSS
|
||||
returnType: resource.Resource
|
||||
signatures: ['css.TailwindCSS [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.128.0 >}}
|
||||
|
||||
<!-- TODO remove this admonition when feature is stable. -->
|
||||
|
||||
{{% note %}}
|
||||
This is an experimental feature pending the release of TailwindCSS v4.0.
|
||||
|
||||
The functionality, configuration requirements, and documentation are subject to change at any time and may be not compatible with prior releases.
|
||||
{{% /note %}}
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To use this function you must install the Tailwind CSS CLI v4.0 or later. You may install the CLI as an npm package or as a standalone executable. See the [Tailwind CSS documentation] for details.
|
||||
|
||||
[Tailwind CSS documentation]: https://tailwindcss.com/docs/installation
|
||||
|
||||
{{% note %}}
|
||||
Use npm to install the CLI prior to the v4.0 release of Tailwind CSS.
|
||||
|
||||
`npm install --save-dev tailwindcss@next @tailwindcss/cli@next`
|
||||
{{% /note %}}
|
||||
|
||||
## Options
|
||||
|
||||
minify
|
||||
: (`bool`) Whether to optimize and minify the output. Default is `false`.
|
||||
|
||||
optimize
|
||||
: (`bool`) Whether to optimize the output without minifying. Default is `false`.
|
||||
|
||||
inlineImports
|
||||
: (`bool`) Whether to enable inlining of `@import` statements. Inlining is performed recursively, but currently once only per file. It is not possible to import the same file in different scopes (root, media query, etc.). Note that this import routine does not care about the CSS specification, so you can have `@import` statements anywhere in the file. Default is `false`.
|
||||
|
||||
skipInlineImportsNotFound
|
||||
: (`bool`) When `inlineImports` is enabled, we fail the build if an import cannot be resolved. Enable this option to allow the build to continue and leave the import statement in place. Note that the inline importer does not process URL location or imports with media queries, so those will be left as-is even without enabling this option. Default is `false`.
|
||||
|
||||
## Example
|
||||
|
||||
Define a [cache buster] in your site configuration:
|
||||
|
||||
[cache buster]: /getting-started/configuration/#configure-cache-busters
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[[build.cachebusters]]
|
||||
source = 'layouts/.*'
|
||||
target = 'css'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
Process the resource:
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "css/main.css" }}
|
||||
{{ $opts := dict "minify" true }}
|
||||
{{ with . | css.TailwindCSS $opts }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{ else }}
|
||||
{{ with . | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
The example above publishes the minified CSS file to public/css/main.css.
|
||||
|
||||
See [this repository] for more information about the integration with Tailwind CSS v4.0.
|
||||
|
||||
[this repository]: https://github.com/bep/hugo-testing-tailwindcss-v4
|
||||
12
docs/content/en/functions/css/_index.md
Normal file
12
docs/content/en/functions/css/_index.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: CSS functions
|
||||
linkTitle: css
|
||||
description: Template functions to work with CSS and Sass files.
|
||||
categories: []
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: functions
|
||||
---
|
||||
|
||||
Use these functions to work with CSS and Sass files.
|
||||
|
|
@ -13,6 +13,7 @@ action:
|
|||
returnType: '[][]string'
|
||||
signatures: ['data.GetCSV SEPARATOR INPUT... [OPTIONS]']
|
||||
toc: true
|
||||
expiryDate: 2025-02-19 # deprecated 2024-02-19
|
||||
---
|
||||
|
||||
{{% deprecated-in 0.123.0 %}}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ action:
|
|||
returnType: any
|
||||
signatures: ['data.GetJSON INPUT... [OPTIONS]']
|
||||
toc: true
|
||||
expiryDate: 2025-02-19 # deprecated 2024-02-19
|
||||
---
|
||||
|
||||
{{% deprecated-in 0.123.0 %}}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ content/
|
|||
└── _index.md <-- title is "My Home Page"
|
||||
```
|
||||
|
||||
And this code in the home page template:
|
||||
And this code in the home template:
|
||||
|
||||
```go-html-template
|
||||
{{ range site.Sections }}
|
||||
|
|
@ -76,7 +76,7 @@ My Home Page
|
|||
My Home Page
|
||||
```
|
||||
|
||||
In the example above, the global `page` function accesses the `Page` object passed into the home page template; it does not access the `Page` object of the iterated pages.
|
||||
In the example above, the global `page` function accesses the `Page` object passed into the home template; it does not access the `Page` object of the iterated pages.
|
||||
|
||||
### Be aware of caching
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ Hugo renders:
|
|||
|
||||
See additional examples in the [partial templates] section.
|
||||
|
||||
[partial templates]: /templates/partials/#returning-a-value-from-a-partial
|
||||
[partial templates]: /templates/partial/#returning-a-value-from-a-partial
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
|
|||
|
|
@ -45,5 +45,5 @@ The example above can be rewritten using an [inline partial] template:
|
|||
{{% include "functions/go-template/_common/text-template.md" %}}
|
||||
|
||||
[`partial`]: /functions/partials/include/
|
||||
[inline partial]: /templates/partials/#inline-partials
|
||||
[inline partial]: /templates/partial/#inline-partials
|
||||
[embedded templates]: /templates/embedded/
|
||||
|
|
|
|||
21
docs/content/en/functions/hash/FNV32a.md
Normal file
21
docs/content/en/functions/hash/FNV32a.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: hash.FNV32a
|
||||
description: Returns the 32-bit FNV (Fowler–Noll–Vo) non-cryptographic hash of the given string.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/hash/Xxhash
|
||||
- functions/crypto/HMAC
|
||||
- functions/crypto/MD5
|
||||
- functions/crypto/SHA1
|
||||
- functions/crypto/SHA256
|
||||
returnType: int
|
||||
signatures: [hash.FNV32a STRING]
|
||||
aliases: [/functions/crypto.fnv32a]
|
||||
---
|
||||
|
||||
```go-html-template
|
||||
{{ hash.FNV32a "Hello world" }} → 1498229191
|
||||
```
|
||||
20
docs/content/en/functions/hash/XxHash.md
Normal file
20
docs/content/en/functions/hash/XxHash.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: hash.XxHash
|
||||
description: Returns the 64-bit xxHash non-cryptographic hash of the given string.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [xxhash]
|
||||
related:
|
||||
- functions/hash/FNV32a
|
||||
- functions/crypto/HMAC
|
||||
- functions/crypto/MD5
|
||||
- functions/crypto/SHA1
|
||||
- functions/crypto/SHA256
|
||||
returnType: string
|
||||
signatures: [hash.XxHash STRING]
|
||||
---
|
||||
|
||||
```go-html-template
|
||||
{{ hash.XxHash "Hello world" }} → c500b0c912b376d8
|
||||
```
|
||||
12
docs/content/en/functions/hash/_index.md
Normal file
12
docs/content/en/functions/hash/_index.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Hash functions
|
||||
linkTitle: hash
|
||||
description: Template functions to create non-cryptographic hashes.
|
||||
categories: []
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: functions
|
||||
---
|
||||
|
||||
Use these functions to create non-cryptographic hashes.
|
||||
|
|
@ -11,5 +11,5 @@ action:
|
|||
---
|
||||
|
||||
```go-html-template
|
||||
{{ hugo.Generator }} → <meta name="generator" content="Hugo 0.126.0">
|
||||
{{ hugo.Generator }} → <meta name="generator" content="Hugo 0.128.0">
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ action:
|
|||
signatures: [hugo.GoVersion]
|
||||
---
|
||||
|
||||
{{< new-in 0.101.0 >}}
|
||||
|
||||
```go-html-template
|
||||
{{ hugo.GoVersion }} → go1.21.1
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@ action:
|
|||
---
|
||||
|
||||
```go-html-template
|
||||
{{ hugo.Version }} → 0.126.0
|
||||
{{ hugo.Version }} → 0.128.0
|
||||
```
|
||||
|
|
|
|||
90
docs/content/en/functions/js/Babel.md
Normal file
90
docs/content/en/functions/js/Babel.md
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
title: js.Babel
|
||||
description: Compiles the given JavaScript resource with Babel.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [babel]
|
||||
related:
|
||||
- functions/js/Build
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
returnType: resource.Resource
|
||||
signatures: ['js.Babel [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.128.0 >}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "js/main.js" }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
{{ with . | babel }}
|
||||
<script src="{{ .RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ $opts := dict "minified" true }}
|
||||
{{ with . | babel $opts | fingerprint }}
|
||||
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Setup
|
||||
|
||||
Step 1
|
||||
: Install [Node.js](https://nodejs.org/en/download)
|
||||
|
||||
Step 2
|
||||
: Install the required Node.js packages in the root of your project.
|
||||
|
||||
```sh
|
||||
npm install --save-dev @babel/core @babel/cli
|
||||
```
|
||||
|
||||
Step 3
|
||||
: Add the babel executable to Hugo's `security.exec.allow` list in your site configuration:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[security.exec]
|
||||
allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^npx$', '^postcss$', '^babel$']
|
||||
{{< /code-toggle >}}
|
||||
|
||||
## Configuration
|
||||
|
||||
We add the main project's `node_modules` to `NODE_PATH` when running Babel and similar tools. There are some known [issues](https://github.com/babel/babel/issues/5618) with Babel in this area, so if you have a `babel.config.js` living in a Hugo Module (and not in the project itself), we recommend using `require` to load the presets/plugins, e.g.:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
require("@babel/preset-env"),
|
||||
{
|
||||
useBuiltIns: "entry",
|
||||
corejs: 3,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
config
|
||||
: (`string`) Path to the Babel configuration file. Hugo will, by default, look for a `babel.config.js` in your project. More information on these configuration files can be found here: [babel configuration](https://babeljs.io/docs/en/configuration).
|
||||
|
||||
minified
|
||||
: (`bool`) Save as many bytes as possible when printing
|
||||
|
||||
noComments
|
||||
: (`bool`) Write comments to generated output (true by default)
|
||||
|
||||
compact
|
||||
: (`bool`) Do not include superfluous whitespace characters and line terminators. Defaults to `auto` if not set.
|
||||
|
||||
verbose
|
||||
: (`bool`) Log everything
|
||||
|
||||
sourceMap
|
||||
: (`string`) Output `inline` or `external` sourcemap from the babel compile. External sourcemaps will be written to the target with the output file name + ".map". Input sourcemaps can be read from js.Build and node modules and combined into the output sourcemaps.
|
||||
|
|
@ -6,7 +6,7 @@ keywords: []
|
|||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/resources/Babel
|
||||
- functions/js/Babel
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
returnType: resource.Resource
|
||||
|
|
@ -88,8 +88,8 @@ module.exports = window.ReactDOM;
|
|||
With the above, these imports should work in both scenarios:
|
||||
|
||||
```js
|
||||
import * as React from 'react'
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom/client';
|
||||
```
|
||||
|
||||
target
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ The "breadcrumbs" partial renders [breadcrumb navigation], and needs to receive
|
|||
The "footer" partial renders the site footer. In this contrived example, the footer does not need access to the current page, so we can omit context:
|
||||
|
||||
```go-html-template
|
||||
{{ partial "breadcrumbs.html" }}
|
||||
{{ partial "footer.html" }}
|
||||
```
|
||||
|
||||
You can pass anything in context: a page, a page collection, a scalar value, a slice, or a map. In this example we pass the current page and three scalar values:
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@ action:
|
|||
aliases: [/functions/path.basename]
|
||||
---
|
||||
|
||||
{{< new-in 0.101.0 >}}
|
||||
|
||||
```go-html-template
|
||||
{{ path.BaseName "a/news.html" }} → news
|
||||
{{ path.BaseName "news.html" }} → news
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ description: Compiles the given JavaScript resource with Babel.
|
|||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [babel]
|
||||
related:
|
||||
- functions/js/Build
|
||||
- functions/resources/Fingerprint
|
||||
|
|
@ -12,8 +11,15 @@ action:
|
|||
returnType: resource.Resource
|
||||
signatures: ['resources.Babel [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
expiryDate: 2025-06-24 # deprecated 2024-06-24
|
||||
---
|
||||
|
||||
{{% deprecated-in 0.128.0 %}}
|
||||
Use [js.Babel] instead.
|
||||
|
||||
[js.Babel]: /functions/js/babel/
|
||||
{{% /deprecated-in %}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "js/main.js" }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ The [media type] is typically one of `image`, `text`, `audio`, `video`, or `appl
|
|||
{{% note %}}
|
||||
This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory.
|
||||
|
||||
For page resources, use the [`Resources.ByType`] method on the Page object.
|
||||
For page resources, use the [`Resources.ByType`] method on a `Page` object.
|
||||
|
||||
[`Resources.ByType`]: /methods/page/resources/
|
||||
{{% /note %}}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@ action:
|
|||
signatures: [resources.Copy TARGETPATH RESOURCE]
|
||||
---
|
||||
|
||||
{{< new-in 0.100.0 >}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/a.jpg" }}
|
||||
{{ with resources.Copy "img/new-image-name.jpg" . }}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@ keywords: []
|
|||
action:
|
||||
aliases: [fingerprint]
|
||||
related:
|
||||
- functions/js/Build
|
||||
- functions/resources/Babel
|
||||
- functions/resources/Minify
|
||||
- functions/resources/PostCSS
|
||||
- functions/resources/PostProcess
|
||||
- functions/resources/ToCSS
|
||||
- functions/css/Sass
|
||||
- functions/css/TailwindCSS
|
||||
- functions/js/Build
|
||||
- functions/js/Babel
|
||||
returnType: resource.Resource
|
||||
signatures: ['resources.Fingerprint [ALGORITHM] RESOURCE']
|
||||
---
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ Let's say you need to publish a file named "site.json" in the root of your publi
|
|||
```json
|
||||
{
|
||||
"build_date": "2024-02-19T12:27:05-08:00",
|
||||
"hugo_version": "0.126.0",
|
||||
"hugo_version": "0.128.0",
|
||||
"last_modified": "2024-02-19T12:01:42-08:00"
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ action:
|
|||
{{% note %}}
|
||||
This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory.
|
||||
|
||||
For page resources, use the [`Resources.Get`] method on the Page object.
|
||||
For page resources, use the [`Resources.Get`] method on a `Page` object.
|
||||
|
||||
[`Resources.Get`]: /methods/page/resources/
|
||||
{{% /note %}}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ action:
|
|||
{{% note %}}
|
||||
This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory.
|
||||
|
||||
For page resources, use the [`Resources.GetMatch`] method on the Page object.
|
||||
For page resources, use the [`Resources.GetMatch`] method on a `Page` object.
|
||||
|
||||
[`Resources.GetMatch`]: /methods/page/resources/
|
||||
{{% /note %}}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ action:
|
|||
{{% note %}}
|
||||
This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory.
|
||||
|
||||
For page resources, use the [`Resources.Match`] method on the Page object.
|
||||
For page resources, use the [`Resources.Match`] method on a `Page` object.
|
||||
|
||||
[`Resources.Match`]: /methods/page/resources/
|
||||
{{% /note %}}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ keywords: []
|
|||
action:
|
||||
aliases: [minify]
|
||||
related:
|
||||
- functions/js/Build
|
||||
- functions/resources/Babel
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/PostCSS
|
||||
- functions/resources/ToCSS
|
||||
- functions/css/Sass
|
||||
- functions/css/TailwindCSS
|
||||
- functions/js/Build
|
||||
- functions/js/Babel
|
||||
returnType: resource.Resource
|
||||
signatures: [resources.Minify RESOURCE]
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,17 +4,23 @@ description: Processes the given resource with PostCSS using any PostCSS plugin.
|
|||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [postCSS]
|
||||
related:
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
- functions/resources/PostProcess
|
||||
- functions/resources/ToCSS
|
||||
- functions/css/Sass
|
||||
returnType: resource.Resource
|
||||
signatures: ['resources.PostCSS [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
expiryDate: 2025-06-24 # deprecated 2024-06-24
|
||||
---
|
||||
|
||||
{{% deprecated-in 0.128.0 %}}
|
||||
Use [css.PostCSS] instead.
|
||||
|
||||
[css.PostCSS]: /functions/css/postcss/
|
||||
{{% /deprecated-in %}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "css/main.css" | postCSS }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
|
|
@ -126,4 +132,4 @@ module.exports = {
|
|||
[node.js]: https://nodejs.org/en/download
|
||||
[postcss plugins]: https://www.postcss.parts/
|
||||
[supported file name]: https://github.com/postcss/postcss-load-config#usage
|
||||
[transpile to CSS]: /functions/resources/tocss.md
|
||||
[transpile to CSS]: /functions/css/sass/
|
||||
|
|
|
|||
|
|
@ -6,10 +6,8 @@ keywords: []
|
|||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
- functions/resources/PostCSS
|
||||
- functions/resources/ToCSS
|
||||
- functions/css/PostCSS
|
||||
- functions/css/Sass
|
||||
returnType: postpub.PostPublishedResource
|
||||
signatures: [resources.PostProcess RESOURCE]
|
||||
toc: true
|
||||
|
|
@ -149,7 +147,7 @@ You cannot manipulate the values returned from the resource’s methods. For exa
|
|||
|
||||
```go-html-template
|
||||
{{ $css := resources.Get "css/main.css" }}
|
||||
{{ $css = $css | resources.PostCSS | minify | fingerprint | resources.PostProcess }}
|
||||
{{ $css = $css | css.PostCSS | minify | fingerprint | resources.PostProcess }}
|
||||
{{ $css.RelPermalink | strings.ToUpper }}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -4,17 +4,23 @@ description: Transpiles Sass to CSS.
|
|||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: [toCSS]
|
||||
related:
|
||||
- functions/resources/Fingerprint
|
||||
- functions/resources/Minify
|
||||
- functions/resources/PostCSS
|
||||
- functions/css/PostCSS
|
||||
- functions/resources/PostProcess
|
||||
returnType: resource.Resource
|
||||
signatures: ['resources.ToCSS [OPTIONS] RESOURCE']
|
||||
toc: true
|
||||
expiryDate: 2025-06-24 # deprecated 2024-06-24
|
||||
---
|
||||
|
||||
{{% deprecated-in 0.128.0 %}}
|
||||
Use [css.Sass] instead.
|
||||
|
||||
[css.Sass]: /functions/css/sass/
|
||||
{{% /deprecated-in %}}
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "sass/main.scss" }}
|
||||
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
|
||||
|
|
@ -76,7 +82,7 @@ includePaths
|
|||
"transpiler" "dartsass"
|
||||
"targetPath" "css/style.css"
|
||||
"vars" site.Params.styles
|
||||
"enableSourceMap" (not hugo.IsProduction)
|
||||
"enableSourceMap" (not hugo.IsProduction)
|
||||
"includePaths" (slice "node_modules/bootstrap/scss")
|
||||
}}
|
||||
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
|
||||
|
|
@ -139,8 +145,8 @@ To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file
|
|||
|
||||
```yaml
|
||||
variables:
|
||||
HUGO_VERSION: 0.126.0
|
||||
DART_SASS_VERSION: 1.77.1
|
||||
HUGO_VERSION: 0.128.0
|
||||
DART_SASS_VERSION: 1.77.5
|
||||
GIT_DEPTH: 0
|
||||
GIT_STRATEGY: clone
|
||||
GIT_SUBMODULE_STRATEGY: recursive
|
||||
|
|
@ -173,8 +179,8 @@ To install Dart Sass for your builds on Netlify, the `netlify.toml` file should
|
|||
|
||||
```toml
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.126.0"
|
||||
DART_SASS_VERSION = "1.77.1"
|
||||
HUGO_VERSION = "0.128.0"
|
||||
DART_SASS_VERSION = "1.77.5"
|
||||
TZ = "America/Los_Angeles"
|
||||
|
||||
[build]
|
||||
|
|
|
|||
|
|
@ -30,4 +30,4 @@ Use `strings.Diff` to compare two strings and render a highlighted diff:
|
|||
|
||||
Rendered:
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
95
docs/content/en/functions/templates/Defer.md
Normal file
95
docs/content/en/functions/templates/Defer.md
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
title: templates.Defer
|
||||
description: Defer execution of a template until after all sites and output formats have been rendered.
|
||||
categories: []
|
||||
keywords: []
|
||||
toc: true
|
||||
action:
|
||||
aliases: []
|
||||
related: []
|
||||
returnType: string
|
||||
signatures: [templates.Defer OPTIONS]
|
||||
aliases: [/functions/templates.defer]
|
||||
---
|
||||
|
||||
{{< new-in "0.128.0" >}}
|
||||
|
||||
In some rare use cases, you may need to defer the execution of a template until after all sites and output formats have been rendered. One such example could be [TailwindCSS](/functions/css/tailwindcss/) using the output of [hugo_stats.json](/getting-started/configuration/#configure-build) to determine which classes and other HTML identifiers are being used in the final output:
|
||||
|
||||
```go-html-template
|
||||
{{ with (templates.Defer (dict "key" "global")) }}
|
||||
{{ $t := debug.Timer "tailwindcss" }}
|
||||
{{ with resources.Get "css/styles.css" }}
|
||||
{{ $opts := dict
|
||||
"inlineImports" true
|
||||
"optimize" hugo.IsProduction
|
||||
}}
|
||||
{{ with . | css.TailwindCSS $opts }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" />
|
||||
{{ else }}
|
||||
{{ with . | minify | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ .RelPermalink }}"
|
||||
integrity="{{ .Data.Integrity }}"
|
||||
crossorigin="anonymous" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $t.Stop }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
{{% note %}}
|
||||
This function only works in combination with the `with` keyword.
|
||||
{{% /note %}}
|
||||
|
||||
|
||||
{{% note %}}
|
||||
Variables defined on the outside are not visible on the inside and vice versa. To pass in data, use the `data` [option](#options).
|
||||
{{% /note %}}
|
||||
|
||||
For the above to work well when running the server (or `hugo -w`), you want to have a configuration similar to this:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[module]
|
||||
[[module.mounts]]
|
||||
source = "hugo_stats.json"
|
||||
target = "assets/notwatching/hugo_stats.json"
|
||||
disableWatch = true
|
||||
[build.buildStats]
|
||||
enable = true
|
||||
[[build.cachebusters]]
|
||||
source = "assets/notwatching/hugo_stats\\.json"
|
||||
target = "styles\\.css"
|
||||
[[build.cachebusters]]
|
||||
source = "(postcss|tailwind)\\.config\\.js"
|
||||
target = "css"
|
||||
{{< /code-toggle >}}
|
||||
|
||||
## Options
|
||||
|
||||
The `templates.Defer` function takes a single argument, a map with the following optional keys:
|
||||
|
||||
key (`string`)
|
||||
: The key to use for the deferred template. This will, combined with a hash of the template content, be used as a cache key. If this is not set, Hugo will execute the deferred template on every render. This is not what you want for shared resources like CSS and JavaScript.
|
||||
|
||||
data (`map`)
|
||||
: Optional map to pass as data to the deferred template. This will be available in the deferred template as `.` or `$`.
|
||||
|
||||
|
||||
```go-html-template
|
||||
Language Outside: {{ site.Language.Lang }}
|
||||
Page Outside: {{ .RelPermalink }}
|
||||
I18n Outside: {{ i18n "hello" }}
|
||||
{{ $data := (dict "page" . )}}
|
||||
{{ with (templates.Defer (dict "data" $data )) }}
|
||||
Language Inside: {{ site.Language.Lang }}
|
||||
Page Inside: {{ .page.RelPermalink }}
|
||||
I18n Inside: {{ i18n "hello" }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
The [Output Format](/templates/output-formats/), [Site](/methods/page/site/), and [language](/methods/site/language) will be the same, even if the execution is deferred. In the example above, this means that the `site.Language.Lang` and `.RelPermalink` will be the same on the inside and the outside of the deferred template.
|
||||
|
|
@ -26,5 +26,5 @@ I :heart: Hugo!
|
|||
|
||||
[configuration]: /getting-started/configuration/
|
||||
[emoji shortcodes]: /quick-reference/emojis/
|
||||
[sc]: /templates/shortcode-templates/
|
||||
[sc]: /templates/shortcode/
|
||||
[scsource]: https://github.com/gohugoio/hugo/tree/master/docs/layouts/shortcodes
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue