CODEWITHSUNDEEP
djangodjango-templates
Tristan Tran
Tristan Tran

Reputation: 1543

Include (inherit) only specific block of template

My project has two apps (for now),table and menu. Each app has a template and both templates extends a base.html template at the project root.

table_view.html

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

{% block title %}Table Mgt{% endblock %}

{% block content %}
  <link href="{% static "css/table.css" %}" rel="stylesheet" />
  ...some elements here...
{% endblock %}

{% block sidebar %}
  <a href="#">
    <button class="sidebar_button check_in">Check In</button>
  </a>
  <a href="#">
    <button class="sidebar_button check_out">Check Out</button>
  </a>
{% endblock %}

menu_view.html

{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}

{% block content %}
  <link href="{% static "css/menu.css" %}" rel="stylesheet"/>

{% block sidebar %}
  {% include 'table/table_view.html' %}
{% endblock %}

base.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
  <div id="header">
    ...some elements here...
  </div>    

  <div id="sidebar">
    {% block sidebar %}
    {% endblock %}
  </div>

  <div id="content">
    {% block content %}
    {% endblock %}
  </div>
</body>
</html>

In menu_view.html, I am trying to include the block sidebar only. However, the entire table_view.html is actually embedded. How do I include only a specific block from specific template?

Upvotes: 0

Views: 612

Answers (1)

user1600649
user1600649

Reputation:

Template extension works by defining slots you can put stuff into. These slots can be filled with defaults. The slots will be rendered as is if you don't override them in the extending (child) templates.

For example with this base:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}Hello World!{% endblock %}</title>
  <link href="{% static "css/base.css" %}" rel="stylesheet" />
  {% block extra_css %}{% endblock %}
</head>
</html>

And this child:

{% extends "base.html" %}

The result will be:

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
  <link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>

With this child template:

{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}

The result is:

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
  <link href="/static/css/base.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>

Now specific to your problem:

  • if you have different sidebars, try to make the sidebar.html template smarter so it can render all variations -or- create different sidebar templates
  • if you have the same sidebar everywhere, but some pages don't have a sidebar, create different base templates: one with a sidebar slot and one without.
  • if each sidebar is different for each page, don't bother with include and just override the slot

Upvotes: 1

Related Questions