편집
1,410
번
바뀜
새 문서: ==개요== =상속= 코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. 만약 메뉴...
==개요==
=상속=
코드를 매번 다시 치는 게 아니라, 재사용하고, 일관적인 형태를 유지하며, 편집의 용이함을 위하여 사용한다. 만약 메뉴바를 각 페이지마다 구현했는데, 디자인을 바꿔야 한다면...? 수많은 페이지들을 일일이 수정해주어야 하는 대참사가 일어난다; 메뉴바 등 틀은 한 파일에서 만들어주고, 내용만 고치는 편이 관리에 유리하다.
일반적인 함수의 상속과는 달리 확장이라고 생각해야 한다.
=== 방법 ===
*부모템플릿에서 뼈대를 만들고 {%block %}로 아들템플릿에서 처리할 영역을 지정한다. 자식템플릿은 블록 안에 들어갈 내용만 채워주면 된다.
*{% block 블록명 %} {% endblock %} 형태로 여러 곳에 블록을 둘 수 있다. 가독성을 위해 {% endblock 블록이름 %} 형태로 닫기도 한다.
*자식템플릿에선 그 블록을 다 채우지 않아도 된다.
일반적으로 사이트 전체의 룩엔필을 위하여 3단계 상속을 권장한다.
#사이트 전체의 룩앤필을 담는 base.html 네비게이션바나 전체 페이지에서 보여져야 할 내용들이 담긴다.
#하위의 섹션별 스타일을 담는 섹션별 html
#개별 페이지에 대한 템플릿.
#3에 포함될 하위기능들.
{| class="wikitable"
|+
!과정
!코드
|-
|부모탬플릿 만들기
|가장 위에 모든 탬플릿이 공유할 탬플릿을 만들어준다.(이름은 base.html로 했다) 사이트 전체의 느낌을 담기 위한 탬플릿.<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="ko">
<head>
{% load static %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- 각 앱의 CSS. 앱의 CSS를 먼저 뒤지고 상위의 CSS를 찾는다. -->
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
{% block title %}{% endblock title %}
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
</syntaxhighlight>블록 태그 사이에 뭘 써넣으면, 자식탬플릿으로부터 가져올 것이 없을 때 그걸 보여준다.
자식탬플릿의 내용이 있는데, 부모탬플릿의 내용을 그대로 쓰고 싶다면 적당한 곳에 <nowiki>{{block.super}}</nowiki>를 넣는다.
|-
|자식탬플릿 만들기
|하위 섹션별 스타일을 위한 html. 부모탬플릿에서 지정한 블록 중 일부를 처리하고 나머지를 또 자식에게 넘겨 처리하게 할 수 있다.<syntaxhighlight lang="html">
{%extends "부모.html"%}
{% block title %}
<title>타이틀을 위해 만들어진 블록</title>
{% endblock title%}
</syntaxhighlight>
|-
|자식탬플릿 만들기2
|개별 페이지에 대한 탬플릿. 위에서 바디와 헤드에 block을 넣었으니, 이들을 채울 탬플릿을 만든다.<syntaxhighlight lang="html">
{%extends "섹션별.html"%}
{% block content %}
바디에 들어갈 내용들을 쓴다.
{% endblock content%}
</syntaxhighlight>
|}
=include=
*많은 기능을 넣다보면 코드가 복잡해져 가독성이 떨어진다. 이게 싫은 사람들은 html을 분리해 관리하면 된다. 그냥 코드를 단순화 하기 위해 완전 모듈화 해서 분리관리를 하고 싶은 이들에게 필요한 기능.
*상속에선 부모탬플릿과 자식이 선형으로 연결되어 여러 자식의 기능을 불러오거나 여러 부모의 기능을 불러오진 못했다. 많은 탬플릿의 기능을 복합적으로 끌어와야 할 때 사용하는 기능.
*똑같은 코드를 반복 사용해야 할 경우에도 쓰면 좋다.
===방법===
{% include "탬플릿명.html" %}
단순히 해당 html에 있는 코드를 불러와 갖다붙이는 기능이다.
<code>include with 변수명 = 넣을 객체명</code> 형태로도 사용 가능.
템플릿
테이블명.속성_set.all : 테이블의 해당 속성 기록 모두를 의미한다.
_set.all : 속성의 모든 레코드 가져오기...[이건 뷰에서 이용하는 기능인 듯한데;;]
p.134~135 forloop.counter 등 정리해보자.
신호보내기
<form action ="{% url 'url을 쓴다. 혹은 주소인덱싱을 넣는다.' 보낼변수 %}" method="post">
=> 앱이름/보낼변수 형태의 url로 보내진다.
템플릿에서 링크 연결
<a href = "{% url '주소' 넘길변수%}"> 나타낼내용</a>
[[분류:장고 탬플릿]]