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.
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.
Related
I have a working Django app that has started giving me a template block error on my Windows 11 development PC:
Invalid block tag on line 17: 'endblock', expected 'endblock' or 'endblock stylesheets'. Did you forget to register or load this tag?
I looked at this stackoverflow article:
Invalid block tag : 'endblock'. Did you forget to register or load this tag?, but I don't have the typo that that article discusses. It is in a base.html template:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static 'assets/img/orange-img.png' %}" type="image/x-icon">
<title>
Clever - {% block title %}{% endblock %}
</title>
<!-- Specific Page CSS goes HERE -->
<link rel="stylesheet" href="{% static 'assets/css/blue_theme.css' %}">
{% block stylesheets %}
{% endblock stylesheets %}
</head>
<body class="hold-transition {% block body_class %}{% endblock body_class %}; w3-theme-l4">
{% block content %}{% endblock content %}
<div style="text-align: center">
{% include 'includes/footer.html' %}
</div>
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
{% endblock javascripts %}
{% include 'session_security/all.html' %}
</body>
</html>
The error gets generated on line 17: {% endblock stylesheets %}. I have tried putting the block and endblock on the same line, it gives me that same error with the different line number. I don't have a space between the curly braces and the percentage signs. I am running this with python 3.11.1 and Django 3.2.16 on my Windows PC. I tried it with python 3.7.3 with the same results. I have the app running on a Ubuntu instance with python 3.10.6 and Django 3.2.16, and it works. For what it's worth, I use PyCharm on my Windows PC.
Any suggestions?
Thanks--
Al
In the immortal words of Gilda Radner--"never mind". I had a typo in another template that was causing the error in this template... The lesson learned is don't use vim when you're so tired that you don't notice you're in insert mode when you do a ':w'...
--Al
So my app has the following structure: base.html, which contains the nav and the links to the stylesheets and the home.html file, which loads the nav via extends. However, i can't really modify the css inside my home.html file, any suggestions whats wrong?
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
<link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
<link rel="stylesheet" href="{% static 'css/app.css' %}">
...## navbar etc.
<div id="body">
<div class="container">
{% block page %}
{% endblock %}
</div>
</div>
home.html:
{% extends 'base.html' %}
{% load staticfiles %}
{% block page %}
<div class="row">
<div class="col-md-12">
<img src="{% static 'img/banner.gif'%}" class="banner">
</div>
{% endblock %}
As you can see in the base.html file, i load the app.css file via static method.
However, changing for example the banner class in the home.html isn't working at all:
#body .banner {
width: 100%;
margin-bottom: 150px;
}
No errors in the terminal / console. The app.css file works for the base.html by the way.
Try ctrl + F5, in django you have to reload your cache after making changes to static files.
Thank you very much guys! that issue has solved!(Here is my old post Django name 'admin' is not defined )
but it show nothing. I want to show the content in header.html & home.html
here is the code personal/views
from django.shortcuts import render
def index(request):
return render(request,'personal/templates/personal/home.html')
And here are the code of home and header
{% extends "personal/header.html" %}
{% block content %}
<p> Hey welcome to my very first project by Django :D </p>
{% include "personal/includes/"htmlsnippet.html %}
{% endblock %}
header:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harry-Phuc Coi</title>
<meta charset="utf-8">
</head>
<body class="body" style="background-color: #f6f6f6f6">
<div>
{% block content %}
{% endblock %}
</div>
</body>
</html>
And here is my path
my path
Firstly, note that you should specify the template relative to your templates directory, so you shouldn't need the personal/templates prefix.
return render(request,'personal/home.html')
Secondly you have " in the wrong place. It should be at the end of the template name.
{% include "personal/includes/htmlsnippet.html" %}
I intend to create a main page in a modular way. The main page might have a header, a footer, and a main section, I'd like to keep the markup and the css that is specific to each of those sections separate. So that if I need those sections on other pages, I can just include the files.
So I need to be able to include a css file into a template in a similar way I can include an html one. I could just keep all the styling on the same css file, but if I later remove some html file, I want the styling for that file to be removed as well.
So I came up with this minimal example, and it works on my setup, but I'm not sure it will work everywhere, or if it's idiomatic in django.
As you can see bellow I define one head section on the base html file, and another on the included html file. I need both these sections to define a link to the corresponding css files. I read the documentation on the head html tag though, and I'm not so sure I can just define multiple head sections, and I'm not sure where the head section from the included file will even end up, it seems like it will end up inside the body section of the base file, which I don't know if all browsers will render correctly.
So my questions are: Can I do this on all platforms? Should I do this? Is there another, better way, of doing this?
I received some suggestions to use inheritance, I'm not sure that will work, I don't have a base file that I can make a few changes to on a child, and then render the child. I have several files, that define several different sections of a main page, that I need to bring together.
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/base.css" %}" />
</head>
<body>
{% include "header.html" %}
{% include "main.html" %}
{% include "footer.html" %}
</body>
</html>
base.css:
.header {
background-color: red;
}
.footer {
background-color: blue;
}
main.html:
{% load static %}
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/main.css" %}" />
</head>
<main>
main
</main>
main.css:
.main {
background-color: green;
}
You shouldn't define multiple head sections in HTML. But there's no need to; you should use template inheritance and blocks just like you do with any other element. You shouldn't really be using include here at all; inheritance is much more powerful.
So, base.html looks like this:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/base.css" %}" />
{% block extrastyles %}{% endblock %}
</head>
<body>
<header>header</header>
{% block main %}{% endblock %}
<footer>footer</footer>
</body>
</html>
and main.html is:
{% extends "base.html" %}
{% load static %}
{% block extrastyles %}
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/main.css" %}" />
{% endblock %}
{% block main %}
main
{% endblock %}
and in your view you render main.html, not base.html.
The first problem, it not correct to put head into body. It makes so as your main.html is not a separate HTML file but the part of base.html. The second is it is not such easy to include another file if you need to once in the future.
I make such a thing in slightly another way. When using base file it looks more useful to extend the base template instead of including files. So, in the base template, we can make some placeholder blocks.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/base.css" %}" />
{% block 'additional_includes' %}{% endblock %}
</head>
<body>
<header>header</header>
{% block 'content' %}{% endblock %}
<footer>footer</footer>
</body>
</html>
Then we are going to use it. So create child template and redefine needed blocks (if you don't redefine them, they will just stay empty):
{% extends '/path_to_base/base.html' %}
{% load static %}
{% block 'additional_includes' %}
<link rel="stylesheet" type="text/css" href="{% static "appfolder/css/main.css" %}" />
{% endblock %}
{% block 'content' %}
your content
{% endblock %}
That's all. You need to refer to main.html in your views instead of base.html. And, of course, you can a lot of other child templates.
Update.
Decided to edit my reply. The common structure of html file is:
<!DOCTYPE ...>
<html>
<head>
<!-- all your meta tags -->
<!-- title -->
<!-- css and other includes, you can include so many files as you need, but it is better to use as little as possible as it can reduce server performance -->
<!-- scripts definitions (not necessary to put there, often they are paced in the end of file) -->
</head>
<body>
<!-- content of file
you can divide this part in several parts and include them
but you can't use head here, because it is body -->
</body>
</html>
This structure must be used in any framework in different languages because it is just an HTML used by the browser. Any framework must have instruments to render simple HTML pages with its template engine. And Django has its own engine, that provides to create lots of big files from small parts using extending and including. You can include some parts that are common for all of your pages. You can redefine this includes wrapping this includes in block tags. And you can create different pages with the same layout using extend, so you don't have to copy your code (for header or footer) many times.
So, in Django, you can create the following structure. I use some sort of it and it seems comfortable enough:
base.html
<!DOCTYPE ...>
<html>
<head>
{% load static %}
{% include 'meta.html' %}
<title>{% block 'title' %}Main page{% endblock %} - my site</title>
<link href='{% static "appfolder/css/base.css" %}' ... />
{% block 'additional_includes' %}{% endblock %}
</head>
<body>
{% block 'header' %}{% include 'header.html' %}{% endblock %}
<!-- header is just visible site header, not including files -->
{% block 'content' %}{% endblock %}
{% block 'footer' %}{% include 'footer.html' %}{% endblock %}
</body>
</html>
first-page.html
{% extends 'base.html' %}
{% load static %}
{% block 'title' %}First-page{% endblock %}
{% block 'additional_includes' %}
<link href='{% static "appfolder/css/first-page.css" %}' ... />
{% endblock %}
<!-- if you DON'T use block, then the content defined in base template file will remain -->
{% block 'content' %}
Some page content
{% endblock %}
second-page.html
{% extends 'base.html' %}
{% load static %}
{% block 'title' %}Second-page{% endblock %}
{% block 'additional_includes' %}
<link href='{% static "appfolder/css/second-page.css" %}' ... />
{% endblock %}
<!-- if you USE block, then its content will be rewritten with new data. you can use {{ block.super }} to add the content of block from base template -->
{% block 'header' %}{% include 'header_for_second_page.html' %}{% endblock %}
{% block 'content' %}
Another page content
{% endblock %}
I followed the Django "first app" tutorial, and now I am wondering how I could write templates that the whole site will use. I can write the templates for each view, but how do I write a template that will be on every page and then include the 'sub templates' in say a 'content block'?
See the Template Inheritance section of the Django template docs.
Basically, you create one template that is the "base":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
and save it as (for example) "base.html" in your template directory, then each specific page template looks like:
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block content %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
Long story short, you should write a base template and then extend this template. This is called template inheritance and is well explained here