Comprendre le développement de plugins dans Gatsby

Gatsby est un générateur de site statique basé sur React qui a révisé la façon dont les sites Web et les blogs sont créés. Il prend en charge l'utilisation de plugins pour créer des fonctionnalités personnalisées qui ne sont pas disponibles dans l'installation standard.

Dans cet article, je vais présenter les plugins Gatsby, discuter des types de plugins Gatsby qui existent, différencier les formes de plugins Gatsby et , enfin, créez un plugin de commentaires qui peut être utilisé sur n'importe quel site Web Gatsby, dont nous installerons à la fin du didacticiel.

Qu'est-ce qu'un plugin Gatsby?

Gatsby en tant que statique- générateur de site, a des limites sur ce qu'il peut faire . Les plugins sont des moyens d'étendre Gatsby avec toute fonctionnalité non fournie hors de la boîte. Nous pouvons réaliser des tâches telles que la création d'un fichier manifest.json pour une application Web progressive (PWA), l'intégration de tweets sur une page, la journalisation des pages vues, et bien plus encore sur un site Web Gatsby à l'aide de plugins.

Types Des plugins Gatsby

Il existe deux types de plugins Gatsby, locaux et externes. Les plugins locaux sont développés dans un répertoire de projet Gatsby, sous le répertoire / plugins . Les plugins externes sont ceux disponibles via npm ou Yarn. De plus, ils peuvent être sur le même ordinateur mais liés à l'aide de la commande yarn link ou npm link dans un projet de site Web Gatsby.

Formes de plug-ins Gatsby

Des plug-ins existent également sous trois formes principales et sont définies par leurs cas d'utilisation:

Composants d'un plug-in Gatsby

Pour créer un plug-in Gatsby, nous devons définir quelques fichiers:

• gatsby-node.js
  Rend cela possible pour écouter les processus de construction de Gatsby.
• gatsby-config.js
  Principalement utilisé pour la configuration et l'installation.
• gatsby-browser.js
  Permet aux plugins d'exécuter du code pendant l'un des processus de Gatsby dans
• gatsby-ssr.js
  Personnalise et ajoute des fonctionnalités au processus de rendu côté serveur (SSR).

Ces fichiers sont appelés fichiers API dans la documentation de Gatsby et doivent vivre à la racine de le répertoire d'un plugin, local ou externe.

Tous ces fichiers ne sont pas requis pour créer un Gatsby brancher. Dans notre cas, nous n'implémenterons que les fichiers API gatsby-node.js et gatsby-config.js .

Pour apprendre à développer un plug-in Gatsby, nous allons: créer un plugin de commentaires qui peut être installé sur n'importe quel blog fonctionnant sur Gatsby. Le code complet du plugin est sur GitHub .

Traitement et chargement des commentaires

Pour diffuser des commentaires sur un site Web, nous devons fournir un serveur qui permet d'enregistrer et de charger des commentaires. Nous utiliserons à cet effet un serveur de commentaires déjà disponible sur gatsbyjs-comment-server.herokuapp.com .

Le serveur prend en charge une demande GET / comments de chargement de commentaires. POST / comments enregistrerait les commentaires pour le site Web, et il accepte les champs suivants comme corps de la demande POST / comments :

• contenu: [string]
  Le commentaire lui-même,
• auteur: [string]
  Le nom de l'auteur du commentaire,
• site Web
  Le site Web d'où provient le commentaire,
• slug
  Le slug de la page à laquelle le commentaire est destiné

Intégration du serveur avec Gatsby à l'aide de fichiers API

Tout comme nous le faisons lorsque crée un blog Gatsby pour créer un plugin externe, nous devons commencer par plugin passe-partout .

Initialisation du dossier

Dans l'interface de ligne de commande (CLI) et à partir de n'importe quel répertoire qui vous convient, exécutons la commande suivante:

 gatsby new gatsby-source-comment-server https: // github .com / Gatsbyjs / gatsby-starter-plugin 

Ensuite, accédez au répertoire du plugin et ouvrez-le dans un éditeur de code. [19659040] Installation d'axios pour les requêtes réseau

Pour commencer, nous allons installer le package axios pour envoyer des requêtes Web au serveur de commentaires:

 npm install axios --save
// ou
yarn add axios 

Ajout d'un nouveau type de nœud

Avant d'extraire des commentaires du serveur de commentaires, nous devons définir un nouveau type de nœud que les commentaires étendront. Pour cela, dans le dossier du plugin, notre fichier gatsby-node.js doit contenir le code ci-dessous:

 exports.sourceNodes = async ({actions}) => {
  const {createTypes} = actions;
  const typeDefs = `
    type CommentServer implémente Node {
      _id: String
      auteur: String
      chaîne: chaîne
      contenu: String
      site web: String
      slug: String
      createdAt: Date
      mis à jourA: Date
    }
  "
  createTypes (typeDefs);
}; 

Premièrement, nous avons extrait des actions des API fournies par Gatsby. Ensuite, nous avons retiré l'action createTypes après quoi nous avons défini un type CommentServer qui étend Node.js. Ensuite, nous avons appelé createTypes avec le nouveau type de nœud que nous avons défini.

Maintenant, nous pouvons utiliser des axios pour extraire des commentaires, puis les stocker dans la couche d'accès aux données en tant que CommentServer ] type. Cette action est appelée «sourçage de nœuds» dans Gatsby.

Pour rechercher de nouveaux nœuds, nous devons implémenter l'API sourceNodes dans gatsby-node.js . Dans notre cas, nous utiliserions axios pour effectuer des requêtes réseau, puis analyserions les données de l'API pour correspondre à un type GraphQL que nous définirions, puis créerions un nœud dans la couche GraphQL de Gatsby en utilisant le [19659047] action createNode .

Nous pouvons ajouter le code ci-dessous au fichier API gatsby-node.js du plugin, créant la fonctionnalité que nous avons décrite:

 const axios = require ( "axios");

exports.sourceNodes = async (
  {actions, createNodeId, createContentDigest},
  pluginOptions
) => {
  const {createTypes} = actions;
  const typeDefs = `
    type CommentServer implémente Node {
      _id: String
      auteur: String
      chaîne: chaîne
      site web: String
      contenu: String
      slug: String
      createdAt: Date
      mis à jourA: Date
    }
  "
  createTypes (typeDefs);

  const {createNode} = actions;
  const {limit, website} = pluginOptions;
  const _website = site Web || "";

  résultat const = attendre axios ({
    url: `https://Gatsbyjs-comment-server.herokuapp.com/comments?limit=$ {_limit} & website = $ {_website} ',
  });

  const comments = result.data;

  fonction convertCommentToNode (commentaire, {createContentDigest, createNode}) {
    const nodeContent = JSON.stringify (commentaire);

    const nodeMeta = {
      id: createNodeId (`commentaires - $ {comment._id}`),
      parent: null,
      enfants: [],
      interne: {
        tapez: `CommentServer`,
        mediaType: `text / html`,
        contenu: nodeContent,
        contentDigest: createContentDigest (commentaire),
      },
    };

    const node = Object.assign ({}, comment, nodeMeta);
    createNode (nœud);
  }

  pour (soit i = 0; i <comments.data.length; i ++) {
    const comment = comments.data [i];
    convertCommentToNode (commentaire, {createNode, createContentDigest});
  }
}; 

Ici, nous avons importé le package axios, puis défini les valeurs par défaut au cas où les options de notre plugin ne sont pas fournies, puis fait une demande au point de terminaison qui sert nos commentaires.

Nous avons ensuite défini une fonction pour convertir le commentaires dans les nœuds Gatsby, en utilisant les assistants d'action fournis par Gatsby. Après cela, nous avons parcouru les commentaires récupérés et appelé convertCommentToNode pour convertir les commentaires en nœuds Gatsby .

Ensuite, nous devons résoudre les commentaires en messages. Gatsby possède une API pour celle appelée createResolvers . Nous pouvons rendre cela possible en ajoutant le code ci-dessous dans le fichier gatsby-node.js du plugin:

 exports.createResolvers = ({createResolvers}) => {
  résolveurs const = {
    MarkdownRemark: {
      commentaires: {
        type: ["CommentServer"],
        résoudre (source, arguments, contexte, info) {
          return context.nodeModel.runQuery ({
            requete: {
              filtre: {
                slug: {eq: source.fields.slug},
              },
            },
            tapez: "CommentServer",
            firstOnly: false,
          });
        },
      },
    },
  };
  createResolvers (résolveurs);
}; 

Ici, nous étendons MarkdownRemark pour inclure un champ de commentaires . Le nouveau champ commentaires sera résolu en type CommentServer en fonction du slug avec lequel le commentaire a été enregistré et du slug de la publication.

Code final pour l'approvisionnement des commentaires et Transformation

Le code final du fichier gatsby-node.js de notre plugin de commentaires devrait ressembler à ceci:

 const axios = require ("axios");

exports.sourceNodes = async (
  {actions, createNodeId, createContentDigest},
  pluginOptions
) => {
  const {createTypes} = actions;
  const typeDefs = `
    type CommentServer implémente Node {
      _id: String
      auteur: String
      chaîne: chaîne
      site web: String
      contenu: String
      slug: String
      createdAt: Date
      mis à jourA: Date
    }
  "
  createTypes (typeDefs);

  const {createNode} = actions;
  const {limit, website} = pluginOptions;
  const _limit = parseInt (limite || 10000); // RECUPERER TOUS LES COMMENTAIRES
  const _website = site Web || "";

  résultat const = attendre axios ({
    url: `https://Gatsbyjs-comment-server.herokuapp.com/comments?limit=$ {_limit} & website = $ {_website} ',
  });

  const comments = result.data;

  fonction convertCommentToNode (commentaire, {createContentDigest, createNode}) {
    const nodeContent = JSON.stringify (commentaire);

    const nodeMeta = {
      id: createNodeId (`commentaires - $ {comment._id}`),
      parent: null,
      enfants: [],
      interne: {
        tapez: `CommentServer`,
        mediaType: `text / html`,
        contenu: nodeContent,
        contentDigest: createContentDigest (commentaire),
      },
    };

    const node = Object.assign ({}, comment, nodeMeta);
    createNode (nœud);
  }

  pour (soit i = 0; i < comments.data.length; i++) {
    const comment = comments.data[i];
    convertCommentToNode(comment, { createNode, createContentDigest });
  }
};

exports.createResolvers = ({ createResolvers }) => {
  résolveurs const = {
    MarkdownRemark: {
      commentaires: {
        type: ["CommentServer"],
        résoudre (source, arguments, contexte, info) {
          return context.nodeModel.runQuery ({
            requete: {
              filtre: {
                site Web: {eq: source.fields.slug},
              },
            },
            tapez: "CommentServer",
            firstOnly: false,
          });
        },
      },
    },
  };
  createResolvers (résolveurs);
}; 

Nous devons enregistrer les commentaires des slugs de page dans leurs fichiers JSON respectifs. Cela permet de récupérer les commentaires à la demande via HTTP sans avoir à utiliser une requête GraphQL.

Pour ce faire, nous implémenterons l'API createPageStatefully dans l'API gatsby-node.js Fichier API du plugin. Nous utiliserons le module fs pour vérifier si le chemin existe avant d'y créer un fichier. Le code ci-dessous montre comment nous pouvons implémenter ceci:

 import fs from "fs"
importer {résoudre: pathResolve} à partir de "path"
exports.createPagesStatefully = async ({graphql}) => {
  const commentaires = attendre graphql (
    "
      {
        allCommentServer (limite: 1000) {
          bords {
            nœud {
              Nom
              limace
              _id
              créé à
              contenu
            }
          }
        }
      }
    "
  )

  if (comments.errors) {
    jeter des commentaires.erreurs
  }

  const markdownPosts = attendre graphql (
    "
      {
        allMarkdownRemark (
          trier: {champs: [frontmatter___date]ordre: DESC}
          limite: 1000
        ) {
          bords {
            nœud {
              des champs {
                limace
              }
            }
          }
        }
      }
    "
  )

  const posts = markdownPosts.data.allMarkdownRemark.edges
  const _comments = comments.data.allCommentServer.edges

  const commentsPublicPath = pathResolve (process.cwd (), "public / comments")

  var existe = fs.existsSync (commentsPublicPath) // crée le répertoire de destination s'il n'existe pas

  si (! existe) {
    fs.mkdirSync (commentsPublicPath)
  }

  posts.forEach ((publication, index) => {
    const path = post.node.fields.slug
    const commentsForPost = _comments
      .filter (comment => {
        retour comment.node.slug === chemin
      })
      .map (comment => comment.node)

    const strippedPath = chemin
      .Divisé("/")
      .filtre (s => s)
      .joindre("/")
    const _commentPath = pathResolve (
      process.cwd (),
      "public / commentaires",
      `$ {strippedPath} .json`
    )
    fs.writeFileSync (_commentPath, JSON.stringify (commentsForPost))
  })
} 

Premièrement, nous avons besoin des fs et pour résoudre la fonction du module de chemin . Nous utilisons ensuite l'assistant GraphQL pour extraire les commentaires que nous avons stockés précédemment, afin d'éviter des requêtes HTTP supplémentaires. Nous supprimons les fichiers Markdown que nous avons créés à l'aide de l'assistant GraphQL. Nous vérifions ensuite si le chemin du commentaire ne manque pas dans le chemin public, afin de pouvoir le créer avant de continuer.

Enfin, nous parcourons tous les nœuds du type Markdown. Nous extrayons les commentaires des messages actuels et les stockons dans le répertoire public / comments avec le slug du message comme nom du fichier.

Le .gitignore dans le répertoire root dans un site Web Gatsby empêche le chemin public d'être engagé. L'enregistrement des fichiers dans ce répertoire est sûr.

Lors de chaque reconstruction, Gatsby appelait cette API dans notre plugin pour récupérer les commentaires et les enregistrer localement dans des fichiers JSON.

Pour afficher des commentaires dans le navigateur, nous devons utiliser le gatsby-browser.js Fichier API.

Définir le conteneur racine pour HTML

Pour que le plug-in identifie un point d'insertion dans une page, nous devons définir un élément HTML comme conteneur pour le rendu et la liste des composants du plugin. Nous pouvons nous attendre à ce que chaque page qui en a besoin ait un élément HTML avec un ID défini sur commentContainer .

Implémentez l'API Route Update dans le fichier gatsby-browser.js

Le meilleur moment pour faire l'extraction de fichiers et l'insertion de composants, c'est quand une page vient d'être visitée. L'API onRouteUpdate fournit cette fonctionnalité et transmet les apiHelpers et pluginOpions comme arguments à la fonction de rappel.

 exports.onRouteUpdate = async (apiHelpers, pluginOptions) => {
  const {location, prevLocation} = apiHelpers
} 

Créer un assistant qui crée des éléments HTML

Pour rendre notre code plus propre, nous devons définir une fonction qui peut créer un élément HTML, définir son className et ajouter du contenu. En haut du fichier gatsby-browser.js nous pouvons ajouter le code ci-dessous:

 // Crée un élément, set class. innerhtml le renvoie ensuite.
 fonction createEl (nom, nomClasse, html = null) {
  const el = document.createElement (nom)
  el.className = className
  el.innerHTML = html
  retour el
} 

À ce stade, nous pouvons ajouter un en-tête au point d'insertion des composants de commentaires, dans l'API du navigateur onRouteUpdate . Tout d'abord, nous nous assurerions que l'élément existe dans la page, puis créerions un élément à l'aide de l'aide createEl puis l'ajouterions au point d'insertion.

 // ...

exports.onRouteUpdate = async ({location, prevLocation}, pluginOptions) => {
  const commentContainer = document.getElementById ("commentContainer")
  if (commentContainer && location.path! == "/") {
    en-tête const = createEl ("h2")
    header.innerHTML = "Commentaires"
    commentContainer.appendChild (en-tête)
  }
} 

Pour répertorier les commentaires, nous ajouterions un élément ul au point d'insertion du composant. Nous allons utiliser l'aide createEl pour y parvenir et définir sa className sur comment-list :

 exports.onRouteUpdate = async ({location, prevLocation }, pluginOptions) => {
  const commentContainer = document.getElementById ("commentContainer")
  if (commentContainer && location.path! == "/") {
    en-tête const = createEl ("h2")
    header.innerHTML = "Commentaires"
    commentContainer.appendChild (en-tête)
    const commentListUl = createEl ("ul")
    commentListUl.className = "liste de commentaires"
    commentContainer.appendChild (commentListUl)
} 

Ensuite, nous devons rendre les commentaires que nous avons enregistrés dans le répertoire public en un élément ul à l'intérieur des éléments li . Pour cela, nous définissons un assistant qui récupère les commentaires d'une page en utilisant le nom du chemin.

 // Autres helpers
const getCommentsForPage = async slug => {
  const path = slug
    .Divisé("/")
    .filtre (s => s)
    .joindre("/")
  const data = wait fetch (`/ comments / $ {path} .json`)
  renvoyer data.json ()
}
// ... implémente routeupdate ci-dessous 

Nous avons défini un assistant, nommé getCommentsForPage qui accepte les chemins et utilise fetch pour charger les commentaires du public / commentaires avant de les analyser en JSON et de les renvoyer à la fonction appelante.

Maintenant, dans notre rappel onRouteUpdate nous chargerons les commentaires:

 // ... helpers
exports.onRouteUpdate = async ({location, prevLocation}, pluginOptions) => {
  const commentContainer = document.getElementById ("commentContainer")
  if (commentContainer && location.path! == "/") {
    // ... insère un en-tête
    const commentListUl = createEl ("ul")
    commentListUl.className = "liste de commentaires"
    commentContainer.appendChild (commentListUl)
   const comments = wait getCommentsForPage (location.pathname)
} 

Ensuite, définissons un assistant pour créer les éléments de la liste:

 // .... autres helpers

const getCommentListItem = comment => {
  const li = createEl ("li")
  li.className = "élément de liste de commentaires"

  const nameCont = createEl ("div")
  const name = createEl ("strong", "comment-author", comment.name)
  const date = createEl (
    "envergure",
    "date-commentaire",
    nouvelle date (comment.createdAt) .toLocaleDateString ()
  )
  // date.className = "date"
  nameCont.append (nom)
  nameCont.append (date)

  const commentCont = createEl ("div", "comment-cont", comment.content)

  li.append (nameCont)
  li.append (commentCont)
  retourner li
}

// ... onRouteUpdateImplementation 

Dans l'extrait ci-dessus, nous avons créé un élément li avec un className de comment-list-item et un div pour l'auteur et l'heure du commentaire. Nous avons ensuite créé une autre div pour le texte du commentaire, avec un className de comment-cont .

Pour afficher la liste des commentaires, nous parcourons les commentaires récupérés à l'aide de l'aide getComments puis appelez l'aide getCommentListItem pour créer un élément de liste. Enfin, nous l'ajoutons à l'élément

:

 // ... helpers
exports.onRouteUpdate = async ({location, prevLocation}, pluginOptions) => {
  const commentContainer = document.getElementById ("commentContainer")
  if (commentContainer && location.path! == "/") {
    // ... insère un en-tête
    const commentListUl = createEl ("ul")
    commentListUl.className = "liste de commentaires"
    commentContainer.appendChild (commentListUl)
   const comments = wait getCommentsForPage (location.pathname)
    if (comments && comments.length) {
      comments.map (comment => {
        const html = getCommentListItem (commentaire)
        commentListUl.append (html)
        retourner le commentaire
      })
    }
} 

Pour permettre aux utilisateurs de publier un commentaire, nous devons faire une demande POST au point de terminaison / comments de l'API. Nous avons besoin d'un formulaire pour créer ce formulaire. Créons un assistant de formulaire qui renvoie un élément de formulaire HTML.

 // ... autres aides
const createCommentForm = () => {
  const form = createEl ("formulaire")
  form.className = "formulaire-commentaire"
  const nameInput = createEl ("entrée", "nom-entrée", null)
  nameInput.type = "text"
  nameInput.placeholder = "Votre nom"
  form.appendChild (nameInput)
  const commentInput = createEl ("zone de texte", "entrée de commentaire", null)
  commentInput.placeholder = "Commentaire"
  form.appendChild (commentInput)
  const feedback = createEl ("span", "feedback")
  form.appendChild (commentaires)
  const button = createEl ("button", "comment-btn", "Submit")
  button.type = "soumettre"
  form.appendChild (bouton)
  formulaire de retour
} 

L'assistant crée un élément d'entrée avec un className de nom-entrée une zone de texte avec un className de ] comment-input un span avec un className de feedback et un bouton avec un className de comment-btn .

Nous pouvons maintenant ajouter le formulaire au point d'insertion, à l'aide de createCommentForm helper:

 // ... helpers
exports.onRouteUpdate = async ({location, prevLocation}, pluginOptions) => {
  const commentContainer = document.getElementById ("commentContainer")
  if (commentContainer && location.path! == "/") {
    // insérer un en-tête
    // insérer une liste de commentaires
    commentContainer.appendChild (createCommentForm ())
  }
} 

Pour publier un commentaire sur le serveur, nous devons dire à l'utilisateur ce qui se passe – par exemple, qu'une entrée est requise ou que l'API a renvoyé une erreur. L'élément est destiné à cela. Pour faciliter la mise à jour de cet élément, nous créons un assistant qui définit l'élément et insère une nouvelle classe en fonction du type de feedback (que ce soit une erreur, une info ou un succès).

 // ... autres helpers
// Définit la classe et le texte de la rétroaction du formulaire
const updateFeedback = (str = "", className) => {
  const feedback = document.querySelector (". feedback")
  feedback.className = `feedback $ {className? className: ""} `.trim ()
  feedback.innerHTML = str
  retour de commentaires
}
// callback onRouteUpdate 

Nous utilisons l'API querySelector pour obtenir l'élément. Ensuite, nous définissons la classe en mettant à jour l'attribut className de l'élément. Enfin, nous utilisons innerHTML pour mettre à jour le contenu de l'élément avant de le renvoyer.

Nous écouterons l'événement onSubmit du formulaire de commentaire pour déterminer quand un utilisateur a décidé de soumettre le formulaire. Nous ne voulons pas que des données vides soient soumises, nous allons donc définir un message de rétroaction et désactiver le bouton de soumission jusqu'à ce que vous en ayez besoin:

 exports.onRouteUpdate = async ({location, prevLocation}, pluginOptions) => {
  // Ajoute un en-tête
  // Ajoute la liste des commentaires
  // Ajoute un formulaire de commentaire
  document
    .querySelector ("body .comment-form")
    .addEventListener ("soumettre", fonction asynchrone (événement) {
      event.preventDefault ()
      updateFeedback ()
      const nom = document.querySelector (". nom-entrée"). valeur
      const comment = document.querySelector (". comment-input"). value
      si (! nom) {
        return updateFeedback ("Le nom est requis")
      }
      si (! commentaire) {
        return updateFeedback ("Un commentaire est requis")
      }
      updateFeedback ("Enregistrement du commentaire", "info")
      const btn = document.querySelector (". comment-btn")
      btn.disabled = true
      const data = {
        Nom,
        contenu: commentaire,
        slug: location.pathname,
        site web: pluginOptions.website,
      }

      récupérer (
        "https://cors-anywhere.herokuapp.com/gatsbyjs-comment-server.herokuapp.com/comments",
        {
          corps: JSON.stringify (données),
          méthode: "POST",
          en-têtes: {
            Accepter: "application / json",
            "Content-Type": "application / json",
          },
        }
      ) .then (fonction asynchrone (résultat) {
        const json = attendre result.json ()
        btn.disabled = false

        if (! result.ok) {
          updateFeedback (json.error.msg, "erreur")
        } autre {
          document.querySelector (". nom-entrée"). value = ""
          document.querySelector (". comment-input"). value = ""
          updateFeedback ("Le commentaire a été enregistré!", "succès")
        }
      }). catch (async err => {
        const errorText = attendre err.text ()
        updateFeedback (errorText, "error")
      })
    })
} 

Nous utilisons document.querySelector pour obtenir le formulaire à partir de la page, et nous écoutons son événement submit . Ensuite, nous définissons le retour sur une chaîne vide, quelle qu'elle soit avant que l'utilisateur ne tente de soumettre le formulaire.

Nous vérifions également si le nom ou le champ de commentaire est vide, en définissant un message d'erreur en conséquence.

Ensuite, nous faisons une demande POST au serveur de commentaires au point de terminaison / comments en écoutant la réponse. Nous utilisons les commentaires pour indiquer à l'utilisateur s'il y a eu une erreur lors de la création du commentaire, et nous les utilisons également pour lui dire si la soumission du commentaire a réussi.

Ajout d'une feuille de style

Pour ajouter des styles au composant , nous devons créer un nouveau fichier, style.css à la racine de notre dossier de plugins, avec le contenu suivant:

 #commentContainer {
}

.comment-form {
  affichage: grille;
} 

En haut de gatsby-browser.js importez-le comme ceci:

 import "./style.css"[19659046delalargeurdeleurconteneur
 Enfin, tous les composants de notre plugin de commentaires sont complets. Il est temps d'installer et de tester ce fantastique plugin que nous avons construit. 
 Testez le plugin 
 Créez un site Web Gatsby 
 Exécutez la commande suivante à partir d'un répertoire un niveau au-dessus du répertoire du plugin: 
 // PARENT
// ├── PLUGIN
// ├── Site Web de Gatsby

gatsby new private-blog https://github.com/gatsbyjs/gatsby-starter-blog[19659125[Installerlepluginlocalementetajouterdesoptions
 Lien avec npm 
 Ensuite, passez au répertoire du blog, car nous avons besoin pour créer un lien pour le nouveau plugin: 
 cd / path / to / blog
lien npm ../path/to/plugin/folder[19659129[Ajouteràgatsby-configjs
 Dans le fichier  gatsby-config.js  du dossier de blog, nous devons ajouter un nouvel objet qui a une clé de résolution   et qui a  nom-du-dossier-plugin  comme valeur de l'installation du plugin. Dans ce cas, le nom est  gatsby-comment-server-plugin : 
 module.exports = {
  // ...
  plugins: [
    // ...
    "gatsby-plugin-dom-injector",
    {
      resolve: "gatsby-comment-server-plugin",
      options: {website: "https://url-of-website.com"},
    },
  ],
} 
 Notez que le plug-in accepte une option de site Web   pour distinguer la source des commentaires lors de la récupération et de l'enregistrement des commentaires.
 Mettez à jour le composant de blog
 Pour le point d'insertion, nous allons ajoutez 
 au composant de modèle de publication à  src / templates / blog-post.js  du projet de blog. Cela peut être inséré à n'importe quelle position appropriée; J'ai inséré le mien après le dernier élément  h  et avant le pied de page  .
 Démarrer le serveur de développement
 Enfin, nous pouvons démarrer le serveur de développement avec  gatsby develop qui rendra notre site Web disponible localement à  http: // localhost: 8000 . La navigation vers n'importe quelle page de publication, comme  http: // localhost: 8000 / new-beginnings révèlera le commentaire au point d'insertion que nous avons spécifié ci-dessus.
 Nous pouvons créer un commentaire en utilisant le formulaire de commentaire , et il fournira des commentaires utiles lorsque nous interagirons avec lui.
 Pour répertorier les commentaires récemment publiés, nous devons redémarrer le serveur, car notre contenu est statique.
 Conclusion
 Dans ce didacticiel, nous avons introduit Gatsby
 Notre plug-in utilise différentes API de Gatsby et ses propres fichiers API pour fournir des commentaires pour notre site Web, illustrant comment nous pouvons utiliser des plug-ins pour ajouter des fonctionnalités importantes à un site Web Gatsby.
 Bien que nous tirent d'un serveur en direct, le plugin enregistre les commentaires dans des fichiers JSON. Nous pourrions faire le plugin charger des commentaires à la demande du serveur API, mais cela irait à l'encontre de la notion que notre blog est un site Web statique qui ne nécessite pas de contenu dynamique.
 Le plugin intégré dans cet article existe en tant que  npm module tandis que le code complet est  sur GitHub .
 Références:
 Ressources:
 Gatsby's blog starter GitHub 
 Un référentiel de blog privé disponible pour vous pour créer un site Web Gatsby pour consommer le plug-in.
 Gatsby Starter Blog Netlify 
 Le site Web du blog pour ce didacticiel, déployé sur Netlify pour les tests.
 (yk) [19659151]
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires