I want to put all my link tags in <head>.
However, I don't know how to render all the link tags in the head of my DOM when I include shared templates via the built in include tag. So my link tags are rendered wherever I happen to include my shared templates. I've added code below to better illustrate my problem.
Layout:
<html>
<head>
{% block references %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Extending the layout with a template:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% endblock %}
...
{% include "mySharedTemplate.html" %}
...
Shared template. Note, this template is shared among a few but not all of my templates:
{% load staticfiles %}
<link rel="stylesheet" href="{% static "mySharedTemplateStylesheet.css" %}" type="text/css">
...
Is there a way to put all my link tags in the head of my DOM while using shared templates? Is there a completely different or better way to do this? I'm a week into my first django project, so even suggestions of basic features may help me!
I think you are lookig for {{block.super}}
for example Layout.html:
<html>
<head>
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "mySharedTemplateStylesheet.css" %}" type="text/css">
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
and in Template.html:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
{{block.super}}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% endblock %}
if you do not want to use the mySharedTemplateStylesheet.css for all your pages you only do not use {{block.super}} like Template2.html:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% endblock %}
layout.html:
<html>
<head>
{% block references %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
layout-with-shared-css.html:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% endblock %}
template without shared template:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% endblock %}
template with shared template:
{% extends "layout-shared-css.html" %}
{% load staticfiles %}
{% block references %}
{{ block.super }}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% endblock %}
I found a hacky way to do this. I'm not super pleased with it. I found that I can use simple if blocks to toggle which sections of my template I want to render with the include tag. This allows me to include my references and content separately. (Note, I could solve this problem by separating my references and content into separate files. But that seems more tedious than this solution.)
I like this solution better than the current answers because it allows my shared template to be isolated from other templates. Keeping this modular design is important when working with functionality that you can mix and match (which is what I'd like to do with my shared templates).
Template:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% include "mySharedTemplate.html" with references="True" %}
{% endblock %}
...
{% include "mySharedTemplate.html" with content="True" %}
...
Shared Template:
{% if references %}
{% load staticfiles %}
<link rel="stylesheet" href="{% static "mySharedTemplateStylesheet.css" %}" type="text/css">
{% endif %}
{% if content %}
...
{% endif %}
To illustrate why I think my modular design is important:
Imagine I have a many shared templates and many regular templates that each use the shared templates in different ways. My modular method makes it easy for regular templates to work with shared templates in flexible ways that best suit them.
Template 2:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% include "mySharedTemplate.html" with references="True" %}
{% include "mySharedTemplate2.html" with references="True" %}
{% endblock %}
...
{% include "mySharedTemplate.html" with content="True" %}
{% include "mySharedTemplate2.html" with content="True" %}
...
Template 3:
{% extends "layout.html" %}
{% load staticfiles %}
{% block references %}
<link rel="stylesheet" href="{% static "myStylesheet.css" %}" type="text/css">
{% include "mySharedTemplate2.html" with references="True" %}
{% include "mySharedTemplate3.html" with references="True" %}
{% include "mySharedTemplate4.html" with references="True" %}
{% endblock %}
...
{% include "mySharedTemplate4.html" with content="True" %}
{% include "mySharedTemplate3.html" with content="True" %}
{% include "mySharedTemplate2.html" with content="True" %}
...
Notice that Template 2 and Template 3 can use the the shared templates in ways that suit them without much boiler plate code.
Use verbatim tag to stop template engine to interpret your tags to be his tags.
{% verbatim %}
{{if dying}}Still alive.{{/if}}
{% endverbatim %}
Django and Chartjs template conflict
Related
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 %}
All my pages inherit from layout.html and i want to import different css files for each file like articles.html, login.html, dashboard.html etc.
I created a folder named as "static" in my project and created main.css in this folder.
Then I tried to import css file in articles.html but i can't import
Here is my codes in articles.html:
{% extends 'layout.html' %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
{% endblock head %}
{% block body %}
{% endblock body %}
And It's my file explorer page:
enter image description here
One solution is to add CSS directly in the child template.
{% extends 'layout.html' %}
{% block head %}
<style type="text/css">
#upload {
background: #b81c1c;
}
</style>
{% endblock head %}
{% block body %}
<p id="upload">{{ form.text.label }} <br> {{ form.text(size=14) }} <br>
{% endblock body %}
base.html
<!DOCTYPE html>
<html>
<head>
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
head.html
<title>Example</title>
body.html
<h1>Example Django</h1>
Using django, you can render the template "base.html" but replace the blocks "head" and "body", respectively, by templates "head.html" and "body.html"?
If i understand you right, you need include tag
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include
<!DOCTYPE html>
<html>
<head>
{% include "head.html" %}
</head>
<body>
{% include "body.html" %}
</body>
</html>
{% include "base.html" %}
{% block head %}
{% include "head.html" %}
{% endblock %}
{% block body %}
{% include "body.html" %}
{% endblock %}
New to Django, I want to use different css files for different pages - i.e. page1.css for page1.html, page2.css for page2.html. Is there a way to do this while still extending base.html?
In base.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}Default Title{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- css -->
if page1.html
<link rel="stylesheet" href="{% static "css/page1.css" %}">
if page2.html
<link rel="stylesheet" href="{% static "css/page2.css" %}">
if page3.html
<link rel="stylesheet" href="{% static "css/page3.css" %}">
</head>
<body class="{% block body_class %}{% endblock %}">
{% block content %}{% endblock%}
</body>
</html>
In page1.html
{% extends "base.html" %}
{% load staticfiles %}
{% block body_class %}page1{% endblock %}
{% block title %}Page1{% endblock %}
{% block content %}
Page 1
{% endblock content %}
You can use the same concept that applies to {% block content %} in that you can fill it in or extend it on a page by page basis.
Hence, in base.html, create a block called styles in the head section (or anywhere you want to load your CSS):
{% block styles %}
{% endblock %}
Now, you can extend this block on a per page basis in any of your templates that use base.html:
Example: page1/template-view.html
{% extends "base.html" %}
{% load staticfiles %}
{% block styles %}
<link rel="stylesheet" href="{% static 'css/page1.css' %}">
{% endblock %}
I'm writing an app using the Django Python web framework. I added my apps to the INSTALLED_APPS in settings.py and my templates are served without problems. But, concerning the static files, i have a little problem with them. I wanted to use the default parameters in STATICFILES_FINDER :
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
When i want to include a css file for example, in my template i just do (supposing '/' will be my static/applicationName in my application folder) :
<link rel='stylesheet' href="/css/style.css">
Am i doing it wrong, and if so, what's the good way to deal with static files ?
UPDATE :
My base.html template :
{% load staticfiles %}
<!doctype html>
<html>
<head>
{% block head %}
<meta charset='utf-8'>
<title> {% block title %} {% endblock %} - Find Something </title>
<link rel='stylesheet' href="{% static 'css/style.css' %}">
{% endblock head %}
</head>
<body>
</body>
</html>
And my inheriting template is :
{% extends "frontend/base.html" %}
{% block title %} {{ title }} {% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% static %}
<link rel='stylesheet' href="{% static 'css/style.css' %}">
{% block head %}
{{block.super}}
{% endblock %}