教程链接：
flask—模块继承 Link
我爱Flask之Flask模板继承(你想要的这都有！！！) Link （更加详细）
贴一下自己的代码：
<!DOCTYPE html><html><head><!-- Bootstrap style --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous"><link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css"><link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"><link href="../static/css/animate.min.css" rel="stylesheet"><link href="../static/css/aos.css" rel="stylesheet"><!-- Main style--><link href="../static/css/style.css" rel="stylesheet"><title>Document</title></head><body><!-- header --><header class="navbar-fixed-top"><nav><ul><li><a href="#about">About</a></li><li><a href="#experience">experience</a></li><li><a href="#projects">projects</a></li><li><a href="#contact">contact</a></li></ul></nav></header><!-- ./header --><!--重点在这里-->{% block content %}{% endblock %}<!-- jQuery --><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><!-- plugins --><script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script><!-- plotly js --><script src='https://cdn.plot.ly/plotly-latest.min.js'></script><!-- Local js --><script src="../static/js/plugins.js"></script><script src="../static/js/aos.js"></script><script src="../static/js/jquery.validate.min.js"></script><!-- main script --><script src="../static/js/custom.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script></body></html>
<!doctype html><html><head><title>Home</title></head><body>{% extends 'layout.html' %}{% block content %}<!-- home --><div class="section" id="home" data-stellar-background-ratio="0.5"><div class="container"><div class="disply-table"><div class="table-cell" data-aos="fade-up" data-aos-delay="0"><h4>Rain Dalio</h4><h1>Data Analysis &<br /> Data science</h1> </div></div></div></div><!-- about --><div class="section" id="about"><div class="container"><div class="col-md-6" data-aos="fade-up"><h4>01</h4><h1 class="size-50">Know <br /> About me</h1><div class="h-50"></div><a href='/project01'>project</a><p>text</p><p>text</p><div class="h-50"></div> <img src="img/Signature.svg" width="230" alt="" /><div class="h-50"></div></div><div class="col-md-6 about-img-div"><div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div><!-- img--><img src="img/about-img.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" /></div></div></div><!-- ./about --><!-- experience --><div class="section" id="experience"><div class="container"><div class="col-md-12"><h4>02</h4><h1 class="size-50">My <br /> Experience</h1><div class="h-50"></div></div><div class="col-md-12"><ul class="timeline"><li class="timeline-event" data-aos="fade-up"><label class="timeline-event-icon"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail">April 2016 - Present</p><h3>Geil,Danke! GmbH</h3><h4>eines Web-Studios</h4><p><strong>Projektmanagement mit Scrum</strong><br>Ständiges Verbessern des agilen Entwicklungsprozesses beispielsweise durch Grunt, Yeoman, GIT, JIRA und BrowserStack.</p></div></li><li class="timeline-event" data-aos="fade-up" data-aos-delay=".2"><label class="timeline-event-icon"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail">November 2014 - Mars 2016</p><h3>Freelancer</h3><h4>Designer und Autor</h4><p>Konzeption, Design und Produktion von Digitalen Magazinen mit InDesign, der Adobe Digital Publishing Suite und HTML5. Co-Autorin der Fachbücher "Digitales Publizieren für Tablets" und "Adobe Digital Publishing Suite" erschienen im dpunkt.verlag.</p></div></li><li class="timeline-event" data-aos="fade-up" data-aos-delay=".4"><label class="timeline-event-icon"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail">April 2014</p><h3>konplan gmbh</h3><h4>IT-Consultant</h4><p><strong>Systemarchitektur, Consulting</strong><br>Konzeption und Modellierung von Systemen und APIs für Digital Publishing und Entitlement nach SOA</p></div></li></ul></div></div></div><!-- ./experience --><!-- projects --><div class="section" id="projects"><div class="container"><div class="col-md-12"><h4>03</h4><h1 class="size-50">My <br /> Projects</h1></div><!-- main container --><div class="main-container portfolio-inner clearfix"><!-- portfolio div --><div class="portfolio-div"><div class="portfolio"><!-- portfolio_filter --><div class="categories-grid wow fadeInLeft"><nav class="categories"><ul class="portfolio_filter"><li><a href="" class="active" data-filter="*">All</a></li><li><a href="" data-filter=".photography">Photography</a></li><li><a href="" data-filter=".logo">Logo</a></li><li><a href="" data-filter=".graphics">Graphics</a></li><li><a href="" data-filter=".ads">Advertising</a></li><li><a href="" data-filter=".fashion">Fashion</a></li></ul></nav></div><!-- portfolio_filter --><!-- portfolio_container --><div class="no-padding portfolio_container clearfix" data-aos="fade-up"><!-- single work --><div class="col-md-4 col-sm-6 fashion logo"><!--<a id="demo01" href="#about" class="portfolio_item"> <img src="../static/img/portfolio/01.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Mockups in seconds</span> <em>Fashion / Logo</em> </div></div></div></a> --><a href="/project01" class="portfolio_item"><img src="../static/img/portfolio/02.jpg" alt="image" class="img-responsive"><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Mockups in seconds</span> <em>Fashion / Logo</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 ads graphics"><!--<a id="demo02" href="www.baidu.com" class="portfolio_item"> <img src="../static/img/portfolio/01.jpg" alt="image" class="img-responsive" /> --><a href="https://www.qries.com/" class="portfolio_item"><img src="../static/img/portfolio/02.jpg" alt="image" class="img-responsive"></a><!--<div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Floating mockups</span> <em>Ads / Graphics</em> </div></div></div> --></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 photography"><a id="demo03" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/02.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Photorealistic smartwatch</span> <em>Photography</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 fashion ads"><a id="demo04" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/04.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Held by hands</span> <em>Fashion / Ads</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 graphics ads"><a id="demo05" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/05.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Mobile devices</span> <em>Graphics / Ads</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 photography"><a id="demo06" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/010.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Photorealistic smartwatch</span> <em>Photography</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 graphics ads"><a id="demo07" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/06.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Mobile devices</span> <em>Graphics / Ads</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 graphics ads"><a id="demo08" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/07.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Mobile devices</span> <em>Graphics / Ads</em> </div></div></div></a></div><!-- end single work --><!-- single work --><div class="col-md-4 col-sm-6 graphics ads"><a id="demo09" href="#animatedModal" class="portfolio_item"> <img src="../static/img/portfolio/08.jpg" alt="image" class="img-responsive" /><div class="portfolio_item_hover"><div class="portfolio-border clearfix"><div class="item_info"> <span>Mobile devices</span> <em>Graphics / Ads</em> </div></div></div></a></div><!-- end single work --></div><!-- end portfolio_container --></div><!-- portfolio --></div><!-- end portfolio div --></div><!-- end main container --></div></div><!-- ./projects --><!-- animatedModal --><div id="animatedModal" class="popup-modal"><!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID --><div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div><div class="clearfix"></div><div class="modal-content"><div class="container"><div class="portfolio-padding"><div class="col-md-8 col-md-offset-2"><h2>Geschäfts Eines<br /> Web-Studios</h2><div class="h-50"></div><p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p><p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p><br /><br /> <img src="img/portfolio/02.jpg" alt="" class="img-responsive" /><br /><br /><p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p><p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p><br /><br /> </div></div></div></div></div>{% endblock %}</body></html>
若有收获，就点个赞吧
0 人点赞
