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

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

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

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

Требования

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

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

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

Каталог _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-адреса, чтобы найти все сообщения из определенной категории, года, месяца или дня, он получит один из двух возможных результатов. Если веб-сервер поддерживает автоматическую индексацию каталогов, пользователь получит информацию о файлах и каталогах: название файла (каталога), дату последнего изменения, размер и так далее.

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

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

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

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

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

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

Стандартные параметры страницы

Когда мы создаем страницу в корне сайта (так, например, мы создали страницу контактов), имя файла 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-адреса.

Стандартные параметры страницы и публикации можно изменить двумя способами.

Постоянные ссылки

Определение постоянной ссылки в титульных данных отдельной страницы переопределит значение по умолчанию как для страниц, так и для публикаций, что позволит вам указать точную ссылку для каждого файла. Значение постоянной ссылки /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.html на /contact/, а публикация Link Test теперь находится по адресу /jekyll/update/welcome-to-jekyll/ — это произошло из-за изменения шаблона постоянных ссылок для всего сайта.

Больше информации на эту тему вы найдете в документации Jekyll.

Создание надежных ссылок на публикации

Теперь вы знаете, как управлять адресом, по которому расположена страница. Пора изучить несколько вещей, которые следует учитывать, ссылаясь на эти адреса.

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

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

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

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

Вы сможете использовать такую ссылку:

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

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

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

Тестирование ссылок в новой публикации

Давайте создадим новый пост, чтобы применить на практике то, что мы узнали о создании ссылок. Откройте новый файл в редакторе (укажите дату в имени файла, если есть необходимость):

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

Титульные данные мы настроим так же, как в примере публикации Link Test (только убедитесь, что указанная здесь дата совпадает с именем файла из предыдущего примера). Обязательно укажите в имени файла Link Test 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 %})

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

Перейдите по ссылке на домашней странице к новой публикации и проверьте все три ссылки в ней. Все ссылки должны работать на сайте в среде разработки.

Абсолютная ссылка будет работать на нашем сайте разработки, но она сломается, когда мы развернем сайт с другим URL-адресом или без порта. Ссылка относительно корневого каталога будет работать в любой среде до тех пор, пока схема постоянных ссылок остается неизменной. Но если вы измените эту схему, такая ссылка не будет обновлена ​​и перестанет работать. Ссылка post_url создаст ссылку относительно корневого каталога при анализе сайта. Она не только будет работать где угодно, но также позволит 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 можно посетить сайт, обслуживаемый Nginx, не указывая номер порта:

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, нам ни о чем не нужно будет особо беспокоиться, ссылаясь на страницы своего сайта. Тестирование ссылок в новой среде перед развертыванием в производстве позволяет вовремя выявить ошибки и обнаружить нерабочие ссылки на внешние сайты.

Заключение

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

Tags:

Добавить комментарий