DiscoTOC - جدول المحتويات التلقائي

[pmusaraj (Penar Musaraj)]

هل يمكنك نشر رابط لموقعك؟ أظن أن المشكلة ناتجة عن تنسيق في القالب الخاص بك.

[huynhthai824 (Sora &\)]

هذا هو الرابط الخاص بي:

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

[mentalstring (Paulo)]

عذرًا على مقاطعة النقاش الجاري. وجدت شيئًا لست متأكدًا مما إذا كان قد تم الإبلاغ عنه بالفعل.

إذا كان للمنشور رابط في عنوان، فسيتم أيضًا عرض عدد النقرات في إدخال جدول المحتويات:

[simonk (Simon King)]

منذ هذا التحديث، أرى خطأ في صفحات Discourse-Docs التي تحتوي على جدول محتويات. على سبيل المثال، في هذه الصفحة على Meta، لا يتم عرض جدول المحتويات، وأرى خطأ في أدوات المطور في متصفحي:

على موقعي، أرى أيضًا لافتة في أعلى الصفحة تقول “قد لا يتم عرض المشاركات بشكل صحيح لأن أحد مزخرفات محتوى المشاركات في موقعك قد أثار خطأ. تحقق من أدوات المطور في المتصفح لمزيد من المعلومات.”

[pmusaraj (Penar Musaraj)]

شكراً @simonk، لقد قمت للتو (قبل دقيقتين!) بدمج إصلاح لهذه المشكلة. يرجى تحديث المكون على موقعك، وأخبرني إذا استمر ظهور اللافتة على موقعك الخاص.

[simonk (Simon King)]

شكراً على الرد! لقد اختفى الخطأ، ولكن جدول المحتويات لا يظهر في الإصدار discourse-docs من الصفحة. قبل تحديث الأمس، كان جدول المحتويات يظهر في إصدار discourse-docs من الصفحة وكذلك في الإصدار “العادي”.

(هذا ليس عاجلاً بالنسبة لي - لقد قمت بنشر التحديث على موقع تجريبي، وليس على موقع الإنتاج، لذلك لا يهم أنه لا يعمل بشكل صحيح)

تعديل: أنا أستخدم الإصدار 2.8.0.beta11 (42c71789f9)، إذا كان لذلك أي تأثير.

[pmusaraj (Penar Musaraj)]

نعم، أفهم ما تقصده. للأسف، تستخدم التغييرات التي أجريتها على جدول المحتويات منفذًا في عرض الموضوع غير موجود في المستندات. سأبحث في الأمر.

[pmusaraj (Penar Musaraj)]

تم إجراء بعض التغييرات الإضافية على المكون اليوم، ويجب أن تعالج المشكلات التي أثارها @mentalstring و @simonk. في حالتك، يا سيمون، تحتاج إلى إعادة بناء كاملة لأنك بحاجة إلى سحب تحديث إلى مكون التوثيق الإضافي أيضًا.

@huynhthai824 من المحتمل جدًا أن يتم إصلاح مشكلتك بمجرد تحديث المكون.

[huynhthai824 (Sora &\)]

شكراً جزيلاً، أنا سعيد جداً، تم حل مشكلتي.
شكراً مرة أخرى..

[simonk (Simon King)]

بعد إعادة بناء كاملة، يمكنني التأكيد على أن جدول المحتويات يظهر بشكل صحيح في صفحة discourse-docs - شكراً جزيلاً لك
أرى أنك قمت الآن بتقييد جدول المحتويات بمستويين. بالنظر إلى المساحة الأفقية، أعتقد أن هذا معقول، ولكنه يعني أن العناوين من المستوى الثالث يتم عرضها في جدول المحتويات بنفس مستوى التداخل مع العناوين الأصلية.
أي، في الوقت الحالي، هذا النص:

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

ينتج عنه جدول المحتويات هذا:

أتساءل عما إذا كان من الأفضل استبعاد العناوين من المستوى الثالث وما دونه من جدول المحتويات تمامًا؟
أيضًا، بنية DOM لا تبدو صحيحة تمامًا - كل عنصر من المستوى الثاني هو <ul> مع <li> واحد بداخله:

[pmusaraj (Penar Musaraj)]

@simonk

أرى أنك قمت أيضًا بتقييد جدول المحتويات (ToC) إلى مستويين. نظرًا للمساحة الأفقية، أعتقد أن هذا معقول، ولكنه يعني أن العناوين من المستوى الثالث يتم عرضها في جدول المحتويات بنفس مستوى التداخل مثل عناصرها الأصلية.

اكتشاف جيد. لست متأكدًا من عدد المرات التي نستخدم فيها 3 مستويات أو أكثر، ولكن من الممكن إعادة تقديمها، ولا ينبغي أن يكون الأمر معقدًا للغاية.

@simonk

أيضًا، بنية DOM لا تبدو صحيحة تمامًا - كل عنصر من المستوى الثاني هو <ul> مع <li> واحد بداخله:

اكتشاف جيد مرة أخرى. كان هذا خطأ بسيطًا، ويجب إصلاحه بمجرد دمج هذا الطلب (PR).

[simonk (Simon King)]

@pmusaraj

لست متأكدًا من عدد المرات التي نستخدم فيها 3 مستويات أو أكثر، ولكن من الممكن إعادة تقديمها، ولا ينبغي أن يكون الأمر معقدًا للغاية.

إذا كنت في مزاج لطلبات الميزات، فربما يمكن التحكم في الحد الأقصى للعمق عبر إعداد…

[robbie.morrison]

في تجربتي، تعمل ميزة جدول المحتويات (ToC) فقط عند النشر الأول وليس عند النشرات اللاحقة. هل هذا صحيح؟ إذا كان الأمر كذلك، فهل يمكن اعتبار ملاحظتي بمثابة طلب ميزة؟ بالمناسبة، جدول المحتويات، حتى في النشر الأول، هو إضافة رائعة حقًا. وندز؛ ر

[Steven]

مرحباً بالجميع، لدي مشكلة منذ آخر ترقية على مكون السمة الرائع هذا، ولكن على الهاتف المحمول فقط. عندما أنقر على زر جدول المحتويات، فإن الشريط المنزلق الذي يحتوي على جدول المحتويات الكامل لا يفتح.

إذا استخدمت نافذة صغيرة جدًا على سطح المكتب، فإن هذا الزر والشريط المنزلق يعملان بشكل رائع. لذلك قد تكون مشكلة على Android فقط.

إليك السجل على منتداي المحدث (Discourse و TOC):

رسالة

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

إذا استخدمت وكيل مستخدم Android في إصدار Firefox desktop الخاص بي، أحصل على هذا الخطأ إذا نقرت على الزر في هذا المنتدى:

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

على هاتفي، لدي Chrome الإصدار 97.0.4692 إذا كان ذلك يساعد.

هل أنا الوحيد الذي يواجه هذا؟

[pmusaraj (Penar Musaraj)]

هذا تراجع حديث بسبب تغيير في النواة، لدي إصلاح جاهز في https://github.com/discourse/discourse/pull/15683، بمجرد دمج هذا، يمكنك إعادة بناء موقعك ويجب إصلاح المشكلة. آسف لذلك.

في الأسبوع الماضي، أعدت أيضًا مستوى المسافة البادئة الثالث للعناوين في المكون، كما ذكر سيمون أعلاه.

@simonk

ربما يمكن التحكم في أقصى عمق عبر إعداد

أنا أتردد في إضافة إعداد هنا، الغالبية العظمى من حالات الاستخدام لا تحتاج إليه. وأيضًا، يحتوي المكون على فئات لكل مستوى، لذلك إذا كنت تريد إخفاء المستوى الرابع والخامس، يمكنك القيام بذلك باستخدام CSS هذا:

li.d-toc-h4, li.d-toc-h5 {
  display:none;
}

[Steven]

لقد تم دمجه ويعمل بشكل جيد، شكراً لك!

[simonk (Simon King)]

لاحظت أن <div> في أعلى الموضوع أضاف هامشًا إضافيًا. على سبيل المثال:

لقد أضفت هذا إلى السمة الخاصة بي، ويبدو أنه يحل المشكلة:

// عناصر جدول المحتويات في أعلى المنشور تُدخل مساحة غير مرغوب فيها.
// يضبط Discourse الهامش العلوي للطفل الأول في المنشور إلى الصفر،
// ولكن هذا لا يعمل عندما يكون جدول المحتويات هو الطفل الأول.
// بدلاً من ذلك، سنضبط الهامش العلوي للعنصر الذي يلي جدول المحتويات إلى الصفر.
div[data-theme-toc="true"] + * {
    margin-top: 0px;
}

ربما يجب إضافة شيء كهذا إلى المكون؟

[pmusaraj (Penar Musaraj)]

إمساك جيد، لقد أضفت قاعدة CSS هذه في طلب السحب هذا: UX: Keep core's top margin for first item in OP by pmusaraj · Pull Request #30 · discourse/DiscoTOC · GitHub

[tobiaseigen]

لقد عالجت هذه المشكلة في الماضي عن طريق نقل رمز التضمين إلى أسفل المنشور. يبدو الأمر وكأنه حل مؤقت ولكنه يعمل.

[craigconstantine]

لدي منشورات تحتوي على عناصر DIV إضافية في نصوصها. على سبيل المثال، On Storytelling - Workbench - Podcaster Community
عنصر DIV الذي يؤدي إلى إنشاء جدول المحتويات موجود داخل عنصر DIV… ويلاحظه جدول المحتويات. ولكن يبدو أن جدول المحتويات لا يلاحظ العناوين الأخرى الموجودة داخل عناصر DIV.

… ليست أفضل لقطة شاشة. هذا عنوان H2 في عنصر DIV اختياري/للتصميم فقط والذي لا يظهر في جدول المحتويات.
… لم يتم عرضه هو عنصر \u003cdiv الذي يؤدي إلى إنشاء جدول المحتويات، وهو موجود داخل عنصر DIV مع زوج السمات/القيم الغريب…

تم التحديث بعد ساعات لإضافة: ربما فقط “:scope h1،” إلخ بدلاً من مطالبة العناوين بأن تكون أطفالًا مباشرين للنطاق؟

… أيضًا، تم ذكر هذا في مارس 21، DiscoTOC - automatic table of contents - #255