[Django] 포스팅 목차 자동으로 생성하기

소모임 > 인공지능 Posted 2023.08.08 by 티쳐✨

552

장고에서 목차를 자동으로 생성하는 방법을 살펴보겠습니다.

보통 글을 작성할 때 h태그를 사용하여 작성합니다.

저 같은 경우는 h1은 포스트의 제목에 사용하고

포스트의 컨텐츠안에는 h2,h3를 사용하여 소제목을 구성합니다.

이렇게 작성된 경우 h2,와 h3태그를 찾아와 자동으로 목차로 생성하고 이를 바로 보여주는 방법을 알려드리겠습니다.

현재 페이지의 목차도 자동으로 생성된 목차입니다.

1. 필요한 라이브러리 및 view.py 수정

post의 내용에서 태그를 찾기 위해 beautifulsoup 라이브러리를 이용하면 좋습니다.

웹크롤링에 실제로 많이 사용되는 라이브러리입니다. 쉽게 html정보에 접근할 수 있도록 도와줍니다.

pip install beautifulsoup4 로 설치한 후

다음과 같이 함수를 작성합니다.

물론 view에 작성해야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
from bs4 import BeautifulSoup
 
def extract_headers(content):
    soup = BeautifulSoup(content, 'html.parser')
    headers = []
 
    for header in soup.find_all(['h2', 'h3']):
        headers.append({
            'tag': header.name,
            'text': header.get_text()
        })
 
    return headers
cs

위 과정은 headers에 h1,h2 태그 정보를 담는 과정입니다.

이제 이정보를 상세페이지로 보내는 뷰함수 내부에 넣어서 context에 담아 보내야 합니다.

1
2
    headers = extract_headers(context['post'].content)
    context['headers'] = headers
cs

이렇게 작성하면 view에서의 작업은 끝납니다.

2. 템플릿 수정

이제 템플릿을 수정해야 합니다.

headers가 항상 있는 것은 아니므로 if를 사용하여 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
{% if headers %}
    <div class="toc">
        <h3>목차</h3>
        <ul>
            {% for header in headers %}
                <li class="{{ header.tag }}">
                    {{ header.text }}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}
Colored by Color Scripter
cs