一.引入前台公共部分
image.png
1.在创建模板文件
在D:\Python学习\movie\app\templates\home文件夹下新建home.html和index.html文件.
image.png
2.复制前台公共部分
(1) copyD:\Python学习\movie\app\static\tpl\2-movie文件夹下的nav.html文件内容
image.png
(2) 粘贴到
home.html文件中(3) 用
url_for的方式引入静态文件
- 头部
<link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='base/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='base/css/bootstrap-movie.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='base/css/animate.css') }}">
- 导航
<img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:30px;">
- 底部
<script src="{{ url_for('static',filename='base/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='base/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ url_for('static',filename='base/js/wow.min.js') }}"></script>
<script src="{{ url_for('static',filename='lazyload/jquery.lazyload.min.js') }}"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
(4) 添加内容模块
<!--内容-->
<div class="container" style="margin-top:76px">
{% block content %} {% endblock %}
</div>
二.公共模板继承
编辑index.html,以继承home.html
{% extends "home/home.html" %}
{% block content %}
<h1>hello world!</h1>
{% endblock %}
三.模板映射
编辑D:\Python学习\movie\app\home文件夹下views.py文件以映射模板.
image.png
# coding:utf8
from . import home
from flask import render_template
@home.route("/")
def index():
return render_template("home/index.html")
四.运行manage.py
image.png
image.png
