在网站页脚加载脚本，只有在雨果的特定布局上？

Question

我的布局文件如下所示：

{{ define "main" }}
...
{{ end }}

我的 base_of.html 看起来像：

<!DOCTYPE html>
<html lang="{{ site.LanguageCode | default `en-US` }}">
...
</head>

<body>
    ...

    <!-- cache partial only in production -->
    {{ if hugo.IsProduction }}
    {{ partialCached "script.html" . }}
    {{ partialCached "footer.html" . }}
    {{ else }}
    {{ partial "script.html" . }}
    {{ partial "footer.html" . }}
    {{ end }}
</body>

</html>

在scripts.html文件中，我加载了所有页面将使用的JS文件。 但是，在特定的布局页面上，我想加载一个额外的 JS 文件，但它必须在我所有其他站点范围的 JS 文件都已加载后加载。

在布局页面的范围内，我似乎无法设置 scripts.html 部分可以引用的布尔变量，以便它知道加载该附加脚本。

有没有办法用 Hugo 做到这一点？

Answer 1

实际上有很多方法。
你可以有一个前题“toggle”
即假设您有一个 parallax.js 只想在某些页面上加载。在前面：“视差：真” 在你的基地你可以做：

{{ if .Params.parallax }}  
<script html here>
Or via partial (why did you load your scripts via a partial?). 
{{ end }}

我无权访问你的回购协议，所以我在这里瞎了：你也可以有筒仓布局（即假设你有 /content/about-us/）

并在布局中放置 /layout/about-us/

他们有你的单曲和列表文件并定义你的块。

示例见此处：

templates how to use
single page template
list page template

然后只需为该筒仓加载您想要的脚本。

你也可以在你的 JS 中简单地放置一个“if”语句来查看特定的 class 是否在该文件中（我不建议这样做，但你可以）。

假设您在特定页面上有一个轮播，它有一个 class 的“my-excellent-carousel”，然后您在 JS 中执行 if 语句。

就这几种方式。

如果您有任何问题，请告诉我。

此外，请查看 Hugo 文档。

具体来说：https://gohugo.io/templates/base/
积木很好——您可能正在使用它们，但我说不准。

我也总是建议查看其他主题，这样您就可以“掌握”执行此操作的方法。有很多，但是从 BEP 开始是安全的（作为 Hugo 的主要维护者）https://github.com/bep/docuapi

Answer 2

解决方案 1：定义另一个块

实现此目的的一种可能性是在布局文件中的 main 块旁边指定另一个块。您可以根据需要定义任意数量的块，然后通过块语句将它们呈现在其他文件中。

{{ define "main" }}
    ...
{{ end }}
{{ define "scripts" }}
    <script src="/js/layout.special.js"></script>
{{ end }}

然后，在您的 baseof.html 中，只需在您的主要脚本之后添加此代码以呈现块：

{{ block "scripts" . }}{{ end }}

方案二：调节页面类型

解决此问题的另一种方法是使用简单的 if 语句测试页面类型，如下面的代码所示。这可以作为文件中已有条件的子条件来完成，也可以作为之后的新的单独条件来完成。这取决于您的情况和目标。

<!-- cache partial only in production -->
{{ if hugo.IsProduction }}
    {{ partialCached "script.html" . }}
    {{ partialCached "footer.html" . }}
    {{ if eq .Type "layout-name" }}
        {{ partialCached "script.layout-name.html" . }}
    {{ end }}
{{ else }}
    {{ partial "script.html" . }}
    {{ partial "footer.html" . }}
    {{ if eq .Type "layout-name" }}
        {{ partial "script.layout-name.html" . }}
    {{ end }}
{{ end }}

请注意，在这种情况下，您必须确保页面具有指定的类型。有两种可能性如何做到这一点：

在内容文件的开头使用 predefined page variable type，或者
使用 file-based naming，其中包含布局数据的目录名称将等于条件中的字符串（在我的示例中，layout-name） .

.Type变量的默认值为页。

在网站页脚加载脚本，只有在雨果的特定布局上？

Load script in footer of site, only if on specific layout in Hugo?

html

javascript

hugo

解决方案 1：定义另一个块

方案二：调节页面类型