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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

运用Nginx代理和UWSGI将Flask项目部署在Linux中 详细步骤

nginx: 安装可以参照的路径: http://nginx.org/en/linux_packages.html#Ubuntu 启动Nginx nginx [ -c configpath] 默认配置目录&#xff1a;/etc/nginx/nginx.conf 查看进程&#xff1a; ps -ef |grep nginx 控制Nginx nginx -s xxxstop 快速关闭quit …

机器学习算法之KNN

前言 KNN一般用于有监督的分类场景&#xff0c;除此之外&#xff0c;KNN在异常检测场景中也有应用&#xff0c;下面主要介绍下KNN在这两面的应用原理。 KNN做分类的原理 计算步骤如下&#xff1a; 1&#xff09;算距离&#xff1a;给定测试对象&#xff0c;计算它与训练集中…

Supermap 组合单值专题图与标签专题图演示样例

效果图例如以下&#xff1a;单值专题图并显示每一个区域的相关文字信息 代码&#xff1a; <!DOCTYPE> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>单值专题图</title>…

[剑指Offer] 25.复杂链表的复制

1 /*2 struct RandomListNode {3 int label;4 struct RandomListNode *next, *random;5 RandomListNode(int x) :6 label(x), next(NULL), random(NULL) {7 }8 };9 */ 10 class Solution 11 { 12 public: 13 //在旧链表中创建新链表&#xff0…

Flask项目中应用七牛云存储

七牛云存储&#xff1a; https://developer.qiniu.com/kodo/sdk/1242/python 点击注册开通七牛开发者帐号 如果已有账号&#xff0c;直接登录七牛开发者后台&#xff0c;点击这里查看 Access Key 和 Secret Key pip install qiniu q Auth(Access Key,Secret Key) b…

异常检测算法之IForest

前言 IForest即孤立森林&#xff0c;可以用于做异常检测。一句话总结IForest做异常检测的原理&#xff1a;异常点密度小&#xff0c;基于树模型容易被一下切割出来&#xff0c;正常值密度大&#xff0c;需要切割多次才能得到目标值。 原理 iForest算法得益于随机森林的思想&…

用c#编写爬虫在marinetraffic下载船仅仅图片

近期在做船仅仅识别方面的事情&#xff0c;须要大量的正样本来训练adaboost分类器。于是到marinetraffic这个站点上下载船仅仅图片。写个爬虫来自己主动下载显然非常方便。 站点特点 在介绍爬虫之前首先了解一下marinetraffic这个站点的一些特点&#xff1a; 1. 会定期检測爬虫…

异常检测算法之LOF

前言&#xff1a; LOF&#xff1a;Local outlier factor&#xff0c;即局部异常因子。LOF主要是通过比较每个点p和其邻域点的密度来判断该点是否为异常点&#xff0c;如果点p的密度越低&#xff0c;越可能被认定是异常点。至于密度&#xff0c;是通过点之间的距离来计算的&…

Android属性动画进阶用法

2019独角兽企业重金招聘Python工程师标准>>> 在上周二文章中介绍补间动画缺点的时候有提到过&#xff0c;补间动画是只能对View对象进行动画操作的。而属性动画就不再受这个限制&#xff0c;它可以对任意对象进行动画操作。那么大家应该还记得之前我举的一个例子&am…

5.3linux下C语言socket网络编程简例

原创文章&#xff0c;转载请注明转载字样和出处&#xff0c;谢谢&#xff01; 这里给出在Linux下的简单socket网络编程的实例&#xff0c;使用tcp协议进行通信&#xff0c;服务端进行监听&#xff0c;在收到客户端的连接后&#xff0c;发送数据给客户端&#xff1b;客户端在接受…

异常检测算法之HBOS

前言 HBOS&#xff08;Histogram-based Outlier Score&#xff09;核心思想&#xff1a;将样本按照特征分成多个区间&#xff0c;样本数少的区间是异常值的概率大。 原理 该方法为每一个样本进行异常评分&#xff0c;评分越高越可能是异常点。评分模型为&#xff1a; 假设样…

字典和json 的区别 和转换

前言&#xff1a;字典和json非常像。接下来比较一下两者的异同 先看一下字典的写法&#xff1a; a {a:1,b:2,c:3} 再看一下json的写法&#xff1a; {"studentInfo":{"id":123456,"stu_name":"Dorra"} } 从形式上看&#xff0c;都是…

easyui动态显示和隐藏表头

为什么80%的码农都做不了架构师&#xff1f;>>> var _bt{date:日期,subtime:填写时间,xz:小组,uname:操作人,qdbh:渠道编号,mt:媒体,zh:账户,sjd:时间段,tfwz:投放位置,tfh:投放号,td:团队,sjje:实际金额,jxs:进线数,cb:成本,yxzyjx:有效资源进线,yxzyl:有效资源率…

物联网

如果要说未来什么技术正在或将彻底改变人类生活、工作和娱乐的方式&#xff0c;那必须是物联网。小到各种可穿戴产品&#xff0c;大到汽车、工厂和楼宇&#xff0c;物联网能使一切设备互联并具备智慧。物联网也正改变着产业的格局&#xff0c;索尼、夏普、东芝等日本传统电子设…

Postico —— OS X 上的免费 PostgreSQL 客户端

Postico 是 OS X 下的一个 PostgreSQL 客户端管理工具。要求 OS X 10.8 或者更新版本。 文章转载自 开源中国社区 [http://www.oschina.net]

hdu 1760 A New Tetris Game(搜索博弈)

题目链接&#xff1a;hdu 1760 A New Tetris Game 题意&#xff1a; 给你一个矩阵&#xff0c;0表示可以放格子&#xff0c;现在给你2*2的格子&#xff0c;lele先放&#xff0c;问是否能赢。 题解&#xff1a; 爆搜。具体看代码 1 #include<bits/stdc.h>2 #define F(i,a,…

flask-restful接口

同flask一样&#xff0c;flask-restful同样支持返回任一迭代器&#xff0c;它将会被转换成一个包含原始 Flask 响应对象的响应&#xff1a; class ArticleApi(Resource):def get(self):return {"hello":"world"},201&#xff0c;{"course":&quo…

Django中的F对象和Q对象

F对象 可以获取到自己的属性值实现自己的属性自己的属性关联的复杂条件支持运算 Q对象 Q对象实际上是对条件的一个封装封装后支持逻辑运算与或非 &|~ 支持嵌套 例子 from django.db.models import Max, Avg, F, Q from django.http import HttpResponse from django.s…

Django模型关系

模型关系 1:1 一对一 &#xff08;一个身份证对应一个驾照&#xff09; 是使用外键唯一约束实现的对应最多只能有一个我们通常会在从表中声明关系 主表&#xff0c;从表 主表数据删除&#xff0c;从表数据级联删除从表数据删除&#xff0c;主表不受影响谁声明关系&#xff0c…

Android常用开源项目

Android常用开源项目 Android 2014-05-23 16:39:43 发布您的评价: 4.3 收藏 24收藏Android开源项目第一篇——个性化控件(View)篇包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、其他Android开源项目第二篇——工具库…