제목이 동일하면 ID와 앵커도 동일해집니다

기여 기능
,
1

안녕하세요,

버그(?) 또는 기술적 한계를 발견했습니다. 제목이 동일한 경우, 목차(TOC)의 링크와 스크롤 시 하이라이팅이 제대로 작동하지 않습니다. 고유한 ID가 생성되지 않고 ID가 단순히 제목 이름만이기 때문이라고 추측합니다.

제 경우 목차는 다음과 같은 형태입니다. 교육 배경 때문에 학습 단위의 구조가 항상 동일합니다. 예를 들어,

  • H1 - 개요
  • H1 - 0:00 > 0:15 - 전체 회의 및 소개
    • H2 - 목표
    • H2 - 내용
    • H2 - 방법
    • H2 - 힌트
    • H2 - 슬라이드
  • H1 - 0:15 > 0:45 - 그룹 작업
    • H2 - 목표
    • H2 - 내용
    • H2 - 방법
    • H2 - 힌트
    • H2 - 슬라이드
  • H1 - 0:45 > 0:60 - 개인 작업
    • H2 - 목표
    • H2 - 내용
    • H2 - 방법
    • H2 - 힌트
    • H2 - 슬라이드
  • H1 - 0:60 > 0:90 - 전체 토론
    • H2 - 목표
    • H2 - 내용
    • H2 - 방법
    • H2 - 힌트
    • H2 - 슬라이드

H2 제목에 더 많은 정보를 주어 더 구체적으로 만들 수 있겠지만, 이는 모든 학습 단위에서 명확한 구조를 유지하는 것과 상충됩니다. 특히 "힌트"와 "슬라이드"의 경우 더 쓸 수 있는 내용이 많지 않습니다.

아마 이 문제는 위에서 언급한 문제와 관련이 있을 수 있습니다… 하지만 저는 전문가가 아니기 때문에 확신할 수 없습니다.

6개의 좋아요
Anchoring not working when using non-latin characters in headings
2

이것은 HTML 자체에 내재된 문제이므로 버그가 아니라 기술적 한계입니다.

설명하신 대로 테마 컴포넌트를 사용하여 해당 동작을 보여주는 영상입니다:

우선순위가 꽤 낮은 것 같지만, 변경 사항이 환영될 수 있으므로 누군가 시도해 보고 싶다면 pr-welcome 태그를 붙여 두겠습니다. :slight_smile:

1개의 좋아요
3

음, 아니에요. 앵커에는 고유한 name 속성이 부여됩니다.

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

다음과 같이 생성됩니다: (참고: -1, -2, -3 등)

<h1 dir="ltr">
  <a name="heading-level-a-1" class="anchor" href="#heading-level-a-1"></a>Heading level A
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-2" class="anchor" href="#heading-level-b-2"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-3" class="anchor" href="#heading-level-b-3"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
<h1 dir="ltr">
  <a name="heading-level-a-4" class="anchor" href="#heading-level-a-4"></a>Heading level A
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-5" class="anchor" href="#heading-level-b-5"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-6" class="anchor" href="#heading-level-b-6"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
4

속성 값은 제목의 내용에 기반하므로, 동일한 제목은 동일한 id와 data-d-toc 속성을 가집니다:

마지막 “Aim” 제목:

image
image1247×1359 96.1 KB

결과적으로, 첫 번째 Aim은 마지막 ToC 요소와 동일한 값을 가진 id와 data-d-toc 속성을 갖게 됩니다:

image
image1247×1359 117 KB

1개의 좋아요
5

그렇습니다. 따라서 이것은 HTML의 본질적인 한계(사실, 단일 문서에서 동일한 id를 가지는 것은 규격 위반입니다)이 아니라 테마 컴포넌트의 버그입니다.

이 부분이

const suffix = slugify(h.textContent) || index;
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}`);

다음과 같은 것으로 변경되어야 할 것 같습니다.

const suffix = slugify(h.textContent) || '';
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}-${index}`);
6개의 좋아요