https://v0-122-0--gohugoio.netlify.app/functions/resources/Recent content in Resource functions on HugoHugo -- gohugo.ioenhttps://v0-122-0--gohugoio.netlify.app/functions/resources/babel/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/babel/{{ with resources.Get "js/main.js" }} {{ if hugo.IsDevelopment }} {{ with . | babel }} <script src="{{ .RelPermalink }}"></script> {{ end }} {{ else }} {{ $opts := dict "minified" true }} {{ with . | babel $opts | fingerprint }} <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script> {{ end }} {{ end }} {{ end }} Setup Step 1 Install Node.js Step 2 Install the required Node.js packages in the root of your project.https://v0-122-0--gohugoio.netlify.app/functions/resources/bytype/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/bytype/The media type is typically one of image, text, audio, video, or application. {{ range resources.ByType "image" }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""> {{ end }} This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory. For page resources, use the Resources.ByType method on the Page object.https://v0-122-0--gohugoio.netlify.app/functions/resources/concat/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/concat/The resources.Concat function returns a concatenated slice of resources, caching the result using the target path as its cache key. Each resource must have the same media type. Hugo publishes the resource to the target path when you call its Publish, Permalink, or RelPermalink methods. {{ $plugins := resources.Get "js/plugins.js" }} {{ $global := resources.Get "js/global.js" }} {{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }}https://v0-122-0--gohugoio.netlify.app/functions/resources/copy/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/copy/New in v0.100.0 {{ with resources.Get "images/a.jpg" }} {{ with resources.Copy "img/new-image-name.jpg" . }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""> {{ end }} {{ end }} The relative URL of the new published resource will be: /img/new-image-name.jpg The target path must be different than the source path, as shown in the example above. Use the resources.Copy function with global, page, and remote resources.https://v0-122-0--gohugoio.netlify.app/functions/resources/executeastemplate/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/executeastemplate/The resources.ExecuteAsTemplate function returns a resource created from a Go template, parsed and executed with the given context, caching the result using the target path as its cache key. Hugo publishes the resource to the target path when you call its Publish, Permalink, or RelPermalink methods. Let’s say you have a CSS file that you wish to populate with values from your site configuration: assets/css/template.css body { background-color: {{ site.Params.style.bg_color }}; color: {{ site.https://v0-122-0--gohugoio.netlify.app/functions/resources/fingerprint/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/fingerprint/{{ with resources.Get "js/main.js" }} {{ with . | fingerprint "sha256" }} <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script> {{ end }} {{ end }} Hugo renders this to something like: <script src="/js/main.62e...df1.js" integrity="sha256-Yuh...rfE=" crossorigin="anonymous"></script> Although most commonly used with CSS and JavaScript resources, you can use the resources.Fingerprint function with any resource type. The hash algorithm may be one of md5, sha256 (default), sha384, or sha512. After cryptographically hashing the resource content:https://v0-122-0--gohugoio.netlify.app/functions/resources/fromstring/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/fromstring/The resources.FromString function returns a resource created from a string, caching the result using the target path as its cache key. Hugo publishes the resource to the target path when you call its Publish, Permalink, or RelPermalink methods. Let’s say you need to publish a file named “site.json” in the root of your public directory, containing the build date, the Hugo version used to build the site, and the date that the content was last modified.https://v0-122-0--gohugoio.netlify.app/functions/resources/get/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/get/{{ with resources.Get "images/a.jpg" }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""> {{ end }} This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory. For page resources, use the Resources.Get method on the Page object.https://v0-122-0--gohugoio.netlify.app/functions/resources/getmatch/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/getmatch/{{ with resources.GetMatch "images/*.jpg" }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""> {{ end }} This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory. For page resources, use the Resources.GetMatch method on the Page object. Hugo determines a match using a case-insensitive glob pattern. Path Pattern Match images/foo/a.jpg images/foo/*.jpg true images/foo/a.https://v0-122-0--gohugoio.netlify.app/functions/resources/getremote/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/getremote/{{ $url := "https://example.org/images/a.jpg" }} {{ with resources.GetRemote $url }} {{ with .Err }} {{ errorf "%s" . }} {{ else }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""> {{ end }} {{ else }} {{ errorf "Unable to get remote resource %q" $url }} {{ end }} Options The resources.GetRemote function takes an optional map of options. {{ $url := "https://example.org/api" }} {{ $opts := dict "headers" (dict "Authorization" "Bearer abcd") }} {{ $resource := resources.https://v0-122-0--gohugoio.netlify.app/functions/resources/match/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/match/{{ range resources.Match "images/*.jpg" }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt=""> {{ end }} This function operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory. For page resources, use the Resources.Match method on the Page object. Hugo determines a match using a case-insensitive glob pattern. Path Pattern Match images/foo/a.jpg images/foo/*.jpg true images/foo/a.https://v0-122-0--gohugoio.netlify.app/functions/resources/minify/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/minify/{{ $css := resources.Get "css/main.css" }} {{ $style := $css | minify }} Any CSS, JS, JSON, HTML, SVG, or XML resource can be minified using resources.Minify which takes for argument the resource object.https://v0-122-0--gohugoio.netlify.app/functions/resources/postcss/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/postcss/{{ with resources.Get "css/main.css" | postCSS }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ end }} Setup Follow the steps below to transform CSS using any of the available PostCSS plugins. Step 1 Install Node.js. Step 2 Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to your CSS rules: npm i -D postcss postcss-cli autoprefixer Step 3 Create a PostCSS configuration file in the root of your project.https://v0-122-0--gohugoio.netlify.app/functions/resources/postprocess/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/postprocess/{{ with resources.Get "css/main.css" }} {{ if hugo.IsDevelopment }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ else }} {{ with . | postCSS | minify | fingerprint | resources.PostProcess }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} {{ end }} {{ end }} Marking a resource with resources.PostProcess postpones transformations until the build has finished. Call resources.PostProcess when one or more of the steps in the transformation chain depends on the result of the build.https://v0-122-0--gohugoio.netlify.app/functions/resources/tocss/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/resources/tocss/{{ with resources.Get "sass/main.scss" }} {{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }} {{ with . | toCSS $opts }} {{ if hugo.IsDevelopment }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ else }} {{ with . | minify | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} {{ end }} {{ end }} {{ end }} Transpile Sass to CSS using the LibSass transpiler included in Hugo’s extended edition, or install Dart Sass to use the latest features of the Sass language.