Question

我有一个模板的工作解决方案，允许可选的侧边栏。取决于用户选择的选项;发生了重要的DOM操作。

工作解决方案不必要地大，并且具有一些代码重复功能。它也没有很好地扩展。

我正在寻找更通用的解决方案。允许更容易扩展或抽象的一个，以便不必为每个具有侧边栏的页面重复自己。

工作解决方案

{% extends "app/base.html" %}

{% load wagtailcore_tags %}

{% block content %}
    {% if self.sidebar == "left" %}
        <div class="row">
            <div class="4u 12u(mobile)">
                {% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
            </div>
            <div class="8u 12u(mobile) important(mobile)">
                <article class="box post">
                    {% include "app/includes/banner.html" with feed_image=self.feed_image only %}
                    {{ self.body|richtext }}
                    {% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
                </article>
            </div>
        </div>
    {% elif self.sidebar == "right" %}
        <div class="row">
            <div class="8u 12u(mobile)">
                <article class="box post">
                    {% include "app/includes/banner.html" with feed_image=self.feed_image only %}
                    {{ self.body|richtext }}
                    {% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
                </article>
            </div>
            <div class="4u 12u(mobile)">
                {% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
            </div>
        </div>
    {% else %}
        <article class="box post">
            {% include "app/includes/banner.html" with feed_image=self.feed_image only %}
            {{ self.body|richtext }}
            {% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
        </article>
    {% endif %}
{% endblock %}

{% block content %}首先在app/base.html：

中定义

    <div id="main-wrapper">
        <div class="container">
            <!-- <article class="box post"> -->
              {% block content %}{% endblock %}
              <!-- {% include 'app/includes/prev_next.html' %} -->
            <!-- </article> -->
        </div>
    </div>

sidebar.html看起来像这样：

{% load wagtailimages_tags %}
{% for sidebar_item in sidebar_items %}
    <section class="box">
        {% image sidebar_item.image original as img %}
        <a href="{{ sidebar_item.link }}"" class="image featured"><img src="{{ img.url }}" alt="" /></a>
        <header>
            <h3>{{ sidebar_item.title }}</h3>
        </header>
        <p>{{ sidebar_item.body }}</p>
        {% if sidebar_item.button_text %}
            <footer>
                <a href="{{ sidebar_item.link }}" class="button alt">{{ sidebar_item.button_text }}</a>
            </footer>
        {% endif %}
    </section>
{% endfor %}

我最初尝试推广它是尝试在app/base.html中尝试所有条件，但是当我选择{{ block content }}的位置时，我遇到了问题。

非常感谢任何帮助。

Answer 1

如果决定侧边栏类型的条件是由为页面提供服务的views.py函数决定和提供的，那么最好的方法是简单地为每个不同的页面制作不同的模板。

这个解决方案听起来过于简单，但是如果正确模块化（根据所有公共代码保存在基本文件中并在需要时进行扩展），这将是最好的方法。即使其他模板的数量可能会增加，但由于HTML片段较小，因此加载时间会缩短。

如果您不希望条件决策由views.py处理，您可以选择使用AJAX，并异步更改正在查看的模板而不会导致重新加载。

希望这有帮助！

Django - 使用可选边栏推广模板

1 个答案: