Написание постов
Одной из лучших сторон Jekyll является его готовность как блог платформы “из коробки”. Это значит, что ведение блога уже включено в функционал Jekyll. Если вы пишите статьи и публикуете их в сети, то вы можете публиковать их и вести блог просто управляя каталогом с текстовыми файлами на вашем компьютере. В сравнении с морокой по настройке и поддержке базы данных обычных CMS это впечатляет.
Каталог с постами
Как было объяснено в разделе о структуре каталогов, все ваши записи в блоге располагаются в каталоге _posts
. Обычно это файлы Markdown или HTML, но это могут быть и другие форматы, если для них установлен конвертер. Во всех постах должна быть вводная YAML и все они будут конвертироваться в HTML-страницы, составляющие ваш статический сайт.
Создание файлов постов
Для создания нового поста вам нужно создать новый файл в каталоге _posts
. Важно правильное именование файлов. Jekyll требует именования файлов в следующем формате:
YEAR-MONTH-DAY-title.MARKUP
YEAR
задается в формате из четырех цифр, MONTH
и DAY
в формате их двух цифр, а MARKUP
это расширение файла, указывающее на его формат. Вот пример правильно названных файлов:
2011-12-31-new-years-eve-is-awesome.md 2012-09-12-how-to-write-a-blog.textile
Совет: ссылки на другие посты
Используйте тег post-url для ссылок на другие посты, независимых от изменений стиля постоянных ссылок.
Формат контента
Все посты в блоге должны начинаться с вводной YAML. Дальнейшее содержимое зависит от выбранного вами формата. Jekyll изначально поддерживает Markdown и имеет множество расширений для других форматов, включая популярный формат Textile. В этих форматах различается подход к выделению различных типов контента, поэтому к выбору формата надо подходить с учетом своих знаний, навыков и потребностей.
Будьте осторожны с наборами символов
Обработчики контента могут модифицировать определенные символы с целью улучшения их внешнего вида. Например, расширение smart
для Redcarpet конвертирует стандартные кавычки ASCII в фигурные кавычки Юникода. Для того, чтобы браузер правильно их отображал, задайте кодировку в теге <head>
с помощью .
Подключение изображений и ресурсов
Рано или поздно вам понадобиться подключить изображения, вложения или иной нетекстовый контент. Синтаксис для подключения этих ресурсов в Markdown
и Textile
различен, проблема в том, где хранить эти файлы.
Благодаря гибкости Jekyll для этой проблемы есть много решений. Наиболее распространенным является создание специального каталога в корне проекта с названием типа assets
или downloads
, в который и помещаются ресурсы. Затем они подключаются из любого поста через путь от корня сайта.Это зависит от конфигурации домена и пути к вашему сайту, вот несколько примеров (в markdown) доступа к ресурсам внутри поста с помощью переменной site.url
.
Подключение изображения внутри поста:
… which is shown in the screenshot below:
![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg)
Ссылка на скачивание PDF:
… you can [get the PDF]({{ site.url }}/assets/mydoc.pdf) directly.
Совет: ссылайтесь, используя URL корня сайта
Вы можете пропустить переменную {{ site.url }} , если уверены, что ваш сайт всегда будет выводится через корневой URL. В таком случае вы можете ссылаться на активы непосредственно с /path/file.jpg
.
Вывод индекса постов
Удобно, когда все посты сложены в одном каталоге, но блог полезен тем, что можно в нужном месте вывести список постов. Создание индекса постов на отдельной странице (или в шаблоне) достаточно просто благодаря шаблонизатору Liquid и его тегам. Вот базовый пример создания списка ссылок на записи в блоге:
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
Конечно, это самый простой образец — у вас есть полный контроль над внешним видом и структурой сайта. Подробнее кастомизация описана в разделе шаблоны.
Запомните, что переменная post
из примера существует только внутри цикла for
. Если вам нужен доступ к текущей странице/посту, используйте переменную page
.
Выдержка из постов
Из каждого поста берется блок текста от начала и до первого появления excerpt_separator
, эта выдержка из поста доступна как post.excerpt
. С ее помощью мы можем модифицировать наш предыдущий пример с индексом, добавив первый параграф каждого из постов:
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
По умолчанию Jekyll использует для выдержки из постов первый параграф текста, окруженный тегами <p>
который для вас автоматически выделит движок Markdown. При желании эти теги можно обрезать:
{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
Если вас не устраивает автоматическая генерация выдержки, вы можете задать собственную настройку excerpt
внутри вводной. Также вы можете определить во вводной собственный сепаратор выдержки excerpt_separator
.
---
excerpt_separator: <!--more-->
---
Excerpt
<!--more-->
Out-of-excerpt
Полностью отключить выдержку можно задав excerpt_separator
значение ""
.
Также как и весь остальной контент, сгенерированный Liquid, вы можете обработать выдержку фильтром | strip_html
для удаления всех тегов HTML. Это особо полезно если вы хотите вывести выдержку внутри тега meta="description"
в head
или в ином месте, где HTML-теги будут лишними.
Подсветка фрагментов кода
В Jekyll есть встроенная подсветка кода с помощью как Pygments, так и Rouge, подключение фрагментов кода к любому посту делается легко. Просто используйте специальный тег Liquid:
{% highlight ruby %}
def show
@widget = Widget(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: @widget }
end
end
{% endhighlight %}
Результат будет выглядеть так:
Совет: отображение номеров строк в коде
Вы можете вывести нумерацию строк фрагментов кода, добавив ключевое слово linenos
в открывающий тег {% highlight ruby linenos %}
.
Этих основ достаточно для начала работы с постами. Если вы разберетесь с этим, то вас заинтересуют кастомизация постоянных ссылок и собственные переменные.