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

来源：互联网发布：淘宝评价内衣图片编辑：程序博客网时间：2024/05/16 03:33

首先了解一下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

0 0