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간의 데이터 송수신에도 편리하게 이용할 수 있을 것이다.
