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 dansgatsby-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 {
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.
Source link
