I am trying to do the following
{% block csslinks %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/style.css' %}">
{% endblock %}
I know it is impossible, but what are the alternatives? The was a similar question at Django : Is it impossible to static tag into block tag?
I was suggested there to {% load staticfiles %} didn`t answer what to write here?
{% block csslinks %}
<link rel="stylesheet" type="text/css" href="what to write here to include css?">
{% endblock %}
I dont have any problem with
{% block csslinks %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/style.css' %}">
{% endblock %}
so long as {% load staticfiles %} is on the top of the same template..
Related
I'm trying to load block for CSS in Django. However for some reason it doesn't work.
my template :
{% extends 'main/base.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'main/style.css' %}">
{% endblock %}
{% block title %}Some Title{% endblock %}
{% block content %}
Some Content
{% endblock %}
And below is the upper part of base.html file
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This line below is the base styling, whereas the css file I'm trying to load is a specific styling for a specific page. -->
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block css %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
I have the right css file at the right directory, but it is not reflected at all.
I don't see what I've done wrong. I would very much appreciate your help. :)
I am using Django, I am trying to display the image but I am getting the error.
Invalid block tag on line 35: 'static', expected 'endblock'. Did you
forget to register or load this tag?
If I added my image directly on index.html page then the image is displaying but when I am using extends and block to display then I am getting the error.
setting.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
home.html
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
index.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
You missed the open { in your home-page
{% extends 'demo1/index.html' %}
{% load static %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
NOTE
Django documentation prefers now {% load static %}.
{% load staticfiles %} works but I think it is deprecated.
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#static
Update:
From the Django docs:
The include tag should be considered as an implementation of "render
this subtemplate and include the HTML", not as "parse this subtemplate
and include its contents as if it were part of the parent". This means
that there is no shared state between included templates -- each
include is a completely independent rendering process.
Therefore please also load the static file in your home-page too
Do just {% load static %} on top of your home.html template.
You are missing a brace in your home.html
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
% endblock %}
should be
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
Probably a super easy thing to tackle but I have a template for a web page and that template has some common CSS that is linked at the surface.
<html>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
....
*navbar code in body
{%block content%}{%endblock%}
</html>
for any extending html pages they will have this layout plus some other personalized css. How can I add more custom CSS from a static folder without overriding the current CSS?
{% extends "template.html" %}
{% load static %}
?Insert custom css for the specific page?
{% block content %}
*CONTENT*
{%blockend%}
Use template blocks (https://docs.djangoproject.com/en/1.7/topics/templates/).
Base template (template.html):
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
{% block extra_css %}{% endblock %}
</head>
...
Child template:
{% extends "template.html" %}
{% load static %}
{% block extra_css %}
<!-- Specific template css here -->
<link rel="stylesheet" type="text/css" href="{% static 'css/another.css' %}">
{% endblock %}
I'm trying to create a custom widget(named Status) with django-dashing.
This custom widget is 99% copy-paste from libs own NumberWidget.
I have js, html and css files in status/widgets/status and initiated in dashing-config.js
in the browser console(Chrome) i get following message: "widget Status does not exist". So i have created my own {templates}dashing/dashing.html and loaded css/js files manually. Now i have placeholder for the widget, no error messages in console and i see successfull ajax requests, but the widget body is empty.
So widgets html file is not loaded, but why?
After reverse engineering of Dashing.utils.js i found out that example dashboard.html from the docs is incomplete and templates block is missing. So full dashboard.html should be like:
{% extends 'dashing/base.html' %}
{% load staticfiles %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'widgets/status/status.css' %}">
{% endblock %}
{% block templates %}
<link rel="resource" type="text/html" href="{% static 'widgets/status/status.html' %}" data-widget="status">
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="{% static 'widgets/status/status.js' %}"></script>
{% endblock %}
{% block config_file %}
<script type="text/javascript" src="{% static 'dashing-config.js' %}"></script>
{% endblock %}
I am getting started with Django, and I'm trying to make a modular template, but I don't know how. Now, I have the following files:
1- base.html (which provides basic layout for all the website):
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/bootsrap.min.css' %}" />
</head>
<body>
<h1>Test title</h1>
{% block content %}
{% endblock %}
</body>
</html>
2- index.html (main db read)
{% extends 'base.html' %}
{% block content %}
{% if latest_smartphones_list %}
<ul>
{% for s in latest_smartphones_list %}
<li>{{ s.brand }} {{ s.name }}</li>
{% endfor %}
</ul>
{% else %}
<p>No smarphones available.</p>
{% endif %}
{% endblock %}
Finally, i wanted to add a third file, called menu.html which would contain the site menu. I wanted to add it in the base.html file. I've been thinking about doing it in the following way, but i doesn't work:
{% load 'menu.html' %}
Thanks so much for your help!
Instead of using {% load 'menu.html' %} you have to use {% include 'menu.html' %}
Docs:
include
load
The correct way is using the include templatetag
{% include 'menu.html' %}
which includes a template and renders it with the current context.
NB: whenever you are in trouble, django docs is the best place to go to! Always keep this in mind