如何在 Gatsby.js 应用程序中使用 WordPress 内容

 1[label /src/css/style.css]
 2.post-list-item header {
 3  margin-bottom: var(--spacing-4);
 4}
 5
 6/* CSS targeting your new post excerpt element */
 7.post-excerpt {
 8  box-shadow: 0px 1px 9px 1px rgb(0 0 0 / 50%);
 9  padding: 6px;
10  border-radius: 8px;
11  margin-bottom: 14px;
12}
13
14.post-excerpt p {
15  margin-bottom: 0px;
16}

 1[label /src/templates/video-post.js]
 2import React from "react"
 3import { graphql } from "gatsby"
 4
 5export const pageQuery = graphql`
 6  query VideoPostById(
 7    # these variables are passed in via createPage.pageContext in gatsby-node.js
 8    $id: String!
 9  ) {
10    # selecting the current post by id
11    post: wpPost(id: { eq: $id }) {
12      id
13      content
14      title
15      date(formatString: "MMMM DD, YYYY")
16    }
17  }
18`

 1[label /src/templates/video-post.js]
 2import React from "react"
 3import { graphql } from "gatsby"
 4import parse from "html-react-parser"
 5
 6import Bio from "../components/bio"
 7import Layout from "../components/layout"
 8import Seo from "../components/seo"
 9
10const VideoPostTemplate = ({ data: { post } }) => {
11  return (
12    <Layout>
13      <Seo title={post.title} description={post.excerpt} />
14
15      <article
16        className="blog-post"
17        itemScope
18        itemType="http://schema.org/Article"
19      >
20        <header>
21          <h1 itemProp="headline">{parse(post.title)}</h1>
22          <p>{post.date}</p>
23        </header>
24
25        <footer>
26          <Bio />
27        </footer>
28      </article>
29    </Layout>
30  )
31}
32
33export default VideoPostTemplate;
34
35export const pageQuery = graphql`
36  query VideoPostById(
37    # these variables are passed in via createPage.pageContext in gatsby-node.js
38    $id: String!
39  ) {
40    # selecting the current post by id
41    post: wpPost(id: { eq: $id }) {
42      id
43      content
44      title
45      date(formatString: "MMMM DD, YYYY")
46    }
47  }
48`

 1[label /src/templates/video-post.js]
 2...
 3
 4const VideoPostTemplate = ({ data: { post } }) => {
 5  // RegEx to find YouTube IDs
 6  const youtubeIdPattern = /watch\?v=([a-z_0-9-]+)|youtu\.be\/([a-z_0-9-]+)|youtube\.com\/embed\/([a-z_0-9-]+)/i;
 7
 8  const matches = youtubeIdPattern.exec(post.content);
 9  let videoId;
10
11  if (matches) {
12    // Use first available match
13    videoId = matches[1] || matches[2] || matches[3];
14  }
15
16  return (
17    <Layout>
18      <Seo title={post.title} description={post.excerpt} />
19
20      <article
21        className="blog-post"
22        itemScope
23        itemType="http://schema.org/Article"
24      >
25        <header>
26          <h1 itemProp="headline">{parse(post.title)}</h1>
27          <p>{post.date}</p>
28        </header>
29
30        <footer>
31          <Bio />
32        </footer>
33      </article>
34    </Layout>
35  )
36}
37...

 1[label /src/templates/video-post.js]
 2...
 3
 4  return (
 5    <Layout>
 6      <Seo title={post.title} description={post.excerpt} />
 7
 8      <article
 9        className="blog-post"
10        itemScope
11        itemType="http://schema.org/Article"
12      >
13        <header>
14          <h1 itemProp="headline">{parse(post.title)}</h1>
15          <p>{post.date}</p>
16        </header>
17
18        {videoId ? (
19          <div className="video-embed">
20            <iframe width="512" height="288" src={`https://www.youtube-nocookie.com/embed/${videoId}?controls=0&autoplay=1`} title={post.title} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
21          </div>
22        ) : (
23          <div className="no-video-found">
24            <p>Sorry, could not find a video in this post!</p>
25          </div>
26        )}
27
28        <hr />
29
30        <footer>
31          <Bio />
32        </footer>
33      </article>
34    </Layout>
35  )
36}
37...

 1[label gatsby-node.js]
 2...
 3async function getPosts({ graphql, reporter }) {
 4  const graphqlResult = await graphql(/* GraphQL */ `
 5    query WpPosts {
 6      # Query all WordPress blog posts sorted by date
 7      allWpPost(sort: { fields: [date], order: DESC }) {
 8        edges {
 9          previous {
10            id
11          }
12
13          ...
14
15          post: node {
16            id
17            uri
18            postFormats {
19              formats: nodes {
20                name
21              }
22            }
23          }
24
25          next {
26            id
27          }
28        }
29      }
30    }
31  `)
32
33  ...
34
35  return graphqlResult.data.allWpPost.edges
36}

 1[label gatsby-node.js]
 2const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
 3  Promise.all(
 4    posts.map(({ previous, post, next }) => {
 5      const postFormats = post.postFormats.formats;
 6      const isVideo = postFormats.length && postFormats[0].name === 'Video';
 7...
 8          // We also use the next and previous id's to query them and add links!
 9          previousPostId: previous ? previous.id : null,
10          nextPostId: next ? next.id : null,
11        },
12      })}
13    )
14  )

 1[label gatsby-node.js]
 2const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
 3  Promise.all(
 4    posts.map(({ previous, post, next }) => {
 5      const postFormats = post.postFormats.formats;
 6      const isVideo = postFormats.length && postFormats[0].name === 'Video';
 7
 8      return gatsbyUtilities.actions.createPage({
 9        // Use the WordPress uri as the Gatsby page path
10        // This is a good idea so that internal links and menus work 👍
11        path: post.uri,
12
13        // Use special video template if post format === Video, else use blog post template
14        component: isVideo ? path.resolve(`./src/templates/video-post.js`) : path.resolve(`./src/templates/blog-post.js`),
15
16        ...
17      });
18    })
19  )

 1[label /src/css/style.css]
 2.video-embed {
 3  /* Shadow effect around box to give it contrast */
 4  box-shadow: 0px 2px 12px 4px rgb(0 0 0 / 50%);
 5  /* All four declarations below help center our video and give it space */
 6  display: block;
 7  line-height: 0px;
 8  margin: 20px auto;
 9  max-width: 512px;
10}