紧接上篇，继续介绍Django中的模板，考虑可能篇幅过长，所以分为两部分来讲，今天的主要内容：
- 母版，继承关系。头部导航和页脚，是需要与其他页面共用的，那么，需要把这一部分提取出来，放在一个单独的layout.cshtml页面中，其他需要显示的页面，继承这个页面即可。
注意着色部分，{% load staticfiles %} 加载静态文件，静态文件按照项目默认配置，在App文件夹里边的static文件夹下边
注意着色部分，{% block content %}{% endblock %}，block定义可以被子模板覆盖的块，通俗一点就是用来给子模板占位用的
从引用的静态文件我们可以看出来，使用了BootStrap前端框架，这个是VS在新建Django项目的时候默认添加的，那么就直接用这个前端框架来布局了layout.cshtml母版页
另外要提一下的是还引入了一个bootstrap-table.min.js，官方介绍：与一些最广泛使用的CSS框架集成的扩展表。（支持Bootstrap，语义UI，Bulma，Material Design，Foundation）
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" /> <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap-table.min.css' %}" /> <script src="{% static 'hello/scripts/jquery-1.10.2.min.js' %}"></script> <script src="{% static 'hello/scripts/bootstrap.min.js' %}"></script> <script src="{% static 'hello/scripts/bootstrap-table.min.js' %}"></script> <script src="{% static 'hello/scripts/bootstrap-table-zh-CN.min.js' %}"></script> </head> <body> <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">DjangoLazyOrders</a> </div> <div class="navbar-collapse collapse"></div> </div> </div> <div class="container body-content"> {% block content %}{% endblock %} <hr /> <footer> <p>© {{ year }} - My DjangoLazyOrders Application</p> </footer> </div> {% block scripts %}{% endblock %} </body> </html>
母版页有了，那么，在子模板中怎么继承这个母版页呢？新建一个模板LazyOrders.cshtml，复制下面的代码贴进去，然后当前子模板的内容写在 block之间即可。注意extends标记声明了需要继承哪个母版页
{% extends "hello/layout.cshtml" %} {% block content %} ...... {% endblock %} - 其他常用标记。框架提供很多的标记，都是为了在渲染html文本的时候，更方便的表达而设计的标记，这里不一一做介绍，可以直接参考官方文档
for：循环数组中的每个项，使该项在上下文变量中可用。
if：{% if %}标签计算一个变量，如果该变量为“true”(即存在，不为空，也不是一个假布尔值)，则输出块的内容。categorys为视图中调用render()函数传递的参数，上一篇中提到过。
到这一步，如果直接运行，并访问的话http://localhost:8090/hello/lazy_orders_index/，已经可以看到一个类别（categorys）的table展示出来了
<div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">类别</h3> </div> <div class="panel-body"> <div class="list-op" id="list_op"> <button type="button" class="btn btn-default btn-sm" id="dgbtn_category_add"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button type="button" class="btn btn-default btn-sm" id="dgbtn_category_edit"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button type="button" class="btn btn-default btn-sm" data-message="[删除]未选中任何行" id="dgbtn_category_delete"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table class="table table-hover table-bordered" id="dgtable_category"> <thead> <tr> <th></th> <th>ID</th> <th>类别名</th> </tr> </thead> <tbody> {% if categorys %} {% for category in categorys %} <tr> <td><input data-id="{{ category.category_id}}" type="checkbox" /></td> <td>{{category.category_id}}</td> <td>{{category.category_name}}</td> </tr> {% endfor %} {% else %} <tr> <td></td> </tr> {% endif %} </tbody> </table> </div> </div>
运行之后展示的效果如下：
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_30569153/article/details/102270441
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
