Django基本模板(使用Bootstrap3)完全覆盖index.html

我已经创建了一个base.html文件，我希望我的bootstrap3 navbar和页脚活着。这些将在我的网站的每个页面上使用。

但是，base.html＆amp;与之相关的CSS文件似乎覆盖了该视图的所有index.html文件和特定的CSS。

我已经阅读了Django文档，并在覆盖基本模板上的紧密相关问题。其他网站有教程，但仍然没有意义。我相信我正在误解一些基本的东西。

这是代码：

base.html：

<!DOCTYPE html> {% load staticfiles %}
<html>
<head>
    <link rel="stylesheet" href="/static/css/main.css" />
    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- [/] jquery -->
</head>
<body>
    {# Load the tag library #} {% load bootstrap3 %} {# Load CSS and JavaScript #} {% bootstrap_css %} {% bootstrap_javascript %} {# Display django.contrib.messages as Bootstrap alerts #} {% bootstrap_messages %} {# Navigation Menu #}
    <header>
        <nav class="navbar navbar-default">
            ----->Navbar code here<-----
        </nav>
    </header>
    <footer>
        <div class="container">
            <p>Good stuff is here in the footer</p>
        </div>
    </footer>
</body>
</html>

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="description" content="Online community">
    <meta name="author" content="My name">
    <title>Planet</title>
    <link href="/static/css/homepage.css" rel="stylesheet">
</head>
<body>
    {% extends 'base.html' %}
    {% block content %}
    <p>WORDS WORDS WORDS WORDS</p>
    <h1>HERE ARE SOME BIG WORDS ON THE MAIN PAGE</h1>
{% endblock content %}
</body>
</html>

i可以包括index.html＆amp;的CSS文件base.html如果有帮助，但我相信问题在于我对扩展基本模板以及如何使用{% block content %}的理解。我可以删除该块，这似乎也不重要。

感谢您提供的任何见解。

看起来您正在尝试使用模板扩展

以简单性，您应该像这样构建文件：

base.html

<head> </head>
<body>
{% block content %}
    index.html will be loaded and everything within
    the block named "content" will display here
{% endblock %}
</body>
<footer> </footer>

index.html

{% extends 'base.html' %}
{% block content %}
    Everything within this block, named "content", will 
    be inserted into the "content" block of base.html
{% endblock %}

一旦通过django的模板系统，您的组合HTML将看起来像这样：

<head> </head>
<body>
    Everything within this block, named "content", will 
    be inserted into the "content" block of base.html
</body>
<footer> </footer>

您的视图将需要返回渲染的index.html。该系统的设计使您可以继续将base.html与其他模板一起使用以维护标准结构或页面设计，同时仅修改具有不同版本的index.html的内容。

base.html：

index.html：

相关内容

最新更新

热门标签：