๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ป Deep Wide Programming/Django

Django Templates

728x90
๋ฐ˜์‘ํ˜•

1. ๋ฐ˜๋ณต๋˜๋Š” html ๊ตฌ์กฐ๊ฐ€ ์žˆ๋‹ค๋ฉด, templates ํด๋”๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๊ณ , ๊ทธ ์•ˆ์— base.html์„ ๋งŒ๋“ ๋‹ค. 

1-2. ๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๋‹ค๋ฅธ ํŒŒ์ผ์—์„œ extendํ•ด์„œ ์‚ฌ์šฉํ•ด์ค€๋‹ค. ๋งˆ์น˜ ๋ถ€๋ชจ-์ž์‹ ํด๋ž˜์Šค์ฒ˜๋Ÿผ. 

์˜ˆ๋ฅผ ๋“ค์–ด, home.html์ด ์žˆ๋‹ค๋ฉด ํ•ด๋‹น html์˜ ์ตœ์ƒ๋‹จ์— ๋‹ค์Œ์˜ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. 

{% extends "base.html" %}

๊ทธ๋Ÿฌ๋ฉด, base.html์—์„œ ๋งŒ๋“  html ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์˜ค๊ฒŒ ๋œ๋‹ค. 

 

2. ๋‚˜์•„๊ฐ€, ํ•ด๋‹น html์•ˆ์—๋‹ค๊ฐ€ ์›ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ฃผ์ž…ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ๋‹ค์‹œ ๋งํ•ด, home.html์ด๋ผ๋Š” ์ž์‹ ํ…œํ”Œ๋ฆฟ์ด base.html์ด๋ผ๋Š” ๋ถ€๋ชจ ํ…œํ”Œ๋ฆฟ์— ์›ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ง‘์–ด๋„ฃ์„ ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ๋ฐ”๋กœ, block์„ ์ด์šฉํ•ด์„œ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋ถ€๋ชจํ…œํ”Œ๋ฆฟ์ธ base.html์— block์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•œ๋‹ค. 

{% block content %}
{% endblock %}

๊ทธ๋ฆฌ๊ณ  ๋‹ค์‹œ home.html๋กœ ๋Œ์•„์™€์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ถ€๋ชจํ…œํ”Œ๋ฆฟ์— ์ ์–ด์ค€ block์„ ์‚ฌ์šฉํ•ด์ค€๋‹ค.

{% extends "base.html" %}
{% block content%}
//base.html์— ์ฃผ์ž…ํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ๋ฅผ ์“ด๋‹ค// 
{% endblock content %}

์ด block์€ ๋งŒ๋“ค๊ณ ์‹ถ์€ ๋Œ€๋กœ ๋‹ค์–‘ํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ base.html์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด page name ๋ธ”๋Ÿญ์„ ๋งŒ๋“ค์—ˆ๋‹ค๋ฉด, 

<title>{% block page_name %}{% endblock page_name %} | Nbnb</title>

home.html์—์„œ

{% block page_name %}
Home
{% endblock page_name %}

์ด๋Ÿฐ์‹์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๊ธฐ์–ตํ•ด์•ผํ•  ๊ฒƒ์€, ๋ธ”๋Ÿญ์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด, ๋งจ ์ƒ๋‹จ์— extends๋ฅผ ํ•ด์ค˜์•ผ ํ•œ๋‹ค๋Š” ์ ! 

728x90
๋ฐ˜์‘ํ˜•