7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Jekyll

Как настроить тему Jekyll

Scroll to top
Read Time: 13 mins

Russian (Pусский) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

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

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

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

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

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

Давайте начнем!

Jekyll на рынке Envato

В категории Jekyll на Envato Market есть множество тем стоимостью от 19 до 24 долларов. Позже мы будем использовать “Writer” и “Astro” (два текущих лидера продаж), чтобы продемонстрировать установку.

jekyll on Themeforestjekyll on Themeforestjekyll on Themeforest
Темы Jekyll на рынке Envato

Установка Jekyll

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

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

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

Предпосылки

Работа с Jekyll включает немного использования командной строки, но если вы никогда не работали с командной строкой, то пусть вас это не пугает. Я рекомендую для удобства пробежаться по некоторым записям в серии Командная строка для веб-дизайна.

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

В противном случае, если вы используете Mac OS X, Linux или Unix, вам необходимо убедиться, что у вас установлены эти требования:

  • Ruby (предварительно установленный на Mac)
  • Ruby Gems (для управления пакетами Ruby)

Чтобы проверить, установлен ли Ruby, запустите команду ruby -v. тобы проверить, что Ruby Gems запускает gem -v. В обоих случаях эти команды проверяют номер версии, пока вы видите число, возвращенное в ваш терминал, и вы можете двигаться дальше.

Мы будем работать с Jekyll 3.1.x, поэтому вам не потребуется NodeJS или Python, как указано на странице документации по установке Jekyll.

Запуск установки Jekyll 

Теперь, чтобы установить Jekyll на ваш компьютер, запустите команду: gem install jekyll

Если вы видите сообщение о том, что вы не подписали разрешение, начните команду с sudo и введите ваш пароль при появлении запроса.

Затем вы увидите несколько строк, напечатанных в терминале, где показан процесс установки.  Когда он указывает, что “1 gem установлен”, все готово.

Создание сайта Jekyll по умолчанию 

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

Примечание: если в какой-то момент вы хотите создать новый сайт Jekyll во вложенной папке, используйте команду: jekyll new subfolder_name

Когда настройка сайта будет завершена, вы увидите сообщение в своем терминале, в котором говорится: “Новый сайт jekyll установлен в <path>”.  На этом этапе внутри вашей папки вы увидите стандартное содержимое сайта Jekyll.

Теперь запустите команду jekyll serve, чтобы обновить ваш сайт и запустить его в автономном режиме.

Когда вы увидите сообщение “Сервер работает ... нажмите ctrl-c, чтобы остановить” в своем терминале, вы можете перейти по адресу http://localhost:4000 в браузере и проверить сайт Jekyll по умолчанию.

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

Быстрая демонстрация новых тем

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

Это означает, что при загрузке новой темы Jekyll вы можете просто извлечь ее, запустить jekyll serve  и демонстрировать темы сразу на полностью функциональном сайте Jekyll. Многие темы даже поступают с уже включенным демонстрационным содержимым.

Давайте посмотрим на некоторые примеры, используя темы “Writer” и “Astro” (или любую, которую вы предпочитаете). 

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

Затем откройте терминал внутри папки и запустите jekyll serve.

Если все успешно, вы увидите сообщение “Адрес сервера:” с URL, отображаемым в конце терминала.  Скопируйте и вставьте этот URL в браузер, и вы увидите демо-версию своей новой темы. 

Отсутствие зависимости? 

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

В этом примере вы можете увидеть в красном тексте ошибки, что gem “jekyll-paginate” отсутствует. 

Быстрый поиск Google включает репозиторий Github для gem в вопросе, предоставляя команду, необходимую для его установки. 

После запуска указанной команды и установки отсутствующей зависимости jekyll serve сможет работать с темой как ожидается. 

Если Демо не загружается. 

Если вы перейдете по предоставленному URL-адресу и не увидите сайт, например, как здесь:

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

Переменная baseurl добавляется к основному домену, когда мы работаем в автономном режиме, это http://localhost: 4000

В приведенном выше примере мы хотим, чтобы наш сайт показывал http://localhost:4000.  В файле _config.yml наше значение baseurl установлено на: 

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

Итак, нам нужно изменить значение на пустую строку следующим образом: 

Ваш сайт будет загружаться так, как ожидалось. 

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

Ознакомьтесь с темой.

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

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

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

  • Любые настраиваемые макеты страниц, которые могут быть в теме в папке _layouts
  • Любые настраиваемые значения, которые вам нужно задать в начале вашего контента. 

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

Сделайте ее вашей

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

Очистите демо-контент. 

Создайте новую папку на вашем компьютере и повторно извлеките в нее все файлы темы. 

В этот раз зайдите в папку _posts и удалите там все файлы, чтобы демо-сообщения были удалены. 

После этого удалите любые файлы .md (markdown) из корневой папки, чтобы все демо-страницы тоже исчезли. 

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

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

Настройка конфигурации сайта

Далее, вам нужно открыть файл _config.yml из корневой папки и настроить какие-нибудь расширенные значения сайта, которые требуются для темы. Как правило, некоторые настройки будут общими для всех файлов _config.yml, таких как title, email, description и несколько других.   Однако для данной темы будут некоторые особые настройки.

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

Например, в теме Writer это возможно для настройки пользовательского меню навигации с использованием значения nav_list для определения списка элементов меню.  У каждого из них есть метка, постоянная ссылка и категория, в результате чего рядом с ним появится значок шрифта Awesome.

Напротив, в теме Astro не используется особенное значение Writer - nav_item, но в ней есть свои значения, позволяющие добавлять ссылки во многие ваши учетные записи в социальных сетях, а также активировать комментарии Disqus и т.д. 

Работайте со значениями в файле _config.yml вашей темы, пока не настроите их на свой вкус. 

Обратите внимание, что если вы вносите такие изменения после первого запуска вашего нового сайта с помощью jekyll serve, вам нужно остановить процесс с помощью CTRL + C и перезапустить его, чтобы увидеть, как вступят в силу последующие изменения. 

Настройте вашу домашнюю страницу (если необходимо). 

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

Если доступно несколько макетов, вероятно, вы обнаружите, что можете выбрать другой, изменив значение настроек layout - вам нужно будет обратиться к документации темы, чтобы узнать, какие возможные значения могут быть использованы. 

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

Добавьте ваши собственные страницы. 

Если вы хотите добавить такие страницы, как “О” или “Контакты”, теперь настало время.  Добавьте документ .md (markdown) в корневую папку сайта для каждой страницы, которую вы хотите настроить. 

Примечание: некоторые темы настроены так, что все страницы помещаются во вложенную папку (обычно названные “pages”) вместо корневой папки, проверьте в документах темы, чтобы убедиться, что это так. 

Например, здесь я добавил страницу “О сайте” (about.md),  страницу профиля автора “Обо мне” (author-kezz.md),   а также страницу “Контакты” (contact.md). 

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

Например, здесь я скопировал существующую страницу автора из демонстрации Writer и преобразовал ее в свою, переименовал ее, а затем отредактировал ее вступительную статью и содержимое. 

Добавление сообщений

Теперь у вас есть все необходимое для настройки структуры сайта, пришло время добавить сообщения. Я рекомендую скопировать сообщение из папки _posts вашего демо-сайта и вставить его в установку, над которой вы работаете.  Затем вы можете переименовать его с датой и постоянной ссылкой в новую статью.  Повторно используя демонстрационное сообщение, вся необходимая вступительная статья должна быть на месте, и вам нужно только обновить ее. 

Категории, теги и другие дополнительные функции. 

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

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

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

Переключение тем на существующем сайте. 

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

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

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

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

Завершение

Итак это основные моменты того, как вам настроить тему Jekyll! Более мелкие детали процесса будут варьироваться от темы к теме, но вы все равно можете следовать этим основным этапам в каждом случае. Давайте быстро рассмотрим, что это за этапы. 

  • Быстрая демонстрация новой темы путем ее извлечения и запуска: jekyll serve 
  • Установка отсутствующей зависимости, препятствующие запуску темы. 
  • Просмотр вступительной части демо-сайта и запись особенностей, которые вам нужно научиться использовать. 
  • Просмотр структуры файла, в частности папки _layouts, чтобы узнать, какие пользовательские макеты и значения вам могут понадобиться. 
  • Создание второй установки темы и очистка страницы демонстрационного контента, сообщений (при необходимости), изображений. 
  • Ввод настроек в _config.yml в соответствии с вашим сайтом. 
  • Настройка домашней страницы (если требуется), путем редактирования значений вступительной статьи в файле index.html в корневой папке. 
  • Создание файлов разметки страницы с требуемой вступительной статьей (или копирование и вставка их с вашего демонстрационного сайта/существующего сайта). 
  • Создание файлов разметки страницы в папке _posts с требуемой вступительной статьей (или копирование и вставка их с вашего демонстрационного сайта/существующего сайта). 
  • Выполнение любых дополнительных настроек, необходимых для темы, например такие, как создание категории шаблонов.

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

Для подробного знакомства с руководством по использованию Jekyll ознакомьтесь с этим курсом от Guy Routledge:

Спасибо за чтение, и до встречи!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.