Im using django and pinax the first .I started a new pinax project but found there was no navigation bar on the homepage.Then I add django-user-accounts to the project ,but dont know how to add "logout" and "settings" buttons to the homepage.Shall I modify the site_base.html ,and how?
This is site_base.html
{% extends "theme_base.html" %}
{% load staticfiles %}
{% load i18n %}
{# remove to bring back topbar #}
{% block topbar_base %}{% endblock %}
{% block style_base %}
<link href="{% static "pinax/css/theme.css" %}" rel="stylesheet">
<link href="{% static "css/site.css" %}" rel="stylesheet">
{% block extra_style %}{% endblock %}
{% endblock %}
{% block extra_head_base %}
{% block extra_head %}{% endblock %}
{% endblock %}
{% block footer %}
{% include "_footer.html" %}
{% endblock %}
{% block extra_body_base %}
{% block extra_body %}{% endblock %}
{% endblock %}
{% block script_base %}
<script src="{% block jquery_src %}{% static "pinax/js/jquery.js" %}{% endblock %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "pinax/js/theme.js" %}"></script>
{% block extra_script %}{% endblock %}
{% endblock %}
Delete this
{# remove to bring back topbar #}
{% block topbar_base %}{% endblock %}
And your navbar will return. Now you add a navbar to it too.
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 am trying to modify the part {% block contentLeft%}.
However, I can not change this part only. When I use {{super}} I get the full block but I can not change it.
I can not edit a block in a block.
I used includes, I tried to remove the block tags for the body however I can not modify the tag contentLeft, contentCenter, contentRight
I am also looking to change the name of modules in the administration page, do you have an idea? I changed the name of the models but I can not change the name of the "application"
Default value it's not a good solution (i post a sample exemple)
{% extends "base.html" %}
{% block title %}Ma page Date{% endblock %}
{% block body %}
{{ block.super }}
{% block contentLeft %}
essai
{% endblock %}
{% block contentCenter %}
centre
{% endblock %}
{% block contentRight %}
droite
{% endblock %}
{% endblock %}
{% load static %}
{% block body %}
<body>
{% block header %}
{% include 'header.html' %}
{% endblock %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
{% block contentLeft %} Toto1 {% endblock %}
</div>
<div class="col-md-8">
{% block contentCenter %} Toto2 {% endblock %}
</div>
<div class="col-md-2">
{% block contentRight %} Toto3 {% endblock %}
</div>
</div>
</div>
{% block footer %}
{% include 'footer.html' %}
{% endblock %}
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/mdb.js' %}"></script>
</body>
{% endblock %}
<!DOCTYPE html>
<html lang="fr">
{% block head %}
{% include 'head.html' %}
{% endblock %}
{% block body %}
{% include 'body.html' %}
{% endblock %}
</html>
I have two pages that extends a base template. Each page has their own external js which i need to load. For the time being, i have put both of them before closing body tag in the base which means that both JS are loaded on both pages. How is it possible to load specific JS for specific page?
Yes you can do it:
1. base.html
<html>
<head>
<title>Foobar</title>
</head>
<body>
{% block content %}{% endblock %}
{% block js %}{% endblock %}
</body>
</html>
2. yourpage.html
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<p>your content!</p>
{% endblock %}
{% block js %}
<script src="{% static 'js/foobar.js' %}"></script>
{% endblock %}
So I am creating a page in my Django project that essentially just uses the Django admin app header and footer.
I have a template folder in the root of my project where I have my base.html.
/templates/admin/base.html
{% load i18n static %}<!DOCTYPE html>
{% load static %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'js-stack/assets/css/spark-styles.css' %}" />
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}" />
{% block extrastyle %}{% endblock %}
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}" />{% endif %}
{% block extrahead %}{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
</head>
{% load i18n %}
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
data-admin-utc-offset="{% now "Z" %}">
<!-- Container -->
<div id="container">
{% if not is_popup %}
<!-- Header -->
<div id="header">
<div id="branding">
{% block branding %}{% endblock %}
</div>
{% block usertools %}
{% if has_permission %}
<div id="user-tools">
{% block welcome-msg %}
{% trans 'Welcome,' %}
<strong>{% firstof user.get_short_name user.get_username %}</strong>.
{% endblock %}
/ View Analytics /
{% block userlinks %}
{% if site_url %}
{% trans 'View site' %} /
{% endif %}
{% if user.is_active and user.is_staff %}
{% url 'django-admindocs-docroot' as docsroot %}
{% if docsroot %}
{% trans 'Documentation' %} /
{% endif %}
{% endif %}
{% if user.has_usable_password %}
{% trans 'Change password' %} /
{% endif %}
{% trans 'Log out' %}
{% endblock %}
</div>
{% endif %}
{% endblock %}
{% block nav-global %}{% endblock %}
</div>
<!-- END Header -->
{% block breadcrumbs %}
<div class="breadcrumbs">
{% trans 'Home' %}
{% if title %} › {{ title }}{% endif %}
</div>
{% endblock %}
{% endif %}
{% block messages %}
{% if messages %}
<ul class="messagelist">{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
{% endfor %}</ul>
{% endif %}
{% endblock messages %}
<!-- Content -->
<div id="content" class="{% block coltype %}colM{% endblock %}">
{% block pretitle %}{% endblock %}
{% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
{% block content %}
{% block object-tools %}{% endblock %}
{{ content }}
{% endblock %}
{% block sidebar %}{% endblock %}
<br class="clear" />
</div>
<!-- END Content -->
{% block footer %}<div style="padding: 10px 40px;" id="footer"><img src="{% static 'wifispark-logo.png' %}"></div>{% endblock %}
</div>
<!-- END Container -->
</body>
</html>
So this is a copy of the admin app base.html, but with a few modificatio0ns such as an image in the footer. This is all working as expected when I log into the admin app.
I also have another app called 'analytics' inside my project. Below is the template for it where I have extended the admin/base.html.
{% extends "admin/base.html" %}
{% load static %}
{% block content %}
<div class="container-fluid">
</div>
{% endblock content %}
Now, when I view my analytics page it loads with all the expected header and footer styling from the admin/base.html, but there is content missing such as the admin app title and the menu links, both of which are pulled through from admin app template tags.
Can anyone shed any light on what I am doing wrong or am missing?
Many thanks,
James
In your View, the one that renders the analytics page make sure you pass user, site_header, has_permission, and site_url as parameters.
These parameters can be extracted like this:
from django.contrib.admin import AdminSite
class MyAdminSite(admin.AdminSite):
pass
mysite = MyAdminSite()
And then return them while rendering your template:
def get(self, request):
return render(request, 'analytics.html', {'user': request.user,'site_header': mysite.site_header,'has_permission': mysite.has_permission(request), 'site_url': mysite.site_url})
Hope that helps
I have this in my base.html template file:
<body class="{% block body_class %}{% endblock %}">
Then this in my view template file:
{% block body_class %}my_class{%%}
The outputted HTML looks like this:
<body class="my_class">my_class ...
Am I missing something?
UPDATE
base.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="{% block body_class %}{% endblock %}">
{% block header %}{% endblock %}
{% block content %}{% endblock %}
{% block footer %}
{% endblock %}
</body>
</html>
app/base.html
{% extends 'base.html' %}
app/view.html
{% extends 'app/base.html' %}
{% block content %}
{% block body_class %}login{% endblock %}
{% endblock %}
SOLVED
Figured out while typing the update. The problem was in using the {% block body_class %} inside {% block content %}