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

一、用url_for加载静态文件

<script src="{{ url_for('static',filename='js/login.js') }}"></script>
flask 从static文件夹开始寻找
可用于加载css, js, image文件

二、继承和扩展

把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
1. 子模板继承父模板
  1. {% extends 'base.html’ %}
2. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
  1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
  2. {% block head %}{% endblock %}
  3. {% block main %}{% endblock %}
3. 子模板中写代码实现自己的需求。block
  1. {% block title %}登录{% endblock %}

三、首页、登录页、注册页都按上述步骤改写。

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>首页{% block denglutitle %}{% endblock %}{% block zhucetitle %}{% endblock %}{% block tupiantitle %}{% endblock %}</title><link rel="stylesheet" href="{{ url_for('static',filename='index.css') }}"><script src="{{ url_for('static',filename='js/index.js') }}"></script>
{% block dengluhead %}{% endblock %}
{% block zhucehead %}{% endblock %}
{% block tupianhead %}{% endblock %}
</head>
<body id="mybody"><nav class="navbar navbar-inverse" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="{{ url_for('index') }}">首页</a></div><div><ul class="nav navbar-nav"><li><a href="{{ url_for('login') }}" onclick="">登陆</a></li><li><a href="{{ url_for('zhuce') }}" onclick="">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">设置 <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">收藏</a></li><li><a href="#">分享</a></li><li><a href="#">搜索</a></li><li class="divider"></li><li><a href="#">点赞</a></li></ul></li><li><a href="#">||</a></li></ul></div><div style="float: left"><img id="myonoff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="width:40px" ></div><div><ul class="nav navbar-nav"><li><a href="{{ url_for('tupian') }}" onclick="">图片区</a></li></ul><ul class="nav navbar-nav"><li><a href="{{ url_for('fabu') }}" onclick="">发布</a></li></ul></div><div><input type="text" name="user" id="user" placeholder="请输入内容"><input type="button" value="搜索" class="btn btn-success" onclick=""></div></div></nav><nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"><ul class="nav navbar-nav"><li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li><li style="color: bisque;">版权@misaki</li></ul>
</nav>{% block denglubody %}{% endblock %}
{% block zhucebody %}{% endblock %}
{% block tupianbody %}{% endblock %}
</body>
</html>

{% extends 'index.html' %}{% block denglutitle %}登陆{% endblock %}
{% block dengluhead %}<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}"><script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block denglubody %}<div id="container" style="margin-left: auto;margin-right: auto"><div id="header"><h2 align="center">请登录</h2></div><div id="content"><form>Username：<input type="text" name="user" id="user" placeholder="请输入用户名"><br>Password：<input type="password" name="pass" id="pass" placeholder="请输入密码"><br><input type="radio" name="r1" id="r1" value="stu">student<input type="radio" name="r2" id="r2" value="tea">teacher<br><input type="checkbox" name="c1" id="c1" value="">记住我<br><div id="error_box"><br></div><input type="button" value="login" onclick="fnLogin()">&nbsp<button><a href="http://localhost:63342/untitled1/templates/lin2.html?_ijt=trea96c8krh54963ip8s1c8rso">registration</a></button><a href="">忘记密码？</a></form></div><div id="footer"><p align="right">版权@misaki</p></div></div>
{% endblock %}

{% extends 'index.html' %}{% block zhucetitle %}注册{% endblock %}
{% block zhucehead %}<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}"><script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block zhucebody %}<div id="container" style="margin-left: auto;margin-right: auto"><div id="header"><h2 align="center">注册</h2></div><div id="content"><form><p align="center">Username：</p><p align="center"><input type="text" name="user" id="user" placeholder="请输入用户名"></p><p align="center">Password：</p><p align="center"><input type="password" name="pass" id="pass" placeholder="请输入密码"></p><p align="center">Lnput again：</p><p align="center"><input type="password" name="again" id="again" placeholder="再次输入密码"></p><p align="center"><input type="radio" name="r1" id="r1" value="stu">student<input type="radio" name="r2" id="r2" value="tea">teacher</p><div id="error_box"><br></div><p align="center"><input type="button" value="registration" onclick="fnRegistration()"></p></form></div><div id="footer"><p align="right">版权@misaki</p></div></div>
{% endblock %}

转载于:https://www.cnblogs.com/misakihong/p/7804167.html

加载静态文件,父模板的继承和扩展相关推荐

加载静态文件,父模板的继承和扩展(2017.11.3)
用url_for加载静态文件 <script src="{{ url_for('static',filename='js/login.js') }}"></scr ...
作业21-加载静态文件,父模板的继承和扩展
用url_for加载静态文件 <script src="{{ url_for('static',filename='js/login.js') }}"></scr ...
Django加载静态文件
方法一: 1.在app目录中创建static 目录,并在该目录下创建存储css,img,js的子目录． 2.在相应的目录下创建相对应的静态文件. static/css/mystyle.css, sta ...
Django 无法加载静态文件（js,css,image）解决办法
Django 无法加载静态文件(js,css,image)解决办法按照这个配置成功: https://jingyan.baidu.com/article/8cdccae92ffc16315413cd ...
python bottle web框架上传静态文件与加载静态文件
文章目录 1 上传文件 2 加载静态文件 1 上传文件 # 上传文件 @route('/upload', method=['POST','GET']) def upload():f = request ...
spring boot 加载静态文件
spring boot 加载静态文件 @Slf4j @Configuration public class WebMvcConfig extends WebMvcConfigurationSuppor ...
在python3中如何加载静态文件详版步骤
在一个网页中,不仅仅只有一个`html`骨架,还需要`css`样式文件,`js`执行文件以及一些图片等.因此在`DTL`中加载静态文件是一个必须要解决的问题.在`DTL`中,使用`static`标签来 ...
iris web框架无法加载静态文件
必须得marker一下自己的愚蠢前段时间写beego加载静态文件那可是挺方便得, 可就在今天,转写iris却无法加载静态文件,可把我差点逼疯了,自己竟然这么**. 搜百度吧,又没有找到一个合适得接 ...
Asp.NET Core 加载静态文件404
找了好多天的前端模板,终于心心念念的引入了自己的程序,正满心欢喜的运行起来的时候,竟然只有进入默认是首页的时候 css,js,img成功引入. 而当我发起任意一个请求的时候,哪怕是在用URL,页面的样 ...

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

加载静态文件,父模板的继承和扩展相关推荐

最新文章

热门文章