82

The code below makes error.. How could I resolve this problem?

{% block header %}
    <link rel="stylesheet" href="{% static 'shop/style.css' %}" />
{% endblock %}

The error output:

TemplateSyntaxError : Invalid block tag: 'static', expected 'endblock'

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
nextdoordoc
  • 1,727
  • 6
  • 20
  • 30

6 Answers6

163

No, it is not impossible. Try including {% load staticfiles%} in the same html file, rather than attempting to inherit it from some base.html.

David C
  • 7,204
  • 5
  • 46
  • 65
  • 1
    Does it mean that for every template I have to add this tag? This property does not get inherited in the child template? – abhinav Apr 19 '17 at 06:20
  • Not a good option when extending from some `base.html` which wants to output all the static files right before the closing `

    `, and when those static files may vary from page to page.

     – Jorge Orpinel Pérez May 24 '17 at 07:41
  • Thank you!I just solved my issue through your answer! – William Apr 17 '18 at 05:14
  • 1
    +1 for solution. but it should include if we loaded static files in base. did not quite get the logic tho – Mukesh Kumar Nov 25 '19 at 21:41
  • 1
    Or you can just use `{% load static %}`, works as well. – Blip Oct 04 '20 at 16:09
  • Indeed, for future readers, since Django 1.10 the right way to serve static files it to use `{% load static %}`, `{% load staticfiles %}` is deprecated – scūriolus Dec 13 '22 at 09:42
20

Just add {% load static %} to the top of your template after the {% extends 'app/base.html' %}.

Alexandru Rotariu
  • 201
  • 2
  • 5
  • This is the correct answer and it solves the problem. It should be marked accordingly. – Rok Klancar Oct 23 '21 at 17:22
  • 1
    @RokKlancar why? I want to include it in the base template, so that I only have to `{% load static %}` once. Not put it in every template file, that just sounds counter intuitive to the idea of code reusability, which is the point of the base template. – Shmack Feb 04 '22 at 03:49
  • 1
    @ShanerM13 You are completley right. it is counter intuitive to the idea of code reusability. I don't know why this works as it does. You just have to put it in every template. Do not worry, though, the template inheritance still offers you plenty of benefits, so you don't really lose much, if you have to 'load static' every time – Rok Klancar Feb 05 '22 at 10:07
  • 1
    @RokKlancar yah, that was totally my thoughts, its just irritating... so I went through and did it... for... each... one... – Shmack Feb 05 '22 at 18:38
12

1.) in settings.py add A TUPLE :

STATIFILES_DIR = ( os.path.join(BASE_DIR,'assets') , )

2.) in urls.py add :

 from django.contrib.staticfiles.urls import staticfiles.urlpatterns
 urlpatterns += staticfile_urlpatterns()

3.) in the html file where you are putting the "link rel='stylesheet' .." , just add at the top :

{% load static from staticfiles %}

 and then use :

 <link rel="stylesheet" href="{% static 'assets/css' %}"
Aditya
  • 121
  • 1
  • 5
3

My solution is to include another page with {% load static %} and script with static reference. {% block xxx %} expects the first {% yyy %} not to be other than {% include %} and {% endblock %}(the only cases I have observed); so when we use "{% static 'xxx.js' %}" it breaks and complains. But including another page will put Django in calm.

For example, I have a page homepage which extends base.html and has some static js files which are not included in base.html.

base.html

{% block page %}

{% endblock %}
{% block script %}

{% endblock %}

homepage.html:

{% extends 'base.html' %}
{% block page %}
...
{% endblock %}
{% block script %}
    {% include 'home_js.html'%}  <!-- don't use static links here because Django does not like it. -->
{% endblock %}

home_js.html:

{% load static %}
<script src="{% static 'scripts/jquery.js' %}" ></script>
<script>
    function ...
</script>

Now the scripts loads.

So, in a block we cannot use {% %} tags other than {% block xxx %} and {% endblock %}.

I am using Django 5.1.

EDIT:

I found {% verbatim %} tag to be our savior under such situation.

WesternGun
  • 11,303
  • 6
  • 88
  • 157
-1

If you are you are using Apache, make sure you have configured the virtual host to serve static files, for example in 000-default.conf

<VirtualHost *:80>
    ServerName www.example.com

    ServerAdmin webmaster@localhost

    Alias /static /home/Dev/cfehome/src/static
        <Directory /home/Dev/cfehome/src/static>
           Require all granted
         </Directory>

    <Directory /home/Dev/cfehome/src/cfehome>
        <Files wsgi.py>
            Require all granted
        </Files>
    </Directory>

    WSGIDaemonProcess cfehome python-path=/home/Dev/cfehome/src:/home/Dev/cfehome/lib/python3.7/site-packages
    WSGIProcessGroup cfehome
    WSGIScriptAlias / /home/Dev/cfehome/src/cfehome/wsgi.py


    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>
John
  • 1,645
  • 2
  • 17
  • 29
-2

Yes. Django won't allow it.

You can just use the appropriate path like:

<link rel="stylesheet" href="/static/shop/style.css" />

But be aware: If you change your app's STATIC_URL, the href above must also be updated accordingly.

From Configuring static files:

In your templates, either hardcode the url like /static/my_app/example.jpg or, preferably, use the static template tag...

Jorge Orpinel Pérez
  • 6,361
  • 1
  • 21
  • 38