Add dedicated blog index page to group articles by date

project/blog/migrations/0003_blogindexpage.py

@@ -0,0 +1,38 @@
+# Generated by Django 2.0.7 on 2018-07-30 08:03
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.documents.blocks
+import wagtail.embeds.blocks
+import wagtail.images.blocks
+import wagtailmarkdown.blocks
+import wagtailmetadata.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0020_add-verbose-name'),
+        ('wagtailcore', '0040_page_draft_title'),
+        ('blog', '0002_auto_20180726_2038'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BlogIndexPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.Page')),
+                ('created', models.DateTimeField(auto_now_add=True)),
+                ('modified', models.DateTimeField(auto_now=True)),
+                ('post_date', models.DateTimeField(blank=True, null=True)),
+                ('body', wagtail.core.fields.StreamField([('document', wagtail.documents.blocks.DocumentChooserBlock()), ('heading', wagtail.core.blocks.StructBlock([('size', wagtail.core.blocks.ChoiceBlock(choices=[('h1', 'H1'), ('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4'), ('h5', 'H5')])), ('value', wagtail.core.blocks.CharBlock())])), ('image', wagtail.images.blocks.ImageChooserBlock()), ('markdown', wagtailmarkdown.blocks.MarkdownBlock()), ('ol', wagtail.core.blocks.ListBlock(wagtail.core.blocks.CharBlock(label='List Item'), icon='list-ol', label='Ordered List', template='blocks/ordered-list.html')), ('paragraph', wagtail.core.blocks.RichTextBlock()), ('raw_html', wagtail.core.blocks.RawHTMLBlock(label='Raw HTML')), ('ul', wagtail.core.blocks.ListBlock(wagtail.core.blocks.CharBlock(label='List Item'), icon='list-ul', label='Unordered List')), ('video', wagtail.core.blocks.StructBlock([('video', wagtail.embeds.blocks.EmbedBlock()), ('caption', wagtail.core.blocks.CharBlock())]))])),
+                ('search_image', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.Image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=(wagtailmetadata.models.MetadataMixin, 'wagtailcore.page', models.Model),
+        ),
+    ]

project/blog/migrations/0004_auto_20180730_1721.py

@@ -0,0 +1,21 @@
+# Generated by Django 2.0.7 on 2018-07-30 17:21
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0003_blogindexpage'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='blogindexpage',
+            options={'ordering': ('title',)},
+        ),
+        migrations.AlterModelOptions(
+            name='blogpage',
+            options={'ordering': ('post_date',)},
+        ),
+    ]

project/blog/models.py

@@ -30,3 +30,25 @@ class BlogPage(Entity):
         StreamFieldPanel('body'),
         FieldPanel('tags')
     ]
+
+    class Meta:
+        ordering = ('post_date',)
+
+    def get_date_group(self):
+        if self.post_date:
+            return self.post_date.strftime("%Y-%m")
+
+
+class BlogIndexPage(Entity):
+    body = build_stream_field()
+
+    subpage_types = [BlogPage]
+
+    content_panels = Entity.content_panels + [
+        StreamFieldPanel('body')
+    ]
+
+    def get_context(self, request):
+        context = super().get_context(request)
+        context['blogs'] = self.get_children().specific().live()
+        return context

project/common/models.py

@@ -40,3 +40,4 @@ class Entity(MetadataPageMixin, Page):
 
     class Meta:
         abstract = True
+        ordering = ('title',)

project/home/migrations/0005_auto_20180730_1721.py

@@ -0,0 +1,17 @@
+# Generated by Django 2.0.7 on 2018-07-30 17:21
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0004_auto_20180725_0741'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='homepage',
+            options={'ordering': ('title',)},
+        ),
+    ]

project/pages/migrations/0003_auto_20180730_1721.py

@@ -0,0 +1,21 @@
+# Generated by Django 2.0.7 on 2018-07-30 17:21
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('pages', '0002_auto_20180726_0732'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='sectionindexpage',
+            options={'ordering': ('title',)},
+        ),
+        migrations.AlterModelOptions(
+            name='simplecontentpage',
+            options={'ordering': ('title',)},
+        ),
+    ]

templates/blog/blog_index_page.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% load static wagtailimages_tags %}
+
+{% block content %}
+<div id="main">
+    <div class="container">
+        {% include "common/content.html" %}
+
+        {% if page.body %}
+            <hr />
+        {% endif %}
+
+        {% for child in blogs %}
+            {% ifchanged %}
+                <h3 class="mt-5" id="{{ child.get_date_group }}">
+                    <a href="#{{ child.get_date_group }}" class="no-color-change">
+                        <time datetime="{{ child.get_date_group }}">{{ child.get_date_group }}</time>
+                    </a>
+                </h3>
+            {% endifchanged %}
+
+            <div class="media list-page-item mb-3">
+                <div class="d-none d-md-block align-self-center img-wrapper mr-3">
+                    {% if child.image %}
+                        <a href="{{ child.url }}">
+                            {% image child.image width-300 as photo %}
+                            <div class="image" data-image='{{ photo.url }}'></div>
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="media-body">
+                    <a href="{{ child.url }}">
+                    <h5 class="my-0">{{ child.title }}</h5>
+                    </a>
+                    <small>{% include "common/content-details.html" with page=child %}</small>
+                    <p>{{ child.get_short_body }}</p>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+  </div>
+{% endblock %}