苏州建网站必去苏州聚尚网络,公司做网站 分录,企业办公软件排名,网站域名销售很久之前用过flask#xff0c;那时候是跟着教程#xff0c;教程怎么做我就怎么做#xff0c;没有仔细考虑过。
现在是全靠文档和搜索一步一步搭建#xff0c;忘了很多东西#xff0c;就碰了很多壁#xff0c;浅浅记录一下子。 1.Jinja2的模板继承#xff0c;是指抽出每…很久之前用过flask那时候是跟着教程教程怎么做我就怎么做没有仔细考虑过。
现在是全靠文档和搜索一步一步搭建忘了很多东西就碰了很多壁浅浅记录一下子。 1.Jinja2的模板继承是指抽出每个网页相同的部分作为base然后以base为底在此基础上进行不同页面的展示。
比如我一个网页设置了导航栏和背景其他页面都是以此为基础显示不同内容但是我又不想都写在同一个网页上显得杂乱故此分离开来应该是这样使用
base.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titlemyWeb/titlelink relstylesheet typetext/css href../static/css/base.csslink relstylesheet typetext/css href../static/css/bootstrap.cssscript src../static/js/jquery.min.js/scriptscript typetext/javascript src../static/js/daterangepicker.js/scriptscript typetext/javascript src../static/js/bootstrap.bundle.js/script
{% block head %}{% endblock %}
/head
body
nav classnavbar navbar-expand-lg bg-body-tertiarydiv classcontainer-fluida classnavbar-brand href#Navbar/abutton classnavbar-toggler typebutton data-bs-togglecollapse data-bs-target#navbarNav aria-controlsnavbarNav aria-expandedfalse aria-labelToggle navigationspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarNavul classnavbar-nav idmyTabli classnav-itema classnav-link active aria-currentpage href/Home/a/lili classnav-itema classnav-link href/page1page1/a/lili classnav-itema classnav-link href/page2page2/a/lili classnav-itema classnav-link href/page3page3/a/li/ul/div/div
/nav
{% block content %}{% endblock %}
/body
script
$(document).ready(function () {$(#myTab).find(li).each(function () {var a $(this).find(a:first)[0];console.log(location.pathname)if ($(a).attr(href) location.pathname) {$(a).addClass(active);} else {$(a).removeClass(active);}});
});
/script
/html
可以注意到在这里我设置了两个代码块的区域分别是block head和block content这两个地方就是用于其他页面进行继承的如果要引入只在子页面会用到的js之类可以在block head里面添加而页面主体显示部分则是在block content里面当然我看别人的还把title也用block包裹方便子页面改名我的业务没有相关需求就没改。 home.html
{% extends base.html %}{% block content%}
pthis is home page/p
{% endblock %} page1.html
{% extends base.html %}{% block content%}
pthis is page1/p
{% endblock %}
其他的以此类推这样就不需要重新写一次导航栏也能把不同页面分在不同的HTML文件当中了。
我之前踩的坑主要在于以为不同页面就要继承不同的代码块在base定义了很多比如block home, block page1, block page2这种然后再继承后来发现显示出问题了才醒悟过来既然显示的地方都一样就没必要新建那么多都是替换同一块区域就行了
