回到所有的课程
课程库

构造和样式集合页面

构造和样式集合页面,使其像模板一样工作并自动更新您的设计。

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

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

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

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

创建收集页面

创建Collection之后,还会自动创建Collection页面。您可以通过转到页面的面板,选择在收藏页面部分。Collection页面旁边的紫色图标表示这是一个cms生成的页面。

CMS集合页面部分显示了四个页面模板,分别是作者、博客文章、集合和项目。

添加和连接内容

您可以像其他静态页面一样设计和开发Collection页面—但是Collection页面的强大之处在于您想要在设计中引入动态内容。

添加静态和动态元素

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

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

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

一旦一个元素从一个字段获取内容,它就不仅仅是为了这个条目。该字段跨集合中的所有条目页面连接到元素。

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

预览和切换“收集”页面

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

您可以使用顶部栏中的下拉菜单将页面中的内容切换到任何Collection项。您可以通过在Collection页面下拉列表顶部的搜索栏中或在快速找到酒吧

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

链接到收集页

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

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

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

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

收藏页面设置

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

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

在CMS收集页面部分下的博客文章模板页面上,会突出显示一个设置图标。

动态搜索引擎优化设置

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

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

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

动态打开图形设置

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

了解更多:设置打开图形设置

Open Graph Settings面板显示了一个图像预览,一个标题输入框,一个复选框,用于与SEO标题标签相同,一个输入框用于描述,一个复选框用于与SEO元描述相同,以及一个下拉菜单用于打开图形图像。

RSS提要的设置

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

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

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

了解更多:RSS提要

自定义代码

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

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

需要知道
自定义代码和脚本只会出现在发布的站点上。
自定义代码设置面板显示了Inside <head>标签输入区域和Before <div style=
Baidu
标签输入区域。">
尝试Webflow——它是免费的
Baidu
map