msun_


Jekyll - Создание дисклеймера для постов

Финальный результат:

Пример дисклеймера. В статье вы научитесь создавать кастомизируемые дисклеймеры для Jekyll-блога.

Как это устроено

Jekyll поддерживает include файлы, которые представляют из себя кусок html файла, которй в свою очередь можно использовать в любом месте в .md файлах используя язык шаблонов Liquid.

Для начала нужно создать папку “_includes” и в ней же создать файл “disclaimer.html”. В файле расположить этот код:

<div class="disclaimer">
    <p><i> {{ include.text }} </i></p>
</div>

“div” тэг может быть абсолютно любым, самое главное добавить
{{ include.text }} переменную. Также можно добавить другие переменные по типу {{ include.имя_переменной }} . Например ссылку на изображение для тэга и тд и тп.

Теперь в этой же папке (“_includes”) можно создавать сами дисклеймеры с расширением .html. Пример дисклеймера:

{% include disclaimer.html
text="I'm too lazy to translate this article.<br> Too bad!"
%}

В этом файле мы генерируем уже полный html-код дисклеймера с text переменной. В самом сайте код этого шаблона будет выглядеть так:

<div class="disclaimer">
    <p><i> I'm too lazy to translate this article.<br> Too bad! </i></p>
</div>

Как использовать

Чтобы было проще использовать дисклеймеры в блог-постах я сделал специальную переменную массива в шаблоне поста: “disclaimer: []” и добавил кусок кода, который добавляет каждый дисклеймер в пост из пременной “disclaimer”. В самом посте остается добавить название дисклеймеров, которые хотите использовать.

Код, добавленный в “/_layouts/posts.md”, который добавляет дисклеймеры:

{% for disclaimer in page.disclaimer %}
    {% include {{ disclaimer | append: ".html" }}  %}
{% endfor %}

Этот код проходит по массиву disclaimer и добавляет каждый ранее созданный нами дисклеймер в наш блог-пост. При добавлении дисклеймера в переменную поста писать расширение не нужно - код делает это за нас.

Удачи!

Back to other posts