Clone wiki

CMS / Строение_шаблонов

Как изготовить шаблон для AtomM CMS? Именно на этот вопрос я и дам ответ в этой статье. Ну что же, мой дорогой друг, без лишних церемоний, приступим...

Структура шаблонов Atom-M CMS

Каждый шаблон представляет каталог, внутрь которого помещено определенное содержимое. Как правило это изображения, таблицы стилей (css), javascript файлы и HTML файлы. Все это может иметь произвольную структуру, все кроме папки /html/. Эта папка является обязательной и все ее содержимое, так же, является обязательным. Стили, изображения и любые другие примочки могут находиться где угодно, лишь бы они были доступны через браузер и к ним были указаны правильные пути.

Что касается путей, их надо указывать не абсолютно - начиная со слеша, а относительно. Это не обязательно, но если в шаблоне пути указаны абсолютные и затем его поставят на систему, установленную в субкаталог, они не будут работать. Для указания относительных путей надо использовать конструкцию "../", которая означает возврат на один каталог вверх.

А вот на папке /html/ мы остановимся конкретно, так как она очень объемиста и мне есть что вам поведать касательно нее. Все файлы, такие как html, css и javascript должны иметь кодировку UTF-8 без BOM, это обязательно, иначе некоторые страницы будут отображаться не корректно, особенно это проявляется в браузере Опера любой версии.

И так, папка /html/ содержит набор каталогов для всех модулей, за исключением поиска, страниц и статистики (файлы модуля search и pages находятся в папке default, а модулю statistic шаблон вообще не нужен). Далее речь пойдет о каждом модуле.


Модули news, stat, loads, foto.

Я решил их объединить, так как их шаблоны очень схожи. На уникальностях я буду ставить акцент. И так, каталог шаблона для каждого из этих модулей выглядит так:

  • addform.html
  • editform.html
  • main.html
  • list.html
  • material.html

  • addform.html - форма добавления материала. Атрибут name формы должен иметь значение sendForm и этот же атрибут кнопки отправки формы должен иметь значение submitForm.

Возможно наличие еще ряда текстовых полей и textarea со следующими атрибутами name: title, mainText, description, tags, sourse, sourse_email, sourse_site. В каталоге фото отсутствуют такие поля как description, tags, sourse, sourse_email, sourse_site. В атрибуты value этих полей должны быть поставлены соответствующие локальные метки: {{ context.title }}, {{ context.mainText }} и т.д.

Кроме этого во всех модулях, о которых говорится, кроме foto, присутствуют два поля типа checkbox, с атрибутами name равными commented и available. Атрибут value у них всегда равен единице (1), поэтому для их выделения или возврата в исходное состояние в случае ошибки используется конструкция

<input type="checkbox" name="commented" value="1" {{ context.commented }} />
<input type="checkbox" name="available" value="1" {{ context.available }} />

Все модули имеют селектор для выбора категории с именем cats_selector и используется он следующим образом

<select name="cats_selector">{{ context.cats_selector }}</select>

В атрибут action формы ставиться локальная метка {{ context.action }}, это позволяет отправлять форму точно в цель.

В каталоге файлов так же есть дополнительное поле file c именем attach, а в каталоге фото такое же, но с имененм foto.

Кроме того, во всех, кроме foto, модулях есть возможность прикрепления изображений. Для этого используйте следующий код:

<div id="attachments">
  <input style="width:20px;" type="button" name="addInput" value="+" onClick="addFileField('attachments');" />
  <input class="attachField" type="file" id="attach1" name="attach1"  onChange="getFile(1)" /><span id="attachMeta1"></span><br />
</div>
  • editform.html - Форма редактирования материала. По используемым полям и меткам, полный аналог формы добавления, за исключением того, что в этой форме нельзя использовать поля с значением name равным attach.
  • main.html - Основной шаблон модуля. В нем можно использовать любые глобальные метки. Обязан иметь метку {{ content }}.
  • list.html - Шаблон для отображения материала в списке. На вход принимается массив {{ entities }}, который необходимо разложить на отдельные материалы с помощью кода, вроде этого:
{% for entity in entities %}
Название - {{ entity.title }}, {{ entity.views }} просмотров.
{% endfor %}
  • material.html - Просмотр материала. Работают те же метки, что и в list.html + {{ entity.add_markers.main_text }} - полный текст материала, {{ entity.add_markers.attachment }} - ссылка на загрузку файла, {{ entity.add_markers.previous_url }} и {{ entity.add_markers.next_url }} - соседние изображения в каталоге фото, {{ entity.add_markers.main }} - ссылка на изображение в каталоге фото.

Во всех файлах обрабатываются сниппеты.


Модуль chat

  • addform.html - форма отправки сообщения. Атрибут action равен {{ data.action }}. На странице должна быть выведена каптча при помощи метки {{ data.captcha }}. Так же должна присутствовать textarea с именем message и значением {{ data.message }} и input с name равным send.
  • main.html - Общий шаблон. Отличается от общих шаблонов других модулей, так как чат должен иметь возможность встраиваться в страницу наряду с остальным содержимым. Должен содержать iframe на адрес /chat/view_messages/ и метку {{ content }}, куда будет подставляться форма отправки сообщения.
  • list.html - Содержит массив меток {{ messages }}, в котором {{ message.name }}, {{ message.message }}, {{ message.time }} и другие...

Модуль forum.

Этот раздел рассчитан на более - менее опытного пользователя

  • addthemeform.html - форма добавления темы
  • editforumform.html - форма редактирования форума
  • editpostform.html - форма редактирования поста
  • editthemeform.html - форма редактирования темы
  • get_stat.html - статистика
  • main.html - общий шаблон
  • replyform.html - форма для добавления поста. Находится внизу списка сообщений темы
  • posts_list.html - общий контейнер для сообщений темы при просмотре темы
  • catlist.html - общий контейнер для форумов раздела.
  • themes_list.html - контейнер для списка тем
  • forum_passwd_form.html - Форма ввода пароля для входа на форум, защищённым на пароль.
  • movepostsform.html - Форма выборочного перемещения сообщений темы.
  • polls.html - Контейнер опросов, встраиваемый в тему.
  • splitthemeform.html - Форма разделения темы
  • unitethemesform.html - Форма слияния тем

Updated