zoukankan      html  css  js  c++  java
  • django页面分类和继承

    实际开发中,会有多个html页面,这些html页面中有很多东西是重复的, 比如引入的css,js的路径,还有一些内容的重复, 为了避免进行多次重复的操作,就需要定义一个公共的页面,然后其他页面复用/继承这个公共的页面, 再加上自己本身不同的内容

    1.首先,定义一个公共的base.html页面,这个页面是其他所有页面都要用到的

     在head,main,js部分都会留出一个入口,等其他页面继承的时候,在里面添加内容

    附上如下部分代码

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="referrer" content="origin">
        <!-- TDK and ICO -->
        <title>{{ web_site.title }}</title>
    
        <meta name="description"
              content="{{ web_site.desc }}">
        <meta name="keywords" content="Python自学,Python爬虫,Django博客,Python web开发,个人博客">
        <!--站长验证-->
    
        <link rel="shortcut icon" href="/static/blog/img/favicon.ico" type="image/x-icon"/>
        <!-- Bootstrap and font-awesome CSS -->
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="/static/js/headroom.min.js"></script>
        <!-- blog CSS -->
        <link href="/static/css/base.css" rel="stylesheet">
    
        {% block css %}
    
        {% endblock %}
    
        <!--根据cookies判断是否启用暗色主题-->
    
    </head>
    
    
    <main>
        <div class="container">
            <div class="row">
    
                {% block content %}
    
                {% endblock %}
    
    
                <div class="col-lg-4">........
    
    </main>
    
    <script src="/static/js/js.cookie.min.js?v=20191123.12"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    {% block js %}
    {% endblock %}
    

     2.在其它页面继承复用base.html,比如在index.html页面

    代码如下:

    {% extends 'base.html' %}
    
    {% block css %}
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/index1111.min.css" rel="stylesheet">
    {% endblock %}
    {% block content %}
    
        <div class="col-lg-8"...>
    
    {% endblock %}
    

     注意:在base.html页面和index.html页面里面的入口名称要一致

  • 相关阅读:
    How does “void *” differ in C and C++?
    Can we use function on left side of an expression in C and C++?
    apache配置局域网访问
    apache以天为单位生成日志
    尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
    IIS 处理程序“PageHandlerFactory-Integrated”
    IIS无法识别的属性targetFramework
    php开启短标签支持
    Notepad++配色方案
    vim常用操作整理
  • 原文地址:https://www.cnblogs.com/liulilitoday/p/13580738.html
Copyright © 2011-2022 走看看