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

Posted 2020-10-13 blackboardf

tags:

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

用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>index</title>
    <link rel="stylesheet" type="text/css" href="../static/css/index.css">
    <script src="../static/js/index.js"></script>
{% block head %}
{% endblock %}
</head>
<body id="myBody">
<img id="on_off" onclick="mySwitch()" src="../static/image/day.PNG" width="50px">
<div id="nav-main" style="zoom: 1.1125;">
  <div id="search" >
    <div id="searchout">
      <div id="search_type" >
          <div class="search_top_type" type="show"><a href="{{ url_for("home")}}" >首页</a></div>
          <div class="search_top_type" type="news"><a href="{{ url_for("login")}}" >登录</a></div>
          <div class="search_top_type" type="video"><a href="{{ url_for("signin")}}" >注册</a></div>
          <div class="search_top_type" type="music"><a href="">设置</a></div>
      </div>
      </div>
    </div>
  </div>
</div>
{% block main %}
{% endblock %}
</body>
</html>

首页

{% extends‘index.html‘ %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/home.css‘)}}" type="text/css">
{% endblock %}
{% block main %}
<body id="myBody">
<div id="nav-main" style="zoom: 1.1125;">
  <div id="search" >
    <div id="searchout">
      <div id="search_type" ></div>
      <div id="searchform">
        <div id="search_option" > </div>
        <input type="text" id="search_input" name="search">
        <div id="searchbutton"></div>
      </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
</body>
</html>

登录页

{% extends‘index.html‘ %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/logsign.css‘)}}" type="text/css">
    <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script>
{% endblock %}
{% block main %}
<body>
<div class="pen-title">
  <h1>登 录</h1>
</div>
<div class="from">
    <h2>请登录您的账号</h2>
    <div class="input_box">
       <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <br>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="login_box">
        <button onclick="fnLogin()">登录</button>
    </div>
</div>
{% endblock %}
</body>
</html>

注册页

{% extends‘index.html‘ %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/logsign.css‘)}}" type="text/css">
    <script src="{{ url_for(‘static‘,filename=‘js/signin.js‘) }}"></script>
{% endblock %}
{% block main %}
<body>
<div class="pen-title">
  <h1>注 册</h1>
</div>
<div class="from">
    <h2>请进行注册</h2>
    <div class="input_box">
       <input id="uname" type="text" placeholder="请设置您的用户名">
    </div>
    <br>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div class="input_box">
        <input id="aupass" type="password" placeholder="请再次输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="login_box">
        <button onclick="fnLogin()">注册</button>
    </div>
</div>
{% endblock %}
</body>
</html>

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

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