Markdownファイルを表示するためのコンポーネントを作成します。ここではGraphQLでのデータの取得方法や、取得したデータの表示方法を記述します。
はじめに Markdown ファイルを表示するためのページコンポーネントを作成します。 手順 以下の手順により作成します。 GraphQLでのページデータの取得 Reactコンポーネントの作成 コンポーネントの作成 ページデータの取得 ページクエリは以下のように指定します。 c…
GatsbyでTypeScriptを使いブログシステムを構築します。ここではcretePagesを実装します。gatsby-markdown-remarkが作成したノードからページを作成する方法を記述します。
はじめに createPages の実装を行います。 この関数は、 Gatsby から呼ばれます。 前回作成した slug を元にページを追加します。 手順 主な手順としては、以下になります。 GraphQL でマークダウンコンテンツを取得 取得した各要素に対してページを追…
GatsbyでTypeScriptを使いブログシステムを構築します。ここではonCreateNodeの実装を行います。ここで行うことはslugを作成することです。
はじめに 前回までの準備をもとに実装していきます。 今回は、onCreateNode の実装を行います。 onCreateNode では、ファイル名から slug を作成し、指定されたnodeのfieldsキーの下にカスタムノードを作成します。
作成したものは GraphQL …
コンテンツの生成にMarkdownファイルをサポートする方法を記述します。Gatsbyの公式チュートリアルで紹介されている内容を元にTypeScriptを用いて記述します。gatsby-nodejsでは、ts-nodeを使用しTypeScriptで記述します。
はじめに ブログのコンテンツに Markdown ファイルを使用する方法を記述します。
具体的な方法は、Gatbyの公式サイトにあるチュートリアルに紹介されています。 この内容に沿って、TypeScript を使って機能を盛り込んで行きます。 主な手順 Markdown …