اذهب إلى المحتوى

السؤال

نشر (معدل)

يوجد لدي سكربت قمت بتطويره يقوم بجلب أخر المشاركات من مدونات بلوجر أو اخر المشاركات من قسم معين

ما أريده هو التحكم في قيمة المعرف (demo)   وربطه بالمتغير printId الموجود ضمن الوظيفة createLastPosts

بحيث يتم استدعاء هذه الوظيفة مع تحديد المعرف اللى هيتم طباعة البيانات بداخلها حتى اتمكن من استخدام هذه الوظيفة عدة مرات وفي أماكن مختلفة

 function lastPosts(json) {
      var jfe = json.feed.entry;
      for (i = 0; i < jfe.length; i++) {
        var jfei = jfe[i];
        for (j = 0; j < jfei.link.length; j++) {
          if (jfei.link[j].rel == "alternate") {
            break;
          }
        }

        var postUrl = jfei.link[j].href;
        var postTitle = jfei.title.$t;

        var thumbnail;
        var thumbnailDefualt = "#";
        try {
          thumbnail = jfei.media$thumbnail.url;
        } catch (h) {
          s = jfei.content.$t;
          a = s.indexOf("<img");
          b = s.indexOf('src="', a);
          c = s.indexOf('"', b + 5);
          d = s.substr(b + 5, c - b - 5);
          if (a != -1 && b != -1 && c != -1 && d != "") {
            thumbnail = d;
          } else {
            thumbnail = thumbnailDefualt;
          }
        }

        var fixThumbnail = thumbnail.replace("s72-c", "s1600");

        var printThumbnail =
          '<a class="grid-thumbnail" href="' +
          postUrl +
          '"><img class="lazyload" loading="lazy" src="' +
          fixThumbnail +
          '" alt="' +
          postTitle +
          '"></a>';

        var printArticle =
          '<article class="grid-col article-posts swiper-slide"><div class="grid-fix-height"><div class="grid-box">' +
          printThumbnail +
          '<div class="grid-content"><h3 class="grid-title"><a href="' +
          postUrl +
          '">' +
          postTitle +
          "</a></h3></div></div></div></article>";
        var printall = document.getElementById("demo");
         printall.innerHTML += printArticle;
      }

     

    }

    function createLastPosts(url, count, printId) {
      var createScript = document.createElement("script");
      var createAttrSrc = document.createAttribute("src");
      createAttrSrc.value =
        url +
        "/feeds/posts/default?alt=json-in-script&max-results=" +
        count +
        "&callback=lastPosts";
      createScript.setAttributeNode(createAttrSrc);
      document.getElementsByTagName("head")[0].appendChild(createScript);
    }
    

    function createLastPostsLabel(url, labelName, count) {
      var createScript = document.createElement("script");
      var createAttrSrc = document.createAttribute("src");
      createAttrSrc.value =
        url +
        "/feeds/posts/default/-/" +
        labelName +
        "?alt=json-in-script&max-results=" +
        count +
        "&callback=lastPosts";
      createScript.setAttributeNode(createAttrSrc);
      document.getElementsByTagName("head")[0].appendChild(createScript);
    }

 

<div id="demo1"></div>
<div id="demo2"></div>

 

// أريد عند استدعاء الدالة

/*
createLastPosts(
	'url',  رابط المدونة
     'count',  عدد المقالات اللى هيتم طباعتها
     'printId'  المكان اللى هيتم طباعة فيه المقالات
);
*/

// مثال
createLastPosts(
	'https://mo-222.blogspot.com',
     '3',
     'demo1'
);

last-post.html

تم التعديل في بواسطة Mohamed.Refaat

Recommended Posts

  • 1
نشر (معدل)

لكي يتم إضافة التدوينات في الأقسام المحددة، تحتاج إلى تعديل الدالة lastPosts و الدالة createLastPosts وكذلك تحتاج إلى إنشاء مصفوفة عامة global بالشكل التالي:

var IDs = [];

function lastPosts(json) {
    var ID = IDs.shift();	// للحصول على أول عنصر في المصفوفة وحذفه من المصفوفة الأصلية
    // ...
    var printall = document.getElementById(ID);
    printall.innerHTML += printArticle;
}

function createLastPosts(url, count, printId) {
    IDs.push(printId);	// لإضافة عنصر جديد إلى المصفوفة
  
    // ...
}

الآن يمكنك أن تقوم بتشغيل الدالة createLastPosts أكثر من مرة وسوف يتم إضافة التدوينات في الأماكن المحددة:

<div class="container">
    <div class="wrapper">
        <div class="content">
            <div id="demo1" class="show-sidebar grid grid-3"></div>
            <div id="demo2" class="show-sidebar grid grid-3"></div>
            <div id="demo3" class="show-sidebar grid grid-3"></div>
        </div>
    </div>
</div>
<script>
    createLastPosts('https://mo-222.blogspot.com', '1', 'demo1');
    createLastPosts('https://mo-222.blogspot.com', '2', 'demo2');
    createLastPosts('https://mo-222.blogspot.com', '3', 'demo3');
</script>

61ca1a1b0a616_Screenshot2021-12-27215455.png.a8983932a5a24dc41c9f7132a047e498.png

طريقة أفضل

لكن الطريقة السابقة متوقفة على ترتيب تنفيذ السكريبتات في المتصفح ولا يمكننا أن نضمن أن يتم تنفيذهم بالترتيب (قد يقوم المتصفح بتنفيذ السكريبتات حسب سرعة تحميل كل سكريبت) وبالتالي يمكن أن نجد أن التدوينات يتم إضافتها في أماكن عشوائية، ولحل هذه المشكلة يمكن أن تقوم بتجربة طريقة مختلفة عن إستخدام مصفوفة عامة، حيث نقوم بإضافة خاصية باسم data-position في كل عنصر script وتحمل id الخاص بالعنصر  الذي سيتم إضافة التدوينات فيه، بالشكل التالي:

function lastPosts(json) {
    // للحصول على الخاصية data-position من السكريبت الحالي (الذي قام بإستدعاء هذه الدالة)
    var ID = document.currentScript.getAttribute('data-position')
    
    //  ...
        var printall = document.getElementById(ID);
        printall.innerHTML += printArticle;
    }
}

function createLastPosts(url, count, printId) {
    // ...

ثم يتم إستدعاء الدالة createLastPosts بنفس الطريقة:

<div class="container">
    <div class="wrapper">
        <div class="content">
            <div id="demo1" class="show-sidebar grid grid-3"></div>
            <div id="demo2" class="show-sidebar grid grid-3"></div>
            <div id="demo3" class="show-sidebar grid grid-3"></div>
        </div>
    </div>
</div>
<script>
    createLastPosts('https://mo-222.blogspot.com', '1', 'demo1');
    createLastPosts('https://mo-222.blogspot.com', '2', 'demo2');
    createLastPosts('https://mo-222.blogspot.com', '3', 'demo3');
</script>

الملف بعد تعديله: 

last-post.html

تم التعديل في بواسطة سامح أشرف
إضافة طريقة أخرى لحل المشكلة
  • 0
نشر

@سامح أشرفإزاي أقدر استدعي مقالات بطريقة عشوائية بنفس الأكواد الموجودة في الملف التالي 

بتاريخ On 12/27/2021 at 21:55 قال سامح أشرف:

حاولت استخدم دالة Math.random ودالة Math.floor لكن مش عارف استخدمها بطريقة صحيحة مع بلوجر

  • 0
نشر
بتاريخ 16 ساعات قال Mohamed.Refaat:

@سامح أشرفإزاي أقدر استدعي مقالات بطريقة عشوائية بنفس الأكواد الموجودة في الملف التالي 

حاولت استخدم دالة Math.random ودالة Math.floor لكن مش عارف استخدمها بطريقة صحيحة مع بلوجر

إن أردت توليد رقم عشوائي للحصول على عدد من التدوينات فيمكنك أن تقوم به بالشكل التالي:
 

createLastPosts('https://mo-222.blogspot.com', Math.floor(Math.random()*10).toString(), 'demo3');

بهذا الشكل سوف يتم توليد رقم عشوائي ما بين 0 و 10 وتحويل الرقم إلى نص String

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...