如何在 Hugo 中包含简单的 JavaScript

Question

给定以下代码：

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

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

Answer 1

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

在主题中，查看

layouts/partials 文件夹。

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

Answer 2

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

{{ block "page-script" . }}{{ end }}

那我可以加

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

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

Answer 3

bep's 非常好，但这里有一些额外的细节供 hugo/frontend 像我这样的新手使用

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 attribute can improve the page loading time a bit, and "/js/myscripts.js" is the location of my javascripts. The location is path relative to <project_root>\static\. Here are the documentation about relURL and urlize.

示例脚本文件只包含

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

3。使用JS函数

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

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

内联 JS

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

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

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

如何在 Hugo 中包含简单的 JavaScript

How to include simple JavaScript within Hugo

javascript

static-site

hugo

1。在 HTML 中找到一个包含 JS

2。在 HTML

3。使用JS函数

内联 JS