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 navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="/">GeekLeea>
        div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Homea>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:层叠样式表定义
    
    <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块中只有一个

容器(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 %}里面先得新建一个

容器,再在容器里面填充内容!!!



重点三

base.html

{% block scripts %}
{
     { super() }}
{
     { moment.include_moment() }}
{% endblock %}

在base.html引入的js脚本,在index.html也能用,因为index在最上面已经把base.html整个引进来了,包括js脚本,如下:

{% extends "base.html" %}

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