Django基本模板（使用bootstrap3）完全覆盖index.html

Question

I've created a base.html file where I want my bootstrap3 navbar and footer to live. 我创建了一个base.html文件，我希望其中的bootstrap3导航栏和页脚都位于其中。 These will be used on every page of my site. 这些将在我网站的每个页面上使用。

However, the base.html & corresponding css file that goes with it seems to overwrite all of the index.html file and specific css for that view. 但是，与之配套的base.html和相应的CSS文件似乎覆盖了该视图的所有index.html文件和特定的CSS。

I've read the django documentation and closely-related questions like this one on overriding the base template . 我已经阅读了django文档以及诸如此类的与基础模板有关的紧密相关的问题。 Other website have tutorials but still aren't making sense. 其他网站上有教程，但仍然没有意义。 I believe I am misunderstanding something fundamental. 我相信我误解了一些基本知识。

Here is the code: 这是代码：

base.html: 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: 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 can include the css files for index.html & base.html if it helps but I believe the problem lies somewhere with my understanding of extending the base template and how to use {% block content %} . 如果有帮助，我可以包含用于index.html和base.html的css文件，但我认为问题出在我对扩展基本模板以及如何使用{% block content %}理解上。 I can remove that block and it doesn't seem to matter either. 我可以删除该块，这似乎也没有关系。

Thank you for any insights you can provide. 感谢您提供的任何见解。

Answer 1

It looks like you're trying to use template extending 看起来您正在尝试使用模板扩展

In simplicity, you should structure your files like so: 为简单起见，您应该像下面这样构造文件：

base.html 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 index.html

{% extends 'base.html' %}

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

Your combined HTML would look like this once it passes through Django's templating system: 一旦通过Django的模板系统，您组合的HTML就会看起来像这样：

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

Your view will need to return the rendered index.html . 您的视图将需要返回渲染的index.html 。 This system is designed such that you can continue to use base.html with other templates to maintain a standard structure or page design, while modifying only the content on those pages with different versions of index.html . 该系统的设计使您可以继续将base.html与其他模板一起使用，以维护标准结构或页面设计，同时仅使用不同版本的index.html修改这些页面上的内容。

Django基本模板（使用bootstrap3）完全覆盖index.html

问题描述

base.html: base.html：

index.html: index.html：

1 个解决方案

解决方案1
2 已采纳 2017-06-08 18:12:45

Django基本模板（使用bootstrap3）完全覆盖index.html

问题描述

base.html: base.html：

index.html: index.html：

1 个解决方案

解决方案1 2 已采纳 2017-06-08 18:12:45

解决方案1
2 已采纳 2017-06-08 18:12:45