Comment analyser le contenu de WordPress Gutenberg - Photon Flux | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide !

Gutenberg est l'éditeur par défaut de WordPress. Cet éditeur permet de créer et de concevoir du contenu à l'aide de blocs discrets de texte, d'images, de vidéos et d'autres éléments de site web par le biais d'une interface de type glisser-déposer. Cette approche améliore la flexibilité et les capacités de conception de WordPress.

Image[1]-Comment analyser le contenu de WordPress Gutenberg - Photon Flux | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide !

Obtenir le contenu de Gutenberg avec l'API REST

Pour interagir de manière programmatique avec un site WordPress et récupérer du contenu structuré dans les blocs Gutenberg, vous pouvez utiliser l'API WordPress REST ou le plugin WPGraphQL. Ces outils vous permettent de récupérer le contenu de WordPress au format JSON.

Pour permettre l'accès aux données JSON via l'API REST, modifiez les paramètres des permaliens de WordPress en les éloignant de "Plain". De cette manière, il est possible d'accéder à l'API par le biais d'une URL dans un format spécifique, comme indiqué ci-dessous :


https://yoursite.com/wp-json/wp/v2
https://yoursite.com/wp-json/wp/v2
https://yoursite.com/wp-json/wp/v2

En envoyant des requêtes API à cette URL, vous pouvez récupérer de manière programmatique diverses informations et effectuer des actions sur votre site WordPress. Par exemple, vous pouvez obtenir une liste d'articles en envoyant une requête GET à l'adresse suivante :


https://yoursite.com/wp-json/wp/v2/posts
https://yoursite.com/wp-json/wp/v2/posts
https://yoursite.com/wp-json/wp/v2/posts

Un objet JSON est renvoyé contenant des informations sur l'article sur le site WordPress, y compris le titre, le contenu, les détails de l'auteur, etc.

Image [2] - Comment analyser le contenu de WordPress Gutenberg - Photon Flux | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide !

Analyse des blocs Gutenberg en HTML

Lors de la récupération des articles d'un site WordPress à l'aide de l'éditeur Gutenberg, le contenu stocké dans la base de données peut utiliser un mélange de métadonnées HTML et JSON pour décrire différents types de blocs, tels que les citations et les galeries :


<!-- wp:quote {"className":"inspirational-quote","style":{"typography":{"fontSize":"large"}}} -->
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"Le voyage d'un millier de kilomètres commence par un pas.</p><cite>Lao Tzu</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:gallery {"ids":[34,35],"columns":2,"linkTo":"none","sizeSlug":"medium","className":"custom-gallery"} -->
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery"><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Une vue imprenable sur les montagnes" class="wp-image-34"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Lac serein à l&#039;aube" class="wp-image-35"/></figure></li></ul>
<!-- /wp:gallery -->
<!-- wp:quote {"className":"inspirational-quote","style":{"typography":{"fontSize":"large"}}} -->
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"Le voyage d'un millier de kilomètres commence par un pas.</p><cite>Lao Tzu</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:gallery {"ids":[34,35],"columns":2,"linkTo":"none","sizeSlug":"medium","className":"custom-gallery"} -->
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery"><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Une vue imprenable sur les montagnes" class="wp-image-34"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Lac serein à l&#039;aube" class="wp-image-35"/></figure></li></ul>
<!-- /wp:gallery -->
<!-- wp:quote {"className":"inspirational-quote","style":{"typography":{"fontSize":"large"}}} -->
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"Le voyage d'un millier de kilomètres commence par un pas.</p><cite>Lao Tzu</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:gallery {"ids":[34,35],"columns":2,"linkTo":"none","sizeSlug":"medium","className":"custom-gallery"} -->
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery"><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Une vue imprenable sur les montagnes" class="wp-image-34"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Lac serein à l&#039;aube" class="wp-image-35"/></figure></li></ul>
<!-- /wp:gallery -->

Cet extrait montre deux blocs Gutenberg : une citation et une galerie. Chaque bloc contient des métadonnées JSON encapsulées dans des commentaires HTML. Les métadonnées définissent des attributs tels que les noms de classe, les styles et d'autres configurations liées à la présentation des blocs.

Image [3] - Comment analyser le contenu de WordPress Gutenberg - Photon Flux | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide !

Lorsque vous récupérez ces blocs via l'API WordPress REST ou WPGraphQL, WordPress les traite et convertit la combinaison de métadonnées HTML et JSON en éléments HTML entièrement rendus que vous pouvez intégrer directement dans vos pages. Le code HTML converti du bloc ci-dessus est affiché ci-dessous :


<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"Le voyage d'un millier de kilomètres commence par un pas.</p><cite>Lao Tzu</cite></blockquote>
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery">
  <li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Une vue imprenable sur les montagnes" class="wp-image-34" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
  <li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Lac serein à l&#039;aube" class="wp-image-35" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
</ul>
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"Le voyage d'un millier de kilomètres commence par un pas.</p><cite>Lao Tzu</cite></blockquote>

<ul class="wp-block-gallery columns-2 is-cropped custom-gallery">
  <li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Une vue imprenable sur les montagnes" class="wp-image-34" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
  <li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Lac serein à l&#039;aube" class="wp-image-35" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
</ul>
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>"Le voyage d'un millier de kilomètres commence par un pas.</p><cite>Lao Tzu</cite></blockquote>

<ul class="wp-block-gallery columns-2 is-cropped custom-gallery">
  <li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="Une vue imprenable sur les montagnes" class="wp-image-34" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
  <li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Lac serein à l&#039;aube" class="wp-image-35" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
</ul>

Pour les développeurs qui construisent des applications découplées ou qui utilisent des frameworks JavaScript tels que Next.js, cela permet d'afficher facilement du contenu en injectant du HTML directement dans la page à l'aide d'attributs.dangereusementSetInnerHTMLpour présenter les marqueurs.


<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />
<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />
<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />

Image [4] - Comment analyser le contenu de WordPress Gutenberg - Photon Flux | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide !

Parse le contenu des blocs Gutenberg dans un site statique Next.js

Nous avons extrait le contenu de WordPress dans un projet Next.js, puis analysé les blocs Gutenberg en HTML.

1) Commencez par mettre en place une fonction pour récupérer les articles du site WordPress. Ouvrez la fonction src/page.js et remplacez son contenu par l'extrait de code suivant :


const getWpPosts = async () => {
const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts') ;
  const posts = await res.json() ;
const posts = await await res.json() ; return posts ;
} ;
const getWpPosts = async () => {
const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts') ;
  const posts = await res.json() ;
const posts = await await res.json() ; return posts ;
} ;
const getWpPosts = async () => {
const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts') ;
  const posts = await res.json() ;
const posts = await await res.json() ; return posts ;
} ;

Cette fonction asynchrone effectue une requête à l'API REST de WordPress. Elle récupère tous les articles disponibles sur votre site et les renvoie sous forme de tableau.

2) Ensuite, utilisons le message récupéré dans un simple composant de page Next.js en enregistrant le message dans la console et en affichant le message d'accueil de base :


const page = async () => {
  const posts = await getWpPosts() ; console.log(posts) ;
  console.log(posts) ;
  return (
    <div>
      <h1>Bonjour le monde</h1>
    </div>
  ) ;
}.
export default page.
const page = async () => {
  const posts = await getWpPosts() ; console.log(posts) ;
  console.log(posts) ;

  return (
    <div>
      <h1>Bonjour le monde</h1>
    </div>
  ) ;
}.

export default page.
const page = async () =&gt; {
  const posts = await getWpPosts() ; console.log(posts) ;
  console.log(posts) ;

  return (
    <div>
      <h1>Bonjour le monde</h1>
    </div>
  ) ;
}.

export default page.

Lorsque vous exécutez un projet à l'aide denpm run devIl affiche un message "Hello World" et enregistre le message recherché dans le terminal.


[
  {
    "_links" : {
      "about" : [...] ,
      "auteur" : [...] , "collection" : [...] , "auteur" : [...]
      "collection" : [...] , "curies" : [...] , "collection" : [...]
      "curies" : [...] . ,
      "predecessor-version" : [...] . , "replies" : [...] , "replies" : [...] , "predecessor-version" : [...]
      "replies" : [...] . , "self" : [...] , "replies" : [...]
      "self" : [...] , "version-history" : [...] , "replies" : [...] , "self" : [...]
      "version-history" : [...] . , "wp:attachment" : [...] , "self" : [...] , "version-history" : [...]
      "wp:attachment" : [...] . , "wp:term" : [...] , "version-history" : [...] , "wp:attachment" : [...]
      "wp:term" : [...] .
    },
    
    "categories" : [...] } , "comment_status" : "open", "comment_status" : "open", "wp:term" : [...] }
    "comment_status" : "open", "content" : { "wp:term" : [...] }
    "content" : {
      "protected" : false, "rendered" : "\new", "content" : {
      "rendered" : "\n<p>Le feu, force primitive, séduit par sa puissance. <strong>flammes vacillantes</strong>Il évoque à la fois l'admiration et la prudence. <quote>danse</quote> symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu exige le respect pour son pouvoir de dévaster.</p>\n\n\n\n\n\n\n<figure class="\"wp-block-image" size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Dans l'Antiquité, le feu était un phare de lumière et de chaleur, essentiel à la survie. Aujourd'hui, il reste un symbole de l'ingéniosité humaine et du danger. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle la fragilité de notre relation avec le monde. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle notre relation fragile avec les éléments. éléments.</p>\n\n\n\n\n\n\n<figure class="\"wp-block-image" size-large\"><img decoding="\"async\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Vous pouvez consulter d'autres articles sur notre blog.</p>\n\n\n\n\n\n\n<ul>\n<li><a href="/fr/"https:>Lorem Ipsum : Les débuts</a></li>\n\n\n\n\n\n\n<li><a href="/fr/"https:>Lorem Ipsum : Acte 2</a></li>\n\n\n\n\n\n\n<li><a href="/fr/"https:>Lorem Ipsum : Acte 3</a></li>\n</ul>\n"
    },
    "date" : "2024-02-27T12:08:30",
    "date_gmt" : "2024-02-27T12:08:30",
    "excerpt" : {
      "protected" : faux, "rendered" :
      "rendu" : "<p>Le feu, force primitive, captive par ses flammes vacillantes, suscitant à la fois crainte et prudence. Sa danse symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu impose le respect pour son pouvoir de dévastation. Dans l'Antiquité, le feu était un phare de lumière et de chaleur, [...]</p>\n"
    },
    "featured_media" : 0,
    "format" : "standard",
    "guid" : {
      "rendered" : "https://yoursite.com/?p=13"
    },
    
    
    "meta" : {
      "footnotes" : ""
    },
    
    
    
    
    
    
    
    "template" : "",
    "title" : {
      "rendered" : "Feu"
    },
    "type" : "post"
   },
  },
  ...
]
[
  {
    "_links" : {
      "about" : [...] ,
      "auteur" : [...] , "collection" : [...] , "auteur" : [...]
      "collection" : [...] , "curies" : [...] , "collection" : [...]
      "curies" : [...] . ,
      "predecessor-version" : [...] . , "replies" : [...] , "replies" : [...] , "predecessor-version" : [...]
      "replies" : [...] . , "self" : [...] , "replies" : [...]
      "self" : [...] , "version-history" : [...] , "replies" : [...] , "self" : [...]
      "version-history" : [...] . , "wp:attachment" : [...] , "self" : [...] , "version-history" : [...]
      "wp:attachment" : [...] . , "wp:term" : [...] , "version-history" : [...] , "wp:attachment" : [...]
      "wp:term" : [...] .
    },
    
    "categories" : [...] } , "comment_status" : "open", "comment_status" : "open", "wp:term" : [...] }
    "comment_status" : "open", "content" : { "wp:term" : [...] }
    "content" : {
      "protected" : false, "rendered" : "\new", "content" : {
      "rendered" : "\n<p>Le feu, force primitive, séduit par sa puissance. <strong>flammes vacillantes</strong>Il évoque à la fois l'admiration et la prudence. <quote>danse</quote> symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu exige le respect pour son pouvoir de dévaster.</p>\n\n\n\n\n\n\n<figure class="\"wp-block-image" size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Dans l'Antiquité, le feu était un phare de lumière et de chaleur, essentiel à la survie. Aujourd'hui, il reste un symbole de l'ingéniosité humaine et du danger. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle la fragilité de notre relation avec le monde. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle notre relation fragile avec les éléments. éléments.</p>\n\n\n\n\n\n\n<figure class="\"wp-block-image" size-large\"><img decoding="\"async\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Vous pouvez consulter d'autres articles sur notre blog.</p>\n\n\n\n\n\n\n<ul>\n<li><a href="/fr/"https:>Lorem Ipsum : Les débuts</a></li>\n\n\n\n\n\n\n<li><a href="/fr/"https:>Lorem Ipsum : Acte 2</a></li>\n\n\n\n\n\n\n<li><a href="/fr/"https:>Lorem Ipsum : Acte 3</a></li>\n</ul>\n"
    },
    "date" : "2024-02-27T12:08:30",
    "date_gmt" : "2024-02-27T12:08:30",
    "excerpt" : {
      "protected" : faux, "rendered" :
      "rendu" : "<p>Le feu, force primitive, captive par ses flammes vacillantes, suscitant à la fois crainte et prudence. Sa danse symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu impose le respect pour son pouvoir de dévastation. Dans l'Antiquité, le feu était un phare de lumière et de chaleur, [...]</p>\n"
    },
    "featured_media" : 0,
    "format" : "standard",
    "guid" : {
      "rendered" : "https://yoursite.com/?p=13"
    },
    
    
    "meta" : {
      "footnotes" : ""
    },
    
    
    
    
    
    
    
    "template" : "",
    "title" : {
      "rendered" : "Feu"
    },
    "type" : "post"
   },
  },
  ...
]
[
  {
    "_links" : {
      "about" : [...] ,
      "auteur" : [...] , "collection" : [...] , "auteur" : [...]
      "collection" : [...] , "curies" : [...] , "collection" : [...]
      "curies" : [...] . ,
      "predecessor-version" : [...] . , "replies" : [...] , "replies" : [...] , "predecessor-version" : [...]
      "replies" : [...] . , "self" : [...] , "replies" : [...]
      "self" : [...] , "version-history" : [...] , "replies" : [...] , "self" : [...]
      "version-history" : [...] . , "wp:attachment" : [...] , "self" : [...] , "version-history" : [...]
      "wp:attachment" : [...] . , "wp:term" : [...] , "version-history" : [...] , "wp:attachment" : [...]
      "wp:term" : [...] .
    },
    
    "categories" : [...] } , "comment_status" : "open", "comment_status" : "open", "wp:term" : [...] }
    "comment_status" : "open", "content" : { "wp:term" : [...] }
    "content" : {
      "protected" : false, "rendered" : "\new", "content" : {
      "rendered" : "\n<p>Le feu, force primitive, séduit par sa puissance. <strong>flammes vacillantes</strong>Il évoque à la fois l'admiration et la prudence. <quote>danse</quote> symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu exige le respect pour son pouvoir de dévaster.</p>\n\n\n\n\n\n\n<figure class="\"wp-block-image" size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Dans l'Antiquité, le feu était un phare de lumière et de chaleur, essentiel à la survie. Aujourd'hui, il reste un symbole de l'ingéniosité humaine et du danger. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle la fragilité de notre relation avec le monde. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle notre relation fragile avec les éléments. éléments.</p>\n\n\n\n\n\n\n<figure class="\"wp-block-image" size-large\"><img decoding="\"async\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Vous pouvez consulter d'autres articles sur notre blog.</p>\n\n\n\n\n\n\n<ul>\n<li><a href="/fr/"https:>Lorem Ipsum : Les débuts</a></li>\n\n\n\n\n\n\n<li><a href="/fr/"https:>Lorem Ipsum : Acte 2</a></li>\n\n\n\n\n\n\n<li><a href="/fr/"https:>Lorem Ipsum : Acte 3</a></li>\n</ul>\n"
    },
    "date" : "2024-02-27T12:08:30",
    "date_gmt" : "2024-02-27T12:08:30",
    "excerpt" : {
      "protected" : faux, "rendered" :
      "rendu" : "<p>Le feu, force primitive, captive par ses flammes vacillantes, suscitant à la fois crainte et prudence. Sa danse symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu impose le respect pour son pouvoir de dévastation. Dans l'Antiquité, le feu était un phare de lumière et de chaleur, [...]</p>\n"
    },
    "featured_media" : 0,
    "format" : "standard",
    "guid" : {
      "rendered" : "https://yoursite.com/?p=13"
    },
    
    
    "meta" : {
      "footnotes" : ""
    },
    
    
    
    
    
    
    
    "template" : "",
    "title" : {
      "rendered" : "Feu"
    },
    "type" : "post"
   },
  },
  ...
]

L'objet JSON représentant les données pour les posts Gutenberg individuels comprend plusieurs champs, les champs contenu et extrait étant renvoyés sous forme de blocs Gutenberg analysés en tant que chaînes HTML.

3) Pour rendre correctement ce contenu HTML dans Next.js, nous utilisons la fonctiondangereusementSetInnerHTMLAttributs :


const page = async () => {
  const posts = await getWpPosts() ;
  return (
    <>
      <h1> Blog sans tête </h1>
      <div>
        {posts.map((post) => (
          <link href="{'/blog/'" + post.id} key="{post.id}">
            <h2>
              {post.title.rendered} <span>-></span>
            </h2>
            <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
          </Link>
        ))}
      </div>
    </>
  ) ;
}.
export default page.
const page = async () => {
  const posts = await getWpPosts() ;

  return (
    <>
      <h1> Blog sans tête </h1>

      <div>
        {posts.map((post) => (
          <link href="{'/blog/'" + post.id} key="{post.id}">
            <h2>
              {post.title.rendered} <span>-></span>
            </h2>
            <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
          </Link>
        ))}
      </div>
    </>
  ) ;
}.

export default page.
const page = async () =&gt; {
  const posts = await getWpPosts() ;

  return (
    <>
      <h1> Blog sans tête </h1>

      <div>
        {posts.map((post) =&gt; (
          <link href="{'/blog/'" + post.id} key="{post.id}">
            <h2>
              {post.title.rendered} <span>-></span>
            </h2>
            <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
          </Link>
        ))}
      </div>
    </>
  ) ;
}.

export default page.

Dans le composant mis à jour, nous mettons en correspondance le tableau des messages recherchés pour générer une liste d'extraits de messages. Chaque extrait est contenu dans un fichierLienLe titre de l'article et son extrait de contenu sont affichés dans le composant utilisé pour la navigation.

devraitdangereusementSetInnerHTMLLes attributs sont utilisés pour l'analyse et le rendu.extrait.renduLe contenu HTML du champ.

4.Ensuite, dans l'applicationCréer un fichier dans le répertoireblog/[id]/page.js . Les itinéraires peuvent être définis à l'aide de dossiers. Par conséquent, un itinéraire peut être défini en créantblog (mot d'emprunt) vous pouvez définirblog (mot d'emprunt) Routes. Cette méthode peut être combinée avec le routage dynamique, qui génère un itinéraire pour chaque poste.

5) Chaque message a un identifiant./blog/{post_id}Générer son chemin d'accès unique dans l'application. Ajoutez le code suivant :


import Link from 'next/link' ;
export async function generateStaticParams() {
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts') ;
    const posts = await res.json() ; return posts.map((post) ; }) ; })
    return posts.map((post) => {
        return {
            params : {
                id : post.id.toString(), { params : { post.id.
            }, }
        } ; }
    }) ;
}
export async function getPost(id) {
    const response = await fetch('https://yoursite.com/wp-json/wp/v2/posts/' + id) ;
    const post = await response.json() ; return post ; const post = await response.
    const post = await response.json() ; return post ; }
}
import Link from 'next/link' ;

export async function generateStaticParams() {
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts') ;
    const posts = await res.json() ; return posts.map((post) ; }) ; })
    return posts.map((post) => {
        return {
            params : {
                id : post.id.toString(), { params : { post.id.
            }, }
        } ; }
    }) ;
}

export async function getPost(id) {
    const response = await fetch('https://yoursite.com/wp-json/wp/v2/posts/' + id) ;
    const post = await response.json() ; return post ; const post = await response.
    const post = await response.json() ; return post ; }
}
import Link from 'next/link' ;

export async function generateStaticParams() {
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts') ;
    const posts = await res.json() ; return posts.map((post) ; }) ; })
    return posts.map((post) => {
        return {
            params : {
                id : post.id.toString(), { params : { post.id.
            }, }
        } ; }
    }) ;
}

export async function getPost(id) {
    const response = await fetch('https://yoursite.com/wp-json/wp/v2/posts/' + id) ;
    const post = await response.json() ; return post ; const post = await response.
    const post = await response.json() ; return post ; }
}

devraitgenerateStaticParams() génère statiquement des chemins au moment de la construction sur la base des identifiants correspondants renvoyés par chaque poste. La fonctiongetPost()Cette fonction récupère les données Gutenberg de l'article à partir de l'API REST en utilisant l'identifiant transmis.

La section précédente montre un exemple de données Gutenberg analysées et renvoyées par l'API REST du poste. Pour l'instant, nous ne nous intéressons qu'à l'élémentcontenu.rendu Domaines :


[
  {
    ...
    "content" : {
      "rendered" : "\n<p>Le feu, force primitive, séduit par sa puissance. <strong>flammes vacillantes</strong>Il évoque à la fois l'admiration et la prudence. <quote>danse</quote> symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu exige le respect pour son pouvoir de dévaster.</p>\n\n\n\n\n\n\n<figure> class=\"wp-block-image size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Dans l'Antiquité, le feu était un phare de lumière et de chaleur, essentiel à la survie. Aujourd'hui, il reste un symbole de l'ingéniosité humaine et du danger. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle la fragilité de notre relation avec le monde. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle notre relation fragile avec les éléments. éléments.</p>\n\n\n\n\n\n\n<figure> class=\"wp-block-image size-large\"><img decoding="\"async\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Vous pouvez consulter d'autres articles sur notre blog.</p>\n\n\n\n\n\n\n<ul>\n<li><a> href=\"https://yoursite.com/?p=6\">Lorem Ipsum : Les débuts</a></li>\n\n\n\n\n\n\n<li><a> href=\"https://yoursite.com/?p=9\">Lorem Ipsum : Acte 2</a></li>\n\n\n\n\n\n\n<li><a> href=\"https://yoursite.com/?p=11\">Lorem Ipsum : Acte 3</a></li>\n</ul>\n"
    },
    ...
  }
]
[
  {
    ...
    "content" : {
      "rendered" : "\n<p>Le feu, force primitive, séduit par sa puissance. <strong>flammes vacillantes</strong>Il évoque à la fois l'admiration et la prudence. <quote>danse</quote> symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu exige le respect pour son pouvoir de dévaster.</p>\n\n\n\n\n\n\n<figure> class=\"wp-block-image size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Dans l'Antiquité, le feu était un phare de lumière et de chaleur, essentiel à la survie. Aujourd'hui, il reste un symbole de l'ingéniosité humaine et du danger. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle la fragilité de notre relation avec le monde. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle notre relation fragile avec les éléments. éléments.</p>\n\n\n\n\n\n\n<figure> class=\"wp-block-image size-large\"><img decoding="\"async\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Vous pouvez consulter d'autres articles sur notre blog.</p>\n\n\n\n\n\n\n<ul>\n<li><a> href=\"https://yoursite.com/?p=6\">Lorem Ipsum : Les débuts</a></li>\n\n\n\n\n\n\n<li><a> href=\"https://yoursite.com/?p=9\">Lorem Ipsum : Acte 2</a></li>\n\n\n\n\n\n\n<li><a> href=\"https://yoursite.com/?p=11\">Lorem Ipsum : Acte 3</a></li>\n</ul>\n"
    },
    ...
  }
]
[
  {
    ...
    "content" : {
      "rendered" : "\n<p>Le feu, force primitive, séduit par sa puissance. <strong>flammes vacillantes</strong>Il évoque à la fois l'admiration et la prudence. <quote>danse</quote> symbolise la destruction et le renouveau, consumant l'ancien pour faire place au nouveau. S'il réchauffe nos maisons et nos cœurs, le feu exige le respect pour son pouvoir de dévaster.</p>\n\n\n\n\n\n\n<figure> class=\"wp-block-image size-full\"&gt;<img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Dans l'Antiquité, le feu était un phare de lumière et de chaleur, essentiel à la survie. Aujourd'hui, il reste un symbole de l'ingéniosité humaine et du danger. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle la fragilité de notre relation avec le monde. De la lueur réconfortante d'un foyer à la fureur destructrice des incendies de forêt, la double nature du feu nous rappelle notre relation fragile avec les éléments. éléments.</p>\n\n\n\n\n\n\n<figure> class=\"wp-block-image size-large\"&gt;<img decoding="\"async\"" src="\"https:></figure>\n\n\n\n\n\n\n<p>Vous pouvez consulter d'autres articles sur notre blog.</p>\n\n\n\n\n\n\n<ul>\n<li><a> href=\"https://yoursite.com/?p=6\"&gt;Lorem Ipsum : Les débuts</a></li>\n\n\n\n\n\n\n<li><a> href=\"https://yoursite.com/?p=9\"&gt;Lorem Ipsum : Acte 2</a></li>\n\n\n\n\n\n\n<li><a> href=\"https://yoursite.com/?p=11\"&gt;Lorem Ipsum : Acte 3</a></li>\n</ul>\n"
    },
    ...
  }
]

Ce champ contient le code HTML brut de l'article, qui peut être utilisé directement avec la commandedangereusementSetInnerHTML Les propriétés comme celle-ci rendent<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />.

6) Ensuite, les données peuvent être traitées en analysant les liens internes et en redimensionnant les images. Installer leanalyseur html-react pour simplifier le processus d'analyse des balises :


npm install html-react-parser --save
npm install html-react-parser --save
npm install html-react-parser --save

7) Ajouter le code suivant àblog/[id]/page.js Documentation :


import parse, { domToReact } from "html-react-parser";
/*
 * We use a regular expression (pattern) to match the specific URL you want to replace.
 * The (\d+) part captures the numeric ID after ?p=.
 * Then, we use the replacement string 'data-internal-link="true" href="/blog/$1"',
 * where $1 is a placeholder for the captured ID.
 */
export function fixInternalLinks(html_string) {
  const pattern = /href="https:\/\/yoursite.com\/\?p=(\d+)"/g;
  const replacement = 'data-internal-link="true" href="/blog/$1"';
  return html_string.replace(pattern, replacement);
}
export function parseHtml(html) {
  // Replace 2+ sequences of '\n' with a single '<br />' tag
  const _content = html.replace(/\n{2,}/g, '<br />');
  const content = fixInternalLinks(_content);
  const options = {
    replace: ({ name, attribs, children }) => {
      // Convert internal links to Next.js Link components.
      const isInternalLink =
        name === "a" && attribs["data-internal-link"] === "true";
      if (isInternalLink) {
        return (
          <Link href={attribs.href} {...attribs}>
            {domToReact(children, options)}
          </Link>
        );
      } else if (name === "img") {
        attribs["width"] = "250";
        attribs["height"] = "150";
        return (
          <img {...attribs}/>
        );
      }
    },
  };
  return parse(content, options);
}
import parse, { domToReact } from "html-react-parser";

/*
 * We use a regular expression (pattern) to match the specific URL you want to replace.
 * The (\d+) part captures the numeric ID after ?p=.
 * Then, we use the replacement string 'data-internal-link="true" href="/blog/$1"',
 * where $1 is a placeholder for the captured ID.
 */
export function fixInternalLinks(html_string) {
  const pattern = /href="https:\/\/yoursite.com\/\?p=(\d+)"/g;
  const replacement = 'data-internal-link="true" href="/blog/$1"';

  return html_string.replace(pattern, replacement);
}

export function parseHtml(html) {
  // Replace 2+ sequences of '\n' with a single '<br />' tag
  const _content = html.replace(/\n{2,}/g, '<br />');
  const content = fixInternalLinks(_content);

  const options = {
    replace: ({ name, attribs, children }) => {
      // Convert internal links to Next.js Link components.
      const isInternalLink =
        name === "a" && attribs["data-internal-link"] === "true";

      if (isInternalLink) {
        return (
          <Link href={attribs.href} {...attribs}>
            {domToReact(children, options)}
          </Link>
        );
      } else if (name === "img") {
        attribs["width"] = "250";
        attribs["height"] = "150";
        return (
          <img {...attribs}/>
        );
      }
    },
  };

  return parse(content, options);
}
import parse, { domToReact } from "html-react-parser";

/*
 * We use a regular expression (pattern) to match the specific URL you want to replace.
 * The (\d+) part captures the numeric ID after ?p=.
 * Then, we use the replacement string 'data-internal-link="true" href="/blog/$1"',
 * where $1 is a placeholder for the captured ID.
 */
export function fixInternalLinks(html_string) {
  const pattern = /href="https:\/\/yoursite.com\/\?p=(\d+)"/g;
  const replacement = 'data-internal-link="true" href="/blog/$1"';

  return html_string.replace(pattern, replacement);
}

export function parseHtml(html) {
  // Replace 2+ sequences of '\n' with a single '<br />' tag
  const _content = html.replace(/\n{2,}/g, '<br />');
  const content = fixInternalLinks(_content);

  const options = {
    replace: ({ name, attribs, children }) => {
      // Convert internal links to Next.js Link components.
      const isInternalLink =
        name === "a" && attribs["data-internal-link"] === "true";

      if (isInternalLink) {
        return (
          <Link href={attribs.href} {...attribs}>
            {domToReact(children, options)}
          </Link>
    	  );
      } else if (name === "img") {
        attribs["width"] = "250";
        attribs["height"] = "150";
        return (
          <img {...attribs}/>
        );
      }
    },
  };

  return parse(content, options);
}

devraitfixInternalLinks() utilise une expression régulière pour trouver un lien vers un article du site WordPress à partir d'une chaîne de caractères HTML. Dans le HTML brut, vous pouvez voir que l'article contient un élémentListequi contient des liens vers d'autres articles du site, et remplace ces liens par des liens internes pointant vers des chemins du site statique.

devraitparseHTML() trouve plusieurs séquences redondantes de retour à la ligne.net les remplacer par des étiquettes<br /> . Elle recherche également les liens internes et convertit les balises d'ancrage en balises de lien. La fonction redimensionne ensuite l'image à l'aide de l'attribut tag.

8) Pour générer l'interface utilisateur principale pour chaque chemin dynamique, ajoutez le code suivant :


export default async function Post({ params }) {
  const post = await getPost(params.id) ;
  const content = parseHtml(post.content.rendered) ;
  return (
    <>
      <h1>
        {post.title.rendered}
      </h1>
    
      <div>{contenu}</div>
    </>
  );
}
export default async function Post({ params }) {
  const post = await getPost(params.id) ;

  const content = parseHtml(post.content.rendered) ;

  return (
    <>
      <h1>
        {post.title.rendered}
      </h1>
    
      <div>{contenu}</div>
    </>
  );
}
export default async function Post({ params }) {
  const post = await getPost(params.id) ;

  const content = parseHtml(post.content.rendered) ;

  return (
    <>
      <h1>
        {post.title.rendered}
      </h1>
 	 
      <div>{contenu}</div>
    </>
  );
}

Après avoir analysé le HTML brut à partir des données Gutenberg, le code renvoie le JSX représentant l'interface utilisateur formatée de la page.

Enfin, lorsque vous exécutez le projet, la page d'accueil affichera une liste d'articles sur WordPress. En outre, lorsque vous cliquez sur des articles individuels, vous verrez le contenu Gutenberg correctement rendu.

Contactez nous
Vous ne pouvez pas lire l'article ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.