Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1 2 3

Шаблонизатор DrunyaCMS

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#1
В этой статье я постараюсь рассказать Вам о устройстве шаблонизатора в DrunyaCMS. О том как создавать шаблоны, как их обрабатывает движок и т.д.

Пункт 1
Ни один файл шаблона не должен содержать кода. Другими словами, все шаблоны это, только, HTML и JavaScript - никакого PHP.
Это сделано, с целью, упрощения жизни дизайнерам и верстальщикам, им не надо умать о коде.

Пункт 2
Все данные, а так же, вложенные куски шаблонов, подставляються путем меток. Метки имеют вид: {МЕТКА}. Например, вместо метки {CONTENT}, в основном шаблоне, подставляеться, как не странно, контент. То есть содержимое данной страницы. А оно, в свою очередь, собираеться из данных(допуcтим БД) и других шаблонов, которые, так же, собираются при помощи таких меток. Как Вы видете, все очень просто. Если углубиться, то можно узнать, что метки имеют свои области видимости. Некоторые доступны везде, а некоторые, только в определенных участках шаблона.

Пункт 3
Любая страница собирается из данных и нескольких файлов-шаблонов. По этому дизайн для каждого модуля должен содержать необходимые файйлы-шаблоны:
main.html.................общий вид страницы (хидер и футер)
tablemat.html.............таблица, в которую заносяться данные по конкретной записи(на странице с множеством записей, повторяеться)
viewmat.html..............Этот файл служит для просмотра конкретной записи. В него заносяться дынные, путем меток и далее весь этот контент помещаеться в основной файл шаблона, образовывая готовую страницу.
addForm.html..............Форма добавления материала.
editForm.html.............Форма редактирования материала.
Это не полный список, есть файлы, которые общие для всех модулей и хранятся в папке default вашего шблона. А например у форума файлов намного больше, но рассказывать о каждом из них не буду, так как стаья тогда примет огромные размеры, а разобраться в этом самому не составит труда. Тут я открою принципы, и помогу, если у Вас что-то не выйдет, а детально разобраться после прочтения этой статьи, Вам самим не будет сложно.


Давайте разберем пример.
Допустим, нам надо сделать дизайн для каталога новостей. В начале нам нужен основной файл (хидер + футер).
main.html
Code:
<html>
<head>
<title>{TITLE}</title>
</head>
<body>
{CONTENT}
</body>
</html>

Дальше нам надо подумать о том как будет выглядеть список новостей на странице. Для этого создадим файл, который будет определять вид каждой новости:
tablemat.html
Code:
<table>
    <tr>
        <td>{TITLE}</td>
    </tr>
    <tr>
        <td>{ANNOUNCE}</td>
    </tr>
    <tr>
        <td>{AUTHOR}</td>
    </tr>
</table>

Теперь каждая новость будет помещаться в такую таблицу и затем весь список подставляться в основной шаблон, вместо метки {CONTENT}. Если, представить, что у нас 3 новости, то в конечном счете, это будет выглядеть так:

Code:
<html>
<head>
<title>{TITLE}</title>
</head>
<body>
<table>
    <tr>
        <td>Новость</td>
    </tr>
    <tr>
        <td>Анонс Анонс Анонс</td>
    </tr>
    <tr>
        <td>Юзверь</td>
    </tr>
</table>
<table>
    <tr>
        <td>Новость 2</td>
    </tr>
    <tr>
        <td>Анонс Анонс Анонс</td>
    </tr>
    <tr>
        <td>Юзверь</td>
    </tr>
</table>
<table>
    <tr>
        <td>Новость 3</td>
    </tr>
    <tr>
        <td>Анонс Анонс Анонс</td>
    </tr>
    <tr>
        <td>Юзверь</td>
    </tr>
</table>
</body>
</html>

Метка {TITLE} будет заменена на то, что Вы пропишите в настройках данного модуля. Основной файл шаблона (main.html) используеться всегда, а уже в него подставляется различное содержимое, в зависимости от действия, что Вы делаете.

Отредактировано автором 18 Июн 2010
Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#2
Продолжим...
допустим у Вас есть форма для добавления новости:
addform.html
Code:
<form>
<input type="text">
<textarea></textarea>
<input type="submit">
</form>

Тогда, если пользователь захочет добавить новость, он увидит следующее:
Code:
<html>
<head>
<title>My title</title>
</head>
<body>
<form>
<input type="text">
<textarea></textarea>
<input type="submit">
</form>
</body>
</html>
Так же и с редактирование. Значения "value" в инпутах формы, так же можно задать с помощью меток ({TITLE}, {MAIN_TEXT}). При добавлении новой новости эти метки будут замененны на то что ввел пользователь, если он допутил ошибку и его вернуло на эту же страницу. А при редактировании, эти метки будут замененны, на текущие данные.
Просмотр новости работает так же, но с большим кол-вом меток. Для отображения конкретной записи используется файл шаблона viewmat.html.

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Codemaster

  • Джуниор
  • Юзер
  • 2
  • Репутация:0 
  • Предупреждения: 0 
  • Регистрация:
    29 Июн 2010
#3
По сути можно просто изменить таблицу стилей или\и изображения и бац - новый дизайн?

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#4
Codemaster пишет:
По сути можно просто изменить таблицу стилей или\и изображения и бац - новый дизайн?
И это не все. После этого можно зайти в админку -> общие настройки -> дизайн. В выпадающем списке будут все доступные дизайны. Выбираешь нужный, жмешь сохранить и все. Сайт выглядит совершенно по иному, хотя это уже зависит от шаблонов. могут быть два идентичных с разными названиями;)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

xXx13

  • Заглянувший
  • Юзер
  • 25
  • Репутация:0 
  • Предупреждения: 0 
  • Регистрация:
    11 Июл 2010
#5
В каком файле прописывается путь к картинкам?

xXx13

  • Заглянувший
  • Юзер
  • 25
  • Репутация:0 
  • Предупреждения: 0 
  • Регистрация:
    11 Июл 2010
#6
А все нашел

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#7
xXx13 пишет:
В каком файле прописывается путь к картинкам?
Я так понимаю, CSS. Он находиться template/Ваш дизайн/css/

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

SteelLion

  • Джуниор
  • Юзер
  • 7
  • Репутация:1 
  • Предупреждения: 0 
  • Регистрация:
    15 Ноя 2010
#8
Я так понимаю, что все шаблоны в UTF-8?, но почему нигде в шаблонах нет ни нормальнойго указания о спецификации HTML, ни собственно упомянаний о кодировке?
Это же не правильно с точки зрения валидации страниц.

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#9
ну на самом деле у меня просто руки до шаблонов не успевают дойти. Я делаю упор на прогнраммную часть, немного принебрегая шаблонами. Что конечно не совсем правильно, но к сожелению на все меня не хватает. К тому же на сколько мне известно ошибки валидации хтмл ни на что не влияют, то есть это просто правила хорошего тона. Хотя могу ошибаться

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

SteelLion

  • Джуниор
  • Юзер
  • 7
  • Репутация:1 
  • Предупреждения: 0 
  • Регистрация:
    15 Ноя 2010
#10
Ну на самом деле валидный код достаточно серьёзно влияет на продвижение сайта в некоторых поисковых системах, попросту не валидный код путает поисковую машину...

1 2 3
Сейчас online: 44. Зарегистрированных: 1. Гостей: 43.