Gatsbyでテーマを使用する方法

投稿日: 2022-04-20 2022-04-20
タグ: Development, GatsbyJS, javascript

著者は、 Write for DOnations プログラムの一環として、 InternetArchiveを選択して寄付を受け取りました。

序章

Gatsby 1.0は2017年にリリースされ、それ以来、静的サイトジェネレーターとしての高いカスタマイズ性を維持しながら、新しい機能をリリースし続けています。追加された機能は、プラグイン、新しいAPI、ユーティリティ、および構成オプションの形をとっています。これらの各機能は、個別に使用およびカスタマイズすることも、組み合わせて特定のユースケースを適用することもできます。ただし、多くのサイトが機能と設定の同じ組み合わせの恩恵を受けているため、GatsbyはGatsbyテーマを導入しました。

Gatsbyのテーマは、構成オプション、機能、および/またはユーザーインターフェイス（UI）要素のコレクションとして機能するプラグインを具体的に指します。共有機能を維持されたテーマに分離することで、サイトを最新の状態に保つことが容易になり、サイトの構成に費やす時間を減らし、コンテンツの開発により多くの時間を費やすことができます。

このチュートリアルでは、ブログ投稿を公開するためのGatsbyテーマ gatsby-theme-blog をインストール、構成、および使用します。このプラグインは、 MDX のサポートやコードの強調表示など、複数の機能を1つの便利なパッケージにバンドルしています。チュートリアル全体を通して、この特定のGatsbyテーマを使用するプロセスに従い、それを一般的なテーマに適用できます。

各ステップでは、Gatsbyテーマを使用する際の重要な部分について説明します。最後に、このプロセスを、将来使用する可能性のあるGatsbyテーマにどのように適用できるかを確認します。

前提条件

始める前に、ここにあなたが必要とするいくつかのものがあります：

Gatsbyを実行してサイトを構築するためのNode.jsのローカルインストール。インストール手順はオペレーティングシステムによって異なりますが、DigitalOceanには Ubuntu20.04およびmacOSのガイドがあり、最新リリースは公式Node.jsダウンロードページ[ X213X]。
Gatsbyで作業するためのJavaScriptにある程度精通している。 JavaScript言語は広大なトピックですが、出発点としては、JavaScriptでコーディングする方法シリーズが適しています。
gatsby-starter-defaultからの足場となる新しいGatsbyプロジェクト。新しいGatsbyプロジェクトを最初から作成するには、最初のGatsbyWebサイトのセットアップ方法チュートリアルのステップ1を参照してください。

このチュートリアルは、Node.js v14.16.1、npm v6.14.12、Gatsby v3.11.1、およびgatsby-theme-blogv3.0.0でテストされました。

ステップ1—テーマの検索とインストール

このチュートリアルでは、特定のテーマgatsby-theme-blogを使用して説明しますが、各ステップは、一般的なGatsbyテーマにも概念的に適用されます。これは、この最初のステップにも当てはまります。使用するテーマを見つけて、npmでインストールします。

Gatsbyは、プラグインとテーマの作成者に、 Gatsbyパッケージの公開方法に関するガイダンスを提供します。これにより、ニーズに合ったテーマを簡単に見つけることができます。テーマ開発者は、テーマパッケージにgatsbyとgatsby-themeの両方をキーワードとしてタグ付けし、パッケージレジストリ（ファイルが実際にホストされている場所）でスキャンして作成するように指示されます。検索可能。

このチュートリアルでは、ブログのサブセクションを使用してGatsbyを利用したサイトを構築するユースケースに従います。開発者は、MDX、コードの強調表示などのサポートを追加するためのテーマを探しています。 Gatsbyには独自のプラグインブラウザがありますが、実際にはnpmレジストリからリストを取得するため、最初のステップはnpmレジストリ検索エンジンで直接検索を開始することです。次のスクリーンショットに示すように、blog keywords:gatsby-themeの検索入力を使用すると、結果をgatsby-themeキーワードを持つプラグインのみに制限します。

npm results page for the "blog keywords:gatsby-theme" search. "gatsby-theme-blog" is the first package.

このチュートリアルでは、gatsby-theme-blogを使用するため、そのパッケージを選択します。インストールするテーマとしてgatsby-theme-blogを選択した状態で、このステップの次の部分は、依存関係とともに実際にインストールすることです。既存のGatsbyプロジェクトに移動し、ディレクトリで次のコマンドを実行します。

npm install gatsby-theme-blog

依存関係のインストールが完了すると、次のようなメッセージが表示されます。

Output...
+ [email protected]
added 262 packages from 181 contributors and audited 2391 packages in 49.706s

テーマとその依存関係をプロジェクトにインストールしたので、Gatsbyプロジェクト内でのテーマのロードと構成に移ります。

ステップ2—テーマの読み込みと構成

テーマがインストールされたので、実際にサイト全体でテーマを使用し、必要に応じて変更することができます。 Gatsbyでは、メインテーマの初期化と構成は、ルート構成ファイルgatsby-config.jsを編集することによって行われます。このステップでは、構成ファイルを編集して、必要なオプションを使用してテーマをロードします。

好みのエディターでgatsby-config.js構成ファイルを開き、以下を追加します。

gatsby-config.js

module.exports = {
  plugins: [
    ...
    `gatsby-plugin-image`,
    {
      resolve: 'gatsby-theme-blog',
      options: {
        basePath: '/posts',
        contentPath: `md/posts`,
      }
    },
    `gatsby-transformer-sharp`,
    ...
  ]
}

この構成コードには、カスタム値を使用している2つの重要な設定があります。テーマはbasePathオプションを使用してブログのURLを設定し、contentPathはブログ投稿として公開するMarkdownファイルの場所をテーマに指示します。 contentPathにmd/postsの値を使用するということは、Markdownファイルがmd/postsディレクトリに存在する必要があることを意味します。

このコードを追加したら、構成ファイルを保存します。

gatsby-theme-blogテーマは追加の設定を提供し、はgatsby-theme-blogREADMEファイルに記載されています。 Gatsbyのテーマはそれぞれ異なるため、この手順の最も重要な部分は、選択したテーマのドキュメントを参照し、そこに記載されている正確なガイダンスに従うことです。

これで、Gatsby構成ファイルを使用して、お好みに合わせてテーマをロードおよび構成するように設定できました。次のステップは、サイトに追加される新機能のいくつかを調査し、途中でテストすることです。

ステップ3—機能のテスト

テーマがインストール、構成、およびロードされると、サイトに実装できるようになります。このステップでは、テーマにバンドルされている新機能のいくつかを試して、結果をプレビューする方法について説明します。

新しいブログ投稿ファイルを使用して、gatsby-theme-blogのMDX、コードの強調表示、およびMarkdown処理のサポートをテストします。まず、ファイルを保存するディレクトリを作成する必要があります。これは、ステップ＃2で使用したmd/postsのcontentPath設定に対応している必要があります。このディレクトリは、ファイルブラウザで手動で作成するか、Gatsbyプロジェクトのルートで次のコマンドを実行してターミナルで作成できます。

mkdir -p ./md/posts

次に、新しい投稿コンテンツを含む空のMDXファイルmy-first-post.mdxを作成します。繰り返しますが、これは手動またはターミナルで作成できます。

touch ./md/posts/my-first-post.mdx

次に、空のMDXファイルを開き、次のコードを追加します。

md / posts / my-first-post.mdx

---
title: Learning Gatsby Themes and Trying MDX
slug: /posts/gatsby-theme-learning
date: 2021-08-16
excerpt: A post about learning Gatsby themes and trying out some MDX.
---

## Welcome!

This is a post where I plan to share my journey learning Gatsby Themes, and to try out some MDX.

## Resources

<ul>
{[
	{
		link: 'https://www.gatsbyjs.com/',
		text: 'Gatsby Website',
		note: 'Official Website for Gatsby'
	},
	{
		link: 'https://www.gatsbyjs.com/docs/themes/',
		text: 'Gatsby Theme Documentation',
		note: 'Documentation for Gatsby Theme usage and development'
	},
	{
		link: '../how-to-create-static-web-sites-with-gatsby-js',
		text: 'DigitalOcean - "How To Create Static Web Sites with Gatsby.js"',
		note: 'A DigitalOcean tutorial series on using Gatsby JS'
	}
].map(item => (
	<li key={item.link}>
		<a href={item.link} target="_blank">{item.text}</a>
		<ul>
			<li>{item.note}</li>
		</ul>
	</li>
))}
</ul>

## Code Sample

To try out code highlighting in this theme, here is a snippet of JavaScript code. This code won't run in your browser; it is for visual use only.

ファイルの上部にある---で囲まれたセクションは、frontmatterと呼ばれるキーと値のペアのセットです。すべてのテーマが同じキーを使用しているわけではありません。投稿で使用しているテーマは、gatsby-theme-blogで使用されているキーから慎重に選択されています。カスタムタイトル、slug（URLパス）、公開日、および抜粋（/postsリストページに表示するプレビューテキスト）を定義しました。

フロントマターに続くすべてのテキストは、 Welcome！セクションから始まり、投稿の本文になります。見出しテキストの前の2つのハッシュ記号（##）は、これがレベル2の見出しであり、リソースセクションでも使用されることをMarkdownに伝えます。

リソースセクションでは、MDXが通常のMarkdownと異なる点を初めて使用します。つまり、ReactのJSX構文を使用してReactコンポーネントを埋め込みます。マークダウンを使用して、単一のページにレンダリングします。あなたの投稿では、JSXを使用して、Gatsbyに関するリソースのコレクションをリンクのHTMLリストに変換しています。

最後に、gatsby-theme-blogにバンドルされているコード構文の強調表示機能をテストするには、ファイルの最後に Markdown Fenced CodeBlockを追加します。

md / posts / my-first-post.mdx

    ```js
    function saySomething(name) {
    	console.log(`Hello ${name}!`);
    	console.log(`Isn't learning about Gatsby fun?!`);
    }
    saySomething('Arthur');
    ```

これは、トリプルバックティックを使用して、コードの開始位置と停止位置の境界を示します。

新しい投稿の編集が完了したら、MDXファイルを保存して閉じます。

この投稿を閲覧者のように表示するには、テーマプラグインのすべての機能をテストして、次のコマンドを実行します。

npm run develop

準備ができたら、Gatsby CLIは、プロジェクトをWebブラウザーで開くように要求します。これは、localhost:8000に移動することで実行できます。新しいブログリストページを表示するには、localhost:8000/postsにアクセスし、この特定の新しい投稿を表示するには、localhost:8000/posts/gatsby-theme-learning/に移動します。ブログ投稿は次のようになります。

The tutorial's MDX blog post, built with Gatsby and rendered in the browser.

新しくインストールしたテーマが提供する機能のいくつかをテストし、Webブラウザーで作業の結果を表示しました。多くのユーザーにとって、これはすべてのニーズをカバーする可能性がありますが、より高いレベルのカスタマイズのために、次のステップでは、テーマの一部をオーバーライドできるシャドウイングと呼ばれるギャツビーの概念を検討します。

ステップ4—シャドウイングの使用（オプション）

チュートリアルのこの時点で、Gatsby内にサードパーティのテーマをインストールして構成しました。構成はgatsby-config.jsで行われ、テーマ発行者がカスタマイズ可能にするために選択したオプションに制限されていました。これらのオプションを超えてテーマをカスタマイズする必要がある場合は、shadowingと呼ばれるGatsbyの概念を使用します。これは、このステップで行います。

シャドウイングという用語は、組み込みのテーマファイルを独自の変更でオーバーライドまたは拡張する方法を指します。 WordPress に精通している人にとって、これは子テーマの概念に似ています。

Gatsbyテーマを使用すると、Gatsbyノードやファイル生成に影響を与えるメソッドから、UI要素やレイアウトに至るまで、テーマのソースコード内のすべてのファイルをシャドウイングできます。ブログでは、 bio-content.js という名前のReactコンポーネントファイルをシャドウイングして、各投稿の下にブログの経歴がどのように表示されるかをカスタマイズします。この1つのファイルをシャドウイングすることにより、gatsby-theme-blogプラグインを通過するすべてのブログ投稿の外観に影響を与えます。

シャドウイングの最初のステップは、シャドウイングするテーマプラグインとまったく同じ名前でsrcディレクトリにフォルダーを作成することです。これは手動で行うことも、端末を使用して行うこともできます。

mkdir src/gatsby-theme-blog

シャドウするテーマ内の特定のファイルについて、次のステップは、テーマとまったく同じ名前で同じディレクトリ構造のファイルを作成することです。既存のバイオコンポーネントをわずかに変更するだけなので、cp（コピー）コマンドを使用して、開始点として既存のファイルをコピーすることで、時間を節約できます。

mkdir -p src/gatsby-theme-blog/components
cp node_modules/gatsby-theme-blog/src/components/bio-content.js src/gatsby-theme-blog/components/bio-content.js

次に、新しくコピーしたファイルを開き、次の変更を加えます。

src / gatsby-theme-blog / components / bio-content.js

import React, { Fragment } from "react"

const BioContent = () => (
  <Fragment>
    <p>Content by DigitalOcean</p>
    <p>License Info:</p>
    <p
      style={{
        margin: "10px 20px",
        padding: 8,
        backgroundColor: "#0069ff",
        color: "white",
        borderRadius: 12,
      }}
    >
      This work is licensed under a Creative Commons
      Attribution-NonCommercial-ShareAlike 4.0 International License.
    </p>
  </Fragment>
)

export default BioContent

シャドウファイルの編集が完了したので、このファイルを保存して閉じます。

このファイルでは、元のbio-content.jsファイルをシャドウイングし、プレースホルダーテキストを作成者名とライセンス情報に置き換えています。これを行うには、BioContentReactコンポーネントによって返されるJSXを置き換えます。 style={{}}コードはインラインCSSの例であり、ライセンスコールアウトに色と間隔を追加するために使用しました。

ターミナルでnpm run developを再度実行すると、Gatsby開発サーバーが起動し、すべてのブログ投稿で変更をプレビューできます。

Screenshot showing the new bio-content that lists "DigitalOcean" as the author of the content and mentions the licensing for the post.

Gatsbyシャドウイングを使用することで、サードパーティのGatsbyテーマを標準構成を超えて変更し、独自のカスタムオーバーライドと拡張機能を組み合わせることができます。

結論

このチュートリアルの手順に従うことで、公開されたテーマを使用して複数のコンポーネントとバンドルされた機能の一部を単一の依存関係として取り込むGatsbyサイトができました。このパッケージ化された機能のおかげで、追加機能があるにもかかわらず、サイトの更新が簡単になり、構成コードとセットアップコードを大幅に減らすことができます。また、シャドウイングを使用してGatsbyテーマをより深いファイルベースのレベルでカスタマイズし、拡張性の別のレイヤーのロックを解除する方法も学びました。

このチュートリアルは特定のテーマをカバーしていますが、その概要を説明する概念とアプローチは、一般的にギャツビーのテーマに適用されます。 Gatsbyのテーマの詳細については、公式のGatsbyドキュメントをご覧ください。 Gatsbyの詳細については、Gatsby.jsシリーズを使用して静的Webサイトを作成する方法の残りの部分を確認してください。

getdocs

13036