> 文章列表 > 初识Django

初识Django

初识Django

Django的模板系统的基本语法

Django模板语言(Template Language)包含了一些基本语法,以帮助你在模板中动态地生成HTML页面。

以下是Django模板语言的一些基本语法:

插值变量

在模板中通过 {{ variable }} 的方式插入变量。其中变量使用Python中的命名规则,可以调用函数并进行属性引用操作。

在Django模板语言中,使用{{}}标记来插入变量,这使得开发人员可以动态地将数据渲染到页面中。其中变量使用Python中的命名规则,并且还可以进行函数调用和属性引用操作。

以下是在Django模板中使用{{}}语法插入变量的示例:

  1. 渲染简单变量

例如,我们有一个变量title,它包含一个字符串:

{% with title="My Website" %}<h1>{{ title }}</h1>
{% endwith %}

上述代码将显示

My Website

  1. 渲染对象的属性值

我们也可以在模板中访问对象的属性,例如下面所示:

{% with person=person_list.0 %}{{ person.name }} is {{ person.age }} years old.
{% endwith %}

在上述示例中,我们将person_list的第一个元素赋值给了名为person的变量,然后可以使用person.name和person.age分别获取对象的属性值。

  1. 调用过滤器

Django模板还允许调用内置或自定义的过滤器对变量进行处理。

例如,我们可以使用lower过滤器将字符串转换为小写,并使用date过滤器格式化日期:

{% with str="Hello, World!" %}{{ str|lower }}
{% endwith %}{% with time=datetime.datetime.now %}{{ time|date:"Y-m-d H:i:s" }}
{% endwith %}

在上述示例中,第一个示例将字符串转换为小写字母输出,第二个示例使用date过滤器格式化当前时间并以"Y-m-d H:i:s"的格式进行输出。

总之,在Django模板语言中使用{{}}插入变量,可以让我们更轻松地从视图函数传递变量到模板,并在渲染HTML时,动态地插入数据和展示界面。

模板标签

在模板中使用 {% %} 的方式进行语句控制,比如循环、条件判断等。Django已经内置了很多标签,如if、for、include等
在Django模板语言中,使用{% %}标记进行语句控制。通过这种方式,我们可以在模板中引入条件、循环和其他程序逻辑。

以下是在Django模板中使用if和for语句的示例:

  1. 使用if语句

在模板中使用if语句,可以根据特定条件选择性地显示或隐藏HTML元素。

{% if some_condition %}<p>Some text to display</p>
{% endif %}
  1. 使用for语句

在模板中使用for语句,可以迭代列表、字典等数据结构并逐一渲染每个元素。

<ul>
{% for item in items %}<li>{{ item }}</li>
{% endfor %}
</ul>
  1. include语句

在模板中使用include语句,可以将其他模板包含到当前模板中,使代码复用和维护更加方便。

首先,创建一个子模板,例如child.html:

<h1>{{ title }}</h1>
<p>{{ content }}</p>

然后,在主模板中使用include语句引用子模板:

<div class="content">{% include 'child.html' with title='Welcome' content='Hello, world!' %}
</div>

在上述示例中,使用了with标签对子模板中的变量进行赋值。

通过以上示例,我们可以看到,Django内置的语法标签为模板提供了丰富的控制能力,让我们可以更好地掌握网页的呈现方式和逻辑。
模板注释
使用 {# #} 标记进行注释,这些内容在渲染后将被忽略。

模板过滤器

过滤器可以对插值变量的输出结果进行处理和格式化。例如,可以使用 {{ variable|lower }} 将字符串全部转换为小写字母。

过滤器是Django模板系统中一种特殊的函数,它们可以对模板变量进行处理并返回处理后的结果。过滤器以管道符(|)进行分隔,紧跟在变量之后,例如 {{ variable | filter }}

其中,lower是一个常用的过滤器,它将字符串全部转换为小写字母。假设我们有一个名为 name 的变量,它包含一个字符串 “Hello World”,我们可以使用 lower 过滤器来将该字符串转换为小写字母,如下所示:

<p>{{ name|lower }}</p>

输出结果为:

<p>hello world</p>

类似地,我们还可以使用许多其他的过滤器来对变量进行进一步的处理和格式化。下面是一些常用的过滤器及其示例:

  • upper:将字符串全部转换为大写字母
<p>{{ name|upper }}</p>

输出结果为:

<p>HELLO WORLD</p>
  • title:将字符串中每个单词的首字母大写
<p>{{ name|title }}</p>

输出结果为:

<p>Hello World</p>
  • length:返回字符串的长度
<p>{{ name|length }}</p>

输出结果为:

<p>11</p>
  • slice:截取字符串的一部分(根据索引)
<p>{{ name|slice:"6" }}</p>

输出结果为:

<p>World</p>
  • date:按照指定的格式显示日期和时间
<p>{{ datetime|date:"Y-m-d H:i:s" }}</p>

其中,datetime 是一个包含日期和时间的变量,示例输出结果为:

<p>2023-04-19 16:19:06</p>

除了上述示例中列举的过滤器之外,Django还提供了许多其他的过滤器,开发者可以根据自己的需求选择和使用适当的过滤器来对模板变量进行处理和格式化。

模板继承

可以通过 {% extends ‘base.html’ %} 在当前模板中引用并继承自其他模板,并在其中覆盖或补充父模板中的内容。

这些基本语法构成了Django模板语言的核心,也提供了丰富的功能为模板渲染工作提供了便利。

在Django模板系统中,有一种模板继承的机制,即在一个模板中引用并继承自其他模板。通过这种机制,可以提高模板的可重用性和维护性,同时也可以避免代码冗余。在这种机制下,我们可以使用 {% extends 'base.html' %} 来引用并继承自其他模板(如 base.html),并在其中覆盖或补充父模板中的内容。

首先,我们需要为父模板创建一个基础模板(例如,base.html),它将包含所有页面都共享的公共部分(如头部导航栏、底部版权信息等)。示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}Welcome{% endblock %}</title>
</head>
<body><header><!-- 头部导航栏 --></header><main>{% block content %}{% endblock %}</main><footer><!-- 底部版权信息 --></footer>
</body>
</html>

在这个模板中,我们使用 {% block %} 标签定义了两个块(titlecontent)作为占位符,分别在 HTML 的标题和主体部分进行使用。

接下来,我们可以基于这个基础模板来创建其他模板,并通过 {% extends 'base.html' %} 来继承自这个基础模板。例如,我们可以创建一个 home.html 模板,并继承自 base.html,如下所示:

{% extends 'base.html' %}{% block title %}Home{% endblock %}{% block content %}
<p>Welcome to my website!</p>
{% endblock %}

在这个模板中,我们使用 {% extends 'base.html' %} 来引用并继承自 base.html,然后通过 {% block %} 标签覆盖了 title 块和 content 块的内容。其中,title 块定义了页面的标题,content 块定义了页面的主体内容。

当我们渲染这个模板时,Django将会首先加载 base.html 模板作为父模板,然后再在其基础上渲染子模板(home.html),并将子模板中定义的块(titlecontent)填充到父模板中对应的位置。因此,最终呈现给用户的页面将包含父模板中的公共部分以及子模板中特有的部分。

通过这种方式,我们可以避免在每个模板中重复定义相同的 HTML 代码,从而提高模板的可复用性和维护性。同时,我们也可以根据实际需求灵活地修改和定制每个页面的内容和样式。

如何使用django实现网页的左右3/4布局和1/4布局

在Django中实现网页的左右3/4布局和1/4布局,可以借助HTML和CSS完成。

下面是一种简单的方法:

  1. HTML模板

在HTML模板中,我们可以定义两个div元素,分别代表左右两个部分,其中左边部分占三分之一,而右边部分占四分之一。代码如下:

<div class="container"><div class="left-content"><!-- 左侧3/4内容 --></div><div class="right-content"><!-- 右侧1/4内容 --></div>
</div>
  1. CSS样式

然后使用CSS样式来控制这些元素:

.container {display: flex;flex-direction: row;
}.left-content {flex: 3;
}.right-content {flex: 1;
}

上述样式代码中,设置了一个flex容器,为row方向的flex布局,左侧容器的flex值为3,右侧容器的flex值为1,这样就可以实现左3/4和右1/4的布局效果。

要注意的是,以上代码只能提供基本的布局功能,如果需要更复杂的布局例如嵌套关系或者动态添加删除等,还需要进一步使用JavaScript等技术进行处理。

总之,在Django中通过使用HTML和CSS样式,可以很容易地实现网页的左右3/4布局和1/4布局,使网站的界面更加美观和易于用户使用。

在Django中使用Bootstrap可以轻松地实现左右3:1布局,只需要按照下面的步骤进行操作:

  1. 安装Bootstrap

在Django项目的static目录下新建一个bootstrap目录并下载Bootstrap的源码文件,例如将下载后的文件放置在static/bootstrap/目录下。

  1. 加载静态文件

在HTML模板头部加载Bootstrap的CSS和JS静态资源文件,这些静态资源文件可以在安装Bootstrap时直接获得。代码如下:

{% load static %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

其中 {% load static %} 是引入Django内置的 static 标记,在使用静态文件时必须引用。

  1. HTML布局

在HTML模板中添加左右两个容器,并使用CSS样式控制:

<div class="container-fluid"><div class="row flex-nowrap"><div class="col-md-9 col-sm-8 p-0"><!-- 左侧内容 --></div><div class="col-md-3 col-sm-4 p-0"><!-- 右侧内容 --></div></div>
</div>

上面示例代码中,.container-fluid表示Bootstrap中的全宽容器,.row用于定义一行,.flex-nowrap使每列固定宽度不折行,两个 .col-*-* 分别表示左右两列的宽度。

最后,设置.col-md-*.col-sm-*用于响应式布局适应不同屏幕大小。其中,.col-md-9.col-sm-8 表示在较大的屏幕上(尺寸为中等)左侧占9/12,而在较小的屏幕上(尺寸为小)左侧占8/12,右侧分别为3/12和4/12。

通过以上步骤,我们就可以轻松地使用Bootstrap实现左右3:1布局了。需要注意的是,在使用Bootstrap时,还需要对CSS样式文件进行合理的组合与覆盖,以满足自己的需求。