react 组件开发

网站开发的一种常见方法是构建可在不同网页上重复使用的组件。 这种方法的好处是&＃xff0c;通过管理组件而不是管理不同页面上的重复内容&＃xff0c;您最终减少了重复工作。 流行Javascript框架&＃xff08;例如React&＃xff0c;Vue和Angular&＃xff09;在应用程序代码级别利用此概念取得了很大的成功。 我们如何从内容管理级别的这种方法中受益&＃xff1f;

在本教程中&＃xff0c;我将向您展示如何使用React和Cosmic JS CMS构建基于组件的网站。 目的是节省开发人员和内容管理员的时间&＃xff0c;并提供可扩展的内容模型。

建立内容模型

*先决条件&＃xff1a;本文假设您已了解Cosmic JS概念&＃xff1a;对象类型&＃xff0c;对象和元字段。 如果您需要重温这些概念&＃xff0c;请转到“ 入门指南” 。

使用Cosmic JS对象类型和元字段&＃xff0c;我们可以创建可在网站页面上使用的可组合组件。 对于我们的示例&＃xff0c;我们将创建三种对象类型&＃xff1a;

1. 页数
2. 节&＃xff08;页面中使用的组件&＃xff09;
3. 团队成员&＃xff08;在“团队”部分中使用&＃xff09;

让我们看一下每种对象类型&＃xff1a;

页数

所有页面将包括以下内容&＃xff1a;

1. 标题&＃xff08;文字&＃xff09;
2. 内容&＃xff08;HTML Textarea&＃xff09;
3. 节&＃xff08;多个对象关系元字段&＃xff09;

多个对象关系元字段将用于管理页面节。

团队成员

元字段&＃xff1a;

1. 名称&＃xff08;文本元字段&＃xff09;
2. 图像&＃xff08;文件元字段&＃xff09;
3. 引用&＃xff08;纯文本区域元字段&＃xff09;

栏目

Sections对象类型将更加动态&＃xff0c;并允许使用不同的元字段。

队部

元字段&＃xff1a;

1. 标题
2. 多对象关系元字段&＃xff08;团队&＃xff09;

• 名称
• 图片
• 引用

添加您的团队成员&＃xff1a;

注册部分
元字段&＃xff1a;

1. 标题&＃xff08;文本元字段&＃xff09;
2. 图像&＃xff08;文件元字段&＃xff09;
3. 内容&＃xff08;HTML元字段&＃xff09;
4. CTA&＃xff08;文本元字段&＃xff09;

将部分添加到页面

既然我们已经设置了板块&＃xff0c;我们可以将它们添加到页面中&＃xff1a;

编码

现在我们已经保存了内容&＃xff0c;让我们进行一些编码。 下载React启动器 &＃xff1a;

现在进入Page组件并对其进行编辑&＃xff0c;如下所示&＃xff1a;

如您所见&＃xff0c;我们在Page对象上添加了Section List。 我们的“节列表”和“节”组件如下所示&＃xff1a;

// signup.js
export default ({ section }) &＃61;> (

{section.metadata.headline}

{section.metadata.cta}


)

// team.js
export default ({ section }) &＃61;> (

{section.metadata.headline}

{section.metadata.team.map(person &＃61;> {return (

{person.metadata.name}

{person.metadata.quote}

)})}


)

Section组件的输出由通过section prop传递的数据确定。

结论

Cosmic JS CMS是构建基于组件的网站的绝佳解决方案。 在我们的示例中&＃xff0c;我们创建了一个页面对象&＃xff0c;该页面对象具有连接到Sections对象类型的Multiple Object Metafield&＃xff0c;以添加我们的Section组件。 这种方法的好处在于&＃xff0c;我们现在可以在一个地方管理节内容&＃xff0c;并且可以跨页面重用它&＃xff0c;而不必进入每个页面来编辑重复数据。

希望您觉得这有用。 如果您还有其他疑问&＃xff0c;请在Slack上加入我们的社区&＃xff0c;并在Twitter上与我们联系。

兰斯·安德森 &＃xff08; Lance Anderson&＃xff09;在Unsplash上拍摄的照片

翻译自: https://hackernoon.com/component-based-website-development-with-react-and-the-cosmic-js-cms-828213d48656

react 组件开发