Как разместить сайт jekyll локально с включенными css, js и фоновыми изображениями?

Ответ 1

Автоматический путь:

для файла css/js:

{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

<link href="{{ relative }}css/main.css" rel="stylesheet" />
<script src="{{ relative }}scripts/jquery.js"></script>

для других файлов:

в _config.yml set

url: http://www.yourdomain.com

добавить элемент канонической ссылки:

<link rel="canonical" href="{{ site.url }}{{ page.url }}" />

в одном из файлов js, добавьте:

var relative = null;
if (location.protocol==='file:') {
    relative = Array($('link[rel="canonical"]').attr('href').match(/\//g).length-2).join('../');
    if (relative == '') relative = './';
}
function to_relative(link, index) {
    if (!relative) return link;
    var hash = link ? link.match(/#.*$/) : null;
    if (hash) link = link.replace(/#.*$/, '');
    return link?(link.replace(/^\//, relative)+(index?(link.substr(-1)=='/'?'index.html':''):'')+(hash?hash[0]:'')):null;
}

$(function(){
    if (relative) {
        $('a').attr('href', function(a,b){return to_relative(b, true);});
        $('img').attr('src', function(a,b){return to_relative(b, false);});
    }
});

для других аспектов, используйте jQuery для их управления.

Ответ 2

Проблема заключается в том, что вы используете абсолютные пути для доступа к некоторым вашим ресурсам. Если вы хотите развернуть сайт в любом месте сети, вам нужно сделать их относительными.

В моем случае я должен определить (необязательный) параметр под названием root на страницах/сообщениях, которые ему нужны, указывая на "относительный корень" проекта. Например, на странице, расположенной в about/index.html, корень будет ../, так как существует только один уровень "вверх":

---
title: My Page title
root: "../"
---

Страницы, расположенные дальше в каталогах, нуждаются в большем количестве точек: ../../, ../../../ и т.д. Страницы в корневой папке (например, index.html) не нуждаются в корне.

Затем я использую эту настройку для генерации всех путей.

Если я нахожусь на странице или отправляю сообщение, и мне нужно обратиться к локальному изображению или другой странице, используйте page.root или post.root:

<img src="{{ post.root }}images/happy.png" />
<a href="{{ post.root }}2010/01/01/another_post>Relative link to another post</a>

Можно сделать ссылку напрямую (../images/happy.png), но это работает лучше, когда вы создаете сайт, и вы по-прежнему не уверены в окончательных путях каждой страницы.

У меня есть все css и js, включенные в один частичный файл внутри _includes. Он создает переменную с именем root, чтобы убедиться, что она работает как с страницами, так и с сообщениями:

{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}

<script type="text/javascript" src="{{ root }}js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" />

Это в значительной степени.

Ответ 3

Если вы можете жить с тем, чтобы создать свой сайт для определенной папки, использование тега html <base /> может быть более простым. Со всеми путями ресурсов по отношению к вашей корневой папке добавьте следующее в свой макет по умолчанию:

<base href="{{ site.baseurl }}" />

Затем используйте jekyll --base-url <folder> <folder>, чтобы развернуть ваш сайт jekyll до <folder> с правильной настройкой baseurl.

Обратите внимание, что это также работает без изменений со встроенным сервером WEBrick. Начните с jekyll --server и не укажите пользовательский --base-url.

Обновление:, как указывает gimpf в комментарии, это не будет работать с якорьными ссылками. Они будут указывать на базовый URL вместо текущей страницы. Существуют обходные пути с использованием JavaScript, например. переписать привязки hrefs с помощью jQuery:

$().ready(function() {
  $("a[href^='\#']").each(function(){
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});

Ответ 4

Существует проблема на Jekyll github, которая касается этого. Поместите _config.yml:

url: "<your domain>"

а затем с помощью {{ site.url }} вернет URL. Например, чтобы ссылаться на файл /css/styles.css из заголовка страницы:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">  
  <head>
      <...>
      <link rel="stylesheet" href="{{ site.url }}/css/style.css" type="text/css" />
      <...>
  </head>
  <body>
     ...
  </body>
</html>

Ответ 5

Альтернативный ответ -

У меня было аналогичное требование локально размещенного статического html, чтобы я мог распространять его на другие компьютеры без веб-сервера и читать его из файловой системы обычным браузером.

Вместо того, чтобы возиться с синтаксисом тайного пути в разных местах, хотя это можно сделать, о чем свидетельствуют другие ответы в этом потоке, я вместо этого выбрал обходной путь, опубликовав сайт на моем localhost: 4000, обслуживаемый Jekyll, как обычно, а затем использовала утилиту wget для загрузки статической копии статического веб-сайта, которую затем можно было открыть и перейти из файловой системы со стандартным веб-браузером. wget сделает сложную работу по созданию путей для вас.

Это команда wget, которую я использую -

wget \
 --recursive \
 --no-clobber \
 --page-requisites \
 --html-extension \
 --convert-links \
 --restrict-file-names=windows \
 --domains localhost http://localhost:4000

Ответ 6

Похоже, что путь к вашим изображениям /JS/CSS потребует небольшой корректировки. Попробуйте использовать путь, указывающий на сгенерированную папку.

Например:

<img src="/_site/images/foobar.jpg" />