Flask第31课——include标签
我们在上一节代码基础上增加一些代码，样式：
文件名index.html，代码：
{% from 'macros/forms.html' import input %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宏title>
<style>
*{
list-style: none;
text-decoration: none;
}
.header{
height: 60px;
background: #3a3a3a;
color: #fff;
margin-bottom: 20px;
}
.header .nav-group{
margin-left: 10px;
}
.header .nav-group li{
float: left;
line-height: 60px;
margin: 0px 20px;
}
.nav-group li a{
color: #fff;
}
.footer{
height: 60px;
background: #3a3a3a;
}
.footer p{
color: #fff;
margin-left: 30px;
padding-top: 20px;
}
style>
head>
<body>
<div class="header">
<ul class="nav-group">
<li><a href="#">新闻a>li>
<li><a href="#">音乐a>li>
<li><a href="#">贴吧a>li>
<li><a href="#">视频a>li>
ul>
div>
<table>
<tbody>
<tr>
<td>账号td>
<td>{{ input(placeholder="请输入账号") }}td>
tr>
<tr>
<td>密码td>
<td>{{ input(type="password", placeholder="请输入密码") }}td>
tr>
<tr>
<td>td>
<td>{{ input(type="submit", value="提交") }}td>
tr>
tbody>
table>
<div class="footer">
<p>页面底部p>
div>
body>
html>现在考虑这样一个问题，如果页面头部和底部是很多页面要用的样式，那么如果在每一个新的文件中都要复制相同的代码肯定不是我们希望的，这时候就可以用到include标签了：
-
用法
{% include '引用文件路径' %}用include前提是把相同的代码先提取出来，所以我们将对应的代码先提取成文件：
文件结构：
headers.html
<style>
*{
list-style: none;
text-decoration: none;
}
.header{
height: 60px;
background: #3a3a3a;
color: #fff;
margin-bottom: 20px;
}
.header .nav-group{
margin-left: 10px;
}
.header .nav-group li{
float: left;
line-height: 60px;
margin: 0px 20px;
}
.nav-group li a{
color: #fff;
}
style>
<div class="header">
<ul class="nav-group">
<li><a href="#">新闻a>li>
<li><a href="#">音乐a>li>
<li><a href="#">贴吧a>li>
<li><a href="#">视频a>li>
ul>
div>footers.html
<style>
.footer{
height: 60px;
background: #3a3a3a;
}
.footer p{
color: #fff;
margin-left: 30px;
padding-top: 20px;
}
style>
<div class="footer">
<p>页面底部p>
div>将公共部分提取出以后在调用的地方只需要用include标签调用即可：
index.html
{% from 'macros/forms.html' import input %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宏title>
head>
<body>
{% include 'index/headers.html' %}
<table>
<tbody>
<tr>
<td>账号td>
<td>{{ input(placeholder="请输入账号") }}td>
tr>
<tr>
<td>密码td>
<td>{{ input(type="password", placeholder="请输入密码") }}td>
tr>
<tr>
<td>td>
<td>{{ input(type="submit", value="提交") }}td>
tr>
tbody>
table>
{% include 'index/footers.html' %}
body>
html>如果还有一个详情页，那么只需要：
detail.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Detailtitle>
head>
<body>
{% include 'index/headers.html' %}
<p>这是详情页p>
{% include 'index/footers.html' %}
body>
html>显示
