A Full Stack Develpor

1. Models.py

    from wagtail.core import blocks as streamfield_blocks
    
    
    content = StreamField(
        [
			...
            ("char_block", streamfield_blocks.CharBlock(
                required=True,
                help_text="Oh wow this is help text!!",
                min_length=10,
                max_length=50,
                template="streams/char_block.html"
            ))
        ],
    )

2. templates

streams/char_block.html

<div class="container">
    <div class="row">
        <col-sm-10 class="offset-sm-1">
            {{ self }}
        </col-sm-10>
    </div>
</div>

HomePage._meta.get_field("title").verbose_name = "To any verbose name"
HomePage._meta.get_field("title").help_text = None
HomePage._meta.get_field("title").default = "Some default title Homepage"
HomePage._meta.get_field("slug").default = "some-default-title-for-homepage"

홈페이지의 Page 필드의 기본 필드인 title이나 slug등을 Custom 하고 싶다면 위와 같이 바꾸면 된다. 

Wagtail Admin Page에서 panels을 Custom 할 수 있다. 

 from wagtail.admin.edit_handlers import (
    ObjectList,
    TabbedInterface
)
    
    
class HomePage(Page):
	...

    # promote_panels = []
    # settings_panels = []
    
    banner_panels = [
        MultiFieldPanel([
            FieldPanel("banner_title"),
            FieldPanel("banner_subtitle"),
            ImageChooserPanel("banner_image"),
            PageChooserPanel("banner_cta"),
        ], heading="Banner Options"),
    ]
    
    edit_handler = TabbedInterface(
        [
            ObjectList(content_panels, heading="Content"),
            ObjectList(banner_panels, heading="Banner Settings"),
            ObjectList(Page.promote_panels, heading="Promotional Stuff"),
            ObjectList(Page.settings_panels, heading="Setting Stuff"),
        ]
    )

edit_handler를 통해 overide가 가능하다. 

Wagtail에서는 태그 기능을 지원한다. 

훌륭한 인터페이스로 제공된 Tag기능을 사용해보자.

1. Tag 클래스 모델 만들기

from taggit.models import TaggedItemBase


class BlogPageTag(TaggedItemBase):
    content_object = ParentalKey(
        'BlogDetailPage',
        related_name="tagged_items",
        on_delete=models.CASCADE
    )

먼저 Tag 모델을 만들어주자. 태그 기능을 사용할 class를 ParentalKey로 연결해주면 된다. 

2. tag 필드 만들기

from modelcluster.contrib.taggit import ClusterTaggableManager


class BlogDetailPage(Page):
    """Parental Blog Detail Page"""
	
    ...
    
    tags = ClusterTaggableManager(through=BlogPageTag, blank=True)

ParentalKey로 연결해준 클래스 모델에 tags라는 이름의 필드를 만든다. 

3. Content_Panels에 등록

content_panels = Page.content_panels + [
      	...
        FieldPanel("tags"),
]

content_panel에 tag를 등록하고 사용해준다.

4. tag로 검색

    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        all_posts = BlogDetailPage.objects.live().public().order_by('-first_published_at')
        
        if request.GET.get('tag', None):
            tags= request.GET.get('tag')
        all_posts = all_posts.filter(tags__slug__in=[tags])

BlogListingPage에서 태그로 검색하는 기능을 만들고 싶다면 위와 같이 하면 된다. 

?tags=태그

5. Template

    <h1>Tags:</h1>

    {% for tag in page.tags.all %}
        <a href="/blog/?tag={{ tag.slug }}">{{ tag }} -- {{ tag.slug }}</a><br />
    {% endfor %}

page의 tags필드의 all로 모든 태그를 가져올 수 있다. 

Wagtail Ajax Template을 간단하게 적어보고 넘어가려고 한다. 

1. base.html

{# Global javascript #}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js" integrity="sha512-WBbdKQKeIQFarq1hrOxNL/gnp0Tqh25fn0z3X1po+ej8iuHhHdp6Sh9l+tghGw5L1bsvtzjeuSKsL80RW3XdYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

base.html에는 기본적으로 jquery slim버전이 있을 것이다. 하지만 slim은 ajax를 지원하지 않으니 https://cdnjs.com/libraries/jquery

으로 가서 ajax가 포함된 jquery로 바꿔주자.

2. blog/models.py

class BlogListingPage(RoutablePageMixin, Page):

    template = "blog/blog_listing_page.html"
    ajax_template = "blog/blog_listing_page_ajax.html"
    max_count = 1
    subpage_types = ['blog.ArticleBlogPage', 'blog.VideoBlogPage']

Wagtail은 ajax_template 기능을 제공한다. 새로운 html 파일을 만들어서 ajax 기능을 적으면 된다. 

3. Template blog/blog_listing_page_ajax.html

{% for post in posts %}
    <h1>{{ post.title }}</h1>
    {% if post.specific.subtitle %}
        <p>{{ post.specific.subtitle }}</p>
    {% endif %}
{% endfor %}

간단하게 post들의 title과 subtitle을 가져오는 템플릿을 작성하였다. 

4. 사용

크롬에서 f12를 누르고 개발자 도구에서 콘솔로 실행시킨다. 

Django Ninja API에서 한글이 제대로 출력 되지 않는 문제가 있을 것이다. 

다음과 같이 해결하면 된다.

https://django-ninja.rest-framework.com/tutorial/response-renderers/#xml-renderer-example 

1) orjson 설치

pip install --upgrade orjson

2) api 수정

import orjson
from ninja import NinjaAPI
from ninja.renderers import BaseRenderer


class ORJSONRenderer(BaseRenderer):
    media_type = "application/json"

    def render(self, request, data, *, response_status):
        return orjson.dumps(data)

api = NinjaAPI(renderer=ORJSONRenderer())

렌더링 문제였고 orjson을 통해 해결 하였다.