content 간단 설명
지킬(Jekyll)에서 {{ content }}라는 변수는 꽤 중요하지만, 이렇다 할 설명이 없어 제가 이해한 대로 간단하게 설명해 보려고 합니다. 그렇다 보니 정확하지 않을 수도 있습니다.
한마디로 요약하자면 렌더링된 컨텐츠를 보여주는 영역입니다. 하지만 이렇게 설명하면 애매하니 조금이라도 쉽게 풀어보려고 합니다.
content 레이아웃 체인
제가 만든 사이트를 예로 들자면 _layouts/page는 대부분의 html이 렌더링되는 공통 레이아웃입니다. 해당 파일에 content가 존재하는데
<!-- main article content -->
<section class="article__content">
{{ content }}
</section>
여기서 {{ content }} 부분이 핵심입니다. 사이트 front matter에 layout: page라고 작성되어 있는 파일들의 내용이 이 자리에 렌더링되어 표시됩니다.
쉽게 말하면 <section>은 빈 액자고, content는 그 액자에 끼울 사진입니다. 액자(레이아웃)는 미리 만들어두고, 페이지마다 다른 사진(내용)을 끼우게 됩니다.
예를 들어 제 사이트의 _standalone/contact는 연락처 화면인데 해당 파일은 부모 레이아웃으로 page를 가리키고 있어, 파일의 내용이 page 파일의 {{ content }} 부분에 채워집니다.
렌더링 결과
<!-- main article content -->
<section class="article__content">
<p>문의가 있다면 가능한 범위에서 답변드립니다.</p>
<h4>GitHub — <strong><a href="https://github.com/Laaatte" target="_blank">Laaatte</a></strong></h4>
</section>
하지만 page 파일 혼자서 모든 html 렌더링을 담당하는 건 아니고, 최종적으로 _layouts/default에 모든 컨텐츠가 렌더링됩니다.
default 파일에는 사이트 전체의 골격(<head>, <header>, <main>, <footer>)이 잡혀 있고, <main> 안에 {{ content }}가 자리하고 있어서, 앞서 만들어진 page 레이아웃의 결과물이 이 자리에 통째로 들어오게 됩니다. page.html이 부모 레이아웃으로 default를 가리키고 있기 때문입니다.
최종 렌더링 결과
<!DOCTYPE html>
<html lang="ko">
<head>...</head>
<body>
<header>...</header>
<main id="main-content" class="layout-container">
<article class="article">
<section class="article__content">
<p>문의가 있다면 가능한 범위에서 답변드립니다.</p>
<h4>GitHub — <strong><a href="https://github.com/Laaatte" target="_blank">Laaatte</a></strong></h4>
</section>
</article>
</main>
<footer>...</footer>
</body>
</html>
contact.md의 본문이 → page의 <section> 안에 → 그게 다시 default의 <main> 안에 차곡차곡 쌓여서 최종 HTML이 완성됩니다.
index.html이 home을 가리키는 이유
앞서 설명만 보면 index.html(웹사이트 루트)는 layout: default를 가리켜야 할 것 같지만, 그렇게 설정하면 바로 default 레이아웃을 렌더링하게 되어 빈 화면만 보이게 됩니다.
index.html이 레이아웃 page를 가리킬 때
layout: page로 설정했을 땐 article 영역만 잡혀 있고 내용은 비어 있습니다. 즉, home.html이 가진 About, Recent, Archive 같은 실제 내용이 빠진 상태입니다.
그래서 index.html은 layout: home을 가리킵니다. 이렇게 하면 home의 내용 → page의 <section> 안에 → default의 <main> 안에 단계별로 채워지면서 최종 화면이 완성됩니다.
전체 흐름을 정리하면 이렇습니다.
┌─→ home.html
│ ↓ layout: page
│ page.html
│ ↓ layout: default
│ default.html
│ ↓
└── index.html (layout: home)
이처럼 index.html이 layout: home을 가리키기 때문에 결국 home의 내용이 사이트 첫 화면이 됩니다.