子目录的十一配置 - 用于图像和静态资产

Question

我正在使用 Eleveny 0.11.0。在开发过程中，在HTML中，我有类似的东西：

<img src="/images/footer.png" />

我在根目录中有一个名为"图像"的文件夹。我还配置了 eleventyConfig.addPassthroughCopy('images') - 因此它在构建过程中复制_site目录中的整个"图像"。

这一切都在本地运行良好，但是当我推送到服务器时，它必须进入一个名为"ssg-pages"的子目录 - 因此图像的 src 会中断。我需要它看起来像：

<img src="/ssg-pages/images/footer.png" />

仅在构建上，但仍希望在开发期间保留"/images/footer.png"。

有什么想法吗？

Answer 1

也许是这样：创建一个名为settings.js的_data文件。在其中，它返回一个对象，其中包含一个名为站点根目录的键。

module.exports = function() {
let siteRoot = process.env.SITE_ROOT;
return {
siteRoot
}
}

在本地，这不会被定义，只是作为一个空白值出现。在生产中，将其设置为ssg-pages。然后在您的网址中：

<img src="{{ settings.siteRoot}}/images/footer.png">

Answer 2

你问了18个月，没有得到答案。如果您仍然遇到该问题...

最简单的解决方案是使用目录ssg-pages/image进行本地图像存储。这样，您将无需在开发和生产环境中使用不同的映像文件位置。将src目录中的所有图像文件移动到./src/ssg-pages/images，甚至可以在本地<img src="/ssg-pages/images/footer.png" />引用它们。

如果这不是一个选项，您可能希望使用 addPassthroughCopy 更改目录。用

eleventyConfig.addPassthroughCopy({ "images": "ssg-pages/images" });

并且您的源目录image在_site输出中变得ssg-pages/images。您仍然通过<img src="/ssg-pages/images/footer.png" />引用您的照片。

但是，如果在开发和生产环境中确实需要不同的映像源路径，则可以通过在构建脚本中使用环境变量来完成package.json和合适的短代码。我看不出这种方法的任何理由，但也许我错了。