{% from "partials/sidebar.html" import nav %} {% from "partials/toc.html" import toc_list %} {%- set ko = page.language == "ko" %} {#- 서브경로에 올라갈 수도 있으므로 홈 링크에 site.base_path를 붙인다. 페이지 URL들은 이미 이 접두사를 품고 있어서 손댈 필요가 없다. #} {%- set home = site.base_path ~ ("/ko/" if ko else "/") %} {#- The default is written here rather than left to `prefers-color-scheme`, so a reader with a light OS still gets the dark page the design assumes — and, more importantly, so the generated highlight stylesheet's `[data-theme]` rules match without JavaScript. The script below only overrides it. #} {% if page.url == home %}{{ site.title }} — {{ t("tagline") }}{% else %}{{ page.title }} · {{ site.title }}{% endif %} {% if page.description %}{% endif %} {#- 피드 자동 발견. 이 언어에 날짜 있는 페이지가 하나도 없으면 site.feed가 없고, 그때는 링크도 걸지 않는다 — 빈 피드를 가리키는 링크가 제일 나쁘다. #} {%- if site.feed %} {%- endif %} {#- 파비콘은 CSS 필터가 닿지 않는다. 탭 배경이 어두울 때 검은 선화는 보이지 않으므로 흰 선 버전을 따로 준다. media를 이해 못 하는 브라우저는 마지막 것을 쓰므로, 밝은 탭이 기본인 쪽을 뒤에 둔다. #} {#- `lang`이지 `t`가 아니다. `t`는 번역 함수이고, 루프 변수가 그 이름을 가리면 이 블록 안에서 라벨을 하나 넣는 순간 조용히 깨진다. #} {%- for lang in page.translations %} {%- endfor %} {#- 소셜 카드. sqzass는 에 아무것도 주입하지 않으므로 이건 우리 마크업이다. 입력은 전부 이미 컨텍스트에 있다 — 새로 만들 데이터가 없다. #} {%- if page.description %} {%- endif %} {#- summary_large_image는 이미지가 있을 때만 뜻이 있다. 이미지가 없으면 summary가 맞고, 이미지 없이 large를 선언하면 카드가 빈 상자로 나온다. #} {%- if site.highlight_css %} {%- endif %}
{#- alt는 비운다. 바로 옆 텍스트가 이미 같은 이름을 말하므로, 여기에 이름을 또 넣으면 스크린리더가 "sqzass sqzass"라고 읽는다. #} {{ site.title }} {#- 문서 갈래. 사이드바와 같은 데이터를 한 단계 위에서 보여 주므로, 좁은 화면에서는 사이드바 서랍이 같은 일을 해서 감춘다. #} {#- 크롬은 전부 같은 컨트롤이다. 하나만 텍스트 링크로 두면 그 하나가 고장난 것처럼 보인다. #}
{%- if site.search %} {%- endif %} {%- for lang in page.translations %} {{ lang.name }} {%- endfor %} {#- 아이콘은 인라인 SVG다. 이 레포에 "글리프 말고 텍스트"라는 결정이 있지만, 그 근거는 ◐/☾ 같은 문자가 폰트 폴백 스택에 없어 네모로 나온다는 것이었다. SVG는 폰트를 타지 않으므로 그 이유가 적용되지 않는다. 대신 아이콘만 있는 컨트롤은 이름이 없으므로 aria-label을 반드시 준다. #} {#- 지금 테마가 아니라 **누르면 갈 곳**을 보여 준다. 다크에서는 해가 뜨고, 라이트에서는 달이 뜬다 — 버튼은 상태가 아니라 동작을 말해야 한다. #}
{#-
는 열린 채로 나간다. 좁은 화면에서만 ui.js가 닫는다 — JS가 없으면 펼쳐진 채로 남는데, 그건 못 쓰는 상태가 아니라 그냥 긴 상태다. #}
{%- if page.section %} {%- endif %} {#- 페이지가 아닌 템플릿(404)은 자기 제목을 갖는다. #}

{% block heading %}{{ page.title }}{% endblock %}

{%- if page.description %}

{{ page.description }}

{%- endif %}
{#- The front matter fence: metadata ends, content begins. Same boundary it marks in the source file. #} {% block content %}{% endblock %}
{%- if page.toc and page.toc_entries %} {%- endif %}
{%- include "partials/colophon.html" %} {%- if site.search %}
{%- endif %} {%- if site.search %} {%- endif %}