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

{% 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" %}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值