템플릿 태그
브라우저는 파이썬 코드를 이해할 수 없기 때문에 HTML에 파이썬 코드를 바로 넣을 수 없다. 템플릿 태그는 파이썬을 HTML로 바꿔주어, 쉽게 동적인 사이트를 만들 수 있다.
post 목록 템플릿 보여주기
이전 템플릿 동적 데이터
에서 글 목록이 들어있는 posts
변수를 템플릿에 넘겨주었다. 이제 넘겨진 posts
변수를 받아 HTML에 나타나게 해야한다.
장고 템플릿 안에 있는 값을 출력하려면, 변수 이름 안에 중괄호를 넣어 표시해야 한다.
{{ posts }}
blog/templates/blog/post_list.html
템플릿에서 두 번째와 세 번째 <div>
를 {{ posts }}
로 바꾸고 페이지를 살펴본다.
for loop
를 이용해서 더 깔끔하게 출력해본다.
{% for post in posts %}
{{ post }}
{% endfor %}
HTML과 템플릿 태그를 섞어 더 멋있게 만들어본다.
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
위 코드와 같이 Post
모델에서 정의한 각 필드의 데이터에 접근하기 위해서 {{ post.title }}
, {{ post.text }}
와 같은 표기법을 쓴다.
PythonAnywhere에 배포
- 먼저 Github에 코드를 push 한다.
x$ git status
[...]
$ git add --all .
$ git status
[...]
$ git commit -m "Modified templates to display posts from database."
[...]
$ git push
- 그 다음 PythonAnywhere Bash Console에서 다음 명령어를 실행한다.
xxxxxxxxxx
$ cd my-first-blog
$ git pull
[...]
- 마지막으로 Web 탭에서 Reload를 누르고 업데이트 된 내용을 확인한다.
'Python > Django' 카테고리의 다른 글
장고 걸즈 튜토리얼 따라하기 12 - 템플릿 확장 (0) | 2019.01.04 |
---|---|
장고 걸즈 튜토리얼 따라하기 11 - CSS (0) | 2019.01.03 |
장고 걸즈 튜토리얼 따라하기 9 - 템플릿 동적 데이터 (0) | 2018.12.27 |
장고 걸즈 튜토리얼 따라하기 8 - 장고 ORM과 쿼리셋 (0) | 2018.12.27 |
장고 걸즈 튜토리얼 따라하기 7 - 장고 뷰 (0) | 2018.12.26 |