Cache parts of the django template
I have a page, I want to cache only part of the template, because if I cache the whole page, I have the site header cached as well, and I don't need that. I tried to use the tag - cache in the template, but unfortunately the requests still keep going to the database. However, the cache is being accessed. What could be the problem?
lesson.html
{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="lesson-flex">
<div class="lesson-flex-nav">
{% for theme in selected_course.themes.all %}
<div class="lesson-flex-nav-item">
<h1 class="lesson-flex-nav-title">{{ theme.name }}</h1>
<ul class="lesson-flex-nav-list">
{% for lesson in theme.lessons.all %}
<li><a href="{% url 'lesson_detail' course_slug=selected_course.slug lesson_slug=lesson.slug %}" class="lesson-flex-nav-list-item">{{ lesson.name }}</a></li>
<div class="sep"></div>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
<div class="lesson-flex-wrapper">
<div class="lesson-flex-item">
<h2 class="lesson-flex-item-title">{{ lesson.name }}</h2>
<div class="sep"></div>
<p class="lesson-flex-item-text">{{ lesson.body|safe }}</p>
</div>
{% if lesson.questions.all %}
<div class="lesson-flex-wrapper-questions">
<h3 class="lesson-flex-wrapper-questions-title">Questions</h3>
<div class="sep"></div>
{% for question in lesson.questions.all %}
<div class="lesson-flex-wrapper-questions-item">
<p class="lesson-flex-wrapper-questions-item-title">{{ question.name }}</p>
<details>
<summary class="lesson-flex-wrapper-questions-item-legend">Answee</summary>
<p class="lesson-flex-wrapper-questions-item-answer">{{ question.answer }}</p>
</details>
</div>
{% endfor %}
</div>
{% endif %}
{% if lesson.materials.all %}
<div class="lesson-flex-wrapper-questions">
<h3 class="lesson-flex-wrapper-questions-title">Materials</h3>
<div class="sep"></div>
{% for material in lesson.materials.all %}
<div class="lesson-flex-wrapper-questions-file">
{% if material.get_extension_display == '.zip' %}
<img class="lesson-flex-wrapper-questions-file-icon" src="{% static 'img/files_extensions_icons/archive_icon.png' %}" alt="ZIP file">
{% elif material.get_extension_display == '.jpg' %}
<img class="lesson-flex-wrapper-questions-file-icon" src="{% static 'img/files_extensions_icons/jpg_icon.png' %}" alt="JPG file">
{% else %}
<img class="lesson-flex-wrapper-questions-file-icon" src="{% static 'img/files_extensions_icons/pdf_icon.png' %}" alt="PDF file">
{% endif %}
<a class="lesson-flex-wrapper-questions-file-link" href="{{ material.file.url }}" download rel="noopener">{{ material.only_filename }}</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endblock content %}
views.py
class LessonDetailView(DetailView):
model = Lesson
template_name = 'courses/lesson.html'
context_object_name = 'lesson'
slug_url_kwarg = 'lesson_slug'
def get_queryset(self):
queryset = Lesson.objects.filter(slug=self.kwargs['lesson_slug']).prefetch_related('materials', 'questions')
return queryset
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['title'] = self.object.name
context['selected_course'] = Course.objects.prefetch_related('themes__lessons').get(slug=self.kwargs['course_slug'])
return context
Use the template tag - cache.
You have to Make sure you're wrapping the specific sections of your template with the {% cache %} tag properly.
{% extends "base.html" %}
{% load static %}
{% load cache %} <!-- Make sure to load the cache template tag -->
{% block content %}
<div class="lesson-flex">
<div class="lesson-flex-nav">
{% cache 500 selected_course_themes selected_course.id %}
{% for theme in selected_course.themes.all %}
<div class="lesson-flex-nav-item">
<h1 class="lesson-flex-nav-title">{{ theme.name }}</h1>
<ul class="lesson-flex-nav-list">
{% for lesson in theme.lessons.all %}
<li><a href="{% url 'lesson_detail' course_slug=selected_course.slug lesson_slug=lesson.slug %}" class="lesson-flex-nav-list-item">{{ lesson.name }}</a></li>
<div class="sep"></div>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endcache %}
</div>
<div class="lesson-flex-wrapper">
<div class="lesson-flex-item">
<h2 class="lesson-flex-item-title">{{ lesson.name }}</h2>
<div class="sep"></div>
<p class="lesson-flex-item-text">{{ lesson.body|safe }}</p>
</div>
{% if lesson.questions.all %}
<div class="lesson-flex-wrapper-questions">
<h3 class="lesson-flex-wrapper-questions-title">Questions</h3>
<div class="sep"></div>
{% for question in lesson.questions.all %}
<div class="lesson-flex-wrapper-questions-item">
<p class="lesson-flex-wrapper-questions-item-title">{{ question.name }}</p>
<details>
<summary class="lesson-flex-wrapper-questions-item-legend">Answer</summary>
<p class="lesson-flex-wrapper-questions-item-answer">{{ question.answer }}</p>
</details>
</div>
{% endfor %}
</div>
{% endif %}
{% if lesson.materials.all %}
<div class="lesson-flex-wrapper-questions">
<h3 class="lesson-flex-wrapper-questions-title">Materials</h3>
<div class="sep"></div>
{% for material in lesson.materials.all %}
<div class="lesson-flex-wrapper-questions-file">
<a class="lesson-flex-wrapper-questions-file-link" href="{{ material.file.url }}" download rel="noopener">{{ material.only_filename }}</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endblock content %}
And have to Check:
The {% cache %} tag requires a unique cache key for the section. In the example above, I used selected_course_themes selected_course.id as a unique key to cache the themes for the specific course. You can adjust the key based on what data is being rendered and when it changes.
and The number 500 in the {% cache 500 %} tag is the cache duration in seconds (adjust as needed).