Flask开发前端-模板渲染+静态文件

模版继承和block的目的就是为了减少前端代码量，提高代码复用性

一、块 (Block)

1、关于模板的继承，我们可以在子模板的顶部使用如”{% extend ‘base.html’ %}”语句来声明继承。而子模板中由”{% block block_name %}”和”{% endblock %}”所包括的语句块，将会替换父模板中同样由”{% block block_name %}”和”{% endblock %}”所包括的语句块。

这就是块的功能，模板语句的替换。这里要注意几个点：

模板不支持多继承，也就是子模板中定义的块，不可能同时替换两个父模板的块。
模板中不能定义同名的块，因为这样无法确认替换块的内容。

建议在”endblock”关键字后也加上块名，比如”{% endblock block_name %}”，增加可读性。

使用父模板块 (Block)的内容：：：如下

如果子模板想使用父模板中的块里的内容，请使用{{ super() }}

2、这里我们再介绍一个Jinja2模板中代码重用的功能，就是包含 (Include)，使用的方法就是”{% include %}”语句。其功能就是将另一个模板加载到当前模板中，并直接渲染在当前位置上。它同导入”import”不一样，”import”之后你还需要调用宏来渲染你的内容，”include”是直接将目标模板渲染出来。它同block块继承也不一样，它一次渲染整个模板文件内容，不分块。

二、flask中静态文件的引入

在static文件夹下（与templates同级）存放静态文件（css/js/image等）

引入：构造url_for：filename的路径是相对于static文件夹的路径

url_for("static",filename="css/demo.css")

实例如下：：：

在 templates 文件夹下的common文件夹下建立网页HTML文件 base.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{% block title %}{% endblock %}</title>

    {% block css %}
    <!--引入项目的图标-->
    <link rel="shortcut icon" href="{{ url_for('static',filename = 'favicon.ico') }}" type="image/x-ico">
    <link rel="icon" href="{{ url_for('static',filename = 'favicon.ico') }}" type="image/x-ico">
    {% endblock %}
</head>

<body>


{% block header %}{% endblock %}
<div class="container">
    <div class="content">
        <div id="large-header" class="large-header">
            {% block main %}{% endblock %}
        </div>
    </div>
</div>

{% block footer %}{% endblock %}

{% block js %}{% endblock %}


</body>

</html>

使用上述base文件来渲染自己想要的页面样式，比如：

在 templates 文件夹下建立网页HTML文件 register.html：

<!--继承基础模板-->
{% extends "common/base.html" %}

{% block title %}RASP-欢迎注册{% endblock %}

<!--css模块-->
{% block css %}
<!--super代表渲染的父模板中已经存在内容，所以加super-->
{{super()}}
<link rel="stylesheet" href="{{ url_for('static', filename='css/header.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
{% endblock %}


<!--头部-导航栏-->
{% block  header%}

{% include "common/header.html" %}
{% endblock %}


<!--主体内容-->
{% block  main%}

<!--主体内容-->
<br> <div>
        {% for message in get_flashed_messages() %}
        <div>
            {{ message }}
        </div>
        {% endfor %}
    </div>
<br>
<div class="regis">

    <div class="welcome">
        <p>欢迎注册</p>
    </div>

    <form action="{{url_for('register')}}" method="post" role="form">
        <input type="text" placeholder="用户名" class="input-text" name="id" id="id">      
    </form>
</div>
{% endblock %}

<!--底部footer-->
{% block  footer%}
{% include "common/footer.html" %}
{% endblock %}

<!--JS部分-->
{% block js %}
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>

{% endblock %}

即可渲染为自己想要的样式