Django 抽象父模板文件使用

2020-03-03  本文已影响0人  土986885

1,关于父模板继承

观察需要抽离的基础html内容,放到一个文件内,这个文件比如说就叫做 base.html

不需要更改的内容,所有文件都有的内容不要更改,直接原封放上

需要更改的内容通过

{% block 预留块名 %} 内容{% endblock 预留块名 %}

父模板文件如下 base.html

{#首页 注册 登录#}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
{% load staticfiles %}
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
{#网页标题内容块#}
    <title>{% block title %}{% endblock title %}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
{#   网页顶部引入预留文件块 子模板自己在块内填上需要的内容即可#}
{% block topfiles %} {% endblock topfiles %}
</head>
 <body>
{#顶部欢迎信息块 大部分都有 如果不需要 子模板重写时里面不放内容即可清除掉#}
   {% block header_con %}
   <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到天天生鲜!</div>
        </div>
    </div>
   {% endblock header_con %}
     
{#网页主体内容块 子模板自己定制内容即可#}
{% block body %}
{% endblock body %}

 {#公共的内容 子模板无需更改 直接继承#}
<div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>        
        </div>
        <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
        <p>电话:010-****888    京ICP备*******8号</p>
</div> 
    
</body>
</html>
    
    

子模板文件如下 child.html

<!--表示要继承自哪里-->
{% extends 'base.html' %}
{% block title %}
    子模板的标题
{% endblock %}
{#如果需要清除父模板的内容#}
{% block header_con %}{% endblock header_con %}


{#如果还想要父模板的内容 还想加入自己的内容  调用下{{ block.super }}#}
{% block first_block%}
    {{ block.super }}
<div>这是子模板自定义的块</div>
{% endblock first_block%}

上一篇下一篇

猜你喜欢

热点阅读