이전에 만든 Gatsby 블로그를 업그레이드하세요!

gatsby 입문 블로그 만들어서 서버에 올려보자 에서 만든 사이트를 업그레이드합니다.
결론부터 말하면 플러그인을 넣거나 graphql을 궁리하거나 하면 비교적 빨리 기능 추가는 가능했습니다.

지난번은. . .

전회 작성해 업한 사이트는 이런 느낌의 심플한 블로그였습니다.

그리고 이번에

이번에 작성한 것이 이것입니다.

비교적 노력했다!

추가한 기능

이번에 이하 기능을 추가했습니다.

반응형 대응

마크 다운 기사를 블로그 워크로 구분하여 각각을 다른 카테고리로 표시 (BLOG와 WORKS)

최신 기사 6건을 표지에 표시

페이징을 포함한 블로그 목록 표시

자기소개는 작성했지만 미완

반응형 대응

이것은 gatsby-plugin-typography와 Material-UI에 모두 의존하고 있습니다.
gatsby-plugin-typography에서는 문자 사이즈나 padding 등의 폭이나 설정을 맡기고 있습니다.
Material-UI에서 헤더나 아이콘 등을 작성하고 있습니다.
예를 들어 헤더의 동작은 다음과 같습니다.

header.js(일부)

  ※レスポンシブ対応の部分のみ記載
  const useStyles = makeStyles((theme) => ({
    menuLinkBox: {
      [theme.breakpoints.up('sm')]: {
        display: 'block', ←画面サイズがsmより上ならmenuLinkBoxを表示
      },
      [theme.breakpoints.down('sm')]: {
        display: 'none', ←画面サイズがsmより下ならmenuLinkBoxを非表示
      },
    },
    ↑↑↑↑↑
    画面サイズによりどちらかが表示される状態にしている
    ↓↓↓↓↓
    menuLinkBoxSm: {
      [theme.breakpoints.up('sm')]: {
        display: 'none', ←画面サイズがsmより上ならmenuLinkBoxSmを非表示
      },
      [theme.breakpoints.down('sm')]: {
        display: 'block', ←画面サイズがsmより上ならmenuLinkBoxSmを表示
      },
    },
  }));

      <AppBar position='static'>
        <Toolbar>
          <Box>
            <Link to={`/`}>
              <Image/>
            </Link>
          </Box>
          <Box className={styleClass.menuLinkBox}>
            <Link to={`/`}>
              HOME
            </Link>
            ・・・省略・・・
          </Box>
          <Box className={styleClass.menuLinkBoxSm}>
            <IconButton>
              <MenuIcon />
            </IconButton>
            <Menu>
              <MenuItem>
                <Link to={`/`}>
                  HOME
                </Link>
              </MenuItem>
              ・・・省略・・・
            </Menu>
          </Box>
        </Toolbar>
      </AppBar>

너무 반응에 무게를 두면 릴리스가 지연된다고 생각했기 때문에, 반응의 기준은 이하 2점만으로 좁혔습니다.

theme.breakpoints.up('sm')

theme.breakpoints.down('sm')

업무 앱으로 응답 대응은, 그다지 필요 없어서 신경쓰지 않았지만, 이것 세세하게 생각해내면 엄청 시간 걸릴 것 같네요.

마크 다운 기사를 블로그 워크로 구분하여 각각을 다른 카테고리로 표시 (BLOG 및 WORKS)

최신 기사 6건을 표지에 표시

기사의 구분은 마크다운의 문장에 태그:kind를 붙이는 것으로 대응했습니다.


이렇게하면 graphql로 나누어 얻을 수 있습니다.

index.js

import React from "react";
import {useStaticQuery, graphql } from "gatsby";

import Layout from "../components/layout";
import SEO from "../components/seo";
import PostList from "../components/postList";

const BlogIndex = ({location}) => {
  const indexData = useStaticQuery(graphql`
    query IndexDataQuery {
      blog: allMarkdownRemark(filter: {frontmatter: {kind: {regex: "/blog/"}}}, sort: {fields: [frontmatter___date], order: DESC}, limit: 6) {
      ↑同一項目を複数回取得する場合、先頭にblog:(別名 + :)と記載し、別名を設定
      ↑{frontmatter: {kind: {regex: "/blog/"}}}によりblogの記事が取得できます。
      ↑limit: 6で表紙に出力する最新6件と定義
        edges {
          node {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "YYYY年MM月DD日")
              title
              description
              kind
            }
          }
        }
      }
      work: allMarkdownRemark(filter: {frontmatter: {kind: {regex: "/work/"}}}, sort: {fields: [frontmatter___date], order: DESC}, limit: 6) {
      ↑{frontmatter: {kind: {regex: "/work/"}}}によりworkの記事が取得できます。
        edges {
          node {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "YYYY年MM月DD日")
              title
              description
              kind
            }
          }
        }
      }
    }
  `);

  const blogs = indexData.blog.edges;←別名blogで取得
  const works = indexData.work.edges;←別名workで取得
  return (
    <Layout location={location}>
      <SEO title="Top" />
      <PostList title="BLOG" listUrl="/blog" postList={blogs}/>
      <PostList title="WORKS" listUrl="/works" postList={works}/>
    </Layout>
  )
}

export default BlogIndex

위에서 blog, work로 분할하여 표시할 수 있습니다.
유쿠유쿠는 태그 검색과 같은 기능을 원한다.

이번은 여기까지입니다.

조금 알림

이번에 작성한 블로그는 아래에서 볼 수 있습니다! !
h tps : // 3s ぁぼお. 코m/

컨텐츠는 지금 작성중이므로 조금씩 수를 늘려 갈 예정입니다!
잘 부탁드립니다!

또한 위 사이트의 프로그램은 아래에 저장되어 있습니다.
htps : // 기주 b. 이 m / 3s ぁ 보오 / tsby by b ぉ g 3S

기본적인 기능은 갖추었으므로 템플릿에도 꼭 사용하십시오!
고마워요!

gatsby의 작업 내역

gatsby 입문 자습서를 다루는 0. 개발 환경 설정
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2)
gatsby 입문 자습서 2. 개츠비 스타일링 개요
gatsby 시작하기 튜토리얼 3. 중첩 된 레이아웃 구성 요소 만들기
gatsby 입문 자습서 4. 개츠비 데이터
gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링
gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
gatsby 입문 튜토리얼을 다루는 7. 프로그래밍 방식으로 데이터에서 페이지 만들기
gatsby 입문 자습서 8. 게시할 사이트 준비
gatsby 입문 블로그 만들어서 서버에 올려보자