Malla文档
首页快速入门打开 Malla

创建博客

在 CMS 中建模文章，在页面上列出它们，并为每篇文章提供利于 SEO 的模板页面。

用户指南
入门25 分钟

你将构建： 一个博客：包含 Posts 集合、一个列出文章的页面，以及每篇文章各自利于 SEO 的页面，并已在预发布环境上线

请先阅读： 编辑器导览构建落地页

在本教程中，你将在 CMS 中为博客文章建模，撰写并发布几篇文章，在页面上列出它们，并设计一个模板页面，让每篇文章都在自己的地址上渲染。你需要一个可编辑的站点，例如落地页教程中的那个。

创建博客视频即将推出。下面的文字步骤已涵盖全部内容。
创建博客· 10 分钟

创建 Posts 集合

  1. 打开 CMS

    在左侧边栏的标签页下方，点击 CMS。CMS 工作区会取代画布。再次点击 CMS 或它旁边的 x，即可回到画布。

  2. 创建集合

    点击 New collection。在 Name 中输入 Posts；Slug 会自动填为 posts。点击 Create collection。每个集合一开始都有两个字段：Title 和 Slug。

  3. 添加字段

    打开 Fields 标签页，为下面每个字段点击一次 Add field。在列表中选中一个字段，即可在右侧的设置面板中修改它的 Name；在保存之前，Key 会跟随名称变化。

    • Image，命名为 Cover。
    • Text，命名为 Excerpt。打开 Multiple lines。
    • Rich text，命名为 Body。打开 Required to publish。
    • Date，命名为 Date。

  4. 保存结构

    点击底部栏中的 Save schema。键一旦保存就固定不变，因为绑定会用到它们。

检查点

Posts 的 Fields 标签页列出了 Title、Slug、Cover、Excerpt、Body 和 Date。

撰写第一批文章

  1. 添加条目

    打开 Items 标签页，点击 New item。条目会在侧边面板中打开。输入标题：在你编辑 slug 或保存之前，slug 会跟随标题变化。

  2. 填写字段

    点击 Cover 下方的 Choose an image，上传或选择一张图片，然后写好它的替代文本。写一段简短的摘要，选择日期，再撰写正文。正文编辑器支持标题、列表、链接和图片。

  3. 保存草稿

    点击 Save draft，或按 ⌘S。草稿还不会出现在站点上。

  4. 发布条目

    点击 Publish，或按 ⌘↵。状态会变为 Published。之后的修改会保留线上版本，直到你点击 Publish changes。

  5. 再添加两篇文章

    用同样的方法再创建两个条目，让列表有内容可显示。现在发布其中一篇。对于另一篇，打开面板底部的 More actions 菜单（...），选择 Schedule…，选好时间后点击 Schedule。

检查点

条目表格显示三篇文章：两篇 Published，一篇 Scheduled。

在页面上列出文章

  1. 插入集合列表

    回到画布，打开要显示文章的页面。选中页面框架，在 Layers 标签页中点击 +，在 CMS 分组中选择 Collection list。它会使用你的第一个集合，并包含一个名为 Item 的框架。

  2. 设置查询

    在检查器的 Collection list 分区中，保持 Source 为 CMS query、Collection 为 Posts。把 Sort 设为 Date，并选择降序箭头，让最新的文章排在最前面。Limit 默认为 6。

  3. 设计卡片

    列表的第一个子元素就是模板：只需设计一次，它会为每篇文章重复。选中 Item，然后用 + 在其中添加一个 Image 和两个 Text 元素。

  4. 把卡片绑定到文章

    选中图片。在 Image 分区中，点击 CMS image 行上的 按钮，在 CMS fields 下选择 Cover。选中第一段文本，在 Typography 中点击 Content 行上的 ，选择 Title。用同样的方法把第二段文本绑定到 Excerpt。

检查点

列表为每篇已发布的文章显示一张卡片，每张都有自己的封面、标题和摘要。

设计文章页面

  1. 创建模板页面

    打开 Pages 标签页，点击数据库按钮 New collection page，然后选择 Posts。Malla 会添加一个路径为 /posts/:slug 的页面。它会为每篇已发布的文章各渲染一次。

  2. 选择预览条目

    按 Esc 清除选择。检查器会显示 Page 分区：确认 Collection 为 Posts，并在 Preview 中选择一篇文章。画布现在显示的就是这篇文章。

  3. 添加文章内容

    添加一个 Text 作为标题，把它的 Content 绑定到 Title。添加一个 Image，把 CMS image 绑定到 Cover。对于正文，点击 +，在 CMS 分组中选择 Rich text，然后在 Content 分区中点击 Source 行上的 ，选择 Body。

  4. 显示日期

    添加一个 Text 用于显示日期。点击它 Content 行上的 ，不要选择字段，而是输入下面的表达式，然后按 ↵：

    text
    fn.formatDate(item.date, 'long')
检查点

模板页面显示预览文章的标题、日期、封面和格式化后的正文。在 Preview 中换一篇文章，画布也会随之变化。

  1. 用链接包裹卡片内容

    回到包含列表的页面。在 Layers 标签页中，选中 Item 里的图片和两段文本（ ⇧ + 单击），右键其中一个并选择 Wrap in link。Item 本身不能被包裹，所以要包裹它里面的内容。你也可以在 Item 中插入一个 Link block，再把内容拖进去。

  2. 把链接绑定到文章页面

    选中新建的链接，打开 Link 分区。点击 Bound URL 行上的 ，在 Item page 下选择你的文章页面。现在链接会指向 /posts/ 加上每篇文章的 slug。

  3. 在预览中试试

    按 ⌘↵，点击一张卡片。预览会打开这篇文章的页面。再按一次 ⌘↵ 回到编辑状态。

检查点

在预览中，每张卡片都会打开自己的文章。

添加 SEO 并发布

  1. 绑定 SEO 标题

    在 Pages 标签页中再次打开文章页面。在未选中任何元素时，打开 SEO 分区。点击 Title 旁的 ，输入 item.title + ' | Blog'，然后按 ↵。现在每个文章页面都有自己的标题。

  2. 绑定 SEO 描述

    点击 Description 旁的 ，选择 Excerpt。搜索引擎和社交分享预览现在会显示每篇文章自己的摘要。

  3. 发布到预发布环境

    点击工具栏中的 Publish，保持选中 Staging，然后点击 Publish to staging。打开链接，进入包含列表的页面，点击一张卡片即可打开对应的文章。

完成

你的博客已在预发布环境上线：列表页面显示已发布的文章，每篇文章都有自己的页面和标题。定时发布的文章会在时间到达时自动出现。

你学到了什么

  • 集合定义内容的字段，条目是你撰写的内容，可以保存为草稿、发布或定时发布。
  • 集合列表会为每个条目重复一次它的第一个子元素， 把图层绑定到条目的字段。
  • 模板页面为每个已发布的条目渲染一个页面，SEO 字段也绑定到该条目。
  • 绑定到 Item page 的链接会把列表中的每张卡片指向它自己条目的页面。

继续学习后面的教程，或阅读本教程背后的指南：

CMS集合、字段、条目、富文本、草稿、定时发布、版本和动态模板页面。集合列表为查询或数组中的每个条目重复一次模板，支持空状态和分页。绑定与表达式把任意文本、属性、样式或可见性绑定到读取实时数据的表达式。SEO 与站点设置页面标题、描述、社交分享图、站点地图、robots 和 noindex。