块 
块是可以在营销网站之间被再利用的区段,可以任意编组并订购,根据需要创建出各种页面布局. 对于Blitz项目,Blocks与ContentStack的模块块系统紧密相联-它允许内容编辑器根据需要从CMS内部创建出布局.
安装
yarn add @berlitz/blocks
道具
这个 blocks 包中包含所有块作为命名的导出,每个块将包含自己的道具要求. 见 这里 包含在包件内的完整块列表。 每个街区都包裹在 <Section/> 组件,来自 @berlitz/globals。所有区块都带有以下共同的道具: <Section/> 把它包起来.
| 参数 | 类型 | 需求 | 默认 | 页:1 |
|---|---|---|---|---|
| 背景颜色 | 字符串 | 无 | 点 | 道具会传给 theme.section.backgroundColor[yourProp] |
| 大小 | 字符串 | 无 | 数字 | 道具会传给 theme.layout[yourProp],将控制垂直粘贴 |
| 对齐中心 | 嘘 | 无 | 虚假 | 中心对齐此内容区域块中的所有内容 |
使用量
import { BlockContentArea, BlockCards } from '@berlitz/blocks'
import { contentData, cardData } from './myExampleData.json'
const MyApp = () => {
return <main>
<BlockContentArea innerHtml={contentData.html} />
<BlockCards
backgroundColor='ui01'
title="Nice Cards"
subtitle="Very good subtitle"
cards={cardData}
alignCenter={alignCenter}
/>
<main/>
}
何时使用此组件
- 营销网站布局
- 登陆页面