I have the following base.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel = "stylesheet" href = "{{ url_for('static', filename = 'css/base.css') }}" type = "text/css"/>
{% block head %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Then I have base_header.html, which I want for pages with a header
{% extends "base.html" %}
{% block head %}
<link rel = "stylesheet" href = "{{ url_for('static', filename = 'css/header.css') }}" type = "text/css"/>
{% endblock %}
{% block content %}
<header>
...
</header>
{% endblock %}
In order for the header to show up, I have to call super() in both blocks
{% extends "base_header.html" %}
{% block head %}
{{ super() }}
<title>Page title</title>
{% endblock %}
{% block content %}
{{ super() }}
<h1>Page header</h1>
{% endblock %}
Is it possible to have this sort of template inheritance without having to include super() every time I want to include the header? I would like it so if I decide a page needs a header, I can just change extends "base.html" to extends "base_header.html" without further changes.
You need the super() call, because otherwise your final template is replacing the content of the head block in the parent template. You could introduce a new block in the intermediate template, base_header.html:
{% block head %}
<link rel = "stylesheet" href = "{{ url_for('static', filename = 'css/header.css') }}" type = "text/css"/>
{% block more_head %}
{% endblock %}
{% endblock %}
Then your final template looks like:
{% extends "base_header.html" %}
{% block more_head %}
<title>Page title</title>
{% endblock %}
I am trying to extend my templates .
base_layout.html:
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<link rel = "stylesheet" href = "{% static 'styles.css' %}">
</head>
<body>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>
article_list.html:
{% extends 'base_layout.html' %}
{% block content %}
<h1>Article List</h1>
<div class = "articles">
{% for article in articles %}
<div class = "article">
<h2>{{ article.title}}</h2>
<p>{{ article.body }}</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
When i run this i am getting the error like this:
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 11: 'blockcontent'. Did you forget to register or load this tag?
What mistake am i doing?
I am currently trying to do some customization to the skin of the django admin panel, to make it more in line with our brand. Currently we use django-jet to spruce up the admin panel. Are custom css/html possible with django-jet? All of the comments say that I should change some html files, but I think those files are hidden from my project because django-jet takes care of them? If anyone could point me in the right direction it would be appreciated.
Thank you
This topic already discussed in django-jet github page
I will simply try to rephrase provided solution with my own words
Create your_app/templates/admin/ folder if doesn't exist
Under this folder create base_site.html file
Copy one of the following code to this file and customize based on your needs
Simple code
{# Template: your_app/templates/admin/base_site.html #}
{% extends "admin/base_site.html" %}
{% load static i18n %}
{# Setup favicon #}
{% block extrahead %}<link rel="shortcut icon" type="image/png" href="{{MEDIA_URL}}your_logo.png"/>{% endblock %}
{# Setup browser tab label #}
{% block title %}{{ title }} | {% trans "Your title" %}{% endblock %}
{# Setup branding #}
{% block branding %}
<h1 id="site-name">
<a href="{% url 'admin:index' %}">
{# Your logo here #}
<img style="background-color: white" src="{{MEDIA_URL}}your_logo.png" alt="Your Company Name" height="50%" width="50%">
<br><br>
</span> {% trans "Your Branding" %}
</a>
</h1>
{% endblock %}
More complex
{% extends "admin/base.html" %}
{% load static i18n %}
{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block branding %}
<h1 id="site-name">
<span class="icon-jet"></span> {% trans "JET DEMO" %}
</h1>
{% endblock %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "core/css/branding.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "core/css/icons/style.css" %}" />
{% endblock %}
{% block nav-global %}
<a href="https://github.com/geex-arts/django-jet" class="sidebar-link icon">
<span class="sidebar-link-label">
<span class="sidebar-link-icon jet-demo-icon-github"></span>
{% trans 'Visit GitHub page' %}
</span>
</a>
<a href="https://github.com/geex-arts/django-jet-demo" class="sidebar-link icon">
<span class="sidebar-link-label">
<span class="sidebar-link-icon jet-demo-icon-github"></span>
{% trans 'Demo site source code' %}
</span>
</a>
{% endblock %}
{% block userlinks %}
{% trans 'Log out' %}
{% endblock %}
{% block footer %}
{{ block.super }}
<!-- Yandex.Metrika counter --><script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32240214 = new Ya.Metrika({ id:32240214, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="https://mc.yandex.ru/watch/32240214" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
<!-- Google Analytics counter -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67280038-1', 'auto');
ga('send', 'pageview');
</script>
<!-- /Google Analytics counter -->
{% endblock %}
#in admin.py file
from django.utils.html import format_html
logo_url= "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"
admin.site.site_header = format_html("`<img src={url} height=50 width=50`>", url=logo_url)
Create a admin directory at templates Folder then Create Html File and name it base_site.html . Add Following Content to it .
{% extends "admin/base.html" %}
{% load staticfiles %}
{% block branding %}
<h1 id="site-name">
<a href="{% url 'admin:index' %}">
<img src="{% static 'img/my-logo.png' %}" alt="My Company"/>
</a>
</h1>
{% endblock %}
That's All you are done with custom logo.
I am trying to learn django and had create a simple website but the problem is when I try to insert bootstrap the layout is display incorrectly and then I found out the problem is with this empty:
<style type="text/css"></style>
which automatic inserted( I had tried to insert empty html and the style is still there) and here is my django template html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% include 'news/includes/header.html' %}
{% block title %}
<title>News</title>
{% endblock %}
</head>
<body>
{% include 'news/includes/nav.html' %}
<div class="row">
<div id="top-ads" class="col-md-12">fsdfsdf</div>
</div>
<div class="row">
<div id="left-ads" class="col-md-2">sdf</div>
<div id="container" class="col-md-8">
{% block container %}
{% if news_list %}
<ul>
{% for new in news_list %}
<li> {{ new.title }}</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
</div>
<div id="right-ads" class="col-md-2">yodsfddf</div>
</div>
<div class="row">
<div id="footer" class="col-md-12">sdfsdfsd</div>
</div>
</body>
</html>
Output:
edit:
OK this is getting weirder and weirder if I try to move the <style> tag even I drop at the same position all the layout work again. I surrender
I am new in Python. I have a problem with fetching DB fields to my Django template. File detail.html successfully extends my master.html, but it doesn't get anything I wrote under {% block h1 %} {% endblock %}
What should I write under views.py to make it work?
detail.html
{% extends "master2.html" %}
{% block h1 %}
<div class="box first">
<div class="row">
<div class="container">
{% for question in latest_question_list %}
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="center">
<h4>{{ question.naslov }} </h4>
<p>{{ question.opis }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block title %} Detail {% endblock %}
views.py
from django.shortcuts import render
from .models import Question
def index(request):
latest_question_list = Question.objects.all()
context = {'latest_question_list': latest_question_list}
return render(request, 'papers/index.html', context)
def detail(request, slug):
question = Question.objects.get(slug=slug)
return render(request, 'papers/detail.html', {'question': question})
index.html
{% extends "master.html" %}
{% block h1 %}
<div class="box first">
<div class="row">
<div class="container">
{% for question in latest_question_list %}
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="center">
<h4>{{ question.naslov }} </h4>
<p>{{ question.opis }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block title %} Index {% endblock %}
master2.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="/static/font.min.css" rel="stylesheet">
<link href="/static/bootstrap.min.css" rel="stylesheet">
<link href="/static/font-awesome.min.css "rel="stylesheet">
<link href="/static/main.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="0">
{% include "header.html" %}
{% include "carausel.html" %}
{% block h1 %}{% endblock %}
{% include "footer.html" %}
{% include "nav.html" %}
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap.min.js"></script>
<script src="/static/jquery.isotope.min.js"></script>
<script src="/static/jquery.prettyPhoto.js"></script>
<script src="/static/main.js"></script>
</body>
</html>
master.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="/static/font.min.css" rel="stylesheet">
<link href="/static/bootstrap.min.css" rel="stylesheet">
<link href="/static/font-awesome.min.css "rel="stylesheet">
<link href="/static/main.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="0">
{% include "header.html" %}
{% include "carausel.html" %}
{% block h1 %}{% endblock %}
{% include "footer.html" %}
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap.min.js"></script>
<script src="/static/jquery.isotope.min.js"></script>
<script src="/static/jquery.prettyPhoto.js"></script>
<script src="/static/main.js"></script>
</body>
</html>
You loop over latest_question_list, but pass {'question': question} in the context
{% extends "master.html" %}
of index.html to be changed to
{% extends "master2.html" %}