You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Django模板:extend与include之间是否存在折中实现方案?

Django模板复用:在主页面内直接复用固定结构卡片的方案

你的现有思路本身是可行的,但确实会产生大量零散的小HTML文件,维护成本偏高——尤其当卡片仅在单个页面内使用时,这种拆分完全没必要。Django没有内置你设想的include_with标签,但有两种更合适的解决方案:

方案1:用include结合with传递变量(适合简单内容)

如果卡片内容只是简单文本或可序列化的HTML片段,可以直接通过include的with参数传递变量,无需拆分多个文件:

首先修改卡片模板card_template.html,用变量替代block:

<div class="card">
    <h1>{{ title }}</h1>
    <div class="card-content">
        {{ content|safe }}
    </div>
</div>

然后在主页面mainpage.html中直接调用:

{% include 'card_template.html' with title="Title 1" content="<p>Content 1</p>" %}
{% include 'card_template.html' with title="Title 2" content="<p>Content 2</p>" %}

注意:|safe过滤器用于确保HTML内容被正确渲染,仅当你信任内容来源时使用。

方案2:自定义包含模板标签(适合复杂内容)

如果卡片内容包含复杂的HTML结构、模板标签(如循环、条件判断),推荐使用Django官方推荐的包含模板标签(Inclusion Tag),完全能实现你设想的include_with效果:

步骤1:创建自定义模板标签

在你的Django应用下创建templatetags目录(需包含__init__.py空文件),新建card_tags.py:

from django import template

register = template.Library()

@register.inclusion_tag('card_template.html', takes_context=True)
def card(context, title):
    # 将标题和当前上下文传递给卡片模板
    context['card_title'] = title
    return context

步骤2:修改卡片模板

调整card_template.html,预留内容区块:

<div class="card">
    <h1>{{ card_title }}</h1>
    <div class="card-content">
        {% block card_content %}{% endblock %}
    </div>
</div>

步骤3:在主页面中使用

先加载自定义标签,然后直接在页面内编写卡片内容:

{% load card_tags %}

{% card title="Title 1" %}
    {% block card_content %}
        <div class="card-inner">
            <img src="/image1.jpg" alt="卡片1图片">
            <p>这里可以写任意HTML或Django模板标签,比如:</p>
            <ul>
                {% for item in card1_items %}
                    <li>{{ item }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endblock %}
{% endcard %}

{% card title="Title 2" %}
    {% block card_content %}
        <p>卡片2的自定义内容</p>
    {% endblock %}
{% endcard %}

关于你现有思路的补充

你的原始方案(每个卡片单独建文件)并非错误,它适合卡片内容需要在多个页面独立复用的场景,但如果卡片仅在单个页面内使用,这种拆分就会造成文件冗余,增加维护成本。

内容的提问来源于stack exchange,提问作者Polymatheia

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 05:07:52