Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- github
- rank
- declare
- dbadvgrid
- templates
- anaconda3
- 백준
- advColumnGrid
- HTML
- Visual Studio
- pyhcarm
- Delphi
- Push
- 중복제거
- MSSQL
- hackerrank
- queryset
- GIT
- c#
- delphi 10.3
- get_object_or_404
- python3
- pythonanywhere
- 델파이
- PyCharm
- COMMIT
- Django
- python 3.7
- blog
- TMS
Archives
- Today
- Total
DevHyun
[DevHyun's Blog] Django Template 확장하기(*재사용 가능하게끔 만들기) 본문
Web/Django&Python Blog Projecct
[DevHyun's Blog] Django Template 확장하기(*재사용 가능하게끔 만들기)
D3V3L0P3R 2020. 10. 19. 19:08장고걸스 코치들과 자원봉사자들의 수고로 번역된 글을 참고하였습니다.
Template 확장(template extending) 이란 웹사이트 안의 서로 다른 페이지에서 HTML의 일부를 동일하게 재사용 할 수 있도록 만드는 것입니다.
1. Blog/templates/Blog/base.html 생성
* base가 될 template 셋팅
{% load static %}
<html>
<head>
<title>Django Girls 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 href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<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">
{% 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 %}
</div>
</div>
</div>
</body>
</html>
2. base.html의 Body를 재사용 가능하게끔 확장하기
*Blog/templates/Blog/base.html
* 템플릿 태그 {% block(template tag) %}으로 HTML 내에 들어갈 수 있는 공간을 만들었습니다. 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>
...
..
.
3. post_list.html 수정하기
* base.html의 block content 안에 들어갈 내용이라고 생각하면 편할듯?
*Blog/templates/Blog/post_list.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 %}
4. post_list.html과 base.html 연결하기
*Blog/templates/Blog/post_list.html
{% extends 'blog/base.html' %}
{% block content %}
...
..
.
'Web > Django&Python Blog Projecct' 카테고리의 다른 글
[DevHyun's Blog] Django Form 만들기(일반 사용자가 Post 추가 가능하게 만들기) (0) | 2020.10.21 |
---|---|
[DevHyun's Blog] Django&Python으로 만든 Blog App 확장(extending)하기 (0) | 2020.10.19 |
[DevHyun's Blog] Django&Python으로 만든 Blog에 CSS 적용하기! (0) | 2020.10.19 |
[DevHyun's Blog] Django Template 활용하기 (0) | 2020.10.19 |
[DevHyun's Blog] Pythonanywhere 에서 Git Project Pull 한 후 재배포 하기 (0) | 2020.10.19 |
Comments