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:
- Add Markdown support to our Wagtail project.
Setup wagtail-markdown
We will use wagtail-markdown to help us.
Update requirements.txt
Django>=3.1,<3.2
wagtail>=2.11,<2.12
psycopg2-binary
django-extensions==3.1.0
wagtail-markdown==0.6
Pygments
Notes:
- We added
wagtail-markdown==0.6
- We added
Pygments
(we need it to makeSyntax highlighting
work)
$ docker-compose build
$ docker-compose up -d
$ docker-compose logs -f
Add wagtailmarkdown
to INSTALLED_APPS
in wagtail_bootstrap_blog/settings/base.py
INSTALLED_APPS = [
# code omitted for brevity
'modelcluster',
'taggit',
'django_extensions',
'wagtailmarkdown',
# code omitted for brevity
]
Model
Update blog/blocks.py
class BodyBlock(StreamBlock):
h1 = CharBlock()
h2 = CharBlock()
paragraph = RichTextBlock()
markdown = MarkdownBlock(icon="code")
image_text = ImageText()
image_carousel = ListBlock(ImageChooserBlock())
thumbnail_gallery = ListBlock(ImageChooserBlock())
Notes:
- We add
markdown = MarkdownBlock(icon="code")
to theBodyBlock
Migrate the db
$ docker-compose run --rm web python manage.py makemigrations
$ docker-compose run --rm web python manage.py migrate
Next, let's try to add some example markdown content to the post page.
Notes:
- We can notice the markdown editor has good style and toolbar, which built on simplemde
- If you are interested how it is implemented (with custom
Widget
), you can check source code here
The Markdown content can be rendered successfully.
But the code block have no theme, let's fix it.
Template
Go to pygments-css, pick one theme and download the css file to wagtail_bootstrap_blog/static/css
Here we save the file as code_theme.css
└── wagtail_bootstrap_blog
├── static
│ ├── css
│ │ ├── code_theme.css
│ │ └── wagtail_bootstrap_blog.css
│ └── js
│ └── wagtail_bootstrap_blog.js
Now please replace .highlight
in wagtail_bootstrap_blog/static/css/code_theme.css to .codehilite
Update wagtail_bootstrap_blog/templates/blog/post_page.html
{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags blogapp_tags static %}
{% block extra_css %}
<link rel="stylesheet" href="{% static "css/code_theme.css" %}" />
{% endblock %}
{% block content %}
{% image page.header_image original as header_image %}
<img src="{{ header_image.url }}" class="img-fluid">
<h1>{{ page.title }}</h1>
<p>
{% post_categories_list %}
</p>
{# body #}
{% include "blog/components/streamfield.html" %}
<hr>
{% post_tags_list %}
<hr>
{% endblock %}
Notes:
- We added the
code_theme.css
link by overriding theextra_css
block
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: