网站的外观往往是决定第一印象的关键，优美雅观的界面才能最大程度留下访问网站的人，所以这一篇我们就开始讲一讲网站的前端与flask的实际操作，本文主要讲的是前端框架与模板继承，让我们开始学习吧！
一、前端框架
frog.py
@app.route('/')
def index():
return '
hello,world!
'
当用户打开你的网站访问，出现一个这样的页面显然过于简单了，对于网站来说也不利于留住用户，我们需要让网站变得更加地“漂亮”，所以css样式应运而生，不过我们现在正在学习的是后端框架，重头写样式显得太过麻烦，当然如果你对于自己写样式非常有兴趣，我也是非常支持的，但是为了更加方便我就使用前端UI框架啦。
现在网上的前端框架有非常多，比如Bootstrap、Foundation、Uikit等等都是非常不错的，不过今天我跟大家推荐一个国人写的前端框架叫做MDUI，是按照谷歌Material Design规范设计的一套前端框架，我的另一个项目Meow的前端UI框架就是使用MDUI的，这是他们的官网地址https://www.mdui.org/，可以去读一下他们的文档，写得挺清晰的，我们接下来就使用MDUI来作为Frog的前端框架啦！
二、模板使用基础
1、渲染模板
将
hello Felix
这么短的html代码写在py文件还好，后面代码量上来了还放在py文件里显然就是不太现实，所以使用模板就尤为重要了，flask实现了一个基于Jinja模板引擎的函数render_template，它允许我们使用模板来生成返回给用户的界面，我们来看看如何实现吧！
首先在Frog中添加一个templates文件夹
Frog/
|
|-venv/
|-frog.py
|-templates/
这个templates文件夹就是用来存放模板的地方，我们也可以多添加一个static文件夹，用于存放类似图片、样式表之类的静态文件。
Frog/
|
|-venv/
|-frog.py
|-templates/
|-static/
接下来我们为主页写一个好看的界面并放在templates文件夹中
templates/index.html
Frog
Frog
hello world!
frog.py
from flask import render_template
@app.route('/')
def index():
return render_template('index.html')
然后我们打开浏览器再看看
模板也支持传入参数，只需作为参数传入render_template函数中，在模板使用变量名调用即可，写法为双大括号包裹，让我们来看看如何操作
写一个hello.html文件放入templates文件夹
templates/hello.html
Frog
Frog
hello {{ user }}!
frog.py
@app.route('/hello/')
def hello(user):
return render_template('hello.html',user=user)
2、模板继承
通过观察上面可以发现两个模板大部分地方都是相同的，就是几个字不同，这样很多空间就被白白浪费，而且过于复杂也不利于修改，所以模板继承就非常重要了，Jinja支持模板继承，这样我们就可以写更少的代码也实现同样的效果，让我们看看怎么写吧
写一个base.html
templates/base.html
{% block title %}{% endblock %}
Frog
{% block content %}{% endblock %}
然后再重写一下index.html和hello.html文件
templates/index.html
{% extends 'base.html' %}
{% block title %}Frog{% endblock %}
{% block content %}
hello world!
{% endblock %}
templates/hello.html
{% extends 'base.html' %}
{% block title %}{{ user }}-Frog{% endblock %}
{% block content %}
hello {{ user }}!
{% endblock %}
我们来看看效果
我们在base.html中设置{% block name %}{% endblock %}之类的区块，在需要继承base.html的文件中声明
{% extends 'base.html' %}
并在区块中填入内容以达到复用模板的效果，需要注意一点就是在子模板中区块内容是会覆盖父模板区块的内容的，若想不覆盖可以这样写：
{% block content %}
{{ super() }}
hello world!
{% endblock %}
目前项目目录一览
Frog/
|
|-venv/
|-frog.py
|-templates/
|-base.html
|-index.html
|-hello.html
|-static/
因为flask模板这部分东西比较多，我就分成一篇篇来写，所以这一篇先写到这里，下一篇也是继续讲flask模板的。任何疑问欢迎留言交流，有不对的地方也欢迎大家多多指正，我们下篇再见！
