11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성

내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다.

11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다.
또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다.

---
sample: "これはページ内のテンプレートエンジンや、11tyのcollectionsで変数sampleとして取得できます"
---

이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하는 네비게이션을, 페이지를 늘릴 때마다 자동 갱신할 수 없는가라고 생각했습니다.

같은 작은 카테고리의

다음 페이지가 있으면 다음 페이지에 대한 링크 버튼을 표시합니다.

다음 페이지가 없으면 다음 하위 카테고리의 첫 번째 링크 버튼을 표시합니다.

아무것도 없으면 버튼이 표시되지 않습니다

이하, 구현할 수 있었으므로 코드를 기재합니다.

front-matter의 내용

각 페이지에 order 변수를 정의합니다. 소카테고리내에서 연속번호로 해, 카테고리가 바뀌었을 경우는 10의 위치를 ​​1증가한 1번째의 페이지로부터 다시 카운트합니다.
즉, 앞의 그림의 경우는 「코딩 룰」의 페이지는 order: 16 로, 「칼라 테이블」의 페이지는 order:21 가 됩니다.

---
order: 16
pageTitle: "コーディングルール"
---

mixin 만들기

다음 페이지의 정보를 표시하는 mixin은 다음과 같습니다. Pug로 작성하고 있지만 다른 템플릿 엔진도 비슷한 생각이됩니다.

mixin nextNav(order)
  -
    let nextID = Number.parseInt(order)+1;
    let next = collections.all.filter((a) => Number.parseInt(a.data.order) === nextID);

  if next.length === 0
    -
      nextID = (Math.trunc(order/10)*10)+11;
      next = collections.all.filter((a) => Number.parseInt(a.data.order) === nextID);

  each item in next
    p 
      a(href=item.url) Next: #{item.data.pageTitle}

처리 흐름

먼저 order 변수가 order+1인 페이지를 요청합니다. 이 mixin에서는 collections.all에 JavaScript filter를 적용하지만 더 똑똑한 방법이있을 수 있습니다.

  -
    let nextID = Number.parseInt(order)+1;
    let next = collections.all.filter((a) => Number.parseInt(a.data.order) === nextID);

결과가 비어 있으면 10위를 올리고 한 번 더 늘려 다시 시도합니다.
10으로 나눈 다음 Math.trunc로 정수 부분을 취하고 다시 10 배하면 10 자리에 딱 맞는 숫자가됩니다 (3이면 0, 16이면 10입니다). 이것에 11을 더하여 자리를 올리고 있습니다.

  if next.length === 0
    -
      nextID = (Math.trunc(order/10)*10)+11;
      next = collections.all.filter((a) => Number.parseInt(a.data.order) === nextID);

마지막으로 페이지 정보를 확장합니다. 1건이나 0건이어야 합니다. 링크의 라벨 텍스트는 front-matter로 정의하고 있는 페이지 타이틀을 내고 싶기 때문에 data.pageTitle 가 됩니다.

  each item in next
    p 
      a(href=item.url) Next: #{item.data.pageTitle}

템플릿으로 호출

템플릿 측에서는 order 변수를 건네주어 호출합니다. Pug는 상속을 사용할 수 있으므로 레이아웃 템플릿에 써 두면 좋다고 생각합니다.

+nextNav(order)

Sitemap의 생성은 JSON에서 데이터를 쓰고 전개하는 방법이 잘 소개되고 있습니다만, 이것이라면 실제 HTML을 변경·삭제했을 때에 누설이 나올 것 같기 때문에, 제너레이터다운 수단을 생각해 보았습니다.

11ty는 사이트 내의 페이지 정보를 항상 정리해주는 것 같습니다. 잘 이용하면 정적인 사이트도 파탄이나 링크 끊김을 일으키지 않고 작성할 수 있을까라고 느끼고 있습니다.