Création d'un site modifiable avec Google Sheets et Eleventy

Ce tutoriel montre la création d'un site Web modifiable à l'aide de Google Sheets et Eleventy, une amélioration significative par rapport aux données côté client. Nous exploiterons les capacités statiques de génération de sites statiques d'Eleventy pour récupérer des données pendant le processus de construction, ce qui entraîne des temps de chargement plus rapides et une sécurité améliorée. Cela élimine le besoin de JavaScript côté client pour récupérer les données sur chaque vue de page.

Le problème: révisions constantes des clients

Les développeurs sont souvent confrontés au défi des révisions de contenu sans fin des clients, même après le lancement du site. Ce processus itératif peut être long et perturbateur.

Cette solution permet aux clients de mettre à jour le contenu indépendamment à l'aide d'un outil familier: Google Sheets.

Présentation de Eleventy

Alors que notre article précédent a utilisé Tabletop.js pour interagir avec Google Sheets, cette approche intègre Eleventy, un générateur de sites statique. Eleventy rend le site comme un site statique pur, éliminant la nécessité d'inclure le JavaScript côté client pour la gestion des données. Le contenu est récupéré pendant le processus de construction, créant un fichier index.html hautement optimisé. Cette approche statique améliore la vitesse et la sécurité de chargement de la page.

Configuration de la feuille Google

Une feuille Google sert de magasin de données. Créez une nouvelle feuille de calcul, en structurant vos données avec des en-têtes de colonne comme références (par exemple, "En-tête", "corps"). Ces en-têtes seront référencés dans votre code JavaScript. Remplissez la feuille avec votre contenu.

Ensuite, publiez la feuille sur le Web (fichier → publier sur le Web). Bien que le lien généré ne soit pas utilisé directement, cette étape rend les données de feuille de calcul accessibles publiquement. Notez l'ID de feuille unique de l'URL; Vous en aurez besoin plus tard.

Node.js et configuration du projet

Node.js est requis. Pour une configuration rationalisée, clonez le référentiel fourni et l'exécution:

 Installation de NPM
Graine de course NPM
NPM Run Dev

La commande npm run seed est cruciale; Il pré-popule un fichier JSON local ( src/site/_data/dev/sheet.json ) avec des données de la feuille Google, éliminant la nécessité d'appels API répétés pendant le développement.

Données Réclinante et transformation (Src / Site / _data / Prod / Sheet.js)

La logique principale réside dans src/site/_data/prod/sheet.js Ce script récupère les données de la feuille Google à l'aide d'Axios, la transforme en un objet JavaScript utilisable et enregistre une copie JSON locale pour le développement. N'oubliez pas de remplacer sheetID par l'ID unique de votre feuille.

 module.exports = () => {
  retourner la nouvelle promesse ((résoudre, rejeter) => {
    console.log (`demandant le contenu de $ {googlesheetUrl}`);
    axios.get (GooglesheetUrl)
      .Then (réponse => {
        var data = {contenu: []};
        réponse.data.feed.entry.ForEach (item => {
          data.content.push ({
            En-tête: item.gsx $ en-tête. $ t,
            header2: item.gsx $ header2. $ t,
            // ... Autres champs ...
          });
        });
        Seed (json.stringify (data), `$ {__ dirname} /../ dev / sheet.json`);
        résoudre (données);
      })
      .Catch (error => {
        console.log ('error:', error);
        rejeter (erreur);
      });
  });
};

Le script utilise forEach pour parcourir les entrées de la feuille, mappant les en-têtes de colonne aux propriétés d'objet. La fonction seed enregistre les données comme JSON.

Templage avec Nunjucks (ou votre moteur préféré)

Les données JSON transformées sont facilement utilisables avec des moteurs de modèles comme Nunjucks. Par exemple:

<div>
  {% - pour l'article dans la feuille.Content -%}
    <h1 id="item-header">{{item.header}}</h1>
  {% - endor -%}
</div>

Adaptez-le à votre moteur de modèles et structure de données choisi.

Construction et déploiement

Construisez le site:

 NPM Run Build

Cela génère le site statique dans un dossier dist . Pour les déploiements automatisés après les mises à jour de la feuille Google, intégrez Zapier pour connecter Google Sheets et votre plate-forme d'hébergement (par exemple, Netlify). Configurez un ZAP pour déclencher un déploiement Netlify chaque fois qu'une ligne nouvelle ou mise à jour est ajoutée à la feuille Google. Cela crée un flux de travail automatisé sans couture.

Cette approche complète fournit un site Web de performant et modifiable avec des déploiements automatisés, améliorant considérablement le flux de travail de développement et la collaboration client.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!