【玩转全栈】----Django模板的继承

Edward-tan2025-01-21 14:52

先赞后看，养成习惯！！！

上文中的部门管理页面：

【玩转全栈】----Django制作部门管理页面-CSDN博客

大家会发现，由于定义了多个html文件，多个html文件中有很大冗余的代码，比如导航栏、引入文件代码等等，这样的话一个文件的代码量可能就非常大，可读性不高。有没有什么方法能简化操作呢，当然，可以通过模板间的继承语法。

模板继承的语法规则是这样的：

首先需要定义一个模板html文件，模板文件中的一切都会被其他html文件继承，在与其他html文件不同的位置加上：

{% block content %}{% endblock %}

可以理解为占位符，content 是该处占位符的名字，可以修改。

在要引入模板html的文件中，在最前面加入引入语句：

{% extends 'layout.html' %}

layout.html就是模板文件的文件名。

然后是内容：

{% block content %}


"""
内容
"""


{% endblock %}

当然也可以些多个占位符，给一些特定语法区域留位置，比如css、js.

通过这样的方式，能大大缩短子文件的代码量，像之前的用户管理页面，使用了模板语法后就是这样了:

layout.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
        .my-div{
            height: 600px;
            width: 900px;
            margin: auto ;
            {#margin-top: 40px ;#}
            {#margin-top: 20px;#}
            border: 1px solid #d5dfe3;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 5px 5px 22px #aaa;
        }
    </style>
</head>
<body>

{#<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>#}
{#<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>#}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">广西联通</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">位于 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">时间</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">地点 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">重庆</a></li>
            <li><a href="#">江西</a></li>
            <li><a href="#">上海</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">福建</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">黑龙江</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
            {% csrf_token %}
            <label>
                <input type="text" class="form-control" placeholder="Search">
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
{#相当于占位符#}
    {% block content %}{% endblock %}
</div>
</body>
</html>

depart_list.html:

{% extends 'layout.html' %}
{% block content %}
    <div class="container-fluid">
<div class="my-div">
    <div style="margin-bottom: 10px">
        <a class="btn btn-primary" href="/depart/add/">
{#            target="_blank"使得跳转打开新页面#}
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新建部门</a>
    </div>
    <div>
        <div class="panel-heading">
            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
            部门列表</div>
        <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>部门名称</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          {% for obj in queryset %}
            <tr>
              <th scope="row">{
  
  { obj.id }}</th>
              <td>{
  
  { obj.title }}</td>
              <td>
                  <a class="btn btn-primary btn-xs" href="/depart/{
  
  { obj.id }}/edit">编辑</a>
                  <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={
  
  { obj.id }}">删除</a>
              </td>
            </tr>
            {% endfor %}
        </table>
      </div>
    </div>
</div>
</div>
{% endblock %}

depart_add.html:

{% extends 'layout.html' %}
{% block content %}
    <style>
        .navbar{
            border-radius: 0;
        }
        .my-div{
            height: 600px;
            width: 900px;
            margin: auto ;
            {#margin-top: 40px ;#}
            {#margin-top: 20px;#}
            border: 1px solid #d5dfe3;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 5px 5px 22px #aaa;
        }
    </style>

<div class="my-div">
    <div class="container">
        <div class="panel panel-default"  style="width: 750px;margin-top: 100px">
          <!-- Default panel contents -->
          <div class="panel-heading">新建 部门</div>
          <div class="panel-body">
            <form class="form-horizontal" method="POST">
                {% csrf_token %}
              <!-- 部门名输入框 -->
              <div class="form-group">
                <label for="inputDepartmentName" class="col-sm-2 control-label">部门名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="XX部">
                </div>
              </div>

              <!-- 管理员密码输入框 -->
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">管理员密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd">
                </div>
              </div>

              <!-- 保存按钮 -->
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">保 存</button>
                </div>
              </div>
            </form>

          </div>

          <!-- Table -->
          <table class="table">
            ...
          </table>
        </div>
    </div>
</div>
{% endblock %}

depart_edit.html:

{% extends 'layout.html' %}

{% block content %}
    <style>
        .navbar{
            border-radius: 0;
        }
        .my-div{
            height: 600px;
            width: 900px;
            margin: auto ;
            {#margin-top: 40px ;#}
            {#margin-top: 20px;#}
            border: 1px solid #d5dfe3;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 5px 5px 22px #aaa;
        }
    </style>
    <div class="my-div">
    <div class="container">
        <div class="panel panel-default"  style="width: 750px;margin-top: 100px">
          <!-- Default panel contents -->
          <div class="panel-heading">修改 部门</div>
          <div class="panel-body">
            <form class="form-horizontal" method="POST">
                {% csrf_token %}
              <!-- 部门名输入框 -->
              <div class="form-group">
                <label for="inputDepartmentName" class="col-sm-2 control-label">部门名 :</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="{
  
  { obj.title }}">
                </div>
              </div>

               <!-- 管理员密码输入框 -->
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">管理员密码 :</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd">
                </div>
              </div>

              <!-- 保存按钮 -->
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">保 存</button>
                </div>
              </div>
            </form>

          </div>

          <!-- Table -->
          <table class="table">
            ...
          </table>
        </div>
    </div>
</div>
{% endblock %}

感谢您的三连!!!

相关推荐
深图智能1 小时前
PyTorch使用教程(14)-如何正确地选择损失函数？
人工智能·pytorch·python·深度学习
深图智能1 小时前
PyTorch使用教程(10)-torchinfo.summary网络结构可视化详细说明
人工智能·pytorch·python·深度学习
weixin_422456441 小时前
P6周：VGG-16算法-Pytorch实现人脸识别
人工智能·pytorch·python
软件开发技术深度爱好者1 小时前
Python+ tkinter实现小学整数乘法和除法竖式演算式
开发语言·python
wang_yb2 小时前
Django和FastAPI的比较
python·databook
l1x1n02 小时前
No. 34 笔记 | Python知识架构与数据类型相关内容 | 实操
开发语言·笔记·python
寒燧2 小时前
Lightning初探
开发语言·python
ss2732 小时前
基于Springboot + vue实现的贸易行业crm系统
vue.js·spring boot·后端
hakesashou3 小时前
python如何导出数据到excel文件
开发语言·python·excel
bobz9653 小时前
OVN HA GW based BFD
后端
热门推荐
01leetcode - 1769. Minimum Number of Operations to Move All Balls to Each Box02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04Dell服务器升级ubuntu 22.04失败解决05密码学原理技术-第六章-introduction to pulibc-key cryptography06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07xgboost: Why not implement distributed XGBoost on top of spark08[Docker]使用Docker部署常见的中间件09渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了10centos7 init.d 和system.d