wagtail 첫번째 앱과 모델 만들기.

이 글의 목적은 첫페이지에서 하나의 앱으로 연결하고 그 앱의 하부요소 2개로 이동해 보는 것이다.
wagtail 시작하기는 https://blingstarhamal.tistory.com/492 를 참조

 

django는 하나의 프로젝트에 여러가지 앱들이 달려있는 구조인데 이는 wagtail cms 적용을해도 마찬가지다.
내 프로젝트의 이름은 custom 이고, category라는 앱을 하나 만들었다.

python manage.py startapp category

├── Dockerfile
├── category # 새로만든 앱
├── custom
├── db.sqlite3
├── home
├── manage.py
├── requirements.txt
└── search

 

기본적으로 wagtail 설치를 끝냈으면 프로젝트폴더(custom) 홈폴더(home) 서치폴더는(search) 기본으로 생긴다.
나는 위에서 써있듯 category 앱을 추가했다.

wagtail 각종 설정은 프로젝트폴더에서 진행해야하는데(나의경우 custom) 위에서 설치한 앱을 설정에 추가해줘야한다. startapp을 할때 자동으로 설치가 되기도하던데 안되어있으면 추가를 해줘야한다.

# project/settings/base.py

INSTALLED_APPS = [
	# ... 자동 설치 앱들 ...
    "category", #새로 추가한 앱
    ]

 

wagtail 기본 로컬호스트 주소로 들어가보면 (http://127.0.0.1:8000/) 웬 초록 계란하나를 볼 수 있다. 이 페이지 내용의 경우엔
home/templates/home/welcome_page.html 부분인데 wagtail 앱은 같은 패턴이지만 처음에는 조금 헤깔릴 수 있게 구조화되어 있다.

├── Dockerfile
├── category
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── custom
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-311.pyc
│   │   ├── urls.cpython-311.pyc
│   │   └── wsgi.cpython-311.pyc
│   ├── settings
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   │   ├── __init__.cpython-311.pyc
│   │   │   ├── base.cpython-311.pyc
│   │   │   └── dev.cpython-311.pyc
│   │   ├── base.py
│   │   ├── dev.py
│   │   └── production.py
│   ├── static
│   │   ├── css
│   │   │   └── custom.css
│   │   └── js
│   │       └── custom.js
│   ├── templates
│   │   ├── 404.html
│   │   ├── 500.html
│   │   └── base.html
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── home
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-311.pyc
│   │   └── models.cpython-311.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0002_create_homepage.py
│   │   ├── 0003_homepage_description.py
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       ├── 0001_initial.cpython-311.pyc
│   │       ├── 0002_create_homepage.cpython-311.pyc
│   │       ├── 0003_homepage_description.cpython-311.pyc
│   │       └── __init__.cpython-311.pyc
│   ├── models.py
│   ├── static
│   │   └── css
│   │       └── welcome_page.css
│   └── templates
│       └── home
│           ├── home_page.html
│           └── welcome_page.html
├── manage.py
├── requirements.txt
└── search
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-311.pyc
    │   └── views.cpython-311.pyc
    ├── templates
    │   └── search
    │       └── search.html
    └── views.py

project 앱인 custom의 경우엔 templates 아래에 base.html이 바로 있지만 home 앱의 경우엔 templates/home/ 의 구조로 한번더 내부에 html 파일이 등장한다. 이러한 것들은 대부분 수정 가능하지만 초기엔 조금 복잡해 보이는게사실이다.

복잡한 부분은 계속 공부하면서 적어나가보기로 하고 모델을 만들어서 연결하는 과정을 작성해본다.

최상단 home에서 category 앱으로 연결하고 category 앱 내부의 2개의 페이지로 연결하는 것이 이 글의 목표다.
일단 최상단 home에 모델을 작성한다.

# home/models.py

from django.db import models

from wagtail.models import Page
from wagtail.admin.panels import FieldPanel


class HomePage(Page):
    max_count = 1

    description = models.TextField(blank=True)

    content_panels = Page.content_panels+[
        FieldPanel('description')
    ]

wagtail에서 class의 이름으로 된 templates 페이지를 만들어야한다 위의 경우엔 HomePage 이므로 home_page.html 페이지가 필요한 것이다. (대문자 기준으로 _ 언더바를 쓴다). 일단 home_page.html은 기본으로 만들어져 있기 때문에 추가로 생성 할 필요는 없다. 

description 하나만 가진 모델을 만들었다. 이를 홈페이지 메인에 출력해보고자 한다.

# home/templates/home/home_page.html

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

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

{% block extra_css %}

<link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">
{% endblock extra_css %}

{% block content %}

{{ page.description }} <!-- description 출력 -->

<!-- {% include 'home/welcome_page.html' %} -->

{% endblock content %}

기본 home_page.html 파일에서 block conent 사이에 {{ page.description }} 를 추가하고 include 부분은 제거했다.
이렇게하고 로컬호스트(http://127.0.0.1:8000/)에 접속하면 아무것도 나오지 않는다.

일단 터미널에서 makemigrations와 migrate를 진행하여 변경된 모델을 db에 적용한다.

python manage.py makemigrations  
python manage.py migrate

 

description을 넣어주기 위해서는 wagtail 관리자에 들어가야한다.
http://127.0.0.1:8000/admin 으로 접속하면 된다.
기본적으로 Home 모델은 만들어져 있다. 좌측에 pages 메뉴에서 Home 을눌러서 상단 + 옆에 action 메뉴에 들어가서 edit 페이지로 가거나 혹은 아래 이미지에서 Home 옆의 연필을 누르면 Home 모델을 수정이 가능하다.

 

description에 내용을 써주고 하단의 save draft 옆의 ^ 를 눌러서 publish을 해준 후 

 

다시 http://127.0.0.1:8000/에 접속해보면 써놓은 내용을 볼 수 있다.
( 자세한 css 요소나 django wagtail 설정 법은 다루지 않는다. 글 상단의 목표에만 가려고 한다. )

이젠 추가한 앱 (category)에 새 페이지와 하위 2개 페이지를 만들어 보고자 한다.

# category/models.py


from django.db import models
from wagtail.models import Page
from wagtail.admin.panels import FieldPanel

# Create your models here.


# category 메뉴 모델이다
class CategoryIndexPage(Page):
    max_count = 1
    parent_page_types = ['home.HomePage'] # home을 부모앱으로 갖으며, HomePage 모델 아래 만들수 있게 지정했다.
    subpage_types = ['CategoryPage'] # CategoryPage 모델을 자식으로 갖게 했다.

    description = models.TextField(blank=True)

    content_panels = Page.content_panels+[
        FieldPanel('description')
    ]


# category 아래에 있을 모델이다.
class CategoryPage(Page):

    parent_page_types = ['category.CategoryIndexPage'] # category 앱의 CategoryIndexPage를 부모 페이지로 갖는다

    description = models.TextField(blank=True)

    content_panels = Page.content_panels+[
        FieldPanel('description')
    ]

 

새로 추가한 앱에는 기본적으로 templates 폴더가 없으므로 생성해줘야한다.
위에서 CategoryIndexPage와 CategoryPage를 만들었으니 같은 이름의 html 파일을 만들어줘야한다.

<!-- category_index_page.html / category_page.html 둘다 똑같이 만들어준다 -->
<!-- category/templates/category/*.html -->

{% extends "base.html" %}
{% load static %}
{% block content %}

{{ page.description }}

{% endblock content %}

 

생성 후 터미널에서 모델에 db를 적용해준다.

python manage.py makemigrations  
python manage.py migrate

이제 그러면 categoryindexpage를 만들 수 있다.

home 아래에 여러가지 앱이나 페이지가 있다면 add child page 버튼을 누르면 선택지가 있지만, 현재는 그런게 없고 category index page만 만들수 있다. title과 description을 적당히 넣어주고 publish를 진행하면 home 아래에 새로운 페이지가 생긴 것을 볼 수 있다.

최상위 카테고리 탭의 오른쪽으로 마우스를 가져가면 + 아이콘이 보이며 add a child page를 볼 수 있다. 눌러서 categorypage를 2개 만들어본다.

staus 컬럼에 live를 누르면 각 페이지를 확인 할 수 있다.

이제 마지막으로  메인인 home_page에서 가장 아래의 하위카테고리1 하위카테고리2 까지 연결되는 버튼을 만들어 보고 싶다.
이는 wagtail pages query를 이용하면되는데 자세한 내용은 링크를 참조 (https://docs.wagtail.org/en/stable/reference/pages/queryset_reference.html)

<!-- home_page.html -->

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

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

{% block extra_css %}

<link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">
{% endblock extra_css %}

{% block content %}

{{ page.description }}

<br>
<a href="{{ page.get_children.first.url }}">{{ page.get_children.first.title }}</a> <!-- 첫번째 자식으로 연결-->

{% endblock content %}

<!-- category_index_page.html -->

{% extends "base.html" %}
{% load static %}
{% block content %}


{{ page.description }}
<br>
<a href="{{ page.get_parent.url }}">{{ page.get_parent.title }}</a> <!-- 부모로 연결-->
<br>

<!-- 자식들 연결-->
{% for child in page.get_children %}
<a href="{{ child.url }}">{{ child.title }}</a>
{% endfor %}

{% endblock content %}

<!-- category_page.html -->

{% extends "base.html" %}
{% load static %}
{% block content %}


{{ page.description }}
<br>
<a href="{{ page.get_parent.url }}">{{ page.get_parent.title }}</a> <!-- 부모로 연결 category_index_page-->
<br>
<a href="{{ page.get_parent.get_parent.url }}">{{ page.get_parent.get_parent.title }}</a> <!-- 부모의 부모로 연결 home_page-->

{% endblock content %}

 

적용하면 아래 처럼 페이지가 바뀐것을 볼 수 있다. (폰트 색상은 기본 css 가 home_page에만 적용이 되어 있기 때문)