Unable to load multiple content blocks in Django 4.0 using TailwindCSS - django

Folder Structure:
mysite
-theme
--templates
---main_base.html
---theme_footer.html
---theme_menu.html
-home
--templates
---home
----main.html
main.html:
{% extends "main_base.html" %}
{% block content %}
blah blah
{% end content %}
main_base.html:
{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
{% tailwind_css %}
</head>
<body class="bg-blue-100">
<nav>
{% block navbarn %}
{% endblock %}
</nav>
{% block content %}
{% endblock %}
<footer>
{% block footer %}
{% endblock %}
</footer>
</body>
</html>
theme_menu.html:
{% extends "main_base.html" %}
{% block navbarn %}
home
{% endblock %}
theme_footer.html
{% extends "main_base.html" %}
{% block footer %}
<h1>this is a footer</h1>
{% endblock %}
So I was able to setup Django with Tailwind following the instructions on the plugin page. But I can't get the base theme to show multiple blocks. It doesn't show the menu nor the footer, just the base html template with content from main.html. Can't get it to work!

If anyone else is running into this issue, you can't use multiple extends. You instead, include it in your base.
For me, I removed the {% extends %} tags from the ancillary pages, and then included them in my theme_base.html like:{% include 'theme_footer.html' %}

Related

Is it okay to have two base.html templates in django?

Is it okay to have multiple base.html templates in django? For instance, I would have one template that would extend from base_one.html and another template extending from base_two.html. For example, this is one of the templates:
{% extends "base_one.html" %}
{% block content %}
{% endblock content %}
and this is another template:
{% extends "base_two.html" %}
{% block content %}
{% endblock content %}
Well not only two you can keep how much you want just with different names and you have to extend on different templates but yeah you can easily keep parts of the base template and extend in one according to your needs.
I'm adding three files here 1-base.html 2-base-comments.html 3-post-template.html
Here is a little expansion of my answer
Suppose this file name is base.html
# base.html
<html>
<head>
<title>Foo</title>
</head>
<body>
<header>
{% block header %}
<h1>Lorem ipsum</h1>
{% endblock %}
</header>
{% block content %}{% comment %}A wrapper around content is needed{% endcomment %}
<div class="page-content">
{% block page_content %}{% comment %} Filled in by your page templates {% endcomment %}
{% endblock %}
</div>
{% endblock %}
<footer>
{% block footer %}
<em>♥ joar</em>
{% endblock footer %}
</footer>
</body>
</html>
here is another file base-comments.html which extends the previous file.
# base-comments.html
{% extends 'base.html' %}
{% block content %}
<div class="page-content">
{% block page_content %}{% comment %} Filled in by your page templates {% endcomment %}
{% endblock %}
{% block comments %}
<footer>
<h2>Comments</h2>
<script>loadCommentsEtc()</script>
</footer>
{% endblock %}
</div>
{% endblock %}
And here is the last file which extends the 2nd base file which already extends the 1st base file 3-post-template.html
# post-template.html
{% extends 'base-comments.html' %}
{% block page_content %}
<article>
<h1>{{ post.title }}</h1>
<div class="post-body">
{{ post.body }}
</div>
</article>
{% endblock %}
I hope this works and clears your doubts.
Thanks for the question.

Django templates - include and repeat the block contents

In my home.html page, I am trying to include a header.html file along with extending base.html. Following is my code
{% extends "base.html" %}
{% block body %}
{% include 'header.html' %}
# including the block navigation from header.html
<nav id='header-nav'>{% block nav %} {% endblock %}</nav>
# including the block image from header.html
<div id='header-img'>{% block image %} {% endblock %}</div>
# Reusing the same navigation in footer from header.html
<div id='footer-nav'>{% block nav %} {% endblock %}</div>
{% endblock %}
Home.html looks like the following
{% block image %}<h1>I am image</h1>{% endblock %}
{% block nav %}<h1>I am navigation</h1>{% endblock %}
However, it returns an error - ''block' tag with name 'nav' appears more than once'.
Why is that? Is there any solutions to this?
Regards
You included {% block nav %} twice in the same template. That's why it's throwing the error. Maybe you meant to do {% block footer %}?
{% extends "base.html" %}
{% block body %}
{% include 'header.html' %}
# including the block navigation from header.html
<nav id='header-nav'>{% block nav %} {% endblock %}</nav>
# including the block image from header.html
<div id='header-img'>{% block image %} {% endblock %}</div>
# Name this block something else i.e add a new block in header.html
# and this error should clear up.
<div id='footer-nav'>{% block footer %} {% endblock %}</div>
{% endblock %}

Multiple Levels Of Inheritance Using Django Templates

I'm creating a Django project, where I want to use multiple levels of inheritance in my templates. E.g I want to do something like this:
project_base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
</head>
<body>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Then in app_base.html I extend this.
{% extends "project/project_base.html" %}
{% block title %}Generic Title{% endblock %}
{% block content %}
<img src="/dir/sub_dir/image.jpg">
{% block app_content %}
{% endblock %}
{% endblock %}
Finally I have my actual template
{% extends app_base.html %}
{% block title %}Specific Title{% endblock %}
{% block app_content %}
{% for obj in objects %}
{{ obj.name }}
{% endfor %}
{% endblock %}
The problem that I have is that when I go to load that page I see a single heading from an entirely unrelated template, and not my list of hyperlinks. What's the correct/best way to have multiple levels of inheritance for my template files?

Strip HTML from Django template block?

In my Django base.html template I have a title block:
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
In a page template I use the text from its <h1> page title in that block, so it also appears in the <title> tag, e.g.:
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %}Hello world!{% endblock %}</h1>
{% endblock %}
That all works fine. But if I want to use HTML tags within the page's <h1> like this...
{% extends 'base.html' %}
{% block content %}
{% block title %}<b>Hello</b> world!{% endblock %}
{% endblock %}
...those tags will also appear in the <title>, which isn't allowed.
Is there a way around this other than having two versions of the title: one within <h1>, and one HTML-free version within a {% block title %}? I don't think there's a way to strip HTML from a block?
You could use cycle like so:
{% extends 'base.html' %}
{% block content %}
<h1>
{% block title %}
{% cycle '' '<b>' %}Hello world!{% cycle '' '</b>' %}
{% endblock %}
</h1>
{% endblock %}
Hope this helps

How to display layout content in Twig template based on a view

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.