flask-bootstrap里面添加新内容的技巧

最新推荐文章于 2025-02-27 14:40:03 发布

原创最新推荐文章于 2025-02-27 14:40:03 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

-----flask 同时被 2 个专栏收录

36 篇文章

订阅专栏

-----bootstrap

3 篇文章

订阅专栏

本文介绍如何在Flask应用中使用模板继承来简化页面布局，并通过具体示例展示了如何定义基模板以及如何在子模板中覆盖和扩展基模板的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{% extends "bootstrap/base.html" %}

{% block title %}GeekLee{% endblock %}

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename = "favicon.ico") }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">GeekLee</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

重点一

按照下图的基模板

  <head>
    {%- block head %}  ###head：<head>标签中的内容（开始）
    <title>{% block title %}{{title|default}}{% endblock title %}</title> ###title：<title>标签中的内容
    {%- block metas %} ###metas：一组<meta>标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- endblock metas %}

    {%- block styles %}   ##styles:层叠样式表定义
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
    {%- endblock styles %}
    {%- endblock head %}     ###head：<head>标签中的内容（结束）
  </head>

我想的是

{%- block head %}
镶嵌头像代码
{% block title %}GeekLee{% endblock %}
{%- endblock head %}

而他是这样的

{% block title %}GeekLee{% endblock %}

{% block head %}头像代码放在head里面，title单独拿出来放到了head上面了
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename = "favicon.ico") }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}" type="image/x-icon">
{% endblock %}

重点二

{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}

content块中只有一个<div>容器（class=”container”），在里面又新建了一个名为page_content的新空块，这个块中的内容才是由衍生模板定义的!!!

在衍生模板中如下图：

{% extends "base.html" %}
{% block title %}GeekLee{% endblock %}
{% block page_content %}
<div class="page-header">################################################
    <h1>Hello, {{ name }}!</h1>
</div>
{% endblock %}#########################################

{% block page_content %}{% endblock %}里面先得新建一个<div>容器，再在容器里面填充内容！！！

重点三

base.html

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

在base.html引入的js脚本，在index.html也能用，因为index在最上面已经把base.html整个引进来了，包括js脚本，如下：

{% extends "base.html" %}