💻

GatsbyJSで作っているブログの前の記事と次の記事へのリンクにアイキャッチが付くようにしていい感じにした

2020-09-02

モチベーション

前の記事、次の記事の部分がスターターのスタイルのままになっていて、手を付けられていなかったので、スタイルを当てていい感じにしたかった。

Before

before

After

after

デザイン

今回もアイキャッチコンポーネントを組み合わせるデザインとした。前の記事は左側に、次の記事は右側にアイキャッチが来るようにして前と次を表現した。

アイキャッチコンポーネントが汎用性が高く、記事のリンクを張る際に使いやすいので、用意しておいて良かった。

GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした

やったこと

まず、アイキャッチコンポーネントに渡す記事に紐づくタグ一覧が、前の記事、次の記事に関しては取得できていなかったので、 gatsby-node.js のGraphQLのクエリにtagsを追加して取れるようにした。

そして、下記のような PreviousAndNextPosts というコンポーネントを作った。デザインは基本的にMaterial-UIのGridで組むようにした。

/src/components/previous_and_next_posts.js
import { Grid } from "@material-ui/core"
import { Link } from "gatsby"
import React from "react"
import EyeCatch from "./eye_catch"
import styles from "./previous_and_next_posts.module.sass"

const PreviousAndNextPosts = ({ previous, next }) => (
  <Grid
    container
    spacing={4}
    direction="row"
    justify={previous ? "space-between" : "flex-end"}
    alignItems="flex-start"
  >
    {previous && (
      <Grid item xs={12} sm={6}>
        <Link to={previous.fields.slug} rel="prev">
          <Grid
            container
            spacing={2}
            direction="row"
            justify="space-between"
            alignItems="center"
          >
            <Grid item>
              <EyeCatch tags={previous.frontmatter.tags} />
            </Grid>
            <Grid item xs>
              <p className={styles.title}>{previous.frontmatter.title}</p>
            </Grid>
          </Grid>
        </Link>
      </Grid>
    )}
    {next && (
      <Grid item xs={12} sm={6}>
        <Link to={next.fields.slug} rel="next">
          <Grid
            container
            spacing={2}
            direction="row"
            justify="space-between"
            alignItems="center"
          >
            <Grid item xs>
              <p className={styles.title}>{next.frontmatter.title}</p>
            </Grid>
            <Grid item>
              <EyeCatch tags={next.frontmatter.tags} />
            </Grid>
          </Grid>
        </Link>
      </Grid>
    )}
  </Grid>
)

export default PreviousAndNextPosts

Gridによってスマホ向けの制御を入れており、スマホだと画面幅が狭いので、左右ではなく、下記のように二段で表示されるようにした。

SmartPhone

また、工夫点としては、親のGridのjustifyの記述を下記のようにすることで、一番最初の記事を開いた時に次の記事が右側に来るように制御を入れた。

<Grid
  container
  spacing={4}
  direction="row"
  justify={previous ? "space-between" : "flex-end"}  alignItems="flex-start"
>

こんな感じになる。

前の記事がないケース

おわりに

デザインを当てたいところは大体当たってきたので、いい感じ。続いて404画面とかに手を入れていきたい。

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら