كيفية إنشاء جدول المحتويات تلقائيًا باستخدام فتحات HTML
جدول المحتويات يمكن أن تحسن كثيرا من تجربة المستخدم للعديد من المواقع ، على سبيل المثال مواقع التوثيق أو الموسوعات عبر الإنترنت مثل ويكيبيديا. جدول محتويات جيد التصميم يعطي لمحة عامة عن الصفحة ويساعد المستخدمين على الانتقال بسرعة إلى القسم الذي يهتمون به.
بشكل تقليدي ، يمكنك إنشاء جدول محتويات إما بتنسيق HTML أو JavaScript ، ولكن فتحات HTML القياسية مؤخرًا توفر الطريق الوسط بين الاثنين. فتحة HTML هو معيار الويب الذي يسمح لك إضافة العناصر النائبة إلى صفحة ويب و لاحقا املأه بمحتوى ديناميكي.
متى استخدام
يمكنك وضع
باستخدام هذه التقنية ، تحتاج إلى إنشاء شفرة مصدر HTML لجدول المحتويات يدويًا. يقوم JavaScript تلقائيًا بإنشاء المحتوى النصي لجدول المحتويات, بناءً على العناوين أو العناوين الفرعية في الصفحة.
إذا كنت لا تريد أن يكون جدول المحتويات موجودًا في HTML ، فستحتاج إلى ذلك إنشاء كل من التخطيط والمحتوى باستخدام JavaScript.
1. إنشاء HTML
كود مصدر HTML لـ TOC (جدول المحتويات) سيكون داخل بطاقة. رمز الداخل لا يتم تقديمه حتى تتم إضافته إلى المستند بواسطة JavaScript. سيكون لدينا TOC النائبة, عقدت في
ال اسم سمة من كل فتحة السمة في العناوين والعناوين الفرعية المقابلة لها في الوثيقة.
أدناه ، يمكنك رؤية عينة HTML فيلوسيرابتور (يعني "صاعق سريع" في اللاتينية) هو ... كان فيلوسيرابتور dromaeosaurid متوسطة الحجم ، مع البالغين ... حفريات dromaeosaurids بدائية أكثر من ... خلال رحلة المتحف الأمريكي للتاريخ الطبيعي ... فيلوسيرابتور هي عضو في مجموعة Eudromaeosauria ، وهي مجموعة فرعية مشتقة من ... عينة "قتال الديناصورات" ، التي تم العثور عليها في عام 1971 ، تحافظ على ... في عام 2010 ، نشر هون وزملاؤه ورقة عن ... كان فيلوسيرابتور دافئًا إلى حد ما ، حيث كان يتطلب ... إحدى جماجم Velociratoptor mongoliensis تحمل اثنين متوازيين ... كما ترون ، كل عنوان هو نظرا فريدة من نوعها و هنا ال كود HTML من جدول المحتويات, داخل في مقتطفين من الكود أعلاه ، لاحظ مطابقة قبل البحث في شفرة JavaScript التي ستضيف جدول المحتويات من تأكد من أن الآن ، نضيف البرنامج النصي ذلك إدراج جدول المحتويات أعلاه مقتطف الشفرة أعلاه يخلق نسخة من ثم ، المستنسخة إذا أردنا إعادة تعيين عداد CSS في هنا لقطة من الإخراج: أذا أردت ربط عناوين TOC بالعناوين والعناوين الفرعية الخاصة بكل منها بإضافة فيلوسيرابتور (يعني "صاعق سريع" في اللاتينية) هو ... كان فيلوسيرابتور dromaeosaurid متوسطة الحجم ، مع البالغين ... حفريات dromaeosaurids بدائية أكثر من ... كما ترون أعلاه ، فإن و ال ترتكز العناوين داخل جدول المحتويات: في خط إضافي أعلاه ، كل شيء رؤية لقطة من جدول محتويات مرتبط أدناه: يمكنك التحقق من الكود المستخدم في هذا المنشور أو تنزيله أو تفرعه من Github Repo. مع بعض العناوين والعناوين الفرعية. ال
وصف
الريش
تاريخ الاكتشاف
تصنيف
Paleobiology
سلوك الكسح
التمثيل الغذائي
علم الأمراض
فتحة القيمة. بطاقة.
فتحة و اسم سمات داخل العناوين و 2. رقم العناوين
إلى المستند ، دعنا إضافة الأرقام التسلسلية للعناوين ، باستخدام عدادات CSS. مقالة counter-reset: title؛ المقالة h2 :: قبل counter-increment: العنوان؛ المحتوى: '0'counter (عنوان)': '؛
إعادة تعيين العداد حكم ينتمي إلى العنصر الذي هو الوالد المباشر لجميع الألقاب التي تحمل فتحة صفة، عزا (وهو عنصر في الكود لدينا).3. أدخل جدول المحتويات في المستند
بطاقة, داخل ال حاوية. templateContent = document.querySelector ('template'). content؛ article = document.querySelector ('article'). cloneNode (true)؛ article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true))؛ document.querySelector ( '# توك') appendChild (المادة)؛ و بإرفاق شجرة DOM الظل إليها. نحن أيضا أضف نسخة من محتوى إلى شجرة الظل هذه دوم. يتم إدراجها في العنصر هو موجودة الآن في جدول المحتويات كذلك, ومع ذلك ، تكون عناوينها وعناوينها الفرعية التي عثرت على عنصر نائب داخل جدول المحتويات مرئية فقط. الجسم أو أتش تي أم أل عنصر بدلا من مقالة - سلعة, سيكون العداد حساب قائمة العناوين داخل جدول المحتويات كذلك. لهذا السبب يجب عليك إعادة تعيين العدادات عند الأصل المباشر للعناوين.
4. إضافة الارتباطات التشعبية
هوية شخصية إلى العناوين وترسيخ نص جدول المحتويات المناظرة ، سوف تضطر إلى إزالة المتكررة هوية شخصية القيم من المستنسخة مقالة - سلعة.
وصف
الريش
هوية شخصية السمة هي إضافة إلى كل عنوان وعنوان فرعي في المقالة.
هوية شخصية سمات هي إزالتها من المادة المستنسخة قبل إرفاق شجرة الظل الظل إليها. templateContent = document.querySelector ('template'). content؛ article = document.querySelector ('article'). cloneNode (true)؛ article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'Closed'). appendChild (templateContent.cloneNode (true ))؛ document.querySelector ( '# توك') appendChild (المادة)؛ 
جيثب التجريبي
