Flexboxを用いたGatsbyjsにおける粘着性フッタ

11722 ワード
gatsby css flexbox footer テキストリンク
私は最近粘着性のフッターを持っているGatsbyJSに基づいていくつかの静的なウェブサイトを開発しました.粘り強いフッターは、ページの下部に常に配置されます.
残念ながら、私はこれを解決するためにいくつかの闘争を持っていたので、私はあなたと私の学習を共有したい.

非GatsByjsソリューション


伝統的なHTML、CSS、JavaScriptアプリケーションでは、このような固定フッタを実装するためにdifferent waysを使用することができますが、私はFlexbox solution of Philip Waltonを好む.
Flexboxは粘着性のフッター問題の良い解決策を提供します.これは、水平方向と垂直方向のレイアウトコンテンツに使用することができます.したがって、縦のセクション(ヘッダー、コンテンツ、フッター)をFlexコンテナにラップし、どちらを展開するかを選択する必要があります.我々のケースでは、コンテンツを自動的にコンテナ内のすべての利用可能なスペースを取るようにします.
次のようになります.
<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は、反応に基づいており、したがって、我々は、異なると考える必要があります.
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;
それで、我々がスタイル<body></body>とPhilip Walton’s solutionで提案されるように<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;
}
あなたは、私のGitHub Traffic Viewer websiteで働く例を見ることができます.最初のページにはスペアコンテンツが表示されますが、フッターは底に固定されています.あなたがサインして、結果リストを見るならば、フッターもページの底に示されます.

あなたがgatsbyjsウェブサイトで粘着性のフッターを実行しようとするならば、このポストもあなたのために役に立つことを望みます.
ハッピーコーディング!
人々はプログラミング言語を学ぶのを助けるか?
ubuntuサーバapt-getインストールソフトウェアアリソースを使用