Django框架中模板templates的继承和导入 减少重复模板样式

鳄鱼君

发表文章数:523

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python教程 » Django框架中模板templates的继承和导入 减少重复模板样式

通常我们的模板页面有很多内容都是可以共用的,主要就是js和css,如果模板很多的话,你就需要写很多重复的代码,django为我们提供了模板的继承,更加充分的利用代码,减少重复代码,也更有助于后期修改。

模板的继承

每一个模板基本都需要重复的使用下面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站标题</title>
    <link rel="stylesheet" href="main.css"/>  {# 所有模板共用的css #}
</head>
<body>
<div id="menu">菜单</div>
<div id="content">网站主题内容</div>
<div id="sidebar">侧边栏</div>
<script type="text/javascript" src="jquery.main.js"></script> {# 所有模板共用的js #}
</body>
</html>

可能其他的模板只需要修改标题或者内容,css和js都需要继续使用,那么很多的模板就会存在很多的重复代码,我们可以使用下面的方式,也就是django给我们提供的模板继承。我们创建一个父模板main.html(也就是很多可以共用的代码):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="main.css"/>  {# 所有模板共用的css #}
    {% block css %}{% endblock %}
</head>
<body>
<div id="menu">菜单</div>  {# 可共用的菜单 #}
<div id="content">网站主题内容</div>
{% block content %} {% endblock %}  
<div id="sidebar">侧边栏</div>   {# 可共用的侧边栏 #}
<script type="text/javascript" src="jquery.main.js"></script> {# 所有模板共用的js #}
{% block js %}{% endblock %}
</body>
</html>

那么在子模板中就可以简单的使用下面的方式来继承父模板:

{% extends 'main.html' %}  {# 引入父模板#}
{% block title %}用户管理 {%endblock  %}   {# 模板的标题 #}
{% block css %}
    <style>
        {# 当前模板使用的css #}
    </style>
{% endblock %}

{% block content %}

<ul>
    <li></li>
    <li></li>
</ul>
{% block js %}
    <script>
        {# 当前模板使用的js #}
    </script>
{% endblock %}

{% endblock %}

考虑到在子模板中可能存在当前模板使用的js和css,按照上面的方式就可以单独在子模板中添加另外的css和js,这里可以自己尝试这玩玩看!

模板的导入

一个html模板只有一个父模板,也就是只能共用一个父模板,不能有多个,因为只有一个父亲!我们在子模板中使用父模板需要使用{% extends 'main.html' %}引入,还可以使用include。在存在多个重复使用的子模板的时候,我们又可以单独存放起来,在其他的子模板使用的时候导入就可以了!

{% for i in content  %}

    {% include 'children.html' %}

{% endfor %}

children.html就是可以重复使用的子模板,子模板也是一个html模板,django也可以对他进行渲染,那么用处就非常大了。参照鳄鱼君Ba的网站,首页最新文章都是在后台循环展示的,django也可以这样做,在后面会详细介绍如何使用!

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《Django框架中模板templates的继承和导入 减少重复模板样式》 发布于2020-04-20

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

4 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册