0

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

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

보통 글을 작성할 때 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 %}
cs


위와 같이 작성하여 목차를 생성하고 싶은 적당한 위치에 작성하면 됩니다.

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile App” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Shopping Cart

Iblender The best kitchen gadget in 2022
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMaxr Professional camera for edge
$ 150 for 3
$D Printer Manfactoring unique objekts
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7
Samsung Profile info,Timeline etc
$ 720 for 6
$D Printer Manfactoring unique objekts
$ 430 for 8