小编Gle*_*len的帖子

gatsby-image 使用 gatsby-image-wrapper div 包装每个图像，该 div 填充 100% 的可用视口宽度。这个包装 div 可以很容易地用 CSS 设置样式，但没有办法以不同的方式对待横向、纵向或方形图像。

如果您想让横向图像填充可用宽度的 80%-100%，但让纵向和方形图像填充不超过视口宽度的 40-50%，该怎么办。

所以理想情况下，每个 gatsby-image-wrapper div 都会根据其纵横比添加一个类，要么是；landscape，portrait或square。

一种方法是使用 childImageSharp 附带的纵横比编写一些条件语句：

      edges {
        node {
          name
          childImageSharp {
            fluid(maxWidth: 915, quality: 90) {
              aspectRatio
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }

当我映射了我所有的画廊图像，我可以抓住的宽高比和使用的className它添加到每个盖茨比形象的方式包装，但它不是在它的原始格式非常有用，因为对于的aspectRatio返回的数据都是相同的数字0.6666666666666666肖像图像或1.5003750937734435为风景。使用上面提到的那些类会更好；landscape，portrait或square。

这就是我如何从当前帖子中获取我的所有图库图片以及它们的aspectRatio.

export default ({ data }) => {
  return (
    <Layout>
      <article>
        {data.allFile.edges.map(({ node }, index) => (
          <div> …

我有一个 Gatsby 的基本博客设置，在发布此问题时，缺少 SEO 组件的良好文档。有一些基本 SEO 组件的示例，但我想要的是更深入一些。也许，如果在这里达成了解决方案，则可以将其贡献给 Gatsby 文档，让其他人受益。

在通常的标题和描述元标记以及 facebook/twitter 开放图元（我已经完成）之上，我想为丰富的片段添加结构化数据，这些数据将根据博客文章的类型而有所不同。例如，我可能有一个常规帖子会打印文章架构，有些帖子可能是How-to，在这种情况下，我想打印 HowTo 架构而不是文章。在某些时候，我可能会写一篇适合常见问题解答架构的帖子。

我不知道这是否是最好的方法，但这是我的想法：

1.在frontmatter中设置我想要的模式类型为真，其余为假。

我也在考虑将架构数据存储在 frontmatter 中，但由于这些数据非常复杂，并且会因帖子类型而异（文章、方法等），我不确定这是否是一个好主意？

---
title: Hello World
description: How to say hello
article: false
how-to: true
faq: false
---

2. 在 SEO 组件中测试真/假并打印正确的模式。

下面是我的整个 SEO 组件，这显然不起作用，但您希望能看到我的想法。我已经剖析并借鉴了gatsby 高级启动组件和gatsby 启动棱镜组件，但都没有完全满足我的需求。这是我的：

import React from "react"
import Helmet from "react-helmet"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Facebook from …