如何在 Hugo 中包含简单的 JavaScript

Question

鉴于以下代码：

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

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

Answer 1

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

在主题中，查看

layouts/partials文件夹。

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

Answer 2

bep的回答非常好，但这里有一些额外的细节给像我这样的雨果/前端新人

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

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

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

然后我可以添加

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

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