如何在Hugo中包含简单的JavaSCript

Question

给出以下代码:

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

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

Answer 1

这取决于您使用的主题.这可能是我们可以做得更好的地方,但这样做:

在主题中,看看

layouts/partials 夹.

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

Answer 2

bep的回答非常好，但这里有一些针对像我这样的hugo/前端新手的额外细节

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

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

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

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

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

示例脚本文件仅包含

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

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

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

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

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

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