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 %}
Related
Folder Structure:
mysite
-theme
--templates
---main_base.html
---theme_footer.html
---theme_menu.html
-home
--templates
---home
----main.html
main.html:
{% extends "main_base.html" %}
{% block content %}
blah blah
{% end content %}
main_base.html:
{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
{% tailwind_css %}
</head>
<body class="bg-blue-100">
<nav>
{% block navbarn %}
{% endblock %}
</nav>
{% block content %}
{% endblock %}
<footer>
{% block footer %}
{% endblock %}
</footer>
</body>
</html>
theme_menu.html:
{% extends "main_base.html" %}
{% block navbarn %}
home
{% endblock %}
theme_footer.html
{% extends "main_base.html" %}
{% block footer %}
<h1>this is a footer</h1>
{% endblock %}
So I was able to setup Django with Tailwind following the instructions on the plugin page. But I can't get the base theme to show multiple blocks. It doesn't show the menu nor the footer, just the base html template with content from main.html. Can't get it to work!
If anyone else is running into this issue, you can't use multiple extends. You instead, include it in your base.
For me, I removed the {% extends %} tags from the ancillary pages, and then included them in my theme_base.html like:{% include 'theme_footer.html' %}
I am familiar with the concept of extends and include with django templates.
However, I am trying to build up pages with components (which relates more to the "include" approach). Unfortunately, some elements on a page should be added in the header of the page (e.g. stylesheets) and some should be added at the end of the page (e.g. scripts).
Is there a way to declare blocks (e.g. {% block extraheaders %}<link...>{% endblock %}) in the included files so they are placed in the correct region of the page?
Perhaps you are looking for the following setup:
<!-- base.html -->
<html>
<head>
{% block css %}
<link href="/css/bootstrap.css">
<link href="/css/base.css">
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
{% block js %}
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/base.js"></script>
{% endblock %}
</body>
</html>
{% extends base %}
{% block css %}
{{ block.super }}
<link href="/css/home-page.css" />
{% endblock %}
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}
{% block js %}
{{ block.super }}
<link href="/js/home-page.js" />
{% endblock %}
...with the main point being that we can use {{ block.super }} to place specific resources into a parent template's blocks through inheritance.
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 %}
I have two files, base.html and homepage.html. Homepage extends base, and adds to block extra. Base should render block extra in a span within the body, but doesn't.
base.html:
{% load sekizai_tags %}
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<span style="color: red;">{% render_block "extra" %}</span>
{% block 'content' %}
{% endblock %}
</body>
</html>
homepage.html:
{% extends 'base.html' %}
{% load sekizai_tags %}
{% block 'content' %}
<p>that's some sweet content ya got there lad</p>
{% addtoblock "extra" %}wow{% endaddtoblock %}
{% endblock %}
And the output:
What really simple thing am I missing?
Aha, I was missing a context preprocessor from my templates.
'sekizai.context_processors.sekizai',
I'm trying the django-cms tutorial,
There is something I don't understand at the end of this part :
I have to add a template at /mysite/templates/polls/base.html. But this file has to begin with {% extends 'base.html' %}.
Is that normal? Is the file this line refers to an other base.html file? The one in the parent directory perhaps? I'm not sure at all.
Thank you for your help.
Extending from a base.html like that would suggest, like I do, that you have a base.html file at the root template directory of your project to handle the core markup;
{% load cms_tags menu_tags sekizai_tags cache i18n %}
{% load static from staticfiles %}
<head>
<meta charset="utf-8">
{% block head %}{% endblock head %}
<title>
<script type="text/javascript"
src="{% static 'project/external/jquery-1.11.2.min.js' %}"></script>
{% render_block "css" %}
{% render_block "js" %}
{% block styles %}{% endblock styles %}
{% block scripts %}{% endblock scripts %}
</head>
<body>
{% cms_toolbar %}
{% block content %}
{% endblock content %}
{% block footer-scripts %}{% endblock footer-scripts %}
</body>
</html>
That way, when you setup templates in your apps you can start with a base.html for that app which may extend the base blocks for the head tag or elsewhere.
Usually I have a setup similar to myproj/templates and then app templates like myproj/project/templates and myproj/app1/templates. That first templates dir sits next to manage.py and I use the project dir to hold settings & any templates specific to that project like types of CMS page; article.html etc.
You don't have to extend base.html but if you don't, then you need to recreate all that markup again so by using this template model you'll be able to limit repeated markup.