Screenshot 2024-01-22 at 16.39.25

First post

1. Finding HTML Templates in a Wagtail Project

  • Templates Directory: Usually, HTML templates are stored in a directory named templates within each Django app in your Wagtail project. For example, if you have an app named blog, the templates specific to this app are typically found in blog/templates/blog.
  • Base Templates: Often, there's a base HTML file (like base.html) in the templates directory. This file contains common elements like headers, footers, and navigation menus that are shared across different pages.
  • Page-specific Templates: Each page type (like a blog post, landing page, or about page) will have its own HTML template. These are also stored in the templates directory and usually follow a naming convention related to their page type, like blog_post.html for blog posts.

2. Matching Templates to Page Types

  • Inherit from Wagtail's Page Model: Each page type in Wagtail is a Python class that inherits from Wagtail's Page model. For instance, a blog post page type might be defined in models.py as class BlogPage(Page).
  • Specify Template in Python Class: In the Python class for a page type, you can specify the corresponding HTML template. This is done using the template attribute. For example, BlogPage class might have template = 'blog/blog_page.html' to indicate that this page type uses the blog_page.html template.
  • Template Variables: In these templates, you use Django's template language to display content. Wagtail passes the page's context (like title, body, etc.) to the template, which you can access using template tags (like {{ page.title }}).

3. Editing Templates

  • HTML & Django Template Language: As an HTML designer, you can edit these templates using standard HTML and Django Template Language. This includes adding HTML elements, using template tags ({{ }}) to insert dynamic content, and template blocks ({% block content %}) for content that changes from page to page.
  • Static Files: CSS and JavaScript files are typically stored in a static folder and are linked in the HTML templates to apply styling and functionality.

4. Previewing Changes

  • Local Development Server: When you make changes to templates, you can view these changes in real-time by running the local development server and visiting the appropriate URL in your web browser.