zoukankan      html  css  js  c++  java
  • HTML 模板继承

    网站模板的设计,一般的,我们做网站有一些通用的部分,比如 导航,底部,访问统计代码等。合理的规划模板往往会减少工作量,同时也使得罗乱、难以阅读的静态页面布局变得优雅。
    
    假设,我们的网站主页面除了正文是由导航条,低栏,统计栏构成。也就是nav.html,bottom.html,tongji.html。
    
    在构建页面的时候,可以写一个base.html来包含(include)这些通用文件,如下:
    <!DOCTYPE html>
     <html> 
    <head>     
    <title>{% block title %}默认标题{% endblock %}</title>
     </head>
     <body>   {% include 'nav.html' %} {% block content %}   
      <div>这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容。</div> {% endblock %} {% include 'bottom.html' %} {% include 'tongji.html' %} 
    </body>
     </html>
    
    在这里,所有的include都是引入通用文件,而block都是定义默认模块,其他继承base.html的页面,都可以在自己的页面中重新定义这些模块,达到覆盖替换的作用。
    比如我们设计一个主页面index.html,继承自base.html,同时替换base.html中的title和content两个模块。以下是index.html文件的内容:
    {% extends 'base.html' %} 
    {% block title %}欢迎光临首页{% endblock %}
     {% block content %} {% include 'ad.html' %} 这里是首页,欢迎光临 {% endblock %}
    
  • 相关阅读:
    vue+springboot+element+vue-resource实现文件上传
    使用bfg快速清理git历史大文件
    git clone异常 【fatal: protocol error: bad line length character: Inte】
    excel 一次删除所有空行
    vim编辑器
    prometheus安装
    递归计算分波那契数列和阶乘
    如何理解线程安全?
    创建线程的方式
    为什么说一个对象是线程安全的?
  • 原文地址:https://www.cnblogs.com/nyist-xsk/p/9163556.html
Copyright © 2011-2022 走看看