diff --git a/docs/_static/images/tutorial/tutorial_1.png b/docs/_static/images/tutorial/tutorial_1.png index 4d92ccd3b..74a1cf6a6 100644 Binary files a/docs/_static/images/tutorial/tutorial_1.png and b/docs/_static/images/tutorial/tutorial_1.png differ diff --git a/docs/_static/images/tutorial/tutorial_3.png b/docs/_static/images/tutorial/tutorial_3.png index d76900753..69596c252 100644 Binary files a/docs/_static/images/tutorial/tutorial_3.png and b/docs/_static/images/tutorial/tutorial_3.png differ diff --git a/docs/getting_started/tutorial.rst b/docs/getting_started/tutorial.rst index ee9500e9a..45839fa5e 100644 --- a/docs/getting_started/tutorial.rst +++ b/docs/getting_started/tutorial.rst @@ -52,7 +52,7 @@ Out of the box, the "home" app defines a blank ``HomePage`` model in ``models.py Edit ``home/models.py`` as follows, to add a ``body`` field to the model: -.. code:: python +.. code-block:: python from __future__ import unicode_literals @@ -88,7 +88,7 @@ by separating capital letters with underscores (e.g. HomePage becomes home\_page.html). Edit ``home/templates/home/home_page.html`` to contain the following: -.. code:: html+django +.. code-block:: html+django {% extends "base.html" %} @@ -103,6 +103,38 @@ home\_page.html). Edit .. figure:: ../_static/images/tutorial/tutorial_3.png :alt: Updated homepage + +Wagtail template tags +~~~~~~~~~~~~~~~~~~~~~ + +Wagtail provides a number of +`template tags & filters <../topics/writing_templates#template-tags-filters>`__ +which can be loaded by including ``{% load wagtailcore_tags %}`` at the top of +your template file. + +In this tutorial, we use the `richtext` filter to escape and print the contents +of a ``RichTextField``: + +.. code-block:: html+django + + {% load wagtailcore_tags %} + {{ self.body|richtext }} + +Produces: + +.. code-block:: html + +
+

+ Welcome to our new site! +

+
+ +**Note:** You'll need to include ``{% load wagtailcore_tags %}`` in each +template that uses Wagtail's tags. Django will throw a ``TemplateSyntaxError`` +if the tags aren't loaded. + + A basic blog ------------ @@ -113,7 +145,7 @@ Add the new ``blog`` app to ``INSTALLED_APPS`` in ``mysite/settings/base.py``. The following example defines a basic blog post model in ``blog/models.py``: -.. code:: python +.. code-block:: python from django.db import models @@ -141,7 +173,7 @@ The following example defines a basic blog post model in ``blog/models.py``: Create a template at ``blog/templates/blog/blog_page.html``: -.. code:: html+django +.. code-block:: html+django {% extends "base.html" %} @@ -172,7 +204,7 @@ Image support Wagtail provides support for images out of the box. To add them to your model: -.. code:: python +.. code-block:: python from django.db import models @@ -211,7 +243,7 @@ Run ``python manage.py makemigrations`` and ``python manage.py migrate``. Adjust your blog page template to include the image: -.. code:: html+django +.. code-block:: html+django {% extends "base.html" %} @@ -243,7 +275,7 @@ Blog Index Let us extend the Blog app to provide an index. -.. code:: python +.. code-block:: python class BlogIndexPage(Page): intro = RichTextField(blank=True) @@ -256,7 +288,7 @@ The above creates an index type to collect all our blog posts. ``blog/templates/blog/blog_index_page.html`` -.. code:: html+django +.. code-block:: html+django {% extends "base.html" %} @@ -276,7 +308,7 @@ Related items Let's extend the BlogIndexPage to add related links. The related links can be BlogPages or external links. Change ``blog/models.py`` to -.. code:: python +.. code-block:: python from django.db import models @@ -349,7 +381,7 @@ can be BlogPages or external links. Change ``blog/models.py`` to Extend ``blog_index_page.html`` to show related items -.. code:: html+django +.. code-block:: html+django {% extends "base.html" %}