{%extends "bootstrap/base.html"%}的添加,使得其他block无法继承

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

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

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

 

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

官方文档

  • Examples

  • Adding a custom CSS file:

    {% block styles %}
    {{super()}}
    <link rel="stylesheet"
          href="{{url_for('.static', filename='mystyle.css')}}">
    {% endblock %}

  • Custom Javascript loaded before Bootstrap’s javascript code:

    {% block scripts %}
    <script src="{{url_for('.static', filename='myscripts.js')}}"></script>
    {{super()}}
    {% endblock %}

  • Adding a lang="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="#">Liu'BLOG</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 %}

 

可参考:flask-bootstrap/base.html研究以及使用

bootstrap官网 http://www.bootcss.com/

font-awesome 官网 http://fontawesome.io/

flask-bootstrap 官网 http://pythonhosted.org/Flask-Bootstrap/index.html

 

  • 0
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页

打赏

网络毒刘

授人玫瑰,手有余香。

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者