回到所有的课程
课程库

集合页面的结构和样式

像模板一样工作并自动更新设计的集合页面的结构和样式。

本视频采用了旧的用户界面。更新版本即将到来!
克隆这个项目

每当你创建一个新的项目(例如博客文章,帮助文章等)在一个集合,就会自动为它创建一个页面。集合页面的工作方式类似于模板——集合页面的布局和设计适用于所有自动生成的项目页面。

集合页面本质上是重复出现的内容片段的模板,比如博客文章、帮助文章,甚至是登录页面。

在这节课中
  1. 创建Collection页面
  2. 添加和连接内容
  3. 预览收藏页面
  4. 链接到集合页面
  5. 收藏页面设置
关系图显示从集合到集合列表和集合页面的虚线连接。集合列表分支到三个配置文件选项卡预览。收集页分支到单个配置文件卡。

创建Collection页面

一旦创建了Collection,也将自动创建Collection页面。您可以通过转到页面的面板,选择它在收藏页面部分。Collection页面旁边的紫色图标表示它是cms生成的页面。

CMS集合页面部分显示了四个页面模板,分别为Authors、Blog posts、集合和项目。

添加和连接内容

您可以像设计和开发任何其他静态页面一样设计和开发Collection页面,但是当您希望在设计中引入动态内容时,Collection页面的威力就会显现出来。

添加静态和动态元素

就像收藏列表时,放入Collection页中的元素是静态的,直到它们被连接到Collection中的字段为止。您可以像设计任何其他页面一样设计Collection页面,但该页充当所有Collection项的模板

您可以通过以下步骤将设计中的不同元素连接到Collection字段:

  1. 在Collection页面上选择一个元素
  2. 单击设置图标(或转到元素设置面板-快捷方式:D
  3. 检查从集合中获取内容
  4. 打开下拉菜单并选择收藏领域您想从

一旦一个元素从一个字段中获取内容,它就不仅仅是针对那一项。该字段连接到该集合中所有项目页面的元素。

左边的第一步,选择H1文本元素上的设置图标。在右边的第二步,选择标题类型设置面板显示H1到H6按钮,一个带有Ok, Get it按钮的了解更多消息,一个带有下拉菜单的CMS从名为Blog posts的集合中获取文本的复选框和一个显示所有设置按钮。
专业技巧
静态元素的轮廓是蓝色的,而动态元素,或者拥有来自CMS的数据的元素,在画布上的轮廓是紫色的。

预览和切换采集页面

当您在编辑集合页时,看起来就好像您只在编辑集合中的一个项。事实上,您正在同时编辑所有其他页面,因为您正在编辑一个模板。

您可以使用顶部栏中的下拉菜单将页面中的内容切换到任何Collection项。可以通过在“集合”页下拉菜单顶部的搜索栏中输入该页的名称或在快速找到酒吧

博客帖子模板集合页面显示一个下拉菜单,可以在下拉菜单中选择6个不同的页面。
有用的快捷键
按住Shift+Option(在Windows上是Shift+Alt)并按下键盘上的左右箭头将切换收集项到列表中的下一个或上一个项目。
三个集合项显示从一个切换到另一个的过程。

链接到收集页面

可以从其他集合页或从集合列表链接到集合页。按照以下步骤从Collection列表中链接:

  1. 添加一个收藏列表
  2. 将其连接到集合
  3. 添加一个按钮,或任何其他link元素到集合列表
  4. 选择link元素后,单击齿轮图标(或转到元素设置面板
  5. 选择紫色收藏页面连接选项
  6. 选择当前的项目

这将把Collection列表中的每个按钮链接到为每个项目创建的各自的Collection页面。

专业技巧
还可以将任何link元素连接到链接字段URL字段你的类型链接设置

收藏页面设置

在集合页面设置中,您可以为集合页面模板设置SEO元标题和描述、打开图形标题和描述、RSS和自定义代码。但是,与静态页面设置,集合页设置可以具有动态值,这意味着它们为每个集合项页生成唯一的信息。

您可以通过将鼠标悬停在“页面面板”中的“收集”页模板上时出现的设置图标来访问收集页设置。

CMS集合页面部分下面的博客帖子模板页面上突出显示了一个设置图标。

动态搜索引擎优化设置

可以使用Collection字段为页面标题和描述定义模板。并且,您可以在预览框中看到它们在搜索引擎结果页面(serp)中的外观。

了解更多:设置元标题和描述

SEO设置面板显示搜索结果预览、添加了名称字段的标题标签和包含博客文章摘要字段的元描述输入字段。

动态打开图形设置

在这里,您可以设置在Facebook、Twitter、LinkedIn、Pinterest和谷歌+上分享收藏页面链接时显示的信息。使用集合字段将为每个页面创建一个模板,为每个页面生成惟一的Open Graph信息。

了解更多:Open Graph设置

打开图形设置面板显示了一个图像预览,一个标题输入字段,一个与SEO标题标签相同的复选框,一个描述输入字段,一个与SEO元描述相同的复选框,以及一个打开图形图像的下拉菜单。

RSS提要的设置

您可以在集合页面设置中为集合启用RSS 2.0提要。这将发布RSS阅读器用户可以订阅的提要,并在发布新的集合项时获得更新。

RSS提要设置面板显示了一个描述和一个单选按钮,用于为名为Blog Post页面的集合项启用RSS 2.0提要。

在这里可以定义提要设置。您可以使用Collection字段为RSS频道标题、描述和其他设置创建动态模板。您还可以在页面设置中看到提要的预览。然后,你可以复制的RSS URL使用与其他应用程序,甚至添加到你的网站上的链接。

了解更多:RSS提要

自定义代码

您可以添加自定义代码和脚本到Collection页模板的或标记。这将适用于所有Collection页面。如果此代码包含任何信息,您希望每个Collection项页都有一个惟一值,那么,您可以用Collection字段替换代码中的该值。只需选择该值,然后单击紫色的

Baidu
+添加字段位于自定义代码文本字段的右上角。

需要知道
自定义代码和脚本将只出现在发布的站点上。
自定义代码设置面板显示内部<头部>标签输入区和前面</正文>标签输入区。
尝试Webflow——它是免费的
Baidu
map