码迷,mamicode.com
首页 > 编程语言 > 详细

python_way day18 html-day4, 模板

时间:2016-09-06 01:02:45      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

python_way day18 html-day4

模板语言之母板的使用

 

在我们写一些后台管理页面的时候,因为后台的样式,布局基本一致,只有页面右侧数据展示部分不同,我们就为了省去重复的写多个一样的页面就还可以使用模板的母板功能,类似于写一个函数,每次调用这个函数就可以完成相同的工作了。

 

母板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <link rel="stylesheet"  href="/statics/assets/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"  href="/statics/assets/bootstrap/css/bootstrap-theme.min.css" />
    <link rel="stylesheet"  href="/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="/home/">服务器信息</a></li>
                <li><a id="msg_mg" href="/assets/">服务器管理</a></li>
                <li><a id="user_mg" href="/user/">用户信息管理</a></li>
            </ul>
        </div>
        <div class=" body-inner table-responsive">
            {% block inner %}{% endblock %}                          #母板语言的关键字与格式:{%block%} 里面的inner就是需要替换不同位置的标记
        </div>
    </div>
    <script src="/statics/assets/js/jquery-1.11.1.min.js"></script>
    <script src="/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, 模板

标签:

原文地址:http://www.cnblogs.com/python-way/p/5844206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!