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

Posted 0104鲍珊珊

tags:

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

  1. 用url_for加载静态文件
    1. <script src="{{ url_for(\'static\',filename=\'js/login.js\') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    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 %}
  3. 首页、登录页、注册页都按上述步骤改写。                                                                                                                                                                                       父模板 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>{% block title %}{% endblock %}base</title>
    <link rel="stylesheet" type="text/css" href="../static/css/shouye.css" type="text/css">
     <script src="../static/js/shouye.js"></script>
    <manhua target="_blank"/>
</head>
 {% block head %}{% endblock %}
<body id="myBody">

<nav>
    <img src="http://news.u17i.com/images/header_bg/header_bg_1508753122_9zUfjgQKJw7A.jpg"><br>
    <a href="http://127.0.0.1:5000/manhua/">首页</a>
    <a href="">下载</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="http://127.0.0.1:5000/login">登录</a>
    <a href="http://127.0.0.1:5000/register">注册</a>

  <img id="on_off" onclick="mySwitch()" src="../static/images/on.jpg" width="80px">
    </nav>
{% block main %}
{% endblock %}

</body>
</html>

    首页

    {% extends\'shouye.html\' %}
{% block title %}
   manhua
{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="../static/css/manhua.css" type="text/css">
     <script src="../static/js/manhua.js"></script>
    <manhua target="_blank"/>
{% endblock %}
{% block main %}
<body id="myBody">


<div>
    <div class="katong">
        <a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin" >
            <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=bd7d3d834734970a537e187df4a3baad/50da81cb39dbb6fd47c8108a0f24ab18962b378e.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin">天空之城</a></div>
    </div>
    <div class="katong">
        <a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">
            <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=0000a3f3583d26973ade000f3492d99e/242dd42a2834349ba3d7f0bcc0ea15ce36d3be32.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">你的名字</a></div>
    </div>
    <div class="katong">
        <a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">
            <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=e1f375ca56da81cb5aeb8b9f330fbb73/aec379310a55b319a7591f4b44a98226cffc176f.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">哆啦A梦</a></div>
    </div>
</div>
<div class="clearfloat">
    <img src="http://p0.so.qhimgs1.com/t01b0bcf7da772c3e8c.jpg" width="500" height="500">

    {% endblock %}
</div>>
</body>
</html>

    登陆

    {% extends\'shouye.html\' %}
{% block title %}
    Login
{% endblock %}
{% block head %}
    <link rel="stylesheet"type="text/css"href="..\\static\\css\\denglu.css">
    <script src="..\\static\\js\\denglu.js"></script>
{% endblock %}
{% block main %}
<body>
    <div class="b1" >
        <div class="s1" ><h3>用户登录/LOGIN </h3></div>
        <div class="b2" >
        户名：<input id="name" type="text"placeholder="请输入用户名"><br>
        密码：<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
    <div class="s2" >
         <button onclick="myLogin()">登录</button>
         <button type="button" onclick=window.alert("是否取消登录")>取消</button>
          <label for="remember_me" style="padding: 0;">Remember me?</label>
          <input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me"/>
          <div class="design">
              <p>Design by ss</p>
         </div>

    </div>
        {% endblock %}
</body>
</html>

    注册

    {% extends\'shouye.html\' %}
{% block title %}
    register
{% endblock %}
    {% block head %}
    <link rel="stylesheet"type="text/css"href="..\\static\\css\\zhuce.css">
    <script src="..\\static\\js\\zhuce.js"></script>
{% endblock %}
{% block main %}
<body>
    <div class="b1" >
        <div class="s1" ><h3>注册/ENROLL </h3></div>
        <div class="b2" >

            请输入账号:　<input id="name" type="text" placeholder="write down your name"><br>
            请输入密码:　<input id="password" type="password" placeholder="write down your PIN"><br>
            再输入密码:　<input id="password2" type="password2" placeholder="write down your PIN"><br>
        </div>

        <div id="error_box"><br></div>


    <div class="s2" >
         <button onclick="myLogin()">注册</button>
         <button type="button" onclick=window.alert("是否取消注册")>取消</button>
          <label for="remember_me" style="padding: 0;">Remember me?</label>
          <input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me"/>
          <div class="design">
              <p>Design by ss</p>
         </div>
</div>
    </div>
 </body>
{% endblock %}
</html>

    py

    from flask import Flask,render_template

app = Flask(__name__)

@app.route(\'/\')
def index():
    return  render_template(\'shouye.html\')
@app.route(   \'/manhua/\')
def manhua():
    return  render_template(\'manhua.html\')
@app.route(  \'/login/\')
def login():
    return render_template(\'denglu.html\')
@app.route(\'/register/\')
def register():
    return render_template(\'zhuce.html\')

     

以上是关于加载静态文件,父模板的继承和扩展的主要内容，如果未能解决你的问题，请参考以下文章

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

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

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

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

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

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