Django 가 Markdown 글 디 렉 터 리 를 렌 더 링 하 는 방법 예제

책 을 읽 을 줄 아 는 사람 에 게 책 한 권 을 읽 을 때 해 야 할 첫 번 째 일 은 이 책의 목록 을 자세히 읽 는 것 이다.읽 기 목록 은 전체 내용 을 이해 하고 관심 있 는 부분 이 어디 에 있 는 지 정확히 알 아 읽 기 질 을 높 일 수 있다.
박문 도 마찬가지 로 좋 은 목록 은 블 로 거들 과 독자 들 에 게 모두 도움 이 된다.더 나 아가 디 렉 터 리 에 닻 점 을 설치 하고 제목 을 클릭 하면 바로 이곳 으로 갈 수 있어 편리 하 다.
글 의 목록
이전에 우 리 는 이미 박문 을 위해 Markdown 문법 을 지 지 했 는데,지금 은 그 기능 을 계속 강화 하고 있다.
코드 하 이 라 이 트 를 괴 롭 히 는 고 통 스 러 운 경험 이 있 으 면 Markdown 디 렉 터 리 확장 을 설정 하 는 것 이 쉬 워 집 니 다.
글 의 자세 한 보기 수정:

article/views.py

...

#     
def article_detail(request, id):
 ...
 article.body = markdown.markdown(article.body,
  extensions=[
  'markdown.extensions.extra',
  'markdown.extensions.codehilite',
   
  #     
  'markdown.extensions.TOC',
  ]
 )
 ...
markdown.extensions.TOC확장 만 추가 합 니 다.
TOC:Table of Contents,즉 디 렉 터 리
코드 가 이 줄 을 늘 리 면 충분 합 니 다.테스트 를 편리 하 게 하기 위해 이전 글 에 1 급 제목,2 급 제목 등 을 몇 개 추가 합 니 다.
마크 다운 문법 이 제목 을 어떻게 쓰 는 지 기억 나 세 요?1 급 제목:# title1,2 급 제목:## title2그리고 글 의 어느 곳 에 든[TOC]문자열 을 삽입 하면 디 렉 터 리 가 자동 으로 생 성 됩 니 다.

제목 을 클릭 하면 페이지 는 바로 해당 하 는 제목 으로 갑 니 다(즉,'닻 점'의 개념).
임의의 위치 디 렉 터 리
위의 방법 은 디 렉 터 리 를 문장 에 삽입 할 수 밖 에 없다.만약 내 가 디 렉 터 리 를 페이지 의 어느 위치 에 삽입 하고 싶다 면?
간단 합 니 다.이번 에는 Markdown 의 렌 더 링 방법 을 수정 해 야 합 니 다.

article/views.py

...

def article_detail(request, id):
 ...

 #    Markdown     
 md = markdown.Markdown(
  extensions=[
  'markdown.extensions.extra',
  'markdown.extensions.codehilite',
  'markdown.extensions.toc',
  ]
 )
 article.body = md.convert(article.body)

 #    md.toc  
 context = { 'article': article, 'toc': md.toc }

 return render(request, 'article/detail.html', context)
toc을 단독으로 추출 할 수 있 도록,우 리 는 먼저 Markdown 클래스 의 값 을 임시 변수md에 부여 한 다음,convert()방법 으로 본문 을 html 페이지 로 렌 더 링 합 니 다.md.toc을 통 해 디 렉 터 리 를 템 플 릿 에 전달 합 니 다.
markdown.markdown()과 markdown.Markdown()의 차이 점 에 주의 하 십시오.
더 자세 한 설명 은 다음 과 같다.공식 문서
새 디 렉 터 리 를 페이지 에 렌 더 링 하기 위해 서 는 글 의 자세 한 템 플 릿 을 수정 해 야 합 니 다.

templates/article/detail.html

...

<div class="container">
 <div class="row">
  <!--           div  -->
  <div class="col-9">
   <h1 class="mt-4 mb-4">{{ article.title }}</h1>
   <div class="alert alert-success">
    ...
   </div>
  </div>

  <!--       -->
  <div class="col-3 mt-4">
   <h4><strong>  </strong></h4>
   <hr>
   <div>
    {{ toc|safe }}
   </div>
  </div>
 </div>
</div>

...
  • 기 존 내용 을col-9용기 에 담 고 오른쪽col-3의 공간 을 디 렉 터 리
  • 에 남 겨 둔다.
  • toc라벨 이 있어 야 정확하게 렌 더 링 할 수 있 습 니 다
  • 페이지 다시 열기:

    총결산
    글 의 디 렉 터 리 기능 을 완 성 했 고 이에 따라 글 의 상세 한 페이지 도 비교적 완선 되 었 다.
    프로젝트 전체 코드:Django_blog_tutorial
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기