有没有更好的方法来创建程序化 post 页面？

Question

我正在使用 Gatsby v3 和 gatsby-source-wordpress。有没有更好的方法来创建程序化 post 页面？

我的{wpPost.uri}.js

imports....

const Wrapper = styled.div`
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
`
const ContentWrapper = styled.div`
  display: block;

  h1 {
    font-size: var(--fontSuperBig);
    font-weight: 400;
    text-transform: none;
  }
  @media (min-width: 992px) {
    display: flex;
  }
`
const PosContent = styled.article`
  margin: 20px;
`

const PostTemplate = ({ data }) => {
  return (
    <Layout>
      <Seo title={data.post.title} description={data.post.excerpt} />
      <Wrapper>
        <BreadCrumb
          parent={{
            uri: '/blog/todos-os-posts',
            title: 'Blog'
          }}
        />
        <ContentWrapper>
          <PostSidebar
            date={data.post.date}
            author={data.post.author.node.name}
            categories={data.post.categories.nodes}
          />
          <PosContent>
            <h1 dangerouslySetInnerHTML={{ __html: data.post.title }} />
            <article dangerouslySetInnerHTML={{ __html: data.post.content }} />
          </PosContent>
        </ContentWrapper>
      </Wrapper>
    </Layout>
  )
}

我的graphql抓取数据：

export const pageQuery = graphql`
  query($id: String!) {
    post: wpPost(id: { eq: $id }) {
      title
      content
      excerpt
      author {
        node {
          name
        }
      }
      date(formatString: "DD, MMMM, YYYY", locale: "pt")
      categories {
        nodes {
          id
          name
          uri
          slug
        }
      }
    }
  }
`

如果您在任何社交网络上分享 post，标签 p 就会出现

并且图像没有针对 webp 进行优化，并且不尊重@media 大容器

在网站的其余部分，所有图像都完美无缺。

Answer 1

And the images are not optimized for webp and do not respect the @media large container

根据 this recent GitHub thread，gatsby-source-wordpress 插件已修复版本 5.0.0 中的图像处理。似乎某些图像节点泄漏了 Gatsby 的处理方式，因此图像未正确解析并应用适当的转换。

要升级它，只需运行:

npm install gatsby-source-wordpress@5.0.0 // or yarn add gatsby-source-wordpress@5.0.0

有没有更好的方法来创建程序化 post 页面？

Is there a better way to create programmatic post pages?

gatsby