إضافة صفحة فهرس في مدونة بلوجر – صفحة أرشيف احترافية

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

في هذا المقال، سنتعرف على كيفية إضافة صفحة فهرس احترافية في مدونة بلوجر لتحسين تنظيم المدونة وزيادة سهولة الوصول إلى المحتوى.

لماذا تحتاج إلى صفحة فهرس؟

تعد صفحه الفهرس أو الأرشيف مهمة جدا لمدونات بلوجر حيث تقوم بعرض كل مقالاتك علي المدونه بشكل مبسط وسهل، كما أنها تساعد محركات البحث في فهرسة الصفحات بشكل أسرع وأكثر دقة. من خلال توفير خريطة شاملة للموقع، أحيانآ تكون هذه الصفحه هي الأداة المساعدة في تحسين تصنيف الموقع على محركات البحث.

معاينة صفحة الأرشيف

يمكنك معاينة صفحة أرشيف المقالات من خلال الرابط التالي، حيث ستظهر لك جميع التدوينات مرتبة بطريقة أنيقة مع إمكانية التصفية والبحث بسهولة:

مميزات صفحة الفهرس

إضافة صفحة فهرس أو أرشيف في مدونة بلوجر توفر العديد من المزايا التي تحسن من تجربة المستخدم وتساعد في إدارة المحتوى بشكل فعال. إليك أبرز مميزات صفحة الفهرس:

أبرز مميزات صفحة الأرشيف

• عرض المقالات بشكل جذاب: المقالات تظهر بتنسيق شبكة (grid) مع صور مصغرة، مما يجعل التصفح أكثر سهولة وراحة. المقالات معروضة في بطاقات أنيقة تحتوي على صورة، عنوان، وتاريخ النشر مع تصنيف المقال.
• فلترة المقالات حسب التصنيف: يمكن للمستخدمين تصفح المقالات حسب الفئات المحددة مسبقًا مثل "قوالب بلوجر"، "إضافات بلوجر"، "شروحات تقنية"، "تطبيقات وبرامج"، و"الربح من الانترنت". هذا يعزز من تنظيم المحتوى ويسهل على الزوار العثور على المقالات ذات الصلة بالفئة التي تهمهم.
• تحميل الصور بشكل كسول (Lazy Load): يتم تحميل الصور بشكل كسول عند الحاجة فقط، مما يساعد في تحسين سرعة تحميل الصفحة وتجربة المستخدم. الصور لا تُحمّل إلا عندما تكون في مجال العرض، مما يوفر البيانات ويقلل من الوقت المستغرق لتحميل الصفحة.
• تحسين SEO: تنظيم المقالات بشكل واضح مع تصنيفات مختلفة يسهل على محركات البحث مثل جوجل فهرسة المدونة بشكل أفضل، مما يساعد في تحسين ترتيب المدونة في نتائج البحث.
• بحث ذكي داخل المقالات: الكود يتيح للمستخدمين البحث عن المقالات بسهولة باستخدام مربع البحث. عندما يكتب الزائر نصًا في خانة البحث، يتم تحديث النتائج بشكل فوري وفقًا للكلمات المدخلة، مما يسهل الوصول إلى المحتوى المطلوب بسرعة.
• دعم التنقل السهل بين المقالات: بمجرد تحميل المزيد من المقالات، يتم عرضها بشكل مستمر مع الحفاظ على تنسيق الصفحة مما يعزز من سلاسة التنقل بين المحتوى.

إضافة صفحة الفهرس لمدونات بلوجر

يمكنك إضافة صفحة فهرس في مدونة بلوجر عن طريق إنشاء صفحة جديدة داخل لوحة تحكم بلوجر واستخدام أكواد HTML وCSS لإظهار المقالات بشكل مرتب وجميل. إليك الخطوات التي يجب اتباعها:

1. قم بالدخول إلى لوحة تحكم مدونتك
2. من القائمة الجانبية، اذهب إلى الصفحات
3. اضغط على "صفحة جديدة" (New Page). 
4. أعطِ الصفحة عنوانًا مثل "الفهرس" أو "الأرشيف".
5. أضف أكواد HTML التالية لعرض المقالات:

HTML Code

<div id="smartPosts" class="toc-container">
  <div class="toc-controls">
    <input type="text" id="searchPosts" placeholder="ابحث عن مقال..." />
    <select id="filterLabel">
      <option value="">كل الأقسام</option>
      <option value="قوالب بلوجر">قوالب بلوجر</option>
      <option value="إضافات بلوجر">إضافات بلوجر</option>
      <option value="شروحات تقنية">شروحات تقنية</option>
      <option value="تطبيقات وبرامج">تطبيقات وبرامج</option>
      <option value="الربح من الانترنت">الربح من الانترنت</option>
    </select>
  </div>

  <div id="loader" class="loader" style="display:none;"></div>

  <div id="postsList" class="toc-posts"></div>
  <button id="loadMoreBtn">تحميل المزيد</button>
</div>

<style>
.toc-container {
  background: #003366; /* اللون الكحلي النافي */
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  font-family: "Changa", sans-serif;
}
.toc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.toc-controls input,
.toc-controls select {
  padding: 10px;
  border-radius: 8px;
  border: none;
  flex: 1;
}
.toc-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.post-item {
  background: #002244; /* اللون الكحلي الداكن */
  padding: 15px;
  border-radius: 10px;
  transition: transform 0.2s;
}
.post-item:hover {
  transform: translateY(-4px);
}
.post-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}
.post-item h3 {
  font-size: 18px;
  margin: 10px 0;
  color: #fff; /* اللون الأبيض */
}
.post-item small {
  color: #bbb;
}
#loadMoreBtn {
  margin: 20px auto 0;
  display: block;
  padding: 10px 25px;
  border: none;
  background: #fff; /* اللون الأبيض */
  color: #003366; /* اللون الكحلي */
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
  display: block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

<script>
let config = {
  blogUrl: "https://www.eltiqni.com",
  maxResults: 6,
  startIndex: 1,
  label: "",
  search: "",
};

function showLoader() {
  document.getElementById("loader").style.display = "block";
}
function hideLoader() {
  document.getElementById("loader").style.display = "none";
}

function fetchPostsJsonp() {
  const scriptId = "jsonpScript";
  const oldScript = document.getElementById(scriptId);
  if (oldScript) oldScript.remove();

  showLoader();

  let url = `${config.blogUrl}/feeds/posts/default?alt=json-in-script&start-index=${config.startIndex}&max-results=${config.maxResults}&callback=renderPosts`;
  if (config.label) {
    url = `${config.blogUrl}/feeds/posts/default/-/${encodeURIComponent(config.label)}?alt=json-in-script&start-index=${config.startIndex}&max-results=${config.maxResults}&callback=renderPosts`;
  }

  const script = document.createElement("script");
  script.src = url;
  script.id = scriptId;
  document.body.appendChild(script);
}

function renderPosts(data) {
  hideLoader();
  const entries = data.feed.entry || [];
  if (!entries.length) return;

  for (let entry of entries) {
    const title = entry.title.$t;
    const link = entry.link.find(l => l.rel === "alternate").href;
    const pubDate = new Date(entry.published.$t).toLocaleDateString();
    const category = entry.category?.[0]?.term || "غير مصنف";
    const content = entry.content?.$t || "";
    const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
    const image = imgMatch ? imgMatch[1] : "https://via.placeholder.com/300x180.png?text=No+Image";

    if (config.search && !title.toLowerCase().includes(config.search.toLowerCase())) continue;

    const html = `
      <div class="post-item">
        <a href="${link}" target="_blank">
          <img src="${image}" loading="lazy" alt="${title}" />
          <h3>${title}</h3>
        </a>
        <small>${pubDate} - ${category}</small>
      </div>
    `;
    document.getElementById("postsList").insertAdjacentHTML("beforeend", html);
  }

  config.startIndex += config.maxResults;
}

document.getElementById("searchPosts").addEventListener("input", function () {
  config.search = this.value;
  config.startIndex = 1;
  document.getElementById("postsList").innerHTML = "";
  fetchPostsJsonp();
});
document.getElementById("filterLabel").addEventListener("change", function () {
  config.label = this.value;
  config.startIndex = 1;
  document.getElementById("postsList").innerHTML = "";
  fetchPostsJsonp();
});
document.getElementById("loadMoreBtn").addEventListener("click", fetchPostsJsonp);

// تحميل تلقائي أول مرة
fetchPostsJsonp();
</script>
  

لا تنسى تغيير رابط موقعنا برابط مدونتك.

الخلاصة

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