Django 模板入门

已完成

模板是可用于生成基于文本的格式(如 HTML 或 XML)的文本文件。 每个模板都包含在站点中共享的一些静态数据,但它还可以包含动态数据的占位符。 模板包含的变量和标记可控制行为以及显示为最终页面的内容。

让我们了解模板在 Django 中的工作方式。

变量

模板中的变量的行为与它们在任何其他编程语言中的行为一样。 我们可以使用它们来指示在运行时计算的值。

Django 提供了一种使用 {{ }} 语法在模板中显示变量的方法。 置于双大括号内的任何变量的文本内容都需要经过评估后再放入模板中。 例如,如果想要显示狗的名称,可以使用 {{dog.name}}

视图通过使用 render 函数将变量传递到模板中,我们将在后面的模块中对此进行探讨。 可以将值和其他数据传递给模板,包括来自 Django ORM 的 QuerySet。 这允许你为应用程序显示数据库中的数据。

筛选器

在模板中请求数据时,可使用筛选器来控制数据的显示方式。 由于已经创建了筛选器,因此可轻松使用它们来格式化数据,而无需编写任何特殊代码。

例如,假设我们需要打印出狗的品种的名称,并且我们想确保每个名称的第一个字母都大写。

{{ dog.name | capfirst }}

变量位于管道符号 (|) 的左侧,筛选器位于右侧。 这只是你在使用 Django 模板筛选器时可用于处理数据的多个筛选器之一。

标记

你可以使用标记来执行循环、创建文本或为模板引擎提供其他类型的命令。 标记通常类似于 Python 语法。 但是,由于它们在模板内运行(而不是在 Python 解释器内运行),因此语法上有些许差异。 由于无法像使用 Python 那样依赖于选项卡,因此每个 block 语句都需要一个对应的 end

我们可以将 if 语句用于布尔逻辑,并使用 for 循环进行迭代。 if 语句的核心语法如下所示:

{% if dogs %}
    <h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
    <h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}

注意

elif 语句的用法与 Python 中的 elif 相同。

同样,我们可以使用 for 循环来显示列表中所有狗的名称:

<ul>
    {% for dog in dogs %}
        <li>{{ dog.name }}</li>
    {% endfor %}
<ul>

模板继承

模板用于生成你希望用户在使用你的应用程序时看到的 HTML。 应用程序中的页面通常共享一个公共结构,其中导航可能位于左侧,标题位于顶部,并且具有一致的样式表。 Django 模板通过继承支持共享结构。

创建父页

创建父页与创建任何 Django HTML 模板相同。 提供外部结构,然后包括 {% block %} 占位符。 这些占位符允许子级提供放置在这些占位符中的内容。

让我们创建一个父页来导入样式表,提供一个默认标题,并提供一个要在所有页面上显示的标头:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
    <h1>Shelter site</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

创建子页

可以使用 extends 关键字从父页创建子页。 使用此关键字提供父模板的 HTML 文件的名称。 然后,使用相应的 {% block %} 语句添加特定于该页面的内容。

{% extends "parent.html" %}

{% block title %}
Welcome to the Shelter site!
{% endblock %}

{% block content %}
Thank you for visiting our site!
{% endblock %}

显示该页面时,其外观如下所示:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>Welcome to the shelter site</title>
</head>
<body>
    <h1>Shelter site</h1>
    Thank you for visiting our site!
</body>
</html>

请注意占位符如何替换为子页中的内容。

注意

在此示例中,我们使用的是静态文本。 如你所见,还可以使用动态内容。