# 홈페이지 사용자 정의

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

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

1.  **소개:** 간결한 소개는 방문자의 주의를 사로잡습니다.
2.  **전기:** 자신을 소개하는 간략한 전기를 포함합니다. 이 섹션에는 이름, 역할, 전문 지식 및 고유한 자질이 언급되어야 합니다.
3.  **히어로 이미지:** 전문적인 헤드샷 또는 작업을 보여주고 시각적 매력을 더하는 다른 이미지일 수 있습니다.
4.  **클릭 유도 문안(CTA):** "포트폴리오 보기", "고용하기" 또는 "더 알아보기"와 같이 방문자가 특정 작업을 수행하도록 안내하는 CTA를 통합합니다.
5.  **이력서:** 교육, 경력, 성과 및 자격에 대한 요약을 제공하는 문서입니다.

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

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

```python
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.db.models.ForeignKey.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 튜토리얼](../getting_started/tutorial.md)에서는 이미 `content_panels` 를 설명했습니다. [FieldPanel](field_panel)과 [MultiPanel](multiFieldPanel)은 Wagtail의 내장 [패널](editing_api) 유형입니다. 둘 다 기본 패널 클래스의 서브클래스이며 자체 매개변수 외에 Wagtail의 모든 `Panel` 매개변수를 허용합니다. `FieldPanel` 은 기본 Django 모델 필드에 대한 위젯을 제공하는 반면, `MultiFieldPanel` 은 편집 폼의 구조를 결정하는 데 도움이 됩니다. 예를 들어, 관련 필드를 그룹화할 수 있습니다.

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

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

(add_content_to_your_homepage)=

## 홈페이지에 콘텐츠 추가

관리 인터페이스를 통해 홈페이지에 콘텐츠를 추가하려면 다음 단계를 따르십시오:

1.  관리자 사용자 이름과 비밀번호로 [관리 인터페이스](http://127.0.0.1:8000/admin/)에 로그인합니다.
2.  페이지를 클릭합니다.
3.  **홈** 옆의 **연필** 아이콘을 클릭합니다.
4.  이미지를 선택하고, 페이지를 선택하고, 입력 필드에 데이터를 추가합니다.

```{note}
홈페이지 또는 블로그 인덱스 페이지를 클릭 유도 문안에 연결하도록 선택할 수 있습니다. 튜토리얼 뒷부분에서 더 적합한 페이지를 선택할 수 있습니다.
```

5.  홈페이지를 게시합니다.

이제 홈페이지에 필요한 모든 데이터가 있습니다. 브라우저에서 `http://127.0.0.1:8000` 으로 이동하여 홈페이지를 방문할 수 있습니다. 모든 데이터를 볼 수 없죠? 데이터를 표시하려면 홈페이지 템플릿을 수정해야 하기 때문입니다.

`home/templates/home/home_page.html` 파일의 내용을 다음으로 바꿉니다:

```html+django
{% 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 %}
```

홈페이지 템플릿에서 13행의 `firstof` 사용에 주목하십시오. 일련의 대체 옵션을 만들었고 값이 있는 첫 번째 옵션을 표시하려는 경우 이 태그를 사용하는 것이 유용합니다. 따라서 템플릿에서 `firstof` 템플릿 태그는 `page.hero_cta` 에 값이 있으면 이를 표시합니다. `page.hero_cta` 에 값이 없으면 `page.hero_cta_link.title` 을 표시합니다.

축하합니다! 포트폴리오 웹사이트의 첫 번째 단계를 완료했습니다 🎉🎉🎉.

<!--
Thibaud에게 이력서 페이지를 다운로드할 수 있는지 물어보십시오.
-->