Как иметь относительные пути в одиннадцати?

В настоящее время я работаю над 11- тым проектом и мне очень нравится. Но у меня проблема со ссылками при развертывании вывода. Я хотел бы развернуть его в 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 is href="/"), и сайт не работает на сервере.

Есть ли способ иметь либо относительные ссылки (например, дома href="./" в корне index.html и href="../" на вложенных страницах) или, по крайней мере, включите подпапку в URL (например, Home is href="./subfolder/" )?

Источник

2 ответа

Не совсем то, что я искал, но это помогает с некоторыми частями моей проблемы. Фильтр URL нормализует абсолютные пути, например,

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

Более подробную информацию см. В одиннадцатом гитхабе.

Источник

Я столкнулся с той же проблемой и нашел решение: используйте переменные 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">

index.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

Источник
Другие вопросы по тегам