这是本节的多页打印视图。 点击此处打印.

返回本页常规视图.

Hugo Pipes

Hugo Pipes Overview

https://gohugo.io/hugo-pipes/

1 - Hugo Pipes 简介

Hugo Pipes Introduction - Hugo Pipes 简介

https://gohugo.io/hugo-pipes/introduction/

​ Hugo Pipes 是 Hugo 的asset 处理函数集合。

在 /assets 中查找资源

​ 这是关于全局资源（global Resources），它们在 /assets 内部挂载。有关 .Page 作用域内的资源，请参见 Page Resources。

​ 请注意，您可以使用 Mount Configuration 将任何目录挂载到 Hugo 的虚拟 assets 文件夹中。

函数描述
resources.GetGet 会查找在 Hugo assets 文件系统中给定的文件名，并创建一个可用于进一步转换的 Resource 对象。请参见 使用 resources.Get 和 resources.GetRemote 获取资源。
resources.GetRemote与 Get 相同，但它接受远程 URL。请参见 使用 resources.Get 和 resources.GetRemote 获取资源。
resources.GetMatchGetMatch 查找第一个与给定模式匹配的资源，如果没有找到，则返回 nil。有关使用的规则的更完整解释，请参见 Match。
resources.MatchMatch 获取与给定基本路径前缀匹配的所有资源，例如 “.png” 将匹配所有 png 文件。 “” 不匹配路径分隔符 (/)，因此，如果您将资源组织在子文件夹中，则需要明确指定，例如：“images/*.png”。要匹配包中任何 PNG 图像，您可以使用 “.png”，要匹配 images 文件夹下所有 PNG 图像，请使用 “images/.jpg”。匹配区分大小写。Match 通过使用相对于文件系统根的路径的文件名来匹配，路径使用 Unix 样式斜杠 (/)，没有前导斜杠，例如 “images/logo.png”。有关完整规则集，请参见 https://github.com/gobwas/glob。

​ 有关此命名空间中所有模板函数的最新概述，请参见 GoDoc Page。

使用 resources.Get 和 resources.GetRemote 获取资源

​ 为了使用 Hugo Pipes 处理资源，必须使用 resources.Get 或 resources.GetRemote 获取它作为一个 Resource。

​ 对于 resources.Get，第一个参数是相对于 assets 目录/目录的本地路径：

1

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

​ 对于 resources.GetRemote，第一个参数是远程 URL：

1

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

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

​ resources.Get 和 resources.GetRemote 如果找不到资源则返回 nil。

新版本v0.110.0您可以使用返回的 Resource 中的 .Data 获取有关HTTP响应的信息。这对于没有任何正文的HEAD请求特别有用。数据对象包含：

  • StatusCode

    HTTP状态代码，例如200状态

    HTTP状态文本，例如"200 OK" TransferEncoding

    传输编码，例如"chunked" ContentLength

    内容长度，例如1234 ContentType

    内容类型，例如"text/html"

缓存

​ 默认情况下，Hugo基于给定的 URL 和 options (例如，标题)计算缓存键。

新版本v0.97.0您可以通过在选项映射中设置 key 来覆盖此设置。这可用于更精细地控制远程资源的获取频率，例如：

1
2

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

错误处理

​ 从 resources.GetRemote 返回的返回值包括一个 .Err 方法，如果调用失败，则会返回错误。如果您只想将任何错误记录为 WARNING ，则可以使用类似于下面的结构。

1
2
3
4
5
6
7

{{ 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 }}

​ 请注意，如果您不自己处理 .Err ，Hugo将在您开始使用 Resource 对象的第一次构建时失败。

远程选项

​ 在获取远程 Resource 时， resources.GetRemote 接收一个可选的选项映射作为第二个参数，例如：

1

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

​ 如果您需要同一头键的多个值，请使用切片：

1

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

​ 您还可以更改请求方法并设置请求正文：

1
2
3
4
5
6
7

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

远程资源的缓存

​ 使用 resources.GetRemote 获取的远程资源将缓存在磁盘上。有关详情，请参见配置文件缓存。

复制资源

New in v0.100.0

resources.Copy 使您可以复制几乎任何Hugo Resource（唯一的例外是Page），可能最有用的是重命名：

1
2

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

Asset 目录

​ asset 文件必须存储在asset 目录中。默认为 /assets ，但可以通过配置文件的 assetDir 键进行配置。

Asset 发布

​ 当您调用 .Permalink ， .RelPermalink 或 .Publish 时，Hugo将assets 发布到 publishDir （通常为 public ）。您可以使用 .Content 来内联assets 。

Go 管道

​ 为了提高可读性，本文档的Hugo Pipes示例将使用Go Pipes编写：

1
2

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

方法别名

​ 每个 Hugo Pipes 的 resources 转换方法都使用 驼峰式 别名（例如 resources.ToCSS 的别名是 toCSS）。没有这样别名的非转换方法包括 resources.Get、resources.FromString、resources.ExecuteAsTemplate 和 resources.Concat。

​ 因此，上面的示例也可以写成以下形式：

1
2

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

缓存

​ Hugo 管道调用基于整个管道链进行缓存。

​ 一个管道链的示例是：

1

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

​ 管道链仅在站点构建中第一次遇到时调用，否则结果将从缓存中加载。因此，Hugo 管道可以在执行数千或数百万次的模板中使用，而不会对构建性能产生负面影响。

2 - Babel

Babel

https://gohugo.io/hugo-pipes/babel/

​ Hugo Pipes 可以使用 Babel 处理 JS 文件。

语法

resources.Babel RESOURCE [OPTIONS]
babel RESOURCE [OPTIONS]

用法

​ 使用 resources.Babel 将任何 JavaScript 资源文件转译为另一种 JavaScript 版本，它接受资源对象和下面列出的可选选项字典作为参数。Babel 使用 babel cli。

​ Hugo Pipe 的 Babel 需要安装 @babel/cli 和 @babel/core JavaScript 包在项目中或全局安装 (npm install -g @babel/cli @babel/core)，以及使用的任何 Babel 插件或预设 (例如，npm install @babel/preset-env --save-dev)。

​ 如果您使用的是 Hugo Snap 包，则 Babel 和插件需要在您的 Hugo 站点目录中本地安装，例如，不带 -g 标志的 npm install @babel/cli @babel/core --save-dev。

配置

​ 当运行 Babel 和类似工具时，我们会将主项目的 node_modules 添加到 NODE_PATH。在这个领域，Babel 存在一些已知问题，因此如果您的 babel.config.js 存在于 Hugo 模块中（而不是项目本身），我们建议使用 require 来加载预设/插件，例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

module.exports = {
  presets: [
    [
      require("@babel/preset-env"),
      {
        useBuiltIns: "entry",
        corejs: 3,
      },
    ],
  ],
};

选项

  • config [string]

    ​ Babel 配置文件的路径。Hugo 默认会在项目中查找 babel.config.js 文件。有关这些配置文件的更多信息，请参见：babel 配置。

  • minified [bool]

    Save as many bytes as possible when printing

    在打印时尽可能节省字节。

  • noComments [bool]

    将注释写入生成的输出中（默认为 true）。

  • compact [bool]

    不包括多余的空格字符和行终止符。如果未设置，默认值为auto。

  • verbose [bool]

    记录所有日志。

  • sourceMap [string]

    从 Babel 编译输出 inline 或 external sourcemap。外部 sourcemap 将写入目标文件名后带有 “.map” 的目标中。输入 sourcemap 可以从 js.Build 和节点模块中读取，并合并到输出 sourcemap 中。

示例

1

{{- $transpiled := resources.Get "scripts/main.js" | babel  -}}

或使用选项：

1
2

{{ $opts := dict "noComments" true }}
{{- $transpiled := resources.Get "scripts/main.js" | babel $opts -}}

另请参阅

3 - Concat

Concat

https://gohugo.io/hugo-pipes/bundling/

​ 将任意数量的assets捆绑成一个资源。

语法

resources.Concat TARGET_PATH SLICE_RESOURCES

用法

​ 相同 MIME 类型的asset文件可以使用 resources.Concat 捆绑成一个资源，该函数需要两个参数，分别为创建资源捆绑的目标路径和要连接的资源对象的切片。

1
2
3

{{ $plugins := resources.Get "js/plugins.js" }}
{{ $global := resources.Get "js/global.js" }}
{{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }}

另请参阅

4 - ExecuteAsTemplate

ExecuteAsTemplate

https://gohugo.io/hugo-pipes/resource-from-template/

​ 从模板创建资源。

语法

resources.ExecuteAsTemplate TARGET_PATH CONTEXT RESOURCE

用法

​ 为了在包含 Go 模板的一个asset 文件上使用 Hugo Pipes 函数，必须使用 resources.ExecuteAsTemplate 函数。

​ 该函数需要三个参数：创建资源的目标路径、模板上下文和资源对象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// assets/sass/template.scss
$backgroundColor: {{ .Param "backgroundColor" }};
$textColor: {{ .Param "textColor" }};
body{
  background-color:$backgroundColor;
  color: $textColor;
}
// [...]
{{ $sassTemplate := resources.Get "sass/template.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}

另请参阅

5 - Fingerprint

Fingerprint

https://gohugo.io/hugo-pipes/fingerprint/

对给定的资源进行处理，添加资源内容的哈希字符串。

语法

resources.Fingerprint RESOURCE [ALGORITHM]
fingerprint RESOURCE [ALGORITHM]

用法

可以使用  `resources.Fingerprint`  对任何asset文件应用Fingerprinting和 [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)，该函数需要两个参数，分别为资源对象和一个可选的 [哈希算法](https://en.wikipedia.org/wiki/Secure_Hash_Algorithms)。

​ 默认哈希算法为 sha256 ，其他可用算法为 sha384 ， sha512 （自 Hugo 0.55 起），以及 md5 。

​ 经过处理的任何asset文件都将带有一个 .Data.Integrity 属性，其中包含由哈希算法名称、一个连字号（hyphen ）和 base64 编码的哈希值组成的完整性字符串。

1
2
3

{{ $js := resources.Get "js/global.js" }}
{{ $secureJS := $js | resources.Fingerprint "sha512" }}
<script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>

另请参阅

6 - FromString

FromString

https://gohugo.io/hugo-pipes/resource-from-string/

​ 从字符串创建资源。

语法

resources.FromString TARGET_PATH CONTENT

用法

​ 可以使用 resources.FromString 直接从模板创建资源，该函数需要两个参数，即要创建资源的目标路径和给定的内容字符串。

​ 下面的示例创建一个包含每个项目语言的本地化变量的资源文件。

1
2
3
4
5
6
7

{{ $string := (printf "var rootURL = '%s'; var apiURL = '%s';" (absURL "/") (.Param "API_URL")) }}
{{ $targetPath := "js/vars.js" }}
{{ $vars := $string | resources.FromString $targetPath }}
{{ $global := resources.Get "js/global.js" | resources.Minify }}

<script src="{{ $vars.Permalink }}"></script>
<script src="{{ $global.Permalink }}"></script>

另请参阅

7 - js.Build

js.Build

https://gohugo.io/hugo-pipes/js/

​ 使用 ESBuild 处理一个 JavaScript 文件。

语法

js.Build RESOURCE [OPTIONS]

用法

​ 任何 JavaScript 资源文件都可以使用 js.Build 进行转换和 “tree shaken”，其参数可以是文件路径的字符串，也可以是下面列出的选项字典。

选项

  • targetPath [string]

    如果未设置，则使用源路径作为基本目标路径。请注意，如果目标 MIME 类型不同，目标路径的扩展名可能会更改，例如，当源是 TypeScript 时。

  • params [map or slice]

    可以在 JS 文件中作为 JSON 导入的参数，例如：

1

{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}

​ 然后在您的 JS 文件中：

1

import * as params from '@params';

​ 请注意，这适用于小型数据集，例如配置设置。对于较大的数据，请将文件放置/挂载到 /assets 中并直接导入它们。

  • minify [bool]

    让 js.Build 处理最小化。

  • inject [slice]

    此选项允许您自动将另一个文件中的导入替换为全局变量。路径名必须相对于 assets 。 参考 https://esbuild.github.io/api/#inject

  • shims [map]

    此选项允许将一个组件替换为另一个组件。常见的用例是在生产环境中从 CDN（带有shims）加载依赖项（如 React），但在开发期间使用完全捆绑的 node_modules 依赖项：

1
2

{{ $shims := dict "react" "js/shims/react.js"  "react-dom" "js/shims/react-dom.js" }}
{{ $js = $js | js.Build dict "shims" $shims }}

​ 这些 shim 文件可能是这样的：

1
2
3
4

// js/shims/react.js
module.exports = window.React;
// js/shims/react-dom.js
module.exports = window.ReactDOM;

​ 使用上述方法，以下导入应该在两种情况下都能正常工作：

1
2

import * as React from 'react'
import * as ReactDOM from 'react-dom';

  • target [string]

    语言目标。可选值为： es5 ， es2015 ， es2016 ， es2017 ， es2018 ， es2019 ， es2020 或 esnext 。 默认为 esnext 。

  • externals [slice]

    外部依赖项。使用此选项来修剪您知道永远不会执行的依赖项。 参考https://esbuild.github.io/api/#external

  • defines [map]

    允许定义（在构建时执行）一组字符串替换。应该是一个 map，其中每个键都将被其值替换。

1

{{ $defines := dict "process.env.NODE_ENV" `"development"` }}

  • format [string]

    输出格式。可选值为： iife ， cjs ， esm 。默认为 iife ，一个适合作为标签（tag）包含的自执行函数。

  • sourceMap [string]

    是否从 esbuild 生成 inline 或 external 源映射。外部源映射将写入目标输出文件名 + “.map”。输入源映射可以从 js.Build 和节点模块中读取并合并到输出源映射中。默认情况下，不创建源映射。

从 /assets 导入 JS 代码

​ js.Build 完全支持 Hugo Modules 中的虚拟并联文件系统。您可以在这个 测试项目 中看到一些简单的示例，但简而言之，您可以这样做：

1

import { hello } from 'my/module';

​ 它将解析为分层文件系统中assets/my/module下最顶层的 index.{js,ts,tsx,jsx} 文件。

1

import { hello3 } from 'my/module/hello3';

​ 将解析为 assets/my/module 中的 hello3.{js,ts,tsx,jsx} 。

​ 任何以 . 开头的导入都将相对于当前文件进行解析：

1

import { hello4 } from './lib';

​ 对于其他文件（例如 JSON，CSS），您需要使用包括任何扩展名在内的相对路径，例如：

1

import * as data from 'my/module/data.json';

​ 在位于 /assets 之外或不能解析为 /assets 内组件的文件中的任何导入都将由 ESBuild 解析，并将 项目目录 作为解析目录（用作查找 node_modules 等的起始点）。另请参见hugo mod npm pack。如果在项目中导入了任何 npm 依赖项，则需要在运行 hugo 之前确保运行 npm install。

​ 此外，请注意新的 params 选项，它可以从模板传递到您的 JS 文件中，例如：

1

{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}

​ 然后在您的 JS 文件中：

1

import * as params from '@params';

​ Hugo 默认会生成一个 assets/jsconfig.json 文件来映射导入。这对于代码编辑器中的导航/智能感知帮助很有用，但是如果您不需要/不想要它，您可以 关闭它。

将依赖项包含在 package.json / node_modules 中

​ 在位于 /assets 之外或不能解析为 /assets 内组件的文件中的任何导入都将由 ESBuild 解析，并将 项目目录 作为解析目录（用作查找 node_modules 等的起始点）。另请参见hugo mod npm pack。如果在项目中导入了任何 npm 依赖项，则需要在运行 hugo 之前确保运行 npm install。

​ 解析 npm 包（即位于 node_modules 文件夹中的包）的起始目录始终是主项目文件夹。

**注意：**如果您正在开发应该被导入并且依赖于 package.json 内的依赖项的主题/组件，我们建议了解 hugo mod npm pack，这是一种将项目中所有 npm 依赖项合并的工具。

示例

1

{{ $built := resources.Get "js/index.js" | js.Build "main.js" }}

或者带有选项：

1
2
3
4
5
6

{{ $externals := slice "react" "react-dom" }}
{{ $defines := dict "process.env.NODE_ENV" `"development"` }}

{{ $opts := dict "targetPath" "main.js" "externals" $externals "defines" $defines }}
{{ $built := resources.Get "scripts/main.js" | js.Build $opts }}
<script src="{{ $built.RelPermalink }}" defer></script>

另请参阅

8 - PostCSS

PostCSS

https://gohugo.io/hugo-pipes/postcss/

​ 使用任何可用的插件，使用PostCSS处理CSS文件。

语法

resources.PostCSS RESOURCE [OPTIONS]
postCSS RESOURCE [OPTIONS]

设置

​ 按照以下步骤使用任何可用的PostCSS插件来转换CSS。

  • Step 1

    安装 Node.js.

  • Step 2

    在项目的根目录中安装所需的Node.js包。例如，添加vendor 前缀到CSS规则：

1

npm install postcss postcss-cli autoprefixer

  • Step 3

    在项目的根目录中创建PostCSS配置文件。您必须将此文件命名为 postcss.config.js 或其他supported file names之一。例如：

postcss.config.js

1
2
3
4
5

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

​ 如果您是Windows用户，且项目路径包含空格，则必须将PostCSS配置放置在package.json文件中。参见此示例和问题#7333。

  • Step 4

    将CSS文件放置在 assets 目录中。

  • Step 5

    将CSS文件作为资源捕获，并通过 resources.PostCSS （别名 postCSS ）进行管道处理：

layouts/partials/css.html

1
2
3

{{ with resources.Get "css/main.css" | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

​ 如果在 assets 目录中使用Sass文件：

layouts/partials/css.html

1
2
3

{{ with resources.Get "sass/main.scss" | toCSS | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

选项

`resources.PostCSS`  方法接受一个可选的选项映射。

  • config

    ( string ) 包含PostCSS配置文件的目录。默认为项目目录的根目录。

  • noMap

    ( bool ) 默认为 false 。如果为 true ，则禁用内联源地图（sourcemaps）。

  • inlineImports

    ( bool ) 默认为 false 。启用@import语句的内联。它会递归执行，但只会导入一次文件。URL导入（例如 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); ）和带媒体查询的导入将被忽略。请注意，此导入例程不关心CSS规范，因此您可以在文件中的任何地方使用@import。Hugo将查找相对于模块挂载的导入并遵守主题覆盖。

  • skipInlineImportsNotFound New in v0.99.0

    ( bool ) 默认为 false 。在Hugo 0.99.0之前，当启用 inlineImports 并且我们无法解析导入时，我们会将其记录为警告。现在我们将构建失败。如果您的CSS中有常规CSS导入要保留，则可以使用带URL的导入或媒体查询（Hugo不会尝试解决这些导入），或将 skipInlineImportsNotFound 设置为true。

layouts/partials/css.html

1
2
3
4

{{ $opts := dict "config" "config-directory" "noMap" true }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

无配置文件

​ 为了避免使用PostCSS配置文件，可以使用选项映射指定最小的配置。

  • use

    (string) 用于指定要使用的 PostCSS 插件的以空格分隔的列表。

  • parser

    (string) 自定义 PostCSS 解析器。

  • stringifier

    (string) 自定义 PostCSS 字符串化器。

  • syntax

    (string) 自定义 PostCSS 语法。

layouts/partials/css.html

1
2
3
4

{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

检查 Hugo 环境

​ 当前的 Hugo 环境名称（通过 --environment 在配置或操作系统环境中设置）在 Node 上下文中可用，这使得可以使用如下结构：

postcss.config.js

1
2
3
4
5
6
7
8

module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [purgecss]
      : []
  ]
}

另请参阅

9 - PostProcess

PostProcess

https://gohugo.io/hugo-pipes/postprocess/

Allows delaying of resource transformations to after the build.

语法

resources.PostProcess RESOURCE

用法

Marking a resource with resources.PostProcess delays any transformations to after the build, typically because one or more of the steps in the transformation chain depends on the result of the build (e.g. files in public).

A prime use case for this is CSS purging with PostCSS.

There are currently two limitations to this:

  1. This only works in *.html templates (i.e. templates that produces HTML files).

  2. You cannot manipulate the values returned from the resource’s methods. E.g. the upper in this example will not work as expected:

    1
2
3

    {{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS | minify | fingerprint | resources.PostProcess }}
{{ $css.RelPermalink | upper }}

CSS purging with PostCSS

There are several ways to set up CSS purging with PostCSS in Hugo. If you have a simple project, you should consider going the simpler route and drop the use of resources.PostProcess and just extract keywords from the templates. See the Tailwind documentation for some examples.

The below configuration will write a hugo_stats.json file to the project root as part of the build. If you’re only using this for the production build, you should consider placing it below config/production.

config.

=== “yaml”

``` yaml
build:
  writeStats: true
```

=== “toml”

``` toml
[build]
  writeStats = true
```

=== “json”

``` json
{
   "build": {
      "writeStats": true
   }
}
```

postcss.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [ './hugo_stats.json' ],
    defaultExtractor: (content) => {
        let els = JSON.parse(content).htmlElements;
        return els.tags.concat(els.classes, els.ids);
    }
});

module.exports = {
     plugins: [
         ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
     ]
 };

Note that in the example above, the “CSS purge step” will only be applied to the production build. This means that you need to do something like this in your head template to build and include your CSS:

1
2
3
4
5
6

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $css.RelPermalink }}" rel="stylesheet" />

Hugo Environment variables available in PostCSS

These are the environment variables Hugo passes down to PostCSS (and Babel), which allows you do do process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [] and similar:

  • PWD

    The absolute path to the project working directory. HUGO_ENVIRONMENT (and the alias HUGO_ENV)

    The value e.g. set with hugo -e production (defaults to production for hugo and development for hugo server).

  • HUGO_PUBLISHDIR

    {{ new-in “0.109.0” }} The absolute path to the publish directory (the public directory). Note that the value will always point to a directory on disk even when running hugo server in memory mode. If you write to this folder from PostCSS when running the server, you could run the server with one of these flags:

hugo server --renderToDisk
hugo server --renderStaticToDisk

Also, Hugo will add environment variables for all files mounted below assets/_jsconfig. A default mount will be set up with files in the project root matching this regexp: (babel|postcss|tailwind)\.config\.js.

These will get environment variables named on the form HUGO_FILE_:filename: where :filename: is all upper case with periods replaced with underscore. This allows you to do this and similar:

1

let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';

另请参阅

10 - ToCSS

ToCSS

https://gohugo.io/hugo-pipes/transform-to-css/

​ 将 Sass 转译为 CSS。

语法

resources.ToCSS RESOURCE [OPTIONS]
toCSS RESOURCE [OPTIONS]

用法

​ 可以使用 resources.ToCSS 将任何 Sass 或 SCSS 文件转换为 CSS 文件，其中需要两个参数：资源对象和下面列出的一个选项映射。

1
2

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

选项

  • transpiler [string]

    使用的 transpiler ，有效值为 libsass （默认）和 dartsass 。如果您想使用 Hugo 与 Dart Sass，请从 Embedded Dart Sass 下载发布二进制文件，并确保它在您的 PC 的 $PATH （或 Windows 上的 %PATH% ）中。

  • targetPath [string]

    如果未设置，则转换后的资源的目标路径将是asset文件原始路径，其扩展名将替换为 .css 。

  • vars [map]

    键/值对的映射，将在 hugo:vars 命名空间中可用，例如：使用 @use "hugo:vars" as v; 或（全局）使用 @import "hugo:vars"; 。自 v0.109.0 起新增

  • outputStyle [string]

    默认值为 nested （LibSass）和 expanded （Dart Sass）。LibSass 的其他可用输出样式为 expanded 、 compact 和 compressed 。Dart Sass 仅支持 expanded 和 compressed 。

  • precision [int]

    浮点数精度。注意：Dart Sass 不支持此选项。

  • enableSourceMap [bool]

    启用时，将生成源映射。

  • sourceMapIncludeSources [bool]

    启用时，源将嵌入到生成的源映射中。（仅在 Dart Sass 中）。自 v0.108.0 起新增

  • includePaths [string slice]

    额外的 SCSS/Sass 包含路径。路径必须相对于项目目录。

1
2

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules/myscss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}

​ 将 outputStyle 设置为 compressed 将比更通用的 resources.Minify 更好地处理 Sass/SCSS 文件的压缩。

另请参阅

11 - 压缩

Minify - 压缩

https://gohugo.io/hugo-pipes/minification/

​ 压缩给定的资源。

语法

resources.Minify RESOURCE
minify RESOURCE

用法

​ 任何 CSS、JS、JSON、HTML、SVG 或 XML 资源都可以使用 resources.Minify 进行压缩，该函数需要资源对象作为参数。

1
2

{{ $css := resources.Get "css/main.css" }}
{{ $style := $css | resources.Minify }}

​ 请注意，您也可以通过运行 hugo --minify 压缩最终的 HTML 输出到 /public 。

另请参阅