Markdownページ用テンプレートファイルの作成

2019-08-03

Markdown ファイルを表示するためのページコンポーネントを作成します。

以下の手順により作成します。

GraphQLでのページデータの取得
Reactコンポーネントの作成

ページクエリは以下のように指定します。

export const query = graphql`
    query($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
            }
        }
    }
`;

createPage の context で指定した slug を使用します。
上記ではslugが一致したノードが取得されます。

上記と対応して、結果の型を以下の様に指定します。

interface Props {
  data: {
    markdownRemark: {
      html: string;
      frontmatter: {
        title: string;
      }
    }
  }
}

記事のタイトルは frontmatter から取得します。
また表示するコンポーネントには、Semantic UI を使用します。

const blogPost: React.FC<Props> =  ({ data }) => {
  const { frontmatter, html } = data.markdownRemark;
  return (
    <Layout>
      <Container text >
        <Header as={"h1"}>{frontmatter.title}</Header>
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </Container>
    </Layout>
  )
}

コード全体は以下の様になりました。

// ./src/tempates/BlogPost.tsx
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';

import { Container, Header } from 'semantic-ui-react';

interface Props {
  data: {
    markdownRemark: {
      html: string;
      frontmatter: {
        title: string;
      }
    }
  }
}

const blogPost: React.FC<Props> =  ({ data }) => {
  const { frontmatter, html } = data.markdownRemark;
  return (
    <Layout>
      <Container text >
        <Header as={"h1"}>{frontmatter.title}</Header>
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </Container>
    </Layout>
  )
}
export default blogPost;

export const query = graphql`
    query($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
            }
        }
    }
`;

これで、記事を表示するページができました。その他、ブログシステムとして使用するためには、以下の要素が必要になります。

記事リスト表示ページ
Markdown ファイルの配置

これらは次回になります。

Markdownページ用テンプレートファイルの作成

はじめに

手順

コンポーネントの作成

ページデータの取得

型の定義

ページコンポーネントの実装

コード全体

おわりに