Макет для страниц сайта

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

Макеты создаются в каталоге _layouts.

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

Пример создания родительского “Макета”

Создадим самый основной и первоначальный макет от которого будут наследоваться другие макеты default.html.

У основного макета default.html нет конструкции front matter или как я его называю разделителя, который обозначится символами - - - - - - со свойством layout. Так как через данное свойство происходит наследование, а в данном случае основному макету не нужно ни от кого наследоваться.

Простой вариант

В простом варианте у нас есть некоторая основная разметка без использования конструкции include о которой речь пойдет в следующей статье или конструкции {% contentblock content %}.

Здесь мы просто используем служебную переменную {{ content }}, в которой находится содержимое записи различных типов, которые наследуются от этого шаблона.

<html class="no-js" lang="ru">
<head>
  <title>Title</title>
</head>
<body>
<div>Some markup</div>

<div class="layout">
  <header>Header</header>

  <main class="layout__main">
    <div class="container">
      {{ content }}
    </div>
  </main>

<footer>Footer</footer>
</div>

<script>console.log('Hello world')</script>
</body>
</html>

Сложный вариант

В сложном варианте уже могут использоваться конструкции include, которая подключает файлы с отдельно вынесенное версткой. И конструкция {% contentblock <name> %}, которая резервирует область для определенного контента.

<html class="no-js" lang="ru">
<head>
  {% include base/head.html %}
</head>
<body>
{% include base/body-top.html %}

<div class="layout">
  {% contentblock header %}

  <main class="layout__main">
    <div class="container">
      {% contentblock content %}
    </div>
  </main>

  {% contentblock footer %}
</div>

{% contentblock script %}
</body>
</html>

Пример создания дочернего “Макета”

Создадим дочерний базовый макет base.html, который каким либо образом дополняет содержимое основного макета default.html.

У базового макета base.html уже должна присутствовать конструкция front matter, которая обозначится символами - - - - - - со свойством layout. Так как через данное свойство происходит наследование, и в данном случае базовому макету base.html нужно наследоваться от основного default.html.

Наследование от default.html происходит благодаря конструкции layout: default, где default имя шаблона.

Простой вариант

В простом варианте мы дополняем то место в макете default.html где прописана конструкция {{ content }}. Именно на ее место будет вставлено содержимое файла base.html.

В свою очередь файл base.html так же имеет конструкцию {{ content }} на место которой подставится содержимое, наследуемое макет base.html. Это может быть либо тип записи, либо другой макет. Так как вложенность макетов друг в друга безгранична.

---
layout: default
---

<div class="layout__content">
  {{ content }}
</div>

Сложный вариант

В сложном варианте мы так же используем конструкции include, а так же {% contentfor <name> %}, которая подставляет содержимое внутри этой конструкции в зарезервированную область по имени в макете default.html.

---
layout: default
---

{% contentfor header %}{% include section/header.html %}{% endcontentfor %}

{% contentfor content %}
<div class="layout__content">
  {{ content }}
</div>

{% contentblock more-links %}
{% endcontentfor %}

{% contentfor footer %}{% include section/footer.html %}{% endcontentfor %}

{% contentfor script %}
<script src="/assets/js/main.js?v=0.1.0" type="module"></script>
{% endcontentfor %}

Вложенности нет предела

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

Для примера создадим еще один макет steps.html, который будет наследоваться от макета base.html.

---
layout: base
---

{{ content }}

{% contentfor more-links %}
<div class="layout__more-links">
  <h2>Другие статьи</h2>

  <ol>
    {% assign collection = site.steps %}

    {% for article in collection limit: 20 offset: 0 %}
    {% unless page.url == article.url %}
    <li><a href=""></a></li>
    {% endunless %}
    {% endfor %}
  </ol>
</div>
{% endcontentfor %}

На место {{ content }} будет подставляться содержимое типа записи, которое наследует шаблон steps.

Область {% contentfor more-links %} подставится на место зарезервированной области в макете base.html, так как именно его наследует макет steps.

Запись

Замыкающим в этой цепи наследования является тип записи страница, статья либо коллекция.

Например:

---
layout: steps
title: Установка шаблона
date: 2023-09-01 13:39 +0600
description: Инструкция по инициализации шаблона Jekyll.
published: true
sitemap: true
---

# {{ page.title }}

Склонировать шаблон.

{% highlight bash %}
git clone git@github.com:eliofery/jekyll-template.git
{% endhighlight %}

Установить зависимости.

{% highlight bash %}
bundle install
{% endhighlight %}

Запустить проект в режиме разработки.

{% highlight bash %}
jekyll build && bundle exec jekyll serve --livereload
{% endhighlight %}

Важно перед запуском виртуального сервера произвести первоначальную сборку шаблона командой **jekyll build**, для того чтобы критические стили подключились к шаблону. Так как первым собирается **html** и он просто не увидит файл с критическими стилями если сразу запустить команду **bundle exec jekyll serve --livereload**. Так как критические стили на этом этапе еще не будут созданы.

Перейти в браузере по ссылке.

{% highlight bash %}
http://localhost:4000
{% endhighlight %}

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

Другие статьи

Другие сниппеты

← К оглавлению