GatsbyJS の外部コンテンツ

外部コンテンツを含む静的 Web サイトを構築しましょう。
この投稿では、GatsbyJS を使用して任意のデータ ソースからのデータを静的にレンダリングする方法を説明します。

ギャツビーJS

React が好きで、標準に準拠した高パフォーマンスの Web が必要な場合は、GatsbyJS を検討してください。

それは何をしますか?

React コードを静的 HTML ファイルのコレクションにコンパイルします。

なぜ気にする必要があるのでしょうか?

1. 最大のパフォーマンス - ユーザーが Web を閲覧するときに、クライアント側またはサーバー側でコードが実行されることはありません!
2. 最速の画像 - ユーザーのデバイスに適切な解像度で画像をプログレッシブに読み込みます。
3. SEO - 静的 HTML は Google (ロボット) に優しいです。遅いウェブサイトは Google 検索によってペナルティを受けます!
4. React - 生産的なフロントエンド開発。
5. Typescript - ユーザーが目にする前にエラーをキャッチします (オプションですが、強くお勧めします)!
6. コンテンツ - すぐに使用できる多くのコンテンツ ソースを接続して使用するか、独自のコンテンツ ソースを追加します!

ギャツビー JS コンテンツ

GatsbyJS はコンテンツをノードのツリーとして表します。ノードは画像やテキストのブロックにすることができます。
たとえば、ブログ投稿はテキストと画像のノードのコレクションです。

gatsby-node.js ファイルでノードを手動で作成できます。しかし、もっと簡単な方法があります。

プラグイン

ノードはプラグインによって作成されます。どのプラグインが必要かは、選択した CMS によって異なります。
最も簡単なオプションは、ファイルをノードに変換するファイルシステム プラグインです。
自分に合ったプラグインを見つけるには、ここをご覧ください

プラグインが見つかりません

既存のプラグインでカバーされていないデータ ソースがある場合は、独自のプラグインを構築しましょう。

このプロセスは非常に単純で、複雑な部分は画像のみです。

ノードのロード中

gatsby プロジェクトのルート フォルダーに gatsby-node.ts (または js) ファイルを作成します。

開始するには、このコードを追加してください。 sourceNodes メソッドは、gatsby プロジェクトのビルド時に自動的に呼び出されます。

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

それでは、データを取得しましょう。ここでは https://inuko.net アプリ プラットフォームを使用しますが、プロセスはどのソースでも同様です。

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

そして、必要な画像も取得しましょう。

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

これで、(ブログ) 投稿のリストと画像 (リンク) のリストができました。
この例では、各投稿にテキスト コンテンツと 1 つの画像の ID が含まれる単純な構造があります。

次のステップは、サーバーから取得したデータを gatsby が使用できるデータに変換することです。
gatsby のデータは *node*s で表されるので、サーバー データをノードに変換する方法を見てみましょう。

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

すべての投稿を反復処理し、それぞれに対応するノードを作成します。
投稿に画像 post.image_id がある場合は、remoteFileNode ノードと
も作成します。 それをポストノードに追加します
post.mediaFile___NODE = fileNode.id

重要 注: gatsby はファイル ノードからイメージ ノードを自動的に作成しますが、それがイメージであることを検出する方法が必要です。
URL にファイル拡張子が含まれている場合、またはサーバーが画像コンテンツ タイプで応答する場合は、準備完了です。
そうでない場合は、ファイル ノードに明示的な拡張子 (png、jpg) を設定して、イメージ ノードの作成をトリガーできます。
拡張子: name.substring(name.lastIndexOf("."))

画像ノード

おそらく、なぜ画像をノードとしてロードするという苦労をするのか不思議に思っているかもしれません。画像の URL を直接使用することもできます。
たとえば、画像が認証されたサービスの背後にある場合もあります。
しかし本当の理由は、gatsby が提供する素晴らしい画像プラグインを使いたいからです。
画像は、Web を閲覧するあらゆるデバイスに最適な形式とサイズに自動的に変換されます。
これは、画像の読み込みが速くなり、見た目も良くなることを意味します (Google によるスコアが向上します)。

ページ内のノードの消費

作成したノードを使用する準備が整いました。
これを行うにはさまざまな方法があります。この例では、いくつかの投稿を 機能 ページにレンダリングします。

まず、対象となるデータ ノードをロードする必要があります。useStaticQuery を使用します。
次に、読み込まれたすべての投稿をレンダリングする SectionGrid という再利用可能なコンポーネントにデータを渡します。

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return <SectionGrid data={data} title={<h1>Features</h1>} />
}

レンダリング時間です!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return <div className="sectionGrid">
        <div className="hero">
            {props.title}
        </div>
        {edges.map(edge => {
            const node = edge.node;
            return <div className="section">
                <div>
                    <GatsbyImage image={node.mediaFile.childImageSharp.gatsbyImageData} alt={edge.name} />
                </div>
                <div className="sectionText">
                    <h2>{node.title}</h2>
                    <div>{node.content}</div>
                </div>
            </div>
        })}
    </div>
}

このコンポーネントは、クエリから取得したすべてのノードを反復処理します。そして、2 つの div をレンダリングします。1 つは投稿画像用、もう 1 つはテキスト コンテンツ用です。

それはラップです

見た目もパフォーマンスも優れた Web サイトの構築が、これまでになく簡単になりました。
Gatsbyjs (およびそのプラグイン) のようなツールは、面倒な作業のほとんどを行ってくれます。
したがって、私たちはコンテンツとデザインに 100% の時間を費やすことができます。

この投稿を参考にして、ワークフローをさらに自動化できることを願っています。
製品カタログ、知識ベース、その他の貴重なコンテンツを Web サイトに導入できるようになりました。
コピペなしで完全に自動化された画像処理を使用します。

ハッキングを楽しんでください!

以上がGatsbyJS の外部コンテンツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。