仅在 Hugo 中的特定布局上加载脚本在站点的页脚中？答案

【问题标题】：Load script in footer of site, only if on specific layout in Hugo?仅在 Hugo 中的特定布局上加载脚本在站点的页脚中？
【发布时间】：2021-11-11 19:05:57
【问题描述】：

我的布局文件如下所示：

{{ 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 做到这一点？

【问题讨论】：

标签： javascript html hugo

【解决方案1】：

实际上有很多方法。
你可以有一个前事“切换”
即假设您有一个 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”语句来查看该文件中是否有特定的类（我不建议这样做，但您可以）。

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

有几种方法。

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

另外，请查看 Hugo 文档。

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

我还总是建议您查看其他主题，以便您可以掌握执行此操作的“窍门”。有很多，但是从 BEP（作为 Hugo 的主要维护者）https://github.com/bep/docuapi

开始你是安全的

【讨论】：

【解决方案2】：

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

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

{{ 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 variabletype，或者
使用file-based naming，其中包含布局数据的目录名称将等于条件中的字符串（在我的示例中，layout-name）。

.Type 变量的默认值为page。

【讨论】：

太棒了！当然，现在看来很明显，这将是一种实现方式。谢谢！