見出しで非ラテン文字を使用するとアンカーが機能しない

バグ
1

DiscoTOC の自動生成目次機能を使用中に、潜在的な問題が発生したと思われます。

中国語などの英語以外の言語でさまざまなレベルの見出しを使用すると、自動生成された目次の data-d-toc ID が、見出しから数字と英語の文字のみをキャプチャしているようです。この状況により、簡単に同一の ID が作成され、結果として右側のスクロールバーでリンクが正しく機能しなくなります。

image
image558×863 31.7 KB

上記の画像では、見出し内のシリアル番号が両方とも 5 の場合、結果として生成される data-d-toc ID は両方とも toc-h2-5 となります。その結果、2 つの異なるリンクが誤って同じセクションを指すことになります。

しかし、シリアル番号を 1.5 と 2.5 に変更すると、data-d-toc ID は異なります（toc-h2-15 と toc-h2-25）。これにより、正確で適切なリンクが保証されます。

スクロールバー内のリンクを正確にするために、見出しを英語のままにしておくことをお勧めしますか？

さらに、中国語のような言語の場合、最も実行可能な解決策は、見出しに多段階のシリアル番号（例: 3.5、3.6.5、4.2.5.6）を含めることでしょうか？

参照:

2

この問題は以前から発見し、提起していました。ついでにフォークもしました。
https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/399?u=lhc_fl

ただし、これは機能するものの完璧ではなく、主にコードを修正するのが面倒だったためです。

明らかに、より良い解決策は、base64を使用してdata-d-tocを生成し、重複する可能性のあるタイトルを防ぐために一意の識別子を追加することです。

「いいね！」 1
3

会社のフォーラムにそのような変更を加える権限は現在ありませんが、ご返信いただきありがとうございます！

また、公式チームは、今後のDiscoTOCコンポーネントの正式リリースにおいて、この自動生成目次機能でラテン文字以外の言語のサポートを組み込むことを検討しましたか？ @Lilly @awesomerobot

皆様、改めて感謝いたします！

4

実は、non-latin language を考慮して slugify(h.textContent) を使用しています。この slugify 関数は、フォーラムの slug generation method に従って開発されたのではないかと推測されます。それが ‘encode’ モードでない場合に問題が発生する傾向がありますが、個人的にはこの仮説をテストしていません。

以前、テーマコンポーネントの公式バージョンを使用していた際、フォーラムの slug generation method が ‘none’ に設定されており、同様の問題が発生しました。そのため、設定を ‘encode’ に変更することを試してみてはいかがでしょうか。

また、コンポーネントの公式の修正速度を考慮すると…隣のコンポーネントで昨年報告した問題が現在も未解決のままなので、私のフォークしたバージョンを申請することをお勧めします。

「いいね！」 1
5

この設定を変更してみましたが、以前言及した問題は依然として残っています。data-d-toc IDは数字と文字しか読み込めず、目次のIDが重複してしまう問題が発生します。問題の核心はここにはないように感じます。
上司に聞いてみます。回答ありがとうございました〜

この設定を変更してみましたが、以前言及した問題は依然として残っています。data-d-toc IDは数字と文字しか読み込めません、そして目次のIDが重複する問題が発生します。問題の核心はここにあると推測します。

image
image971×119 3.57 KB

6

更新：本日コードを更新しました。サフィックスはインデックスによって生成されるようになりました。

この改善により、ラテン文字以外の文字や同じタイトル名が同じアンカーを生成してしまう問題が解決されます。

const suffix = `${slugify(h.textContent)}-${post?.post_number}-${index}`;
「いいね！」 1