根据 post/url 在主布局上设置不同的英雄图像（从 graphQL 检索数据）[GATSBY]

Posted 2023-03-08

【中文标题】根据 post/url 在主布局上设置不同的英雄图像（从 graphQL 检索数据）[GATSBY]

【英文标题】：Set a different hero image on main layout according to the post/url (retrieving the data from graphQL) [GATSBY]

【发布时间】：2019-07-18 03:06:41

【问题描述】：

编辑：Github repository 上有一个演示。

我需要根据帖子/页面（其 slug）更改我博客的主要布局 hero-image。 每个帖子都有一个英雄形象，设置在 frontmatter 信息中。

我什么都试过了，但是： 1. 要么它只显示相同的图像（我上一篇文章的） - 如果我记得 markdownRemark 而没有迭代，就会发生这种情况。 2. 或者它告诉我在使用allMarkdownRemark 迭代后我需要一个关键道具（我已经设置）。

这是我最后一次尝试。 我通过 GraphQl 抓取了数据，然后设置了一个条件（如果它是主页，它会显示我的主要英雄形象，否则它应该显示位于单个帖子的 frontmatter 信息中的图像）：

[...]
location.pathname === '/' 
  ? (<Img fluid=data.file.childImageSharp.fluid />) 
  : ((allMarkdownRemark) => ( 
    allMarkdownRemark.edges.map((node) => ( 
      <Img 
        key=node.frontmatter.slug
        fluid=node.frontmatter.hero.childImageSharp.fluid /> 
    )
  ))
)
[...]

这是整个布局组件：

import React from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";
import  Spring  from 'react-spring/renderprops';
import styled from "styled-components";
import  StaticQuery, graphql  from "gatsby";
import Img from 'gatsby-image';


import Header from "./header";
import Archive from "./archive";
import "./layout.css";

const MainLayout = styled.main`...`;

const Layout = ( children, location ) => (
<StaticQuery
  query=graphql`
    query SiteTitleQuery 
      site 
        siteMetadata 
          title
          description
        
      
      file(relativePath: regex: "/my-main-img/") 
        childImageSharp 
          fluid (maxWidth: 1900, quality: 90) 
            ...GatsbyImageSharpFluid_tracedSVG
           
        
      
      allMarkdownRemark 
        edges 
          node 
            frontmatter 
              slug
              hero 
                childImageSharp
                  fluid(maxWidth: 800, quality: 100) 
                    ...GatsbyImageSharpFluid
                  
                
              
            
          
        
      
      markdownRemark 
        frontmatter 
          hero 
            childImageSharp 
              fluid (maxWidth: 1900, quality: 90) 
                ...GatsbyImageSharpFluid_tracedSVG
              
            
          
        
       
    
  `
  render=data => (
    <>
      <Helmet [...]>
      [...]
      </Helmet>
      <Header siteTitle=data.site.siteMetadata.title />
      <Spring 
        from= height: location.pathname === '/' ? 150 : 500  
        to= height: location.pathname === '/' ? 500 : 150 >
        ( height ) => 
          <div style= overflow: 'hidden', height >
            location.pathname === '/'
              ? (<Img fluid=data.file.childImageSharp.fluid />)
              : ((allMarkdownRemark) => ( 
                    allMarkdownRemark.edges.map((node) => 
                      (<Img
                        key=node.frontmatter.slug
                        fluid=node.frontmatter.hero.childImageSharp.fluid/>)
                    )
                ))
            
          </div>
        
      </Spring>
      <MainLayout>
        <div>children</div>
        <Archive />
      </MainLayout>
    </>
    )
  />
);

Layout.propTypes = 
children: PropTypes.node.isRequired
;

export default Layout;

我按照每个指南进行操作，但仍然没有找到缺少的内容。我是新手，对 javascript 不太熟悉，如果这是一个菜鸟问题，我很抱歉。

提前感谢您的帮助。

【参考方案1】：

  <div style= overflow: 'hidden', height >
    location.pathname === '/'
      ? (<Img fluid=data.file.childImageSharp.fluid />)
>     : ((allMarkdownRemark) => ( 
>           allMarkdownRemark.edges.map((node) => 
>             (<Img
>               key=node.frontmatter.slug
>               fluid=node.frontmatter.hero.childImageSharp.fluid/>)
>           )
>       ))
    
  </div>

也许这就是问题所在——在上面的三元中，你传入了一个用于 false 条件的函数，即使它看起来上面没有渲染道具组件？也许应该只是

 location.pathname === '/' 
    ? (<Img ... />)
    : (data.allMarkdownRemark.edges.map(( node ) => ...))

【讨论】：

mm 这部分起作用（我在 "node" 之间添加了一个括号）：编辑：data.allMarkdownRemark.edges.map(( node ) => <Img key=node.frontmatter.slug fluid=node.frontmatter.hero.childImageSharp.fluid /> ) 问题是除了主英雄图像之外，总是有相同的图像，无论我访问那里的任何帖子，总是第一个帖子的英雄形象。

它就像不迭代，它只保留在查询中创建的第一个帖子的图像。

哦，是的，我的错，node 之间应该有括号。会编辑。所以它显示了同一图像的许多实例？它会迭代吗？您确定每个降价中的路径都指向一个唯一的图像吗？

是的，有 3 个帖子具有独特的图像。我只是删除了“溢出隐藏”，现在我看到了所有三个图像，尽管我在 /post/first-post 中。编辑：你认为我应该迭代markdownRemark 吗？这可能吗？

@Santiago 看起来您希望 springhero.js 显示每篇博文的图像，当您访问该帖子时？您可以做 3 件事：(1) 查询所有帖子的图像并根据路径匹配它们 (2) 将图像传递给 postLayout.js 中的此组件（您需要包含 Layout.js 而不是使用 gatsby- plugin-layout) 和 (3) 保留 gatsby-plugin-layout，但使用 React 的 context api 之类的东西将图像传递给 springhero.js。看到博客是多么简单，我建议你尝试不。 2