템플릿은 양식, 재사용 가능한 파일이다. 장고에서 템플릿 양식은 HTML을 사용한다.
템플리 위치
blog (StartApp)
└───templates
이제 이 폴더 안에 html을 만들면 된다.
템플릿의 동적 데이터 활용 방법
view는 모델과 템플릿을 연결하는 역할이다.
blog/views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
쿼리셋으로 모델[블로그 글]을 가져오고 템플릿에 전달했다.
{ 매개변수 : 전달 값 } 형식으로 값을 전달한다.
.은 현재 디렉토리 또는 어플리케이션을 의미한다.
models.py와 views.py는 동일한 디렉토리에 있다.
따라서 modes.py라고 쓰지 않고 .models라고 써도 된다. (즉, 확장자를 붙이지 않아도 된다.)
Django 템플릿 작성 방법
HTML은 정적이지만 파이썬은 동적이다. 따라서 브라우저는 파이썬 코드를 이해할 수 없다.
템플릿 태그를 이용해 파이썬을 HTML으로 바꿔줘야 한다.
.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 }}</p>
</div>
{% endfor %}
{{ }}안에 변수 이름 넣어주면 값을 사용할 수 있다.
반복문은 {% for %}와 {% endfor %} 사용하면 된다.
부트스트랩 추가하기
부트스트랩을 이용하면, 유명한 HTML과 CSS 프레임워크로 웹 사이트를 만들 수 있따.
.html (<head>와 </head> 사이)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
.html 파일 <head>에 위 링크를 넣으면 부트스트랩 사용이 가능하다.
이는 인터넷에 있는 파일을 연결한 것이다.
정적 파일[Static Files] 추가하기
static files에는 CSS와 이미지 파일이 해당한다.
장고는 App 폴더 안에 있는 static 폴더를 자동으로 찾을 수 있다.
djangogirls
├── blog
│ ├── migrations
│ ├── static
│ └── templates
└── mysite
폴더 안에 있는 .css 파일을 어떻게 .html로 불러올까?
아래 코드를 .html 파일에 추가하면 된다.
.html (파일의 맨 처음 줄)
{% load static %}
.html (<head>와 </head> 사이)
<link rel="stylesheet" href="{% static 'blog.css' %}">
템플릿 확장하기
템플릿을 확장하면,
동일한 정보/레이아웃을 사용하고자 할 때, 모든 파일마다 같은 내용을 반복해서 입력할 필요가 없다.
blog/templates/base.html
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
blog/templates/post_list.html
{% extends 'base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock
base.html은 재사용될 레이아웃을 가진 html 파일이다.
{% block content %} {% endblock %} 부분에는 다른 html 파일이 들어갈 수 있다.
다른 html 파일이 들어가는 방법은
다른 html 파일에서 base.html 파일을 가져오고,
다른 html 파일의 {% block content %} {% endblock %} 안에 코드를 작성하면 된다.
어플리케이션 확장하기 (제목 클릭 → 상세보기)
블로그 제목을 클릭하면 블로그 상세보기로 넘어가게 해보자.
<h1><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h1>
post_detail은 url 이름이다.
pk는 데이터베이스의 각 레코드를 식별하는 기본키[Prmiary Key]의 줄임말이다.
내가 Post 모델에서 기본키를 지정하지 않았기 때문에, 장고가 pk라는 필드를 추가했다.
게시물이 추가될 때마다 1, 2, 3등으로 값이 증가해 할당된다.
blog/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.post_list, name='post_list'),
path('post/<int:pk>/', views.post_detail, name='post_detail'),
]
post_detail이라는 이름을 가진 url이 실행된다.
그리고 post_detail view를 호출한다.
<int:pk>는 정수 값을 기대하고, pk라는 변수를 view로 전송한다는 뜻이다.
blog/views.py
from django.shortcuts import render, get_object_or_404
def post_detail(request, pk):
post = get_object_or_404(Post, pk=pk)
return render(request, 'blog/post_detail.html', {'post': post})
get_object_or_404는 모델에 없는 pk일 경우 404를 반환하는 기능이다.
값을 detai.html로 넘겨준다.
blog/post_detail.html
{% extends 'blog/base.html' %}
{% block content %}
<div class="post">
{% if post.published_date %}
<div class="date">
{{ post.published_date }}
</div>
{% endif %}
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endblock %}
조건문은 {% if %} {% endif %}을 사용하면 된다.
'BACK-END > Django' 카테고리의 다른 글
| [Django][장고걸스][ubuntu] Django Form (0) | 2022.01.16 |
|---|---|
| [Django][장고걸스][ubuntu] Django ORM과 쿼리셋[Querysets] (0) | 2022.01.12 |
| [Django][장고걸스][ubuntu] Django urls (0) | 2022.01.12 |
| [Django] 데이터베이스 초기화 (0) | 2022.01.12 |
| [Django][장고걸스][ubuntu] Git 설치하기, 저장소 만들기 (0) | 2022.01.06 |
