MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

Шаблоны для новичков. Урок 15. Организация файлов и каталогов

MaxSite CMS / Создание шаблонов (версии 0.8x)Просмотров: 6167 (97)

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

Я рекомендую завести свой вариант базового шаблона. Да, у нас есть _create_a_new_template, но у любого вебмастера всегда начнет собираться коллекция скриптов, изображений, компонентов, стилей и просто примеры под меткой «подумать». Поэтому оптимальней будет сделать на основе _create_a_new_template свой вариант шаблона, который будет использоваться как база для любых других.

Причем, особо отмечу, этот шаблон должен быть 146 100% рабочим. В некоторых случаях вообще можно начинать работу над новым шаблоном в рамках базового. Чуть позже я покажу как это сделать.

Структура каталогов в целом будет повторять _create_a_new_template. Также я рекомендую сделать каталог __extra, в котором разместить изображения, скрипты, стили, примеры и какие-то свои идеи. Этот каталог не копируется в рабочий, но всегда будет под рукой.

Stock-файлы

В каталоге stock можно разместить готовые скрипты, которые могут подключаться в других файлах. Если какой-то stock-файл не используется, то в новом шаблоне просто удаляется его каталог (но он сохраняется в базовом). Удобство здесь в том, что мы можем разместить сложный php-код в stock-каталоге, а в нужном месте подключать его как обычный файл одной строчкой.

Изображения

Структура каталога images

Несколько слов о каталоге изображений images. Я пробовал самые разные варианты его структуры, и на текущий момент пришел к простому варианту: все файлы группируются по подкаталогам, но не более одного уровня вложения. Иначе возникает путаница. Вот мой вариант каталогов images:

  • _test - здесь файлы, которые я подбираю для дизайна. В рабочем шаблоне он удаляется.
  • backgrounds - фоны.
  • bullets - булечки для списков.
  • favicons - фавиконки.
  • headers - изображения для шапки. Обычно фото.
  • icons - иконки, если используются.
  • logos - логотипы.
  • placehold - заглушки для изображения. Я их формирую через placehold.it.
  • social - иконки соцсетей. Есть еще каталоги social1, social2 и т.п. где находятся другие наборы.
  • social-deafult - иконки соцсетей из default-шаблона.

Итого непосредственно в каталоге images находятся только несколько png-файлов, которые используются в type-файлах и имеют фиксированный адрес относительно шаблона.

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

Less-файлы

Теперь рассмотрим организацию less-файлов. Здесь также нет каких-то строгих правил, поэтому делать нужно так, чтобы было удобно прежде всего для себя.

Основной каталог для less-файлов лучше всего расположить в «корне» шаблона. Это объясняется тем, что в конце работы, когда исходный css-файл сформирован, less-файлы не нужны. Клиенту отдается без изменений обычный css-каталог.

У меня каталог для less-файлов называется css-less. В нём находится var_style.less, который является основным файлом. Уже в нём происходят подключение остальных файлов.

Рассмотрим как обеспечивается поддержка LESS в этом варианте.

В MaxSite CMS подключение css-стилей происходит по достаточно сложному алгоритму, где одним из подключаемых файлов может быть css/var_style.php. В этом файле мы и подключаем компилятор LESS и на выходе образуется var_style.css, который, собственно, и подключается в секции HEAD шаблона (автоматически).

Таким образом наша задача состоит только в том, чтобы указать пути к файлам.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); 
 
// укажем less-файл
$less_file = getinfo('template_dir') . 'css-less/var_style.less';
 
if (!file_exists($less_file))
{
    mso_add_file('css/var_style.css');
}
else
{
    echo mso_lessc(
            $less_file, 
            getinfo('template_dir') . 'css/var_style.css', 
            getinfo('template_url') . 'css/var_style.css', 
            false,     // разрешить использование кэша LESS
            true,     // использовать сжатие css-кода?
            true     //если включено сжатие, то удалять переносы строк?
            );
}

В этом коде путь указывается в $less_file. В функции mso_lessc() можно указать использование кэширования и сжатия css-кода. На этапе разработки я рекомендую запретить кэш, чтобы всегда иметь актуальню версию css/var_style.css.

Теперь система будет автоматом создавать css/var_style.css и подключать его в HEAD секции шаблона. После отладки можно удалить или переименовать css/var_style.php и компиляция автоматом отключится: будет использоваться готовый css/var_style.css.

Теперь рассмотрим организацию каталога css-less.

Структура Less-файлов (каталог css-less)

За основу берётся несколько базовых положений.

Основной файл - var_style.less. В нём происходит только (и ничего более!) подключение других less-файлов. Например:

@import url('variables.less'); // переменные
@import url('mixins/helpers.less'); // хелперы
@import url('mixins/menu_hor.less'); // хелпер меню горизонтальное
@import url('mixins/tabs.less'); // табы
@import url('base.less');  // базовое оформление
@import url('layouts/layout01.less'); // структура сайта
 
... и т.д. ...

Файл variables.less содержит глобальные переменные, которые могут использоваться в других less-файлах. Например:

@content_width: 960px; // вся полезная ширина сайта (контент + сайдбар)
@sidebar_width: 300px; // ширина основного сайдбара
 
@link_color: #1189B7; // цвет ссылок
@link_color_hover: #1189B7; // цвет при наведении

Структура каталогов базового шаблона

Файл base.less я использую для типографики и для задания базовых стилей: ссылки, заголовки, цитаты и т.п.

В файле menu.less задаются меню. Сами же стили подключаются из миксов, которые находятся в каталоге menus.

Остальные файлы группируются по каталогам.

  • blocks - стили блоков, которые не попали в в другие группы.
  • components - стили компонентов.
  • layouts - здесь файлы, описывающие модульную сетку.
  • menus - стили меню.
  • mixins - здесь хелперы и прочие миксы.
  • plugins - стили плагинов.
  • responsive - стили для адаптивного дизайна.
  • stock - стили из stock-файлов.
  • type - специфичные стили для разных type-файлов.

Остановлюсь кратко на модульной сетке (каталог layouts). В предудущих уроках мы рассматривали различное расположение блоков и, можно было бы сохранить все эти варианты по разным less-файлам. Например в файле layout01.less расположить сайдбар слева, а в layout02.less - справа. Теперь, при создании нового шаблона, берем подходящий layout-файл, копируем его и уже на этой основе делаем нужную модульную сетку. Подключается нужный файл в var_style.less:

@import url('layouts/layout02.less');

То есть начать работу с новым шаблоном можно прямо в базовом.

Less-хелперы. Миксы (миксины)

Со временем вебмастер составит свой вариант helpers.less, где будут миксы для border-radius, шрифты, тени и прочая рутина. В Интернете вы найдете различные варианты, вроде lesselements.com, но я бы всё-таки посоветовал самостоятельно выстроить свой вариант хелперов. Проблема здесь в том, что чужие наборы - это результат чужого опыта, не имеющего к вашему никакого отношения. А поскольку миксы должны упрощать жизнь, то лучше делать так, чтобы было удобно прежде всего вам. Ну простой пример: микс .transition-duration(). Можно ли его набрать по памяти? Лично я использую .transition() - это проще.

Или вместо «традиционного» .opacity() - .op(). Цвет фона я задаю через .bg() и т.п. То есть я свожу к тому, что выбрать оптимальный вариант хелперов лучше со своей колокольни, не оглядываясь на других.

Небольшой вариант хелперов можно найти в Default-шаблоне: css/less/include/helpers.less. Что же касается правил написания less-кода, то сразу используйте мои рекомендации.

И ещё один момент, который не сразу очевиден. Со временем миксы меняются. Это происходит по нескольким причинам: исправляются ошибки, добавляются новые возможности и меняются предыдущие описания. При работе с шаблоном, конечно же хочется иметь самую свежую версию миксов, которые могут измениться в процессе работы с этим шаблоном. То есть возникает ситуация, когда в шаблоне окажется более свежая версия миксов, чем в базовом шаблоне. Самый простой вариант - это копировать в базовый шаблон исправленную версию файлов.

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

Поэтому мой совет: с месяц-другой «помучиться» с копированием, и уже после этого перейти на подключение из базового шаблона. Подключение в var_style.less будет таким:

@import url('../../mybasetemplate/css-less/mixins/helpers.less');

Здесь следует указывать относительный путь к файлу.

Итого

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

««« Урок 16 | Урок 14 »»»

Комментариев: 2 RSS

1Вячеслав23-10-2012 09:52

ИМХО, где то с 0.7 версии структура и количество каталогов шаблонов настораживает, их уже больше чем в ВП :)

И 15 каталогов для изображений, это зачем, я по возможности объединяю картинки в общий спрайт.

2MAX23-10-2012 11:12

Все файлы имеют какое-то назначение. Поэтому организовывать их по каталогам удобней и проще.

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.