Storyblok怎麼用 視覺化無頭CMS教程

Storyblok是一個視覺化的無頭CMS，所見即所得編輯，支援元件化開發，適合做企業網站和電商內容管理。它把內容管理與前端展示分開：編輯人員在後臺維護結構化內容，開發者用API把內容接入網站或應用。下面以從建立專案到讀取頁面內容為線索，帶你走一遍基礎流程；初次配置時，先準備一個前端專案和一個用於預覽的本地或測試環境。

第一步：註冊Storyblok帳號

開啟Storyblok官網註冊帳號並完成登入，進入控制檯後建立一個Space。Space可以理解為獨立的內容專案，建議按網站或業務劃分，例如企業官網和商城分別管理。新建時可以選擇空白空間或示例專案；如果是第一次體驗，選示例更容易理解頁面、元件和內容之間的關係。進入空間後，先熟悉Content、Block Library和Settings等區域。

接著開啟Settings中的Access Tokens，檢視當前空間可用的API訪問令牌。前端讀取內容時會用到令牌，開發階段可先使用適合預覽或讀取內容的令牌，並把它放進本地環境變數，不要直接寫進公開倉庫。再到Settings裡的Visual Editor設定預覽地址：本地開發可填寫本地服務地址，部署後則改成測試站點地址。預覽地址必須能被編輯器載入，後續才能邊改內容邊看頁面效果。

第二步：建立元件和頁面

進入Block Library，點選建立區塊，先定義一個名為page的內容型別，作為頁面的基本結構。再新建可巢狀的hero、text或image等區塊，為它們新增標題、正文、圖片等欄位；頁面型別中加入Blocks欄位，就能組合這些內容塊。欄位名儘量直觀，技術名稱保持穩定，編輯器裡顯示的名稱則寫得易懂。元件應對應前端能渲染的模組，避免只在後臺建好卻沒有對應頁面程式碼。

然後開啟Content新建一條Story，選擇剛才的page型別，填寫標題、路徑和頁面內容。新增Hero或正文模組後，拖動調整順序，再儲存為草稿。首次搭建時可以只做一個首頁，確認頁面結構清楚後再複製思路製作關於我們、產品介紹等頁面。若前端還沒接好，編輯器裡的預覽可能暫時無法顯示；先完成內容模型，之後配置好預覽站點再檢查所見即所得效果。Storyblok的可視編輯器可透過區塊與預覽頁面相互定位，並實時檢視編輯結果。

配置多語言和工作流

需要多語言時，先確定是按欄位翻譯，還是按語言建立獨立資料夾。欄位級翻譯適合頁面結構基本相同、只需翻譯文字的場景；進入Block Library選擇欄位，在欄位設定中啟用Translatable，然後在不同語言版本中填寫內容。若不同市場的頁面結構、產品或釋出節奏差異較大，可考慮用資料夾區分語言或區域。API讀取時傳入對應語言程式碼；如需預設語言兜底，也可設定fallback_lang。

團隊協作時，提前約定誰負責起草、誰審核、誰釋出，並在空間設定中檢視可用的角色、權限和工作流選項。給編輯人員只開放完成工作所需的權限，內容負責人則負責檢查連結、圖片和文案。儲存草稿後先在預覽環境檢查，確認無誤再發布；重要頁面可以先約定統一的命名和審核習慣，避免多人同時編輯造成混亂。具體工作流功能會隨空間配置和方案而不同，正式上線前先用測試內容走一遍完整審核流程。

第三步：透過API獲取內容

前端接入時，先安裝適合所用框架的Storyblok SDK，初始化客戶端並傳入訪問令牌。請求內容時用Story路徑定位頁面，例如首頁通常對應home，再根據場景選擇draft或published版本：開發預覽用draft，正式網站一般讀取published。介面返回的內容會包含元件標識和欄位資料，前端根據component名稱對映到相應頁面元件，最後把標題、正文、圖片等欄位渲染出來。先用一頁內容驗證路徑與欄位結構，再擴充套件到整站。

如果使用JavaScript客戶端，可按專案文件初始化storyblokApi，再請求cdn/stories/home，並傳入version引數。多語言頁面還可傳入language；批次取某個目錄下的內容，則根據介面支援情況增加starts_with等篩選引數。實際專案中要處理載入失敗、空欄位和圖片缺失等情況，也要區分草稿預覽與已釋出內容。不要把管理用途的憑證暴露在瀏覽器端；釋出前再檢查前端路由與Story路徑一致，避免介面有資料但頁面找不到。

最後，把前端頁面接入Visual Editor預覽：配置預覽URL，讓編輯器載入你的頁面；前端渲染內容塊時保留Storyblok所需的可編輯屬性，並接入對應SDK或橋接功能，這樣編輯者點選預覽中的模組，就能定位到後臺區塊。確認草稿變化能及時顯示、釋出後線上讀取的是已釋出版本，再逐步補齊SEO欄位、圖片規範和權限設定。若更偏向快速製作原型或視覺化頁面，也可以瞭解國內替代工具墨刀AI，官網入口：modao.cgref.cn。教程由潤滅整理，實際選單名稱和可用功能以你的空間介面為準。