Códigos Realmente Roxanna

Foto de Andrew Neel no Unsplash

Introdução ao Wagtail CMS

Um breve tutorial para desenvolvedores Python/Django sobre como construir com Wagtail CMS

Roxanna Coldiron

··

7 minutos de leitura

ÍNDICE

NOTA: Este tutorial está no meu GitHub com o código fonte completo. Confira aqui .

Este tutorial pressupõe algum conhecimento de Python, Django e Git/GitHub (opcional). Se você não tiver experiência com nenhum desses, considere seguir estes tutoriais com antecedência e voltar a este quando estiver pronto:

Principais tecnologias

Estas são as principais tecnologias que estamos usando para este tutorial:

Python 3.9
Git e GitHub (se você quiser rastrear seu código e suas versões e/ou publicar seu código)
Wagtail 2.14 (o Django 3.2 está incluído no pacote)
Código do Visual Studio (ou seu editor de código favorito)

Configuração inicial

Se você quiser trabalhar com este repositório, você pode baixar os arquivos do GitHub ou bifurcar o repositório e cloná-lo em sua máquina local. Caso contrário, crie uma pasta em sua máquina local para trabalhar e abra sua ferramenta de linha de comando cdna pasta:cd my-folder
Instale o Python 3.9 se você não o tiver em seu computador; no entanto, o Wagtail 2.14 é compatível com o Python 3.6 e superior. Verifique sua versão do Python com python --version.

NOTA: Se ele gerar um erro ou não o reconhecer, talvez seja necessário baixá-lo. Vá para Python - Downloads e siga as instruções de download para seu sistema operacional.

Agora crie um ambiente virtual: python3 -m venv .venvno Windows 10. O comando que você deve usar pode ser diferente, dependendo do seu sistema operacional e versão.
Ative o ambiente virtual: .venv\Scripts\activate.ps1(no Windows 10). Se funcionou, você deverá ver o nome do ambiente virtual na linha de comando antes do caminho do arquivo na próxima linha, semelhante ao seguinte:(.venv) C:Users/YourName/Your/File/Location:
Instale o Wagtail. Isso também instalará todas as suas dependências. Eu uso pippara instalar, mas você pode usar um gerenciador de pacotes Python diferente. Este comando é para pip:pip install wagtail

NOTA: A versão atual no momento da criação deste repositório é Wagtail 2.14. Você pode selecionar uma versão para download, como estapip install wagtail==2.14

Crie o primeiro projeto: wagtail start myproject .onde myprojectestá o nome do site ou projeto (pode ser o que você quiser) e o .diz para criá-lo em sua pasta atual. Este comando gera os novos arquivos de projeto do Wagtail. Por favor, tome um momento para examiná-los.

NOTA: Os arquivos do Docker são gerados automaticamente com o projeto. Embora não os usemos, os manteremos no repositório caso você queira examiná-los e saber mais sobre o que eles fazem. O Docker pode ser usado para implantação. CONSULTE MAIS INFORMAÇÃO

Navegue até o projeto: cd myprojecte faça a primeira migração com: python manage.py migrate. Em seguida, crie uma conta de login para seu projeto com o comando python manage.py createsuperusere siga os prompts. Verifique se tudo funcionou executando python manage.py runservere abrindo seu navegador para http://127.0.0.1:8000/.

Antes de passar para a seção de código, familiarize-se com a interface do CMS. Faça login em seu site http://127.0.0.1:8000/admine leia a documentação do Wagtail para editores .

Personalizando seu site - Parte I

Vamos começar atualizando o modelo Home Page, que se encontra em home> models.py. O modelo de Home Page atual é uma subclasse do modelo Wagtail Page, mas podemos adicionar mais recursos e atualizar o modelo.

Primeiro, precisamos decidir o que queremos ter em nossa página inicial e importar quaisquer componentes Wagtail que acharmos necessários. A página inicial atual tem apenas o título e nenhuma forma de adicionar conteúdo.
Queremos adicionar texto à página. Para fazer isso, precisamos importar RichTextField . Na parte superior do models.py, adicione a seguinte importação:

from wagtail.core.fields import RichTextField

Agora vamos adicionar campos ao modelo.

class HomePage(Page):

    # An introduction to our site
    body = RichTextField(null=True, blank=True)

Em seguida, precisamos adicionar painéis de conteúdo ao lado do editor para a página que também nos permitirá adicionar conteúdo. Na parte superior, adicione as seguintes importações:

from wagtail.admin.edit_handlers import FieldPanel

Em seguida, adicione os painéis de conteúdo ao modelo Home Page, assim:

class HomePage(Page):

    # An introduction to our site
    body = RichTextField(blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

Agora precisamos executar python manage.py makemigrationse python manage.py migratever isso fazer efeito.
Execute o servidor e faça login no admin. Em seguida, vá para a HomePage para editá-lo. Você deve ver seu novo campo!
The RichTextField looks like a standard text editor. Write some text, add some photos and links, then republish the page.

WAIT! None of the content I added shows up on the frontend! Now what?

We need to modify the Home Page template to pull in our new field. Templates are found in the app folder under templates. Let's look at the home_page.html template. It uses the Django templating system and has default content added that we can now delete. Delete {% comment %} code, the CSS file link (we will want to replace that), and the line {% include 'home/welcome_page.html' %} because we are going to make our own Home Page content.
We can add a CSS link specific to this page between these two tags: {% block extra_css %} {% endblock extra_css %}; however, the page extends base.html, which is actually found in myproject > static > css. The global CSS link should be added to base.html. For simplicity, we are just going to pull in the Bootstrap CDN but feel free to make your CSS in the myproject,css file. Add it under the {# Global stylesheets #} comment tag and save it.
Now go back to home_page.html. We will put our content within the tags {% block content %} {% endblock content %}. Our code will be:

{% extends "base.html" %}
{% load static wagtailcore_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block extra_css %}{% endblock extra_css %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12 text-center border-bottom border-success">
            <h1>{{page.title}}</h1>
        </div>
        <div class="col my-4">
            {{page.body|richtext}}
        </div>
    </div>
</div>
{% endblock content %}

I've added some basic Bootstrap classes to style the page a little. We need to load static to pull in CSS and JS, and we need wagtailcore_tags for the special filtering we did for the body field. To include fields in your templates, you put them between curly braces and use dot notation: {{page.body}}. RichTextFields need a richtext filter to display correctly.

Save these changes, then python manage.py runserver and edit the Home Page with some content to see it in action!

WHAT OTHER FIELDS CAN YOU ADD TO A PAGE? Well, you can add Django fields like models.CharField and Wagtail StreamField Blocks - check out the StreamField reference to learn more!

Customizing Your Site - Part II

Now let's make our own page model and template!

I added some new imports at the top, so now my imports look like this:

from wagtail.core.models import Page
from wagtail.core import blocks
from wagtail.core.fields import RichTextField, StreamField
from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtail.images.blocks import ImageChooserBlock

Then I created my basic Web Page model. I added the template to home > templates > home and specified in my model which template I am going to use. Then I added the content fields that I wanted for my Web Page. This is my code:

class WebPage(Page):

    cover_image = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )
    subtitle = models.CharField(
        max_length = 255,
        null = True,
        blank = True,
    )
    body = StreamField([
        ('text', blocks.RichTextBlock(null=True, blank=True)),
        ('image', ImageChooserBlock(null=True, blank=True)),
        ],
        blank=True,
    )

    template="home/web_page.html"

    content_panels = Page.content_panels + [
        ImageChooserPanel('cover_image'),
        FieldPanel('subtitle'),
        StreamFieldPanel('body'),
    ]

Go ahead and makemigrations and migrate.
Now in our web_page.html template, we can copy some of the code from the Home Page template. We will need to load wagtailimages_tags at the top, though, because we have images in this model that are not in the RichTextField.

NOTE: You can use logic in Wagtail templates the same way you use them in Django templates! Remember that Wagtail uses the same templating system as Django.

This is the code for my template (with very basic layout and styling):

{% extends "base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block extra_css %}{% endblock extra_css %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        {% if page.cover_image %}
        {% image page.cover_image fill-2000x1000 as cover_image %}
        <div class="col-12 py-5 text-white text-center" style="background-image:url({{cover_image.url}});background-repeat:no-repeat;">
            <div class="py-3">
                <h2>{{page.title}}</h2>
                <h3>{{page.subtitle}}</h3>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<div class="container">
    <div class="row my-3">
        {% for block in page.body %}
        <div class="col-12">
            {% include_block block %}
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

Agora runserver, crie uma nova página da Web, adicione algum conteúdo e veja como fica!

Você acabou de criar um site Wagtail! PARABÉNS! 🎉🎉🎉

Wagtail é divertido de construir e fácil de usar para editores.

Próximos passos

Adicione mais páginas, personalize ainda mais seus modelos e brinque com o editor.

# python #django _

ESCRITO POR

Roxanna Coldiron

Escritor virou desenvolvedor web que ainda gosta de escrever todas as coisas. Interessado em cibersegurança, ciência de dados, desenvolvimento de jogos, animação e criação de sites à moda antiga com Python/Django. Além disso, senhora dos gatos.