TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-12 18:05:09 -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

48
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" [build.buildStats]
target = "assets" enable = true
[[module.mounts]] [[build.cachebusters]]
source = "hugo_stats.json" source = 'assets/notwatching/hugo_stats\.json'
target = "assets/notwatching/hugo_stats.json" target = 'css'
disableWatch = true [[build.cachebusters]]
[build.buildStats] source = '(postcss|tailwind)\.config\.js'
enable = true target = 'css'
[[build.cachebusters]] [module]
source = "assets/notwatching/hugo_stats\\.json" [[module.mounts]]
target = "css" source = 'assets'
[[build.cachebusters]] target = 'assets'
source = "(postcss|tailwind)\\.config\\.js" [[module.mounts]]
target = "css" disableWatch = true
source = 'hugo_stats.json'
target = 'assets/notwatching/hugo_stats.json'
{{< /code-toggle >}} {{< /code-toggle >}}
### Step 3 ### Step 3
@ -75,8 +77,7 @@ 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 }}
{{ if hugo.IsDevelopment }} {{ if hugo.IsDevelopment }}
@ -87,20 +88,21 @@ Create a partial template to process the CSS with the Tailwind CSS CLI:
{{ end }} {{ end }}
{{ 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

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

@ -14,13 +14,22 @@ 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}
{{ with (templates.Defer (dict "key" "global")) }} <head>
{{ with resources.Get "css/main.css" }} ...
{{ 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) }} {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
{{ with . | css.TailwindCSS $opts }} {{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsDevelopment }} {{ if hugo.IsDevelopment }}
@ -31,7 +40,6 @@ In some rare use cases, you may need to defer the execution of a template until
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ 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: 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 >}}
[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]
[[module.mounts]] [[module.mounts]]
source = "hugo_stats.json" source = 'assets'
target = "assets/notwatching/hugo_stats.json" target = 'assets'
disableWatch = true [[module.mounts]]
[build.buildStats] disableWatch = true
enable = true source = 'hugo_stats.json'
[[build.cachebusters]] target = 'assets/notwatching/hugo_stats.json'
source = "assets/notwatching/hugo_stats\\.json"
target = "styles\\.css"
[[build.cachebusters]]
source = "(postcss|tailwind)\\.config\\.js"
target = "css"
{{< /code-toggle >}} {{< /code-toggle >}}
## Options ## Options