العناوين المتطابقة تؤدي إلى معرفات ومثبتات متطابقة

ميزة
,
1

مرحباً،

لقد اكتشفت خطأ (؟) أو قيدًا تقنيًا. الروابط الموجودة في جدول المحتويات (TOC) وكذلك التمييز عند التمرير لأسفل لا تعمل بشكل صحيح إذا كانت العناوين لها نفس الاسم. أعتقد أن السبب هو أنه لا يتم إنشاء معرف فريد، بل المعرف هو اسم العنوان فقط.

في حالتي، يبدو جدول المحتويات كما يلي - نظرًا لخلفيتي التعليمية، فإن الهيكل هو نفسه دائمًا لوحدات التعلم الخاصة بنا، على سبيل المثال:

  • H1 - نظرة عامة
  • H1 - 0:00 > 0:15 - جلسة عامة ومقدمة
    • H2 - الهدف
    • H2 - المحتوى
    • H2 - الطريقة
    • H2 - تلميحات
    • H2 - شرائح
  • H1 - 0:15 > 0:45 - عمل جماعي
    • H2 - الهدف
    • H2 - المحتوى
    • H2 - الطريقة
    • H2 - تلميحات
    • H2 - شرائح
  • H1 - 0:45 > 0:60 - عمل فردي
    • H2 - الهدف
    • H2 - المحتوى
    • H2 - الطريقة
    • H2 - تلميحات
    • H2 - شرائح
  • H1 - 0:60 > 0:90 - مناقشة عامة
    • H2 - الهدف
    • H2 - المحتوى
    • H2 - الطريقة
    • H2 - تلميحات
    • H2 - شرائح

أعتقد أنه يمكننا جعل عناوين H2 أكثر ثراءً من خلال تقديم المزيد من المعلومات، ولكن هذا يتعارض مع وجود هيكل واضح عبر جميع وحدات التعلم - وخاصة في حالة “التلميحات” و “الشرائح” لا يوجد الكثير مما يمكننا كتابته.

ربما ترتبط هذه المشكلة برمتها بالمشكلة المذكورة أعلاه … لكنني لست خبيرًا بما فيه الكفاية.

6 إعجابات
2

إنها ليست مشكلة برمجية لأنها متأصلة في HTML نفسه، لذا فهي قيود تقنية.

فيديو لهذا السلوك باستخدام مكون السمة كما تشرح:

أعتقد أنها ذات أولوية منخفضة جدًا، ولكن يمكن الترحيب بالتغيير، لذا سأضيف علامة pr-welcome عليها إذا أراد شخص ما تجربتها. :slight_smile:

إعجاب واحد (1)
3

حسنًا لا، الروابط تحصل على سمات name فريدة

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

# Heading level A
foo

## Heading level B
bar

## Heading level B
bar

ينتج: (لاحظ -1 -2 -3 إلخ)


<h1 dir="ltr">
  <a name="heading-level-a-1" class="anchor" href="#heading-level-a-1"></a>Heading level A
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-2" class="anchor" href="#heading-level-b-2"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-3" class="anchor" href="#heading-level-b-3"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
<h1 dir="ltr">
  <a name="heading-level-a-4" class="anchor" href="#heading-level-a-4"></a>Heading level A
</h1>
<p dir="ltr">foo</p>
<h2 dir="ltr">
  <a name="heading-level-b-5" class="anchor" href="#heading-level-b-5"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
<h2 dir="ltr">
  <a name="heading-level-b-6" class="anchor" href="#heading-level-b-6"></a>Heading level B
</h2>
<p dir="ltr">bar</p>
4

تستند قيم السمات إلى محتويات العناوين، لذا فإن العناوين المتطابقة سيكون لها سمات id و data-d-toc متطابقة:

آخر عنوان “Aim”:

image
image1247×1359 96.1 KB

يؤدي إلى أول عنوان “Aim” الذي له سمات id و data-d-toc وقيمتها هي نفسها قيمة عنصر جدول المحتويات الأخير:

image
image1247×1359 117 KB

إعجاب واحد (1)
5

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

أعتقد أن هذا

const suffix = slugify(h.textContent) || index;
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}`);

يحتاج إلى أن يكون شيئًا مثل

const suffix = slugify(h.textContent) || '';
const id = h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}-${index}`);
6 إعجابات