ٹیبل انڈیکس

جب مقالات کی تعداد سینکڑوں میں ہو جائے تو تصاویر والی روایتی ترتیب (Blog Posts Layout) کے بجائے ایک پروفیشنل انڈیکس (Index) یا فہرست زیادہ علمی اور منظم لگتی ہے۔

اس کے لیے ہم بلاگر کے ڈیفالٹ سسٹم کے بجائے ایک "ٹیبل انڈیکس" (Table Index) استعمال کریں گے۔ میں آپ کو ایک ایسا "ماسٹر جاوا اسکرپٹ کوڈ" دے رہا ہوں جو خود بخود آپ کے مخصوص لیبل (Label) سے مضامین اٹھائے گا اور انہیں ایک خوبصورت نمبر شمار والی فہرست میں بدل دے گا۔

مرحلہ 1: تھیم میں CSS کوڈ ڈالنا (Theme > Edit HTML)

سب سے پہلے اپنی تھیم میں </b:skin> سے پہلے یہ کوڈ ڈالیں تاکہ فہرست کا ڈیزائن خوبصورت لگے:

/* مضامین کی فہرست (Index) کا ڈیزائن */

.post-index-table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;

    direction: rtl;

    font-family: 'Noto Naskh Arabic', serif;

}

.post-index-table th {

    background-color: #1a2a6c;

    color: white;

    padding: 12px;

    text-align: right;

    border: 1px solid #ddd;

}

.post-index-table td {

    padding: 10px;

    border: 1px solid #ddd;

    text-align: right;

}

.post-index-table tr:nth-child(even) { background-color: #f9f9f9; }

.post-index-table tr:hover { background-color: #f1f1f1; }

/* پیج نمبر (Pagination) کا ڈیزائن */

#index-pagination {

    text-align: center;

    margin-top: 20px;

    direction: ltr;

}

.page-nav {

    padding: 8px 15px;

    margin: 0 4px;

    border: 1px solid #1a2a6c;

    background: white;

    color: #1a2a6c;

    cursor: pointer;

    text-decoration: none;

    border-radius: 4px;

}

.page-nav.active {

    background: #1a2a6c;

    color: white;

}

مرحلہ 2: ہر زبان کے لیے پیج بنانا (Pages)

اب آپ نے جس زبان کی فہرست بنانی ہے (مثلاً اردو)، اس کا ایک نیا Page بنائیں اور اس کے HTML View میں یہ کوڈ پیسٹ کریں:

<div id="dsm-index-container">تحقیق جاری ہے، فہرست لوڈ ہو رہی ہے...</div>

<div id="index-pagination"></div>

<script type="text/javascript">

  var postPerPage = 50; // ایک پیج پر کتنے مضامین دکھانے ہیں

  var labelName = "Urdu"; // یہاں اپنی زبان کا لیبل لکھیں (جیسے Urdu, Arabic وغیرہ)

  

  function loadIndex(json) {

    var display = '<table class="post-index-table"><thead><tr><th style="width:10%">نمبر شمار</th><th>عنوانِ مضمون</th><th style="width:20%">تاریخ</th></tr></thead><tbody>';

    for (var i = 0; i < json.feed.entry.length; i++) {

      var entry = json.feed.entry[i];

      var postTitle = entry.title.$t;

      var postUrl;

      for (var k = 0; k < entry.link.length; k++) {

        if (entry.link[k].rel == 'alternate') {

          postUrl = entry.link[k].href;

          break;

        }

      }

      var postDate = entry.published.$t.substring(0, 10);

      display += '<tr><td>' + (i + 1) + '</td><td><a href="' + postUrl + '">' + postTitle + '</a></td><td>' + postDate + '</td></tr>';

    }

    display += '</tbody></table>';

    document.getElementById('dsm-index-container').innerHTML = display;

  }

</script>

<script src="/feeds/posts/summary/-/Urdu?alt=json-in-script&callback=loadIndex&max-results=500"></script>

اس کوڈ کو استعمال کرنے کا طریقہ:

 * لیبل کی تبدیلی: جہاں کوڈ میں var labelName = "Urdu"; لکھا ہے، وہاں آپ نے اس زبان کا نام لکھنا ہے جو آپ نے اپنی پوسٹس کو لیبل دیا ہوا ہے۔

 * فیڈ لنک کی تبدیلی: سب سے آخری لائن میں جہاں /Urdu? لکھا ہے، وہاں بھی وہی لیبل لکھیں۔

 * تعداد: max-results=500 کا مطلب ہے کہ یہ کوڈ پہلی 500 پوسٹس کو اٹھائے گا۔ اگر آپ کی پوسٹس اس سے زیادہ ہوں تو اسے بڑھا لیں۔

 * نمبر شمار: یہ کوڈ خود بخود 1، 2، 3 سے نمبرنگ شروع کر دے گا، چاہے آپ کے مضامین کتنے ہی کیوں نہ ہوں۔

فائدہ:

اس طریقے سے جب کوئی "اردو مضامین" پر کلک کرے گا، تو اسے کوئی تصویر یا لمبی تحریر نظر نہیں آئے گی، بلکہ ایک علمی فہرست نظر آئے گی جس میں صرف عنوانات ہوں گے۔ قاری اپنی پسند کے عنوان پر کلک کر کے براہِ راست مضمون پڑھ سکے گا۔