Zola로 블로그 만들기 초보자 가이드 2

2023. 11. 24
4 분 읽기
블로그,
개발,
Zola

섹션과 `_index.md` 파일

_index.md 파일은 현재 디렉토리가 하나의 Section(이하 섹션) 임을 표현하는 동시에, 해당 섹션에 포항된 Page(이하 페이지) 들을 어떻게 나타내는지에 대해 설정하는 데 사용합니다.

Zola에서 Page는 하나의 포스트, Section은 하나의 카테고리를 나타낸다고 이해할 수 있습니다.

예를 들어, 다음과 같은 디렉토리 구조가 있다고 생각해봅시다.

├─ blog
    ├─ 1.md
    ├─ 2.md
    ├─ 3.md

이렇게 blog 라는 디렉토리 안에 1.md, 2.md, 3.md 3가지 파일이 있는 상황에서, /blog/ 라는 경로에 방문했을 때는 각각 /blog/1/, /blog/2/, /blog/3에 해당하는 포스트로 이동할 수 있는 목록을 제공할 것입니다.

제 블로그를 보아도 https://oozy.kr/blog/에 방문하면 아래와 같이 전체 포스트 목록이 보이죠.

섹션 예시

이 목록은 다음과 같은 _index.md` 파일로 설정한 것입니다.

+++
title = "전체"
path = "blog"
sort_by = "date"
paginate_by = 5
template = "index.html"
+++

설정 항목만 봐도 직관적으로 알 수 있듯이 섹션의 제목, 경로, 정렬 기준, 한 번에 보여주는 포스트 개수, 그리고 이 섹션이 사용하고 있는 템플릿 파일을 지정할 수 있습니다.

템플릿이 어떻게 구성되어 있는지는 /themes/tabi/templates/index.html 파일을 확인하면 되겠죠?

페이지

페이지에 대해서도 잠깐 언급하고 넘어가자면, Zola는 어떤 디렉토리에 _index.md가 없다면 섹션이 아닌 페이지로 인식합니다.

그래서, 폴더 구조가 아래와 같거나,

├─ blog
    ├─ 1.md
    ├─ 2.md
    ├─ 3.md
    ├─ _index.md

훅은, 이렇게 구성하더라도

├─ blog
    ├─ 1
        ├─ index.md
    ├─ 2
        ├─ index.md
    ├─ 3
        ├─ index.md
    ├─ _index.md

/blog/1/이라는 경로에 방문하면 하나의 페이지로 출력되고, templates 폴더 내 page.html 파일을 기반으로 페이지 형식을 구성합니다.

여담으로, 대부분의 Zola 블로그는 후자의 방법대로 이미지 및 동영상을 포스트 별로 구성하고 있습니다.

다국어 사이트

Zola는 기본적으로 다국어 사이트를 지원하기 때문에 많은 테마들 역시 다국어 설정을 가지고 있습니다.

주로, 루트의 i18n 디렉토리와 config.toml 파일로 설정이 이루어지는데요.

`i18n` 디렉토리

i18n 디렉토리 내에는 각 언어에 해당하는 [언어-코드].toml 파일을 생성해 특정 단어에 해당하는 번역어를 저장해둡니다.

예를 들어, config.toml 파일에서 다음과 같이 메뉴를 구성해둔다고 한다면

menu = [
    { name = "blog", url = "blog", trailing_slash = true },
    { name = "archive", url = "archive", trailing_slash = true },
    { name = "tags", url = "tags", trailing_slash = true },
]

영어, 한국어 이렇게 2가지 사이트를 위해 아래와 같이 2개의 파일을 저장해두기만 하면,

# /i18n/ko.toml

blog = "포스트"
archive = "아카이브"
tags = "태그"

# /i18n/en.toml

blog = "posts"
archive = "archive"
tags = "tags"

각각 [base-url]/ko/, [base-url]/en/ 으로 방문하면 자동으로 위에 저장한 단어로 표시가 됩니다.

`config.toml` 파일

위에서 보았듯이 i18n 폴더 내 언어 별 TOML 파일은 단순한 1:1 단어 번역에 사용한다면, config.toml 파일은 언어별 사이트 설정에 사용합니다.

우선, default_language 항목을 통해서 사이트 기본 언어 설정을 할 수 있습니다.

아래와 같이 base_url, theme 등과 같은 기본 섹션 아래에 정의해주세요.

base_url = "https://oozy.kr"
theme = "tabi"
title = "개발하는 CEO"
default_language = "ko"

제 블로그도 위와 같이 기본 설정이 한국어이기 때문에 https://oozy.kr로 접속하면, i18n 디렉토리의 ko.toml 파일 데이터를 불러와서 표시하게 됩니다.

다른 언어로 표시하려면 https://oozy.kr/en/, https://oozy.kr/es/ 등처럼 언어코드가 붙어야 하고요.

두번째로, 기본 언어가 아닌 다른 언어에 대해 다음과 같이 설정해주어야 합니다.

아래는 tabi 테마에서 사용하는 스페인어 사이트 설정인데요.

[languages.es]
title = "~/tabi"
description = "tabi es un tema de Zola rápido, liviano y moderno con JavaScript opcional y una puntuación perfecta en Lighthouse."
generate_feed = true
compile_sass = true
minify_html = true
taxonomies = [{name = "tags", feed = true}]

위처럼, [languages.[언어-코드]] 섹션 아래에 사이트 기본 설정을 추가해주면 됩니다.

만약 위에서defaults_language = "en"으로 설정했다면, 한국어 사이트를 위해 [languages.ko] 섹션이 있어야겠죠?

개별 파일 및 폴더

이제 설정은 끝났습니다. 마지막으로는 블로그를 운영하면서, 각 포스트에 대해 각 언어별로 다른 문서를 작성해주면 됩니다.

이 때, 각 파일의 이름에는 아래처럼 언어코드가 추가됩니다.

|─ blog
    ├─ 1
        ├─ index.md  # 기본 언어: 한국어
        ├─ index.en.md # 추가 언어: 영어
        ├─ index.es.md # 추가 언어: 스페인어

각 문서의 경로는 다음과 같습니다.

/blog/1/ - 기본 언어: 한국어
/blog/en/1/ - 추가 언어: 영어
/blog/es/1/ - 추가 언어: 스페인어

Zola로 블로그 만들기 초보자 가이드 2

목차

섹션과 _index.md 파일

페이지

다국어 사이트

i18n 디렉토리

config.toml 파일

개별 파일 및 폴더

섹션과 `_index.md` 파일

`i18n` 디렉토리

`config.toml` 파일