Question

我正在调整我在网上找到的免费bootstrap3模板，用于烧瓶应用程序。我是第一次使用jinja2模板，而且我正在试验模板继承。

base.html文件：

<!doctype html>
<!--[if IE 7 ]>    <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en-gb" class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--[if lt IE 9]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <title>Our Company Co</title>
    <meta name="description" content="">
    <meta name="author" content="WebThemez">
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 8]>
        <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href={{ url_for("static",filename="css/isotope.css")}} media="screen" />
    <link rel="stylesheet" href={{ url_for("static",filename="js/fancybox/jquery.fancybox.css")}} type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href={{ url_for("static",filename="css/da-slider.css")}} />
    <!-- Owl Carousel Assets -->
    <link href={{ url_for("static",filename="js/owl-carousel/owl.carousel.css")}} rel="stylesheet">
    <link rel="stylesheet" href={{ url_for("static",filename="css/styles.css")}} />
    <!-- Font Awesome -->
    <link href={{ url_for("static",filename="font/css/font-awesome.min.css")}} rel="stylesheet">
</head>

<body>
    <header class="header">
        <section id="section-top" class="section section-top">
            <div class="container">
                <div class="row">
                    <div class="region region-top-first col-xs-12 col-sm-8 col-md-7 col-lg-7">
                        <div class="block-contents ">

                            <div class="content">
{#                                <ul>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Facebook"><i class="fa fa-facebook"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Twitter"><i class="fa fa-twitter"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Linkedin"><i class="fa fa-linkedin"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Skype"><i class="fa fa-skype"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Dribbble"><i class="fa fa-dribbble"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Youtube"><i class="fa fa-youtube"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Tumblr"><i class="fa fa-tumblr"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Pinterest"><i class="fa fa-pinterest"><span></span></i></span></a></li>#}
{#                                    <li><a href="#"><span data-toggle="tooltip" data-placement="bottom" class="superhero-tooltip" data-original-title="Google+"><i class="fa fa-google-plus"><span></span></i></span></a></li>#}
{#                                </ul>#}
                            </div>
                        </div>
                        <div style="clear: both" class="clear-fix"></div>
                    </div>
                </div>
            </div>
        </section>

        <div class="container">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                    <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand scroll-top logo"><b>The Our Company Company</b></a>
                </div>
                <!--/.navbar-header-->
                <div id="main-nav" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav" id="mainNav">
                        <li class="active"><a href="#home" class="scroll-link">Home</a></li>
{#                        <li><a href="#aboutUs" class="scroll-link">About Us</a></li>#}
{#                        <li><a href="#services" class="scroll-link">Services</a></li>#}
                        <li><a href="#portfolio" class="scroll-link">Portfolio</a></li>
{#                        <li><a href="#team" class="scroll-link">Team</a></li>#}
                        <li><a href="#contactUs" class="scroll-link">Contact Us</a></li>
                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
            <!--/.navbar-->

        </div>
        <!--/.container-->
    </header>
    <!--/.header-->


    {% block test %}{% endblock %}





{#   <a href="#top" class="topHome"><i class="fa fa-chevron-up fa-2x"></i></a>#}

{#    <!--[if lte IE 8]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->#}
    <script src="static/js/modernizr-latest.js"></script>
    <script src="static/js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="static/js/jquery.isotope.min.js" type="text/javascript"></script>
    <script src="static/js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="static/js/jquery.nav.js" type="text/javascript"></script>
    <script src="static/js/jquery.cslider.js" type="text/javascript"></script>
    <script src="static/js/custom.js" type="text/javascript"></script>
    <script src="static/js/owl-carousel/owl.carousel.js"></script>


</body>
</html>

detail.html：

{% extends "base.html" %}

{% block test %}<h1>Index</h1>{% endblock %}

我跑的时候：

@app.route("/detail")
def detail():
    return render_template("detail.html")

你看截图了。如果我查看底层的html，我会看到：

</header>
<!--/.header-->
<h1>Index</h1>

但它不会在浏览器中呈现。为什么呢？

Jinja2块不会渲染，但是在html中

0 个答案: