Установка Jekyll
Jekyll є інструментом командного рядка, який має бути встановлений перед використанням.
OS X
<code>$ gem install jekyll-v 2.4.0
Ubuntu
<code>$ apt-get install ruby ruby-dev make gcc nodejs $ gem install jekyll-v 2.4.0
Windows
Windows офіційно не підтримується, але є обхідний шлях.
Налаштування
Скачайте вихідні файли для Coffee Cafe, якщо ви хочете слідувати разом з нами.
Запустіть Jekyll для створення та обслуговування сайту. Перейдіть до робочої папки в терміналі та виконайте команду:
<code>$ cd path/to/site/files $ jekyll serve
jekyll serve будує статичний сайт усередині _site у тій же папці та запускає локальний веб-сервер. Перейдіть у вашому браузері за адресою http://localhost:4000 для перегляду Coffee Cafe.
Макети в Jekyll
Повторення вмісту є найбільшою нервуванням для чисто статичного сайту. Макети Jekyll вирішують цю проблему. Макет є HTML-файлом у папці _layouts із шаблоном для вмісту.
Створення макета
На кожній сторінці Coffee Cafe змінюються лише елементи <div.content> та <title>. Найпростішим способом створення макету є копіювання наявного HTML-файлу. Скопіюйте index.html у _layouts/default.html і замініть вміст div.content на {{ content }}.
HTML
<code data-language="html" v-pre=""></header> <div class="content"> {{ content }}
</div> <footer>{{ content }} є тегом Liquid, який є частиною мови шаблонів Jekyll.
Налаштування макету
Щоб задати index.html як макет за замовчуванням ми використовуємо вступ — фрагмент YAML вгорі файлу між рядками з трьох дефісів.
Щоб встановити макет index.html:
- оновіть файл, щоб він включав лише вміст div.content;
- додайте layout: default у вступ.
index.html (з YAML)
<code data-language="html">---layout: default---<section class="hero">...</section> <div class="container">...</div> <section class="cta">...</section>
Головна сторінка генерується з макетом за замовчуванням і показує вміст файлу замість {{ content }}. Сайт має виглядати так само, як і раніше. Повторіть той самий процес для всіх інших HTML-файлів.
Використання змінних сторінок
Щоб налаштувати <title> для кожної сторінки, ми ставимо змінну у вступі на кожній сторінці і використовуємо цю змінну в макеті. Додати змінну title до index.html:
index.html
<code data-language="html">---layout: default title: Home---...
Виведемо змінну в _layout/default.html через Liquid:
HTML
<code data-language="html" v-pre="">...
<title>{{ page.title }}</title> ...Тег заголовка тепер змінюється на кожній сторінці. Це зменшує непотрібне дублювання на сайті, тому що ви робите майбутні зміни в одному місці. Статті є Markdown або HTML-файли в папці _posts у такому форматі: рік-місяць-день-заголовок.розширення.
Формат файлу для статей блогу
Написання статей
Вміст статей блогу такий самий, що у сторінки — вступ і вміст файлу. Створіть файл з ім'ям _posts/2016-01-01-what-is-coffee.md, потім додайте вступ до вмісту статті.
post.md
<code>---layout: post title: What is Coffee? category: Інформація---Coffee is a brewed drink preparated from roasted coffee beans, which are the seeds of berries from the Coffea plant. Coffea plant is native to subtropical Africa and some islands in southern Asia. Рослини були вивезені з Африки до територій навколо світу і кав'ярні рослини, як тепер cultivated в більш ніж 70 Countries, в першу чергу в еквараторних регіонах Америки, Північної Азії, Індії, Африки. Два мости, як правило, величезні, є високо захищені арабці, і незрівнянно sophisticated але stronger і більше hardy robusta. Одні рипі, кавові брички є скиплені, затверджені, і залізні. Green (unroasted) coffee beans є одним з найбільших сільськогосподарських підприємств в світі. Одного разу traded, the coffee beans є розбиті до варіюючих степ, depending on the desired flavor. Розбиті кришки є бруду і brewed to produce coffee as a beverage. Source /Read more [Wikipedia](https://en.wikipedia.org/wiki/Coffee).
Такий поділ розмітки та даних є основою філософії Jekyll. Це дозволяє повторно використовувати вміст у будь-якому місці сайту.
Створення макету статті
У наведеному вище прикладі використовується новий макет під назвою post. Цей макет розширить стандартний макет і додасть специфічні елементи статті, такі як дата публікації та категорії. Щоб отримати таке в Jekyll, вказуємо макет усередині макету. Скопіюйте наступний код у _layouts/post.html:
post.html
<code data-language="html" v-pre="">---layout: default---<div class="container"> <h2 class="spacing">{{ page.title }}</h2> <div class="blog-post spacing"> <p class="summary">{{ page.category }}<span class="date">{{ page.date | date: '%B %d, %Y' }}</span></p> {{ content }}
</div>
</div>За допомогою Liquid ми виводимо кожну змінну з вступу, так само, як ми виводимо заголовок вище. Змінна з датою форматується за допомогою фільтра Liquid.
Список статей
Останнім кроком є список статей блогу в blog.html. За допомогою цикла for Liquid створюємо елемент для кожної статті в site .posts:
blog.html
<code data-language="html" v-pre="">--— layout: default title: Blog---<div class="container"> <h2 class="spacing">Blog</h2> <div class="blog-posts"> {% for post in site.posts %}
<div class="blog-post spacing"> <h3><a href="{{ post.url }}">{{ post.title }}</a></h3> <p class="summary"> {{ post.category }}
<span class="date"> {{ post.date | date: '%B %d, %Y' }}
</span>
</p> {{ post.excerpt }}
</div> {% endfor %}
</div>
</div>Jekyll підтримує використовувані вбудовані змінні, які не визначені у вступній частині:
- url — це згенерована адреса статті блогу, яка зазвичай виглядає як /категорії/рік/місяць/день/заголовок.html, але є багато варіантів налаштувань;
- excerpt — це уривок, який береться від початку вмісту статті;
- content тут не використовується, але він відображає весь вміст статті, так само як {{ content }} у макетах.
Все готово
За кілька хвилин ми перейшли від статичного сайту до сайту на Jekyll з блогом. Ось посилання для завантаження фінального сайту Coffee Cafe на Jekyll.