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

Question

我创建了一个base.html文件，我希望其中的bootstrap3导航栏和页脚都位于其中。 这些将在我网站的每个页面上使用。

但是，与之配套的base.html和相应的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>

如果有帮助，我可以包含用于index.html和base.html的css文件，但我认为问题出在我对扩展基本模板以及如何使用{% block content %}理解上。 我可以删除该块，这似乎也没有关系。

感谢您提供的任何见解。

Answer 1

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

为简单起见，您应该像下面这样构造文件：

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修改这些页面上的内容。

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

问题描述

base.html：

index.html：

1 个解决方案

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

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

问题描述

base.html：

index.html：

1 个解决方案

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

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