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

  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. 首页、登录页、注册页都按上述步骤改写。

bass父模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
<!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{url_for("static",filename="CSS/bass.css")}}" type="text/css" rel="stylesheet" charset="UTF-8">
{% block head %}{% endblock %}
</head>
<body class="body">
<!-- 顶部导航 -->
<nav class="navbar navbar-default" role="navigation">


    <ul class="nav nav-tabs">
        <li class="active"><a href={{ url_for("index") }}>首页</a></li>
        <li><a href="#">游戏中心</a></li>
        <li><a href="#">直播</a></li>
        <li><a href="#">周边</a></li>
        <li><a href="#">同人站</a></li>
        <li><a href="#">客户端</a></li>

        <ul class="nav navbar-nav navbar-right">
            <li><a href={{ url_for("register") }}><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href={{ url_for("login") }}><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            <li><a href={{ url_for("index") }}><img src="{{ url_for("static",filename="Img/90sheji.png") }}" style=" 30px "></a></li>
        </ul>
        <form class="navbar-form navbar-right" role="search">

            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">
                搜索
            </button>
        </form>
    </ul>

    </div>
    </div>
</nav>

{% block main %}{% endblock %}

<!-- 底部导航 -->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">友情链接</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"> 帮助中心</a></li>
            <li><a href="#"> 反馈论坛</a></li>
        </ul>
    </div>
    </div>
</nav>
</body>
</html>

首页：

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block head %}{% endblock %}

{% block main %}{% endblock %}

登陆：

{% extends "base.html" %}

{% block title %}登陆{% endblock %}

{% block head %}
<link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8">
<script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script>
{% endblock %}

{% block main %}
<div class="center-block" id="loginbox">
    <div class="panel panel-primary" id="loginbox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">登陆</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="id" placeholder="请输入用户名">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div id="error_box">
                <br>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住我
                </label>
            </div>
            <br>
            <label><input type="button" class="btn btn-default" onclick="Login()" value="登陆"></input></label>
        </form>
    </div>
</div>
{% endblock %}


</html>

注册：

{% extends "base.html" %}
{% block title %}注册{% endblock %}

{% block head %}
    <link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8">
    <script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script>
{% endblock %}

{% block main %}
<div class="center-block" id="zhucebox">
    <div class="panel panel-primary" id="zhucebox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">注册</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="zcid" placeholder="请输入用户名">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="zcpassword" placeholder="请设置密码">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="repassword" placeholder="请再次输入密码">
            </div>
            <div id="error_box1">
                <br>
            </div>
            <br>
            <label><input type="button" class="btn btn-default" value="注册" onclick="Zhuce()"></input></label>
        </form>
    </div>
</div>
{% endblock %}

 效果图：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Naiky/p/7787403.html