本教程会带你搭建一个小站点:一个首屏(hero)、一个由 CMS 驱动的博客列表和一个联系表单,然后把它发布上线。每一步都链接到深入讲解该功能的指南。
构建你的第一个站点
创建账户和站点
注册后,在仪表盘上点击 New site。给它起个名字,或者选择一个模板,从现成的设计开始。编辑器会打开首页。
绘制首屏
按 F 切换到框架工具,在桌面画板上拖拽。用 T 添加标题,用 I 添加图片。在检查器中,把框架的布局设为 Stack,居中并添加内边距。
看看平板和手机画板:它们会实时更新。在工具栏中选择一个断点,即可只为较小的屏幕覆盖某个值。
保持一致
在检查器中打开 Tokens,设置品牌色和字体。选中标题,在类栏中输入类名(例如
heading-xl),然后在各处复用它。只需修改一次类,所有标题都会跟着变化。从 CMS 添加内容
在左侧边栏底部打开 CMS 工作区,创建一个 Posts 集合,包含标题、slug、封面图和正文字段,再添加几个条目。回到画布,插入一个 Collection list,把它指向 Posts,并把卡片的文本绑定到
item.title。添加联系表单
插入一个 Form,再在里面放一个邮箱 Input 和一个 Text area。提交记录会进入 Forms 工作区,并受 Turnstile 和限流保护。
添加动画
选中首屏,在检查器中打开 Interactions。选择 Fade in on load 预设,按 ⌘↵ 预览。
发布
点击工具栏中的 Publish,选择 Staging。片刻之后,你的站点就会在预发布地址上线。满意后,再发布到 Production 并连接你的自定义域名。
下一步
你已经把 Malla 的每个部分都用过一次了。下面每篇指南都会讲得更深入。你也可以浏览核心概念来熟悉相关术语。