2021-07-31-DJ-009 Django模板页面的继承与定制，一个Base.html，仿制漂亮的效果

最新推荐文章于 2026-04-17 09:10:10 发布

原创最新推荐文章于 2026-04-17 09:10:10 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#django #python

Django 同时被 2 个专栏收录

43 篇文章

订阅专栏

Python笔记

38 篇文章

订阅专栏

本文档介绍了如何导入Bootstrap和JQuery库，创建一个基础页面模板，包括导航栏、侧边栏和主要内容区域，并展示了如何通过block结构在子页面中定制内容。作者分享了一个从CSDN页面分析的布局结构，并提供了base.html和index.html的代码示例，演示了如何基于基础页面渲染其他页面。

文章目录

一、导入Bootstrap和JQuery库

静态文件的配置在上一篇已经讲过了，这里从网上把JQuery和Bootstrap下载下来，拷贝进去，删掉开发的部分，留下min包给我们用。
在这里插入图片描述

二、做一个Base页面

从CSDN的页面分析，顶部是导航栏，左侧侧边栏，右侧是主要内容，底部是版权信息和联系方式。
在这里插入图片描述
base.html:解析

<!DOCTYPE html>
{% load static %}#加载静态文件目录
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}标题{% endblock %}</title>#标题块
    #加载Bootstrap的css样式表
    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    {% block css %}
    留的空挡给后续页面填进去的其他样式表

    {% endblock %}
</head>
<body class="container">
<nav>
{#这里是导航条#}

</nav>
<div id="sidebar">
{#这里是侧边栏#}

    {% block sidebar %}
    留的空给后续 页面填的侧边栏，原有信息会被继承的页面覆盖
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog/">Blog</a></li>
    </ul>
    {% endblock %}
</div>
<div id="content">
    {% block content %}
        <p>这里是主页面</p>
        也是留的空块


    {% endblock %}
</div>
<footer>
{#    底部版权页#}
    <p>©2012-2021 Amor  CSDN:<a href="https://blog.csdn.net/sabian2">https://blog.csdn.net/sabian2</a> </p>
</footer>
#这里导入了JQuery和Bootstrap的js文件
<script src="{% static  'js/bootstrap.min.js' %}"></script>
<script src="{% static  'js/jquery.min.js' %}"></script>
{% block js %}
留的空给其他JS脚本
{% endblock %}
</body>
</html>

Base.html纯净源码：

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}标题{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    {% block css %}

    {% endblock %}
</head>
<body class="container">
<nav>
{#导航条#}

</nav>
{#侧边栏#}
<div id="sidebar">
    {% block sidebar %}
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog/">Blog</a></li>
    </ul>
    {% endblock %}
</div>
<div id="content">
    {% block content %}
        <p>这里是主页面</p>


    {% endblock %}
</div>

<footer>
{#    底部版权页#}
    <p>©2012-2021 Amor  CSDN:<a href="https://blog.csdn.net/sabian2">https://blog.csdn.net/sabian2</a> </p>
</footer>

<script src="{% static  'js/bootstrap.min.js' %}"></script>
<script src="{% static  'js/jquery.min.js' %}"></script>
{% block js %}

{% endblock %}



</body>
</html>

但这个界面这样实在是太难看了，我的Html还没有学好，不会画，索性就抄作业吧。网上找了一个好看的带侧边栏和导航的Bootstrap免费项目，https://startbootstrap.com/template/simple-sidebar，喜欢的可以去支持下那个收费的项目，一百多块钱，实现的功能比较完整。
在这里插入图片描述
仿照刚才的base.html对他的页面修改，划定自己的分块
index.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>{% block title %}Simple Sidebar - Start Bootstrap Template{% endblock %}</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="{% static 'test/favicon.ico' %}" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
        <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
        {% block css %}

        {% endblock %}
    </head>
    <body>
        <div class="d-flex" id="wrapper">
            <!-- Sidebar-->
            <div class="border-end bg-white" id="sidebar-wrapper">
                <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
                <div class="list-group list-group-flush">
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
                </div>
            </div>
            <!-- Page content wrapper-->
            <div id="page-content-wrapper">
                <!-- Top navigation-->
                <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
                    <div class="container-fluid">
                        <button class="btn btn-primary" id="sidebarToggle">切换菜单</button>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                                <li class="nav-item active"><a class="nav-link" href="#!">主页</a></li>
                                <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉</a>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#!">Action</a>
                                        <a class="dropdown-item" href="#!">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#!">Something else here</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <!-- Page content-->
                <div class="container-fluid">
                    {% block content %}
                    {#     这里就是内容块了#}


                    <h1 class="mt-4">Simple Sidebar</h1>
                    <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
                    <p>
                        Make sure to keep all page content within the
                        <code>#page-content-wrapper</code>
                        . The top navbar is optional, and just for demonstration. Just create an element with the
                        <code>#sidebarToggle</code>
                        ID which will toggle the menu when clicked.
                    </p>
                    {% endblock %}
                </div>
            </div>
        </div>
        <footer >{#    底部版权页#}<p align="center">©2012-2021 Amor  CSDN:<a href="https://blog.csdn.net/sabian2">https://blog.csdn.net/sabian2</a> </p>
        </footer>


        <!-- Bootstrap core JS-->
        <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
        <!-- Core theme JS-->
        <script src="{% static 'js/scripts.js' %}"></script>

        <script src="{% static 'js/jquery.min.js' %}"></script>

        {% block js %}

        {% endblock %}


    </body>
</html>

三、通过基础页面基础上渲染自己的页面

这里主要是填block
以不同名的block分块写页面

{% extends 'index.html' %}

{% block title %}
    登录
{% endblock %}

{% block content %}

    这是登录页面:{{ msg }}


{% endblock %}

打开登录页面，实现的效果
在这里插入图片描述

这就是模板页面的继承和定制，主要的手段就是通过block标签，在基础页面上设置相关内容，在继承页面里填充这些块。继承的模板的格式会非常清晰。