안녕하세요. @anpigon입니다.
이제 **나만의 스팀잇 블로그 만들기
**의 마지막 강좌입니다. 이 시리즈는 개발 지식이 전혀 없는 분들도 쉽게 따라 할 수 있습니다.
이 강좌에서 사용한 소스는 GitHub 저장소에 올려놓았습니다.
이전 글
이번 시간에는 글 목록을 클릭했을 때 글 상세 화면으로 이동하도록 구현해보자. 글 상세 화면까지 구현하고 나면 멋짐 블로그가 완성될 것이다.
블로그 글 상세 URL 추가하기
pythonanywhere의 Files 화면에서 web/blog/
디렉토리를 찾아 들어간다. 그리고 urls.py
파일을 클릭하여 편집 화면으로 이동해서 아래와 같이 수정한다.
1 | urlpatterns = [ |
@author/permlink
URL에 글 상세를 보여주는 뷰(View) views.post_detail
를 맵핑하였다. @author/permlink
URL은 정규식 '^@(?P<author>[\w-]+)/(?P<permlink>[\w-]+)/$'
을 사용하여 author와 permlink은 매개 변수(parameter)으로 받았다. author를 매개 변수로 받는 이유는 내 블로그에 리스팀한 글이 포함되어 있어서 일단 추가하였다.
잘 모르겠다면 아래 화면을 참고하자.
이제 글 목록에서 글 상세 화면으로 이동할 수 있는 링크를 연결해야 한다. templates/blog/post_list.html
템플릿 파일을 열고 <a href="#">
로 되어 있는 코드를 아래와 같이 수정한다.
1 | <a href="/@{{ post.author }}/{{ post.permlink }}"> |
수정하는 위치를 잘 모르겠으면 아래 화면을 참고한다.
블로그 글 상세 View 생성하기
blog/views.py
파일을 열고 post_detail
함수를 추가한다.
1 | def post_detail(request, author='', permlink=''): |
https://steemit.com/kr/@apmmh/re-anpigon-anpigon-re-apmmh-re-anpigon-anpigon-re-glory7-re-apmmh-re-anpigon-anpigon-coding-contest-20181010t070239125z 글을 참고하여 이미지URL을 이미지 태그로 치환하는 정규식을 추가하였습니다.
아래 화면을 참고하자.
블로그 글 상세 템플릿 html 생성
templates/blog/
디렉토리에 post_detail.html
파일을 신규 생성한다.
그리고 아래 코드를 복사&붙여넣기 하자.
1 | {% extends 'blog/base.html' %} |
마지막으로 본문에 포함된 이미지 크기 조정을 위해 아래 스타일 CSS 코드를 추가하였다. css.style
파일을 만들어서 적용해도 되고, post_detail.html
파일에 적용해도 된다.
1 | <style> |
여기까지 완료했으면 본인의 블로그에 가서 글 목록을 클릭했을 때 글 상세 화면으로 이동하는지 확인해보자.
댓글 서비스(disqus)
나는 스팀잇 사용자가 아닌 사람도 댓글을 쓸 수 있게 하기 위해서 Disqus 위젯을 사용하였다. Disqus는 소셜 댓글 서비스이다. 쉽게 설명하면 구글, 페이스북, 트위터 서비스에 가입되어 있으면 회원가입 없이 바로 댓글을 쓸 수 있다. 참고로 한국 서비스 중에는 라이브리(LiveRe)가 있다.
본문 내용 하단에 Disqus 위젯을 삽입하면 이렇게 보여진다.
적용방법은 간단하게 설명하겠다. 우선 https://disqus.com에 회원가입을 한다. 가입이 완료되면 아래 화면에서 보이는 Disqus Install 버튼을 클릭한다.
사이트 플랫폼 선택 화면에서는 맨 아래로 내리면 “I don’t see my platform listed, install manually with Universal Code” 버튼이 보인다. 이 버튼을 클릭한다.
붉은 박스에 보이는 코드를 복사하여 내 블로그에 삽입하면 된다.
참고로 Disqus 삽입 위치는 post_detail.html
파일의 이 코드 바로 아래입니다.
1 | {% autoescape off %} |
여기까지 성공적으로 따라오신 분들 모두 축하드립니다.
오늘부터 파이썬 웹 개발자가 되셨습니다.
하다가 막히는 부분이 있으면 댓글에 질문 남겨주세요. 그리고 kr-dev
태그에 개발관련 글을 올리면 제가 보팅해드립니다.
여기까지 읽어주셔서 감사합니다.
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.