Wagtail Routable Pages

https://www.youtube.com/watch?v=W2oHKiAYl3U&list=PLMQHMcNi6ocsS8Bfnuy_IDgJ4bHRRrvub&index=17 

 

Wagtail Routable Pages를 공부하면서 정리해보려고 한다. 

 

그동안 프로젝트를 진행하면서 Ajax 사용으로 많이 사용했었는데 정확한 사용방법을 숙지하지 못했던 것 같아서 정리하고 넘어가려고 한다. 

 

1. Settings

 

settings/base.py

INSTALLED_APPS = [
	'wagtail.contrib.routable_page',
]

 

 

 

2. Models

 

blog/models.py

from django.shortcuts import render
...
from wagtail.contrib.routable_page.models import RoutablePageMixin, route


class BlogListingPage(RoutablePageMixin, Page):
    
    template = "blog/blog_listing_page.html"
    
    custom_title = models.CharField(
        max_length=100, 
        blank=False,
        null=False,
        help_text="Overwrites the default title",
        )
    
    content_panels = Page.content_panels + [
        FieldPanel("custom_title"),
    ]

    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        context['posts'] = BlogDetailPage.objects.live().public()         
        return context
    
    @route(r'^latest/$')
    def latest_blog_posts(self, request, *args, **kwargs):
        context = self.get_context(request, *args, **kwargs)
        context["posts"] = context["posts"][:1]
        return render(request, "blog/latest_posts.html", context)

동영상대로 BlogListPage에 추가했다. 여기서 중요한 점은 RoutablePageMixin을 Page앞에 적어줘야 한다는 점이다. 

(RoutablePageMixin, Page)

 

route를 사용하기 위해 데코레이터를 사용하는데 

@route(r'^$')형태로 사용한다. ^와$ 사이에 이동할 url 주소를 적어주면 된다.

(/는 Wagtail과 Django url 설정의 기본이다. 다만 ?를 사용할 경우 생략해도 되는데 ?가 자동으로 /를 추가해주기 때문이다. @route(r'^latest?$'))

 

route에서 get_context을 overwrite할 수가 있다. get_context에서는 현재 발행 중인 모든 blog post를 posts에 저장하여 return 해주었고 route에서는 context를 overwrite해서 가장 최근에 등록된 blog post 1개를 보여주는 것이다. 

 

그리고 blog/latest_posts.html에 request와 context를 같이 render 해준다.

 

 

3. Templates

 

2개의 template를 살펴볼 것이다. 한개는 blog_listing_page.html 다른 하나는 latest_posts.html이다. 

 

1)

blog/blog_listing_page.html

{% extends "base.html" %}

{% load wagtailimages_tags wagtailroutablepage_tags %}

{% block content %}

    <a href="{% routablepageurl page 'latest_blog_posts' %}">View Latest Posts Only</a>

    <div class="container">
        {% for post in posts %}
            <div class="row">
                <div class="col-sm-3">
                    {% image post.blog_image fill-250x250 as blog_img %}
                    <a href="{{ post.url }}">
                        <img src="{{ blog_img.url }}" alt="{{ blog_img.alt }}">
                    </a>
                </div>
                <div class="col-sm-9">
                    <a href="{{ post.url }}">
                        {{ post.custom_title }}
                    </a>
                </div>
            </div>
            <br>
        {% endfor %}
    </div>

{% endblock content %}

route를 연결해주기 위해 상단에 {% load wagtailroutablepage_tags %}을 적용하였다. 

a 태그를 누르면 route 페이지로 이동하려고 하는데 Django url이 아닌 Wagtail의 routable url를 사용한다. 

 

<a href="{% routablepageurl page 'latest_blog_posts' %}">View Latest Posts Only</a>

여기서 살펴볼 것은 route데코레이터가 붙은 함수명을 사용한다는 것이다. (함수명이 길 때에는 name을 사용하면 된다.

@route(r'^latest/$', name="route_name"))으로 적어주고 

 

<a href="{% routablepageurl page 'route_name' %}">View Latest Posts Only</a>

으로 사용한다.)

 

2)

blog/latest_posts.html

{% extends "base.html" %}

{% load wagtailimages_tags %}

{% block content %}

    <div class="container">
        <h1>Latest Posts </h1>
        {% for post in posts %}
            <div class="row">
                <div class="col-sm-3">
                    {% image post.blog_image fill-250x250 as blog_img %}
                    <a href="{{ post.url }}">
                        <img src="{{ blog_img.url }}" alt="{{ blog_img.alt }}">
                    </a>
                </div>
                <div class="col-sm-9">
                    <a href="{{ post.url }}">
                        {{ post.custom_title }}
                    </a>
                </div>
            </div>
            <br>
        {% endfor %}
    </div>

{% endblock content %}

context['posts']에 최근 블로그 포스트가 담겨져 있으므로 기존 페이지와 사용방법에 큰 차이는 없다. 

 

Routable Page는 Ajax 통신에도 사용가능하고 GET방식을 이용하여 Server와 Templates간의 데이터 송수신에도 편리하게 이용할 수 있을 것이다.