연락처 페이지 생성¶

포트폴리오 사이트에 연락처 페이지가 있으면 잠재 고객, 고용주 또는 기술에 관심 있는 다른 전문가와 연결하는 데 도움이 됩니다.

이 튜토리얼 섹션에서는 Wagtail 폼을 사용하여 포트폴리오 사이트에 연락처 페이지를 추가합니다.

base/models.py 파일을 수정하여 시작합니다:

from django.db import models

# parentalKey 가져오기:
from modelcluster.fields import ParentalKey

# FieldRowPanel 및 InlinePanel 가져오기:
from wagtail.admin.panels import (
    FieldPanel,
    FieldRowPanel,
    InlinePanel,
    MultiFieldPanel,
    PublishingPanel,
)

from wagtail.fields import RichTextField
from wagtail.models import (
    DraftStateMixin,
    PreviewableMixin,
    RevisionMixin,
    TranslatableMixin,
)

# AbstractEmailForm 및 AbstractFormField 가져오기:
from wagtail.contrib.forms.models import AbstractEmailForm, AbstractFormField

# FormSubmissionsPanel 가져오기:
from wagtail.contrib.forms.panels import FormSubmissionsPanel
from wagtail.contrib.settings.models import (
    BaseGenericSetting,
    register_setting,
)
from wagtail.snippets.models import register_snippet


# ...NavigationSettings 및 FooterText 정의를 유지합니다. FormField 및 FormPage를 추가합니다:
class FormField(AbstractFormField):
    page = ParentalKey('FormPage', on_delete=models.CASCADE, related_name='form_fields')


class FormPage(AbstractEmailForm):
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        FormSubmissionsPanel(),
        FieldPanel('intro'),
        InlinePanel('form_fields', label="폼 필드"),
        FieldPanel('thank_you_text'),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address'),
                FieldPanel('to_address'),
            ]),
            FieldPanel('subject'),
        ], "이메일"),
    ]

이전 코드에서 FormField 모델은 AbstractFormField 에서 상속됩니다. AbstractFormField 를 사용하면 관리 인터페이스에서 원하는 폼 필드 유형을 정의할 수 있습니다. page = ParentalKey('FormPage', on_delete=models.CASCADE, related_name='form_fields') 는 FormField 와 FormPage 모델 간의 부모-자식 관계를 정의합니다.

반면에 FormPage 모델은 AbstractEmailForm 에서 상속됩니다. AbstractFormField 와 달리 AbstractEmailForm 은 폼-이메일 기능을 제공합니다. 또한 to_address, from_address, subject 필드를 정의합니다. form_fields 가 정의되어야 합니다.

FormField 및 FormPage 모델을 정의한 후 form_page 및 form_page_landing 템플릿을 생성해야 합니다. form_page 템플릿은 일반적인 Wagtail 템플릿과 다릅니다. 일반적인 Page 변수 외에 Django Form 객체를 포함하는 form 이라는 변수가 전달되기 때문입니다. 반면에 form_page_landing.html 은 표준 Wagtail 템플릿입니다. 사용자가 폼을 성공적으로 제출하면 사이트에서 form_page_landing.html 을 표시합니다.

이제 base/templates/base/form_page.html 파일을 생성하고 다음을 추가합니다:

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

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

{% block content %}
    <h1>{{ page.title }}</h1>
    <div>{{ page.intro|richtext }}</div>

    <form class="page-form" action="{% pageurl page %}" method="POST">
        {% csrf_token %}
        {{ form.as_div }}
        <button type="Submit">제출</button>
    </form>
{% endblock content %}

또한 base/templates/base/form_page_landing.html 파일을 생성하고 다음을 추가합니다:

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

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

{% block content %}
    <h1>{{ page.title }}</h1>
    <div>{{ page.thank_you_text|richtext }}</div>
{% endblock content %}

이제 포트폴리오 웹사이트에 연락처 페이지를 만드는 데 필요한 모든 코드 줄과 템플릿을 추가했습니다.

이제 python manage.py makemigrations 를 실행한 다음 python manage.py migrate 를 실행하여 데이터베이스를 마이그레이션합니다.

연락처 정보 추가¶

포트폴리오 사이트에 연락처 정보를 추가하려면 다음 단계를 따르십시오:

다음 단계를 따라 홈의 자식 페이지로 폼 페이지를 생성합니다:

a. 서버를 다시 시작합니다. b. 관리 인터페이스로 이동합니다. c. 사이드바에서 페이지 를 클릭합니다. d. 홈 을 클릭합니다. e. 결과 페이지 상단의 + 아이콘(자식 페이지 추가)을 클릭합니다. f. 폼 페이지 를 클릭합니다.
필요한 데이터를 추가합니다.
폼 페이지 를 게시합니다.

연락처 페이지 스타일 지정¶

연락처 페이지 스타일을 지정하려면 mysite/static/css/mysite.css 파일에 다음 CSS를 추가합니다:

.page-form label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

.page-form :is(textarea, input, select) {
    width: 100%;
    max-width: 500px;
    min-height: 40px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.page-form .helptext {
    font-style: italic;
}

이 튜토리얼의 다음 섹션에서는 사이트에 포트폴리오 페이지를 추가하는 방법을 배웁니다.