我目前开始与Hugo SSG合作。我的目标是拥有可靠但简单的应用程序，以将某些组件集中在否则的香草HTML，CSS，JS网站项目中。我想利用雨果为我维护头部，标头和页脚。
现在，我将目前项目的所有HTML和CSS迁移到了雨果，这效果很好。这是带有标头/页脚的平均登陆页面和几个部分。但是，我似乎无法包含我的JavaScript文件。
我从两个第一个脚本开始尝试设置，一个navbar.js和一个headershadow.js（简单的UI技巧）。
我已经在 {projectName}/themes/{themEname}/layouts/partials 中包含了这两个文件 footer.html 带有以下标签：
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>
第一个问题：甚至是甚至最好的做法？我在stackoverflow上的另一篇文章中发现了这一点，我无法复制。
第二个问题：我的Visual Studio代码已经完全标记了零件/js/navbar.js“ 在两个标签中都是错误的。我在这里做错了什么？
我尝试了：
- 连接为“常规”
＆lt; script src =“ js/headershadow.js”＆gt;＆lt;/script＆gt;
我会非常感谢对雨果经验丰富的人的建议
！
I am currently starting to work with hugo SSG. My goal is to have a reliable, yet uncomplicated application to centralize some components in otherwise vanilla html,css,js website projects. I want to utilize hugo to maintain head, header and footer for me.
Now I migrated all of the html and css of my current project to hugo, which worked fine. It's average Landing Pages with header/footer and a couple of sections. However I seem to be unable to include my Javascript files.
I have started with two first scripts to try out the setup, one navBar.js and one headerShadow.js (simple UI tricks).
I have included those two files in {projectName}/themes/{themeName}/layouts/partials into the footer.html with the following tags:
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>
First question: Is that even the best practice? I found this on another post on stackoverflow, which I'm unable to reproduce.
Second question: My visual studio code already flags exactly the part /js/navBar.js" in both tags as faulty. What am I doing wrong here?
I tried:
- connecting as "usual"
<script src="js/headerShadow.js"></script>
I would be very thankful for advice from someone more experienced with hugo!
Thanks alot in advance :)
发布评论
评论（2）
如果您不想使用Hugo Pipes（您需要的东西有点先进），这是一种简单的方法，可以在我的项目中使用效果很好。
＆lt; script src =“ {.site.baseurl}} js/navbar.js”代码> .site.baseurl 将被覆盖为
http：// localhost：1313/。在生产（Hugo命令）中，它将是baseurlinconfig.toml，例如https：// www。 example.com/。static目录中的文件位于您的网站root上，因此该文件将位于http：// localhost：1313/js/navbar.js。这就是为什么我相信相对路径不起作用的原因。如果那不起作用，您的项目中可能还有其他需要解决的问题，或尝试清除浏览器缓存。
If you don't want to use Hugo Pipes (it's a bit advanced for what you need), here's a simple way to approach it that worked fine in my project.
<script src="{{ .Site.BaseURL }}js/navBar.js"></script>In development (
hugo servercommand),.Site.BaseURLwill be overridden tohttp://localhost:1313/. In production (hugocommand) it will be the value ofbaseURLinconfig.toml, such ashttps://www.example.com/.Files in the
staticdirectory are built to your site root, so the file would be located athttp://localhost:1313/js/navBar.js. That's why I believe the relative path isn't working.If that doesn't work, there's likely some other issue in your project that needs addressing, or try clearing your browser cache.
我建议将雨果管和资产作为最佳实践。
在文档中：
资产管理
JavaScript构建
”确切的语法以及该怎么做，所以我不会打扰复制在此处粘贴它。这包括摇晃，缩小等等。等等。这是“最佳实践”。
我建议您（例如从node_modules等导入的选项）将您的JS放在资产文件夹中，以简单起见，并在上述文档中使用该选项。
具体来说：
我认为，对于一个简单的网站来说，这是最佳实践。
I would suggest using hugo pipes and assets as a best practices.
In the docs under:
ASSET MANAGEMENT
JavaScript Building
https://gohugo.io/hugo-pipes/js/
It gives the exact syntax and what to do so I won't bother copy pasting it here. This includes Tree Shaking, minify, etc. etc. Things which are "best practices".
I would suggest of the options (like importing from your node_modules or etc.) that you just keep your JS in the assets folder for simplicity and use that option in the above docs.
Specifically: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets
This would be, in my opinion, for a simple site, best practice.