在您的Tina项目中遵循命名约定主要有两个原因:
命名约定 | 目的 |
---|---|
| 用于集合以及集合之间共享的代码 |
| 用于模板定义,用于基于区块的渲染 |
通常的约定是将给定React组件的架构添加到一个同名文件中,并使用后缀schema.tsx
。这确保您的索引仅在数据模型发生更改时重建,而不是组件发生更改时。
src/├── app/│ ├── components/│ │ ├── events-list.schema.tsx│ │ ├── events-list.tsx
在多个集合之间共享的代码,包括字段定义和字段定义列表,通常也存储在以.schema.tsx
结尾的文件中。在下面的示例中,假设我们在hero-image
和image-text-block
组件之间共享title
字段。
src/├── tina/│ ├── collections/│ │ ├── shared-fields/│ │ │ ├── title.schema.tsx├── app/│ ├── components/│ │ ├── blocks/│ │ │ ├── hero-image.schema.tsx│ │ │ ├── hero-image.tsx│ │ │ ├── image-text-block.schema.tsx│ │ │ ├── image-text-block.tsx
如果您在多个集合之间重复使用区块组件的模板,最好将该模板分离到一个以.template.tsx
结尾的文件中。
templates
通过基于区块的编辑传递到现有集合中
在下面的示例中,假设我们在区块渲染器中使用image-carousel
区块模板。image-carousel
模板可以在home
和about
集合之间共享。
src/├── tina/│ ├── collections/│ │ ├── home.tsx│ │ ├── about.tsx├── app/│ ├── components/│ │ ├── blocks/│ │ │ ├── image-carousel.tsx│ │ │ ├── image-carousel.template.tsx│ │ │ ├── blocks-renderer.tsx