Блог

Я впервые создаю веб-сайт с помощью GatsbyJS, и я пытаюсь создать некоторые компоненты для использования по всему сайту.

Одним из этих компонентов является нижний колонтитул. Я написал его структуру, но я хочу изменить цвет <div> , который является частью нижнего колонтитула, в зависимости от того, какую страницу я посещаю. Я не хочу, чтобы весь нижний колонтитул менял цвет, только этот div, который является частью нижнего колонтитула.

Чтобы быть более точным: если я посещаю домашнюю страницу, я хочу, чтобы у этого div был оранжевый фон, тогда как если я нахожусь на странице контактов, я хочу, чтобы у него был синий фон.

Возможно ли это?

Это часть кода моего нижнего колонтитула (то есть footer.js компонент gatsby, который я импортирую на свои страницы):

 <footer className={footerStyle.footer}>
  <div className={footerStyle.parteSopra}>
    <div className={footerStyle.parteSopra}>
      <div className={footerStyle.ottanta}>
        <h3 className={footerStyle.rimaniamo  ' ' footerStyle.dimTitoli}>rimaniamo<br />in contatto</h3>
      </div>
      <div className={footerStyle.venti}>

      </div>
    </div>
    <div className={footerStyle.parteSotto}>
      <div className={footerStyle.ottanta  ' ' footerStyle.boxFrecciaBlu}>
        <div className={footerStyle.contieniFrecciaBlu}>
          <img className={footerStyle.frecciaBlu} src={frecciaBlu} alt="Freccia giù" />
        </div>
      </div>
      <div className={footerStyle.venti  ' ' footerStyle.boxFbEInstaBlu}>
        <div className={footerStyle.contieniFbBlu}>
          <a href="https://it-it.facebook.com/DiamanteCalzature" target="_blank" rel="noopener noreferrer">
            <img className={footerStyle.fbBlu} src={iconaFbBlu} alt="Facebook" />
          </a>
        </div>
        <div className={footerStyle.contieniInstaBlu}>
          <a href="https://instagram.com/diamantecalzature?igshid=cta3uh8iob7a" target="_blank" rel="noopener noreferrer">
            <img className={footerStyle.instaBlu} src={iconaInstaBlu} alt="Instagram" />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div id="coloreFootSotto" className={footerStyle.parteSotto  ' ' footerStyle.coloreFooterSotto}>
    <div className={footerStyle.ottanta}>

    </div>
    <div className={footerStyle.venti  ' ' footerStyle.boxTornaSu}>

    </div>
  </div>
</footer>  

Я импортирую его при написании на своих страницах <Footer /> и я подумал, что мог бы добавить атрибут, реквизит или что-то внутри этого тега, чтобы реализовать то, что я хочу. Мне нужно, чтобы div с идентификатором id="coloreFootSotto" имел другой цвет фона в зависимости от страницы, которую я посещаю. На данный момент я просто манипулирую DOM на некоторых страницах, чтобы изменить цвет фона, но мне было интересно, возможно ли это сделать с помощью реквизита или чего-то подобного (возможно, нет).

Кто-нибудь знает это? Спасибо

Gatsby использует reach router, поэтому вы можете использовать useLocation в своем компоненте и что-то делать с location.pathname для определенных маршрутов.

 // Footer.js
import React from 'react';
import { useLocation } from "@reach/router"

import Container from 'components/Container';

const Footer = () => {
  const {pathname} = useLocation()
  console.log(pathname)
  return (
    <footer style={pathname=== '/' ? {backgroundColor: 'blue'} : null} >
      <Container>
        <p>amp;copy; {new Date().getFullYear()}, My Gatsby Site</p>
      </Container>
    </footer>
  );
};

export default Footer;
  

Также стоит упомянуть, что вы можете получить данные о местоположении со страницы gatsby через ее идентификатор местоположения.

В зависимости от того, как структурировано ваше приложение, вы также можете получить эти данные из своего компонента страницы и передать соответствующие данные с помощью реквизитов вниз по дереву компонентов.

например, Расширение > Макет > Нижний колонтитул

Для нескольких страниц вы могли бы сделать что-то вроде этого.

 // Footer.js
import React from 'react';
import { useLocation } from "@reach/router"
import Container from 'components/Container';

const pagesWithColoredFooter = ['/', '/page-2', 'page-3'];

const Footer = () => {
  const {pathname} = useLocation()
  console.log(pathname)
  return (
    <footer style={pagesWithColoredFooter.includes(pathname) ? {backgroundColor: 'blue'} : null} >
      <Container>
        <p>amp;copy; {new Date().getFullYear()}, My Gatsby Site</p>
      </Container>
    </footer>
  );
};

export default Footer;