【Flask专题】11.模板-继承（PyCharm）

模板-继承（PyCharm）

步骤;

1. 定义父模板base.html，存放一些公用的显示，
2. 在模板里我们定义：{% block name %} 默认值 {% endblock %}
3. 定义block的位置和最后在HTML中的位置相同
4. 子模板继承父模板:清空子模板，与父模板有差异的地方填充对应的block

补充：
模板中加载静态资源（css/js/image）：

通过app.url_map() —> 查看路由和视图函数（endpoint默认函数名）的映射关系，查看static

继承例举

@app.route('/block')
def show_block():
    return render_template('index3.html')

index3.html里就一句继承语句，继承base.html

{% extends 'base.html' %}

继承文件中的预留内容

base.html

  {% block home_page %}
    预留网站首页
  {% endblock %}

index3.html

{% extends 'base.html' %}

{% block home_page %}
<br>
<br>
<br>
    <h1>预留的首页</h1>
{% endblock %}

对网页标题的替换

base.html

<title>
  {% block title %}
    首页个人博客
  {% endblock %}
</title>

index3.html

{% block title %}
Home Page
{% endblock %}

预留样式、脚本

base.html

<header>
  {% block mycss %} 预留样式 {% endblock %}
  {% block myjs %} 预留脚本 {% endblock %}
</header>

index3.html

{% block myjs %}
<script>
    window.onload=function(){
    alert('这是一个弹框！')
    }
</script>
{% endblock %}

使用url_for()加载静态目录(static)中的文件

css、images、js

<!--使用url_for()加载-->
<link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
<!--使用路径加载-->
<link href="../static/css/index.css" rel="stylesheet">