제목에 비라틴 문자를 사용하면 앵커링이 작동하지 않음

DiscoTOC의 자동 생성된 목차 기능을 사용하던 중 잠재적인 문제를 발견했습니다:

중국어와 같이 영어 이외의 언어로 다양한 수준의 제목을 사용할 때, 자동 생성된 목차의 data-d-toc ID는 제목에서 숫자와 영어 알파벳만 추출하는 것으로 보입니다. 이로 인해 동일한 ID가 쉽게 생성될 수 있으며, 결과적으로 오른쪽 스크롤바에 있는 링크가 잘못되게 됩니다.

위 이미지에서 제목 내의 일련 번호가 모두 5인 경우, 생성되는 data-d-toc ID는 모두 toc-h2-5가 됩니다. 그 결과, 서로 다른 두 링크가 실수로 동일한 섹션으로 연결됩니다.

반면, 일련 번호를 1.5와 2.5로 수정하면 data-d-toc ID가 서로 달라집니다(toc-h2-15와 toc-h2-25). 이를 통해 정확하고 적절한 링크를 보장할 수 있습니다.

스크롤바 내에서 정확한 링크를 보장하기 위해 제목을 영어로 유지하는 것이 권장됩니까?

또한, 중국어와 같은 언어의 경우, 가장 현실적인 해결책은 제목에 다단계 일련 번호(예: 3.5, 3.6.5, 4.2.5.6)를 포함하는 것입니까?

참고:

이 문제는 이전에 이미 발견해서 지적한 적이 있고, fork도 하나 해뒀습니다.

https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/399?u=lhc_fl

다만 제 것은 동작은 하지만 완벽하지는 않습니다. 주로 귀찮아서 수정을 안 했거든요.

물론 더 나은 해결책은 base64를 사용해 data-d-toc를 생성하고, 제목이 중복될 가능성을 방지하기 위해 고유 식별자를 추가하는 것입니다.

1개의 좋아요

현재 회사 포럼에 이러한 변경 사항을 적용할 권한이 없지만, 답변해 주셔서 감사합니다!

또한, 향후 DiscoTOC 플러그인의 정식 버전에서 이 자동 생성된 목차 기능이 다른 비라틴 문자 언어를 지원하도록 고려하고 있는지 궁금합니다. @Lilly @awesomerobot

다시 한번 모두 감사합니다!

사실 그들은 비라틴 문자 언어를 고려하여 slugify(h.textContent) 메서드를 사용했습니다. 이 slugify 함수가 포럼의 slug 생성 방법에 맞춰 개발되었을 것으로 의심됩니다. ‘encode’ 모드가 아닐 때 문제가 발생하는 경향이 있지만, 저는 이 가설을 직접 테스트해 보지 않았습니다.

이전에 공식 버전의 테마 컴포넌트를 사용할 때, 우리 포럼의 slug 생성 방법을 'none’으로 설정했더니 비슷한 문제가 발생했습니다. 따라서 설정을 'encode’로 변경해 보시는 것을 제안합니다.

사실 그들은 비라틴 문자 언어를 고려하여 slugify(h.textContent)를 사용했고, 이 slugify 함수가 포럼의 slug 생성 방식에 따라 생성되었을 것 같습니다. encode가 아닐 때 문제가 생기는데, 저는 직접 테스트해 보진 않았습니다.

예전에 공식 버전 플러그인을 사용할 때, 우리 포럼의 slug 생성 방식을 none으로 설정하면 당신과 동일한 문제가 발생했습니다. encode로 변경해 보시는 건 어떨까요?

또한 공식 측의 컴포넌트 수정 속도를 고려해 보면… 옆에 있는 다른 컴포넌트의 경우 작년 제보한 문제가 지금까지도 답이 없습니다. 제 fork 버전을 사용하도록 신청해 보시는 것을 권합니다.

1개의 좋아요

해당 설정을 수정해 보았지만, 앞서 언급했던 문제가 여전히 존재합니다. data-d-toc ID는 숫자와 영문자만 읽을 수 있으며, 여전히 중복된 목차 ID가 발생합니다. 문제의 핵심이 여기에 있지 않은 것 같습니다?
상사에게 물어보겠습니다. 답변 감사합니다~

해당 설정을 수정해 보았지만, 앞서 언급했던 문제가 여전히 존재합니다. data-d-toc ID는 숫자와 영문자만 읽을 수 있으며, 여전히 중복된 목차 ID가 발생합니다. 문제의 핵심이 여기에 있지 않은 것 같습니다?

업데이트: 오늘 코드를 업데이트했습니다. 이제 접미사가 인덱스에 의해 생성됩니다:

이 개선 사항은 비라틴 문자나 동일한 제목 이름이 동일한 앵커를 생성하는 문제를 해결합니다.

const suffix = `${slugify(h.textContent)}-${post?.post_number}-${index}`;
1개의 좋아요