??Tina?? 是一個由 Git 支持的無頭內(nèi)容管理系統(tǒng)，使開發(fā)者和內(nèi)容創(chuàng)作者能夠無縫協(xié)作，能夠為你的 NextJS 網(wǎng)站添加可視化編輯功能。有了 Tina，開發(fā)人員可以創(chuàng)建完全適合其網(wǎng)站的自定義可視化編輯體驗。

特性

對內(nèi)容進(jìn)行版本控制： 為你的內(nèi)容保留 Git 工作流，并授權(quán)所有團(tuán)隊成員通過用戶友好的界面更新你的網(wǎng)站。

實時視覺反饋進(jìn)行編輯： 提高生產(chǎn)力，在你網(wǎng)站上編輯內(nèi)容時查看上下文變化。?

內(nèi)容查詢： 可以對存儲庫中的文件使用 Tina Cloud 的 GraphQL 查詢所有文件中的內(nèi)容。

構(gòu)建在組件之上： 為你的 React 組件添加一個編輯界面，讓你的內(nèi)容團(tuán)隊能夠構(gòu)建復(fù)雜的頁面。

安裝

直接使用下面的命令即可安裝 Tina 啟動器：

npx create-tina-app@latest

執(zhí)行上面的命令過程中會被提示一些快速配置的問題：

一旦你的本地啟動器被創(chuàng)建，要運(yùn)行啟動器：??cd <your-starter-name>?? 進(jìn)入其新目錄并運(yùn)行。

yarn dev

Tina 編輯器使用

Tina 非常靈活且可擴(kuò)展，因此任何 Tina 站點(diǎn)都可能擁有獨(dú)特的體驗。

當(dāng) Tina 在 NextJS 站點(diǎn)上初始化時，會創(chuàng)建一個 ??/admin??? 頁面以允許編輯者登錄并開始進(jìn)行內(nèi)容更改。

成功登錄后，我們就可以進(jìn)入 CMS 頁面了。

根據(jù) Tina 的配置方式，一個或多個集合將出現(xiàn)在全局導(dǎo)航中。點(diǎn)擊一個集合，用戶將進(jìn)入該集合的文檔列表。

此處的表格列出了所選集合的所有文檔，此頁面還允許用戶創(chuàng)建新文檔。

如果已經(jīng)配置了上下文編輯，點(diǎn)擊一個文件將引導(dǎo)用戶進(jìn)入該文件的預(yù)覽，并打開側(cè)邊欄，準(zhǔn)備進(jìn)行編輯。

但是，如果未配置上下文編輯或?qū)μ囟细静豢捎茫瑒t單擊文檔將為用戶提供一個最基本的編輯器。

關(guān)于 Tina 的更多使用可以訪問 https://tina.io/docs/ 獲取更多信息。

Git 倉庫：https://github.com/tinacms/tinacms。