容源：source 插件接入、GraphQL 查詢與自動化構(gòu)建實戰(zhàn))
從 Kontent.ai 為 Gatsby 站點接入內(nèi)容源source 插件接入、GraphQL 查詢與自動化構(gòu)建實戰(zhàn)【免費下載鏈接】gatsbyReact-based framework with performance, scalability, and security built in.項目地址: https://gitcode.com/gh_mirrors/ga/gatsby導(dǎo)讀本文基于 Gatsby 倉庫中的官方指南 sourcing-from-kontent-ai.md完整講解如何將 Kontent.ai托管式 CaaS 內(nèi)容管理系統(tǒng)接入 Gatsby 站點從創(chuàng)建 Kontent.ai 項目、安裝kontent-ai/gatsby-source插件到通過 GraphQL 將內(nèi)容注入已有頁面、按內(nèi)容類型程序化生成頁面最后配置 Webhook 實現(xiàn)內(nèi)容發(fā)布即自動重新構(gòu)建的持續(xù)部署鏈路。讀完本文你將掌握一條可復(fù)現(xiàn)的CMS 內(nèi)容 → Gatsby GraphQL → 靜態(tài)頁面 → 自動更新完整流水線并了解倉庫內(nèi) benchmarks/source-kontent 基準(zhǔn)站點中真實可運行的等價實現(xiàn)。Kontent.ai 與 CaaS 為什么適合 GatsbyKontent.ai 是一款托管式 CMS以內(nèi)容即服務(wù)Content as a ServiceCaaS為核心內(nèi)容與展示分離同一份內(nèi)容既可以驅(qū)動 Gatsby 靜態(tài)站點也可以復(fù)用到移動 App 等其他渠道內(nèi)容資產(chǎn)因此具備未來兼容性。它同時提供易用的編輯界面與協(xié)作能力業(yè)務(wù)人員可在同一處完成內(nèi)容創(chuàng)作無需每個用戶都依賴技術(shù)協(xié)助。在數(shù)據(jù)建模層面Kontent.ai 支持多語言內(nèi)容交付以及通過 linked items鏈接項在內(nèi)容之間建立關(guān)系。無論內(nèi)容如何組織Kontent.ai 的官方 Gatsby source 插件都會為你的站點創(chuàng)建對應(yīng)的 GraphQL 節(jié)點使 Gatsby 的數(shù)據(jù)層與 CMS 結(jié)構(gòu)一一對應(yīng)。倉庫的 headless-cms.md 在 headless CMS 對比清單中同樣收錄了 KontentKontent by Kentico可作為其作為 headless 內(nèi)容源的定位佐證。Setup搭建數(shù)據(jù)源與站點骨架第一步準(zhǔn)備 Kontent.ai 項目與內(nèi)容在 Kontent.ai 官網(wǎng)注冊賬號注冊后會默認(rèn)開啟 30 天全功能試用試用期內(nèi)或之后可以隨時切換到 Developer 計劃始終從免費檔起步或更高階計劃。準(zhǔn)備內(nèi)容。你可以按自己的業(yè)務(wù)定義 content types內(nèi)容類型即內(nèi)容的模板再基于它們創(chuàng)建 content items內(nèi)容項即實際內(nèi)容。如果只想快速體驗可以使用 Sample Project 生成器創(chuàng)建 Sample Project該向?qū)詣訉?dǎo)入示例內(nèi)容。本指南后續(xù)均以 Sample Project 為例。Sample Project 是一個虛構(gòu)咖啡品牌 Dancing Goat 的完整演示項目覆蓋了 Kontent.ai 的多種特性你可以在該項目內(nèi)的 Quickstart 頁面查看它在不同渠道中的展示效果。本指南只需要用到一項關(guān)鍵信息Project ID。在 Kontent.ai 中進(jìn)入Project settings項目設(shè)置→ API keys即可找到。第二步創(chuàng)建 Gatsby 站點并安裝 source 插件假定你已經(jīng)安裝了 Gatsby CLI參考 快速開始文檔當(dāng)前倉庫推薦使用npm init gatsby交互式創(chuàng)建站點執(zhí)行g(shù)atsby new kontent-guide cd kontent-guide安裝 Kontent.ai 官方 source 插件npm install kontent-ai/gatsby-source安裝完成后在站點根目錄的gatsby-config.js中注冊插件module.exports { siteMetadata: { // ... }, plugins: [ // ... { resolve: kontent-ai/gatsby-source, options: { projectId: YourProjectID, // 填入你的 Project ID // 注意使用上面生成的 Sample Project 時en-US 是項目默認(rèn)語言 // 與這里的配置一致如果是空白項目這里需要填 default languageCodenames: [ en-US, // 或你項目中的語言Project settings - Localization ], }, }, // ... ], }兩個配置項的要點projectId決定插件從哪個 Kontent.ai 項目拉取內(nèi)容必須與 API keys 頁面中顯示的值一致。languageCodenames聲明需要同步的語言編碼列表。不同項目默認(rèn)語言不同——Sample Project 為en-US全新空白項目為default多語言項目的完整語言列表可在 Project settings → Localization 中查看。配置完成后即可啟動開發(fā)服務(wù)器驗證連通性gatsby develop瀏覽器訪問http://localhost:8000/___graphql打開 GraphiQL即可瀏覽所有來自 Kontent.ai 的內(nèi)容。插件自動生成的查詢以kontentItem查詢單個節(jié)點或allKontentItem查詢節(jié)點集合為前綴。關(guān)于 GraphiQL 的詳細(xì)用法可參考 running-queries-with-graphiql.md。值得一提倉庫中的基準(zhǔn)站點 benchmarks/source-kontent/gatsby-config.js 是這套接入的獨立佐證——它通過dotenv從.env.${NODE_ENV}讀取BENCHMARK_KONTENT_PROJECT_ID與BENCHMARK_KONTENT_LANGUAGE_CODENAMES逗號分隔后轉(zhuǎn)為數(shù)組注入插件選項說明 projectId 與 languageCodenames 這兩個參數(shù)正是插件實際消費的核心配置該站點使用的是舊版包名kentico/gatsby-source-kontent當(dāng)前文檔所采用的kontent-ai/gatsby-source為其更名后的官方包。Using the plugin兩種典型內(nèi)容消費方式方式一把 CMS 內(nèi)容填充進(jìn)已有頁面以站點首頁標(biāo)題為例。默認(rèn)模板的標(biāo)題來自 site metadata值為 Gatsby Default Starter。而 Sample Project 中恰好有一個 Home 類型的唯一內(nèi)容項 Home因此可以改造布局組件用useStaticQuery查詢該內(nèi)容項的元數(shù)據(jù)并渲染為標(biāo)題// ... const Layout ({ children }) { const data useStaticQuery(graphql query SiteTitleQuery{ kontentItemHome { elements { metadata__meta_title { value } } } } ) return ( Header siteTitle{data.kontentItemHome.elements.metadata__meta_title.value} / // ...刷新http://localhost:8000/后標(biāo)題會變?yōu)?Dancing Goat–Freshest coffee on the block!。此后在 Kontent.ai 中修改該標(biāo)題并重新運行g(shù)atsby develop站點即可重建反映新值如需全自動見下文持續(xù)部署一節(jié)。這段示例同時演示了 source 插件節(jié)點結(jié)構(gòu)的兩條規(guī)律單個內(nèi)容項以kontentItem 內(nèi)容類型駝峰名查詢?nèi)鏺ontentItemHome元素字段統(tǒng)一掛在elements下字段名即 Kontent.ai 中的元素 codename此處為metadata__meta_title通過.value讀取實際內(nèi)容。方式二按內(nèi)容類型程序化生成頁面CaaS 的一大價值在于頁面可以在 Kontent.ai 中定義由 Gatsby 在構(gòu)建期自動生成。下面以 Sample Project 中的 Article 類型為例三步完成文章頁自動生成。第一步從 URL pattern 元素生成 slug 字段。利用onCreateNode為 Article 節(jié)點掛載fields.slugexports.onCreateNode ({ node, actions: { createNodeField } }) { if (node.internal.type kontent_item_article) { createNodeField({ node, name: slug, value: node.elements.url_pattern.value, }) } }第二步在createPages中查詢所有文章并創(chuàng)建頁面。頁面路徑取自 slug模板指向src/templates/article.js并通過context把 slug 傳給模板供其查詢使用const path require(path) exports.onCreateNode ({ node, actions: { createNodeField } }) { if (node.internal.type kontent_item_article) { createNodeField({ node, name: slug, value: node.elements.url_pattern.value, }) } } exports.createPages async ({ graphql, actions }) { const { createPage } actions // 從 Kontent 查詢數(shù)據(jù) const result await graphql( { allKontentItemArticle { nodes { fields { slug } } } } ) // 創(chuàng)建頁面 result.data.allKontentItemArticle.nodes.forEach((node) { createPage({ path: node.fields.slug, component: path.resolve(src/templates/article.js), context: { slug: node.fields.slug, }, }) }) }第三步編寫文章模板。模板接收context.slug作為查詢變量拉取對應(yīng)文章后渲染標(biāo)題與正文import React from react import { graphql } from gatsby import Layout from ../components/layout const Article ({ data }) { const item data.kontentItemArticle.elements return ( Layout h1{item.title.value}/h1 div dangerouslySetInnerHTML{{ __html: item.body_copy.value }} / /Layout ) } export default Article export const query graphql query articleQuery($slug: String!) { kontentItemArticle(fields: { slug: { eq: $slug } }) { fields { slug } elements { body_copy { value } title { value } } } } 重新運行g(shù)atsby develop后每篇 Article 都對應(yīng)一個可訪問的頁面訪問任意不存在的 URL如http://localhost:8000/asdf觸發(fā) 404 頁面可以查看全部已生成路徑的列表。富文本與 schema 的進(jìn)階處理注意body_copy來自 Kontent.ai 的 rich text富文本元素。默認(rèn)情況下富文本中的鏈接和內(nèi)聯(lián)鏈接項如嵌入視頻不會被解析。若需要解析可以按結(jié)構(gòu)化形式查詢所需數(shù)據(jù)自己編寫 React 組件渲染也可以使用官方kontent-ai/gatsby-components包中的 Rich text element 組件來簡化這一工作。此外由于 Kontent.ai source 插件為 Kontent 數(shù)據(jù)定義了 GraphQL schema你完全可以基于該 schema 按需擴(kuò)展例如為節(jié)點補(bǔ)充派生字段、接入圖片處理等官方示例倉庫中提供了一系列可參考的用法。倉庫中 configuring-usage-with-plugin-options.md 也引用了 Kontent source 插件基于pluginOptionsSchema聲明配置項的做法——這意味著插件選項受 Gatsby 配置校驗保護(hù)誤傳參數(shù)會在啟動時得到明確報錯。倉庫里的完整對照實現(xiàn)如果你希望看到上述流程的完整可運行版本可以直接研究基準(zhǔn)站點 benchmarks/source-kontent。它與文檔示例的差異正好展示了同一思路的多種寫法gatsby-node.js 中createPages直接通過allKontentItemArticle查詢elements.slug.value生成路徑并在查詢出錯時用reporter.panicOnBuild中止構(gòu)建是對失敗快速暴露的工程化處理。src/templates/article.js 展示了富文本content、標(biāo)題title與圖片image的聯(lián)合查詢其中圖片通過gatsby-image的fluid字段與...KontentAssetFluidfragment 處理——說明 source 插件還負(fù)責(zé)把 Kontent 資產(chǎn)接入 Gatsby 的圖片處理管線。update-article.js 通過kentico/kontent-management管理客戶端模擬內(nèi)容更新隨機(jī)選中一篇文章創(chuàng)建新語言變體版本、追加一個!修改標(biāo)題并重新發(fā)布。這一腳本用于在構(gòu)建基準(zhǔn)測試中反復(fù)觸發(fā)內(nèi)容變更也側(cè)面印證了CMS 內(nèi)容更新 → 重新構(gòu)建這一持續(xù)部署心智模型的可行性。Continuous deployment內(nèi)容發(fā)布即自動構(gòu)建靜態(tài)站點的優(yōu)勢在于性能與安全但要保證內(nèi)容始終新鮮需要在已發(fā)布內(nèi)容變更時自動觸發(fā)重新構(gòu)建。Gatsby Cloud 用戶在 Gatsby Cloud 控制臺 可直接配置與 Kontent.ai 的集成下面以 Netlify 為例給出通用步驟在 Netlify 創(chuàng)建 Build Hook進(jìn)入站點設(shè)置新建一個 build hook名稱可設(shè)為 Change in Kontent.ai content創(chuàng)建后復(fù)制生成的 URL。在 Kontent.ai 創(chuàng)建 Webhook進(jìn)入Project settings → Webhooks新建 webhook名稱可設(shè)為 Netlify build把上一步的 URL 粘貼到URL address字段。選擇觸發(fā)事件在觸發(fā)事件中選擇 DELIVERY API TRIGGERS 下的內(nèi)容項事件Publish與Unpublish即可事件全集可參考 Kontent.ai 官方 Webhooks 參考文檔。完成后每當(dāng)已發(fā)布內(nèi)容發(fā)生變化Kontent.ai 的 webhook 就會請求 Netlify 的 build hook觸發(fā)一次新的構(gòu)建保證靜態(tài)內(nèi)容始終同步到最新版本。這條Delivery API 觸發(fā) → Webhook → 重建的鏈路與上述基準(zhǔn)站點中update-article.js借助 Management API 修改并重新發(fā)布內(nèi)容后等待站點重建的思路完全一致可互為驗證。Whats next更深入的方向至此你已經(jīng)完成了Gatsby 站點接入 Kontent.ai 內(nèi)容變更自動重建的完整閉環(huán)。Kontent.ai 還能支撐更多內(nèi)容關(guān)系用于分類的 taxonomies分類法、多語言內(nèi)容、以及內(nèi)容項之間的相互鏈接。進(jìn)一步探索可以從三個方向入手查閱kontent-ai/gatsby-source插件的 Available Options 文檔了解projectId、languageCodenames之外的更多可選配置如 API 密鑰、預(yù)覽環(huán)境支持等閱讀 Kontent.ai 官方文檔探索 taxonomies、多語言、linked items 等在 GraphQL 節(jié)點中的表現(xiàn)形態(tài)參考 Kontent.ai Gatsby starter 站點查看一個包含各類內(nèi)容查詢的完整示例站點或?qū)φ諅}庫內(nèi) benchmarks/source-kontent 的基準(zhǔn)實現(xiàn)觀察生產(chǎn)級寫法與快速上手寫法之間的差異?？偨Y(jié)本文圍繞 官方接入指南 完整還原了 Kontent.ai → Gatsby 的內(nèi)容接入流程準(zhǔn)備 CMS 項目與 Project ID → 安裝并配置kontent-ai/gatsby-source→ 用kontentItem/allKontentItem查詢把內(nèi)容注入既有頁面 → 通過onCreateNode與createPages按內(nèi)容類型自動生成頁面 → 通過 Webhook Build Hook 實現(xiàn)內(nèi)容發(fā)布即重建。同時結(jié)合倉庫內(nèi) benchmarks/source-kontent 的源碼印證了插件配置、頁面生成、圖片處理與內(nèi)容更新模擬等底層細(xì)節(jié)為你在真實項目中落地 CaaS 內(nèi)容驅(qū)動架構(gòu)提供了可直接參照的完整路徑?！久赓M下載鏈接】gatsbyReact-based framework with performance, scalability, and security built in.項目地址: https://gitcode.com/gh_mirrors/ga/gatsby創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 從 Kontent.ai 為 Gatsby 站點接入內(nèi)容源：source 插件接入、GraphQL 查詢與自動化構(gòu)建實戰(zhàn)
從 Kontent.ai 為 Gatsby 站點接入內(nèi)容源source 插件接入、GraphQL 查詢與自動化構(gòu)建實戰(zhàn)【免費下載鏈接】gatsbyReact-based framework with performance, scalability, and security built in.項目地址: https://gitcode.com/gh_mirrors/ga/gatsby導(dǎo)讀本文基于 Gatsby 倉庫中的官方指南 sourcing-from-kontent-ai.md完整講解如何將 Kontent.ai托管式 CaaS 內(nèi)容管理系統(tǒng)接入 Gatsby 站點從創(chuàng)建 Kontent.ai 項目、安裝kontent-ai/gatsby-source插件到通過 GraphQL 將內(nèi)容注入已有頁面、按內(nèi)容類型程序化生成頁面最后配置 Webhook 實現(xiàn)內(nèi)容發(fā)布即自動重新構(gòu)建的持續(xù)部署鏈路。讀完本文你將掌握一條可復(fù)現(xiàn)的CMS 內(nèi)容 → Gatsby GraphQL → 靜態(tài)頁面 → 自動更新完整流水線并了解倉庫內(nèi) benchmarks/source-kontent 基準(zhǔn)站點中真實可運行的等價實現(xiàn)。Kontent.ai 與 CaaS 為什么適合 GatsbyKontent.ai 是一款托管式 CMS以內(nèi)容即服務(wù)Content as a ServiceCaaS為核心內(nèi)容與展示分離同一份內(nèi)容既可以驅(qū)動 Gatsby 靜態(tài)站點也可以復(fù)用到移動 App 等其他渠道內(nèi)容資產(chǎn)因此具備未來兼容性。它同時提供易用的編輯界面與協(xié)作能力業(yè)務(wù)人員可在同一處完成內(nèi)容創(chuàng)作無需每個用戶都依賴技術(shù)協(xié)助。在數(shù)據(jù)建模層面Kontent.ai 支持多語言內(nèi)容交付以及通過 linked items鏈接項在內(nèi)容之間建立關(guān)系。無論內(nèi)容如何組織Kontent.ai 的官方 Gatsby source 插件都會為你的站點創(chuàng)建對應(yīng)的 GraphQL 節(jié)點使 Gatsby 的數(shù)據(jù)層與 CMS 結(jié)構(gòu)一一對應(yīng)。倉庫的 headless-cms.md 在 headless CMS 對比清單中同樣收錄了 KontentKontent by Kentico可作為其作為 headless 內(nèi)容源的定位佐證。Setup搭建數(shù)據(jù)源與站點骨架第一步準(zhǔn)備 Kontent.ai 項目與內(nèi)容在 Kontent.ai 官網(wǎng)注冊賬號注冊后會默認(rèn)開啟 30 天全功能試用試用期內(nèi)或之后可以隨時切換到 Developer 計劃始終從免費檔起步或更高階計劃。準(zhǔn)備內(nèi)容。你可以按自己的業(yè)務(wù)定義 content types內(nèi)容類型即內(nèi)容的模板再基于它們創(chuàng)建 content items內(nèi)容項即實際內(nèi)容。如果只想快速體驗可以使用 Sample Project 生成器創(chuàng)建 Sample Project該向?qū)詣訉?dǎo)入示例內(nèi)容。本指南后續(xù)均以 Sample Project 為例。Sample Project 是一個虛構(gòu)咖啡品牌 Dancing Goat 的完整演示項目覆蓋了 Kontent.ai 的多種特性你可以在該項目內(nèi)的 Quickstart 頁面查看它在不同渠道中的展示效果。本指南只需要用到一項關(guān)鍵信息Project ID。在 Kontent.ai 中進(jìn)入Project settings項目設(shè)置→ API keys即可找到。第二步創(chuàng)建 Gatsby 站點并安裝 source 插件假定你已經(jīng)安裝了 Gatsby CLI參考 快速開始文檔當(dāng)前倉庫推薦使用npm init gatsby交互式創(chuàng)建站點執(zhí)行g(shù)atsby new kontent-guide cd kontent-guide安裝 Kontent.ai 官方 source 插件npm install kontent-ai/gatsby-source安裝完成后在站點根目錄的gatsby-config.js中注冊插件module.exports { siteMetadata: { // ... }, plugins: [ // ... { resolve: kontent-ai/gatsby-source, options: { projectId: YourProjectID, // 填入你的 Project ID // 注意使用上面生成的 Sample Project 時en-US 是項目默認(rèn)語言 // 與這里的配置一致如果是空白項目這里需要填 default languageCodenames: [ en-US, // 或你項目中的語言Project settings - Localization ], }, }, // ... ], }兩個配置項的要點projectId決定插件從哪個 Kontent.ai 項目拉取內(nèi)容必須與 API keys 頁面中顯示的值一致。languageCodenames聲明需要同步的語言編碼列表。不同項目默認(rèn)語言不同——Sample Project 為en-US全新空白項目為default多語言項目的完整語言列表可在 Project settings → Localization 中查看。配置完成后即可啟動開發(fā)服務(wù)器驗證連通性gatsby develop瀏覽器訪問http://localhost:8000/___graphql打開 GraphiQL即可瀏覽所有來自 Kontent.ai 的內(nèi)容。插件自動生成的查詢以kontentItem查詢單個節(jié)點或allKontentItem查詢節(jié)點集合為前綴。關(guān)于 GraphiQL 的詳細(xì)用法可參考 running-queries-with-graphiql.md。值得一提倉庫中的基準(zhǔn)站點 benchmarks/source-kontent/gatsby-config.js 是這套接入的獨立佐證——它通過dotenv從.env.${NODE_ENV}讀取BENCHMARK_KONTENT_PROJECT_ID與BENCHMARK_KONTENT_LANGUAGE_CODENAMES逗號分隔后轉(zhuǎn)為數(shù)組注入插件選項說明 projectId 與 languageCodenames 這兩個參數(shù)正是插件實際消費的核心配置該站點使用的是舊版包名kentico/gatsby-source-kontent當(dāng)前文檔所采用的kontent-ai/gatsby-source為其更名后的官方包。Using the plugin兩種典型內(nèi)容消費方式方式一把 CMS 內(nèi)容填充進(jìn)已有頁面以站點首頁標(biāo)題為例。默認(rèn)模板的標(biāo)題來自 site metadata值為 Gatsby Default Starter。而 Sample Project 中恰好有一個 Home 類型的唯一內(nèi)容項 Home因此可以改造布局組件用useStaticQuery查詢該內(nèi)容項的元數(shù)據(jù)并渲染為標(biāo)題// ... const Layout ({ children }) { const data useStaticQuery(graphql query SiteTitleQuery{ kontentItemHome { elements { metadata__meta_title { value } } } } ) return ( Header siteTitle{data.kontentItemHome.elements.metadata__meta_title.value} / // ...刷新http://localhost:8000/后標(biāo)題會變?yōu)?Dancing Goat–Freshest coffee on the block!。此后在 Kontent.ai 中修改該標(biāo)題并重新運行g(shù)atsby develop站點即可重建反映新值如需全自動見下文持續(xù)部署一節(jié)。這段示例同時演示了 source 插件節(jié)點結(jié)構(gòu)的兩條規(guī)律單個內(nèi)容項以kontentItem 內(nèi)容類型駝峰名查詢?nèi)鏺ontentItemHome元素字段統(tǒng)一掛在elements下字段名即 Kontent.ai 中的元素 codename此處為metadata__meta_title通過.value讀取實際內(nèi)容。方式二按內(nèi)容類型程序化生成頁面CaaS 的一大價值在于頁面可以在 Kontent.ai 中定義由 Gatsby 在構(gòu)建期自動生成。下面以 Sample Project 中的 Article 類型為例三步完成文章頁自動生成。第一步從 URL pattern 元素生成 slug 字段。利用onCreateNode為 Article 節(jié)點掛載fields.slugexports.onCreateNode ({ node, actions: { createNodeField } }) { if (node.internal.type kontent_item_article) { createNodeField({ node, name: slug, value: node.elements.url_pattern.value, }) } }第二步在createPages中查詢所有文章并創(chuàng)建頁面。頁面路徑取自 slug模板指向src/templates/article.js并通過context把 slug 傳給模板供其查詢使用const path require(path) exports.onCreateNode ({ node, actions: { createNodeField } }) { if (node.internal.type kontent_item_article) { createNodeField({ node, name: slug, value: node.elements.url_pattern.value, }) } } exports.createPages async ({ graphql, actions }) { const { createPage } actions // 從 Kontent 查詢數(shù)據(jù) const result await graphql( { allKontentItemArticle { nodes { fields { slug } } } } ) // 創(chuàng)建頁面 result.data.allKontentItemArticle.nodes.forEach((node) { createPage({ path: node.fields.slug, component: path.resolve(src/templates/article.js), context: { slug: node.fields.slug, }, }) }) }第三步編寫文章模板。模板接收context.slug作為查詢變量拉取對應(yīng)文章后渲染標(biāo)題與正文import React from react import { graphql } from gatsby import Layout from ../components/layout const Article ({ data }) { const item data.kontentItemArticle.elements return ( Layout h1{item.title.value}/h1 div dangerouslySetInnerHTML{{ __html: item.body_copy.value }} / /Layout ) } export default Article export const query graphql query articleQuery($slug: String!) { kontentItemArticle(fields: { slug: { eq: $slug } }) { fields { slug } elements { body_copy { value } title { value } } } } 重新運行g(shù)atsby develop后每篇 Article 都對應(yīng)一個可訪問的頁面訪問任意不存在的 URL如http://localhost:8000/asdf觸發(fā) 404 頁面可以查看全部已生成路徑的列表。富文本與 schema 的進(jìn)階處理注意body_copy來自 Kontent.ai 的 rich text富文本元素。默認(rèn)情況下富文本中的鏈接和內(nèi)聯(lián)鏈接項如嵌入視頻不會被解析。若需要解析可以按結(jié)構(gòu)化形式查詢所需數(shù)據(jù)自己編寫 React 組件渲染也可以使用官方kontent-ai/gatsby-components包中的 Rich text element 組件來簡化這一工作。此外由于 Kontent.ai source 插件為 Kontent 數(shù)據(jù)定義了 GraphQL schema你完全可以基于該 schema 按需擴(kuò)展例如為節(jié)點補(bǔ)充派生字段、接入圖片處理等官方示例倉庫中提供了一系列可參考的用法。倉庫中 configuring-usage-with-plugin-options.md 也引用了 Kontent source 插件基于pluginOptionsSchema聲明配置項的做法——這意味著插件選項受 Gatsby 配置校驗保護(hù)誤傳參數(shù)會在啟動時得到明確報錯。倉庫里的完整對照實現(xiàn)如果你希望看到上述流程的完整可運行版本可以直接研究基準(zhǔn)站點 benchmarks/source-kontent。它與文檔示例的差異正好展示了同一思路的多種寫法gatsby-node.js 中createPages直接通過allKontentItemArticle查詢elements.slug.value生成路徑并在查詢出錯時用reporter.panicOnBuild中止構(gòu)建是對失敗快速暴露的工程化處理。src/templates/article.js 展示了富文本content、標(biāo)題title與圖片image的聯(lián)合查詢其中圖片通過gatsby-image的fluid字段與...KontentAssetFluidfragment 處理——說明 source 插件還負(fù)責(zé)把 Kontent 資產(chǎn)接入 Gatsby 的圖片處理管線。update-article.js 通過kentico/kontent-management管理客戶端模擬內(nèi)容更新隨機(jī)選中一篇文章創(chuàng)建新語言變體版本、追加一個!修改標(biāo)題并重新發(fā)布。這一腳本用于在構(gòu)建基準(zhǔn)測試中反復(fù)觸發(fā)內(nèi)容變更也側(cè)面印證了CMS 內(nèi)容更新 → 重新構(gòu)建這一持續(xù)部署心智模型的可行性。Continuous deployment內(nèi)容發(fā)布即自動構(gòu)建靜態(tài)站點的優(yōu)勢在于性能與安全但要保證內(nèi)容始終新鮮需要在已發(fā)布內(nèi)容變更時自動觸發(fā)重新構(gòu)建。Gatsby Cloud 用戶在 Gatsby Cloud 控制臺 可直接配置與 Kontent.ai 的集成下面以 Netlify 為例給出通用步驟在 Netlify 創(chuàng)建 Build Hook進(jìn)入站點設(shè)置新建一個 build hook名稱可設(shè)為 Change in Kontent.ai content創(chuàng)建后復(fù)制生成的 URL。在 Kontent.ai 創(chuàng)建 Webhook進(jìn)入Project settings → Webhooks新建 webhook名稱可設(shè)為 Netlify build把上一步的 URL 粘貼到URL address字段。選擇觸發(fā)事件在觸發(fā)事件中選擇 DELIVERY API TRIGGERS 下的內(nèi)容項事件Publish與Unpublish即可事件全集可參考 Kontent.ai 官方 Webhooks 參考文檔。完成后每當(dāng)已發(fā)布內(nèi)容發(fā)生變化Kontent.ai 的 webhook 就會請求 Netlify 的 build hook觸發(fā)一次新的構(gòu)建保證靜態(tài)內(nèi)容始終同步到最新版本。這條Delivery API 觸發(fā) → Webhook → 重建的鏈路與上述基準(zhǔn)站點中update-article.js借助 Management API 修改并重新發(fā)布內(nèi)容后等待站點重建的思路完全一致可互為驗證。Whats next更深入的方向至此你已經(jīng)完成了Gatsby 站點接入 Kontent.ai 內(nèi)容變更自動重建的完整閉環(huán)。Kontent.ai 還能支撐更多內(nèi)容關(guān)系用于分類的 taxonomies分類法、多語言內(nèi)容、以及內(nèi)容項之間的相互鏈接。進(jìn)一步探索可以從三個方向入手查閱kontent-ai/gatsby-source插件的 Available Options 文檔了解projectId、languageCodenames之外的更多可選配置如 API 密鑰、預(yù)覽環(huán)境支持等閱讀 Kontent.ai 官方文檔探索 taxonomies、多語言、linked items 等在 GraphQL 節(jié)點中的表現(xiàn)形態(tài)參考 Kontent.ai Gatsby starter 站點查看一個包含各類內(nèi)容查詢的完整示例站點或?qū)φ諅}庫內(nèi) benchmarks/source-kontent 的基準(zhǔn)實現(xiàn)觀察生產(chǎn)級寫法與快速上手寫法之間的差異?？偨Y(jié)本文圍繞 官方接入指南 完整還原了 Kontent.ai → Gatsby 的內(nèi)容接入流程準(zhǔn)備 CMS 項目與 Project ID → 安裝并配置kontent-ai/gatsby-source→ 用kontentItem/allKontentItem查詢把內(nèi)容注入既有頁面 → 通過onCreateNode與createPages按內(nèi)容類型自動生成頁面 → 通過 Webhook Build Hook 實現(xiàn)內(nèi)容發(fā)布即重建。同時結(jié)合倉庫內(nèi) benchmarks/source-kontent 的源碼印證了插件配置、頁面生成、圖片處理與內(nèi)容更新模擬等底層細(xì)節(jié)為你在真實項目中落地 CaaS 內(nèi)容驅(qū)動架構(gòu)提供了可直接參照的完整路徑?！久赓M下載鏈接】gatsbyReact-based framework with performance, scalability, and security built in.項目地址: https://gitcode.com/gh_mirrors/ga/gatsby創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考