diff --git a/content/en/functions/templates/Defer.md b/content/en/functions/templates/Defer.md new file mode 100644 index 0000000000..363c439ae1 --- /dev/null +++ b/content/en/functions/templates/Defer.md @@ -0,0 +1,65 @@ +--- +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.exists] +--- + +{{< new-in "0.128.0" >}} + +In some rare use cases, you may want to defer the execution of a template until after all sites and output formats have been rendered. One such example could be [TailwindCSS](https://github.com/bep/hugo-starter-tailwind-basic) using the output of [hugo_stats.json](https://gohugo.io/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" "styles" )) }} + {{ $options := dict "inlineImports" true }} + {{ $styles := resources.Get "css/styles.css" }} + {{ $styles = $styles | resources.PostCSS $options }} + {{ if hugo.IsProduction }} + {{ $styles = $styles | minify | fingerprint }} + {{ end }} + +{{ end }} +``` + +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] +writeStats = 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 can be thought of 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 the deferred template. This will be available in the deferred template as `.` or `$`. + + +```go-html-template +{{ $data := (dict "page" . )}} +{{ with (templates.Defer (dict "data" $data )) }} + Page: {{ .page.Title }} +{{ end }} +``` \ No newline at end of file