Add tag listing page

project/blog/models.py

@@ -3,10 +3,10 @@ from wagtail.admin.edit_handlers import StreamFieldPanel, FieldPanel
 from wagtail.search import index
 from project.common.models import Entity
 from django.db import models
-
+from wagtail.contrib.routable_page.models import RoutablePageMixin, route
 from modelcluster.fields import ParentalKey
 from modelcluster.contrib.taggit import ClusterTaggableManager
-from taggit.models import TaggedItemBase
+from taggit.models import TaggedItemBase, Tag
 
 
 class BlogPageTag(TaggedItemBase):
@@ -39,7 +39,7 @@ class BlogPage(Entity):
             return self.post_date.strftime("%Y-%m")
 
 
-class BlogIndexPage(Entity):
+class BlogIndexPage(RoutablePageMixin, Entity):
     body = build_stream_field()
 
     subpage_types = [BlogPage]
@@ -48,7 +48,16 @@ class BlogIndexPage(Entity):
         StreamFieldPanel('body')
     ]
 
-    def get_context(self, request):
+    @route(r'^tag/(\w+)/$')
+    def tags(self, request, *args, **kwargs):
+        self.tag_filter = args[0]
+        return Entity.serve(self, request, *args, **kwargs)
+
+    def get_context(self, request, *args, **kwargs):
         context = super().get_context(request)
-        context['blogs'] = self.get_children().specific().live()
+        child_pages = self.get_children().specific().live().values_list('id', flat=True)
+        context['blogs'] = BlogPage.objects.filter(id__in=child_pages)
+        if hasattr(self, 'tag_filter'):
+            context['tag'] = self.tag_filter
+            context['blogs'] = context['blogs'].filter(tags__name=self.tag_filter)
         return context

project/settings.py

@@ -49,6 +49,7 @@ INSTALLED_APPS = [
 
     'wagtail.contrib.forms',
     'wagtail.contrib.redirects',
+    'wagtail.contrib.routable_page',
     'wagtail.embeds',
     'wagtail.sites',
     'wagtail.users',

templates/blog/blog_index_page.html

@@ -5,7 +5,16 @@
 {% block content %}
 <div id="main">
     <div class="container">
+        {% if tag %}
+            {% if page.image %}
+                {% image page.image width-1000 as photo %}
+                <div class="mb-3 image header-image" data-image='{{ photo.url }}'></div>
+            {% endif %}
+            <h1 class="display-5">{{ page.title }}</h1>
+            <h5 class="my-3">Posts tagged with <a href="">#{{ tag }}</a></h5>
+        {% else %}
             {% include "common/content.html" %}
+        {% endif %}
 
         {% if page.body %}
             <hr />