При верстке сайта нужно соблюсти лишь два требования системы:
1. Правильные названия папок хранения изображений и скриптов.
Папка изображений: /images/
Папка CSS: /css/
Папка JS скриптов: /user_js/
2. Правильная кодировка шаблонов.
Она должна быть строго UTF-8
Перед созданием шаблонов нам нужно определить:
1. Какая часть дизайна будет общая у всех страниц
2. Где будет располагаться область, в которой будет выводиться контент
3. Какие части сайта будут являться «независимыми блоками», то есть небольшими виджетами, выводящими какие-то списки объектов, не зависящие от URL. Например небольшой «Новостной блок» или «Спецпредложения товаров» и тому подобное.
Какова последовательность интеграции:
1. Закачиваем картинки и CSS.
Заходим в «Дизайн», далее подраздел «Изображения». Там в корневой папке фотобанка увидим список текущих изображений для дизайна. Удаляем их и закачиваем свои.
Заходим в основную папку с шаблонами, жмем «Добавить файл». Указываем название CSS-файла вместе с расширением, например style.css. В область текста вводим код стилей (строго в кодировке UTF8)
2. Создаем базовый шаблон.
Для этого заходим в Дизайн, далее в шаблон base.html. Удаляем всё оттуда и копируем туда (обязательно в UTF-8) код «оболочки сайта», то есть какой-то внутренней страницы сайта, содержащей весь общий код внутренних страниц, включая обращения к стилям, изображениям, скриптам, хедер, шапку, меню, контентную область, футер — всё, что будет использовано во внутренних страницах.
После этого производим разметку базового шаблона.
Разметка шаблона заключается в том, что в коде мы выделим те области, которые будут подвержены каким-то изменениям в различных разделах.
На изображении приведен пример, какие области можно отметить
Это всего лишь пример разметки. Вы можете придумывать свои блоки. {% block xxx %}, где xxx — любое слово латиницей. Блоков может быть любое количество.
а) Отмечаем область заголовка страницы. Вместо текущего контента вставляем:
<title>{% block title %}Заголовок страницы по умолчанию{% endblock %}</title>
Эта запись значит, что область между тегами теперь маркирована тегами {% block title %} и {% endblock %}. Теперь во всех шаблонах, которые будут дочерними для базового, мы сможем переопределить эту область, то есть вставить собственный заголовок. А в базовом между этими двумя тегами будет значение по умолчанию, т.е. в случае, если ничего не определено будет выводиться то, что мы указали в base.html.
б) Отмечаем область контента. Вместо контента сайта (обычно между тегами контентного слоя) вставляем {% block content %} Контент по умолчанию {% endblock %}
Далее также маркируем другие куски кода, которые могут быть подвержены изменению на различных страницах сайта. Для них точно также придумываем названия {% block xxx %}, где xxx — любое слово латиницей.
в) Вставляем меню сайта.
В область, где будет располагаться меню вставляем тег меню. Меню может быть несколько, их теги указаны в разделе CMS "Навигация". Например, по умолчанию там уже, как правило создано меню с тегом {% Menu main_menu %}. Его можно и вставить. На месте, куда мы вставим этот тег, будет выводиться меню, соответствующее этому тегу, оформленное по шаблону этого конкретного меню.
г) Вставляем различные другие переменные:
{% SiteCaption %} — название, заголовок сайта (редактируется в настройках)
{% Subtitle %} — подзаголовок сайта (редактируется в настройках)
{% Counter %} — счетчик посещений (редактируется в настройках)
{% Phone %} — телефон (редактируется в настройках)
{% Copyright %} — копирайт дизайнера (задается дизайнером сайта)
{% Cmscopyright %} — копирайт системы (задается системой)
и другие.
Список этих переменных дан в виде подсказки под окном редактирования кода шаблона.
Копирайты обязательно вставлять только если у вас тариф "визитка".
3. Создаем шаблон главной страницы.
Заходим в раздел CMS "Дизайн", выбираем шаблон index.html. Если главная страница будет совершенно особенная, по новому шаблону, то базовый шаблон мы не наследуем, а копируем весь код сверстанной главной страницы, после чего расставляем там теги аналогично, как сделали в базовом. Если же мы хотим унаследовать всё из базового, переопределив именно для главной странички только контентную область и/или шапку, то прописываем "тег наследования" — {% extends "base.html" %}
Мы прописали тег наследования base.html и теперь на главной странице будет отображаться всё что и в base.html. Но мы, как помните маркировали в базовом шаблоне некоторые куски кода — их то мы и переопределим здесь, в index.html
Допустим, хотим переопределить заголовок страницы. Для этого, прямо здесь, чуть ниже тега наследования {% extends "base.html" %} пишем
{% block title %}Текст заголовка для главной страницы{% endblock %}
Теперь на главной заголовок будет переопределен на "Текст заголовка для главной страницы"
Теперь переопределяем контентную область. Чуть ниже переопределенного заголовка пишем:
{% block content %} {% MainText %} {% endblock %}
{% MainText %} — это тег "Текста для главной" из раздела настройки, чтобы пользователь мог менять контент, не залезая в шаблон.
Далее переопределяем все другие области на главной, если это надо. Те области, которые остаются не изменными мы просто игнорируем!
4. Создаем шаблон внутренних страниц.
Аналогично как мы создали шаблон для главной страницы, создаем шаблон для внутренних страниц. Отличие будет в имени шаблона — для внутренних страниц используется шаблон inner.html
