12. 템플릿 파일에서 if문 사용, 다운로드 버튼 만들기, 템플릿 필터 사용

●포스트 목록 페이지 개선

 

  이미지 파일을 추가할 수 있도록 폴더와 URL을 지정했더니 이미지 없이는 포스트를 올릴 수 없게 되어 버렸다. 세상 어떤 블로그가 무조건 이미지를 올려야지만 포스트를 할 수 있단 말인가? 따라서 if문을 이용하여 이미지 파일이 없을시 임의의 이미지를 가져와 출력하도록 하여 해결한다.

 

  현재 블로그는 포스트 글의 길이가 어떤지간에 본문 내용 전체를 보여준다. 애초에 목록인데 글 전체를 길게 보여준다면 목록이라는 제 기능을 하지 못하고 있는 상태이므로 간단하게 미리보기 기능을 추가하여 이를 해결하도록 한다. 

 

● 템플릿 파일에서 if문 사용

 

if-else 문으로 조건에 따라 이미지 보여주기

 

이미지가 있는 경우

 

최초로 html에서 if문을 사용해 보기위해 post_list.html 파일에 if문을 입력한다. 여기서 alt 이미지를 보여줄수 없을때 대신 나타나게 하는 '텍스트'를 의미한다. 이제 이미지 URL 설정이후 텍스트로만 된 포스트는 오류가 출력 되었는데 이번 수정으로 텍스트로만 된 포스트도 정상적으로 출력이 가능해 진다.

 

 

이미지가 없는 경우 임의의 이미지 가져오기

 

  마땅한 이미지가 없다면 picsum.photos라는 사이트에서 찾을 수 있다. 아래의 URL을 이용하면 랜덤으로 이미지를 제공해주는데 가로,세로 크기 조절까지 가능한 아주 신박한 기능이다. 

  

  if 와 endif 사이에 {% else %}를 추가하여 head image가 없는경우 picsum.photos의 임의의 이미지를 가져오도록 한다. 

 

임의로 나타나는 이미지 고정

 

  그런데 문제는 새로고침을 누를때 마다, 혹은 페이지를 방문할 때 마다 이미지가 중구난방으로 달라지니 뭔가 안정감, 통일감이 없다. 따라서 이미지를 고정해 주는데 picsum.photos 웹 사이트에서 제공하는 id 기능을 이용하여 URL을 수정하면 특정 id의 이미지만을 나타내도록 할 수 있다. 

 

  따라서 포스트 id에 고유의 고정된 이미지만이 나타나게 되며 id 마다 다른 이미지 제공으로 다양한 이미지도 누릴수 있게된다. 

 

 

  포스트 목록은 제대로 이미지 처리가 되었으나 포스트 상세 페이지는 아직 수정 하지 않았으므로 이미지가 출력되지 않는다 수정해준다. 

 

● 첨부 파일이 있는경우 다운로드 버튼 만들기

 

첨부 파일 다운로드 버튼 만들기 

 

  웬만한 블로그에는 소용량의 파일에 대해 다운로드 기능을 제공해 준다. 이 블로그 프로젝트에서도 첨부 파일 다운로드 기능을 제공하기 위해 먼저 Bootstrap 공식 홈페이지에서 제공하는 버튼을 이용하여 만들어본다. 

 

 

첨부 파일명과 확장자 아이콘 나타내기

 

  첨부된 파일명과 확장자 아이콘을 나타내기 위해 os를 import 하고 함수로 파일 이름과 파일 확장자가 나타나도록 한다. 

 

  이전에 소개한 Font awesome 웹 사이트에서 마음에드는 아이콘을 찾아 post_detail.html에 추가해 준다. 먼저 Font awesome 의 kitcode를 추가해 주는 것부터 시작한다. 

  

  그 후 if, elifm else문으로 각각의 확장자에 어울리는 아이콘들을 추가해 준다.

● 템플릿 필터 사용

 

  템플릿 필터는 단순하게 말해 미리보기 기능을 뜻한다. 

 

  출력 글자 수 제한

 

 

 

  요약문 필드 만들기

 

  포스트의 요약문을 보여주는 hook_text 필드를 추가하려 한다. 이것은 제목 아래에 위치한 한 줄 요약과 같은 것이다. models.py 파일을 열어 다음의 코드를 추가해준다. 

 

 

  마무리로 post_list.html 파일을 수정하여 포스트 목록에서도 보이도록한다. 

 

 post_list 뿐만 아니라 post_detail.html 파일도 수정하여 포스트 상세 페이지에서도 요약문 필드를 만든다.