장고 걸즈 튜토리얼 따라하기 10 - 장고 템플릿

템플릿 태그

브라우저는 파이썬 코드를 이해할 수 없기 때문에 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를 누르고 업데이트 된 내용을 확인한다.