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:
- Create Wagtail Project (this article!)
- Create Page Model
- Category And Tag Support
- Routable Page
- You can find more on Wagtail Tutorial Series