{%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.pswp.cn/news/456319.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/456319.shtml
英文地址,請注明出處:http://en.pswp.cn/news/456319.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Vue.directive自定義指令

Vue除了內部指令&#xff0c;我們也可以定義一些屬于自己的指令&#xff0c;比如我們要定義一個v-diy的指令&#xff0c;作用就是讓文字變成紅色。 寫好了這個功能&#xff0c;我們現在就自己定義一個全局的指令。我們這里使用Vue.directive( ); html <div v-diy"color…

HTML5 SVG

SVG介紹1.什么是svgsvg指可伸縮矢量圖形&#xff08;Scalable Vector Graphics &#xff09;svg用來定義用于網絡的基于矢量圖形svg使用XML格式定義圖形svg圖像在放大或改變尺寸的情況下其圖形質量不會有損失svg是網為王聯盟的標準2.svg的優勢svg圖像可通過文本編輯器來創建和修…

運用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算法得益于隨機森林的思想&…

JavaScript - 動態數據

1、使用ajax進行數據的請求 function getData(params){$.ajax({type: "POST", //提交方式data: "{params}", //請求參數url:, //請求接口contentType: "application/text;charsetutf-8",async: false, //是否同步dataType: &quo…

用c#編寫爬蟲在marinetraffic下載船僅僅圖片

近期在做船僅僅識別方面的事情&#xff0c;須要大量的正樣本來訓練adaboost分類器。于是到marinetraffic這個站點上下載船僅僅圖片。寫個爬蟲來自己主動下載顯然非常方便。 站點特點 在介紹爬蟲之前首先了解一下marinetraffic這個站點的一些特點&#xff1a; 1. 會定期檢測爬蟲…

發送手機驗證碼通過調用第三方網易云信API(flask項目)

一、 獲取驗證碼&#xff1a; 1. 輸入手機號碼 2. 通過ajax發送請求 3. 后端&#xff1a; 獲取手機號碼 使用requests向第三方的服務端&#xff08;網易云信&#xff09;發送請求 官方文檔 https://dev.yunxin.163.com/docs/product/%E7%9F%AD%E4%BF%A1/%E7%9F…

異常檢測算法之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;客戶端在接受…

parser.add_argument驗證格式

article_bp Blueprint(article, __name__, url_prefix/api) api Api(article_bp) parser reqparse.RequestParser() parser.add_argument(name, typestr, help必須填寫名稱, requiredTrue) channel_fields { id: fields.Integer, cname: fields.String } clas…

異常檢測算法之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;都是…

Struts2的工作原理及工作流程

眾所周知&#xff0c;Struts2是個非常優秀的開源框架&#xff0c;我們能用Struts2框架進行開發&#xff0c;同時能 快速搭建好一個Struts2框架&#xff0c;但我們是否能把Struts2框架的工作原理用語言表達清楚&#xff0c;你表達的原理不需要說出底層是怎么實現的&#xff0c;我…

正則表達式采坑

[a-zA-Z]匹配大小寫字符 \w 匹配字母、數字、下劃線 {5,7} 表示前面的字符&#xff08;即&#xff1a;\w&#xff09;必須至少出現 5 次最多出現 7 次. 合起來就是 >6 少于8個的字符 [a-zA-Z]\w{6,12} --------------》》 就是要輸入七位數到十三位&#x…

easyui動態顯示和隱藏表頭

為什么80%的碼農都做不了架構師&#xff1f;>>> var _bt{date:日期,subtime:填寫時間,xz:小組,uname:操作人,qdbh:渠道編號,mt:媒體,zh:賬戶,sjd:時間段,tfwz:投放位置,tfh:投放號,td:團隊,sjje:實際金額,jxs:進線數,cb:成本,yxzyjx:有效資源進線,yxzyl:有效資源率…