アポストロフィデータを用いたギャツビーサイトの構築:その2

これがsecond part of a two-part series ギャツビーのアポストロフィソースプラグインを使用して、ギャツビーサイトにアポストロフィコンテンツを使用することについて.この部分は第1部で実装されているコードでビルドされます.
このシリーズのパート1は、ギャツビーのためのアポストロフィソースプラグインの設定方法を説明しましたpiece アポストロフィからのデータと基本的な使用法page アポストロフィからのデータ.この2番目の部分では、Gatsbyページをプログラム的に作成し、それらのページに基づいて自動的に生成されたナビゲーションを実行するなど、GatsByでページデータをさらに進めます.
ホームページのHTMLの単純なコラムを加えることは恐ろしく複雑でありません、しかし、他のページはどうですか?どのようなページがアポストロフィに追加されているのか知りませんが、ギャツビーのサイトではそれぞれのウェブページが欲しいです.
まず第一に、これはより高度なものになるでしょう.あなたはAgstropheで編集作品と関連したメディアで多くをすることができます、そして、あなたは直接ギャツビーで作成するページとともにギャツビーでそれらを示しています.それはあなたのコンテンツ戦略に応じてアポストロフィで作成された他のページのために自動的にGatsbyでWebページを生成するために意味をなさない可能性があります.
あなたがこれに興味があって、少し狂ったようになっているならば、行き続けましょう.全体があるGatsby tutorial on programmatically creating pages それは私を助けて、もう一つの大きな資源です.

デモデータを設定する

あなたが最初の部分から来ているならば、あなたはすでにアポストロフィサイトがまだ走っているかもしれません.それが走っていてログインしているならpart one ) いくつかのデフォルトタイプのページを練習データとして追加します.ここでの私の例は/about/our-history , "about "ページの子ページ.

アポストロフィページからプログラムを作成する

これらのページを生成するためにいくつかの概念があります.

Gatsby page templates - 既に作成した他のページと同様に、これらはいくつかの外部データソースからページを生成するために使用される反応コンポーネントです.と違ってprogram.js , staff.js , and index.js コンポーネントは、我々は彼らが将来のページのためだけにテンプレートされているので、彼らは何が表示されますURLを知らない.

GatsbyノードとNode API - Gatsbyでは、ノードは我々のプログラム、スタッフのメンバー、およびページのような内容の単位です.ノードAPIは、それらのノードと対話するために多くのフックとメソッドを含んでいて、それらでものをします.

まず始めにsrc/templates/apos-page.js . それは多くの方法で我々が作った他のページに似ているので、身近に見えるはずです.私たちがこのシリーズの最初の部分に居住したホームページテンプレートのように、このページテンプレートはテンプレートを持っています_rendered HTMLは他の場所で使用している他のインポートと同様に追加されます.それがまだ持っていないものは、データを収容して、何が起こっているかについての質問ですsubNav インスタンス化された変数.
そのファイルはアポストロフィページデータから生成されるページのテンプレートになります.これを実行するために必要な手順がいくつかあります.

使用するcreatePages アポストロフィページのクエリを作成し、それぞれからページノードを作成する.

更新apos-page.js サブナビゲーション用の子ページと共に表示するための新しいギャツビーページデータを取得するテンプレート.

ソースデータからのGatsbyページの作成

この最初の部分はgatsby-node.js ファイル.このファイルはサイトがビルドされているときに一度実行されます.The Node APIs reference あなたがそこでできることの幅を見る良い場所です.我々は、使用するつもりですcreatePages ここでAPI.
まず、exports.createPages ファイルへの関数.我々がするすべては、それの中にあります...我々はdestructuring 引き数gatsbyはgraphql ユーティリティとactions 開始するオブジェクト.

exports.createPages = async ({ graphql, actions }) => {}

その関数内の次のステップは、アポストロフィソースプラグインを介して提供されたすべてのアポストロフィページのクエリを検索し、結果を格納することです.以下の関数を追加します.

exports.createPages = async ({ graphql, actions }) => {
  const result = await graphql(`
    query {
      allAposCorePage {
        nodes {
          title
          _url
          slug
          _rendered
        }
      }
    }
  `)
}

最初の部分でいくつかのGraphSQLクエリを見ましたので、これを読むとよく分かります.これはallAposCorePage フィールドとタイトル、URL、スラグ、およびHTMLをレンダリングノードを返します.それから、私たちは、それぞれの上でループして、データを使用しているページをつくるために、前述の「アクション」のうちの1つを使用します.これはcreatePage アクション、特に.
このクエリーステートメントの下に、次のように追加します.

exports.createPages = async ({ graphql, actions }) => {
  // The `result` query from above is here

  const { createPage } = actions

  result.data.allAposCorePage.nodes.forEach(node => {
    createPage({
      path: node.slug,
      component: path.resolve(`./src/templates/apos-page.js`),
      context: {
        title: node.title,
        slug: node.slug,
        slugregex: "/^\\" + node.slug + "//",
      },
    })
  })
}

前述のように、これは結果ノードのそれぞれをループしています(result.data.allAposCorePage.nodes.forEach ) そして、それぞれからギャツビーページを作成すること.我々の新しいページはアポストロフィを使うslug プロパティのURLパス.我々はそれを使用するように言っているapos-page.js そのコンポーネントとしてテンプレートをcontext プロパティ.
Gatsbyのドキュメントではcontext ページクエリでは、GraphSQL変数として使用できます.「私たちはタイトル、スラッグ、そしてregular expression そのオブジェクトのスラグのバージョン.後者は奇妙に見えるかもしれませんが、後にLegexとStringの内挿はGraphSQLクエリでは許されません.簡単にそれをここから道を得るために.
この時点で、Gatsbyページは、GraphSQLデータベースで作成されます(これらのファイルを編集しているときに大きなエラーを打った場合は、Gatsbyアプリケーションを再起動する必要があります).これらのページは単純な問い合わせで見ることができます.

query MyQuery {
  allSitePage {
    nodes {
      path
    }
  }
}

上の画像から、私のアポストロフィサイトで作成したページを見ることができます/about and /about/our-history がデータベースにあります.404ページとホームページは、ギャツビーと他の2つのデフォルトページです.プログラムとスタッフのために、我々は最初の部分で作成したものです.
Gatsbyサイトの実行中にアポストロフィサイトにページを追加すると、GraphSQLデータベースではすぐに表示されません.Gatsbyは静的サイトジェネレータであるので、サイトが再構築されるまで、それは何も見つけません.任意の時点で、あなたが期待して新鮮なアポストロフィデータを取得していない場合は、実行してみてくださいgatsby clean && gatsby develop バックアップを開始する前にキャッシュをクリアする.
たとえそれらのページがデータベースにあるとしてもhttp://localhost:8000/about (おそらくGATSBY構築を再起動した後には、エラーページが正しく表示されませんでした.我々のページは存在します、しかし、我々のテンプレートはまだ彼らのために準備ができていません.

テンプレートデータをレンダリングするテンプレート

最初の部分のホームページと他のページと同様に、これはGraphSQLデータベースの問い合わせをする必要があります.このクエリはdata 反応コンポーネントに渡されるオブジェクト.
このクエリは、いくつかの違いでホームページのクエリのようになります.

export const query = graphql`
  query($slug: String!) {
    aposCorePage(slug: { eq: $slug }) {
      title
      _rendered
    }
  }
`

のホームページのクエリindex.js が'/' スラッグハードコーディングされています.この1つはスラグとなる$slug に設定されたコンテキストオブジェクトからcreatePage メソッド.これはまた、ホームページのクエリがないタイトルプロパティを取得しています.
マイページhttp://localhost:8000/about 以下のようになります.

優れた!それはページです!そして、それはサイトナビゲーションでさえありますHeader.js コンポーネント.(このチュートリアルでは、より多くの意味を持つことになりますが、このチュートリアルでは、より深く理解することはできません).
私もページがありますhttp://localhost:8000/about/our-history , しかし、それへのリンクがありません.この“アバウト”ページはメインサイトナビゲーションのリンクを持っていますが、“about”の子として“私たちの歴史”ページを識別し、その親ページに表示することができます.
それを行うには、我々はapos-page.js クエリと使用slugregex コンテキストプロパティ.

export const query = graphql`
  query($slug: String!, $slugregex: String!) {
    aposCorePage(slug: { eq: $slug }) {
      title
      _rendered
    }
    allSitePage(
      filter: { path: { regex: $slugregex } }
      sort: { fields: [path], order: ASC }
    ) {
      edges {
        node {
          context {
            title
            slug
          }
        }
      }
    }
  }
`

持ち込み中ですslugregex そして、allSitePage 現在のページのスラッグでパスが始まるページのみを返すようにフィルタリングされたクエリ.我々は現在更新することができますsubNav コンポーネントの変数.結果があるならば、我々はページタイトルとスラグを含む単純なオブジェクトでそれを受け入れることができます.

export default function AposPage({ data }) {
  const page = data.aposCorePage
  let subNav = []
  if (data.allSitePage && data.allSitePage.edges) {
    subNav = data.allSitePage.edges.map(e => {
      return {
        title: e.node.context.title,
        slug: e.node.context.slug,
      }
    })
  }
  //...
}

インサイドul テンプレートのタグ、リスト項目とリンクマークアップでサブナビゲーション配列の上に地図を加えることができます:

return (
  <Layout>
    <>
      <header>
        <h1 className="text-2xl mb-6">{page.title || ""}</h1>
        {!!subNav.length && (
          <nav className="mb-6">
            <ul>
              {subNav.map(item => {
                return (
                  <li className="mr-6" key={item.slug}>
                    <a
                      className="text-blue-500 hover:text-blue-800"
                      href={item.slug}
                    >
                      {item.title}
                    </a>
                  </li>
                )
              })}
            </ul>
          </nav>
        )}
      </header>
      {page._rendered && (
        <div dangerouslySetInnerHTML={{ __html: page._rendered }} />
      )}
    </>
  </Layout>
)

すべての場所で、私たちの子ページは、現在“ページ”のタイトルの下のリンクとして表示する必要がありますページについて.かなりクール!

旅の終わりに

それだ!うまくいけば、Gatsby用のアポストロフィソースプラグインを使用する方法だけでなく、アポストロフィデータを使用して、作成するには、いくつかの興味深い方法の良い理解を得ることができます.
あなたが探索するデモコードで探索するより多くがあります.参照in the demo Gatsby site's repo with the finished code にpart-2 枝.
その他のリンク
あなたが質問をするならば、さえずりの上で我々のチームまたは私に手を差し伸べてください、さもなければ、不和のチャットで我々に加わってくださいhttps://chat.apostrophecms.com .
デモギャツビーサイト:https://github.com/apostrophecms/gatsby-demo-apostrophe
デモアポストロフィ3サイト、スターターピースタイプのヘッドレスCMSとして設定:https://github.com/apostrophecms/demo-a3-headless