仅包括(继承)模板的特定块

我的项目有两个应用程序(目前(，table和menu。每个应用程序都有一个模板，两个模板extends和base.html都位于项目根目录下。

table_view.html

{% extends "base.html" %}
{% load static %}
{% block title %}Table Mgt{% endblock %}
{% block content %}
<link href="{% static "css/table.css" %}" rel="stylesheet" />
...some elements here...
{% endblock %}
{% block sidebar %}
<a href="#">
<button class="sidebar_button check_in">Check In</button>
</a>
<a href="#">
<button class="sidebar_button check_out">Check Out</button>
</a>
{% endblock %}

menu_view.html

{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}
{% block content %}
<link href="{% static "css/menu.css" %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'table/table_view.html' %}
{% endblock %}

base.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
<div id="header">
...some elements here...
</div>    
<div id="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>

在menu_view.html中，我正在尝试include块sidebar仅。然而，整个table_view.html实际上是嵌入的。如何从特定模板中仅include特定块？

模板扩展通过定义可以放入东西的插槽来工作。这些插槽可以用默认值填充。如果不在扩展(子(模板中覆盖槽，则槽将按原样呈现。

例如，使用此基础：

{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Hello World!{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
{% block extra_css %}{% endblock %}
</head>
</html>

这个孩子：

{% extends "base.html" %}

结果将是：

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>

使用此子模板：

{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}

结果是：

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>

现在针对您的问题：

如果你有不同的边栏，试着让sidbar.html模板更智能，这样它就可以呈现所有变体，或者创建不同的边栏模板
如果你到处都有相同的侧边栏，但有些页面没有侧边栏，那么创建不同的基本模板：一个有侧边栏槽，另一个没有
如果每个侧边栏对于每个页面都不同，那么就不用考虑include，只需覆盖slot

相关内容

最新更新

热门标签：