如何在 Hugo 中包含简单的 JavaScript

Question

给定以下代码：

$('img').mouseenter(function(){
//...
}).mouseleave(function(){
//...
});

我希望它包含在我的文章中。如果可能，我想避免编辑主题以避免分叉等。

Answer 1

这在一定程度上取决于您使用的主题。这可能是我们可以做得更好的领域，但请这样做：

在主题中，查看

layouts/partials 文件夹。

如果您找到header.html 或类似名称，请将其复制到您当地的layouts/partials。然后，您只能覆盖此文件的内容。或者，您可以通过复制用于单个页面的模板进行自定义，通常是：layouts/_default/single.html。

Answer 2

bep 的 answer 非常好，但这里有一些额外的细节，供像我这样的 Hugo/前端新人使用

1。在 HTML 中找到包含 JS 的位置

首先，应该将 Hugo 主题的 header.html 或 footer.html（或类似名称）复制到您的 layouts/partials 文件夹中。它不一定是页眉或页脚，而是包含在您的 html 上的每个页面中的文件（这就是您通常使用 header.html 或 footer.html 的原因）。

我有一个页脚位于<theme_folder>\layouts\partials\_shared\footer.html 的主题，然后我将其从主题文件夹复制到项目布局文件夹<project_root>\layouts\partials\_shared\footer.html。

2。在 HTML 中包含 script.js

然后，我添加到footer.html的底部

<script defer language="javascript" type="text/javascript"  src="{{ "/js/myscripts.js" | urlize | relURL }}"></script>

defer 属性可以稍微提高页面加载时间，"/js/myscripts.js" 是我的 javascripts 的位置。该位置是相对于<project_root>\static\ 的路径。这是关于relURL 和urlize 的文档。

示例脚本文件只包含

// myscripts.js
function myFunction(x) {
    let d = new Date();
    alert("Current datetime: " + d + "\nYou passed in: " + x);
}

3。使用JS函数

这是在 Hugo 模板（属于模板的任何 .html）中使用 JS 函数的示例：

        {{ $somevar := "spam"}}
        <button onclick="myFunction( {{ $somevar}} )">Click me</button>

---

内联 JS

看起来内联 JS 也运行得很好；例如，添加

<script>
    alert("Script loaded!");
</script>

到模板 html 文件运行得很好。不过，我只会将其用于快速测试，因为在多个 html 文件中可能需要一些脚本，并且将相同的脚本添加到多个文件只会增加您的整体网站文件大小。

Answer 3

我将主题/whatever/layouts/_default/baseof.html 复制到 layout/_default/baseof.html 并在 html 标记末尾添加以下块：

{{ 块“页面脚本”。 }}{{ 结束 }}

那我可以加了

{{- define "page-script" -}}
<script>console.log("Hello!")</script>
{{- end -}}

在我的布局文件中放入脚本。