与django中的模板混淆

Question

我正在学习django，我有以下模板：

{% load static ax_base %}
{% for tm in team_list %}
<div>

    <div class="card our-team-slider-card mb-3">
        <div class="row no-gutters">
            <div class="col-sm-4">
                <a href="" class="card-img-wrap" data-toggle="modal"
                   data-target=".our-team-photo">
                    <img src="{% static tm.img %}"
                         class="card-img" alt="...">
                </a>
            </div>
            <div class="col-sm-8">
                <div class="card-body">
                    <h5 class="card-title mb-4">{{ tm.name }}</h5>
                    <div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
                    <p class="card-text fz14 opa05">{{ tm.bio }}</p>
                    <div class="contacts mb-2">
                        <a href=""
                           class="styled-link text-black">{{ tm.phone }}</a><span> , </span><a
                            href="" class="styled-link text-black">{{ tm.email }}</a>
                    </div>
                    <a href="" class="styled-link text-primary">Send message</a>
                </div>
            </div>
        </div>
    </div>

</div>
{% endfor %}

所以，问题是我有两个地方重用了上面的模板，但我想做的是在一个地方使用col sm-4类，而不是在另一个地方使用col sm-4。我是否应该为此创建两个独立的模板，即一个使用col sm-4的模板，另一个不使用col sm-4的模板？这是正确的吗？

Answer 1

{% load static ax_base %}
{% for tm in team_list %}
<div>

    <div class="card our-team-slider-card mb-3">
        <div class="row no-gutters">
            {% if not hide %}
            <div class="col-sm-4">
                <a href="" class="card-img-wrap" data-toggle="modal"
                   data-target=".our-team-photo">
                    <img src="{% static tm.img %}"
                         class="card-img" alt="...">
                </a>
            </div>
            {% endif %}
            <div class="col-sm-8">
                <div class="card-body">
                    <h5 class="card-title mb-4">{{ tm.name }}</h5>
                    <div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
                    <p class="card-text fz14 opa05">{{ tm.bio }}</p>
                    <div class="contacts mb-2">
                        <a href=""
                           class="styled-link text-black">{{ tm.phone }}</a><span> , </span><a
                            href="" class="styled-link text-black">{{ tm.email }}</a>
                    </div>
                    <a href="" class="styled-link text-primary">Send message</a>
                </div>
            </div>
        </div>
    </div>

</div>
{% endfor %}

Answer 2

当你用{% static tm.img %}传递图片的时候，我猜你错了，最好把它改成{{ tm.img }}

{% load static ax_base %}
{% for tm in team_list %}
<div>

    <div class="card our-team-slider-card mb-3">
        <div class="row no-gutters">
            <div class="col-sm-4">
                <a href="" class="card-img-wrap" data-toggle="modal"
                   data-target=".our-team-photo">
                    <img src="{{ tm.img }}"
                         class="card-img" alt="...">
                </a>
            </div>
            <div class="col-sm-8">
                <div class="card-body">
                    <h5 class="card-title mb-4">{{ tm.name }}</h5>
                    <div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
                    <p class="card-text fz14 opa05">{{ tm.bio }}</p>
                    <div class="contacts mb-2">
                        <a href=""
                           class="styled-link text-black">{{ tm.phone }}</a><span> , </span><a>
                            href="" class="styled-link text-black">{{ tm.email }}</a>
                    </div>
                    <a href="" class="styled-link text-primary">Send message</a>
                </div>
            </div>
        </div>
    </div>

</div>
{% endfor %}

Answer 3

您只需在render context dict中传递一个变量，并将其用于有条件显示的块：

{% if show_photo %}
<div class="col-sm-4">
...
</div>
{% endif %}

如果它是您想要或不想使用的实际类，也可以使用完全相同的语法来处理它：

<div class="{% if use_sm_4 %} col-sm-4 {% else %} some-other-class {% endif %}">
...
</div>