My base template is
<!DOCTYPE html>
<html lang="en">
<head>
<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>
Index page:
{% 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 %}
What is wrong with that and why it is generating strange empty text inside those quotes?
It is affecting my layout. Do you have any ideas? Thanks.
At last!!! I found what caused this.I use Notepad++ and encode to
UTF-8
but I should have encoded to
UTF-8 without BOM
Thanks everyone anyway.
Does the source opened using Ctrl+U also look weird? Maybe it is Chrome that is messing up the Elements preview, because I have made a view rendering those exact two templates (and adding 2 dummy blog entries) on Django 1.2.3 and it rendered correctly as:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My amazing blog</title>
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div id="content">
<h2>Test 1</h2>
<p>blah blah</p>
<h2>Test 2</h2>
<p>blah blah</p>
</div>
</body>
</html>
Pay attantion that your title tag inserted into body tag. Maybe start to search from here?
It can't be the result of this to templates combined, because in your "base.html" template, {% block title %} is in between section, but in your resulting html, it is in section. And also there's a CSS link, outside either and sections. I have lots of this empty strings, and this doesn't affect my layout, I think the problem is that your is outside section.
Related
Basicly my django project consists of the templates with html.
I would like to fill the context of the site using blocks.
My problem is that I would like to send the block to sidebar and the base part of the page from application's .html files.
Templates:
sidebar.html
footer.html
header.html
base.html
In my base.html I use:
{% include 'partials/_sidebar.html' %}
{% block content %}{% endblock %}
in my sidebar.html I use
{% block sidebar %}{% endblock %}
and in my Application index.html i try to use:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Home Page</h1>
{% endblock %}
{% block sidebar %}
<div class="bg-white py-2 collapse-inner rounded"></div>
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="{% url 'veggies' %}">veggies</a>
<a class="collapse-item" href="{% url 'fruits' %}">fruits</a>
</div>
{% endblock %}
But it is obviously not working.
The starting page triggers app/index.html with a view.
How to workaround such a problem?
[i cant add post][1]
[1]: https://i.stack.imgur.com/FV3Co.png
Hopefully I can demonstrate how you use blocks by sharing some example templates with you.
Starting with a base template, that generally has the most content and contains the basic markup;
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock title %}</title>
<meta name="description" content="{% block meta_description %}{% endblock meta_description %}">
<meta name="viewport" content="width=device-width,initial-scale=1">
{% block styles %}{% endblock %}
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script type="text/javascript" src="https://kit.fontawesome.com/c3c34cb042.js" crossorigin="anonymous"></script>
{% endblock %}
{% block head_extras %}{% endblock %}
</head>
<body>
{% block header %}{% endblock header %}
{% block content %}{% endblock content %}
{% block footer %}{% endblock footer %}
{% block footer_scripts %}
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
Then a page for content would extend that and you'd include in this template the blocks you want to add content to;
{% extends "base.html" %}
{% load static %}
{% block title %}Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
</div>
</section>
{% endblock content %}
That'd be a really simple setup. But as you've said, you might also use the {% include %} tag.
What that does is inject the content of the included template into the template at the point you use the tag.
So in a template with a sidebar, that might look like;
{% extends "base.html" %}
{% load static %}
{% block title %}Sidebar Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
{% include 'partials/_sidebar.html' %}
</div>
</section>
{% endblock content %}
I have two files, base.html and homepage.html. Homepage extends base, and adds to block extra. Base should render block extra in a span within the body, but doesn't.
base.html:
{% load sekizai_tags %}
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<span style="color: red;">{% render_block "extra" %}</span>
{% block 'content' %}
{% endblock %}
</body>
</html>
homepage.html:
{% extends 'base.html' %}
{% load sekizai_tags %}
{% block 'content' %}
<p>that's some sweet content ya got there lad</p>
{% addtoblock "extra" %}wow{% endaddtoblock %}
{% endblock %}
And the output:
What really simple thing am I missing?
Aha, I was missing a context preprocessor from my templates.
'sekizai.context_processors.sekizai',
I have some content in my layout that are not supposed to be displayed in some pages.
E.g.: When a user is registering for the site my default frontpage sidebar should not be displayed:
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">
<div id="sidebar">
{% block sidebar %}
{% render "/layout/sidebar" %}
{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
<div id="footer">
{% block footer %}
© Copyright 2011 by you.
{% endblock %}
</div>
</body>
</html>
In the above code:
{% block sidebar %}
should display some advertising instead!
So:
Something like:
{% if SOMEVIEW == TRUE %}
{% block sidebar %}
{% else %}
{% block advertising %}
{% endif %}
What expression could I use in my IF to accomplish that job?
Thanks in advance
You can look at
How to check if an user is logged in Symfony2 inside a controller?
and http://symfony.com/doc/current/book/security.html#access-control-in-templates
In the view you can use {{ is_granted('IS_AUTHENTICATED_FULLY') }} to check if a user is logged in.
Hope it's helpful.
Best regard.
I came accross to the solution here http://symfony.com/doc/current/cmf/bundles/core.html#twig:
app.request.attributes.get('_template').get('name')
will return the route name so that I can handle it inside my twig files.
This is my base.html
<!DOCTYPE html>
<head>
<title> My Site </title>
</head>
<body>
<div id="wrapper">
<!-- HEADER START -->
{% block nav %} {% endblock %}
{% block index %} {% endblock %}
</div>
</body>
</html>
this is my nav.html
{% extends "base.html" %}
{% block nav %}
<div id="header">
<div class="inner">
<div class="nav">
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="clear"></div>
</div><!-- .inner end -->
</div><!-- #header end -->
<!-- HEADER END -->
{% endblock %}
this is my index.html
{% extends "base.html" %}
{% block index %}
<p> hello </p>
{% endblock %}
I have done it several times before before but i am clueless as to why this is NOT working?
the urls and views are here.
Well everything is fine, the trouble that you are having is that
you are confused, just naming a block in base does not calls it.
Mark the difference between extends and include.
You have counfused extends to include.
Once in your views if you call say index.html it will be rendered properly.
The effect you want can be achieved by changing the base.html in your views to index.html.
Hope this helps. more can be read here: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance
For more people who end up here (as myself), main thing to note is that when you use {% extends 'something.html' %}, you cannot use anything other than these template tags at the top-level.
You can obviously have html tags inside these tags (like block tags), but don't put ANYTHING outside the template tags.
Also helps if you change the path in extends, for example {% extends 'mysite/index.html' %}. And view function must render the file with extends, not the basic one.
In views.py, you have to call the template that extends the other template, not the other way around. In your example you should call nav.html.
try do this
{% extends 'appname/index.html' %}
Can someone please help me figure out a way to achieve the following (see snippets below) in Django templates? I know that you cannot use more than one extends, but I am new to django and I do not know the proper syntax for something like this. I want to be able to do this so that I can use my nested div layout for css reasons without having to type it like that each time and risking a typo. In words, I want to be able to have a page template extend my base.html file and then use html snippets of dynamic template content (i.e. template for loops or other template logic devices, not just a context variable I set from my view controller).
edit:
I want to be able to display arbitrary content in an arbitrary fashion in each column. For example I would like to be able to display a ul of images in one column and then on the same page show another set of columns displaying a table of data. Here is an example that I typed out:
example of alot of random columns
I realize that the example picture has all text generated from the django web tester output but each coulmn should be able to have random content. And they should be nestable. Is this possible with the default django template language?
------------------------------------------------------------
base.html
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>{% block title %}Title{% endblock %}</title>
</head>
<body>
<div class="wrapper">
<div class="header">
This is the common header
</div>
<div class="nav">
This is the common nav
</div>
{% if messages %}
<div class="messages">
<ul>
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="content">
{% block content %}Page Content{% endblock %}
</div>
<div class="footer">
This is the common footer
</div>
</div>
</body>
</html>
------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
<div class="container1">
<div class="col1">
{% block twocol_col1 %}{% endblock %}
</div>
<div class="col2">
{% block twocol_col2 %}{% endblock %}
</div>
</div>
</div>
------------------------------------------------------------
columnlayout3.html
------------------------------------------------------------
<div class="threecol container3">
<div class="container2">
<div class="container1">
<div class="col1">
{% block threecol_col1 %}{% endblock %}
</div>
<div class="col2">
{% block threecol_col2 %}{% endblock %}
</div>
<div class="col3">
{% block threecol_col3 %}{% endblock %}
</div>
</div>
</div>
</div>
------------------------------------------------------------
page.html
------------------------------------------------------------
{% extends "base.html" %}
{% block content %}
{% extends "columnlayout2.html" %}
{% block twocol_col1 %}twocolumn column 1{% endblock %}
{% block twocol_col2 %}twocolumn column 2{% endblock %}
{% extends "columnlayout3.html" %}
{% block threecol_col1 %}threecol column 1{% endblock %}
{% block threecol_col2 %}threecol column 2{% endblock %}
{% block threecol_col3 %}threecol column 3{% endblock %}
{% endblock %}
------------------------------------------------------------
page.html output
------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Title</title>
</head>
<body>
<div class="wrapper">
<div class="header">
This is the common header
</div>
<div class="nav">
This is the common nav
</div>
<div class="content">
<div class="twocol container2">
<div class="container1">
<div class="col1">
twocolumn column 1
</div>
<div class="col2">
twocolumn column 2
</div>
</div>
</div>
<div class="threecol container3">
<div class="container2">
<div class="container1">
<div class="col1">
threecol column 1
</div>
<div class="col2">
threecol column 2
</div>
<div class="col3">
threecol column 3
</div>
</div>
</div>
</div>
</div>
<div class="footer">
This is the common footer
</div>
</div>
</body>
</html>
I agree with Daniel, inclusion tags are probably what you're after and I think you are misunderstanding them and {% extends %}.
If your content is static or in the context, you can use {% include %} blocks like
{% block content %}
{% include "columnlayout2.html" %}
{% include "columnlayout3.html" %}
{% endblock %}
so you could store the content you want in something like {{ two_columns }} and {{ three_columns }} and render
------------------------------------------------------------
columnlayout2.html
------------------------------------------------------------
<div class="twocol container2">
<div class="container1">
<div class="col1">
{{ two_columns[0] }}
</div>
<div class="col2">
{{ two_columns[1] }}
</div>
</div>
</div>
Or you can use inclusion tags inside page.html
EDIT
Moderator needs to render HTML with a different structure (not just content) on different pages, so you can do something like "nesting" inclusion tag calls.
{% block content %}
{% show_two_columns two_columns %}
{% show_three_columns three_columns %}
{% endblock %}
templatetag
#register.inclusion_tag("columns/two_columns.html")
def show_two_columns(columns):
return {'columns': columns}
two_columns.html
<div class="twocol container2">
<div class="container1">
<div class="col1">
{% render_column columns[0] %}
</div>
<div class="col2">
{% render_column columns[1] %}
</div>
</div>
</div>
and then you can do whatever logic you need to change what you want to show in the render_column inclusion tag and the template it uses. I wish I could say more but it's pretty specific to what the column content depends on and how different it is in each case.