참고
https://tutorial.djangogirls.org/ko/template_extending/
홈페이지 외 다른페이지들도 만들어 봅시다.
그전에 base.html을 만들어 서로 다른페이지에서도 기본적인 페이지를 구성할수 있도록 해봅시다.보통 웹사이트의 헤더파일과 풋터파일도 이런식으로 구성하여 사용하고 있는 경우가 많습니다.
기본 템플릿 생성
먼저 이전에 사용했던 post_list.html을 복사하여 base.html을 만든뒤 body 부분을 아래내용으로 수정해줍니다.
1 2 | {% block content %} {% endblock %} | cs |
blog/templates/blog/base.html 생성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | {% load static %} <html> <head> <title>Django blog</title> <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"> <link rel="stylesheet" href="{% static 'css/blog.css' %}"> <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css"> </head> <body> <div class="page-header"> <h1><a href="/">Django Blog</a></h1> </div> <div class="content container"> <div class="row"> <div class="col-md-8"> {% block content %} {% endblock %} </div> </div> </div> </body> </html> | cs |
blog/templates/blog/post_list.html 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 | {% extends 'blog/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 %} | cs |
{% extends 'blog/base.html' %} 는 두 템플릿을 연결해 주는 역할을 합니다.
이제 {% block content %}와 {% endblock %}를 자유롭게 꾸며 다양한 페이지를 구성해봅시다.
코드 수정 후 제대로 동작하는지 확인하고 블로그 게시글을 보여주는 페이지를 만들어봅시다.
페이지를 만드는 순서
templates->view->models->views->templates 흐름을 따라 만들어 볼 예정이다.
post_list.html의 a태그를 수정(templates->view로 전달)
1 | <h1><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h1> | cs |
'post_detail'은 뷰 경로입니다. 나중에 def post_list를 views.py에 작성해야합니다.
pk=post.pk 식별키 기본키(primary key의 줄임말)입니다. 우리가 클릭한 title에 맞는 내용의 페이지를 보여줘야 겠죠? 그 타이틀에 맞는 객체의 기본키를 넘겨주는 것입니다.
blog/urls.py 수정(view에서 url패턴 만들기)
1 2 3 4 5 6 7 | 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'), ] | cs |
html에서 post_detail로 요청을 보내면 받은 pk 데이터를 조합해 'post/<int:pk>/ url을 만들고
views.post_detail로 넘겨준다.
views파일을 수정하여 html을 열수 있도록 하자.
blog/views.py 수정(view에서 model을 받아 template으로 이동)
1 2 3 4 5 6 7 8 9 10 11 | from django.shortcuts import render, get_object_or_404 from .models import Post def post_list(request): posts = Post.objects.filter(title__contains='title').order_by('-created_date') return render(request, 'blog/post_list.html', {'posts': posts}) def post_detail(request, pk): post = get_object_or_404(Post, pk=pk) return render(request, 'blog/post_detail.html', {'post': post}) | cs |
get_object_or_404는 pk에 해당하는 Post가 없을 경우(데이터 베이스에 없을경우), 멋진 페이지(페이지 찾을 수 없음 404 : Page Not Found 404)를 보여주는 기능을 합니다.
있다면 post에 담아서 'post'라는 이름으로 데이터를 템플릿에 넘겨줍니다.
이제 마지막으로 html파일을 만들어 봅시다.
blog/templates/blog/post_detail.html 생성(view->templates)
1 2 3 4 5 6 7 8 9 10 11 12 13 | {% 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 %} | cs |
이제 다시 홈페이지에 들어가서 글의 타이틀을 클릭해보자
상세 페이지로 정상적으로 이동할수 있을것이다.
'웹개발 > Django' 카테고리의 다른 글
| Django 네비게이션바 #10 (0) | 2020.12.14 |
|---|---|
| Django 추가,수정 페이지 만들기 #9 (0) | 2020.12.14 |
| Django 웹디자인(CSS) #7 (0) | 2020.12.13 |
| Django 템플릿 동적데이터 #6 (0) | 2020.12.13 |
| Django ORM 쿼리셋 #5 (0) | 2020.12.13 |
최근댓글