如：主页base.html中要引入index-list.html中的个性化的模块：
base.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>页面条记</title> <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="/css/woniunote.css"> <script type="text/javascript" src="/js/jquery-3.6.1.js"></script><script type="text/javascript" src="/js/bootstrap.js"></script><!--为了更好的兼容移动设备，利用CSS的适配功能 ,这样在转换成移动设备时，字体不会变小，会自适应宽度,user-scalable表示是否支持移动端绽放=yes/no默认是yes(场景app内页面可以禁止缩放，觉得是app本身的功能)--><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/> <!--@media表示设置屏幕的div最大宽度--> </head> <body> <div class="header"><div class="container" style="border: solid 0px red;"><div class="row"> <div class="col-5" style="padding-top: 8px"><img src="/img/logo.png" width="230"></div> <!--d-none是所有屏幕隐蔽；d-sm-none是大屏幕隐蔽； d-sm-block大屏幕显示 --><div class="col-7 d-none d-sm-block" style="text-align: right;padding-top: 20px"><h2>以蜗牛之名，行学习之实</h2></div> <div class="col-7 d-sm-none" style="text-align: right;padding-top: 22px"><h3>技能博客</h3></div> </div> </div></div><!--此处为要引入index-list.html的地方--> <!--个中block为关键字，而content为自定义的模块名称--> {%block content%}{%endblock%}</body></html>
index-list.html
{#将当前页面引入到index.html母版中#}{%extends 'base.html'%} {%block content%} <div class="menu"><div class="container" style="border: solid 0px red;"><nav class="navbar navbar-expand-lg navbar-dark menu-bar" style="background-color: #563d7c"> <a class="navbar-brand nav-link" href="#">快捷导航</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav menu-bar"><a class="nav-item nav-link" href="#">PHP开拓</a> <a class="nav-item nav-link" href="#">Java开拓</a> <a class="nav-item nav-link" href="#">Web前端</a> <a class="nav-item nav-link" href="#">Python开拓</a> <a class="nav-item nav-link" href="#">测试开拓</a> <a class="nav-item nav-link" href="#">数据科学</a> <a class="nav-item nav-link" href="#">网络案例</a> <a class="nav-item nav-link" href="#">蜗牛杂谈</a> </div><div class="navbar-nav ml-auto"> <a class="nav-item nav-link" href="#" data-toggle="modal" data-target="#mymodal">登录</a> <a class="nav-item nav-link" href="#">注册</a></div> </div></nav> </div>{%endblock%}
