как использовать фрагменты html-блоков с динамическим содержимым внутри шаблона django, который расширяет другой файл? - PullRequest
Новая
       8

как использовать фрагменты html-блоков с динамическим содержимым внутри шаблона django, который расширяет другой файл?

1 голос
/ 20 апреля 2010

Может кто-нибудь помочь мне найти способ добиться следующего (см. Фрагменты ниже) в шаблонах Django? Я знаю, что вы не можете использовать более одного расширения, но я новичок в django и не знаю правильный синтаксис для чего-то подобного. Я хочу быть в состоянии сделать это так, чтобы я мог использовать свой вложенный макет div по причинам CSS, без необходимости каждый раз печатать его так и рисковать опечаткой. Словом, я хочу, чтобы шаблон страницы расширял мой файл base.html, а затем использовал HTML-фрагменты динамического содержимого шаблона (т. Е. Шаблон для циклов или других логических устройств шаблона, а не просто переменную контекста, которую я установил из моего контроллера представления) ).

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

Я понимаю, что пример изображения содержит весь текст, сгенерированный из результатов веб-тестера django, но каждый кулмн должен иметь произвольный контент. И они должны быть вложенными. Возможно ли это с языком шаблонов django по умолчанию? 

------------------------------------------------------------
base.html
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>{% block title %}Title{% endblock %}</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                This is the common header
            </div>
            <div class="nav">
                This is the common nav              
            </div>
            {% if messages %}
                <div class="messages">
                    <ul>
                        {% for message in messages %}
                        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
            <div class="content">
                {% block content %}Page Content{% endblock %}
            </div>
            <div class="footer">
                This is the common footer
            </div>
        </div>
    </body>
</html>
------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
    <div class="container1">
        <div class="col1">
            {% block twocol_col1 %}{% endblock %}
        </div>
        <div class="col2">
            {% block twocol_col2 %}{% endblock %}
        </div>
    </div>
</div>

------------------------------------------------------------
columnlayout3.html
------------------------------------------------------------
<div class="threecol container3">
    <div class="container2">
        <div class="container1">
            <div class="col1">
                {% block threecol_col1 %}{% endblock %}
            </div>
            <div class="col2">
                {% block threecol_col2 %}{% endblock %}
            </div>
            <div class="col3">
                {% block threecol_col3 %}{% endblock %}
            </div>
        </div>
    </div>
</div>

------------------------------------------------------------
page.html
------------------------------------------------------------
{% extends "base.html" %}

{% block content %}

    {% extends "columnlayout2.html" %}
        {% block twocol_col1 %}twocolumn column 1{% endblock %}
        {% block twocol_col2 %}twocolumn column 2{% endblock %}

    {% extends "columnlayout3.html" %}
        {% block threecol_col1 %}threecol column 1{% endblock %}
        {% block threecol_col2 %}threecol column 2{% endblock %}
        {% block threecol_col3 %}threecol column 3{% endblock %}

{% endblock %}

------------------------------------------------------------
page.html output
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Title</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                This is the common header
            </div>
            <div class="nav">
                This is the common nav              
            </div>
            <div class="content">
                <div class="twocol container2">
                    <div class="container1">
                        <div class="col1">
                            twocolumn column 1
                        </div>
                        <div class="col2">
                            twocolumn column 2
                        </div>
                    </div>
                </div>
                <div class="threecol container3">
                    <div class="container2">
                        <div class="container1">
                            <div class="col1">
                                threecol column 1
                            </div>
                            <div class="col2">
                                threecol column 2
                            </div>
                            <div class="col3">
                                threecol column 3
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                This is the common footer
            </div>
        </div>
    </body>
</html>

1 Ответ

1 голос
/ 20 апреля 2010

Я согласен с Дэниелом, тэги включения, вероятно, то, что вы ищете, и я думаю, что вы неправильно понимаете их и {% extends %}.

Если ваш контент статический или в контексте, вы можете использовать блоки {% include%}, например 

{% block content %}
    {% include "columnlayout2.html" %}
    {% include "columnlayout3.html" %}
{% endblock %}

чтобы вы могли хранить нужный вам контент в виде {{two_columns}} и {{three_columns}} и рендерить 

------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
    <div class="container1">
        <div class="col1">
            {{ two_columns[0] }}
        </div>
        <div class="col2">
            {{ two_columns[1] }}
        </div>
    </div>
</div>

Или вы можете использовать теги включения внутри page.html

EDIT

Модератору необходимо отображать HTML с другой структурой (не только с содержимым) на разных страницах, чтобы вы могли сделать что-то вроде «вложения» вызовов тега включения. 

{% block content %}
    {% show_two_columns two_columns %}
    {% show_three_columns three_columns %}
{% endblock %}

templatetag 

@register.inclusion_tag("columns/two_columns.html")
def show_two_columns(columns):
    return {'columns': columns}

two_columns.html 

<div class="twocol container2">
    <div class="container1">
        <div class="col1">
            {% render_column columns[0] %}
        </div>
        <div class="col2">
            {% render_column columns[1] %}
        </div>
    </div>
</div>

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

...