Wagtail blog part#2

In the second part of our story about the wagtail blog, we will create the basic structure of our home page which we have predefine in the home folder. Let's see what's inside it.

from django.db import models
from wagtail.core.models import Page
class HomePage(Page):
  pass

This is the basic structure of every page class with the name of the page and the Page object passed inside it. Next, let's create a field where we can put content.

from django.db import models

from wagtail.core.models import Page
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel

class HomePage(Page):
    body = RichTextField(blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('body', classname="full"),
    ]

In this example we can see how to add a basic text field in beginning we create a database model field and in content_panels we define how it should look in our admin panel. To apply these changes we must create migration using:

python manage.py makemigrations

To display the content we must create a template wagtail use Django namespaces in our example will be:

home/templates/home/home_page.html

{% extends "base.html" %}

{% load wagtailcore_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}
    {{ page.body|richtext }}
{% endblock %}

In this template, we extend it for base.html which will take care of importing CSS, Javascript files. Next, we load tags which allowed us to use wagtail template tags. Our content goes to block content which will be merged with base.html. Our model exists in a template in page object for RichTextField we need to use a richtext filter to display content in a proper way.

With this adjustment, you can go to localhost:8000/admin and add a new Page go to Pages/Homepage, and edit. When you are done click publish and see the result on localhost:8000.

That's it for today and see you in the next part of our Wagtail Blog tutorial.