У Minima нет возможности легко сделать «фотографию обложки», как вы ожидаете. Но это не значит, что невозможно сделать один.
При использовании Minima ваша домашняя страница отображается с помощью файла ./index.md и файла макета _layouts/home.html. Итак, если ваш рабочий каталог не содержит макет home, создайте каталог _layouts с файлом с именем home.html.
Макет home в минимумах
Я объясню, что содержит макет, чтобы вы могли использовать эти знания в других областях.
Макет содержит следующий код. Скопируйте весь приведенный ниже код в файл _layouts/home.html, который вы только что создали на предыдущем шаге:
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}
</div>
Давайте разберем фрагмент макета по фрагменту:
---
layout: default
---
Это блок, который сообщает Jekyll, что «домашний» макет является подмножеством «стандартного» макета.
<div class="home">
Это открывает контейнер для всего остального на домашней странице и закрывается на </div> в самой последней строке.
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
Это шаблонная инструкция, которая отображала бы заголовок домашней страницы, если он был указан во внутреннем файле ./index.md.
{{ content }}
Это еще одна шаблонная инструкция, которая извлекает содержимое (что угодно, кроме фронта) из файла, используя этот макет. В нашем случае это будет ./index.md.
Оставшийся кусок {%- if site.posts.size > 0 -%} циклически перебирает сообщения на вашем сайте и отображает список этих сообщений.
Изображение на обложке
Теперь у нас есть четкое представление о том, из чего сделан наш шаблон. Но нет никакого упоминания о коде для отображения обложки.
Согласовано. Итак, давайте закодируем это потом. Вставьте код из следующих шагов перед строкой с {{ content }} в макете
Сначала добавьте контейнер для изображения.
<div class="hero">
</div>
Затем вставьте HTML-разметку, чтобы отобразить в ней изображение по вашему выбору (скажем, ./assets/home-feature.jpg):
<div class="hero">
<img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>
С помощью только что приведенной разметки ваше изображение может быть слишком большим для вашей страницы. Поэтому мы должны ограничить размер с помощью CSS-стиля.
Minima использует Sass для генерации CSS для вашего сайта. Поэтому нам нужно перезаписать частичное с помощью некоторого пользовательского кода.
Создайте новый каталог с именем _sass с подкаталогом с именем minima и, наконец, файл внутри каталога _sass/minima с именем _layout.scss. Скопируйте содержимое в эту ссылку в этот файл.
Теперь добавьте следующий пользовательский код в конец файла:
/* Cover Image */
.hero {
.feature-img: {
max-width: 100%;
}
}
Рендеринг фонового изображения
Все вышеперечисленное - просто сделать обложку. Чтобы отобразить изображение как правильное фоновое изображение, вы можете сделать следующее ..
Во-первых, нам нужно настроить разметку для отображения текста на переднем плане, а изображение только в качестве фона :
<div class="hero">
{{ page.hero_text }}
</div>
С учетом вышесказанного вы теперь можете управлять текстом над фоновым изображением с помощью начального текста в ./index.md.
А затем вернуть изображение с помощью CSS:
/* Cover Image */
.hero {
background: url('../home-feature.jpg');
}
Получить url для вашего изображения немного сложно, так как мы не можем использовать инструкции Liquid внутри sass partials в vanilla Jekyll. Так что вам придется экспериментировать с ним для вашего конкретного сайта.
Чтобы узнать больше о CSS-фонах, проверьте эту ссылку