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 %}
Related
I am building a webapp with Django and Python 3.7 and I'm really confused by this simple thing:
These are my templates. They are all in the same directory.
When I try to call {% extends 'store.html' %} , I get TemplateDoesNotExist at /publicaciones/ and it points to store.html. This is in publicaciones.html. Here's the template:
publicaciones.html:
{% extends "store.html" %}
{% load static %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/style_reset-pass.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Publicaciones</title>
</head>
<body>
<div class="container">
{% block content %}
{% for item in items %}
{{ item|crispy }}
{% endfor %}
{% endblock content %}
</div>
</body>
</html>
What am I missing?
Please ask if you need any other code. I'll answer immediately.
It should be {% extends "store/store.html" %}
You have path as templates/store/store.html
You refer to the super template just like you refer to a template in the view for example. In case you thus should refer to it as "store/store.html":
{% extends "store/store.html" %}
Note that if you extend a template, you can only fill in the {% block … %}…{% endblock %} template blocks [Django-doc], so you can not just write an entire html file, that would be rather non-sensical, since otherwise there is no reason to inherit the template.
Adding to the point #baldr made, make sure you specify the template folder in your settings.py file (properly): like 'DIRS': [os.path.join(BASE_DIR, 'templates')] in the TEMPLATES section
In order to help me get some experience with CSS, HTML and Bootstrap I made a super quick blog with Pelican and I am trying to make my own template. I started with a few lorum posts just to have something.
Following multiple tutorials and reading for the last several hours, I created a theme directory in my project and placed a template directory in that.
I created a very simple base.html and index.html in the template directory.
base.html
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h2>This is my base template</h2>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
and index.html
{% extends "base.html" %}
{% block title %}{{ SITENAME }}{% endblock %}
{% block content %}
<h1>{{ SITENAME }}</h1>
{% for article in articles %}
<h2>{{ article.title }}</h2>
<label>Posted on <strong>{{ article.date }}</strong></label>
{{ article.content|truncate(110) }}
{% else %}
No posts yet!
{% endfor %}
{% endblock %}
I set THEME = 'theme' in pelicanconf.py. I have tried generating my site with make html and with pelican content -s pelicanconf.py -t theme but it just won't generate using my base.html and index.html files.
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 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
I have a website i'm putting together with python and django.
I have a template html page, Speakers.html, that extends Base.html. Base.html has the stylesheet base.css.
Speakers.html is displaying with base.css styling as it should be, my problem is that I want Speakers.html to have additional styling from another stylesheet, speakers.css.
I've been trying to figure it out but speaker.css doesn't seem to be applied, infact i've just noticed in the cmd output that the file speaker.css isn't being loaded at all.
I tried putting it in a block, which is the code you now see below.. I had to repeat {% load static %} to get rid of an error about it expecting the endblock but it doesn't seem to have made a difference.
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
{% block additionalcss %}{% endblock %}
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
<!-- Now i'm trying to load an additional stylesheet -->
{% block additionalcss %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
For testing purposes i've put the following rule in speakers.css:
*
{
color: red;
}
So I reason the text on Speakers.html should all be red if it were working.
Try using blocks in the templates.
Something like:
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
{% block css %}{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
By defining blocks in the parents and then specifying them in the children the css files will be inserted into your template.