讓我們用外部內容建立一個靜態網站。
在這篇文章中,我將向您展示如何使用 GatsbyJS 靜態渲染來自任何資料來源的資料。
如果您喜歡 React 並且想要一個符合標準的高效能 Web,您應該看看 GatsbyJS。
它有什麼作用?
它將把你的 React 程式碼編譯成靜態 HTML 檔案的集合。
為什麼要關心?
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中文網其他相關文章!