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

本文介绍如何在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" %}
<think>好的,我需要回答用户关于Flask框架中模板继承的问题。用户已经提供了一些参考资料,我需要结合这些资料,整理出清晰的步骤和示例。 首先,模板继承在Flask中是通过Jinja2模板引擎实现的,允许子模板继承父模板的结构,并覆盖特定块。根据引用[1]和[4],父模板通常包含通用结构,如HTML骨架、Bootstrap引入等。子模板使用`{% extends %}`语句继承父模板,并覆盖`block`部分。 接下来,用户需要具体的语法说明。引用[1]提到,extends语句的路径是相对于templates文件夹的绝对路径,例如`{% extends "base.html" %}`。引用[3]则说明了如何通过`super()`继承父模板块的内容,这对于在子模板中添加内容而不完全覆盖父模板内容很有用。 然后,我需要给出一个实际案例。根据引用[4],项目结构可能包含父模板base.html,子模板home.html继承它,并覆盖title和content块。同时,可能需要使用Flask-Bootstrap来扩展基础模板,如引用[4]所述。 另外,需要注意块的定义和使用,如`{% block content %}`和`{% endblock %}`。在子模板中,这些块会被替换或扩展。同时,要提到静态文件的处理,如使用`url_for`生成路径,这在引用[4]中可能有涉及。 最后,确保回答结构清晰,分步骤说明,并附上代码示例。还要检查是否引用了正确的来源,例如如何在子模板中保留父模板内容(引用[3]),以及模板继承的基本语法(引用[1]、[2]、[4])。</think>### Flask框架模板继承实现方法详解 #### 一、核心实现步骤 1. **创建父模板**:建`base.html`作为所有页面的基础模板,定义通用结构和可替换块 ```html <!-- templates/base.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}默认标题{% endblock %}</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}"> </head> <body> <div class="container"> {% block content %}{% endblock %} </div> {% block footer %} <footer>© 2024 默认页脚</footer> {% endblock %} </body> </html> ``` 2. **创建子模板**:使用`extends`指令继承父模板,覆盖特定内容块 ```html <!-- templates/home.html --> {% extends "base.html" %} {% block title %}首页 - 我的网站{% endblock %} {% block content %} <h1>欢迎访问首页</h1> <p>这是继承后的页面内容</p> {% endblock %} {% block footer %} {{ super() }} <!-- 保留父模板页脚内容 --> <div class="custom-footer">增自定义页脚</div> {% endblock %} ``` #### 二、关键语法说明 1. **继承声明**:`{% extends "base.html" %}`必须是子模板的首行代码[^1] 2. **块定义**: ```jinja2 {% block block_name %} <!-- 可替换内容区域 --> {% endblock %} ``` 3. **父内容保留**:使用`{{ super() }}`继承父模板块原有内容[^3] 4. **静态资源引用**:推荐使用`url_for('static', filename='路径')`生成资源路径[^4] #### 三、进阶使用技巧 1. **多层继承**:支持多级模板继承(父模板→子模板→孙子模板) 2. **包含模板**:使用`{% include 'widget.html' %}`插入公共组件 3. **宏定义**:通过`{% macro %}`创建可复用组件 ```jinja2 {% macro render_form_field(field) %} <div class="form-group"> {{ field.label }} {{ field(class="form-control") }} </div> {% endmacro %} ``` #### 四、项目结构示例 ``` project/ ├── app.py └── templates/ ├── base.html # 基础模板 ├── home.html # 首页子模板 └── admin/ └── dashboard.html # 后台子模板 ``` #### 五、视图函数配置示例 ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('home.html') if __name__ == '__main__': app.run() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值