注意: 本文已过时。有关最新的Tina使用,请查看我们的文档。
最新的更新使开发人员能够将validation
、component
和parse
函数直接放入架构中。
如果您想开始使用tina,请查看这个入门指南
要更新,请执行以下操作,
.tina/schema.{ts,tsx,js}
文件中的导入我们将在后端和前端使用schema
文件(以前仅在前端使用),因此所有从@tinacms/cli
的导入都需要更改为tinacms
。
defineConfig
添加到架构中我们现在建议将您的配置与包装组件分开,并放置在schema.{ts,tsx,js}
中或其单独的文件夹中。
所以以前,架构文件看起来像这样。
export default defineSchema({// schema here});
必须更改为
import { defineConfig } from 'tinacms';export default defineConfig({// 将schema和apiUrl传递给配置(必需)(这是如何传递给前端的)schema: schema,apiUrl: apiUrl,// 添加其他以前在<TinaCMS>组件中的_app.{js,tsx}文件中的配置。cmsCallback: (cms) => {//...},mediaStore: async () => {//...},collections: [// ...],});export default schema;
您应该在.tina/components
文件夹中添加以下两个文件。
.tina/components/TinaProvider.js
此文件处理Tina配置和tina提供者组件,并且仅在编辑模式下加载,下面是一个示例。
import TinaCMS from 'tinacms';import { tinaConfig } from '../schema.ts';// 直接将TinaProvider导入到您的页面中会导致Tina被添加到生产包中。// 相反,导入tina/provider/index默认导出以在编辑模式下动态导入/**** @private 请不要直接导入此文件,请改为导入动态提供者*/const TinaProvider = ({ children }) => {return <TinaCMS {...tinaConfig}>{children}</TinaCMS>;};
.tina/components/TinaDynamicProvider.js
TinaDynamicProvider.js
处理在“编辑模式”下加载TinaProvider。请参见下面提供的示例
import dynamic from 'next/dynamic';const TinaProvider = dynamic(() => import('./TinaProvider'), { ssr: false });import { TinaEditProvider } from 'tinacms/dist/edit-state';const DynamicTina = ({ children }) => {return (<><TinaEditProvider editMode={<TinaProvider>{children}</TinaProvider>}>{children}</TinaEditProvider></>);};export default DynamicTina;
在我们的参考文档中阅读更多关于这两个文件的信息
_app.{js,tsx}
最后一步是更新您的_app.{js,tsx}
。由于配置和提供者在单独的文件中,这将比以前的代码更少。
_app.{js,tsx}
之前:
import dynamic from 'next/dynamic';import { TinaEditProvider } from 'tinacms/dist/edit-state';//...const App = ({ Component, pageProps }) => {return (<><TinaEditProvidershowEditButton={true}editMode={<TinaCMScmsCallback={(cms) => {//...}}apiURL={apiURL}><Component {...pageProps} /></TinaCMS>}><Component {...pageProps} /></TinaEditProvider></>);};export default App;
_app.{js,tsx}
之后:
import DynamicTina from '../.tina/components/TinaDynamicProvider';const App = ({ Component, pageProps }) => {return (<DynamicTina><Component {...pageProps} /></DynamicTina>);};export default App;
将配置分离到另一个文件中使其更加简洁易懂。此外,架构现在作为配置的一部分并在前端使用,将允许传递和使用函数。这也将使我们能够减少网络请求,因为我们拥有更多的信息。
我们在本文中讨论的新功能只是可能性的冰山一角,请阅读文档以了解更多信息。
如果您遇到任何问题,请通过Discord联系我们或创建一个GitHub问题。