Управление ссылками Jekyll

Ubuntu | Amber | Комментировать запись

Jekyll – это генератор статических сайтов, который предлагает некоторые функции системы управления контентом (CMS), но при этом позволяет избежать проблем производительности и безопасности, которые бывают при использовании баз данных. Также Jekyll поставляется со специальными функциями для обработки контента, организованного по датам. Jekyll хорошо подходит для людей, которые часто работают офф-лайн, предпочитают использовать легкий редактор для поддержки контента и контроль версий для отслеживания изменений на сайте.

В этом мануале вы узнаете, как Jekyll обрабатывает URL-адреса и настраивает ссылки. Изменение URL-адресов нарушает соединения пользователей со страницами сайта, а также работу ссылок в контенте сайта.

Мы расскажем, как Jekyll создает URL-адреса по умолчанию и как изменить шаблон для отдельного файла или всего сайта. Затем вы научитесь связывать страницы с контентом и проверять работу ссылок.

Требования

Чтобы работать с этим мануалом, нужно выполнить предыдущие руководства:

• Установка Jekyll и создание сайта в Ubuntu 16.04
• Стандартный контент Jekyll

Файловая структура статического сайта

Во втором мануале вы научились пользоваться командой jekyll new и создавать скелет сайта, который можно просмотреть в веб-браузере. Теперь давайте посмотрим на файловую структуру, которая была создана вместе с этим статическим сайтом.

Примечание: Если вы выполнили вторйо мануал этой серии, у вас должен быть дополнительный каталог ресурсов и страница контактов. Если вы этого не делали или если вы самостоятельно добавили новые страницы, ваша структура может выглядеть несколько иначе.

Статический сайт представлен каталогом _site и всем его содержимым:

.
├── 404.html
├── about.md
├── assets
│   └── postcard.jpg
├── _config.yml
├── contact.md
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│   └── 2017-09-04-welcome-to-jekyll.markdown
└── _site
....├── 404.html
....├── about
....│   └── index.html
....├── assets
....│   ├── main.css
....│   └── postcard.jpg
....├── contact.html
....├── feed.xml
....├── index.html
....└── jekyll
........└── update
............└── 2017
................└── 09
....................└── 04
........................└── welcome-to-jekyll.html

В отличие от веб-сайтов, основанных на БД, URL-адреса для статических сайтов являются буквальными представлениями структуры каталогов на диске. Jekyll преобразовал категории записей в каталоги и расширил дату в файловой структуре, (этот шаблон является общим для многих блогов), так что окончательный шаблон URL для этой записи будет /category1/category2/YYYY/MM/DD/words-in-title.html; соответственно, сам URL-адрес будет выглядеть так: http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html.

Скаффолд не предоставляет динамические индексные страницы для этих каталогов, поэтому если пользователь удалит часть URL-адреса, чтобы найти все записи из определенной категории, года, месяца или дня, возможны два варианта. Если веб-сервер поддерживает автоматическое индексирование каталогов, пользователь увидит информацию о файлах и каталогах:

Index of /jekyll/update/2017/09/04
[…]

Если же администратор сайта отключил списки каталогов на сервере, пользователю будет отказано в доступе:

Forbidden
You don’t have permission to access /jekyll/update/2017/09/04 on this server.

Структуры, основанные на категориях и датах, являются распространенной схемой для URL-адресов блогов, но то, как вы решили структурировать свои URL-адреса, будет зависеть от потребностей вашего конкретного сайта.

Если вы хотите изменить адреса по умолчанию, Jekyll может упростить создание URL-адресов. Об этом полезно подумать, прежде чем публиковать сайт в первый раз, поскольку изменения в шаблонах URL влияют на то, насколько эффективно люди могут находить контент в поисковых системах, и на работу внешних ссылок.

Управление URL-адресами

Jekyll предлагает гибкую систему для создания URL-адресов. Она учитывает, как вы называете и где сохраняете исходные файлы, а также динамически переопределять некоторые значения или шаблоны.

Страницы по умолчанию

Когда мы создаем страницу в корне сайта (как, например, было со страницей контактов), имя файла, contact.md, преобразуется в contact.html, и в результате URL-адрес тоже исходит из корневого каталога:

http://203.0.113.0:4000/contact.html

Если поместить файл в один или несколько подкаталогов, они тоже станут частью URL-адреса. Например, если вы поместите страницу contact.md в каталог main, URL-адрес будет таким:

http://203.0.113.0:4000/main/contact.html

Стандарты записей

Записи работают иначе, чем страницы. Во-первых, у них есть категории, и статическом сайте эти категории становятся каталогами и, конечно, отображаются в URL. По умолчанию шаблон записи состоит из ее титульных элементов:

title:  "Welcome to Jekyll!"
date:   2017-09-04 03:36:31 +0000
categories: jekyll update

Итак, в каталоге _site есть подкаталог jekyll/update/2017/09/04/welcome-to-jekyll.html, названный по шаблону /:categories/:year/:month/:day/:title. В результате будет такой URL:

http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html

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

Параметры страниц и записей по умолчанию могут быть переопределены двумя способами.

Постоянные ссылки (Permalink)

Определение постоянной ссылки в титульных элементах отдельной страницы переопределяет значение по умолчанию как для страниц, так и для записей, что позволяет вам точно указать, что ссылки нужно создавать на основе файлов. Такая ссылка была установлена в контенте по умолчанию на странице About, где значение ссылки /about/ создало URL-адрес http://203.0.113.0:4000/about/, который, в свою очередь, существует на диске как about/index.html.

Постоянные шаблоны

Jekyll позволяет вам переопределить весь шаблон по умолчанию в файле _config.yml. Это повлияет как на страницы, так и на записи, но есть одно важное отличие: записи имеют доступ к категориям и элементам даты и времени из титульных элементов, а страницы – нет. URL-адреса страниц будут следовать шаблону, опуская все элементы, которые присущи записям.

Чтобы увидеть переопределение шаблона в действии, создайте шаблон, который сохраняет категории записей, опускает элементы даты и заканчивается заголовком записи или страницы:

nano ~/www/_config.yml

В конец файла добавьте значение:

. . .
permalink: /:categories/:title/

Чтобы увидеть, как изменения конфигурации повлияли на сайт, нужно остановить веб-сервер с помощью CTRL-C, а затем перезапустить его:

jekyll serve --host=203.0.113.0

Файловая структура на диске изменится:

── about.md
├── assets
│   └── postcard.jpg
├── _config.yml
├── contact.md
├── css
│   └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│   ├── 2017-09-04-welcome-to-jekyll.markdown
│   └── 2017-09-04-link-test.md
└── _site
....├── about
....│   └── index.html
....├── assets
....│   └── postcard.jpg
....├── contact          # originally `contact.html`
....│   └── index.html
....├── css
....│   └── main.css
....├── feed.xml
....├── Gemfile
....├── Gemfile.lock
....└── index.html
....└── jekyll
........└── update
............└── welcome-to-jekyll
................└── index.html

Эти изменения в файловой структуре отразятся на URL-адресах. Страница About все еще находится по адресу /about/, поскольку ее постоянная ссылка была установлена в отдельном файле с самого начала. Страница Contact изменила адрес с /contact.html на /contact/, а запись Link Test теперь находится по адресу /jekyll/update/welcome-to-jekyll/, потому что изменился шаблон всего сайта. Узнать больше о переопределении URL-адресов можно в документации Jekyll Permalinks.

Надежные ссылки на записи

Теперь вы знаете, где находятся настройки адресов и как их менять. В этом разделе вы найдете несколько советов по оптимизации ссылок.

В теле страницы полностью статического сайта URL-адреса страниц используются в одном из форматов:

• Абсолютная ссылка, [Link Text]([http://203.0.113.0:4000/post-name): это правильный формат для внешней ссылки, но он не подходит для нашего сайта: наличие номера порта в базовом URL-адресе приведет к тому, что ссылки станут неисправными в процессе производства; но если пропустить номер порта, ссылки не будут работать на этапе разработки.
• Корневая относительная ссылка, [Link Text(/[post-name): этот формат подходит только для локальных ссылок, он повторяет структуру каталогов на сервере, начиная с корневого каталога после первого слеша.
• Относительная ссылка, [Link Text](post-name): этот формат также относится к локальным ссылкам; путь начинается из каталога, в котором находится страница, содержащая ссылку.

Оба типа относительных ссылок имеют одну и ту же проблему. Если вы измените формат ссылок, вам нужно будет найти в контенте все ссылки в старом формате и обновить их. Шаблонизатор Liquid предлагает более гибкий способ создавать ссылки на записи. Вы можете использовать переменную post_url с именем файла. Вместо такой ссылки:

[Link Text](/jekyll/update/2016/09/08/welcome-to-jekyll.html)

Можно использовать:

[Link Text]({% post_url 2010-09-08-welcome-to-jekyll %})

Нужно только указать имя файла; нет необходимости включать каталог _posts или расширение файла. Ссылка на запись, сделанная таким образом, будет работать даже после изменения настроек постоянных ссылок.

Примечание: Сейчас эта возможность динамической компоновки ссылок доступна только для записей, но не для страниц. Подобная функция для страниц находится в разработке.

Создание новой записи

Создайте новую запись, чтобы проверить свои знания. Откройте новый файл в редакторе, укажите дату в имени файла:

nano ~/www/_posts/2017-09-04-link-test.md

Укажите титульные элементы. Дата в них должна совпадать с датой в имени файла. Укажите в файле свой IP или домен.

layout: post
date: 2017-09-04 07:00
title: Link Test
---
Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)
* [A Jekyll post_url link]({% post_url 2017-09-04-link-test %})

Сохраните и закройте файл. При повторном посещении главной страницы должна автоматически появиться новая запись Link Test.

Следуйте по ссылке на главной странице и проверьте работу всех появившихся ссылок. Все три ссылки должны работать.

Абсолютная ссылка будет работать на сайте разработки, но она перестанет работать при развертывании сайта с другим URL-адресом или без номера порта. Корневая относительная ссылка будет работать до тех пор, пока постоянная ссылка остается прежней. Однако если постоянная ссылка изменится, эта ссылка перестанет работать как в режиме разработки, так и в производстве. Ссылка post_url создаст корневую относительную ссылку при обработке сайта. Она не только будет работать в любом режиме, но и заставит Jekyll проверить запись при обработке сайта. Если записи не существует, Jekyll выдаст по этой ссылке сообщение «Liquid Exception» и укажет, какой файл содержит битую ссылку. Например, если вы ошибочно введете неверное имя файла:

Liquid Exception: Could not find post
"broken-name-welcome-to-jekyll" in tag 'post_url'.
Make sure the post exists and the name is correct.
in /home/8host/www/_posts/2017-09-04-link-test.md
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------

Тестирование ссылок на промежуточном сайте

На странице методов развертывания Jekyll описаны различные способы перемещения контента в производство в зависимости от ваших потребностей. Здесь вы найдете много всего, от FTP до сложных автоматизированных методов. На данный момент нужно создать промежуточный сайт на той же машине, чтобы посмотреть, как ведут себя ссылки.

Создание тестового сайта

Установите Nginx, чтобы проверить, как работают ссылки, прежде чем начать развертывание:

sudo apt-get install nginx

Когда установка будет завершена, разблокируйте HTTP-трафик.

sudo ufw allow http

Откройте адрес машины разработки. Вы увидите:

Welcome to Nginx!
[…]

Поскольку вы находитесь в одной файловой системе, переместите сайт с помощью базовой команды rsync.

Чтобы поместить содержимое _site в корневом каталоге Nginx, /var/www/html, нужно использовать следующую команду с флагом -a для рекурсивной синхронизации и сохранения данных. Опционально можно добавить флаг -v для подробного вывода.

sudo rsync -av ~/www/_site/ /var/www/html/

Когда команда rsync закончит работу, можете посетить сайт, не указывая номер порта:

http://203.0.113.0

Убедитесь, что перед тестированием вы остановили веб-сервер разработки.

Тестирование сайта

Тестирование после развертывания помогает убедиться, что читатели могут пользоваться ссылками. Это можно сделать и автоматически, но пока что мы посмотрим, как это делается вручную.

Новая запись в блоге появляется на главной странице (вверху) автоматически,.

Когда вы откроете запись Link Test, вы увидите, что и абсолютная ссылка, и корневая относительная ссылка больше не работают, потому что новая среда, в которой развернут сайт, не использует порт 4000, а ссылка Jekyll post_url работает по-прежнему.

Тестирование завершено. Теперь можно остановить nginx и закрыть порт 80, чтобы не обслуживать его трафик.

sudo systemctl stop nginx
sudo ufw delete allow http

Чтобы остановить сервер разработки, нажмите CTRL+C.

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

Заключение

В этой серии вы установили и настроили сайт разработки. Теперь вы знаете, как управлять веб-адресами страниц и записей, переопределять шаблоны по умолчанию, создавать надежные ссылки на записи и развертывать тестовый сайт.