Установите другое изображение героя в основном макете в соответствии с post / url (получение данных из graphQL) [GATSBY] - PullRequest
Новая
       46

Установите другое изображение героя в основном макете в соответствии с post / url (получение данных из graphQL) [GATSBY]

0 голосов
/ 24 февраля 2019

РЕДАКТИРОВАТЬ : В этом Github-репозитории есть демоверсия .

Мне нужно изменить основной макет изображения героя моего блога в соответствии с постом /page (slug).
В каждом сообщении есть изображение героя, заданное в информации 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 Ответ

0 голосов
/ 24 февраля 2019 
  <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>

Может быть, в этом проблема - в тройке выше вы передаете функцию для ложного условия, даже если над ней не выглядит компонент рендеринга реквизита?Возможно, это должно быть просто 

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