7

我目前正在从事一个11ty项目，并且非常喜欢它。但是当我部署输出时，链接有问题。我想将它部署到不同服务器上的 2 个不同位置。其中一个位置位于根目录中，另一个位于子文件夹中。

输出中是否可以有相对链接？

我已经尝试过pathPrefix，但要么我没有正确使用它，要么它没有给我我正在寻找的结果。

.eleventy.js：

module.exports = eleventyConfig => {

    ...

    // Include our static assets
    eleventyConfig.addPassthroughCopy("images")

    return {
        pathPrefix: "/subfolder/",
        templateFormats: ["md", "njk"],
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        passthroughFileCopy: true,

        dir: {
            input: 'site',
            output: 'dist',
            includes: 'includes',
            data: 'globals',
        }
    }

}

当我运行时eleventy --config=eleventy.config.js --serve，会生成一个名为 的附加文件夹_eleventy_redirect，其中包括一个index.html文件：

<!doctype html>
  <meta http-equiv="refresh" content="0; url=/subfolder/">
  <title>Browsersync pathPrefix Redirect</title>
  <a href="/subfolder/">Go to /subfolder/</a>

当我运行eleventy --config=eleventy.config.js（没有--serve）时，该文件夹不存在。但是，无论哪种方式，所有链接都是绝对的（例如Home是href="/"），并且该站点无法在服务器上运行。

有没有办法拥有相对链接（例如Home在href="./"根 index.html 和href="../"子页面上）或至少在 url 中包含子文件夹（例如Home is href="./subfolder/"）？

4

2 回答 2

2

不是我想要的，但它有助于解决我的问题的某些部分。url 过滤器
规范化绝对路径，例如

href="{{ "/" | url }}"

更多详情请参见第十一个 github。

于 2019-10-31T20:08:30.320 回答
0

我遇到了同样的问题并找到了解决方案：使用 Liquid Template 变量（已经在 Eleventy 中）插入路径的相对部分。

假设你有：

  • 目录根目录下的index.html页面。
  • contact.html页面，其索引最终在 /contact 目录中创建。
  • _head.html文件导入一些 css 并包含在两个页面中。

你可以这样做：

_head.html：

<link rel="stylesheet" href="{{ relative_prefix }}/scss/styles.min.css">
<link rel="shorstcut icon" href="{{ relative_prefix }}/favicon.ico">

索引.html：

{% assign relative_prefix = '.' %}
{% include _head.html %}

<body>
...

contact.html（变成/contact/index.html）：

{% assign relative_prefix = '..' %}
{% include _head.html %}

<body>
...

这样，您可以选择始终使用相对路径，而从不使用绝对路径。因此，您可以简单地将 Eleventy 生成的文件复制到几个不同的目录中，它适用于所有目录。很酷的是，该站点也可以在您的本地计算机上运行而无需运行服务器，也就是说，您可以在浏览器中打开该站点，如下所示：file:///C:/myProjectDir/_site/index.html

于 2021-04-05T19:29:03.867 回答