사이트에 검색 추가

Wagtail start 명령을 사용하여 프로젝트를 시작하면 내장 검색 앱이 제공됩니다. 이 내장 검색 앱은 사이트에 간단한 검색 기능을 제공합니다.

그러나 포트폴리오 사이트에 맞게 검색 템플릿을 사용자 정의할 수 있습니다. 검색 템플릿을 사용자 정의하려면 search/templates/search.html 파일로 이동하여 다음과 같이 수정합니다:

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

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

{% block title %}검색{% endblock %}

{% block content %}
<h1>검색</h1>

<form action="{% url 'search' %}" method="get">
    <input type="text" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>
    <input type="submit" value="검색" class="button">
</form>

{% if search_results %}

{# 찾은 결과의 세부 정보를 표시하려면 이 단락을 추가합니다: #}
<p>검색어{% if search_query %} “{{ search_query }}”{% endif %}에 대한 {{ search_results.paginator.count }}개의 결과가 발견되었습니다.</p>

{# <ul> HTML 요소를 <ol> html 요소로 바꿉니다: #}
<ol>
    {% for result in search_results %}
    <li>
        <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
        {% if result.search_description %}
        {{ result.search_description }}
        {% endif %}
    </li>
    {% endfor %}
</ol>

{# 다음을 추가하여 페이지 매김을 개선합니다: #}
{% if search_results.paginator.num_pages > 1 %}
    <p>{{ search_results.paginator.num_pages }}페이지 중 {{ search_results.number }}페이지, {{ search_results|length }}개 결과 중 {{ search_results.paginator.count }}개 표시</p>
{% endif %}

{% if search_results.has_previous %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">이전</a>
{% endif %}

{% if search_results.has_next %}
<a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">다음</a>
{% endif %}

{% elif search_query %}
결과를 찾을 수 없습니다
{% endif %}
{% endblock %}

이제 이전 템플릿에서 수행한 사용자 정의를 설명하겠습니다:

  1. <p>검색어{% if search_query %} “{{ search_query }}”{% endif %}에 대한 {{ search_results.paginator.count }}개의 결과가 발견되었습니다.</p> 를 사용하여 검색어, 찾은 결과 수, 그리고 둘 이상의 검색 결과가 발견되면 “result”의 복수형을 표시했습니다.

  2. <ul> HTML 요소를 <ol> HTML 요소로 바꿨습니다. <ol> HTML 요소는 각 검색 결과를 반복하고 목록 항목으로 표시하는 루프를 포함합니다. <ol> 을 사용하면 번호가 매겨진 검색 결과를 얻을 수 있습니다.

  3. 템플릿의 페이지 매김을 개선했습니다. {% if search_results.paginator.num_pages > 1 %} 는 검색 결과 페이지가 두 개 이상인지 확인합니다. 두 개 이상이면 현재 페이지 번호, 총 페이지 수, 현재 페이지의 결과 수, 총 결과 수를 표시합니다. {% if search_results.has_previous %} 및 {% if search_results.has_next %} 는 이전 및 다음 검색 결과 페이지가 있는지 확인합니다. 존재하면 페이지 매김에 적합한 URL과 함께 “이전” 및 “다음” 링크를 표시합니다.

이제 사이트 전체에 검색을 표시하려고 합니다. 이를 수행하는 한 가지 방법은 헤더에 추가하는 것입니다. mysite/templates/includes/header.html 파일로 이동하여 다음과 같이 수정합니다:

{% load wagtailcore_tags navigation_tags wagtailuserbar %}

<header>
    <a href="#main" class="skip-link">콘텐츠로 건너뛰기</a>
    {% get_site_root as site_root %}
    <nav>
        <p>
          <a href="{% pageurl site_root %}">{{ site_root.title }}</a> |
          {% for menuitem in site_root.get_children.live.in_menu %}
            <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}
          {% endfor %}

          {# 검색을 표시하려면 이것을 추가합니다: #}
          | <a href="/search/">검색</a>
        </p>
    </nav>

    {% wagtailuserbar "top-right" %}
</header>

이제 검색을 실행하고 결과를 볼 수 있습니다. 그러나 검색은 현재 페이지 제목에서 발견된 단어에 대한 결과만 반환합니다. 다른 필드를 검색 가능하게 만들려면 검색 인덱스에 추가해야 합니다. - 색인화를 참조하십시오. blog/models.py 에 다음 코드를 추가합니다:

# 기존 가져오기에 추가:
from wagtail.search import index

class BlogPage(Page):
    # 기존 parent_page_types, fields, methods 및 content_panels 정의를 유지하고 다음을 추가합니다:

    search_fields = Page.search_fields + [
        index.SearchField('intro'),
        index.SearchField('body'),
    ]

이제 BlogPage 의 body 필드를 포함하여 검색 인덱스를 다시 빌드하려면 다음 명령을 실행합니다:

python manage.py update_index

이제 검색은 본문 텍스트에서 발견된 단어에 대한 결과를 반환합니다.

잘하셨습니다! 이제 완전히 배포 가능한 포트폴리오 사이트가 있습니다. 이 튜토리얼의 다음 섹션에서는 사이트를 배포하는 방법을 안내합니다.