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

时间：2017-11-04 00:15:19 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：tps 内容 javascrip 定义 mis ges des img 提前

用url_for加载静态文件
1. <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
2. 子模板继承父模板
  1. {% extends ‘base.html’ %}
3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
  1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
  2. {% block head %}{% endblock %}
  3. {% block main %}{% endblock %}
4. 子模板中写代码实现自己的需求。block
  1. {% block title %}登录{% endblock %}
首页、登录页、注册页都按上述步骤改写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}霓虹 - 点击打开你的视野{% endblock %}</title>
    {% block head %}
    <link rel="stylesheet" href="../static/css/base.css" type="text/css">
    <script src="../static/js/base.js"></script>
    {% endblock %}
</head>
<body id="myBody">
    {% block main %}
<nav>
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#search">搜索</a></li>
  <li><input class="find"type="text"name="search"></li>
　<li style="float:right"><a class="active" href="#about">联系我们</a></li>
  <li style="float:right"><a class="active" href="#regist">注册</a></li>
  <li style="float:right"><a class="active" href="#login">登录</a></li>
</ul>
</nav>
<div class="area"></div>
<div class="area1">
    <div class="img">
        <a href="https://www.zhihu.com/question/28715237/answer/83938634"><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509619400048&di=0a3de93d08ed7737aef765d7d7605649&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fbj%2Fpics%2Fhv1%2F35%2F44%2F2049%2F133247480.png"></a>
        <div class="desc"><a href="https://www.zhihu.com/question/28715237/answer/83938634">日本的鲤鱼旗有什么含义？</a></div>
    </div>
    <div class="img">
        <a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0">
            <img src="http://www.sxdaily.com.cn/NMediaFile/2015/0307/SXRB201503070810000126303204969.jpg"></a>
        <div class="desc"><a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0">细品寿司的前世今生</a></div>
    </div>
</div>
    {% endblock %}
</body>
<footer>
     <div class="footer_box">
        Copyright@丝滑酱
     </div>
</footer>
</html>

#login登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% extends‘base.html‘ %}
    <title>{% block title %}霓虹 - 点击打开你的视野{% endblock %}</title>
    {% block head %}
    <link href="../static/css/login.css" rel="stylesheet" type="text/css">
    <script type=‘text/javascript‘ src=‘../static/js/login.js‘></script>
    {% endblock %}
</head>
<body>
    {% block main %}
<div class="box">
   <h1>(????)??</h1>
    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入用户名" style="width:300px">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码" style="width:300px">
    </div>
    <div id="error_box"><br></div>
    <input type="checkbox"value="true"><span>记住我</span> <a href="">忘记密码</a><br><br>
    <div class="input_box">
        <button class="button"onclick="fnLogin()">登录</button>
     </div>
</div>
    {% endblock %}
</body>
</html>

#注册页

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends‘base.html‘ %}
    <meta charset="UTF-8">
    <title>% block title %}霓虹 - 点击打开你的视野{% endblock %}</title>
    {% block head %}
    <link href="../static/css/login.css" rel="stylesheet" type="text/css">
    <script type=‘text/javascript‘ src=‘../static/js/login.js‘></script>
    {% endblock %}
</head>
<body>
    {% block main %}
<div class="box">
   <h1>-快到碗里来-</h1>
    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入用户名" style="width:300px">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码" style="width:300px">
    </div>
    <div id="error_box"><br></div>
    <input type="checkbox"value="true"><span>记住我</span> <a href="">忘记密码</a><br><br>
    <div class="input_box">
        <button class="button"onclick="fnLogin()">注册</button>
     </div>
</div>
    {% endblock %}
</body>
</html>

技术分享

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

标签：tps 内容 javascrip 定义 mis ges des img 提前

原文地址：http://www.cnblogs.com/hegui/p/7780795.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行