홈페이지 사용자 정의¶

주의! 이 확장 튜토리얼을 진행하기 전에 첫 번째 Wagtail 사이트를 완료했는지 확인하십시오.

포트폴리오 웹사이트를 구축할 때 첫 번째 단계는 홈페이지를 설정하고 개인화하는 것입니다. 홈페이지는 훌륭한 첫인상을 남기고 포트폴리오의 핵심 메시지를 전달할 기회입니다. 따라서 홈페이지에는 다음 기능이 포함되어야 합니다:

1. 소개: 간결한 소개는 방문자의 주의를 사로잡습니다.

2. 전기: 자신을 소개하는 간략한 전기를 포함합니다. 이 섹션에는 이름, 역할, 전문 지식 및 고유한 자질이 언급되어야 합니다.

3. 히어로 이미지: 전문적인 헤드샷 또는 작업을 보여주고 시각적 매력을 더하는 다른 이미지일 수 있습니다.

4. 클릭 유도 문안(CTA): “포트폴리오 보기”, “고용하기” 또는 “더 알아보기”와 같이 방문자가 특정 작업을 수행하도록 안내하는 CTA를 통합합니다.

5. 이력서: 교육, 경력, 성과 및 자격에 대한 요약을 제공하는 문서입니다.

이 섹션에서는 홈페이지에 기능 1부터 4까지를 추가하는 방법을 배웁니다. 이력서 또는 CV는 튜토리얼 뒷부분에서 추가할 것입니다.

이제 home/models.py 파일을 수정하여 다음을 포함합니다:

from django.db import models

from wagtail.models import Page
from wagtail.fields import RichTextField

# MultiFieldPanel 가져오기:
from wagtail.admin.panels import FieldPanel, MultiFieldPanel


class HomePage(Page):
    # HomePage의 히어로 섹션 추가:
    image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
        help_text="홈페이지 이미지",
    )
    hero_text = models.CharField(
        blank=True,
        max_length=255, help_text="사이트 소개 작성"
    )
    hero_cta = models.CharField(
        blank=True,
        verbose_name="히어로 CTA",
        max_length=255,
        help_text="클릭 유도 문안에 표시할 텍스트",
    )
    hero_cta_link = models.ForeignKey(
        "wagtailcore.Page",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
        verbose_name="히어로 CTA 링크",
        help_text="클릭 유도 문안에 연결할 페이지 선택",
    )

    body = RichTextField(blank=True)

    # content_panels 수정:
    content_panels = Page.content_panels + [
        MultiFieldPanel(
            [
                FieldPanel("image"),
                FieldPanel("hero_text"),
                FieldPanel("hero_cta"),
                FieldPanel("hero_cta_link"),
            ],
            heading="히어로 섹션",
        ),
        FieldPanel('body'),
    ]

HomePage 모델의 다양한 부분에 이미 익숙할 것입니다. image 필드는 이미지 저장을 위한 Wagtail의 내장 이미지 모델을 참조하는 ForeignKey 입니다. 마찬가지로 hero_cta_link 는 wagtailcore.Page 에 대한 ForeignKey 입니다. wagtailcore.Page 는 Wagtail의 다른 모든 페이지 유형의 기본 클래스입니다. 즉, 모든 Wagtail 페이지는 wagtailcore.Page 에서 상속됩니다. 예를 들어, class HomePage(Page) 는 wagtailcore.Page 에서 상속됩니다.

on_delete=models.SET_NULL 을 사용하면 관리 인터페이스에서 이미지 또는 히어로 링크를 제거할 경우 홈페이지의 image 또는 hero_cta_link 필드가 null로 설정되지만 나머지 데이터는 보존됩니다. 자세한 내용은 Django 문서의 on_delete 속성을 참조하십시오.

기본적으로 Django는 모델에 ForeignKey 필드가 있을 때 모델 간에 역 관계를 생성합니다. Django는 또한 모델 이름과 _set 접미사를 사용하여 이 역 관계에 대한 이름을 생성합니다. 참조된 모델에서 ForeignKey 필드가 있는 모델에 액세스하려면 역 관계의 기본 이름을 사용할 수 있습니다.

related_name 속성을 사용하여 이 기본 명명 동작을 재정의하고 역 관계에 대한 사용자 지정 이름을 제공할 수 있습니다. 예를 들어, wagtailimages.Image 에서 HomePage 에 액세스하려면 related_name 속성에 제공한 값을 사용할 수 있습니다.

그러나 related_name="+" 를 사용하면 역 관계를 생성하지 않고 모델 간에 연결을 만듭니다. 즉, Django에게 HomePage 에서 wagtailimages.Image 에 액세스하는 방법을 만들도록 지시하지만 wagtailimages.Image 에서 HomePage 에 액세스하는 방법은 만들지 않습니다.

body 는 RichTextField 인 반면, hero_text 와 hero_cta 는 짧은 텍스트 저장을 위한 Django 문자열 필드인 CharField 입니다.

첫 번째 Wagtail 튜토리얼에서는 이미 content_panels 를 설명했습니다. FieldPanel과 MultiPanel은 Wagtail의 내장 패널 유형입니다. 둘 다 기본 패널 클래스의 서브클래스이며 자체 매개변수 외에 Wagtail의 모든 Panel 매개변수를 허용합니다. FieldPanel 은 기본 Django 모델 필드에 대한 위젯을 제공하는 반면, MultiFieldPanel 은 편집 폼의 구조를 결정하는 데 도움이 됩니다. 예를 들어, 관련 필드를 그룹화할 수 있습니다.

이제 HomePage 모델의 다양한 부분을 이해했으므로 python manage.py makemigrations 를 실행한 다음 python manage.py migrate 를 실행하여 데이터베이스를 마이그레이션합니다.

데이터베이스를 마이그레이션한 후 python manage.py runserver 를 실행하여 서버를 시작합니다.

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

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

{% block content %}
    <div>
        <h1>{{ page.title }}</h1>
        {% image page.image fill-480x320 %}
        <p>{{ page.hero_text }}</p>
        {% if page.hero_cta_link %}
            <a href="{% pageurl page.hero_cta_link %}">
                {% firstof page.hero_cta page.hero_cta_link.title %}
            </a>
        {% endif %}
    </div>

  {{ page.body|richtext }}
{% endblock content %}