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

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

{% block doc -%}       ###doc:整个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:层叠样式表定义
    
    <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/base.html研究以及使用_第1张图片
flask-bootstrap/base.html研究以及使用_第2张图片
上表中的很多块都是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"> 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脚本没有声明有关。)
    flask-bootstrap/base.html研究以及使用_第3张图片

显示HTML的版本

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="作者姓名" />  

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

http-equiv="refresh" content="秒数" />              
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

你可能感兴趣的:(-----flask)