TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-12 07:04:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

content: Use consistent templates.Defer examples

Browse Source
This commit is contained in:
Joe Mooring 2025-06-14 10:15:59 -07:00 committed by GitHub
parent b4f8e492f3
commit ab51fdcc7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
content/en/functions/css/TailwindCSS.md
View File

@ -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: Install the Tailwind CSS CLI v4.0 or later:
```sh ```sh {copy=true}
npm install --save-dev tailwindcss @tailwindcss/cli 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: Add this to your site configuration:
{{< code-toggle file=hugo copy=true >}} {{< code-toggle file=hugo copy=true >}}
[[module.mounts]] [build]
source = "assets"
target = "assets"
[[module.mounts]]
source = "hugo_stats.json"
target = "assets/notwatching/hugo_stats.json"
disableWatch = true
[build.buildStats] [build.buildStats]
enable = true enable = true
[[build.cachebusters]] [[build.cachebusters]]
source = "assets/notwatching/hugo_stats\\.json" source = 'assets/notwatching/hugo_stats\.json'
target = "css" target = 'css'
[[build.cachebusters]] [[build.cachebusters]]
source = "(postcss|tailwind)\\.config\\.js" source = '(postcss|tailwind)\.config\.js'
target = "css" 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 >}} {{< /code-toggle >}}
### Step 3 ### Step 3
@ -75,7 +77,6 @@ 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: Create a partial template to process the CSS with the Tailwind CSS CLI:
```go-html-template {file="layouts/partials/css.html" copy=true} ```go-html-template {file="layouts/partials/css.html" copy=true}
{{ with (templates.Defer (dict "key" "global")) }}
{{ with resources.Get "css/main.css" }} {{ with resources.Get "css/main.css" }}
{{ $opts := dict "minify" (not hugo.IsDevelopment) }} {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
{{ with . | css.TailwindCSS $opts }} {{ with . | css.TailwindCSS $opts }}
@ -88,19 +89,20 @@ Create a partial template to process the CSS with the Tailwind CSS CLI:
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }}
``` ```
### Step 5 ### 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> <head>
... ...
{{ partialCached "css.html" . }} {{ with (templates.Defer (dict "key" "global")) }}
{{ partial "css.html" . }}
{{ end }}
... ...
<head> </head>
``` ```
## Options ## Options

36
content/en/functions/templates/Defer.md
View File

@ -14,12 +14,21 @@ aliases: [/functions/templates.defer]
{{< new-in 0.128.0 />}} {{< new-in 0.128.0 />}}
> [!note] > [!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: 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 ```go-html-template {file="layouts/baseof.html" copy=true}
<head>
...
{{ with (templates.Defer (dict "key" "global")) }} {{ 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" }} {{ with resources.Get "css/main.css" }}
{{ $opts := dict "minify" (not hugo.IsDevelopment) }} {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
{{ with . | css.TailwindCSS $opts }} {{ with . | css.TailwindCSS $opts }}
@ -32,7 +41,6 @@ In some rare use cases, you may need to defer the execution of a template until
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }}
``` ```
> [!note] > [!note]
@ -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: 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 >}} {{< code-toggle file=hugo >}}
[module] [build]
[[module.mounts]]
source = "hugo_stats.json"
target = "assets/notwatching/hugo_stats.json"
disableWatch = true
[build.buildStats] [build.buildStats]
enable = true enable = true
[[build.cachebusters]] [[build.cachebusters]]
source = "assets/notwatching/hugo_stats\\.json" source = 'assets/notwatching/hugo_stats\.json'
target = "styles\\.css" target = 'css'
[[build.cachebusters]] [[build.cachebusters]]
source = "(postcss|tailwind)\\.config\\.js" source = '(postcss|tailwind)\.config\.js'
target = "css" 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 >}} {{< /code-toggle >}}
## Options ## Options