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

最新推荐文章于 2023-11-28 10:35:33 发布

GeekLeee

最新推荐文章于 2023-11-28 10:35:33 发布

阅读量1.7k

点赞数

分类专栏： -----bootstrap -----flask

本文链接：https://blog.csdn.net/GeekLeee/article/details/52566302

版权

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

36 篇文章 3 订阅

订阅专栏

-----bootstrap

3 篇文章 0 订阅

订阅专栏

{% 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" %}

GeekLeee

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录