{#- 모든 페이지가 상속하는 골격. 여기는 크롬만 안다 — 본문은 각 템플릿이 content 블록에 채우고, 카피는 content/ 와 i18n/ 이 갖는다. 내비는 site.sections 를 그대로 돈다. 현재 언어의 트리만 담기므로 번역이 없는 갈래는 애초에 그려지지 않고, 죽은 링크가 생길 수 없다. 그래서 About도 페이지가 아니라 섹션이다 — 세 갈래가 같은 자료에서 나와야 하나만 다르게 동작하는 일이 없다. #} {%- set ko = page.language == "ko" %} {#- 서브경로에 올라갈 수도 있으므로 손으로 쓰는 링크에는 base_path를 붙인다. 페이지 URL들은 이미 이 접두사를 품고 있어서 손댈 필요가 없다. `home` 은 링크가 아니라 **갈래 URL 을 알아보는 접두사**다(nav_label 이 이걸로 /posts/ 인지 /ko/posts/ 인지 가른다). 실제로 가는 첫 화면은 `root` 이고 둘은 한국어에서 갈라진다 — 한국어 홈은 없다. 첫 화면은 영어 한 장뿐이고, 번역되는 것은 읽으러 온 문서다. 브랜드가 /ko/ 로 가면 그건 없는 페이지다. #} {%- set home = site.base_path ~ ("/ko/" if ko else "/") %} {%- set root = site.base_path ~ "/" %} {% from "partials/nav.html" import nav_label %} {#- 기본값을 여기 적는다. prefers-color-scheme 에 맡기지 않는 이유는 생성된 하이라이트 스타일시트가 같은 [data-theme] 을 보기 때문이다. 둘이 서로 다른 근거로 결정하면 한쪽이 어두운 페이지에 밝은 코드를 낸다. #} {% if page.url == home %}{{ site.title }} — {{ site.description }}{% else %}{{ page.title }} · {{ site.title }}{% endif %} {%- if page.description %} {%- endif %} {%- if site.feed %} {%- endif %} {%- for lang in page.translations %} {%- endfor %} {#- 파비콘에는 CSS 가 닿지 않는다. 검은 선화는 어두운 탭에서 안 보이므로 흰 선 버전을 따로 준다. media 를 모르는 브라우저는 마지막 것을 쓰므로, 밝은 탭이 기본인 쪽을 뒤에 둔다. #} {#- 소셜 카드. sqzass 는 에 아무것도 넣지 않으므로 전부 우리 마크업이다. summary_large_image 는 이미지가 있을 때만 뜻이 있다 — 없이 선언하면 빈 상자가 나온다. #} {%- if page.description %} {%- endif %} {#- 라틴 서브셋만 미리 받는다. 한글 파일은 unicode-range 뒤에 있어서 한글이 한 글자도 없는 페이지는 애초에 받지 않는데, preload 는 그 판단을 건너뛰므로 여기 넣으면 영문 페이지가 쓰지도 않을 116KB 를 받는다. #} {%- if site.highlight_css %} {%- endif %}
{#- 마크는 가 아니라 CSS 마스크다. 원본이 투명 배경의 검은 선화라 그대로 넣으면 다크 배경에서 사라진다. 마스크로 두면 currentColor 를 타서 테마와 호버를 글자와 똑같이 따라간다. aria-hidden 인 이유는 바로 옆 텍스트가 이미 같은 이름을 말하기 때문이다 — 여기 이름을 또 넣으면 스크린리더가 두 번 읽는다. #} {{ site.title }}
{%- if site.search %} {%- endif %} {#- 지금 테마가 아니라 **누르면 갈 곳**을 보여 준다. 버튼은 상태가 아니라 동작을 말해야 한다. #}
{% block content %}{% endblock %}
{%- include "partials/footer.html" %} {%- if site.search %} {%- include "partials/search.html" %} {%- endif %} {%- if site.search %} {%- endif %}