mirror of
https://github.com/gohugoio/hugoDocs.git
synced 2025-09-11 18:34:50 -04:00
content: Use consistent templates.Defer examples
This commit is contained in:
Joe Mooring
GitHub
parent
b4f8e492f3
commit
ab51fdcc7e
@ -29,7 +29,7 @@ Use the `css.TailwindCSS` function to process your Tailwind CSS files. This func
|
||||
|
||||
Install the Tailwind CSS CLI v4.0 or later:
|
||||
|
||||
```sh
|
||||
```sh {copy=true}
|
||||
npm install --save-dev tailwindcss @tailwindcss/cli
|
||||
```
|
||||
|
||||
@ -42,21 +42,23 @@ The TailwindCSS CLI is also available as a [standalone executable] if you want t
|
||||
Add this to your site configuration:
|
||||
|
||||
{{< code-toggle file=hugo copy=true >}}
|
||||
[[module.mounts]]
|
||||
source = "assets"
|
||||
target = "assets"
|
||||
[[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 = "css"
|
||||
[[build.cachebusters]]
|
||||
source = "(postcss|tailwind)\\.config\\.js"
|
||||
target = "css"
|
||||
[build]
|
||||
[build.buildStats]
|
||||
enable = true
|
||||
[[build.cachebusters]]
|
||||
source = 'assets/notwatching/hugo_stats\.json'
|
||||
target = 'css'
|
||||
[[build.cachebusters]]
|
||||
source = '(postcss|tailwind)\.config\.js'
|
||||
target = 'css'
|
||||
[module]
|
||||
[[module.mounts]]
|
||||
source = 'assets'
|
||||
target = 'assets'
|
||||
[[module.mounts]]
|
||||
disableWatch = true
|
||||
source = 'hugo_stats.json'
|
||||
target = 'assets/notwatching/hugo_stats.json'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
### Step 3
|
||||
@ -75,16 +77,14 @@ Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` i
|
||||
Create a partial template to process the CSS with the Tailwind CSS CLI:
|
||||
|
||||
```go-html-template {file="layouts/partials/css.html" copy=true}
|
||||
{{ with (templates.Defer (dict "key" "global")) }}
|
||||
{{ with resources.Get "css/main.css" }}
|
||||
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
|
||||
{{ 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 }}
|
||||
{{ with resources.Get "css/main.css" }}
|
||||
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
|
||||
{{ 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 }}
|
||||
@ -93,14 +93,16 @@ Create a partial template to process the CSS with the Tailwind CSS CLI:
|
||||
|
||||
### Step 5
|
||||
|
||||
Call the partial template from your base template:
|
||||
Call the partial template from your base template, deferring template execution until after all sites and output formats have been rendered:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html" copy=true}
|
||||
<head>
|
||||
...
|
||||
{{ partialCached "css.html" . }}
|
||||
{{ with (templates.Defer (dict "key" "global")) }}
|
||||
{{ partial "css.html" . }}
|
||||
{{ end }}
|
||||
...
|
||||
<head>
|
||||
</head>
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
@ -14,21 +14,29 @@ aliases: [/functions/templates.defer]
|
||||
{{< new-in 0.128.0 />}}
|
||||
|
||||
> [!note]
|
||||
> This feature is meant to be used in the main page layout files/templates, and has undefined behavior when used from shortcodes, partials or render hook templates. See [this issue](https://github.com/gohugoio/hugo/issues/13492#issuecomment-2734700391) for more info.
|
||||
> This feature is meant to be used in the main page layout files/templates, and has undefined behavior when used from shortcodes, partials, or render hook templates. See [this issue](https://github.com/gohugoio/hugo/issues/13492#issuecomment-2734700391) for more info.
|
||||
|
||||
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](/configuration/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")) }}
|
||||
{{ with resources.Get "css/main.css" }}
|
||||
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
|
||||
{{ 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 }}
|
||||
```go-html-template {file="layouts/baseof.html" copy=true}
|
||||
<head>
|
||||
...
|
||||
{{ with (templates.Defer (dict "key" "global")) }}
|
||||
{{ partial "css.html" . }}
|
||||
{{ end }}
|
||||
...
|
||||
</head>
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/_partials/css.html" copy=true}
|
||||
{{ with resources.Get "css/main.css" }}
|
||||
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
|
||||
{{ 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 }}
|
||||
@ -43,19 +51,23 @@ In some rare use cases, you may need to defer the execution of a template until
|
||||
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 >}}
|
||||
[build]
|
||||
[build.buildStats]
|
||||
enable = true
|
||||
[[build.cachebusters]]
|
||||
source = 'assets/notwatching/hugo_stats\.json'
|
||||
target = 'css'
|
||||
[[build.cachebusters]]
|
||||
source = '(postcss|tailwind)\.config\.js'
|
||||
target = 'css'
|
||||
[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"
|
||||
[[module.mounts]]
|
||||
source = 'assets'
|
||||
target = 'assets'
|
||||
[[module.mounts]]
|
||||
disableWatch = true
|
||||
source = 'hugo_stats.json'
|
||||
target = 'assets/notwatching/hugo_stats.json'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
## Options
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user