جدول محتویات می‌تواند تجربه کاربری بسیاری از وبسایت‌ها، برای مثال وبسایت‌های مستندات یا دایره المعارف آنلاین به مانند ویکی‌پدیا را به خوبی ارتقا دهد. یک جدول محتویات که به خوبی طراحی شده باشد، یک بررسی اجمالی از صفحه به کاربران می‌دهد و به آنها کمک می‌کند تا به بخشی که به آن علاقه دارند، جهت‌یابی کنند.
به طور سنتی شما میتوانید جدول محتویات را با یا با استفاده از HTML، و یا با استفاده از JavaScript بسازید، اما اخیرا slotهای HTML استانداردسازی شده، یک راه میانی بین این دو را فراهم می‌کنند. HTML Slot یک استاندارد وب است که شما را قادر می‌سازد تا یک جانگهدار در یک صفحه وب اضافه کنید و آن را به صورت دینامیک، با محتویات پر کنید.
چه زمانی از تگ <slot> استفاده کنیم؟
شما میتوانید تگ‌های <slot> را در جدول محتویات داخل فایل HTML خود قرار دهید، تا این slotها بعدا بتوانند با عنوان‌ها و زیر عنوان‌های مربوطه پر شوند. وقتی که عنوان‌ها تغییر می‌کنند، slotها به صورت خودکار بروزرسانی می‌شوند.
با این فن، شما باید به صورت دستی سورس کد HTML جدول محتویات را بسازید. JavaScript فقط محتویات متنی جدول محتویات را بر پایه عنوان‌ها و زیر عنوان‌های موجود بر روی صفحه به صورت خودکار می‌سازد.
اگر نمی‌خواهید جدول محتویات شما در HTML شما حاضر باشد، باید هم طرح و هم محتویات آن را با استفاده از JavaScript ایجاد کنید.
۱. HTML مربوطه را بسازید
سورس کد HTML مربوط به جدول محتویات، داخل یک تگ <template> خواهد بود. کد داخل <template> تا زمانی که توسط JavaScript به سند مورد نظر اضافه شود، رندر نمی‌شود. جدول محتویات، جانگهدارهایی برای تمام عنوان‌ها و زیر عنوان‌ها خواهد داشت که داخل تگ‌های <slot> نگه داشته می‌شوند.
صفت name مربوط به هر <slot>، مقدار مشابه به صفت slot را در عنوان‌ها و زیر عنوان‌های متناظر خواهد داشت.
در اینجا، میتوانید یک مقاله (<article>) نمونه HTML با برخی عنوان‌ها و زیر عنوان‌ها را ببینید. <div> موجود در ابتدا، جایی است که ما جدول محتویات به صورت خودکار پر شده را وارد می‌کنیم.
<div id='toc'></div>
<article>
<p>Velociraptor (meaning "swift seizer" in Latin) is a …</p>
<h2 slot='h-1'>Description</h2>
<p>Velociraptor was a mid-sized dromaeosaurid, with adults …</p>
<h3 slot='sh-1-1'>Feathers</h3>
<p>Fossils of dromaeosaurids more primitive than …</p >
<h2 slot='h-2'>History of discovery</h2>
<p>During an American Museum of Natural History expedition …</p>
<h2 slot='h-3'>Classification</h2>
<p>Velociraptor is a member of the group Eudromaeosauria, a derived sub-group of …</p>
<h2 slot='h-4'>Paleobiology</h2>
<p>The "Fighting Dinosaurs" specimen, found in 1971, preserves a …</p>
<h3 slot='sh-4-1'>Scavenging behavior</h3>
<p>In 2010, Hone and colleagues published a paper on …</p>
<h3 slot='sh-4-2'>Metabolism</h3>
<p>Velociraptor was warm-blooded to some degree, as it required a …</p>
<h3 slot='sh-4-3'>Pathology</h3>
<p>One Velociratoptor mongoliensis skull bears two parallel …</p>
</article>
همانطور که میتوانید ببینید، هر عنوان یک مقدار slot به خصوص دارد.
و در اینجا کد HTML مربوط به جدول محتویات را داخل یک تگ <template> مشاهده می‌نمایید.
<template>
<ul>
<li>
<slot name='h-1'></slot>
<ul>
<li><slot name='sh-1-1'></slot></li>
</ul>
</li>
<li><slot name='h-2'></slot></li>
<li><slot name='h-3'></slot></li>
<li>
<slot name='h-4'></slot>
<ul>
<li><slot name='sh-4-1'></slot></li>
<li><slot name='sh-4-2'></slot></li>
<li><slot name='sh-4-3'></slot></li>
</ul>
</li>
</ul>
<style>
ul {
list-style: none;
}
/* … */
</style>
</template>
در دو قطعه کد بالا، به صفات slot و name مطابق در عنوان‌ها و تگ‌های <slot> دقت کنید.
۲. عنوان‌ها را شماره‌گذاری کنید
قبل از این که به کد JavaScript که جدول محتویات را از <template> موجود در سند اضافه می‌کند نگاه داشته باشیم، بیایید با استفاده از شمارنده‌های CSS یک سری عدد برای عنوان‌ها اضافه کنیم.
article {
counter-reset: heading;
}
article h2::before {
counter-increment: heading;
content: '0'counter(heading)': ';
}
مطمئن شوید که قانون counter-reset به عنصری که والد تمام عنوان‌های حامل صفت slot می‌باشد (که در کد ما عنصر <article> است)، تعلق دارد.
در صورتی که می‌خواهید بیشتر درباره شمارنده‌های CSS بدانید، به این مقاله هم نگاهی داشته باشید:
۳. جدول محتویات را به سند مربوطه وارد کنید
حال به اسکریپتی که جدول محتویات بالای تگ <article> را به محفظه <div id=’toc’></div> اضافه خواهد کرد، نگاه خواهیم داشت.
templateContent = document.querySelector('template').content;
article = document.querySelector('article').cloneNode(true);
article.attachShadow({ mode: 'closed' }).appendChild(templateContent.cloneNode(true));
document.querySelector('#toc').appendChild(article);
قطعه کد بالا یک کپی از تگ <article> می‌سازد و یک ساختار درختی Shadow DOM را به آن متصل می‌کند. ما همچنین یک کپی از محتویات <template> را به این ساختار درختی Shadow DOM اضافه خواهیم کرد.
سپس <article> کپی شده، به عنصر <div if=’toc’> اضافه می‌شود. حال عنصر <article> در جدول محتویات هم حاضر است، گرچه فقط عنوان‌ها و زیر عنوان‌هایی که یک جانگهدار را داخل جدول محتویات یافته‌اند، قابل رویت هستند.
اگر ما شمارنده CSS را در به جای article در عناصر body یا html بازنشانی کنیم، این شمارنده لیست عنوان‌های داخل جدول محتویات را هم خواهد شمرد. به همین علت است که باید شمارنده‌ها را در والد اولیه عنوان‌ها بازنشانی کنید.
در اینجا یک اسکرین‌شات از خروجی نهایی را مشاهده می‌نمایید:
۴. hyperlinkها را اضافه کنید
اگر می‌خواهید عنوان‌های جدول محتویات را با اضافه کردن id به عنوان‌ها و لنگر کردن متن جدول محتویات متناظر آنها، به عنوان‌ها و زیر عنوان‌های مربوطه لینک کنید، باید مقادیر id مربوطه را از article کپی شده حذف کنید.
<div id='toc'></div>
<article>
<p>Velociraptor (meaning "swift seizer" in Latin) is a …</p>
<h2 id='h-1' slot='h-1'>Description</h2>
<p>Velociraptor was a mid-sized dromaeosaurid, with adults …</p>
<h3 id='sh-1-1' slot='sh-1-1'>Feathers</h3>
<p>Fossils of dromaeosaurids more primitive than …</p >
<!-- ... -->
</article>
همانطور که میتوانید در بالا ببینید، صفت id به تمام عنوان‌ها و زیر عنوان‌های مقاله اضافه شده است.
و عنوان‌های داخل جدول محتویات هم لنگر شده‌اند:
<template>
<ul>
<li>
<a href='#h-1'><slot name='h-1'></slot></a>
<ul>
<a href='#sh-1-1'><li><slot name='sh-1-1'></slot></li></a>
</ul>
</li>
<!-- ... -->
</ul>
</template>
در خط اضافی بالا، تمام صفت‌های id قبل از متصل کردن ساختار درختی Shadow DOM به article کپی شده، از آن حذف شده‌اند.
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('#toc').appendChild(article);
در اینجا میتوانید اسکرین‌شات مربوط به جدول محتویات لینک شده را ببینید:
دموی گیتهاب
شما میتوانید کد مربوط به این مقاله را در مخزن گیتهاب آن مشاهده کرده، و دانلود کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید