建网站备案,抖音小程序入驻,php和网站建设,网站建设要求 牛商网先赞后看#xff0c;养成习惯#xff01;#xff01;#xff01; 目录 模板继承的好处 模板继承的语法规则 更新代码 上文中的部门管理页面#xff1a; 【玩转全栈】----Django制作部门管理页面-CSDN博客 大家会发现#xff0c;由于定义了多个html文件#xff0c;多个ht… 先赞后看养成习惯 目录 模板继承的好处 模板继承的语法规则 更新代码 上文中的部门管理页面 【玩转全栈】----Django制作部门管理页面-CSDN博客 大家会发现由于定义了多个html文件多个html文件中有很大冗余的代码比如导航栏、引入文件代码等等这样的话一个文件的代码量可能就非常大可读性不高。有没有什么方法能简化操作呢当然可以通过模板间的继承语法。 模板继承的好处 Django模板的继承通过定义一个基础模板如包含页面头部、导航栏和底部的整体布局允许其他模板在此基础上扩展和定制从而实现代码复用和统一管理。这种方式减少了重复代码的编写提高了开发效率和可维护性。当需要更改页面布局时只需修改基础模板即可统一更新所有子模板避免逐个修改多个文件。此外模板继承使页面结构清晰便于团队协作。子模板中仅需关注特定内容区域的定义符合模块化和分离关注点的设计原则大幅提升了项目的可扩展性和灵活性。 模板继承的语法规则 首先需要定义一个模板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 langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet 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 classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapse data-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#广西联通/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#位于 span classsr-only(current)/span/a/lilia href#时间/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalse地点 span classcaret/span/aul classdropdown-menulia href#重庆/a/lilia href#江西/a/lilia href#上海/a/lili roleseparator classdivider/lilia href#福建/a/lili roleseparator classdivider/lilia href#黑龙江/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-group{% csrf_token %}labelinput typetext classform-control placeholderSearch/label/divbutton typesubmit classbtn btn-default提交/button/formul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/navdiv classcontainer-fluid
{#相当于占位符#}{% block content %}{% endblock %}
/div
/body
/html
depart_list.html:
{% extends layout.html %}
{% block content %}div classcontainer-fluid
div classmy-divdiv stylemargin-bottom: 10pxa classbtn btn-primary href/depart/add/
{# target_blank使得跳转打开新页面#}span classglyphicon glyphicon-plus aria-hiddentrue/span新建部门/a/divdivdiv classpanel-headingspan classglyphicon glyphicon-eye-open aria-hiddentrue/span部门列表/divdiv classbs-example data-example-idcontextual-tabletable classtabletheadtrthID/thth部门名称/thth操作/th/tr/theadtbody{% for obj in queryset %}trth scoperow{{ obj.id }}/thtd{{ obj.title }}/tdtda classbtn btn-primary btn-xs href/depart/{{ obj.id }}/edit编辑/aa classbtn 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;}/stylediv classmy-divdiv classcontainerdiv classpanel panel-default stylewidth: 750px;margin-top: 100px!-- Default panel contents --div classpanel-heading新建 部门/divdiv classpanel-bodyform classform-horizontal methodPOST{% csrf_token %}!-- 部门名输入框 --div classform-grouplabel forinputDepartmentName classcol-sm-2 control-label部门名/labeldiv classcol-sm-10input typetext classform-control idinputDepartmentName placeholder请输入部门名 nametitle valueXX部/div/div!-- 管理员密码输入框 --div classform-grouplabel forinputPassword3 classcol-sm-2 control-label管理员密码/labeldiv classcol-sm-10input typepassword classform-control idinputPassword3 placeholder请输入管理员密码 namepwd/div/div!-- 保存按钮 --div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primary保 存/button/div/div/form/div!-- Table --table classtable.../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;}/stylediv classmy-divdiv classcontainerdiv classpanel panel-default stylewidth: 750px;margin-top: 100px!-- Default panel contents --div classpanel-heading修改 部门/divdiv classpanel-bodyform classform-horizontal methodPOST{% csrf_token %}!-- 部门名输入框 --div classform-grouplabel forinputDepartmentName classcol-sm-2 control-label部门名 :/labeldiv classcol-sm-10input typetext classform-control idinputDepartmentName placeholder请输入部门名 nametitle value{{ obj.title }}/div/div!-- 管理员密码输入框 --div classform-grouplabel forinputPassword3 classcol-sm-2 control-label管理员密码 :/labeldiv classcol-sm-10input typepassword classform-control idinputPassword3 placeholder请输入管理员密码 namepwd/div/div!-- 保存按钮 --div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primary保 存/button/div/div/form/div!-- Table --table classtable.../table/div/div
/div
{% endblock %} 感谢您的三连!!!
