امکان لینک دهی درون پستی وبلاگ

اگر طی چند سال اخیر به عادت‌ خوانندگان وب دقت کرده باشید، متوجه کم میلی خوانندگان به مطالب طولانی و بلند شده اید و یکی از دلایل اصلی این کم میلی، عدم توجه نویسندگان و به خصوص ما وبلاگنویس‌ها به موضوع مدیریت درست مطلب است. وبلاگ‌ها معمولا برای نوشتن مطالب طولانی و بررسی‌های تکمیلی شناخته می‌شوند و اگر به وبلاگ‌های فاخر و با محتوا نگاه کنید متوجه این موضوع می‌شوید، اما راه حل مدیریت مطالب طولانی و بلند چیست؟

وقتی بحث از نوشته و نوشتار می‌شود ناخودآگاه به یاد کتاب‌ها و روزنامه‌ها شاید بیافتیم. و با نگاهی ساده به آن‌ها به راحتی می‌توانیم به روش کارآمد بخش‌بندی و فصل‌بندی برای مدیریت محتوا پی ببریم. اما یک وبلاگ و یک پست که در حالت عادی تنها یک صفحه است را چگونه می‌توان بخش‌بندی کرد؟

استفاده از عناوین و سرنویس‌ها

یکی از بهترین روش‌ها برای تقسیم یک پست طولانی، استفاده مناسب از عناوین و سرنویس‌ها است. در این روش شما به یک یا چند پاراگراف با مضمون مرتبط، عنوانی را اختصاص می‌دهید که پیام محتوای زیرین خود را در قالب چند کلمه به خواننده می‌رساند. هر چه عنوان‌ها قابل فهم‌تر و ساده‌تر باشند به درک خواننده از مطلب، کمک بیشتری می‌کند. همچنین عنوان‌های یک مطلب همچون یک کتاب به امکان فهرست‌بندی پست هم می‌توانند کمک کنند تا خواننده با تنها نگاه به فهرست پست به کلیات محتوای پست اشراف پیدا کرده و نه تنها مقدمه‌ و انگیزه‌ای برای مطالعه پست پیدا کند بلکه به صورت مستقیم بتواند به قسمت مورد نظر خود برسد.

چالش‌های عنوان‌بندی مطلب برای من

خیلی از مواقع پیش می‌آمد که می‌خواسته‌ام قسمت خاصی از پست خود را با یکی از دوستانم به اشتراک بگذارم. به عنوان مثال می‌خواسته‌ام «بازی نام»  را که در پست «بازی‌های متنی مناسب چت و چت‌روم‌ها» نوشته ام برای دوستی توضیح دهم و بهترین کار اشتراک آن پست با دوستم بود. اما دوستم می‌بایست قسمت قابل توجهی از پست را طی می‌کرد تا به این عنوان می‌رسید و اینجا بود که احساس نیاز وجود سیستم لینک‌دهی درون پستی را حس کردم.

همچنین برای ساخت فهرستی از عناوین یک پست نیاز به وجود لینک‌هایی برای ارجاع به قسمت خاصی از پست بود تا خواننده‌ به صورت مستقیم و بدون نیاز به اسکرول کردن صفحه به عنوان مورد نظرش برسد.

اما برای ایجاد یک چنین سیستمی می‌بایست به تمامی عناوین پست‌ها به صورت تک به تک صفت id را نامگذاری و اضافه می‌کردم که عملا چنین کاری برایم مقدور نبود، چرا که تعداد پست‌ها و همچنین تعداد عناوین هر پست بسیار بود و انجام این عملیات به صورت یکه هم وقت‌گیر بود. پس تصمیم به استفاده از زبان برنامه‌نویسی جاواسکریپت برای حل این مشکل گرفتم.

راه من برای حل چالش لینک‌دهی

سرنویس‌هایی که ما در ویرایشگر متن وبلاگ‌هایمان از آن‌ها استفاده می‌کنیم در حقیقت تگ‌های h1 تا h6 زبان HTML هستند. در وبلاگ آسمانم، بنده از تگ h1 برای عنوان اصلی مطلب و همچنین از تگ h2 برای عناوین لیست پستها استفاده می‌کنم، پس این دو تگ بخشی از پست‌های من نخواهند بود. تگ‌های دیگری که می‌ماند تگ‌های h3 و h4 و h5 هستد که به دلیل عدم استفاده از تگ h6 در هیچ کدام از پست‌هایم آن‌ را نیز حذف کردم. و خروجی کارم را در قالب کد زیر نوشتم:

<script>
  // Capture All hn tags of post content
  let headers = document.querySelectorAll('h3, h4, h5, h6');

  // Loop through all hn tags and add id attribute
  for (let i = 0; i < headers.length; i++) {
    headers[i].setAttribute('id', 'title-' + i);
  }


  // Capture hn's after the loop again
  let headerss = document.querySelectorAll('h3, h4, h5, h6');

  // Loop through captured tags and Create an a element
  // then replace them with it's inner html
  for (let j = 0; j < headers.length; j++) {
    let isame = headerss[j].getAttribute('id');
    let kisame = document.createElement('a');
    kisame.setAttribute('href', '#' + isame);
    kisame.innerHTML = headerss[j].innerHTML;
    headerss[j].innerHTML = kisame.outerHTML;
  }
</script>

چگونه از این کد استفاده کنیم؟

تنها کافی است که این کد جاواسکریپت را به انتهای فایل ساختار قالب وبلاگتان قبل از تگ بسته‌ی html اضافه کنید تا تمامی سرنویس‌های ۳ تا ۶ مطالب وبلاگتان دارای لینک شوند و قابلیت لینک‌دهی به عناوین پست خود را به دست آورید.

این کد چگونه کار می‌کند؟

این کد به صورت خودکار تگ‌های h3 تا h6 وبلاگ شما را جمع آوری می‌کند و در قالب حلقه‌هایی به تک تک آنها صفت id را اضافه کرده و سپس محتوای درون این تگ‌ها را لینک‌دار می‌کند.

همکاری و همفکری

اگر پیشنهادی برای بهبود این امکان دارید یا راه حل دیگری برای حل این چالش دارید می‌توانید در ادامه و از طریق فرم ارسال کامنت، نظرتان را با وبلاگنویسان دیگر در میان بگذارید و همچنین اگر برنامه نویس هستید می‌توانید از طریق گیتهاب آسمانم، مخزن جعبه ابزار به بهبود و گسترش این امکان کمک کنید.