Geek Answers Handbook

Django templates: use different css for pages

New to Django, I want to use different css files for different pages - for example, page1.css for page1.html, page2.css for page2.html. Is there a way to do this while continuing to expand base.html?

In base.html

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>{% block title %}Default Title{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

  <!-- css -->
  if page1.html
  <link rel="stylesheet" href="{% static "css/page1.css" %}">

  if page2.html
  <link rel="stylesheet" href="{% static "css/page2.css" %}">

  if page3.html
  <link rel="stylesheet" href="{% static "css/page3.css" %}">

</head>
<body class="{% block body_class %}{% endblock %}">
{% block content %}{% endblock%}
</body>
</html>

In page 1.html

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

    {% block body_class %}page1{% endblock %}
    {% block title %}Page1{% endblock %}

    {% block content %}
    Page 1
    {% endblock content %}
+4
source share
1 answer

You can use the same concept that applies to {% block content %}in which you can fill it in or expand it page by page.

Therefore, in base.htmlcreate a block with a name stylesin the section head(or anywhere you want to load your CSS):

{% block styles %}
{% endblock %}

, base.html:

: page1/template-view.html

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

{% block styles %}
    <link rel="stylesheet" href="{% static 'css/page1.css' %}">
{% endblock %}
+9

More articles:


All Articles