블로그를 위한 최소한의 Tera 템플릿 엔진 사용법

2023. 11. 21
3 분 읽기
블로그,
개발,
Zola

기본 사용법

Tera는 다음의 3가지 종류의 괄호를 사용해서 모든 문법을 나타냅니다.

괄호	의미
`{{ }}`	표현식
`{% %}`	선언문
`{# #}`	주석

이 3가지를 기억하며 가장 많이 사용하는 문법들을 살펴보도록 하겠습니다.

번수 정의

기본적인 변수 정의 문법은 다음과 같습니다.

{% set name = "Zola" %}

이렇게 하면, 현재 파일에서 사용하는 변수를 정의할 수 있습니다.

변수에는 config.toml 파일처럼 Zola 프로젝트 내 특정 파일에서 미리 정의해둔 값을 가져와서 대입할 수도 있습니다.

아래 코드는 config.toml 파일 내 [extra] 섹션에 정의한 값을 가져와 대입하는 코드입니다.

{% set extra_name = config.extra.name %}

여기에 조건문을 결합한 패턴이 자주 사용됩니다.

조건문

Tera의 조건문 문법은 다음과 같습니다.

{{ if 조건 }}
    조건이 참일 때, 실행할 내용
{{ elif 다른 조건 }}
    다른 조건이 참일 때, 실행할 내용
{{ else }?
    그 이외의 조건에 실행할 내
{{ endif }}

조건문을 이용해서 config.toml 파일에 변수가 정의되지 않은 경우도 대비할 수 있습니다.

{{ if config.extra.name }}
    {% set name = config.extra.name %}
{{ else }}
    {% set name ="Zola" %}
{{ endif }}

컨테이너 타입과 반복문

다른 언어들처럼 Tera를 이용해서 컨테이너 타입을 정의하고, 이 자료들을 for문을 이용해 순회할 수 있습니다.

{% set names = ["Zola","Tabi", "Bob"]%}

{% for name in names %}
  {{loop.index}}. {{name}}
{% endfor %}

만약 컨테이너 타입에서 특정 인덱스의 요소만 가져오고자 하면 first, nth, last 필터를 이용할 수 있습니다.

필터는 다른 언어의 메서드와 비슷한 역할이며, 아래와 같이 | 기호로 사용합니다.

{% set first_name = names | first %}
{% set 2nd_name = names | nth(n=2) %}
{% set last_name = names | last %}

상속

마지막으로, Tera의 상속 시스템을 이용해 Zola 템플릿에서 재사용성을 크게 향상시킬 수 있고,

테마에 사용된 템플릿 파일들의 구조를 이해할 수 있습니다.

Zola 프로젝트에서 사용하는 Tera 템플릿은 .html 파일로 이루어져 있으며, extends,block 키워드를 기반으로 상속이 이루어집니다.

예를 들어, base.html 파일을 상속해 section.html 파일을 구성한다고 할 때를 예를 들어보겠습니다.

<!DOCTYPE html>
<html>
<body>
<div class="content">
    {% block main_content %}
    {% endblock main_content %}
</div>
</body>

</html>

위 코드는 tabi 의 base.html 코드 중 일부인데요.

이 중, block, endblock 키워드로 표시해둔 곳이 앞으로 이 파일을 상속한 .html 파일이 새로 내용을 추가할 수 있는 공간입니다.

{% extends "base.html" %}

{% block main_content %}

<main>
<div class="list">
 섹션 내용
</div>
</main>

{% endblock main_content %}

위 코드는 tabi 의 section.html 코드 중 일부입니다.

일단 파일 가장 윗 줄에 extends 키워드로 base.html 파일을 상속한다고 명시해주었으며,

block, endblock 키워드와 해당 블록 이름을 명시하고 그 사이에 새로 추가할 내용들을 입력한 것을 확인할 수 있습니다.

삽입

위에서 확인한 상속이 템플릿 간의 포항 관계가 있을 때 사용할 수 있는 방법이라면,

삽입은 좀 더 간단하게 자주 사용하는 마크업을 간단히 추가할 수 있는 방법입니다.

예를 들어, header.html 이라는 파일을 다음과 같이 정의했다면,

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

이 만큼의 코드를 include 키워드를 이용해 간단히 다른 파일 내에 삽입할 수 있습니다.

아래는 base.html 파일의 일부입니다.

<!DOCTYPE html>
<html>
{% include "partials/header.html" %}

<body>
    {% include "partials/nav.html" %}
    <div class="content">

        {# Post page is the default #}
        {% block main_content %}
            Nothing here?!
        {% endblock main_content %}
    </div>
    {% include "partials/footer.html" %}
</body>

</html>

include 키워드를 통해, 다양한 .html 파일들을 삽입한 것을 확인할 수 있습니다.

여기까지만 알고 있어도 대부분의 Zola 테마에서 템플맇 코드를 이해하고, 커스터마이징할 수 있을 것이라 생각합니다.

나에게 맞는 Zola 블로그를 세팅해보세요!

블로그를 위한 최소한의 Tera 템플릿 엔진 사용법

목차

기본 사용법

번수 정의

조건문

컨테이너 타입과 반복문

상속

삽입