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页面里面的入口名称要一致

posted @ 2020-08-29 07:58  LDM_datos  Views(194)  Comments(0)    收藏  举报