GatsbyJS 的外在內容

讓我們用外部內容建立一個靜態網站。
在這篇文章中，我將向您展示如何使用 GatsbyJS 靜態渲染來自任何資料來源的資料。

蓋茲比JS

如果您喜歡 React 並且想要一個符合標準的高效能 Web，您應該看看 GatsbyJS。

它有什麼作用？

它將把你的 React 程式碼編譯成靜態 HTML 檔案的集合。

為什麼要關心？

1. 最高效能 - 當使用者查看您的網頁時，客戶端或伺服器端不會執行任何程式碼！
2. 最快的圖像 - 以適合用戶設備的正確解析度逐步載入圖像。
3. SEO - 靜態 HTML 對 google（機器人）友善。緩慢的網站會受到谷歌搜尋的懲罰！
4. React - 高效率的前端開發。
5. Typescript - 在使用者看到錯誤之前捕獲錯誤（可選，但強烈建議）！
6. 內容 - 連接並使用許多開箱即用的內容來源或添加您自己的內容！

Gatsby JS 內容

GatsbyJS 將內容表示為節點樹。節點可以是圖像或文字區塊。
例如，部落格文章是文字和圖像節點的集合。

您可以在 gatsby-node.js 檔案中手動建立節點。但還有更簡單的方法。

外掛

節點是由外掛程式建立的。您需要哪個插件，取決於您選擇的 CMS。
最直接的選項是檔案系統插件，它將檔案轉換為節點。
要找到適合您的插件，請查看此處

找不到插件

如果您有現有外掛程式未涵蓋的資料來源，讓我們建立自己的資料來源。

這個過程相當簡單，唯一複雜的部分是影像。

載入節點

在 gatsby 專案根資料夾中建立 gatsby-node.ts （或 js）檔案。

添加此代碼即可開始。 gatsby 專案建置時會自動呼叫 sourceNodes 方法。

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;
}

我們現在有了（部落格）貼文清單和圖片（連結）清單。
在此範例中，我們有一個簡單的結構，其中每個貼文都有一些文字內容和單一圖像的 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 節點
post.mediaFile___NODE = fileNode.id

重要注意：gatsby 會自動從我們的檔案節點建立影像節點，但它需要一種方法來偵測它是影像。
如果您的網址包含檔案副檔名或您的伺服器將回覆圖像內容類型，則一切就緒。
如果不是這種情況，您可以在檔案節點上設定明確副檔名（png、jpg）來觸發影像節點建立。
ext: name.substring(name.lastIndexOf("."))

影像節點

也許你想知道為什麼我們要這麼麻煩地將圖片載入為節點。我們可以直接使用圖片網址。
例如，有時圖像可能位於經過身份驗證的服務後面。
但真正的原因是我們想使用 gatsby 提供的出色的圖像插件。
它會自動將圖像轉換為適合任何瀏覽我們網站的設備的最佳格式和尺寸。
這意味著圖像將加載得更快並且看起來更好（並且通過谷歌獲得更好的分數：）。

消費頁面中的節點

我們現在準備好使用我們建立的節點了。
您可以透過多種方式執行此操作，在本範例中，我們將發布一些貼文並將它們呈現在 功能 頁面上。

首先我們需要載入我們感興趣的資料節點。我們將使用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>
}

該元件將迭代我們從查詢中獲得的所有節點。它會渲染兩個 div，一個用於帖子圖像，一個用於文字內容。

這是一個包裹

建立一個美觀且高效能的網站從未如此簡單。
像 Gatsbyjs（及其插件）這樣的工具將為我們完成大部分繁重的工作。
這樣我們就可以將 100% 的時間投入到內容和設計上。

我希望有了這篇文章，您將能夠進一步自動化您的工作流程。
現在您可以將您的產品目錄、知識庫或其他有價值的內容帶到您的網站。
無需複製麵食，並具有全自動影像處理。

駭客快樂！

以上是GatsbyJS 的外在內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！