zoukankan      html  css  js  c++  java
  • Django模板的加深

    网站模板的设计,一般的,都有一些通用的设计,有导航、底部、统计等相关代码:nav.html、bottom.html、tongji.html

    在我前面Django工程的基础上建立一个base.html包含这些通用文件(include):

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>{% block title %} 欢迎光临基本页面{% endblock %}</title>
     6 </head>
     7 <body>
     8     {% block content%}
     9         这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容
    10     {% endblock %}
    11     {% include 'nav.html' %}
    12     {% include 'bottom.html' %}
    13     {% include 'tongji.html' %}
    14 </body>
    15 </html>

    新建一个home.html文件:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5 </head>
     6 <body>
     7     演示
     8     {% extends 'base.html' %}
     9     {% block title %}
    10         欢迎光临首页
    11     {% endblock %}
    12     {% block content %}
    13         这个是首页内容,可以覆盖基html的内容
    14     {% endblock %}
    15 </body>
    16 </html>

    访问:http://127.0.0.1:8000/home/,结果显示:

    注:block块中的内容,如果在首页中没有相关的代码则继承base中的block块的内容;如果有则进行覆盖,体现出网页设计的灵活性。
    block extends include三者的差别跟用法
    一、定义基础模板,在html内容中定义多个block块,block由子模板引用同名block块,来决定是否替换这些部分
    {% block title %}一些内容,这里可不填{% endblock %}
    {% block content %}一些内容,这里可不填{% endblock %}
    {% block footer %}一些内容,这里可不填{% endblock %}
    这里 title content footer 不是变量,名字自定义
    block一般定义在base.html中 block是可以在那些继承base的html中添加内容的区
    二、子模板的引用方式
    {% extends "base.html" %}
    {% block title %}The current time{% endblock %}
    {% block content %}<p>It is now {{ current_date }}.</p>{% endblock %}
    第一句是固定的格式,必须为模板中的第一个模板标记
    extends的参数一般为字符串,也可为变量
    可带路径,相对路径,以 TEMPLATE_DIRS 的模板目录 为基准
    子模板决定替换的block块,无须关注其它部分,没有定义的块即不替换,直接使用父模板的block块
    三、引用上级代码块在其基础上进行一些修改 {{ block.super }}
    {% block footer %}
    {{ block.super }}
    AAAAA
    {% endblock %}

  • 相关阅读:
    c++模板使用
    配置文件读取(2-2)读取yml
    全景拼接学习-原理篇 (4) 基本过程
    全景拼接学习-原理篇 (3) 从对极几何 单相机拍摄的画面估计运动轨迹
    全景拼接学习-原理篇 (2) 单张图片 单相机成像模型
    全景拼接学习-原理篇 (1) 两张图片之间关系计算 单应性Homograph估计
    js之async和await
    mysql之GORM接口
    casbin应用
    jQuery
  • 原文地址:https://www.cnblogs.com/demo-deng/p/7792293.html
Copyright © 2011-2022 走看看