DiscoTOC - 自動目次

サイトへのリンクを投稿していただけますか?テーマのスタイルが原因である可能性があります。

「いいね!」 2

ここに私のリンクがあります。

https://whois.nhachinhchu.org/t/bang-gia-xem-data-nha-chinh-chu/63389

「いいね!」 1

お話の途中申し訳ありません。すでに報告されているかわからないものを見つけました。

ヘッダーにリンクがある投稿の場合、TOCエントリにもクリック数が表示されます。

「いいね!」 2

このアップデート以降、目次がある discourse-docs ページでエラーが発生しています。例えば、Meta のこのページ では ToC が表示されず、ブラウザの開発者ツールにエラーが表示されます。

私のサイトでも、ページ上部に「サイト上の投稿コンテンツデコレーターのいずれかがエラーを発生させたため、投稿が正しく表示されない可能性があります。詳細については、ブラウザの開発者ツールを確認してください。」というバナーが表示されます。

「いいね!」 3

@simonkさん、ありがとうございます。ちょうど2分前にその問題の修正をマージしました。サイトのコンポーネントを更新して、ご自身のサイトのバナーが引き続き表示されるかどうか教えていただけますでしょうか。

「いいね!」 3

返信ありがとうございます!エラーは解消されましたが、ページをdiscourse-docsバージョンで表示した場合、目次が表示されません。昨日までのアップデートでは、目次は「通常の」バージョンだけでなく、discourse-docsバージョンでも表示されていました。

(私にとっては緊急ではありません。アップデートは本番環境ではなくステージングサイトにデプロイしたので、正常に動作しなくても問題ありません。)

編集:バージョンは2.8.0.beta11(42c71789f9)です。何か関係があれば。

「いいね!」 2

ええ、おっしゃることはわかります。残念ながら、TOCへの変更はトピックビューのアウトレットを使用していますが、ドキュメントにはそれがありません。確認します。

「いいね!」 3

本日、コンポーネントにいくつかの変更を加えました。これらは、@mentalstring および @simonk が提起した問題に対処するはずです。Simon の場合、ドキュメントプラグインの更新もプルする必要があるため、完全な再構築が必要です。

@huynhthai824 あなたの問題は、コンポーネントを更新すれば解決する可能性が非常に高いです。

「いいね!」 4

どうもありがとうございます。とても嬉しいです。問題が解決しました。
改めて感謝します。

「いいね!」 1

完全な再構築の後、discourse-docs ページで目次が正しく表示されることを確認できました。ありがとうございます :+1:

目次が2レベルに制限されていることもわかりました。横幅を考えるとこれは妥当だと思いますが、3レベルの見出しが親と同じネストレベルで目次に表示されることになります。

つまり、現時点ではこのテキスト:

# First Heading
## First Subheading
### Child of First Subheading
### Child of First Subheading
## Second Subheading
### Child of Second Subheading
### Child of Second Subheading
# Second Heading

この目次を生成します:

3レベル以上の見出しは目次から完全に除外した方が良いのではないでしょうか?

また、DOM構造も正しくないようです。各2レベル項目は、単一の <li> を含む <ul> になっています:

「いいね!」 4

よく気づかれました。3レベル以上をどのくらいの頻度で使用するかはわかりませんが、再導入することは可能です。それほど複雑ではないはずです。

また、よく気づかれました。これは小さなミスでした。このPRがマージされれば修正されるはずです。

「いいね!」 3

機能リクエストの気分であれば、最大深度は設定で制御できるかもしれません… :wink:

「いいね!」 5

私の経験では、目次機能は最初の投稿でのみ機能し、それ以降の投稿では機能しません。これは正しいですか?もしそうなら、私の発言を機能リクエストとして扱うことはできますか?ちなみに、目次は最初の投稿でも非常に素晴らしい追加機能です。R

こんにちは、皆さん。この素晴らしいテーマコンポーネントの最後のアップグレード以降、モバイルでのみ問題が発生しています。目次ボタンをクリックしても、目次全体が表示されるスライダーが開きません。

デスクトップで非常に小さいウィンドウを使用すると、このボタンとスライダーは正常に機能します。したがって、Androidのみの問題である可能性があります。

以下は、最新の状態(DiscourseとTOC)のフォーラムでのログです。

メッセージ

TypeError: Cannot read properties of null (reading 'classList') が発生しました
URL: https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr
行: 36
列: 49
ウィンドウの場所: https://iunctis.fr/t/le-mensuel-01-decembre-2021/9591

バックトレース

TypeError: Cannot read properties of null (reading 'classList')
    at n.showTOCOverlay (https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr:36:49)
    at e.n._join (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:412333)
    at e.n.join (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:409358)
    at h (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:273784)
    at https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:65110
    at a (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:260923)
    at https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:65054
    at n._triggerAction (https://iunctis.fr/assets/application-945e3f0cb654a8c23b30e86f5e955be5599a8330d68ce75e97b8228ad45ff6fd.js:1:1254524)
    at n.click (https://iunctis.fr/assets/application-945e3f0cb654a8c23b30e86f5e955be5599a8330d68ce75e97b8228ad45ff6fd.js:1:1254160)

環境

HTTP HOSTS: iunctis.fr

Firefoxデスクトップ版でAndroidユーザーエージェントを使用すると、このフォーラムのボタンをクリックしたときに次のエラーが発生します。

TypeError: document.querySelector(...) is null が発生しました
    showTOCOverlay 4916e6ed2a984e00537fe797b799637f1a801ffe.js:374
    _join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
    join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
    p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
    An _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:1147
    o _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2785
    An _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:1147
    _triggerAction _application-2646ad3bbed41e42bb77806dc41fbea2.js:489
    click _application-2646ad3bbed41e42bb77806dc41fbea2.js:488
    trigger _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2560
    n _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2422
    _run _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4034
    _join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
    join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
    p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
    handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2574
    o _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2785
    handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2574
    handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2499
    setupHandler _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2524
    dispatch _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:347
    handle _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:342
    add _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:342
    Oe _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:339
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:123
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:116
    Oe _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:339
    on _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:358
    initialize _application-2646ad3bbed41e42bb77806dc41fbea2.js:3354
    initialize _application-2646ad3bbed41e42bb77806dc41fbea2.js:62
    runInstanceInitializers _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2730
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4074
    walk _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4064
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4056
    topsort _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4056
    _runInitializer _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2733
    runInstanceInitializers _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2730
    _bootSync _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2604
    didBecomeReady _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2623
    invoke _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3963
    flush _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3955
    flush _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3969
    _end _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4032
    end _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3988
    _run _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4034
    _join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
    join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
    p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
    bind _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2873
    u _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:272
    c _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:273
    setTimeout handler*a/\u003c _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:274
    l _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:265
    fireWith _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
    fire _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
    l _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:265
    fireWith _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
    ready _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
    z _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
    EventListener.handleEvent* _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
    \u003canonymous\u003e _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:109
    \u003canonymous\u003e _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:109
4916e6ed2a984e00537fe797b799637f1a801ffe.js:374:18

私の携帯電話では、Chromeバージョン97.0.4692を使用しています。参考になれば幸いです。

私だけがこれを経験していますか?

「いいね!」 2

これはコアの変更による最近の回帰です。FIX: Restore outlet in mobile views by pmusaraj · Pull Request #15683 · discourse/discourse · GitHub で修正を用意しました。マージされたら、サイトを再構築すると問題が解決するはずです。ご迷惑をおかけしました。

先週、Simon が上記で言及したように、コンポーネントにヘッダーの 3 番目のインデントレベルを戻しました。

ここでは設定を追加することに躊躇しています。大多数のユースケースでは必要ありません。また、コンポーネントには各レベルのクラスもあるため、4 番目と 5 番目のレベルを非表示にしたい場合は、この CSS で行うことができます。

li.d-toc-h4, li.d-toc-h5 {
  display:none;
}
「いいね!」 7

マージされ、正常に動作しています。ありがとうございます!

「いいね!」 5

トピックの先頭にある <div> 要素が余分なマージンを発生させていることに気づきました。たとえば、次のようになります。

これをテーマに追加したところ、修正されたようです。

// ToC要素が投稿の先頭にあると、不要なスペースが発生します。
// Discourseは投稿内の最初の要素の上マージンをゼロに設定しますが、
// ToCが最初の要素である場合にはこれは機能しません。
// 代わりに、ToCに続く要素の上マージンをゼロに設定します。
div[data-theme-toc="true"] + * {
    margin-top: 0px;
}

おそらく、コンポーネントに同様のものを追加する必要があるのではないでしょうか。

「いいね!」 7

よく気が付きましたね。このPRでそのCSSルールを追加しました: UX: Keep core's top margin for first item in OP by pmusaraj · Pull Request #30 · discourse/DiscoTOC · GitHub

「いいね!」 4

この問題には以前、埋め込みコードを投稿の末尾に移動させることで対処してきました。少しハッキーな感じはしますが、機能します。

「いいね!」 1

本文に余分なDIVがある投稿があります。例:On Storytelling - Workbench - Podcaster Community

TOCの生成をトリガーするDIVはDIVの中にあり…TOCはそれに気づきます。しかし、DIVの中にある他の見出しは、TOCに気づかれないようです。

…最高のスクリーンショットではありません。これは、TOCに表示されない、arbitrary/just-for-styling DIV内のH2です。

…表示されていないのは、クレイジーな属性/値のペアを持つDIVの中にある、TOCをトリガーする <div です…


後で更新:見出しがスコープの直接の子であることを要求するのではなく、単に「:scope h1」などにするだけではどうか?

…また、これは21年3月に言及されました。DiscoTOC - automatic table of contents - #255

「いいね!」 3