Explication d'un code pour créer le plan d'un site Blogger avec un flux RSS

Introduction

Dans cet article, nous allons explorer un code JavaScript qui permet de créer le plan d'un site Blogger en utilisant un flux RSS. Ce code récupère les articles d'un flux RSS spécifique, les affiche sur la page et permet de les ouvrir dans de nouveaux onglets. Nous soulignerons également l'importance et la fiabilité de ce code, qui peut être utilisé pour créer le plan de votre site Blogger de manière efficace et fiable.

Étape 1 : Présentation du code CSS

Tout d'abord, examinons le code CSS qui accompagne le script JavaScript. Il définit les styles visuels pour les éléments HTML utilisés dans le code :

.article {

  margin-bottom: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid #ccc;

  cursor: pointer;

}

.title {

  font-size: 18px;

  font-weight: bold;

}

.date {

  color: #888;

  font-size: 14px;

}

Ce code CSS définit les styles pour les éléments d'article, le titre de l'article et la date de publication. Il crée une mise en page claire et facile à lire pour chaque article affiché.

Étape 2 : Présentation du code HTML

Ensuite, nous avons le code HTML, qui crée les éléments nécessaires pour afficher les articles et le nombre total d'articles :

<h1 id="total-articles"></h1>

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

L'élément `<h1>` avec l'ID `total-articles` affiche le nombre total d'articles, tandis que l'élément `<div>` avec l'ID `articles` est l'endroit où les articles seront affichés.

Étape 3 : Explication du code JavaScript

Maintenant, passons au code JavaScript principal :

  var startIndex = 1;

  var maxResults = 100;

  var totalArticles = 0;

  function sendQuery12() {

    var scpt = document.createElement("script");

    scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;

    document.body.appendChild(scpt);

  }

  function processPostList12(root) {

    var elmt = document.getElementById("postList12");

    if (!elmt) return;

    var feed = root.feed;

    if (feed.entry.length > 0) {

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

        var entry = feed.entry[i];

        var title = entry.title.$t;

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

          if (entry.link[j].rel == "alternate") {

            var url = entry.link[j].href;

            if (url && url.length > 0 && title && title.length > 0) {

              var liE = document.createElement("li");

              var a1E = document.createElement("a");

              a1E.href = url;

              a1E.textContent = title;

              liE.appendChild(a1E);

              elmt.appendChild(liE);

              totalArticles++;

            }

            break;

          }

        }

      }

      if (feed.entry.length >= maxResults) {

        startIndex += maxResults;

        sendQuery12();

      }

    }

    updateCounter();

  }

  function updateCounter() {

    var counter = document.getElementById("articleCounter");

    if (counter) {

      counter.textContent = "Total Articles: " + totalArticles;

    }

  }

  sendQuery12();

Ce code JavaScript utilise l'événement `load` pour exécuter une fonction une fois que la page est complètement chargée. Il récupère ensuite le fichier XML du flux RSS en utilisant la fonction `fetch`. Une fois le fichier XML récupéré, il est converti en un objet DOM à l'aide de `DOMParser`.

Ensuite, le code parcourt chaque élément d'entrée (article) dans le fichier XML. Il extrait le titre, la date de publication et le lien de chaque article. En utilisant ces informations, il crée dynamiquement des éléments HTML correspondants, tels que des div, des h2 et des p. Les attributs de classe et les valeurs de texte sont définis en fonction des données de chaque article.

De plus, un gestionnaire d'événement est ajouté à chaque élément d'article, ce qui permet d'ouvrir l'article dans un nouvel onglet lorsque l'utilisateur clique dessus.

Enfin, les éléments d'article sont ajoutés à la page en les insérant dans l'élément `<div>` avec l'ID `articles`.

Conclusion

Le code JavaScript présenté ici permet de créer le plan d'un site Blogger en utilisant un flux RSS. Il récupère les articles à partir du flux RSS, les affiche sur la page avec leurs titres et dates de publication, et permet de les ouvrir dans de nouveaux onglets. Ce code est fiable et peut être utilisé pour créer efficacement le plan de votre site Blogger. Assurez-vous simplement d'adapter les URL et les sélecteurs d'éléments en fonction de votre propre flux RSS.

Voici le code complet à copier coller dans votre page Blogger en mode "Affichage HTML" :

<div id="articleCounter"></div> <div> <ul id="postList12"></ul> </div> <script type="text/javascript"> var startIndex = 1; var maxResults = 100; var totalArticles = 0; function sendQuery12() { var scpt = document.createElement("script"); scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults; document.body.appendChild(scpt); } function processPostList12(root) { var elmt = document.getElementById("postList12"); if (!elmt) return; var feed = root.feed; if (feed.entry.length > 0) { for (var i = 0; i < feed.entry.length; i++) { var entry = feed.entry[i]; var title = entry.title.$t; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == "alternate") { var url = entry.link[j].href; if (url && url.length > 0 && title && title.length > 0) { var liE = document.createElement("li"); var a1E = document.createElement("a"); a1E.href = url; a1E.textContent = title; liE.appendChild(a1E); elmt.appendChild(liE); totalArticles++; } break; } } } if (feed.entry.length >= maxResults) { startIndex += maxResults; sendQuery12(); } } updateCounter(); } function updateCounter() { var counter = document.getElementById("articleCounter"); if (counter) { counter.textContent = "Total Articles: " + totalArticles; } } sendQuery12(); </script> <style> ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } </style>