一周学会Django5 Python Web开发-Django5内置模板引擎-模板继承

java1234_小锋

于 2024-03-11 14:45:24 发布

阅读量742

点赞数 17

分类专栏： Python 文章标签： python django5 django python web python web开发

本文链接：https://blog.csdn.net/caoli201314/article/details/136623552

版权

Python 专栏收录该内容

253 篇文章 41 订阅

订阅专栏

锋哥原创的Python Web开发 Django5视频教程：

2024版 Django5 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发视频教程(无废话版) 玩命更新中~共计34条视频，包括：2024版 Django5 Python web开发视频教程(无废话版) 玩命更新中~、第2讲 Django5安装、第3讲 Django5创建项目(用命令方式)等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV14Z421z78C/Django模板继承是一个强大的工具，可以将通用页面元素（例如页眉、页脚、侧边栏等）分离出来，并在多个页面之间共享他们。

模板继承和 Python 语言中类的继承含义是一样的，在 Django 中模板只是一个文本文件，如 HTML。

模板继承是 Django 模板语言中最强大的部分。模板继承使你可以构建基本的“骨架”模板，将通用的功能或者属性写在基础模板中，也叫基类模板或者父模板。子模板可以继承父类模板，子模板继承后将自动拥有父类中的属性和方法，我们还可以在子模板中对父模板进行重写，即重写父模板中方法或者属性，从而实现子模板的定制。模板继承大大提高了代码的可重用性，减轻开发人员的工作量。

在模板继承中最常用了标签就是 {% block %} 与 {% extends %} 标签，其中 {% block% } 标签与 {% endblock %} 标签成对出现

我们新建一个基础模版base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
            Python222学院
        {% endblock %}
    </title>
</head>
<body>
<div id="head">
    <img src="http://127.0.0.1:8000/static/logo.png"/>
</div>
<div id="content">
    {% block content %}
        欢迎进入Python222学院
    {% endblock %}
</div>
<div id="footer">
    版权所有 www.python222.com
</div>
</body>
</html>

再写一个course.html，继承base.html

{% extends 'base.html' %}
<!-- 重写title -->
{% block title %}
    课程页面-Python222
{% endblock %}
<!-- 重写content -->
{% block content %}
    Django5课程-模板引擎章节
{% endblock %}

我们来测试下吧。

views.py里新建一个to_course方法：

def to_course(request):
    """
    跳转课程页面
    :param request:
    :return:
    """
    return render(request, 'course.html')

urls.py里加一个映射：

path('toCourse/', helloWorld.views.to_course)

浏览器输入：http://127.0.0.1:8000/toCourse/

我们发现模板里的标题和内容被course页面修改了，其他的没变。

这里我们再优化下，直接写死静态路径是不是很不好啊。

<div id="head">
    <img src="http://127.0.0.1:8000/static/logo.png"/>
</div>

这时候我们就能用上 {% load static %}，加载项目中的静态文件，包括图片，css，js文件，字体文件等。

<img src="{% static 'logo.png' %}"/>

完整base.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
            Python222学院
        {% endblock %}
    </title>
</head>
{% load static %}
<body>
<div id="head">
    <img src="{% static 'logo.png' %}"/>
</div>
<div id="content">
    {% block content %}
        欢迎进入Python222学院
    {% endblock %}
</div>
<div id="footer">
    版权所有 www.python222.com
</div>
</body>
</html>