Jinja2 未正确显示在网页中答案

【问题标题】：Jinja2 does not show in the webpage correctlyJinja2 未正确显示在网页中
【发布时间】：2020-06-09 08:41:31
【问题描述】：

使用 Django，我必须创建一个基本网站以在网页上显示 SQL 数据库中的元素。现在，我已经创建了一个基本的 HTML 模板以从那里开始，但是由于我在 HTML 文档中包含了 Jinja2 语法，所以它并没有显示正确性。它在浏览器中显示所有 Jinja2 代码。如果您需要查看其他文件，请询问。

views.py

from django.shortcuts import render
from django.http import HttpResponse
from .models import Book

# Functions to display the webpages using the render function when button clicked
def index(request):
    return render(request, "index.html", {})


def books(request):
    return render(request, "books.html", {'Book': Book})


def about(request):
    return render(request, "about.html", {})

index.html

{ % extends "header.html" % }

{ % block content % }
    <article>Article</article>      
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/books.html">Books</a></li>
            <li><a href="/about.html">About</a></li>
        </ul>
    </nav>
    <aside>Aside</aside>
{ % endblock % }

header.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>

<body>
  <header>Header</header>
  <div id="main">
    { % block content % }

    { % endblock % }
  </div>
  <footer>Footer</footer>
</body>

</html>

style.css

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

#main {
    display: flex;
    min-height: calc(100vh - 40vh);
}

#main > article {
    flex: 1;
}

#main > nav,
#main > aside {
    flex: 0 0 20vw;
    background: gray;
}

#main > nav {
    order: -1;
}

header, footer, article, nav, aside {
    padding: 1em;
}

header, footer {
    background: black;
    color: white;
    height: 20vh;
}

输出

【问题讨论】：

请在您应用的views.py 文件中包含相应的视图功能。
添加了views.py @Dauros

标签： python html css django jinja2

【解决方案1】：

{% 和 %} 标记是 Jinja specific 元素，例如之间不允许有空格。 { 和 %。只需删除它们之间的空格，Jinja 就会识别其块标记并正确呈现您的模板。

【讨论】：