I am wondering how to create a jinja2 template that would allow my to put my header into a variable where I can extend the base file and then call upon the header in my child file.
Currently my code for the parent is:
{% block head %}
<div class="wrapper col2">
<div id="topbar">
<div id="topnav">
<ul>
<ul>
<li>Home</li>
<li>Sign in/up</li>
<li>Admin console
<ul>
<li>Console</li>
<li>Staff Management</li>
<li>ALERTS</li>
<li>Sign up Shooters</li>
</ul>
</li>
<li >Contact Us</li>
<li class="last">logout</li>
</ul>
</div>
<br class="clear" />
</div>
<hr>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }} </li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
{% endblock %}
My child template is:
{% extends "Header.html" %}
{% block head %}
{% endblock %}
<h1>CREATE SHOOT</h1>
<form action="" method="post" name="form">
{{ form.hidden_tag() }}
<p>
<h2>Name of shoot:</h2>
{{ form.nameofshoot(size=40) }}<br>
<h2>Number of days in shoot:</h2>
{{ form.day}}
<p><input type="submit" value="Create Shoot"></p>
</form>
Am I doing something wrong or is there another approach I can take?
What you need to do is remove from your child template the lines {% block head %}{% endblock %}
Because in your child template you call {% extends "Header.html" %}, all of the content declared in Header.html (no matter what blocks it is in) will automatically be included. That's the job of extends.
By adding the {% block head %}{% endblock %} in your child template, what you have effectively said is "take everything from Header.html, but override everything in the 'head' block with what I specify in my child template". Then, because there is nothing in the block defined in your child template, you are replacing the content defined in your Header.html file with nothing.
You want to use the {% block blockname %} notation to specify what you want to change in the child template, not what you want to keep the same.
This page on inheritence is the relevant section of the Jinja documentation, and provides a nice example.
Related
I want to add a navbar, messages and the content to the base.html, is this the right way to do it? I also want the profile to be as an extension of navbar so when you hover on profile buttton from navbar profile pops up. For now, I cannot see the navbar with block, but it work with include.
base.html
{% block nav %}'
{% endblock nav%}
{% block messages %}
{% endblock messages %}
{% block content %}
{% endblock content %}
navbar.html, should I use here include profile or a profile block?
{% extends 'app/base.html' %}
{% block nav%}
// some more code here..
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Profile</a>
<div class="dropdown-menu p-4" aria-labelledby="dropdown04">
{% include 'users/profile.html' %}
</div>
</li>
{% endblock nav%}
messages.html
{% extends 'app/base.html' %}
{% block messages %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
<div class="swal2-icon swal2-error swal2-animate-error-icon" style="display: flex;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span>
</div>
{% endfor %}
{% endif %}
{% endblock messages %}
If you want to declare a coding block in the template that can be overridden by a child template, you can use block tag-
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
On the other hand, If you want to load a template inside other template you should use include tag.
{% include "nav.html" %}
You don't have to put the include tag inside a block tag if you don't want to use different navbar for different templates. So in your case-
{% include "nav.html" %}
{% block messages %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
<div class="swal2-icon swal2-error swal2-animate-error-icon" style="display: flex;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span>
</div>
{% endfor %}
{% endif %}
{% endblock messages %}
{% block content %}
{% endblock content %}
I'm trying to have two separate menus in my django-cms app. One for the header and another with a different set of links for the footer:
[ Logo ] Link_A Link_B Link_C Link_D
... content ...
Link_E Link_F Link_G Link_H
Using baked in {% show_menu %}, will show all of the pages registered, links A - H, and doesn't allow me to separate the two menus.
How can I create two separate menus?
Depends what you want to do really, but I've got a base template which has a navigation menu at the top and a sitemap submenu at the bottom.
So starting with the navigation;
{% show_menu 1 100 100 100 "partials/navigation.html" %}
Which uses the template;
{% load cms_tags menu_tags cache cms_page %}
{% for child in children %}
<li>
<a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">
{{ child.get_menu_title }}
</a>
{% if child.children and child.level <= 4 %}
<ul>
{% show_menu from_level to_level extra_inactive extra_active template '' '' child %}
</ul>
{% endif %}
</li>
{% endfor %}
Then the sitemap;
{% show_sub_menu 2 1 1 "partials/sitemap.html" %}
And sitemap.html
{% load cms_tags cms_page cache %}
{% if children %}
{% for child in children %}
<ul class="site-footer__column">
<li>
<h4>
<a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">
{{ child.get_menu_title }}
</a>
</h4>
</li>
{% if child.children %}
{% for baby in child.children %}
<li class="footer_sub">
<a href="{{ baby.attr.redirect_url|default:baby.get_absolute_url }}">
{{ baby.get_menu_title }}
</a>
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
{% endif %}
Understanding the options (numbers) you can provide for a menu can enable you to display different parts of your site, but if the built in menu tags don't suit your needs, you could write a custom menu tag.
The standard menu docs are here; http://docs.django-cms.org/en/3.2.2/reference/navigation.html
And here are the docs for customising your menus; http://docs.django-cms.org/en/3.2.2/how_to/menus.html
I have setup my nav bar in my base.html as follows
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
{% if user.is_authenticated %}
<li>Logout</li>
<li>My Profile</li>
{% else %}
<li>Login</li>
<li>Register</li>
{% endif %}
</ul>
Now the problem is that I Don't want to execute the {% if %} block when user is not authenticated and when I am rendering a particular template page i.e
create_thing.html
{% extends 'layouts/base.html' %}
{% block title %} Create a Thing
- {{ block.super }}{% endblock %}
{% block content %}
<div id="content">
<h1> Create a Thing </h1>
<form role="form" action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit" />
</form>
</div>
{% endblock %}
Simply copying the contents from Base and pasting it after removing doesn't help. It still executes base.html and gets inside the if statement and shows an error because slug wont be defined until I have filled details in create_thing.html.
Try nesting the {% if %} clause in another {% if not aux_var %} clause. Whenever you don't want to execute the first if, pass "aux_var":1 to the renderer as context.
I'd like to replace the standard Markdown implementation in a Django blog I'm building with Github-flavoured Markdown. I'd like to use Misaka, and I've thrown together my own custom template tags. Unfortunately, something has gone awry.
Here is my template tags file, which is in blog/templatetags/gfm.py. The __init__.py file is present in the same folder:
from django import template
from django.template.defaultfilters import stringfilter
import misaka as m
register = template.Library()
#register.filter(is_safe=True)
#stringfilter
def gfm(value):
rendered_text = m.html(value,
extensions=m.EXT_FENCED_CODE,
render_flags=m.HTML_ESCAPE)
return rendered_text
And here is one of my templates:
{% extends 'layout/base.html' %}
{% block header %}
{% endblock %}
{% block content %}
{% load gfm %}
{% if object_list %}
{% for post in object_list %}
<div class="post">
<div class="page-header">
<h1>{{ post.title }}</h1>
</div>
{{ post.text|gfm }}
<p>Posted {{ post.pub_date }}</p>
<p>
{% for category in post.categories.all %}
<a class="badge badge-info" href="/category/{{ category.slug }}/">{{ category.title }}</a>
{% endfor %}
</p>
</div>
{% endfor %}
<br />
<ul class="pager">
{% if page_obj.has_previous %}
<li class="previous">Previous Page</li>
{% endif %}
{% if page_obj.has_next %}
<li class="next">Next Page</li>
{% endif %}
</ul>
{% else %}
<div class="post">
<p>No posts matched</p>
</div>
{% endif %}
{% endblock %}
The outputted text is being returned wrapped in double quotes, which breaks the whole thing. Otherwise, the markup generated seems correct.
Where have I gone wrong here? I know it's not the data in the database as if I use pdb to get the values of value and rendered_text inside the function, they are rendered correctly. For example, here is the plain text version of one post, as printed by pdb:
u'A Python application:\r\n\r\n print "Hello world"'
And here is the version rendered in Markdown using Misaka:
u'<p>A Python application:</p>\n\n<pre><code>print "Hello world"\n</code></pre>\n'
I'm fairly experienced with Django, but I'm new to custom template tags.
Use autoescape tag.
{% autoescape off %}{{ post.text|gfm }}{% endautoescape %}
Alternatively you can use safe filter.
{{ post.text|gfm|safe }}
I have the following code in a template and am having difficulty showing when a user is logged in. I will be able to login, but when I revisit the page, it shows that I'm still not authenticated.
{% extends "base.html" %}
{% load catalog_tags %}
{% block site_wrapper %}
<div id = "main">
Skip to main content
<div id = "banner">
<div class="bannerIEPadder">
<div class="cart_box">
{% cart_box request %}
</div>
</div>
</div>
<div style="float:right;">[search box goes here]</div>
<div id="navigation">
<div class="navIEPadder">
<!--navigation tabs at the top of each page -->
{% comment %}{% include "tags/navigation.html" %} {% endcomment %}
{% category_list request.path %}
</div>
</div>
<div id="middle">
<div id="sidebar">
<!--<div class="sidebarIEPadder">[search box goes here]</br>
{% comment %}{% category_list request.path %}{% endcomment %}
</div>-->
</div>
<div id="content">
<!-- <a name = "content"></a>-->
<div class="contentIEPadder">
{% block content %}{% endblock %}
</div>
</div>
</div>
<div id="footer">
<div class="footerIEPadder">
{% footer_links %}
</div>
</div>
</div>
{% endblock %}
And here's the file it references. Since this will be an extension of all templates, is there something I need to consider?
###category_list.html
<!--<h3>Categories</h3>-->
<!--<ul id="categories">-->
<ul>
{% with active_categories as cats %}
{% for c in cats %}
<li>
{% comment %}
{% ifequal c.get_absolute_url request_path %}
{{c.name}}
{% else %}
{% endcomment %}
<div>{{c.name}}</div>
{% comment %}{% endifequal %}{% endcomment %}
</li>
{% endfor %}
<div class="fr">
<ul>
<li>
{% if user.is_authenticated %}
Logout
{% else %}
Login
{% endif %}
</li>
</div>
{% endwith %}
</ul>
<div class="cb"></div>
Am I missing something here?
You need to pass a RequestContext to the template. The easiest way to do this is to import django.shortcuts and use the render method in your view:
return render(request, "my_template.html")
Is django.contrib.auth.context_processors.auth in your TEMPLATE_CONTEXT_PROCESSORS setting.py?
Do you use requestContext rendering template?
Check that sessions are enabled: MIDDLEWARE_CLASSES should contains 'django.contrib.sessions.middleware.SessionMiddleware'