flask-bootstrap/base.html研究以及使用

最新推荐文章于 2025-04-15 09:23:05 发布

GeekLeee

最新推荐文章于 2025-04-15 09:23:05 发布

阅读量1.3w

点赞数

分类专栏： -----flask

本文链接：https://blog.youkuaiyun.com/GeekLeee/article/details/52550630

版权

-----flask 专栏收录该内容

36 篇文章

订阅专栏

本文探讨了Flask-Bootstrap的base.html模板，解释了block和endblock指令的作用，强调了在自定义模板时需谨慎处理Flask-Bootstrap的内部块，以防引发问题。通过使用`{% extends %}`引入base.html，并使用`{% block %}`和`{% endblock %}`进行内容扩展。同时，文章提到了HTML版本声明、文件编码、SEO元信息、自动导入功能和脚本插入等前端基础知识。

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

首先了解一下bootstrap提供了多少block，bootstrap中的base.html如下：

{% block doc -%}       ###doc：整个HTML文档（开始）
<!DOCTYPE html>        
<html{% block html_attribs %}{% endblock html_attribs %}>###html_attribs：<html>标签的属性
{%- block html %}     ###html：<html>标签中的内容（开始）
  <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>               ###body_attribs:<body>标签的属性
  <body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body -%}      ###body：<body>标签中的内容（开始）
    {% block navbar %}     ###navbar:用户定义的导航条
    {%- endblock navbar %}
    {% block content -%}    ###content：用户定义的页面内容
    {%- endblock content %}

    {% block scripts %}  ###scripts：文档底部的JavaScript声明
    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
    {%- endblock scripts %}
    {%- endblock body %} ###body：<body>标签中的内容（结束）
  </body>
{%- endblock html %}     ###html：<html>标签中的内容（结束）
</html>
{% endblock doc -%}      ###doc：整个HTML文档（结束）

在我们的这个基模板中，block和endblock指令定义的块中的内容可以在其衍生模板中重新定义，添加到基模板中。
这里写图片描述

上表中的很多块都是Flask-Bootstrap自用的，如果直接重定义可能会导致一些问题。例如，Bootstrap所需的文件在style和scripts块中的声明。如果程序需要向已经有的内容的块中添加新内容，必须使用JinJia2提供的super（）函数。例如，如果要在衍生模板中添加新的JavaScript文件，需要这么定义scripts块：

{% block scripts %}
{{ super() }}
<scripts type="text/javascripts" src="my-scripts.js"></scripts>
{% endblock %}

然后根据上述block部分，自定义自己的基本模板

{% extends 'bootstrap/base.html' %}
{% block html_attribs %} lang="zh-CN" {% endblock %}
{% block title %}个人博客{% endblock %}
{% block meta %}
{{ super() }}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endblock %}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static',filename='css/customer.css') }}">
{% endblock %}

{% block body %}
{% block navbar %}
<ul class="nav nav-tabs" contenteditable="true">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">资料</a></li>
    <li class="disabled"><a href="#">信息</a></li>
    <li class="dropdown pull-right"><a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉 </a>
    <ul class="dropdown-menu">
        <li><a href="#">操作</a></li>
        <li><a href="#">设置栏目</a></li>
        <li><a href="#">更多设置</a></li>
        <li class="divider">&nbsp;</li>
        <li><a href="#">分割线</a></li>
    </ul>
    </li>
</ul>

{% endblock %}

{% block content %}

{% block page_content %}{% endblock %}

{% endblock %}

{% block footer %}
<div class="mastfoot">
<div class="inner">
    <a href='http://www.miitbeian.gov.cn/'>浙ICP备16013637号</a>
</div>
</div>
{% endblock %}

{% endblock %}

使用extends 引入bootstrap的base.html
{% block xxx %} 在base.html补充xxx部分{% endblock %}
其他部分属于前端网页设计部分，可去w3school补课
合理安排插入各个block和endblock块的效果如下（ps：组件插入插入到的是{% block navbar %}和{% endblock %}之间能用，但是插入交互组件会变形，还有下拉不能用，可能都与JavaScript脚本没有声明有关。）

显示HTML的版本

<!DOCTYPE~>

HTML的版本表明HTML文件是按照哪个版本进行编写的（标明该HTML文件遵循的DTD文件），不同的版本和种类都有固定的书写格式，要按照固定的格式输入文件开头，然后在文件开头处写明版本，按照这种版本的规定格式进行编写

显示文件编码

<meta http-equiv="Content-Type" content="text/html; charset=文字编码" />

meta标签的charset属性表示该HTML文件是用什么文字编码编写的注意，该标签一定要位于~范围内
添加关键字、内容介绍及作者姓名

<meta name="keywords" content="关键字1，关键字2，…" />   
<meta name="description" content="内容介绍" />                      <meta name="author" content="作者姓名" />

这些信息都不会在画面上显示出来，但是搜索引擎在收集信息时要用到注意，该标签一定要位于~范围内
设置自动倒入网页功能

<meta http-equiv="refresh" content="秒数" />              
<meta http-equiv="refresh" content="秒数"；URL=要移动到的URL />

在经过数秒后，自动开始导入网页。如果指定了要移动到的URL，就会导入URL指定的网页。如果没有指定，就会再次导入相同的页
注意，该标签一定要位于~范围内
在HTML中插入脚本

<script type=”MME类型”>~</script>           
<script type=”MME类型” language=”语言名称”src=”URL”>~</script>

在HTML文件中编写脚本的时候要用到script标签，脚本语言要写在这个标签的范围内这时，在不支持这个标签的浏览器上会在画面上显示出脚本的部分，为了避免这种现象，通常把脚本整体作为HTML的注释。

网页头部声明

{% block html_attribs %} lang="zh-cmn-Hans" {% endblock %}

上述属于废弃的例子
如何标记的例子：
1. 简体中文页面：html lang=zh-cmn-Hans
2. 繁体中文页面：html lang=zh-cmn-Hant
3. 英语页面：html lang=en