CODEWITHSUNDEEP
htmlcssdjangodomdjango-templates
DKF
DKF

Reputation: 427

Properly include CSS

I have one Django template (main page) which includes another template (navbar).
I have one CSS file for my main page, and one for my navbar.
My question is: how to properly include the CSS of the navbar in the main page ?

I tried this (1):

main_page.html

{% block css %}
    <link rel="stylesheet" type="text/css" href="style.css">
{% endblock %}

navbar.html

{% block css %}
    <link rel="stylesheet" type="text/css" href="navbar.css">
{% endblock %}

or just (2)

main_page.html

<link rel="stylesheet" type="text/css" href="style.css">

navbar.html

<link rel="stylesheet" type="text/css" href="navbar.css">

Then in main_page.html

{% include "base/navbar.html" %}

In each cases, both of the CSS are loaded (main_page + navbar), but I don't think that include CSS like this is good.
What is the proper way to include CSS among a HTML page with include of Django ?

In case (1), even if I use {% block %}, the CSS of the main_page is still kept, and not replaced with the CSS I specified in navbar.html. Is it a normal behavior (because usage of include instead of extends ?) ?

Thank you in advance, Flo

Upvotes: 0

Views: 131

Answers (2)

Pycm
Pycm

Reputation: 878

There are many ways to include css(or js) in Django temple. I will post what I use in my projects.

  1. in any template that uses css/js exclusively in them put them inside that template

like,

inside "main_page.html"

<link rel="stylesheet" type="text/css" href="style.css">

inside "navbar.html"

<link rel="stylesheet" type="text/css" href="navbar.css">

Upvotes: 0

Bogdan Iulian Bursuc
Bogdan Iulian Bursuc

Reputation: 2275

In order to extend a template block you need to include {{ block.super }} this will include what you declared in parent template:

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="navbar.css">
{% endblock %}

But a better solution is to use sekizai which is a library that lets you easily include assets: http://django-sekizai.readthedocs.org/en/latest/

There are also more complex solutions that allow you to compress and group your assets: http://django-pipeline.readthedocs.org/

Upvotes: 2

Related Questions