In my project in Django 2+, I have created a base.html template which wraps the other content templates.
base.html
<html>
<head>
<title>Example.com</title>
</head>
<body class="homepage">
<!-- other HTML codes here -->
{% block content %}
{% endblock content %}
<!-- other HTML codes here -->
</body>
</html>
and in one of content template
pages/about.html
{% extends 'base.html' %}
{% block content %}
This is about page of example.com
{% endblock content %}
Now, I have to change the class of body tag on base.html page to aboutpage
How can I pass the value aboutpage from content template to base.html?
In base generic template
<body class="{% block body_class %}{% endblock %}">
<!-- other HTML codes here -->
{% block content %}
{% endblock content %}
<!-- other HTML codes here -->
</body>
Then in the child template, just define the block:
{% block body_class %} YOUR_CSS_CLASS {% endblock %}
This will give you
<body class="YOUR_CSS_CLASS">...</body>
and you have to define this class in a linked CSS.
Related
views.py
def base(request):
return render(request,"base.html",{'':''})
def index(request):
return render(request,"index.html",{'':''})
base.html
<html>
<head>ppppppppp</head>
<body>
<h1>this is base template</h1>
</body>
</html>
index.html
{% extends "base.html" %}
{% block content %}
<body>
<h1>
Welcome to my app
</h1>
</body>`
{% endblock content %}
Here the issue is django is not at all recognising index.html only displaying extended template.
The correct flow here is to create really :) base template:
base.html
<html>
<head>ppppppppp</head>
<body>
{% block content %} {% endblock %}
</body>
</html>
And in your child templates you can override {% block content %} but leaving <head> etc common for all templates:
index.html
{% extends "base.html" %}
{% block content %}
<h1>Welcome to my app</h1>
{% endblock %}
Also you should not write tag like {% endblock BLOCKNAME %}, just {% endblock %}
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 %}
wanip.html
base.html
use base.html in wanip.html ,can't show table .how can I use base.html right?
You should create block in base.html and override that block in wanip.html.
Just for your reference.
base.html
<html>
<head>
....
</head>
<body>
....
{% block content %}
....
{% endblock content %}
....
</body>
</html>
And wanip.html will be like
{% extends "base.html" %}
{% block content %}
{{block.super}}
<table>...</table>
{% endblock content %}
Image a base template like this:
{% set styles = [] %}
<!DOCTYPE html>
<html>
<head>
{% for style in styles %}
<link href="{{style}}" ref="stylesheet" type="text/css; charset=utf8">
{% endfor %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I want to append to the styles variable from a child-template, but it will yield "styles is undefined".
{% extends "base.html" %}
{% do styles.append("index.css") %}
One solution to this would be to define the styles as an empty list when rendering the template from the Python code. But I do not want to add styles=[] to every template I render.
Unfortunately, importing doesn't work either. It won't tell you anymore that "styles is undefined", but it simply won't render in the head section of the parent template.
{% extends "base.html" %}
{% from "base.html" import styles %}
{% do styles.append("index.css") %}
How can this be solved?
PS: You need to add jinja2.ext.do to the extensions if you want to test it.
You can achieve this using blocks
base.html would look like this
<!DOCTYPE html>
<html>
<head>
<link href="{{style}}" ref="stylesheet" type="text/css; charset=utf8"> {# all global css includes you need #}
{% block styles %}
{% endblock styles %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
and then child.html would look like this:
{% extends "base.html" %}
{% block styles %}
<link href="{{style}}" ref="stylesheet" type="text/css; charset=utf8"> {# all css files you need #}
{% endblock styles %}
#base.html
<html>
<head><title>Hello world</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
#child.html
{% extends base.html %}
{% block content}
This is the content that
comes here
{% endblock %}
but the html output of base.html not displaying content.? Why this template language not working ?
Template inheritance includes the parent template in the child, not the other way around.
Render child.html and you'll see your content surrounded by the base.html (parent) markup.
Also, you need to quote the parent template name:
{% extends "base.html" %}
{% block content %}
Content!
{% endblock %}