{%extends-CFANZ编程社区

仙说{%extends "bootstrap/base.html"%}用法：

在base.html中调用一次即可，并且 {%extends "bootstrap/base.html"%} 要放在最后头！！最后头！最后头！

base中不用再添加 {% block content%} {% endblock %}，等等自带的block ，具体自带如下图！

${%extends_html$

因为bootstrap/base.html包含很多block

官方文档

Examples

Adding a custom CSS file:

{% block styles %}{{super()}} {% endblock %}

Custom Javascript loadedbefore Bootstrap’s javascript code:

{% block scripts %} {{super()}} {% endblock %}

Adding alang="en" attribute to the <html>-tag:

{% block html_attribs %} lang="en"{% endblock %}

再说报错：如果继承中添加 {% block content %} {% endblock %}

起了两次作用

因为在base.html中添加了 {%extends "bootstrap/base.html"%} 所以名字被占用了

只好改名后js才能在页面显示出来

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} 首页 {% endblock %}</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    {% block mycss %} {% endblock %}

</head>
<body>

<nav class="navbar navbar-inverse ">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">Ｌｉｕ＇ＢＬＯＧ</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{url_for('blog.index')}}">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="{{url_for('article.add')}}">发表博客</a></li>
                <li><a href="{{url_for('blog.uall')}}">显示用户</a></li>
                <li><a href="{{url_for('blog.test')}}">测试钩子函数</a></li>
                <li><a href="{{url_for('blog.qiniu')}}">云存储IMG</a></li>
            </ul>
            <form class="navbar-form navbar-left" action="{{url_for('blog.search')}}" method="post">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="输入用户名/手机号码" name="search">
                </div>
                <button type="submit" class="btn btn-default">搜索用户</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                {% if session['uname'] %}
                <li><a href="{{url_for('blog.udetial')}}">欢迎 {{session['uname']}}</a></li>
                <li><a href="{{url_for('blog.exit')}}">注销</a></li>
                {% else%}
                <li><a href="{{url_for('blog.login')}}">登录</a></li>
                <li><a href="{{ url_for('blog.register') }}">注册</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


{% block myjs1 %} {% endblock %}
{%extends "bootstrap/base.html"%}




</body>

</html>

继承模板.html

{% extends 'base.html' %}
{% block title %} 用户登录 {% endblock %}

{% block content %}

{% block myjs1 %}
    <script>
        $('#getCode').click(function(){
            // 获取手机号码文本框的值
            var  phone = $('#phone').val();

            flag=(phone!=''&&phone.length==11);
            console.log(phone+"---"+flag);
            if(flag){
                // 向服务器发送请求
                $.getJSON("{{url_for('blog.send')}}",{phone:phone},function(data){

                });
            }else{
              alert('手机号码不能为空，长度必须11位')
            }
        })



    </script>

{% endblock %}