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

特性

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

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

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

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

安裝

直接使用下面的命令即可安裝 Tina 啟動(dòng)器：

npx create-tina-app@latest

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

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

yarn dev

Tina 編輯器使用

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

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

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

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

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

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

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

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

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