父文件:index.html
<!DOCTYPE html> <html lang="en"> <head> <title>{% block title %}Index{% endblock %}</title> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../static/css/index.css"> <script src="static/js/index.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!--导航栏--> <a class="navbar-brand" href="/"> {% block ico %}<img src="/static/images/ppl.jpg" alt="logo" style="width:50px;"> {% endblock %} </a> <!--<h2>胶囊</h2>--> <!--<p>胶囊导航:</p>--> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="/">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="/insert/" id="insert">insertPerson</a> </li> <li class="nav-item"> <a class="nav-link" href="/get1/">addAccount</a> </li> <li class="nav-item"> <a class="nav-link" href="/search1/">SearchPerson</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">SearchPerson</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">注册/登录</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">注册</a> <a class="dropdown-item" href="#">登录</a> <a class="dropdown-item" href="#">登出</a></div> </li> </ul> </nav> {% block index %} <br> <div id="demo" class="carousel slide" data-ride="carousel"> <!-- 指示符 --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- 轮播图片 --> <div class="carousel-inner" > <div class="carousel-item active"> <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width:100%"> </div> <div class="carousel-item"> <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" style="width:100%"> </div> <div class="carousel-item"> <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" style="width:100%"> </div> </div> <!-- 左右切换按钮 --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <div class="foot-box"></div> {% endblock %} <!--实现鼠标滑过导航栏增加active类属性--> <script> $(document).ready(function(){ $(‘.nav-link‘).hover( function(){ $(this).addClass(‘active‘); }, function(){ $(this).removeClass(‘active‘); } ); }); </script> </body> </html>
子文件-继承自index.html
{% extends "index.html" %} {% block title %}Insert{% endblock %} {% block index %} <!--<form action="/do/" method="post">--> <!--姓名:<input type="text" name="username"><br>--> <!--年龄:<input type="text" name="userage"><br>--> <!--<input type="reset">--> <!--<button type="submit">提交</button>--> <!--</form>--> <div class="container"> <br> <a href="#demo" class="btn btn-primary" data-toggle="collapse">插入新人信息</a> <div id="demo" class="collapse"> <form action="/do/" method="post"> <div class="form-group"> <label for="user">Username:</label> <input type="text" class="form-control" id="user" name="username" placeholder="Enter Username"> </div> <div class="form-group"> <label for="age">Userage:</label> <input type="password" class="form-control" id="age" name="userage" placeholder="Enter Userage"> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> {% endblock %}
注意!!!
在index.html文件中的
{% block ico %}<img src="/static/images/ppl.jpg" alt="logo" style="width:50px;"> {% endblock %}
中
src="/static/images/ppl.jpg" 和 src="static/images/ppl.jpg" 完全不一样的效果,前者被继承后子页面的logo可正常显示,后者则会出现图片无法加载的问题。
因为在settings中我们已经设置了静态文件收集路径,在base模板中索引静态文件的时候需要从static根路径下进行索引,故需要加"/",此坑难发现,还需多学习。
原文地址:https://www.cnblogs.com/phyger/p/9480672.html
时间: 2024-09-29 22:14:17