• 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  内。

  • 相关阅读:
    CF1260F
    牛客挑战赛34 A~E
    CSP-S2019游记&拆塔记
    6424. 【NOIP2019模拟2019.11.13】我的订书机之恋
    CF1257E/F
    6423. 【NOIP2019模拟11.11】画
    1222/2516. Kup
    Comet OJ
    浅析CSS定位
    css文字颜色渐变的3种实现
  • 原文地址:https://www.cnblogs.com/lixiufeng1994/p/10155145.html
Copyright © 2020-2023  润新知