zoukankan      html  css  js  c++  java
  • Django模板继承初探

    摘要

        由于我们以前刚开始学的时候写的HTML文件都是有特定功能的HTML片段。但在实际应用中,我们会使用 Django 创建一个完整的站点,例如一个后台管理主机管理系统,一个人员管理系统等等。 这样的系统,必定就会存在一个大体的样本框架,例如左侧菜单,头部header信息,这样的通用部分在每个页面都会存在。这就带来一个常见的 Web 开发问题: 在整个网站中,如何减少共用页面区域(比如站点导航)所引起的重复和冗余代码?
    
        我们不可能在每一个html中都复制粘贴这样相同的代码,就算你想这样,那么当你想要修改这些公共区域呢?是否也需要到每个html中去修改相同的地方
    

    出现

        这样就出现了我们的模板重用的需求,相同的模板,我们在其中的content中提上不同的内容就可以了
    

    实现方式

    • 一个母版master.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %} {% endblock %}</title>
        <link rel="stylesheet" href="/static/commons.css">
    
        <style>
            .pg_header{
                height: 48px;
                background-color: seashell;
                color: green;
            }
            {% block css %} {#在这里写每个页面的自己的css#} {% endblock %}
        </style>
    </head>
    
    <body>
    
    
    <h1 class="pg_header">主机管理系统-头部</h1>
    <div class="menu">左侧菜单</div>
    
    {% block content %} {#当想使用这个母版框架的html文件会被替换到这个block位置#} {% endblock %}
    
    
    <script src="/static/jquery-min.js"></script>
    <script>
        {% block js %} {#在这里写每个页面的自己的js#} {% endblock %}
    
    
    </script>
    </body>
    </html>
    
    
    • 使用这个母版
    {% extends 'layout.html' %} {#声明使用那个模板中,内容就会在哪个模板中被替换#}
    
    
    {% block title %}用户管理{% endblock %}
    {#替换模板中的title block#}
    
    {% block content  %}
    <h1>用户管理tab</h1>
    <ul>
    {% for user in user_list %}
        <li>{{ user }}</li>
    {% endfor %}
    </ul>
    {% endblock %}
    
    • 几个注意的点:
      • 一个html文件只可以继承一个模板
      • html文件使用模板中定义的block字段来包裹需要放入模板中的部分,并以{% endblock %}结束
      • css和js都有每个html自己的,需要放在上面标注出来的位置

    如何导入其他html文件中的某个单一的模块

    {% include 'tag.html' %}  {#导入其他html模板中的某个组件到本模板中的当前位置#}
    
  • 相关阅读:
    gulp和webpack的区别和联系
    Cesium-CesiumWidget, Viewer, Scene三者之间的关系
    node-gpy
    Cesium与Threejs结合
    【每日一具1】Morin 魔音一款支持手机、电脑的音乐软件,全网歌曲免费听/下载
    Python网络爬虫(实践篇)
    Python网络爬虫(浏览器伪装技术)
    Python网络爬虫(理论篇)
    【每日一具1】Morin 魔音一款支持手机、电脑的音乐软件,全网歌曲免费听/下载
    永久免费,搞定全网音乐!
  • 原文地址:https://www.cnblogs.com/forsaken627/p/12521975.html
Copyright © 2011-2022 走看看