Как создать свой шаблон (для LibArea)?
Давайте попробуем создать новый шаблон для этого сайта. Засек время, на всё ушло около 10 минут. Сейчас осталось облагородить и залить сюда этот дизайн.
Создаю папку light
(а в вашем случае другую) в папке: /resources/views/
. В ней разместим следующие папки (2 папки: css
и global
) и файлы:
README.md
css
-- custom.css
-- build.css
global
-- base-header.php
Файл build.css
является обязательным.
Файл custom.css подключается из build.css
. При перестройке скрипт будет искать «файл для сборки» — build.css
.
В файле README.md
размещаем документацию по своему шаблону.
Всего 4 файла! При создание шаблона не стоит копировать всё содержимое папки default в свой шаблон. Пусть будут только те файлы, где были изменения. Мы открываем свой шаблон и если видим там файл, то знаем, что именно этот файл заменен. Если мы скопируем всю папку default и там будем править, то спустя уже 1 день мы понятия иметь не будем, что там изменили.
Отвлёкся…
Свои стили пишем в файл resources/views/light/css/custom.css
своего шаблона. Папка light
это и есть папка нашего шаблона.
Сейчас они вот такие:
body { background-color: #f3f3f3; }
.box,
.indent-body { background-color: #fff; }
.indent-body { padding: 15px; }
ul.nav > li.active {
background-color: #111;
color: #fff;
}
ul.nav > li.active > a { color: #fff; }
Готово!
Чтобы шаблон появился и был доступен для выбора в файл:
./config/general.php
Добавим в массив, где шаблоны строку:
'light' => 'Light',
Должно получиться:
'templates' => [
'default' => 'Default',
'qa' => 'Q&A',
'minimum' => 'Minimum',
'light' => 'Light',
],
Следом в админ- панель и пересобираем css.
Теперь подключаем собранный css непосредственно в шаблон. Для этого в файле «шапки» своего шаблона: /global/base-header.php
добавим строку:
Request::getHead()->addStyles('/assets/css/light.css?' . config('assembly-js-css.version'));
Должно получиться:
Request::getHead()->addStyles('/assets/css/style.css?' . config('assembly-js-css.version'));
Request::getHead()->addStyles('/assets/css/light.css?' . config('assembly-js-css.version'));
Вот собственно и всё.
Обновляем кэш браузера (или меняем счетчик в файле assembly-js-css.php
) и смотрим, что вышло.
P.S. на этом примере можно сделать свой шаблон.
Файл
build.css
может быть загрузочным в новом шаблоне. Хорошая идея!Ок. Так и сделаем. Перепишу сегодня код и статью. Уберу лишнее.