23. 외부 라이브러리를 블로그에 활용 (폼 모양 꾸미기, 마크다운 적용)

● 폼 모양 꾸미기 

   지금까지 제작된 블로그를 보면 영 엉성하다. 이전글에서 보았듯이 포스트 등록, 수정 페이지가 왼쪽으로 치우친 느낌이 있으니 썩 깔끔한 모습이 아니다. 보기 좋게 바꾸어 본다.

 

Django-crispy-forms 적용

 

django-crispy-forms 설치

 

  모듈을 설치 하였다고 해서 바로 적용되는 것이 아니기에 django_blog_project/settings.py 파일의 INSTALLED_APPS에 crispy_form을 등록하고 아래쪽에는 crispy_form의 스타일을 bootstrap4로 지정한다. 

 

post_form.html을 수정하여 crispy-forms 적용

  crispy_forms를 적용하기 위해 {% load crispy_forms_tags %}를 적는다. crispy가 적용 되었기 때문에 기존의 table태그와 관련된 코드들은 삭제하고 새로 아래와 같은 코드를 추가한다. <br/>은 <submit> 버튼과 거리를 두기 위하여 추가한 것이다. 

  이전의 페이지와는 다르게 아주 보기 좋게 수정되었다. 포스트 수정 페이지도 똑같이 보기 좋게 만들기 위해 post_update_form.html 파일을 수정한다.

 

● 마크다운 적용

  django-markdownx를 설치하고 적용하면 마크다운 문법을 쓸 수 있는데 글자 크기 변경과, 그림 삽입도 가능해진다. 

 

 

django-markdownx로 마크다운 문법 적용 (결국 미적용)

 

django-markdownx 설치하고 적용

  pip install django-markdownx로 설치하고 settings.py의 INSTALLED_APPS에 markdownx를 추가한다.

 

  crispy-forms와는 다르게  markdownx는 django-blog-project/urls.py에 경로 추가와 models.py 파일의 TextField를 MarkdownxField로 수정을 요구한다.  models.py이 수정되었으니 migration 해준다.

 

  그런데 심각한 문제가 생겼다. django.conf.urls에서 이름이 url인 것을 import 할 수 없다고 한다. 이는 django 4.0 버전이라면 url 함수를 자동으로 삭제해서 벌어지는 문제라고 한다. stackoverflow에서는 이를 위해 경로 재설정이라는 해결책을 제시했지만 그냥 다른 라이브러리인 django-summernote를 쓰기로 하였다. 

 

markdownx를 대신할 django-summernote 사용

  markdownx를 사용할 수 없게 되자 안정성과 기능을 의심하게 되었고 눈에 들어온 summernote가 더 좋아 보여서 이를 사용하기로 하였다.  summernote는 WYSIWG(위지위그)의 종류 중 하나이다. 

 

  안타깝게도 책에서는 summernote에 대한 어떠한 정보도 없고 관련 강의는 돈 주고 결제해야 볼 수 있게 되어있다. 따라서 스스로 방법을 찾아본다.

 

 

summernote 설치

 

django-blog-project/settings.py 수정

 

django-blog-project/urls.py 수정

  전체 urls에서 summernote를 적용시키기 위해 include한다. 

 

migrate (models.py에서 따로 import 할 필요가 없었다.)

 

관리자 페이지의 Post에 적용

  성공적으로 적용되긴 하였지만 테마가 맞지 않아서 관리자 페이지는 다크모드인데 혼자서 흰색으로 아주 밝다. summernote 테마를 수정하게 된다면 이 글에 추가할 예정이다. 

 

forms.py 파일 생성 후 코드 입력 

  해결책을 찾는데 시간이 꽤 걸렸다. bootstrap으로 summernote를 적용하기는 하였으나 category, hook text 같은 form의 요소들을 추가하기가 난처했기 때문에 그냥 개발자 github 내용을 기반으로 하였다.

  

views.py 파일 수정

  from .forms import PostForm으로 froms.py의 PostForm class를 가져와 form_class라는 변수에 담고 기존에 있던 views.py의 fields는 forms.py의 fields와 겹치므로 주석처리하여 중복으로 인한 오류를 방지해 준다. PostCreate, PostUpdate 부분을 다음과 같이 수정한다.

 

post_detail.html 파일 수정

  뭔가 잘 되나 싶더니 summernote로 입력한 내용과 스타일이 죄다 html로 나온다. 위에 보이는 화면과 관련된 템플릿은 post_detail.html과 관련되어 있으므로 content(내용) 부분을 다음과 같이 수정해 준다. 

 

와! 성공!