首页 > 代码库 > python_way day18 html-day4， 模板
python_way day18 html-day4， 模板
python_way day18 html-day4
模板语言之母板的使用
在我们写一些后台管理页面的时候，因为后台的样式，布局基本一致，只有页面右侧数据展示部分不同，我们就为了省去重复的写多个一样的页面就还可以使用模板的母板功能，类似于写一个函数，每次调用这个函数就可以完成相同的工作了。
母板：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>home</title> <link rel="stylesheet" href="http://www.mamicode.com/statics/assets/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="http://www.mamicode.com/statics/assets/bootstrap/css/bootstrap-theme.min.css" /> <link rel="stylesheet" href="http://www.mamicode.com/statics/assets/css/my_home.css" /> {% block css %}{% endblock %} #按照惯例，这里写一个css的块，可以提供子板加载自己的css样式</head><body > <div class="pg-head"> <div class="a"> <h4 >CMDB资产管理系统</h4> </div> </div> <div class="pg-body clearfix"> <div class="body-menu" > <ul> <li><a id="msg" href="http://www.mamicode.com/home/">服务器信息</a></li> <li><a id="msg_mg" href="http://www.mamicode.com/assets/">服务器管理</a></li> <li><a id="user_mg" href="http://www.mamicode.com/user/">用户信息管理</a></li> </ul> </div> <div class=" body-inner table-responsive"> {% block inner %}{% endblock %} #母板语言的关键字与格式：{%block%} 里面的inner就是需要替换不同位置的标记 </div> </div> <script src="http://www.mamicode.com/statics/assets/js/jquery-1.11.1.min.js"></script> <script src="http://www.mamicode.com/statics/assets/bootstrap/js/bootstrap.min.js"></script> {% block js %}{% endblock %} #这里可以写一个js的替换块，让子板自己使用自己独有的js</body></html>
其他html就可以调用这个母板了
{% extends ‘layout.html‘ %} #我们需要告诉这个html子板，引用母板的名字{% block inner %} #我们就可以只写这个html需要展示的数据 inner就对应着母板的inner的位置进行替换<h1>数据展示</h1><table class="table table-striped table-bordered "> <tr> <th>用户名</th> <th>邮箱</th> <th>密码</th> </tr> {% for line in data %} <tr> <td>{{ line.user }}</td> <td>{{ line.email }}</td> <td>{{ line.password }}</td> </tr> {% endfor %}</table><table class="table table-striped table-bordered "> <tr> <th>用户名</th> <th>邮箱</th> <th>密码</th> </tr> {% for line in data %} <tr> <td>{{ line.user }}</td> <td>{{ line.email }}</td> <td>{{ line.password }}</td> </tr> {% endfor %}</table><div class="pg"> <a>1</a> <a>2</a> <a>3</a></div>{% endblock %}{% block js %} #增加自己这个页面需要的html页面 <script> $("#user_mg").parent().addClass("active"); #找到id为user_mg的标签，添加上active这个样式 </script>{% endblock %}
python_way day18 html-day4， 模板
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。