[Python] django 앵커(anchor) 기능 구현하기

앵커(anchor) 기능이란 URL 호출 시 원하는 위치로 화면 이동하는 기능을 말합니다.

예를 들어 HTML 중간에 라는 앵커 태그가 있다면 이 HTML 을 호출하는 URL 뒤에 #django 라고 붙여주면 해당 페이지가 호출되면서 해당 앵커로 스크롤이 이동하게 됩니다.

현재 게시판은 답변을 작성 또는 수정하고 저장하면 페이지 상단으로 스크롤되어 이동되어 화면에 보여집니다. 내가 작성한 답변을 확인하려면 다시 스크롤으르 내려야 합니다. 이점을 개선하고자 합니다.

답변 등록, 답변 수정, 답변 추천시 앵커 태그를 이용하여 원하는 위치로 이동하게끔 수정합니다.

답변 앵커 추가

먼저 답변 작성, 수정시에 이동해야할 앵커 태그를 질문 상세 페이지에 추가합니다.

mysite\templates\pybo\question_detail.html 

<!-- 답변 -->
<h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
{% for answer in question.answer_set.all %}
<!-- 답변 앵커 추가 시작 -->
<a id="answer_{{ answer.id }}"></a>
<!-- 답변 앵커 추가 끝 -->
<div class="card my-3">
    <div class="card-body">
        <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
        <div class="d-flex justify-content-end">

답변이 반복되어 표시되는 for문 바로 다음에 <a id="answer_{{ answer.id }}"></a> 의 앵커 구문을 추가합니다.

 

답변 redirect

이제 답변을 등록하거나 수정할 때 위에서 지정한 앵커 태그로 자동 이동하도록 코드를 수정합니다.

상단에 import 문에 resolve_url을 추가합니다. resolve_url은 실제 호출되는 URL 문자열을 리턴하는 장고 함수입니다. 

from django.shortcuts import render, get_object_or_404, redirect, resolve_url

그리고 answer_create, answer_modify, answer_vote 함수 return redirect 구문을 아래와 같이 수정합니다.

def answer_create(request, question_id):
    (...생략...)
            return redirect('{}#answer_{}'.format(
                            resolve_url('pybo:detail', question_id=question.id), answer.id))
        else:
            form = AnswerForm()          
        context = {'question': question, 'form': form}
        return render(request, 'pybo/question_detail.html', context)

def answer_modify(request, answer_id):
    (...생략...)
            return redirect('{}#answer_{}'.format(
                resolve_url('pybo:detail', question_id=answer.question.id), answer.id))
    else:
        form = AnswerForm(instance=answer)
    context = {'answer': answer, 'form':form}
    return  render(request, 'pybo/answer_form.html', context)

@login_required(login_url='common:login')
def answer_vote(request, answer_id):
    (...생략...)
    return redirect('{}#answer_{}'.format(
                resolve_url('pybo:detail', question_id=answer.question.id), answer.id))

 

앵커 기능 작동 확인

답변을 수정하고 저장하면 해당 답변으로 자동 스크롤 되어 보여집니다.

 

해당 글은 wikidocs 의 점프투장고 글을 보고 공부한 내용을 정리한 글입니다. :)