[Django]-Can we include partial css files into a template file?

by

5👍

You shouldn’t define multiple head sections in HTML. But there’s no need to; you should use template inheritance and blocks just like you do with any other element. You shouldn’t really be using include here at all; inheritance is much more powerful.

So, base.html looks like this:

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css"
        href="{% static "appfolder/css/base.css" %}" />
    {% block extrastyles %}{% endblock %}
</head>

<body>
<header>header</header>
{% block main %}{% endblock %}
<footer>footer</footer>
</body>

</html>

and main.html is:

{% extends "base.html" %}
{% load static %}

{% block extrastyles %}
    <link rel="stylesheet" type="text/css"
        href="{% static "appfolder/css/main.css" %}" />
{% endblock %}

{% block main %}
    main
{% endblock %}

and in your view you render main.html, not base.html.

👤Daniel Roseman

1👍

The first problem, it not correct to put head into body. It makes so as your main.html is not a separate HTML file but the part of base.html. The second is it is not such easy to include another file if you need to once in the future.

I make such a thing in slightly another way. When using base file it looks more useful to extend the base template instead of including files. So, in the base template, we can make some placeholder blocks.

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css"
        href="{% static "appfolder/css/base.css" %}" />

    {% block 'additional_includes' %}{% endblock %}
</head>

<body>
    <header>header</header>
    {% block 'content' %}{% endblock %}
    <footer>footer</footer>
</body>

</html>

Then we are going to use it. So create child template and redefine needed blocks (if you don’t redefine them, they will just stay empty):

{% extends '/path_to_base/base.html' %}
{% load static %}

{% block 'additional_includes' %}
    <link rel="stylesheet" type="text/css" href="{% static "appfolder/css/main.css" %}" />
{% endblock %}

{% block 'content' %}
    your content
{% endblock %}

That’s all. You need to refer to main.html in your views instead of base.html. And, of course, you can a lot of other child templates.

Update.

Decided to edit my reply. The common structure of html file is:

<!DOCTYPE ...>
<html>
    <head>
        <!-- all your meta tags -->
        <!-- title -->
        <!-- css and other includes, you can include so many files as you need, but it is better to use as little as possible as it can reduce server performance -->
        <!-- scripts definitions (not necessary to put there, often they are paced in the end of file) -->
    </head>
    <body>
        <!-- content of file
        you can divide this part in several parts and include them
        but you can't use head here, because it is body -->
    </body>
</html>

This structure must be used in any framework in different languages because it is just an HTML used by the browser. Any framework must have instruments to render simple HTML pages with its template engine. And Django has its own engine, that provides to create lots of big files from small parts using extending and including. You can include some parts that are common for all of your pages. You can redefine this includes wrapping this includes in block tags. And you can create different pages with the same layout using extend, so you don’t have to copy your code (for header or footer) many times.

So, in Django, you can create the following structure. I use some sort of it and it seems comfortable enough:

base.html

<!DOCTYPE ...>
<html>
    <head>
        {% load static %}
        {% include 'meta.html' %}
        <title>{% block 'title' %}Main page{% endblock %} - my site</title>
        <link href='{% static "appfolder/css/base.css" %}' ... />

        {% block 'additional_includes' %}{% endblock %}
    </head>
    <body>
        {% block 'header' %}{% include 'header.html' %}{% endblock %}
        <!-- header is just visible site header, not including files -->
        {% block 'content' %}{% endblock %}
        {% block 'footer' %}{% include 'footer.html' %}{% endblock %}
    </body>
</html>

first-page.html

{% extends 'base.html' %}
{% load static %}

{% block 'title' %}First-page{% endblock %}

{% block 'additional_includes' %}
    <link href='{% static "appfolder/css/first-page.css" %}' ... />
{% endblock %}

<!-- if you DON'T use block, then the content defined in base template file will remain -->

{% block 'content' %}
    Some page content
{% endblock %}

second-page.html

{% extends 'base.html' %}
{% load static %}

{% block 'title' %}Second-page{% endblock %}

{% block 'additional_includes' %}
    <link href='{% static "appfolder/css/second-page.css" %}' ... />
{% endblock %}

<!-- if you USE block, then its content will be rewritten with new data. you can use {{ block.super }} to add the content of block from base template -->
{% block 'header' %}{% include 'header_for_second_page.html' %}{% endblock %}

{% block 'content' %}
    Another page content
{% endblock %}
👤birdy90

Leave a comment