Zola Tabi 테마 설정 방법

이전 글에서 잠깐 언급했듯이, Zola는 Tera 템플릿 엔진을 기반으로 커스터마이징이 비교적 쉬운 편입니다.

이 때문에, 전세계 개발자들이 다양한 니즈에 맞춘 테마들을 개발, 유지하고 있습니다.

tabi 테마는 그 중에서도 직관적이고 깔끔한 UI, 적은 용량과 빠른 성능을 갖춘 인기 테마입니다.

하미잔, 어떤 테마도 100% 내 입맛에 맞출 수 없듯이 tabi 역시 설정할 부분들이 있었는데요.

이번 포스트는 실제로 테마를 사용하면서 설정했던 부분들에 대해 공유하고자 합니다.

config.toml

Zola에서 프로젝트 단위의 설정은 config.toml 파일을 통해 이루어집니다.

config.toml 파일에는 Zola에서 기본적으로 약속된 항목들 뿐 아니라 내만의 변수를 정의한 후, 이 번수를 다른 파일에서 config.extra.foo 와 같이 호출해서 사용할 수도 있습니다.

기본 설정

config.tomal 파일에서 따로 섹션이 정해져 있지 않은 변수들은 Zola 자체에서 약속한 기본 변수들입니다.

예를 들어, 아래와 같은 변수들이 있습니다.

이 변수들은 거의 모든 Zola 프로젝트에서 동일하게 사용합니다.

extra 설정

이제부터는 각 테마의 고유한 설정 부분입니다.

여기 해당하는 변수는 [markdown], [extra]처럼 각 섹션으로 구분 지어집니다.

여기 정의한 변수값은 템플릿 파일에서 config.markdown.foo, config.extra.foo 처럼 dot notation을 이용해 불러올 수 있습니다.

여러 섹션 중 가장 많은 설정값이 필요한 섹션은 바로 [extra] 부분입니다.

이 곳에는 테마가 설정에 사용하는 대부분의 변수가 정의되어 있습니다.

제가 설정한 변수들은 다음과 같습니다.

이 중, email 항목은 문자열을 base64로 인코딩한 값을 변수에 넘겨주어야 하는 것에 주의해야 합니다.

그 외에는 큰 어려움 없이 설정이 가능할 것입니다.

그리고 이 섹션에 allowed_domains 항목이 있는데, tabi 테마는 기본적으로 CSP 정책을 정의해두고 있기 때문에 이 곳에 허용하는 도메인들을 추가해줘야 합니다.

저는 이후 애드센스 블로그로 운영하고자 하기 때문에, 네트워크 소스들을 모두 특정할 수 없을 것 같아 CSP를 사용하지 않습니다.

저처럼 설정하고자 하면 내 프로젝트에 templates/partials/header.html 파일을 복사해 온 후,

    {%- include "partials/content_security_policy.html" -%}

위 라인을 주석 처리해주면 됩니다.

markdown 설정

이외에도, [markdown] 섹션 아래에 아래와 같은 라인들을 추가할 수 있는데요.

[markdown]
highlight_code = true
highlight_theme = "css"

마크다운 파일 내 코드 블록에 Syntax Highlighting을 적용할 것인지 여부와 적용할 때 원하는 테마를 설정하는 부분입니다.

마치며

지금까지 tabi 테마 사용을 위한 config.toml 파일 설정을 살펴보았습니다.

아직 사용한 지 얼마 되지 않았고 여전히 적응중이라 이 포스트는 계속 업데이트해야 할 것 같습니다.