python_way day18 html-day4，模板

Posted 2020-08-07 wawahan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="/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，模板的主要内容，如果未能解决你的问题，请参考以下文章

python_way ,day22 tonardo

python_way ,day25 wmi

python_way day18 html-day4， 模板

python_way day18 html-day4

python_way day18 html-day4，模板