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 %}
Related
I have added in a template pagination I found and it works fine but wont centre on page 1 even with "text-centre" and "justify-content-center" as recommended by other answers. It looks fine on page 2 and 3... as can be seen below
{% block pagination %}
{% if is_paginated %}
<div class="text-center">
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
{% endif %}
{% endblock %}
This is the code i used and this is what it looks like on page 1 and its pulling to the right. I currently don't have any CSS code for the pagination, though I have tried different options with no luck.
If I remove the "text-centre" then page 1 is centred but pages 2/3 pull to the left, so I am a bit stumped.
p.s this is my first django post so please let me know if it needs more information etc.
Thank you!
edit: Added this to CSS but didn't work -
.pagination {
justify-content: center;
}
tried d-flex class from a different answer, page 1 centred pages 2/3 pull left:
{% block pagination %}
{% if is_paginated %}
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 py-5 border d-flex">
<ul class="pagination mx-auto">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
Managed to figure it out, in case anyone has the same issue, i needed to use similar layout classes to those i had on the rest of the page (silly me), such as "container-wrap" and "col-md-6 col-md-offset-3 text-center":
{% block pagination %}
{% if is_paginated %}
<div class="container-wrap">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="pagination mx-auto">
{% if page_obj.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
</div>
</div>
</div>
{% endif %}
{% endblock %}
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 have created a admin panel on the frontend and would like to show different layouts if they are on the index.html or if they are on pages after /admin e.g:
/admin/dashboard
/admin/posts
/admin/media
My if statement:
{% if request.path == "/admin" %}
It doesn't work for some reason and I can't figure out why. This is an example of the whole if:
<div class="row">
{% if request.path == "/admin" %}
<div class="col-md-full">
{% else %}
<div class="col-md-7 left">
{% block main %}{% endblock %}
</div>
{% endif %}
{% if request.path == "/admin" %}
{% trans "Empty" %}
{% else %}
<div class="col-md-3 right">
<div class="panel panel-default">
<div class="panel-body">
{% block right_panel %}
{% endblock %}
</div>
</div>
</div>
{% endif %}
</div>
what about?
{% if '/admin/' in request.path %}
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.
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'