Django base template (using bootstrap3) overwrites index.html completely
Question
I've created a base.html file where I want my bootstrap3 navbar and footer to live. 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.
I've read the django documentation and closely-related questions like this one on overriding the base template . Other website have tutorials but still aren't making sense. I believe I am misunderstanding something fundamental.
Here is the code:
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 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 %} . I can remove that block and it doesn't seem to matter either.
Thank you for any insights you can provide.
1 answers
solution1
2 ACCPTED 2017-06-08 18:12:45
It looks like you're trying to use template extending
In simplicity, you should structure your files like so:
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 %}
Your combined HTML would look like this once it passes through Django's templating system:
<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 . 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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.