• HTML5下的模板继承


    应用背景:

    在web项目中,我们的网站主页面除了正文是由导航条,底栏。也就是nav.html,bottom.html,在构建页面的时候,应当使用HTML的模板继承,避免代码重复和以便于代码的维护。可以写一个indexBase.html来包含(include)这些通用文件,如下:

    涉及文件举例:

    home.html      主页   

    indexBase.html   继承用的页面    

    indexNav.html   页首组件    

    indexBottom.html  页脚组件    

    相关样式文件:

    home.css 页面自定义样式    indexBase.css 需要继承页面的相关样式

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="UTF-8">
     5 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
     6 <link rel="stylesheet" href="/static/MyStyle/indexBase.css">
     7 
     8 {% block head %}
     9 {% endblock %}
    10 
    11 <title>{% block title %}默认标题{% endblock %}</title>
    12 
    13 {% block style %}
    14 {% endblock %}
    15 
    16 
    17 </head>
    18 <body>
    19 
    20 <script src="/static/plugins/jquery-3.3.1.js"></script>
    21 <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    22 
    23 {% include 'indexNav.html' %}
    24 {% block content %}
    25     <div>
    26         这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容。
    27     </div>
    28 {% endblock %}
    29 {% include 'indexBottom.html' %}
    30 
    31 </body>
    32 </html>
    indexBase.html内容

     

    那么,继承该模板的页面格式如下:

     1 {% extends 'indexBase.html' %}
     2 {% block head %}
     3         <link rel="stylesheet" href="/static/MyStyle/自定义.css">
     4 {% endblock %}
     5 
     6     {% block title %}title自定义{% endblock %}
     7 
     8 {% block style %}
     9     <style>
    10 
    11     </style>
    12 {% endblock %}
    13 
    14 
    15 {% block content %}
    16 
    17 {% endblock %}
    home.html继承页面的格式

     

    其中,在indexNav.html 页首组件 和 indexBottom.html 页脚组件内直接写div,两者相关样式文件写在 indexBase.css  内。

  • 相关阅读:
    内存中的线程
    python高级线程、进程和进程池
    生产者以及消费者模式(进程池)
    生产者以及消费者模式(多进程)
    生产者以及消费者模式
    全局解释器锁(GIL)
    JoinableQueue队列实现消费之生产者模型
    什么是Sikuli?
    协程基础
    装饰器
  • 原文地址:https://www.cnblogs.com/lixiufeng1994/p/10155145.html
Copyright © 2020-2023  润新知