Catégories
Plugin et site web

Comprendre le développement de plugins dans Gatsby – Smashing Magazine

Gatsby est un générateur de sites statiques moderne qui a remanié la façon dont les sites Web statiques sont construits. Il intègre React, Node.js et GraphQL pour créer des sites Web époustouflants et ultra-rapides. Dans cet article, nous discuterons des plugins Gatsby et développerons notre propre plugin de commentaire.

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 présenterai les plugins Gatsby, discuterai des types de plugins Gatsby qui existent, différencierai les formes des plugins Gatsby et, enfin, créerai un plugin de commentaires qui peut être utilisé sur n'importe quel site Web Gatsby, dont nous installerons l'un à la fin du didacticiel.

Qu'est-ce qu'un plugin Gatsby?

Gatsby, en tant que générateur de site statique, 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 comme la création d'un manifest.json fichier pour une application Web progressive (PWA), intégrant des tweets sur une page, enregistrant les pages vues, et bien plus encore sur un site Web Gatsby à l'aide de plugins.

Types de 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 /plugins annuaire. Les plugins externes sont ceux disponibles via npm ou Yarn. En outre, ils peuvent être sur le même ordinateur mais liés à l'aide du yarn link ou npm link commande dans un projet de site Web Gatsby.

Formes de plugins Gatsby

Les plugins existent également sous trois formes principales et sont définis par leurs cas d'utilisation:

Composants d'un plugin Gatsby

Pour créer un plugin Gatsby, nous devons définir quelques fichiers:

  • gatsby-node.js
    Permet d'é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 le navigateur.
  • 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 du répertoire d'un plugin, local ou externe.

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

Pour apprendre à développer un plugin 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.

Présentation et chargement des commentaires

Pour servir des commentaires sur un site Web, nous devons fournir un serveur qui permet la sauvegarde et le chargement des commentaires. Nous utiliserons un serveur de commentaires déjà disponible sur gatsbyjs-comment-server.herokuapp.com dans ce but.

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

  • content: (string)
    Le commentaire lui-même,
  • author: (string)
    Le nom de l'auteur du commentaire,
  • website
    Le site Web à partir duquel le commentaire est publié,
  • slug
    Limace de la page à laquelle le commentaire est destiné.

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

Tout comme nous le faisons lors de la création d'un blog Gatsby, pour créer un plugin externe, nous devons commencer par le 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.

Installer axios pour les requêtes réseau

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

npm install axios --save
// or
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 étendraient. Pour cela, dans le dossier plugin, notre gatsby-node.js le fichier doit contenir le code ci-dessous:

exports.sourceNodes = async ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type CommentServer implements Node {
      _id: String
      author: String
      string: String
      content: String
      website: String
      slug: String
      createdAt: Date
      updatedAt: Date
    }
  `;
  createTypes(typeDefs);
};

Tout d'abord, nous avons tiré actions à partir des API fournies par Gatsby. Ensuite, nous avons retiré le createTypes action, après quoi nous avons défini un CommentServer type 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 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 «sourcing de nœuds» dans Gatsby.

Pour trouver de nouveaux nœuds, nous devons implémenter le sourceNodes API 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 createNode action.

Nous pouvons ajouter le code ci-dessous au plugin gatsby-node.js Fichier API, 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 implements Node {
      _id: String
      author: String
      string: String
      website: String
      content: String
      slug: String
      createdAt: Date
      updatedAt: Date
    }
  `;
  createTypes(typeDefs);

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

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

  const comments = result.data;

  function convertCommentToNode(comment, { createContentDigest, createNode }) {
    const nodeContent = JSON.stringify(comment);

    const nodeMeta = {
      id: createNodeId(`comments-${comment._id}`),
      parent: null,
      children: (),
      internal: {
        type: `CommentServer`,
        mediaType: `text/html`,
        content: nodeContent,
        contentDigest: createContentDigest(comment),
      },
    };

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

  for (let i = 0; i < comments.data.length; i++) {
    const comment = comments.data(i);
    convertCommentToNode(comment, { 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 les commentaires en nœuds Gatsby, en utilisant les aides à l'action fournies 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 des messages. Gatsby a une API pour celle appelée createResolvers. Nous pouvons rendre cela possible en ajoutant le code ci-dessous dans le gatsby-node.js fichier du plugin:

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    MarkdownRemark: {
      comments: {
        type: ("CommentServer"),
        resolve(source, args, context, info) {
          return context.nodeModel.runQuery({
            query: {
              filter: {
                slug: { eq: source.fields.slug },
              },
            },
            type: "CommentServer",
            firstOnly: false,
          });
        },
      },
    },
  };
  createResolvers(resolvers);
};

Ici, nous étendons MarkdownRemark inclure un comments champ. Le nouvellement ajouté comments le champ se résoudra en CommentServer type, en fonction du slug avec lequel le commentaire a été enregistré et du slug du post.

Code final pour la recherche et la transformation des commentaires

Le code final pour le gatsby-node.js Le fichier 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 implements Node {
      _id: String
      author: String
      string: String
      website: String
      content: String
      slug: String
      createdAt: Date
      updatedAt: Date
    }
  `;
  createTypes(typeDefs);

  const { createNode } = actions;
  const { limit, website } = pluginOptions;
  const _limit = parseInt(limit || 10000); // FETCH ALL COMMENTS
  const _website = website || "";

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

  const comments = result.data;

  function convertCommentToNode(comment, { createContentDigest, createNode }) {
    const nodeContent = JSON.stringify(comment);

    const nodeMeta = {
      id: createNodeId(`comments-${comment._id}`),
      parent: null,
      children: (),
      internal: {
        type: `CommentServer`,
        mediaType: `text/html`,
        content: nodeContent,
        contentDigest: createContentDigest(comment),
      },
    };

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

  for (let i = 0; i < comments.data.length; i++) {
    const comment = comments.data(i);
    convertCommentToNode(comment, { createNode, createContentDigest });
  }
};

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    MarkdownRemark: {
      comments: {
        type: ("CommentServer"),
        resolve(source, args, context, info) {
          return context.nodeModel.runQuery({
            query: {
              filter: {
                website: { eq: source.fields.slug },
              },
            },
            type: "CommentServer",
            firstOnly: false,
          });
        },
      },
    },
  };
  createResolvers(resolvers);
};

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 de requête GraphQL.

Pour ce faire, nous mettrons en œuvre le createPageStatefully API dans legatsby-node.js Fichier API du plugin. Nous utiliserons le fs module pour vérifier si le chemin existe avant de créer un fichier dedans. Le code ci-dessous montre comment nous pouvons implémenter cela:

import fs from "fs"
import {resolve: pathResolve} from "path"
exports.createPagesStatefully = async ({ graphql }) => {
  const comments = await graphql(
    `
      {
        allCommentServer(limit: 1000) {
          edges {
            node {
              name
              slug
              _id
              createdAt
              content
            }
          }
        }
      }
    `
  )

  if (comments.errors) {
    throw comments.errors
  }

  const markdownPosts = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: (frontmatter___date), order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `
  )

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

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

  var exists = fs.existsSync(commentsPublicPath) //create destination directory if it doesn't exist

  if (!exists) {
    fs.mkdirSync(commentsPublicPath)
  }

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

    const strippedPath = path
      .split("/")
      .filter(s => s)
      .join("/")
    const _commentPath = pathResolve(
      process.cwd(),
      "public/comments",
      `${strippedPath}.json`
    )
    fs.writeFileSync(_commentPath, JSON.stringify(commentsForPost))
  })
}

Tout d'abord, nous avons besoin du fs, et resolve la fonction du path module. 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. Et puis nous vérifions 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 retirons les commentaires des articles actuels et les stockons dans le public/comments , avec le slug de la publication comme nom de fichier.

le .gitignore à la racine d'un site Web Gatsby exclut 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 plug-in. 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 effectuer la récupération de fichiers et l'insertion de composants est lorsqu'une page vient d'être visitée. le onRouteUpdate L'API fournit cette fonctionnalité et passe le apiHelpers et pluginOpions comme arguments de 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 classNameet ajoutez du contenu. Au sommet de la gatsby-browser.js fichier, nous pouvons ajouter le code ci-dessous:

// Creates element, set class. innerhtml then returns it.
 function createEl (name, className, html = null) {
  const el = document.createElement(name)
  el.className = className
  el.innerHTML = html
  return el
}

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

// ...

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

Pour lister les commentaires, nous appendrions un ul l'élément au point d'insertion du composant. Nous utiliserons le createEl aider à atteindre cet objectif, et définir son className à comment-list:

exports.onRouteUpdate = async ({ location, prevLocation }, pluginOptions) => {
  const commentContainer = document.getElementById("commentContainer")
  if (commentContainer && location.path !== "/") {
    const header = createEl("h2")
    header.innerHTML = "Comments"
    commentContainer.appendChild(header)
    const commentListUl = createEl("ul")
    commentListUl.className = "comment-list"
    commentContainer.appendChild(commentListUl)
}

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

// Other helpers
const getCommentsForPage = async slug => {
  const path = slug
    .split("/")
    .filter(s => s)
    .join("/")
  const data = await fetch(`/comments/${path}.json`)
  return data.json()
}
// ... implements routeupdate below

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

Maintenant, dans notre onRouteUpdate rappel, nous chargerons les commentaires:

// ... helpers
exports.onRouteUpdate = async ({ location, prevLocation }, pluginOptions) => {
  const commentContainer = document.getElementById("commentContainer")
  if (commentContainer && location.path !== "/") {
    //... inserts header
    const commentListUl = createEl("ul")
    commentListUl.className = "comment-list"
    commentContainer.appendChild(commentListUl)
   const comments = await getCommentsForPage(location.pathname)
}

Définissons ensuite un assistant pour créer les éléments de la liste:

// .... other helpers

const getCommentListItem = comment => {
  const li = createEl("li")
  li.className = "comment-list-item"

  const nameCont = createEl("div")
  const name = createEl("strong", "comment-author", comment.name)
  const date = createEl(
    "span",
    "comment-date",
    new Date(comment.createdAt).toLocaleDateString()
  )
  // date.className="date"
  nameCont.append(name)
  nameCont.append(date)

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

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

// ... onRouteUpdateImplementation

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

Pour afficher les éléments de liste des commentaires, nous parcourons les commentaires récupérés à l'aide du getComments assistant, puis appelez le getCommentListItem aide pour créer un élément de liste. Enfin, nous l’annexons au

    élément:

    // ... helpers
    exports.onRouteUpdate = async ({ location, prevLocation }, pluginOptions) => {
      const commentContainer = document.getElementById("commentContainer")
      if (commentContainer && location.path !== "/") {
        //... inserts header
        const commentListUl = createEl("ul")
        commentListUl.className = "comment-list"
        commentContainer.appendChild(commentListUl)
       const comments = await getCommentsForPage(location.pathname)
        if (comments && comments.length) {
          comments.map(comment => {
            const html = getCommentListItem(comment)
            commentListUl.append(html)
            return comment
          })
        }
    }

    Pour permettre aux utilisateurs de poster un commentaire, nous devons faire un POST demande au /comments point final 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.

    // ... other helpers
    const createCommentForm = () => {
      const form = createEl("form")
      form.className = "comment-form"
      const nameInput = createEl("input", "name-input", null)
      nameInput.type = "text"
      nameInput.placeholder = "Your Name"
      form.appendChild(nameInput)
      const commentInput = createEl("textarea", "comment-input", null)
      commentInput.placeholder = "Comment"
      form.appendChild(commentInput)
      const feedback = createEl("span", "feedback")
      form.appendChild(feedback)
      const button = createEl("button", "comment-btn", "Submit")
      button.type = "submit"
      form.appendChild(button)
      return form
    }

    L'assistant crée un élément d'entrée avec un className de name-input, une textarea avec un className de comment-input, une span avec un className de feedbacket un bouton avec un className de comment-btn.

    Nous pouvons maintenant ajouter le formulaire au point d'insertion, en utilisant le createCommentForm assistant:

    // ... helpers
    exports.onRouteUpdate = async ({ location, prevLocation }, pluginOptions) => {
      const commentContainer = document.getElementById("commentContainer")
      if (commentContainer && location.path !== "/") {
        // insert header
        // insert comment list
        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. le é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).

    // ... other helpers
    // Sets the class and text of the form feedback
    const updateFeedback = (str = "", className) => {
      const feedback = document.querySelector(".feedback")
      feedback.className = `feedback ${className ? className : ""}`.trim()
      feedback.innerHTML = str
      return feedback
    }
    // onRouteUpdate callback

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

    Nous écouterons le onSubmit événement 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 cela soit nécessaire:

    exports.onRouteUpdate = async ({ location, prevLocation }, pluginOptions) => {
      // Appends header
      // Appends comment list
      // Appends comment form
      document
        .querySelector("body .comment-form")
        .addEventListener("submit", async function (event) {
          event.preventDefault()
          updateFeedback()
          const name = document.querySelector(".name-input").value
          const comment = document.querySelector(".comment-input").value
          if (!name) {
            return updateFeedback("Name is required")
          }
          if (!comment) {
            return updateFeedback("Comment is required")
          }
          updateFeedback("Saving comment", "info")
          const btn = document.querySelector(".comment-btn")
          btn.disabled = true
          const data = {
            name,
            content: comment,
            slug: location.pathname,
            website: pluginOptions.website,
          }
    
          fetch(
            "https://cors-anywhere.herokuapp.com/gatsbyjs-comment-server.herokuapp.com/comments",
            {
              body: JSON.stringify(data),
              method: "POST",
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
              },
            }
          ).then(async function (result) {
            const json = await result.json()
            btn.disabled = false
    
            if (!result.ok) {
              updateFeedback(json.error.msg, "error")
            } else {
              document.querySelector(".name-input").value = ""
              document.querySelector(".comment-input").value = ""
              updateFeedback("Comment has been saved!", "success")
            }
          }).catch(async err => {
            const errorText = await err.text()
            updateFeedback(errorText, "error")
          })
        })
    }

    Nous utilisons document.querySelector pour obtenir le formulaire de la page, et nous écoutons son submit un événement. 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 un POST demande au serveur de commentaires au /comments point final, à l'écoute de la réponse. Nous utilisons les commentaires pour dire à 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 {
      display: grid;
    }

    Au sommet de gatsby-browser.js, importez-le comme ceci:

    import "./style.css"

    Cette règle de style fait que les composants du formulaire occupent 100% de la largeur de leur conteneur.

    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éer un site Web Gatsby

    Exécutez la commande suivante à partir d'un répertoire situé un niveau au-dessus du répertoire du plugin:

    // PARENT
    // ├── PLUGIN
    // ├── Gatsby Website
    
    gatsby new private-blog https://github.com/gatsbyjs/gatsby-starter-blog

    Installer le plugin localement et ajouter des options

    Ensuite, passez au répertoire du blog, car nous devons créer un lien pour le nouveau plugin:

    cd /path/to/blog
    npm link ../path/to/plugin/folder
    Ajouter à gatsby-config.js

    dans le gatsby-config.js fichier du dossier de blog, nous devons ajouter un nouvel objet qui a un resolve clé et qui a name-of-plugin-folder 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 plugin accepte un website option pour distinguer la source des commentaires lors de la récupération et de l'enregistrement des commentaires.

    Mettre à jour le composant de blog

    Pour le point d'insertion, nous ajouterons

    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 hr élément et avant la footer.

    Démarrez 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 à l'adresse http://localhost:8000. Accéder à 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 tutoriel, nous avons présenté les plugins Gatsby et montré comment en créer un.

    Notre plugin 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 plugins pour ajouter des fonctionnalités importantes à un site Web Gatsby.

    Bien que nous tirions d'un serveur en direct, le plugin enregistre les commentaires dans des fichiers JSON. Nous pourrions faire en sorte que le plugin charge les commentaires à la demande du serveur API, mais cela irait à l'encontre de l'idée 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 module npm, tandis que le code complet est sur GitHub.

    Références:

    Ressources:

    • Démarreur du blog de Gatsby, GitHub
      Un dépôt de blog privé disponible pour créer un site Web Gatsby pour consommer le plugin.
    • Blog de démarrage Gatsby, Netlify
      Le site Web du blog pour ce didacticiel, déployé sur Netlify pour les tests.
    Smashing Editorial(yk)

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *