CODEWITHSUNDEEP
pythoncssdjangodomdjango-templates
Steven Wexler
Steven Wexler

Reputation: 17329

static files and django templates

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!

Upvotes: 2

Views: 2557

Answers (4)

WesternGun
WesternGun

Reputation: 12817

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

Upvotes: 0

Steven Wexler
Steven Wexler

Reputation: 17329

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.

Upvotes: 0

falsetru
falsetru

Reputation: 369444

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 %}

Upvotes: 1

Victor Castillo Torres
Victor Castillo Torres

Reputation: 10811

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 %}

Upvotes: 1

Related Questions