當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

加载静态文件,父模板的继承和扩展(2017.11.3)

發(fā)布時(shí)間：2025/7/25 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了加载静态文件,父模板的继承和扩展(2017.11.3) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

用url_for加載靜態(tài)文件

flask 從static文件夾開(kāi)始尋找

可用于加載css, js, image文件

繼承和擴(kuò)展

把一些公共的代碼放在父模板中，避免每個(gè)模板寫同樣的內(nèi)容。base.html

子模板繼承父模板

? {% extends 'base.html’ %}

父模板提前定義好子模板可以實(shí)現(xiàn)一些自己需求的位置及名稱。block

<title>{% block title %}{% endblock %}-MIS問(wèn)答平臺(tái)</title>

{% block head %}{% endblock %}

{% block main %}{% endblock %}

子模板中寫代碼實(shí)現(xiàn)自己的需求。block

? {% block title %}登錄{% endblock %}

首頁(yè)、登錄頁(yè)、注冊(cè)頁(yè)都按上述步驟改寫。

連接后端：

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/') def base():return render_template('base.html')@app.route('/login/') def login():return render_template('login.html')@app.route('/regist/') def regist():return render_template('regist.html')@app.route('/zimoban/') def zimoban():return render_template('zimoban.html')@app.route('/zzimoban/') def zzimoban():return render_template('zzimoban.html')if __name__ == '__main__':app.run(debug=True)

base.html:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>{% block tite %}{% endblock %}搜索百科</title><script src="../static/JS/李易峰.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="../static/css/liyifeng.css"><link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">{% block head %}{% endblock %} </head> <body id="myBody" bgcolor="#e9967a"> <nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="https://www.4493.com/star/section?fenlei=1&quyu=1&sex=1">演員列表</a></div><div><form><ul class="nav navbar-nav navbar-left"><li class="dropdown"><a href="{{ url_for('base') }}"class="dropdown-toggle" data-toggle="dropdown">首頁(yè)</a></li></ul></form><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><a href="{{ url_for('login') }}"><button type="button" class="btn btn-default">登錄</button></a><a href="{{ url_for('regist') }}"><button type="button" class="btn btn-default">注冊(cè)</button></a><form class="navbar-form navbar-left" role="search"><a href="https://baike.baidu.com/help" class="dropdown-toggle"><button type="button" class="btn btn-default">幫助</button></a></form><form class="navbar-form navbar-right" role="search"><a href="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><button type="button" class="btn btn-default">送花</button></a></form></form></div></div> </nav> {% block main %} {% endblock %} <img id="myOnOff" οnclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="10px"> <img src="{{ url_for('static',filename='image/image.jpeg') }}" alt="" width="30px"><a href="https://baike.so.com/create/edit/?eid=4909310&sid=5127865"><img src="https://p1.ssl.qhmsg.com/t01d08b6f07a9225737.png" style="width: 200px"></a> <div class="label"><form method="get"><label>中國(guó)內(nèi)地男明星人氣人氣排行榜:</label><select name="" οnchange="javascript:if (this.options[this.selectedIndex].value != '')window.open(this.options[this.selectedIndex].value);this.options[0].selected;"><a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718"><option value="0">李易峰</option></a><a href="https://baike.baidu.com/item/%E6%9D%A8%E6%B4%8B/11573"><option value="1">楊洋</option></a><a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718"><option value="1">胡歌</option></a></select></form> </div> <h4 class="textblue">代表作品：</h4> <div class="recommend"><div class="img"><h5><a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"></a></h5><img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=ccb6b48247166d222c7a1dc6274a6292/48540923dd54564e0b15d770b7de9c82d1584f02.jpg"></a><div class="desc"><a href="https://baike.baidu.com/item/%E5%8F%A4%E5%89%91%E5%A5%87%E8%B0%AD/5016869">古劍奇譚</a></div></div><div class="img"><a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=1c3a441f8a025aafc73f76999a84c001/b21bb051f8198618fb53ed5b42ed2e738ad4e6dd.jpg"></a><div class="desc"><a href="https://baike.baidu.com/item/%E9%BA%BB%E9%9B%80/17612774">麻雀</a></div></div><div class="img"><a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=06534c58b0fd5266b3263446ca71fc4e/8326cffc1e178a823e993f13f003738da877e8d8.jpg"></a><div class="desc"><a href="https://baike.baidu.com/item/%E6%A0%80%E5%AD%90%E8%8A%B1%E5%BC%80/15839944">梔子花開(kāi)</a></div></div><div class="img"><a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=e95988cb652762d09433acedc185639f/bf096b63f6246b604c86859cedf81a4c500fa249.jpg"></a><div class="desc"><a href="https://baike.baidu.com/item/%E8%80%81%E7%82%AE%E5%84%BF/15891954">老炮兒</a></div></div><br> </div> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="http://music.baidu.com/artist/1370">音樂(lè)作品</a></div><div><ul class="nav navbar-nav"><li class="active"><a href="http://music.baidu.com/?fr=baikePC">熱門歌曲</a></li><li><a href="https://baike.baidu.com/item/%E6%98%93%E5%B3%B0%E6%83%85%E4%B9%A6/15815910">專輯</a></li><li class="active"><ahref="http://bd.kuwo.cn/mingxing/%E6%9D%8E%E6%98%93%E5%B3%B0.htm?from=baidu">單曲</a></li></li></ul></div></div> </nav> <footer><div class="foot"><div><a href="#"> 點(diǎn)我呀</a> · <a href="#"> 加入我們</a> · <a href="#"> 歌曲或歌名 </a> · <a href="#">幫助中心</a> · <ahref="#">合作伙伴</a></div><div>中國(guó)大陸男演員</div></div> </footer> </body> </html>

登錄：

{% extends 'base.html' %} {% block title %}登錄{% endblock %}{% block head %}<link rel="stylesheet" href="{{ url_for('static',filename='css/20.css') }}" type="text/css"><script src="{{ url_for('static',filename='JS/JS30.js') }}"></script> {% endblock %}{% block main %}<div class="box"><h1>登錄</h1><div class="input_box">帳號(hào)：<input id="name" type="text" placeholder="請(qǐng)輸入用戶名"></div><div class="input_box">密碼：<input id="pass" type="password" placeholder="請(qǐng)輸入密碼"></div><div id="error_box"><br></div><div class="input_box"><button οnclick="fnLogin()">login</button><a class="link-forget cl-link-blue" href="get_password.html">忘記密碼</a><br><a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="新用戶注冊(cè)"></a></div></div> {% endblock %}

注冊(cè)：

{% extends 'base.html' %} {% block title %}注冊(cè){% endblock %}{% block head %}<link rel="stylesheet" href="{{ url_for('static',filename='css/20.css') }}" type="text/css"><script src="{{ url_for('static',filename='JS/注冊(cè).js') }}"></script> {% endblock %}{% block main %}<div class="box"><h1>注冊(cè)</h1><div class="input_box">注冊(cè)帳號(hào)：<input id="zcuname" type="text" placeholder="請(qǐng)輸入用戶名"></div><div class="input_box">注冊(cè)密碼：<input id="zcupassword1" type="password" placeholder="請(qǐng)輸入密碼"></div><div class="input_box">再次輸入:<input id="zcupassword2" type="password" placeholder="請(qǐng)?jiān)俅屋斎朊艽a"></div><div id="zcerror_box"><br></div><div class="input_box"><button οnclick="fnEnroll()">立即注冊(cè)</button><a href="login.html">已注冊(cè)</a></div></div> {% endblock %}

結(jié)果：

轉(zhuǎn)載于:https://www.cnblogs.com/laidaili/p/7781063.html

總結(jié)

以上是生活随笔為你收集整理的加载静态文件,父模板的继承和扩展(2017.11.3)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Bean
下一篇： 2017 清北济南考前刷题Day 2 a