我正在使用SSG(11 ty)创建一个站点,在向html添加外部js文件时遇到问题。我尝试将标记放在html中的几个不同位置,但每次检查控制台日志时都收到以下错误:
“* 获取网络::错误中止404(未找到)*”
在一个普通的html文件中,我会把script标签放在body的底部来链接到js文件,但是当我用11 ty来模板我的页面时,body的底部实际上是在一个单独的双节棍(.njk)文件中。
我试过将标记放在html文件的底部,但是当我的代码带有11 ty时,标记出现在继承自layout.njk文件的页脚上方。我也试过将script标记写在.njk文件正文的底部,但是每次都得到相同的错误。
有人知道为什么我会收到这个错误消息吗?我的标签应该放在哪里?
下面是我的文件结构:
src
|-- _includes
| |-- layout.njk
|-- carousel.js
|-- gallery.html
这是我的layout.njk模板文件主体的底部:
<script src="carousel.js"></script>
</body>
</html>
这是我的gallery.html文件的前页:
---
layout: layout.njk
title: The Gallery
---
这是我的gallery.html文件的底部:
</div>
</div>
<script src="carousel.js"></script>
这是我的. eleventy.js配置文件:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("./src/js");
eleventyConfig.addPassthroughCopy("src/img");
eleventyConfig.addPassthroughCopy("src/css");
return {
dir: {
input: "src",
layouts: "_includes",
},
};
};
谢谢!
2条答案
按热度按时间holgip5t1#
我相信问题不在于HTML
<script>
标记,而在于Eleventy没有将js文件复制到_site
目录中。在您的
.eleventy.js
配置中,您正在将src/js
复制到输出文件夹中,但是您的carousel.js
文件不在js
文件夹中。到您的配置,或者将您的carousel文件放在
src/js
中,并将您的脚本标记更新为这两种解决方案都应该奏效。
igetnqfo2#
您必须捕获js文件,如下所示:
或者,您可以直接在script标记之间编写js代码。
如果你想缩小也看到11 ty文档在这里:https://www.11ty.dev/docs/quicktips/inline-js/
一切顺利!