В прошлом посте мы рассказали о нашем новом конструкторе сайтов.
На этот раз хотелось бы более подробно рассказать о том как работает шаблонная система. Она полностью джанговская, но то, как она построена заслуживает отдельного упоминания. К тому же, это будет полезно для тех читателей, кто не знаком с шаблонизатором от Django.
Каким же образом достигается гибкость в конструкторе Бигго. Рассмотрим на примере.
Каждый контентный объект имеет свой URL, при запросе которого, система показывает нужное содержимое. Кроме URL, задаются еще и 2 типа шаблонов: внешние и модульные. Пример внешнего шаблона:
articles.html:
Как видно, он наследует base.html, и переопределяет его блоки title и content.
Сам base.html может выглядеть примерно так:
Обратите внимание на вызываемы Django-теги {% Articles %}, {% CommentsAddForm www2 %}, {% Comments www2 %}, {% TagsCloud %}. Они представляют собой содержимое модулей статей, комментариев и облака меток. В том месте, где вызывается тег, он выводит HTML-содержимое, которое генерируется по заданному модульному шаблону.
Рассмотрим один из таких на примере статей:
Этот шаблон задает отображение вызываемого тега {% Articles %}. Обратите внимание, что внутри есть вызовы еще двух inclusion тегов: {% pagination %} и {% TagsBind %}
Некоторые теги, для реализации неограниченной вложенности вызывают сами себя. Пример:
{% Menu menu_obj.eng_word %} — вызывает вложенное меню с соответствующим именем
Страница base.html(базовый шаблон, родительский):
Дочерний шаблон:
Один и тот же тег(например {% Articles %}) может выводить разное содержимое в зависимости от URL. Это хорошо видно на картинке:
P.S. Мы учли замечания хабровчан: добавили портфолио, сделали акцент на привязку своего домена и другие мелочи.
На этот раз хотелось бы более подробно рассказать о том как работает шаблонная система. Она полностью джанговская, но то, как она построена заслуживает отдельного упоминания. К тому же, это будет полезно для тех читателей, кто не знаком с шаблонизатором от Django.
Принцип гибкости
Каким же образом достигается гибкость в конструкторе Бигго. Рассмотрим на примере.
Каждый контентный объект имеет свой URL, при запросе которого, система показывает нужное содержимое. Кроме URL, задаются еще и 2 типа шаблонов: внешние и модульные. Пример внешнего шаблона:
articles.html:
{% extends "base.html" %}
{% block title %}{% if title %}{{ title }}{% else %}{{ block.super }}{% endif %}{% endblock %}
{% block content %}
<div id="content" class="box">
<div class="content-block box">
{% BreadCrumbs %}
</div>
{% Articles %} {% CommentsAddForm www2 %}{% Comments www2 %}{% TagsCloud %}
</div>
{% endblock %}
* This source code was highlighted with Source Code Highlighter.Как видно, он наследует base.html, и переопределяет его блоки title и content.
Сам base.html может выглядеть примерно так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
<title>{% block title %} {% SiteCaption %} {% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Обратите внимание на вызываемы Django-теги {% Articles %}, {% CommentsAddForm www2 %}, {% Comments www2 %}, {% TagsCloud %}. Они представляют собой содержимое модулей статей, комментариев и облака меток. В том месте, где вызывается тег, он выводит HTML-содержимое, которое генерируется по заданному модульному шаблону.
Рассмотрим один из таких на примере статей:
<div class="content-block box">
<h3><span>{{ base_obj }}</span></h3>
{{ base_obj.details }}
{% for obj in lst %}
<dl class="article box">
{% if obj.get_image and obj.settings.show_image_on_page %}<dd class="fl">
<img src="{{ obj|make_thumbnail }}" alt="alt"></dd>{% endif %}
<dd class="dt box">
<strong class="font19"><a href="{{ obj.get_absolute_url }}">{{ obj }}</a></strong>
<div class="font13">{{ obj.p_details }}{{ obj|obj_info:"html"|truncatewords:"20"}}
<br/><a href="{{ obj|obj_info:"source_url" }}">{{ obj|obj_info:"source" }}</a>
</div>
<dl class="artinfo box font13">
<dd class="fl">
{% if obj.p_dateadd %}Опубликовано <b>{{ obj.p_dateadd }} </b>{% endif %}
</dd>
<dd class="fr">
{{ obj|obj_info:"author" }}
</dd>
<dd class="fr tags">
{% TagsBind obj.get_absolute_url %}
</dd>
</dl>
</dd>
</dl>
{% endfor %}
{% pagination %}
</div>
* This source code was highlighted with Source Code Highlighter.Этот шаблон задает отображение вызываемого тега {% Articles %}. Обратите внимание, что внутри есть вызовы еще двух inclusion тегов: {% pagination %} и {% TagsBind %}
Рекурсивный вызов
Некоторые теги, для реализации неограниченной вложенности вызывают сами себя. Пример:
<ul class="menu">
{% for part in parts %}
<li><a href="{{ part.get_url }}" onmouseover="{{ part.on_mouseover }}">{{ part }}</a>
{% for menu_obj in part.menu_set.all %}
{% Menu menu_obj.eng_word %}
{% endfor %}
</li>
{% endfor %}
</ul>
* This source code was highlighted with Source Code Highlighter.{% Menu menu_obj.eng_word %} — вызывает вложенное меню с соответствующим именем
Подробнее о наследовании шаблонов
Страница base.html(базовый шаблон, родительский):
Дочерний шаблон:
URL-зависимость тега
Один и тот же тег(например {% Articles %}) может выводить разное содержимое в зависимости от URL. Это хорошо видно на картинке:
P.S. Мы учли замечания хабровчан: добавили портфолио, сделали акцент на привязку своего домена и другие мелочи.