Wagtail Tutorial Series:
To get the latest learning resource for Wagtail 4, please check Build Blog With Wagtail CMS (4.0.0)
- Create Wagtail Project
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- How to write Wagtail page template
- Add Bootstrap Theme to Wagtail
- How to use StreamField in Wagtail
- Wagtail Routable Page
- Add pagination component to Wagtail
- Customize Wagtail Page URL
- Add Full Text Search to Wagtail
- Add Markdown Support to Wagtail
- Add LaTeX Support & Code Highlight In Wagtail
- How to Build Form Page in Wagtail
- How to Create and Manage Menus in Wagtail
- Wagtail SEO Guide
- Source code: https://github.com/AccordBox/wagtail-tailwind-blog
Wagtail Tips:
- Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
- Wagtail Tip #2: How to Export & Restore Wagtail Site
Write style in Wagtail:
- How to use SCSS/SASS in your Django project (Python Way)
- How to use SCSS/SASS in your Django project (NPM Way)
Other Wagtail Topics:
Objective
By the end of this chapter, you should be able to:
- Create a
Wagtail
project withwagtail start
and understand how it works - Have good understanding of the Wagtail project structure
Create Wagtail Project
$ mkdir wagtail_project && cd wagtail_project
$ python3 -m venv env
$ source env/bin/activate
You can also use other tools such as Poetry or Pipenv
Let's install Wagtail
(env)$ pip install wagtail
Next, let's use wagtail
command to create a project for us.
(env)$ wagtail start wagtail_bootstrap_blog .
Now, let's get the project running on local env.
# create db tables
(env)$ python manage.py migrate
(env)$ python manage.py runserver
Now you can visit http://127.0.0.1:8000/ and you will see a welcome page of Wagtail
Please press CTRL-C
to terminate the server.
Next, let's keep learning this great project.
Notes:
- If you want to know how
wagtail start
work, you can take a look at the source code you will see it run djangostartproject
command with the custom project template - The project template is on Github: Wagtail
Project structure
You have file structure like this
.
├── Dockerfile
├── db.sqlite3
├── env
├── home
├── manage.py
├── requirements.txt
├── search
└── wagtail_bootstrap_blog
Notes:
Dockerfile
is for docker deployment.db.sqlite3
is a local db file, here we did not specify Wagtail to use other db so default sqlite is used by default.home
andsearch
are Django apps created by Wagtail.
Let's check files in wagtail_bootstrap_blog
directory
├── __init__.py
├── settings
│ ├── __init__.py
│ ├── base.py
│ ├── dev.py
│ └── production.py
├── static
│ ├── css
│ │ └── wagtail_bootstrap_blog.css
│ └── js
│ └── wagtail_bootstrap_blog.js
├── templates
│ ├── 404.html
│ ├── 500.html
│ └── base.html
├── urls.py
└── wsgi.py
Notes:
settings/base.py
is the base settings,settings/dev.py
is for development andsettings/production.py
is for production.static
contains all static assets used by our Wagtail project.templates
contains all Django templates.
Home
Let's take a look at home/migrations/0002_create_homepage.py
def create_homepage(apps, schema_editor):
# Get models
ContentType = apps.get_model('contenttypes.ContentType')
Page = apps.get_model('wagtailcore.Page')
Site = apps.get_model('wagtailcore.Site')
HomePage = apps.get_model('home.HomePage')
# Delete the default homepage
# If migration is run multiple times, it may have already been deleted
Page.objects.filter(id=2).delete()
# Create content type for homepage model
homepage_content_type, __ = ContentType.objects.get_or_create(
model='homepage', app_label='home')
# Create a new homepage
homepage = HomePage.objects.create(
title="Home",
draft_title="Home",
slug='home',
content_type=homepage_content_type,
path='00010001',
depth=2,
numchild=0,
url_path='/home/',
)
# Create a site with the new homepage set as the root
Site.objects.create(
hostname='localhost', root_page=homepage, is_default_site=True)
Notes:
- When we run
python manage.py migrate
, thecreate_homepage
is executed, which create defaulthome_page
and set it asroot_page
of thelocalhost
site. That is the page we just saw onlocalhost:8000
Please check home/templates/home/home_page.html
, which is the template of the home page
{% extends "base.html" %}
{% load static %}
{% block body_class %}template-homepage{% endblock %}
{% block extra_css %}
{% comment %}
Delete the line below if you're just getting started and want to remove the welcome screen!
{% endcomment %}
<link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">
{% endblock extra_css %}
{% block content %}
{% comment %}
Delete the line below if you're just getting started and want to remove the welcome screen!
{% endcomment %}
{% include 'home/welcome_page.html' %}
{% endblock content %}
Notes:
{% include 'home/welcome_page.html' %}
is the key point here, it make home page display some user friendly welcome message instead of some boring text which has no style.
Reference
Integrating Wagtail into a Django project
Resources
The source code is available Github/wagtail-bootstrap-blog
Wagtail Tutorial Series:
To get the latest learning resource for Wagtail 4, please check Build Blog With Wagtail CMS (4.0.0)
- Create Wagtail Project
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- How to write Wagtail page template
- Add Bootstrap Theme to Wagtail
- How to use StreamField in Wagtail
- Wagtail Routable Page
- Add pagination component to Wagtail
- Customize Wagtail Page URL
- Add Full Text Search to Wagtail
- Add Markdown Support to Wagtail
- Add LaTeX Support & Code Highlight In Wagtail
- How to Build Form Page in Wagtail
- How to Create and Manage Menus in Wagtail
- Wagtail SEO Guide
- Source code: https://github.com/AccordBox/wagtail-tailwind-blog
Wagtail Tips:
- Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
- Wagtail Tip #2: How to Export & Restore Wagtail Site
Write style in Wagtail:
- How to use SCSS/SASS in your Django project (Python Way)
- How to use SCSS/SASS in your Django project (NPM Way)
Other Wagtail Topics: