كيف يمكن عمل loop لكود في بلوجر

ناnaif ناnaif · 23 يونيو 2024

السلام عليكم ورحمة الله و بركاته

عندي كود html لقالب بلوجر و اوريد عمل loop له بحيث يكون للتدوينات المنشورة

وهذا هو الكود

 <div class='article'>
<h3 class='article-title'>عنوان المقال</h3>
<p class='article-content'>نبذة عن المقال</p>
<a href='رابط المقال'><button class='view-details'>عرض المقال</button></a>
  </div>

تم التعديل في 23 يونيو 2024 بواسطة ناnaif ناnaif

Najah Alsaker · 23 يونيو 2024

وعليكم السلام

يمكنك عمل ذلك عبر استخدام الجافا سكريبت

اولا لنقوم بتحضر قالب ال html الموجود لديك ليتم تطبيق اكواد الجافا سكريبت عليه ليصبح كالتالي :

<div id="articles-container"></div>

<script type="text/template" id="article-template">
  <div class='article'>
    <h3 class='article-title'>{{title}}</h3>
    <p class='article-content'>{{content}}</p>
    <a href='{{link}}'><button class='view-details'>عرض المقال</button></a>
  </div>
</script>

أولا قمنا بانشاء حاوية div فارغة لعرض المقالات بداخلها عندما ننشئها لاحقا عبر جافا سكريبت

<div id="articles-container"></div>

ثم قمنا بتخزين قالب ال html داخل عنصر السكريبت و id="article-template" لنتمكن من الوصول إليه لاحقًا عبر كود الجافا سكريبت

  <script type="text/template" id="article-template">

عوضا عن عنوان المقال قمنا بوضع المتغير title ليتم وضعه تلقائيا وذات الشيء ايضا بالنسبة لل content و link

والان دعنا نبدأ بكتابة كود الجافا سكريبت

اولا يجب علينا انشاء وتعريف مصفوفة من الكائنات كل كائن بها يمثل مقالة مع خصائصها والتي هي ال title و content و link كالتالي :

  const articles = [
      { title: 'عنوان المقال الأول', content: 'نبذة عن المقال الأول', link: 'link-to-article-1' },
      { title: 'عنوان المقال الثاني', content: 'نبذة عن المقال الثاني', link: 'link-to-article-2' },
      { title: 'عنوان المقال الثالث', content: 'نبذة عن المقال الثالث', link: 'link-to-article-3' }
    ];

ثم نقوم بانشاء دالة لعرض المقالات

  function renderArticles() {

ونقوم باستدعاء التالي بداخلها

اولا جلبنا عنصر ال div الذي انشئناه فارغا قبل قليل لوضع المقالات بداخله

const container = document.getElementById('articles-container');:

ثم قمنا بجلب محتوى القالب الذي انشئناه في html سابقا من خلال ال id الذي اعطيناه اياه

const template = document.getElementById('article-template').innerHTML;:

ثم نقوم بمسح محتوى العنصر div للتأكد اولا من انه فارغ قبل اضافة اي مقالات

container.innerHTML = '';

والان نقوم بانشاء حلقة forEach للمرور عبر كل عنصر في المصفوفة articles والذي بها كل عنصر يمثل مقالة

articles.forEach(article => {...})

ثم داخل هذه الحلقة نقوم باستبدال المعلومات التي لدينا داخل قالب ال html وهم ال title و content و link

 articles.forEach(article => {
        const articleHTML = template
          .replace('{{title}}', article.title)
          .replace('{{content}}', article.content)
          .replace('{{link}}', article.link);

ثم نقوم باضافة هذه المقالات للحاوية التي انشئناها

  container.innerHTML += articleHTML;

وفي النهاية نضيف هذه الدالة لضمان عرض المقالات دائما عند تحديث الصفحة

window.onload = renderArticles;

ساترك لك الكود النهائي هنا يمكنك وضعه في ملف واحد او فصلهم ملف html وملف javaScript

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدونة</title>
</head>
<body>
  <div id="articles-container"></div>
  <script type="text/template" id="article-template">
    <div class='article'>
      <h3 class='article-title'>{{title}}</h3>
      <p class='article-content'>{{content}}</p>
      <a href='{{link}}'><button class='view-details'>عرض المقال</button></a>
    </div>
  </script>
  <script>
    // بيانات المقالات كمصفوفة من الكائنات
    const articles = [
      { title: 'عنوان المقال الأول', content: 'نبذة عن المقال الأول', link: 'link-to-article-1' },
      { title: 'عنوان المقال الثاني', content: 'نبذة عن المقال الثاني', link: 'link-to-article-2' },
      { title: 'عنوان المقال الثالث', content: 'نبذة عن المقال الثالث', link: 'link-to-article-3' }
    ];

    // دالة لعرض المقالات
    function renderArticles() {
      const container = document.getElementById('articles-container');
      const template = document.getElementById('article-template').innerHTML;

      // مسح محتوى الحاوية
      container.innerHTML = '';

      // تكرار البيانات لإنشاء HTML لكل مقالة
      articles.forEach(article => {
        const articleHTML = template
          .replace('{{title}}', article.title)
          .replace('{{content}}', article.content)
          .replace('{{link}}', article.link);

        // إضافة المقالات إلى الحاوية
        container.innerHTML += articleHTML;
      });
    }

    // عرض المقالات عند تحميل الصفحة
    window.onload = renderArticles;
  </script>

بالتوفيق لك...

ناnaif ناnaif · 23 يونيو 2024

شكرا اخي و جزاك الله خير بس انا احتاج تكرار الكود في السؤال لعرض المواضيع

لمدونة بلوجر اي اوريد طريقة تجعل بلوجر تقوم بتكرار الكود لعرض التدوينات المنشورة على المدونة ليس في صفحة html بارك الله فيك.

Najah Alsaker · 23 يونيو 2024

بهذه الحالة يجب عليك التعامل مع data base وتجلب البيانات منها ما لغة البرمجة او قاعدة البيانات التي تستخدمها ؟

ناnaif ناnaif · 23 يونيو 2024

اخي بارك الله فيك انا ابرمج قالب بلوجر حسنا انا واجهتني مشكلة وهي

بعد تصميم كود المقال اللذي زوتك به انا احتاج كيفية جعل الكود يتم تكرارة لمنشورات المدونة الخاصة ببلوجر فقط ليس التعامل مع قواعد بيانات مثل MY SQL

تم التعديل في 23 يونيو 2024 بواسطة ناnaif ناnaif

محمد عاطف17 · 24 يونيو 2024

بتاريخ 20 ساعة قال ناnaif ناnaif:

اخي بارك الله فيك انا ابرمج قالب بلوجر حسنا انا واجهتني مشكلة وهي

بعد تصميم كود المقال اللذي زوتك به انا احتاج كيفية جعل الكود يتم تكرارة لمنشورات المدونة الخاصة ببلوجر فقط ليس التعامل مع قواعد بيانات مثل MY SQL

لعمل حلقة (loop) في قالب HTML لمدونة بلوجر، يمكنك استخدام لغة Blogger Template (التي تعتمد على XML) لاستدعاء التدوينات المنشورة.

حيث يمكنك استخدام Blogger Template Tags في قالب HTML الخاص بك و يمكنك استخدام بعض الوسوم المتاحة في Blogger لاستدعاء التدوينات. الوسم الأساسي هو <b:loop> هذا الوسم يمكن أن يشبه حلقة for loop في البرمجة حيث يكرر نفسه لكل تدوينة في المدونة.

مثال على استخدام الوسم <b:loop>

<b:loop values='data:posts' var='post'>
  <!-- هنا نقوم بوضع العناصر التي تريد عرضها لكل تدوينة -->

  <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
  <!-- عرض محتوى التدوينة -->
  <p><data:post.body/></p>
</b:loop>

data:posts: هذا يشير إلى كافة التدوينات المنشورة في المدونة.

var='post': هذا هو المتغير الذي يتم تكريره في كل دورة من الحلقة، والذي يمكنك استخدامه للوصول إلى معلومات التدوينة مثل العنوان

<data:post.title/>

والمحتوى

<data:post.body/>

والرابط

<data:post.url/>

وهكذا . ويصبح الكود كالتالي بالمثال الذى أرفقته :

<b:loop values='data:posts' var='post'>
 <div class='article'>
<h3 class='article-title'><data:post.title/></h3>
<p class='article-content'><data:post.body/></p>
<a expr:href='data:post.url'><button class='view-details'>عرض المقال</button></a>
  </div>
</b:loop>

كيف يمكن عمل loop لكود في بلوجر

السؤال

ناnaif ناnaif

5 أجوبة على هذا السؤال

Recommended Posts

Najah Alsaker

ناnaif ناnaif

Najah Alsaker

ناnaif ناnaif

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية