웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
jinja에서도 다른 파일을 템플릿(template) 내부에 추가할 수 있는 다양한 방법을 제공하고 있습니다. include를 비롯해 import, macro 등이 있는데요 ~ 그 중에서도 include 역시 많이 쓰이는 방법입니다.
아래는 include를 사용하여 외부의 파일을 템플릿 안에 추가하는 방법을 알아봅니다. 먼저 간단한 문법은 아래와 같습니다.
이때 파일이름은 /template/ 내부에 위치한 파일이 되겠죠. 이처럼 원하는 파일을 템플릿안에 사용하면되므로 매우 간단합니다. 만약 아래의 웹사이트에서 head에 해당하는 부분만 따로 불러와 추가하는 경우를 볼까요?
위의 예제 코드를 살펴보면 <head> 태그 내부에 해당하는 코드 영역을 include를 사용하여 불러오고 있습니다. head 부분이 공통적으로 사용된다면 여러 파일에서 이와 같이 include를 사용하여 간단하게 추가할 수 있겠죠.
만약 include를 사용하였으나 해당 파일이 없어 에러가 발생한다면? 파일이 없어도 에러를 무시할 수 있는 옵션으로 ignore를 사용할 수 있습니다. 아래와 같이 사용합니다.
파일명 뒤에 ignore missing이 사용된 것을 알 수 있습니다. 이처럼 ignore missing은 파일이 없더라도 에러가 발생하지 않고 무시합니다. 파일이 없는 경우 빈 값을 출력하려면 이와 같이 옵션을 추가하면됩니다.
추가로 파일명을 하나가 아닌 여러 개를 사용할 수 있습니다. 즉 리스트 타입으로 아래와 같이 header1.html header2.html ... 을 사용하는 것이 가능하죠.
이제 header1.html을 가장 먼저 찾습니다. 그 다음에 만약 해당 파일이 없다면 header2.html을 그리고 그 다음 파일을 계속해서 찾아 fallback 기능을 추가할 수 있죠.
여기까지 외부파일을 html 내부에 import, 추가하는 방법을 알아보았습니다.
# jinja 템플릿에 include를 사용하여 파일 추가하기
아래는 include를 사용하여 외부의 파일을 템플릿 안에 추가하는 방법을 알아봅니다. 먼저 간단한 문법은 아래와 같습니다.
{% include 파일이름 %}
이때 파일이름은 /template/ 내부에 위치한 파일이 되겠죠. 이처럼 원하는 파일을 템플릿안에 사용하면되므로 매우 간단합니다. 만약 아래의 웹사이트에서 head에 해당하는 부분만 따로 불러와 추가하는 경우를 볼까요?
<body>
<head>
{% include 'header.html' %}
</head>
Webisfree.com
</body>
<head>
{% include 'header.html' %}
</head>
Webisfree.com
</body>
위의 예제 코드를 살펴보면 <head> 태그 내부에 해당하는 코드 영역을 include를 사용하여 불러오고 있습니다. head 부분이 공통적으로 사용된다면 여러 파일에서 이와 같이 include를 사용하여 간단하게 추가할 수 있겠죠.
! 옵션. ignore를 사용하여 파일 없는 경우 에러 무시
만약 include를 사용하였으나 해당 파일이 없어 에러가 발생한다면? 파일이 없어도 에러를 무시할 수 있는 옵션으로 ignore를 사용할 수 있습니다. 아래와 같이 사용합니다.
{% include 'header.html' ignore missing %}
파일명 뒤에 ignore missing이 사용된 것을 알 수 있습니다. 이처럼 ignore missing은 파일이 없더라도 에러가 발생하지 않고 무시합니다. 파일이 없는 경우 빈 값을 출력하려면 이와 같이 옵션을 추가하면됩니다.
! 파일이 없는 경우 대체 파일 사용하기, fallback
추가로 파일명을 하나가 아닌 여러 개를 사용할 수 있습니다. 즉 리스트 타입으로 아래와 같이 header1.html header2.html ... 을 사용하는 것이 가능하죠.
{% include ['header1.html', 'header2.html', ...] ignore missing %}
이제 header1.html을 가장 먼저 찾습니다. 그 다음에 만약 해당 파일이 없다면 header2.html을 그리고 그 다음 파일을 계속해서 찾아 fallback 기능을 추가할 수 있죠.
여기까지 외부파일을 html 내부에 import, 추가하는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
