Создание компонентов и страниц сайта

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

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

Специально для таких случаев есть отдельное руководство.

Для удобной работы с исходным кодом, рекомендуется открыть в вашем любимом текстовом редакторе папку src целиком вместо того, чтобы открывать файлы по одному. Таким образом, весь проект окажется у вас перед глазами в соответствующей панели вашего редактора, и вы сможете быстрее переключаться между файлами.

Содержание:

Создание компонентов
- Разметка
- Стили
Создание страниц

Подразумевается, что вы ознакомились с базовым шаблоном, сгенерированным Baumeister, и знаете, что вам потребуется удалить файлы, которые вам не нужны.

Процесс создания сайта с высоты птичьего полета можно описать следующим образом:

Мысленно разделить сайт на переиспользуемые компоненты. Например, на макете выше эти компоненты выделены рамками.
Дать каждому компоненту выразительное имя. Например:
- Шапка со ссылками: navbar
- Большой заголовок: headline
- Текст ниже заголовка: slogan
- Кнопка: button
- Карточка с иконкой: feature
- Карточка с фотографией: card
Реализовать все компоненты.
Создать по файлу для каждой из предполагаемых страниц сайта. «Собрать» страницы из готовых компонентов.
Заполнить тег head в стандартном лейауте с учетом требований, предъявляемых к сайту. Необходимый минимум: указать язык сайта, по умолчанию установлен английский (en). Дополнительно можно создать фавиконки, настроить Open Graph, ввести ключевые слова.

Создание компонентов

Каждый из компонентов, как правило, имеет собственную разметку и собственные стили.

Для начала нужно подумать, какие из частей компонента будут уникальны, а какие будут оставаться неизменными.

В подавляющем большинстве случаев такие вещи как текст, иконки, изображения в компоненте, будут меняться, а разметка будет оставаться неизменной. Например, в компоненте card, описанном выше, иконка, заголовок и текст будут меняться. Такие изменяемые части называются параметрами. У компонента card параметрами окажутся иконка (icon), заголовок (heading) и текст (text).

Разметка

Описание синтаксиса Handlebars выходит за рамки этого руководства. С синтаксисом можно ознакомиться в официальном руководстве.

Для создания разметки компонента нужно создать одноименный файл в папке partials, для card это card.hbs. Внутри этого файла требуется разместить разметку компонента. Разметка card может выглядеть так:

<div class="card">
    <span class="card__icon glyphicon glyphicon-{{icon}}">
    <h2 class="card__heading">{{heading}}</h2>
    <p class="card__text">{{text}}</p>
</div>

Как мы видим, компонент размечен в соответствии с БЭМ. Родительский контейнер имеет название БЭМ-блока в качестве имени класса, оно совпадает с именем нашего компонента. Имена элементов карточки совпадают с именами соответствующих параметров.

После этого, созданный компонент может быть легко помещен на любую из страниц сайта:

{{> card icon="star" heading="Professionals" text="Sample text" }}
{{> card icon="heart" heading="Amateurs" text="Sample text, again" }}

Код, указанный выше, после окончания сборки превратится в следующий:

<div class="card">
    <span class="card__icon glyphicon glyphicon-star">
    <h2 class="card__heading">Professionals</h2>
    <p class="card__text">Sample text</p>
</div>
<div class="card">
    <span class="card__icon glyphicon glyphicon-heart">
    <h2 class="card__heading">Amateurs</h2>
    <p class="card__text">Sample text, again</p>
</div>

Удобно, не так ли? Мы можем создавать новые компоненты с другой иконкой, другими заголовком и текстом.

Более подробно про названия иконок в Bootstrap можно почитать в руководстве W3Schools.

Стили

Описание синтаксиса SCSS выходит за рамки этого руководства. С синтаксисом можно ознакомиться в официальном руководстве.

Для описания стилей компонента нужно создать одноименный файл в папке assets/scss/(название темы) и подключить его в файле _(название темы).scss. Рассмотрим этот процесс на примере компонента card и темы с названием My Awesome Theme.

Создадим файл card.scss в папке assets/scss/my-awesome-theme. Откроем файл _my-awesome-theme.scss и допишем в него следующее:

@import "my-awesome-theme/card";

По умолчанию в файле уже содержится подключение других предустановленных компонентов, чтобы было понятнее, как, куда и что нужно прописать, чтобы подключить компонент.

Линтер стилей по умолчанию настроен очень агрессивно и будет выдавать ошибку, если мы пытаемся подключить пустой файл. Поэтому приступим же к написанию стилей. Стили для card могут выглядеть так:

.card {

    box-shadow: 0 0 5px rgba(0, 0, 0, .3);

    &__icon {
        color: aquamarine;
    }

    &__heading {
        text-transform: uppercase;
    }

    &__text {
        text-align: center;
    }
}

Обратите внимание, как мы работаем с терминами БЭМ. Так как БЭМ требует, чтобы название элемента блока выглядело как (название блока)__(название элемента), чтобы не перепечатывать одно и то же название блока раз за разом, можно использовать вложенность и обращение к родительскому селектору через амперсанд. Код, указанный выше, превращается в следующий набор стилей:

.card {
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.card__icon {
    color: aquamarine;
}

.card__heading {
    text-transform: uppercase;
}

.card__text {
    text-align: center;
}

Если на этапе живой перезагрузки возникли ошибки, а раньше все работало, скорее всего, с вашим кодом что-то не так. Прочтите предупреждения, выдаваемые линтером, и устраните неполадки. Чтобы видеть ошибки не на этапе сборки, а еще раньше, на этапе написания кода, и сразу писать хороший код, желательно установить линтер SCSS прямо в ваш текстовый редактор. Установка линтера описана на примере Sublime Text в разделе «Настройка Sublime Text».

Создание страниц

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

Чтобы создать новую страницу, требуется создать файл с ее именем в папке src. По умолчанию доступна страница с названием index, она расположена по адресу src/index.hbs, и после сборки она превратится в index.html. По аналогии можно создать любую другую страницу. Допустим, страница будет называться contacts. Создадим файл contacts.hbs в папке src. Для улучшения предсказуемости кода, имя страницы не должно содержать пробелов.

В Baumeister используется особый трюк для выделения активных страниц в навигационной панели. Более подробно он описан в разделе «Рецепты». Если не вдаваться в подробности, требуется указать имя страницы в списке постоянных особым образом:

---
contacts: active
---
    {{!-- (разметка будет тут) --}}

Вместо contacts требуется указать имя создаваемой страницы.

Помимо этого, Baumeister может подставлять содержимое постоянной title в тег title, и название страницы будет видно в браузере. Для этого нужно указать имя страницы в соответствующей постоянной:

---
title: My Awesome Page
---

Чтобы поместить компонент на страницу, нужно лишь указать его имя и параметры, если они есть:

{{> card icon="heart" heading="Test" text="Hello, World!"}}
{{> coolpicture src="img/1.jpg"}}
{{> mycomponent }}

Компоненты могут не иметь своей разметки. Например, для создания блока с фоновым рисунком, как показано на макете в начале страницы, можно создать стили для некого компонента, например, hero, после чего соответствующий набор классов можно использовать в качестве БЭМ-компонента в любой части любой страницы.

Создание компонентов и страниц сайта

Создание компонентов и страниц сайта

Создание компонентов

Разметка

Стили

Создание страниц

results matching ""

No results matching ""