DiscoTOC - table des matières automatique

Pouvez-vous publier un lien vers votre site ? Je soupçonne que le problème est dû au style de votre thème.

2 « J'aime »

Voici mon lien :

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

1 « J'aime »

Désolé d’interrompre la discussion en cours. J’ai trouvé quelque chose qui, je ne suis pas sûr s’il a déjà été signalé.

Si la publication contient un lien dans un en-tête, le nombre de clics est également indiqué dans l’entrée de la table des matières :

2 « J'aime »

Depuis cette mise à jour, je vois une erreur sur les pages de discourse-docs qui ont une table des matières. Par exemple, sur cette page sur Meta, la table des matières ne s’affiche pas, et je vois une erreur dans les outils de développement de mon navigateur :

Sur mon site, je vois également une bannière en haut de la page disant « Les publications peuvent ne pas s’afficher correctement car l’un des décorateurs de contenu de publication sur votre site a généré une erreur. Vérifiez les outils de développement du navigateur pour plus d’informations. »

3 « J'aime »

Merci @simonk, je viens (il y a 2 minutes !) de fusionner un correctif pour ce problème. Veuillez mettre à jour le composant sur votre site et me faire savoir si la bannière sur votre propre site persiste.

3 « J'aime »

Merci pour votre réponse ! L’erreur a disparu, mais la table des matières ne s’affiche pas dans la version discourse-docs de la page. Avant la mise à jour d’hier, la table des matières s’affichait sur la version discourse-docs de la page ainsi que sur la version « normale ».

(Ce n’est pas urgent pour moi - j’ai déployé la mise à jour sur un site de staging, pas en production, donc peu importe si cela ne fonctionne pas correctement)

Edit : J’utilise la version 2.8.0.beta11 (42c71789f9), si cela a une importance.

2 « J'aime »

Oui, je vois ce que vous voulez dire. Malheureusement, mes modifications du TOC utilisent un point de sortie dans la vue du sujet qui est absent dans les docs. Je vais examiner la question.

3 « J'aime »

J’ai apporté quelques modifications supplémentaires au composant aujourd’hui, elles devraient résoudre les problèmes soulevés par @mentalstring et @simonk. Dans votre cas, Simon, vous avez besoin d’une reconstruction complète car vous devez également récupérer une mise à jour du plugin de documentation.

@huynhthai824, il est très probable que votre problème soit résolu une fois que vous aurez mis à jour le composant.

4 « J'aime »

Merci beaucoup, je suis très content, mon problème est résolu.
Merci encore…

1 « J'aime »

Après une reconstruction complète, je peux confirmer que la table des matières apparaît correctement sur la page discourse-docs - merci beaucoup :+1:

Je vois que vous avez également limité la table des matières à 2 niveaux. Compte tenu de l’espace horizontal, je pense que c’est raisonnable, mais cela signifie que les titres de troisième niveau sont affichés dans la table des matières au même niveau d’imbrication que leurs parents.

c’est-à-dire qu’actuellement, ce texte :

# Premier titre
## Premier sous-titre
### Enfant du premier sous-titre
### Enfant du premier sous-titre
## Second sous-titre
### Enfant du second sous-titre
### Enfant du second sous-titre
# Second titre

Produit cette table des matières :

Je me demande s’il ne serait pas préférable d’exclure complètement les titres de troisième niveau et inférieurs de la table des matières ?

De plus, la structure DOM ne semble pas tout à fait correcte - chaque élément de deuxième niveau est un <ul> avec un seul <li> à l’intérieur :

4 « J'aime »

Bonne remarque. Je ne suis pas sûr de la fréquence à laquelle nous utilisons 3 niveaux ou plus, mais il est possible de les réintroduire, cela ne devrait pas être trop compliqué.

Encore une bonne remarque. C’était une petite erreur, elle devrait être corrigée une fois que cette PR sera fusionnée.

3 « J'aime »

Si vous êtes d’humeur pour des demandes de fonctionnalités, peut-être que la profondeur maximale pourrait être contrôlée via un paramètre… :wink:

5 « J'aime »

D’après mon expérience, la fonctionnalité de ToC ne fonctionne que lors de la première publication, mais pas lors des publications suivantes. Est-ce correct ? Si oui, ma remarque pourrait-elle être considérée comme une demande de fonctionnalité ? D’ailleurs, la ToC, même lors de la première publication, est un excellent ajout. R

Bonjour à tous, j’ai un problème depuis la dernière mise à niveau de ce super composant de thème, mais uniquement sur mobile. Lorsque je clique sur le bouton de la table des matières, le curseur avec la table des matières complète ne s’ouvre pas.

Si j’utilise une très petite fenêtre sur mon bureau, ce bouton et ce curseur fonctionnent parfaitement. Il pourrait donc s’agir d’un problème uniquement sur Android.

Voici le journal sur mon forum à jour (Discourse et TOC) :

Message

Uncaught TypeError: Cannot read properties of null (reading 'classList')
Url: https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr
Line: 36
Column: 49
Window Location: https://iunctis.fr/t/le-mensuel-01-decembre-2021/9591

Backtrace

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)

Env

HTTP HOSTS: iunctis.fr

Si j’utilise un agent utilisateur Android dans ma version Firefox de bureau, j’obtiens cette erreur si je clique sur le bouton de ce forum :

Uncaught 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

Sur mon téléphone, j’ai Chrome version 97.0.4692 si cela peut aider.

Suis-je le seul à rencontrer ce problème ?

2 « J'aime »

Ceci est une régression récente due à un changement dans le cœur, j’ai un correctif prêt dans FIX: Restore outlet in mobile views by pmusaraj · Pull Request #15683 · discourse/discourse · GitHub, une fois qu’il sera fusionné, vous pourrez reconstruire votre site et le problème devrait être résolu. Désolé pour cela.

La semaine dernière, j’ai également réintégré le troisième niveau d’indentation pour les titres dans le composant, comme mentionné par Simon ci-dessus.

J’hésite à ajouter un paramètre ici, la grande, grande majorité des cas d’utilisation n’en ont pas besoin. Et, le composant a également des classes pour chaque niveau, donc si vous voulez masquer les 4ème et 5ème niveaux, vous pouvez le faire avec ce css :

li.d-toc-h4, li.d-toc-h5 {
  display:none;
}
7 « J'aime »

C’est fusionné et ça fonctionne bien, merci !

5 « J'aime »

J’ai remarqué que le <div> en haut d’un sujet introduisait une marge supplémentaire. Par exemple :

J’ai ajouté ceci à mon thème, ce qui semble le corriger :

// Les éléments de la table des matières en haut du message introduisent un espace indésirable.
// Discourse définit la marge supérieure du premier enfant du message à zéro,
// mais cela ne fonctionne pas lorsque la table des matières est le premier enfant.
// Au lieu de cela, nous définirons la marge supérieure de l'élément qui suit la table des matières à zéro.
div[data-theme-toc="true"] + * {
    margin-top: 0px;
}

Peut-être que quelque chose comme cela doit être ajouté au composant ?

7 « J'aime »

Bien vu, j’ai ajouté cette règle CSS dans cette PR : UX: Keep core's top margin for first item in OP by pmusaraj · Pull Request #30 · discourse/DiscoTOC · GitHub

4 « J'aime »

J’ai déjà résolu ce problème en déplaçant le code d’intégration en bas de la publication. Cela semble un peu artisanal, mais cela fonctionne.

1 « J'aime »

J’ai des publications qui ont des DIVs supplémentaires dans leur corps. Par exemple, On Storytelling - Workbench - Podcaster Community

Le DIV qui déclenche la génération de la table des matières (TOC) se trouve à l’intérieur d’un DIV… et la TOC le remarque. Mais d’autres titres, à l’intérieur de DIVs, ne semblent pas être remarqués par la TOC.

…ce n’est pas la meilleure capture d’écran. C’est un H2 dans un DIV arbitraire/juste pour le style qui n’apparaît pas dans la TOC.

…ce qui n’est pas montré, c’est le <div> qui déclenche la TOC, qui se trouve à l’intérieur du DIV avec la paire attribut/valeur fantaisiste…


mis à jour quelques heures plus tard pour ajouter : Peut-être juste « :scope h1, » etc. plutôt que d’exiger que les titres soient des enfants immédiats de la portée ?

…également, cela a été mentionné en mars 21, DiscoTOC - automatic table of contents - #255

3 « J'aime »