I need to create a small side block with form(it contains only one field and button) and I want it to be included to every page except base.html
I thought about making simple view function, but maybe there are better ways to do this?
I'm using Python and Django 1.6
In general, you shouldn't use base.html directly, but because you are and because it would be a huge hassle to change it in every other template, what you can do is, in the view function that returns base.html, you can add a boolean to the context and check the boolean to determine what template you are using.
Something like this:
def view_that_uses_base.html(request):
is_base = True
return render_to_response("base.html", {"is_base":is_base}, RequestContext(request,{}))
And then in the template:
{% block sidebar %}
{% if is_base%}
{% else %}
#Your code here
{% endif %}
{% endblock sidebar %}
You must use templates to do that.
In other words, try creating $DJANGO_ROOT/templates/main.html using the following code:
<html>
<head>
</head>
<body>
{% block one_field_and_a_button %}
<input />
<button>I am everywhere</button>
{% endblock %}
{% block my_custom_content %}
{% endblock %}
</body>
<html>
Then all other templates must extend that main.html template and insert their own data.
Imagine this is $DJANGO_ROOT/templates/login.html. It will only replace "my_custom_content" and will inherit all other blocks including "one_field_and_a_button"
{% extends 'templates/main.html' %}
{% block my_custom_content %}
Hello World! This is the login
{% endblock %}
Finally, if you want to have a base.html that does not have that part of the code containing one field and a button, you can do the following.
Imagine this is $DJANGO_ROOT/templates/base.html. It will replace both "one_field_and_a_button" and "my_custom_content". However, in this case, "one_field_and_a_button" will be replaced with blank space that will not show in your html code.
{% extends 'templates/main.html' %}
{% block one_field_and_a_button %} {% endblock %}
{% block my_custom_content %}
Hello World! This is my base.html template
{% endblock %}
Hope it works for you!
You can use block tag in base.html, i think you are searching foe something like this
base.html
{% block code %}
{% include 'sidebar.html' %}
{% endblock %}
index.html
{% extends base.html %}
{% block code %}
{% endblock %}
and every other templates
just extend base html
{% extends base.html %}
Related
so I just started reading a book on Django (for beginners) and I came across the following code snipet:
<header>
Home | About
</header>
{% block content %}
{% endblock content %}
Could anyone possibly explain to me what is the use of {% block content %} and {% endblock content %}? Thank you very much in advance!
block is used for overriding specific parts of a template.
In your case, you have a block named content and this is supposed to be overridden by children that inherit from this template.
From the examples at The Django Docs
Template to be extended, named base.html
<head>
<link rel="stylesheet" href="style.css">
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
Overriding Child template
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
"My amazing site" will be overriden by the child and then display "My amazing blog"
That's where the power of the templates comes from in a sense.
You can create a hierarchy of templates so start with base.html which might be like you've got above;
<body>
{% block content %}
{% endblock content %}
</body>
Then you can create any other template, home.html for example, and do something like;
{% extends "base.html" %}
{% block content %}
<h1>Welcome</h1>
<p>This is the home page</p>
{% endblock content %}
Then you'd reference home.html in django and it'd include the markup from base.py with the content defined in home.html.
That's the basics, but if you put some templates together using blocks you'll pick it up.
For example, you have code excerpts from 2 files:
base.html:
<body bgcolor="cyan">
{% block content %}
{% endblock %}
</body>
home.html:
{% extends 'base.html' %}
{% block content %}
<h1>Hello World from Abhishek</h1>
{% endblock %}
here in home.html, the attributes of base.html will be extended but by using {% block content %} and {% endblock %} you will be able to override the code block of home.html upon the attributes of base.html
This is Jinja template for a dynamic website.
I have 5 templates: index.html, detail.html, tag.html, login.html, register.html and a base.html
All 5 templates will extend base.html.
index.html, detail.html, tags.html have a same <section>...</section> html code section with the same data from backend.I want to add this section to base.html, so that don't need to repeat it 3 times in 3 different templates.
But the problem is,the login.html and register.html do need this section.
I know if it is React.js or Vue.js it will be very easy to use component to solve it.
Any good way to solve this question in Django?
EDIT
As the OP mentioned in the comments, the requirements are quite different from what I could interpret. Thus, the fix that can be used based on my newer understanding is simply {% include 'section.html' %} as aptly pointed out in Tsang-Yi Shen's comment.
base.html:
<!-- HTML here.... -->
{% block normal_content %}{% endblock %}
section.html
<section>
<!-- Special Section -->
</section>
Wherever you want the section, just include section.html
login.html and all others which require the special section:
{% extends "base.html" %}
{% block normal_content %}
Hey There!
{% block section %}
{% include 'section.html' %}
{% endblock %}
{% endblock %}
ORIGINAL ANSWER
Selcuk's answer explains the concept beautifully. I am adding to that answer by providing code examples for future reference.
Consider base.html:
<!-- HTML here.... -->
<!-- Common Section -->
{% block section %}{% endblock %}
{% block normal_content %}{% endblock %}
<!-- End Common Section -->
Now use a template for your section, baseWithSection.html:
{% extends 'base.html' %}
{% block section %}
<section>
....
</section>
{% endblock %}
{% block special_content %}{% endblock %}
For all pages that do not contain the section, extend base.html like so:
{% extends 'base.html' %}
{% block normal_content %}
<!-- HTML here... -->
{% endblock %}
For the pages that do require the section, extend section.html like so:
{% extends 'baseWithSection.html' %}
{% block special_content %}
<!-- Special HTML here, for templates pages requiring the section -->
{% endblock %}
You can have multiple base templates. For example:
base.html # Has the minimum shared elements
|
-> base_page.html # extends base.html (and adds your <section>...</section>)
| |
| -> index.html # extends base_page.html
| -> detail.html # extends base_page.html
-> login.html # extends.base.html
-> register.html # extends.base.html
I am fairly new to django and am trying out template-inheritance but not able to get it work. I cannot get all the blocks in a page to be displayed simultaneously. Not sure if I am missing something in urls, views or settings. I am using Python 3.6 in venv / Django 2.0.4 on PyCharm
Details of my example below - myhome being project name and smarthome being app name
Folder Structure
base.html
navtopbar.html
navsidebar.html
smarthome urls.py
smarthome views.py
-- Initially I had this as base.html but based on advice in thread below, changed to navtopbar. But then not sure how to get application to display navsidebar simultaneously
settings
I followed the advice in this thread but not able to get it to work yet. Appreciate any help here.
First of all careful with naming!
You are rendering your view in navtopbar.html
In navtopbar.html you have only override navtopbar block so only that block will replaced.
Djnago template works as below:
base.html
{% block body %} base {% endblock %}
{% block content %} base {% endblock %}
Now if you render home.html from view it should be:
home.html
{% extends 'base.html' %}
<!-- the blocks you override here only replaced -->
{% block body %}
home
{% endblock %}
As above html you have only overridden one block which results to override one block and other remains unchanged. the if you want to override {% block content %} you need to override in same html as below:
home.html
{% extends 'base.html' %}
<!-- the blocks you override here only replaced -->
{% block body %}
home
{% endblock %}
{% block content %}
home content
{% endblock %}
If you want to include content from another html you can include it with include tag
consider below file:
content.html
<h3>This is common content</h3>
now you can include this in your home.html as below:
home.html
{% extends 'base.html' %}
<!-- the blocks you override here only replaced -->
{% block body %}
home
{% endblock %}
{% block content %}
{% include 'content.html' %}
{% endblock %}
If I have this in my "main" (or project's) base.html:
{% block content %}
I'm inside block content.
{% block main_sidebar %}
I'm inside my sidebar now.
{% endblock main_sidebar %}
{% endblock %}
And, in the app's base.html (this base extends off the main base.html), I have this:
{% block main_sidebar %}
I want to change this.
{% endblock main_sidebar %}
The output doesn't change in my app's base.html for the main sidebar.
If I change {% block content %} to a custom name, then it works. I guess {% block content %} has special privileges as a block name and so can't be overwritten in a case like the one above?
I am using Flask micro-framework for my server which uses Jinja templates.
I have a parent template.html and some children templates called child1.html and child2.html, some of these children templates are pretty large HTML files and I would like to somehow split them for better lucidity over my work.
Contents of my main.py script:
from flask import Flask, request, render_template
app = Flask(__name__)
#app.route('/')
#app.route('/<task>')
def home(task=''):
return render_template('child1.html', task=task)
app.run()
The simplified template.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
The magic is in child1.html:
{% extends 'template.html' %}
{% block content %}
{% if task == 'content1' %}
<!-- include content1.html -->
{% endif %}
{% if task == 'content2' %}
<!-- include content2.html -->
{% endif %}
{% endblock %}
Instead of the comments:
<!-- include content1.html -->
I have a lot of html text, and it is very hard to keep track of changes and not to make some mistakes, which are then pretty hard to find and correct.
I'd like to just load the content1.html instead of writing it all in child1.html.
I came across this question, but I had problems implementing it.
I think Jinja2 might have a better tool for that.
NOTE: The code above might not be working properly, I just wrote it to illustrate the problem.
Use the jinja2 {% include %} directive.
{% extends 'template.html' %}
{% block content %}
{% if task == 'content1' %}
{% include 'content1.html' %}
{% endif %}
{% if task == 'content2' %}
{% include 'content2.html' %}
{% endif %}
{% endblock %}
This will include the content from the correct content-file.
You can use the include statement.
I'd like to add the proper syntax for using include, one given above works fine, but when it comes to the path, it took some time to find this, it is not even mentioned in the official document.
Syntax for include is:
{% include 'path_to_template_file' %}