Flexbox를 사용하는 GatsbyJS의 고정 바닥글

11905 단어 gatsbycssflexboxfooter
최근에 고정 바닥글이 있는 GatsbyJS을 기반으로 하는 일부 정적 웹 사이트를 개발했습니다. 고정 바닥글은 콘텐츠가 드문 경우에도 항상 페이지 하단에 배치됩니다.

안타깝게도 이 문제를 해결하는 데 약간의 어려움이 있었기 때문에 제가 배운 것을 여러분과 공유하고 싶습니다.

비 GatsbyJS 솔루션



기존의 HTML, CSS, JavaScript 애플리케이션에서는 different ways을 사용하여 이러한 고정 바닥글을 구현할 수 있지만 저는 Flexbox solution of Philip Walton을 선호합니다.

Flexbox는 고정 바닥글 문제에 대한 좋은 솔루션을 제공합니다. 콘텐츠를 가로 및 세로 방향으로 레이아웃하는 데 사용할 수 있습니다. 따라서 수직 섹션(헤더, 콘텐츠, 바닥글)을 플렉스 컨테이너로 감싸고 확장할 섹션을 선택하기만 하면 됩니다. 우리의 경우 콘텐츠가 자동으로 컨테이너의 모든 사용 가능한 공간을 차지하기를 원합니다.

다음에서 그의 솔루션을 볼 수 있습니다.

<body class="site">
  <header>…</header>
  <main class="site-content">…</main>
  <footer>…</footer>
</body>


해당 CSS 클래스:

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}


live demo을 살펴보십시오.

GatsbyJS 솔루션



GatsbyJS는 React를 기반으로 하므로 다르게 생각해야 합니다.

official GatsbyJS default starter의 기본layout.js 파일은 다음 예제와 유사한 구조를 가집니다.

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div>{children}</div>
        <Footer />
      </>
    )}
  />
);

export default Layout;


따라서 Philip Walton’s solution에서 제안한 대로 <body></body> 및 <div>{children}</div>의 스타일을 지정하면 작동하지 않습니다.

하지만 왜? <Footer/> 구성 요소가 <body></body>에 포함된다는 의미이기 때문입니다.

이 문제를 해결하기 위해 위에서 언급한 예의 <div></div> 태그와 동일한 새 <body></body> 태그를 추가했습니다.

그래서 내 layout.js는 다음과 같이 보입니다.

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <div className="site">
          <Header siteTitle={data.site.siteMetadata.title} />
          <div className="site-content">{children}</div>
          <Footer />
        </div>
      </>
    )}
  />
);

export default Layout;


CSS:

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex-grow: 1;
}


myGitHub Traffic Viewer website에서 작업 예제를 볼 수 있습니다. 첫 번째 페이지에는 여분의 콘텐츠가 표시되지만 바닥글은 하단에 붙어 있습니다. 로그인하고 결과 목록을 보면 바닥글도 페이지 하단에 표시됩니다.



GatsbyJS 웹사이트에서 고정 바닥글을 구현하려는 경우에도 이 게시물이 도움이 되기를 바랍니다.

행복한 코딩!
나는 Javascript 강제를 모른다, 당신은?
마크다운 치트 시트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage