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

Posted 2020-10-13 鹤归

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了作业21-加载静态文件,父模板的继承和扩展相关的知识，希望对你有一定的参考价值。

用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-加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章

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