Рецепты
В данном разделе находятся решения типовых, часто возникающих задач:
- Сохранение изменений
- Откат к последнему сохраненному изменению
- Изменение title
- Создание навигационной панели
- Подключение скриптов
- Загрузка шрифтов
- Загрузка изображений
- Фавиконы
- Open Graph — карточки для соцсетей
Сохранение изменений
git add .
git commit -m "сообщение, отражающее суть проделанной работы"
Чем чаще вы сохраняете изменения, тем лучше. Git позволяет вам не бояться менять исходный код: в случае чего, все всегда можно вернуть как было. Однако, будет лучше всего, если каждый коммит будет содержать логически обособленное изменение.
Откат к последнему сохраненному изменению
git resed --hard HEAD
Эта команда полностью и необратимо вернет весь проект к последнему коммиту.
Изменение title
В файле default.hbs тег title умеет динамически подставлять в себя название текущей страницы:
<title>(название проекта){{#if title}} - {{title}}{{/if}}</title>
Практически в каждой из страниц, расположенных в src, есть соответствующая постоянная title:
---
title: Sticky footer example
---
---
title: Demo elements
---
При наличии этой постоянной, title страницы будет выглядеть как (название проекта) - (название страницы), например, Test - Sticky footer example. Если же этой постоянной не будет, как например в index.hbs, title примет значение (название проекта).
Вы можете изменить это поведение именно здесь, в layouts/default.hbs.
Создание навигационной панели
Навигационная панель — один из компонентов, требующий выделения активной страницы. Для этого в Baumeister есть специальный механизм. Рассмотрим любую из ссылок файла partials/navbar.hbs:
<li class="{{home}}">
<a href="index.html">Home</a>
</li>
Как мы видим, в имя класса элемента навигационной панели подставляется значение некой постоянной home. Откроем файл index.hbs, и все станет ясно:
---
home: active
---
{{> navbar }}
...
...
При шаблонизации, элемент navbar подставится в файл home.hbs. При этом значение постоянной home — active — подставится именно отсюда. На собранной странице, эта же ссылка будет выглядеть так:
<li class="active">
<a href="index.html">Home</a>
</li>
В Bootstrap класс active особым образом выделяет активный пункт навигационной панели.
По аналогии, другие ссылки в панели в качестве имени класса будут иметь содержимое одноименных постоянных. Но, так как в файле index.hbs нет постоянных с именами других страниц, имя класса окажется пустым. Аналогично сделано и в других страницах:
<li class="{{demoElements}}">
<a href="demoElements.html">Demo Elements</a>
</li>
---
title: Demo elements
demoElements: active
---
{{> navbar }}
...
...