hugo/content/en/hugo-pipes/introduction.md
Bjørn Erik Pedersen 475f87f685 Squashed 'docs/' changes from 96fdc246c..30f32a624
30f32a624 Update scss-sass.md
503130186 Update scss-sass.md
cbfaa6704 Remove references to outdated Blackfriday markdown processor (#1748)
e43948d26 netlify: Hugo 0.100.2
aaabe0ee9 Merge branch 'tempv0.100.2'
bc615f257 tpl/path: Add path.BaseName function
5dddbf95e Add Chinese translation for _documentation and _index.md
b1e4f3200 Add translation for search tools
23281633a Update introduction.md
3abb5fb5d netlify: Hugo 0.100.1
644ed3b01 Update faq.md
54f377051 Add some lines about resources.Copy
82cf08355 Remove most Blackfriday references
bfbe5aaf3 netlify: Update to Hugo 0.100.0
8b6f8577f docs: Regen CLI docs
858a5d39c docs: Regen docs helper
5037d504f Merge commit 'e4bfe59c4e043c92d3992587d8c64d264b262a22'
03ca7be5b Fix indentation in highlight shortcode

git-subtree-dir: docs
git-subtree-split: 30f32a62433a6d62b680a2dd874c72bb8fb0b728
2022-06-16 07:22:11 +02:00

6.9 KiB
Executable file

title linkTitle description date publishdate lastmod categories keywords menu weight sections_weight draft toc aliases
Hugo Pipes Introduction Hugo Pipes Hugo Pipes is Hugo's asset processing set of functions. 2018-07-14 2018-07-14 2018-07-14
asset management
docs
parent weight
pipes 20
01 01 false true
/assets/

Find Resources in /assets

This is about the global Resources mounted inside /assets. For the .Page scoped Resources, see Page Resources.

Note that you can mount any directory into Hugo's virtual assets folder using the Mount Configuration.

Function Description
resources.Get Get locates the filename given in Hugo's assets filesystem and creates a Resource object that can be used for further transformations. See Get Resource with resources.Get and resources.GetRemote.
resources.GetRemote Same as Get, but it accepts remote URLs. See Get Resource with resources.Get and resources.GetRemote.
resources.GetMatch GetMatch finds the first Resource matching the given pattern, or nil if none found. See Match for a more complete explanation about the rules used.
resources.Match Match gets all resources matching the given base path prefix, e.g ".png" will match all png files. The "" does not match path delimiters (/), so if you organize your resources in sub-folders, you need to be explicit about it, e.g.: "images/*.png". To match any PNG image anywhere in the bundle you can do "**.png", and to match all PNG images below the images folder, use "images/**.jpg". The matching is case insensitive. Match matches by using the files name with path relative to the file system root with Unix style slashes (/) and no leading slash, e.g. "images/logo.png". See https://github.com/gobwas/glob for the full rules set.

See the GoDoc Page for the resources package for an up to date overview of all template functions in this namespace.

Get Resource with resources.Get and resources.GetRemote

In order to process an asset with Hugo Pipes, it must be retrieved as a Resource using resources.Get or resources.GetRemote.

With resources.Get, the first argument is a local path relative to the assets directory/directories:

{{ $local := resources.Get "sass/main.scss" }}

With resources.GetRemote, the first argument is a remote URL:

{{ $remote := resources.GetRemote "https://www.example.com/styles.scss" }}

resources.Get and resources.GetRemote return nil if the resource is not found.

Copy a Resource

{{< new-in "0.100.0" >}}

resources.Copy allows you to copy almost any Hugo Resource (the one exception is the Page), possibly most useful for renaming things:

{{ $resized := $image.Resize "400x400" |  resources.Copy "images/mynewname.jpg" }}
<img src="{{ $resized.RelPermalink }}">

Caching

By default, Hugo calculates a cache key based on the URL and the options (e.g. headers) given.

{{< new-in "0.97.0" >}} You can override this by setting a key in the options map. This can be used to get more fine grained control over how often a remote resource is fetched, e.g.:

{{ $cacheKey := print $url (now.Format "2006-01-02") }}
{{ $resource := resource.GetRemote $url (dict "key" $cacheKey) }}

Error Handling

{{< new-in "0.91.0" >}}

The return value from resources.GetRemote includes an .Err method that will return an error if the call failed. If you want to just log any error as a WARNING you can use a construct similar to the one below.

{{ with resources.GetRemote "https://gohugo.io/images/gohugoio-card-1.png" }}
  {{ with .Err }}
    {{ warnf "%s" . }}
  {{ else }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

Note that if you do not handle .Err yourself, Hugo will fail the build the first time you start using the Resource object.

Remote Options

When fetching a remote Resource, resources.GetRemote takes an optional options map as the last argument, e.g.:

{{ $resource := resources.GetRemote "https://example.org/api" (dict "headers" (dict "Authorization" "Bearer abcd"))  }}

If you need multiple values for the same header key, use a slice:

{{ $resource := resources.GetRemote "https://example.org/api"  (dict "headers" (dict "X-List" (slice "a" "b" "c")))  }}

You can also change the request method and set the request body:

{{ $postResponse := resources.GetRemote "https://example.org/api"  (dict 
    "method" "post"
    "body" `{"complete": true}` 
    "headers" (dict 
        "Content-Type" "application/json"
    )
)}}

Caching of Remote Resources

Remote resources fetched with resources.GetRemote will be cached on disk. See Configure File Caches for details.

Asset directory

Asset files must be stored in the asset directory. This is /assets by default, but can be configured via the configuration file's assetDir key.

Asset Publishing

Hugo publishes assets to the to the publishDir (typically public) when you invoke .Permalink, .RelPermalink, or .Publish. You can use .Content to inline the asset.

Go Pipes

For improved readability, the Hugo Pipes examples of this documentation will be written using Go Pipes:

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

Method aliases

Each Hugo Pipes resources transformation method uses a camelCased alias (toCSS for resources.ToCSS). Non-transformation methods deprived of such aliases are resources.Get, resources.FromString, resources.ExecuteAsTemplate and resources.Concat.

The example above can therefore also be written as follows:

{{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

Caching

Hugo Pipes invocations are cached based on the entire pipe chain.

An example of a pipe chain is:

{{ $mainJs := resources.Get "js/main.js" | js.Build "main.js" | minify | fingerprint }}

The pipe chain is only invoked the first time it is encountered in a site build, and results are otherwise loaded from cache. As such, Hugo Pipes can be used in templates which are executed thousands or millions of times without negatively impacting the build performance.