كود المواضيع المماثلة بتصميم مثل منتديات الفي بي

كود جيفري

كود جيفري

عضو جديد
عضو انكور
قائمة المواضيع المماثلة أسفل الموضوع من أهم الوسائل التي تبقي الزائر داخل المنتدى لفترة أطول، إذ تقترح عليه محتوى قريبًا مما يقرؤه. لكن شكلها الافتراضي في كثير من النسخ يبدو باهتًا ولا يلفت الانتباه. هذا الكود يعيد تصميم قسم المواضيع المماثلة ليصبح شبيهًا بما نراه في منتديات الفي بي، بجدول منظم ومتجاوب مع الشاشات المختلفة وعرض أوضح للمعلومات، مما يشجع القارئ على التنقل بين المواضيع. ويعمل الكود بشكل سليم ما لم يكن قالب المواضيع قد عُدّل بشكل كبير.

مثال على الكود​

شكل المواضيع المماثلة الافتراضي قبل تركيب الكود


المواضيع المماثلة بتصميم منظم مثل منتديات الفي بي بعد تركيب الكود


شرح تركيب الكود​

كود CSS
لوحة الإدارة ← مظهر المنتدى ← الصور والألوان ← ورقة تصميم CSS

CSS:
/* جعل الجدول مستجيباً */
.dataList-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* مهم: لا تجعل الأعمدة متساوية */
}

/* نجعل عمود كاتب الموضوع يأخذ أقل عرض ممكن */
.dataList-cell.author-column {
  width: 1%;
  white-space: nowrap;
}

  /* تحويل الجدول إلى عرض قائمة عند الشاشات الصغيرة */
@media (max-width: 768px) {
  .dataList-table {
    overflow-x: auto;
    white-space: nowrap;
  }
   .dataList-cell {
    display: block;
    width: 100%;
  }

  .dataList-row {
    display: block;
    margin-bottom: 10px;
    border-bottom: solid #857f7f;
  }

  .dataList-row td {
    display: block;
    text-align: right;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  .dataList-row td:first-child {
    padding-top: 16px;
  }
  
  /* عرض العناوين في الشاشات الصغيرة داخل الخلايا */
  .dataList-row td::before {
    content: attr(data-title);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }
  th.dataList-cell {
    display: none;
}
}

th.dataList-cell {
    background: #252526;
    text-align: right;
    padding: 5px;
    color: aliceblue;
}
th.dataList-cell {
    background: #252526;
    text-align: right;
    padding: 5px;
    color: aliceblue;
}
.dataList-table {
  width: 100%;
  border-collapse: collapse;
}
.dataList-cell {
    padding: 3px;
    border-bottom: 1px solid #ddd;
    text-align: right;
    vertical-align: middle;
    white-space: normal;
    background: #f9f9f9;
}
.dataList-row--header {
  background-color: #f5f5f5;
  font-weight: bold;
}
.avatar--xs {
  border-radius: 50%;
}
.dataList.similarthreads-datalist {
    margin-bottom: 22px;
    border: solid 1px #8b8686;
}
div#ptrafic_open {
    display: none;
}
.conan2000-datalist {
    background: #1E88E5;
    padding: 5px;
    color: #f9f9f9;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

كود Javascript
لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript
العنوان: اختيارك
الصلاحيات: اختيارك
أضف الكود إلى: المواضيع
لنسخة AwesomeBB

JavaScript:
$(document).ready(function () {
  // حفظ روابط المواضيع المماثلة بالترتيب
  const links = $('.block-content.ptrafic a').map(function () {
    return {
      url: $(this).attr('href'),
      title: $(this).clone().children('i').remove().end().text().trim()
    };
  }).get();

  const results = new Array(links.length);
  let completed = 0;

  links.forEach(function (link, index) {
    $.get(link.url, function (data) {
      const authorName = $(data).find('span.post-author-name').first().text().trim();
      const authorImg = $(data).find('.avatar-big img').first().attr('src');
      const postDate = $(data).find('span.post-date').first().text().trim();

      results[index] = {
        authorName,
        authorImg,
        postDate,
        title: link.title,
        url: link.url
      };

      completed++;

      // بعد اكتمال جميع الطلبات، نبني الجدول
      if (completed === links.length) {
        const $tableWrapper = $(`<div class="conan2000-datalist">${'المواضيع   المماثلة'.replace(/\s+/g, ' ')}</div>
          <div class="dataList similarthreads-datalist">
            <table class="dataList-table">
              <tbody>
                <tr class="dataList-row dataList-row--header dataList-row--noHover">
                  <th class="dataList-cell">${'كاتب   الموضوع'.replace(/\s+/g, ' ')}</th>
                  <th class="dataList-cell">العنوان</th>
                  <th class="dataList-cell">التاريخ</th>
                </tr>
              </tbody>
            </table>
          </div>
        `);

        results.forEach(function (item) {
          const $row = $(`
            <tr class="dataList-row dataList-row--noHover">
              <td class="dataList-cell" data-title="${'كاتب   الموضوع'.replace(/\s+/g, ' ')}">
                <div style="display: flex; align-items: center; gap: 8px;">
                  <img src="${item.authorImg}" alt="${item.authorName}" class="avatar avatar--xs" width="48" height="48" loading="lazy" style="border-radius:50%;">
                  <span class="author-name">${item.authorName}</span>
                </div>
              </td>
              <td class="dataList-cell" data-title="العنوان">
                <a href="${item.url}">${item.title}</a>
              </td>
              <td class="dataList-cell" data-title="التاريخ">
                <time class="u-dt">${item.postDate}</time>
              </td>
            </tr>
          `);

          $tableWrapper.find('table tbody').append($row);
        });

        // استبدال قسم "مواضيع مماثلة" بالجدول الجديد
        $('.block.block-ptrafic').replaceWith($tableWrapper);
      }
    });
  });
});

كود Javascript
لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript
العنوان: اختيارك
الصلاحيات: اختيارك
أضف الكود إلى: المواضيع
لنسخة ModernBB

JavaScript:
$(document).ready(function () {
  // حفظ روابط المواضيع المماثلة بالترتيب
  const links = $('.ptrafic li a').map(function () {
    return {
      url: $(this).attr('href'),
      title: $(this).attr('title')
    };
  }).get();

  const results = new Array(links.length);
  let completed = 0;

  links.forEach(function (link, index) {
    $.get(link.url, function (data) {
      const authorName = $(data).find('.postprofile-name').first().text().trim();
      const authorImg = $(data).find('.postprofile-avatar img').first().attr('src');
      const postDate = $(data).find('.topic-date').first().text().trim();

      results[index] = {
        authorName,
        authorImg,
        postDate,
        title: link.title,
        url: link.url
      };

      completed++;

      // بعد اكتمال جميع الطلبات، نبني الجدول
      if (completed === links.length) {
        const $tableWrapper = $(`<div class="conan2000-datalist">${'المواضيع   المماثلة'.replace(/\s+/g, ' ')}</div>
          <div class="dataList similarthreads-datalist">
            <table class="dataList-table">
              <tbody>
                <tr class="dataList-row dataList-row--header dataList-row--noHover">
                  <th class="dataList-cell">${'كاتب   الموضوع'.replace(/\s+/g, ' ')}</th>
                  <th class="dataList-cell">العنوان</th>
                  <th class="dataList-cell">التاريخ</th>
                </tr>
              </tbody>
            </table>
          </div>
        `);

        results.forEach(function (item) {
          const $row = $(`
            <tr class="dataList-row dataList-row--noHover">
              <td class="dataList-cell" data-title="${'كاتب   الموضوع'.replace(/\s+/g, ' ')}">
                <div style="display: flex; align-items: center; gap: 8px;">
                  <img src="${item.authorImg}" alt="${item.authorName}" class="avatar avatar--xs" width="48" height="48" loading="lazy" style="border-radius:50%;">
                  <span class="author-name">${item.authorName}</span>
                </div>
              </td>
              <td class="dataList-cell" data-title="العنوان">
                <a href="${item.url}">${item.title}</a>
              </td>
              <td class="dataList-cell" data-title="التاريخ">
                <time class="u-dt">${item.postDate}</time>
              </td>
            </tr>
          `);

          $tableWrapper.find('table tbody').append($row);
        });

        // استبدال قسم "مواضيع مماثلة" بالجدول الجديد
        $('#ptrafic_open').replaceWith($tableWrapper);
      }
    });
  });
});

ثم اضغط على زر قدم.

تحسين بصري بسيط يرفع من عدد الصفحات التي يتصفحها الزائر ويمنح المنتدى مظهرًا أكثر احترافية. الشكر لصاحب الكود على هذا العمل الذي طوّره بالاستعانة بالذكاء الاصطناعي.

صاحب الكود: كونان2000
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.

رأيك جزء من المعرفة.

أضف تجربتك أو سؤالك، فالنقاش يكمل الفكرة.

في هذا الموضوع

صاحب النقاش

كود جيفري
كود جيفريعضو جديد

معرفة تكبر بالنقاش

وجدت معلومة مفيدة؟ أضف تجربتك أو سؤالك ليساعد النقاش أعضاء آخرين.

أكمل رحلتك

كود يخفي أي جزء من المساهمة عن الزواركود الروابط أو الزيارات الأخيرة في المنتدىتمييز المساهمات حسب الجهاز (الهواتف والكمبيوترات)
عودة
أعلى