使用React和Cosmic JS CMS进行基于组件的网站开发

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

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

建立内容模型

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

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

1. 页数
2. 节（页面中使用的组件）
3. 团队成员（在“团队”部分中使用）

让我们看一下每种对象类型：

页数

所有页面将包括以下内容：

1. 标题（文字）
2. 内容（HTML Textarea）
3. 节（多个对象关系元字段）

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

团队成员

元字段：

1. 名称（文本元字段）
2. 图像（文件元字段）
3. 引用（纯文本区域元字段）

栏目

“节”对象类型将更加动态，并允许使用不同的元字段。

队部

元字段：

1. 标题
2. 多对象关系元字段（团队）

• 名称
• 图片
• 引用

添加团队成员：

注册部分
元字段：

1. 标题（文本元字段）
2. 图像（文件元字段）
3. 内容（HTML元字段）
4. CTA（文本元字段）

将部分添加到页面

既然我们已经设置了板块，我们可以将它们添加到页面中：

编码

现在我们已经保存了内容，让我们进行一些编码。 下载React启动器 ：

git clone https ://github.com/cosmicjs/react-starter

现在进入Page组件并对其进行编辑，如下所示：

// page.js
import SectionList from './section-list'
export default ({ page }) => (
  < div >
     <h1>{page.title}</h1>
    <div dangerouslySetInnerHTML={{__html: page.content}}></div>
    <SectionList sections={page.metadata.sections}/>
  </div> 
)

如您所见，我们已经在Page对象上添加了Section List。 我们的“节列表”和“节”组件如下所示：

// section-list.js
import TeamSection from './sections/team'
import SignupSection from './sections/signup'
export default ({ sections }) => (
  < div >
    {
      sections.map(section => {
        if (section.metadata.team)
          return  <TeamSection section={section} />
        if (section.metadata.cta)
          return <SignupSection section={section} />
      })
    }
  </div>
)

// signup.js
export default ({ section }) => (
  < div >
     <h3>{section.metadata.headline}</h3>
    <div dangerouslySetInnerHTML={{ __html: section.metadata.content }}></div>
    <div><img src={section.metadata.image.imgix_url} /></div>
    <div><button>{section.metadata.cta}</button></div>
  </div> 
)

// team.js
export default ({ section }) => (
  < div >
     <h3>{section.metadata.headline}</h3> 
    {
      section.metadata.team.map(person => {
        return (
           <div key={person._id}>
            <div>{person.metadata.name}</div>
            <div>{person.metadata.quote}</div>
            <div><img src={person.metadata.image.imgix_url} /></div>
          </div>
        )
      })
    }
  </div> 
)

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

结论

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

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

兰斯·安德森 （ Lance Anderson）在Unsplash上的照片

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