Изучение содержимого по умолчанию Jekyll

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

В first part этой серии мы установили Jekyll и его зависимости от сервера Ubuntu 16.04, создали сайт разработки в нашем домашнем каталоге и гарантировали, что трафик на сайт будет разрешен брандмауэром.

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

Чтобы следовать этому руководству, вам нужно будет завершить предыдущее руководство, * https: //www.digitalocean.com/community/tutorials/how-to-set-up-a-jekyll-development-site-on-ubuntu-16 -04 [Как настроить сайт разработки Jekyll в Ubuntu 16.04]. * Мы опираемся на работу, проделанную в этом руководстве, и без ее завершения примеры не будут совпадать.

Когда вы закончите часть 1, вы готовы начать.

Давайте начнем наше исследование на домашней странице, которая собрана из четырех разных исходных файлов. Мы рассмотрим каждый из этих файлов по отдельности и посмотрим, как они работают вместе для создания статической домашней страницы.

Если вы вышли из веб-сервера разработки после завершения первого урока, перезапустите его снова:

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

изображение: http: //assets.digitalocean.com/articles/jekyll-1604/homepage-labeled.png [Снимок экрана домашней страницы Jekyll с содержимым, помеченным исходным файлом]

Большая часть возможностей Jekyll заключается в возможности настроить информацию, которая будет повторяться во многих местах статического веб-сайта в одном исходном файле, + _config.yml +

По умолчанию + _config.yml +, созданный с помощью + jekyll new +, содержит пять настроек, которые видны на домашней странице:

изображение: http: //assets.digitalocean.com/articles/jekyll-1604/config.png [Снимок экрана с выделенным содержимым из файла _confg.yml]

Эта информация автоматически включается во все другие страницы и сообщения, которые мы создаем. Когда нам нужно обновить один из этих параметров, мы можем внести изменения в этот файл, и он будет обновляться везде. Чтобы увидеть это в действии, мы изменим эти значения.

Откройте файл в новом терминале:

Мы изменим настройки на значения ниже:

Мы оставим + url и` + baseurl` в процессе разработки и внесем любые изменения, когда пришло время развернуть наш сайт.

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

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

изображение: http: //assets.digitalocean.com/articles/jekyll-1604/config-changes.png [Снимок экрана с выделенными изменениями в файле _confg.yml]

В файле + _config.yml + можно сделать гораздо больше настроек, но сейчас мы перейдем к следующему исходному файлу и заметим, как сделанные нами изменения видны на остальной части сайта.

Перейдите по ссылке + About + в правом верхнем углу. Изменения, которые мы внесли в файл конфигурации, видны здесь, над и под основным содержанием страницы About.

изображение: http: //assets.digitalocean.com/articles/jekyll-1604/about.png [Снимок экрана с выделенным контентом about.md]

Этот центральный контент и текст ссылки в заголовке хранятся в файле + about.md +, который содержит четыре вида контента:

*1. Jekyll Front Matter * + Блок в верхней части файла + about.md +, начинающийся и заканчивающийся тремя черточками, является Front Matter Jekyll. Он должен быть первым в файле, и когда он присутствует, он сообщает Jekyll, что файл должен быть проанализирован. Обычно он включает в себя действительный YAML между строками, чтобы воспользоваться преимуществами предопределенных переменных, но он также может быть пустым. Пустой блок Front Matter иногда полезен для файла CSS или другого места, где вам не нужно устанавливать какие-либо значения, но вам нужен доступ к переменным.

Страница «О программе» устанавливает три значения в своем Front Matter:

*2. Видимый текст * + Содержание страницы начинается после Front Matter. Текст здесь появляется на странице, например, «Это базовый Jekyll 3. тема «.

*3. Markdown * + Markdown является частью содержимого главной страницы и управляет форматом содержимого. Он будет проанализирован в HTML для статического сайта. Авторы контента часто предпочитают разметку, а не HTML, потому что она разработана для того, чтобы ее было легче читать и писать.

*4. Директивы шаблонов Liquid * + Jekyll использует Liquid в качестве механизма шаблонов для включения динамических элементов. Директивы Liquid появляются между фигурными скобками, такими как + {% include icon-github.html username =" jekyll "%} +.

Давайте внесем некоторые изменения в эту страницу, чтобы увидеть, как это влияет на сайт.