在本系列的第 1 部分中,您设置了Medusa,并使用 Contentful 作为您的 CMS 系统,并添加了 Gatsby 店面。在这一部分中,您将进一步介绍 Contentful,并了解如何利用medusa-plugin-contentful使您的商店更强大。除了首页、产品页面和结帐流程之外,大多数电子商务商店还需要杂项页面,例如关于和联系页面。在本指南中,您将向您的内容空间添加富文本内容模块,以便您可以使此页面更酷。您还将看到如何使用内容模块为您的产品页面赋予更多生命。

您将在本指南中执行的操作:

• 添加富文本内容模块

• 将富文本添加到您的/about页面

• 将“相关产品”部分添加到您的产品页面

涵盖的主题:

• 内容迁移

• 产品浓缩

创建富文本内容模块

在本指南中,您将使用Contentful Migrations来保存内容如何随时间演变的版本控制记录。 Contentful 应用程序允许您直接从其仪表板创建内容模型,但是,当使用迁移工具时,您将能够 1) 快速复制您的 Contentful 空间和 2) 将迁移合并为 CI/CD 管道的一部分。您可以在此处阅读有关如何将 CMS 用作代码的更多信息。

要准备迁移,请在contentful-migrations/rich-text.js创建一个新文件并添加以下代码:

// contentful-migrations/rich-text.js

module.exports = function (migration, context) {
  const richText = migration
    .createContentType("richText")
    .name("Rich Text")
    .displayField("title");

  richText.createField("title").name("Title (Internal)").type("Symbol");
  richText.createField("body").name("Body").type("RichText");
};

进入全屏模式 退出全屏模式

这个小片段将在您的内容空间中创建一个包含两个字段的内容模型:一个标题,用于以有意义的方式命名条目(即它不会显示给客户)和一个包含要显示的富文本的正文.要应用迁移运行:

yarn migrate:contentful --file contentful-migrations/rich-text.js

进入全屏模式 退出全屏模式

如果您转到内容空间并单击内容模型,您将看到富文本模型已添加到您的空间:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--aJBx_Aqa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/ sCMjr4B.png)

Page 模型中的验证规则只允许将 Hero 和 Tile Sections 添加到 Content Modules 字段中,因此您需要再次迁移以使页面能够使用新的 Rich Text 模块。在contentful-migrations/update-page-module-validation.js创建一个新的迁移并添加以下内容:

// contentful-migrations/update-page-module-validation.js

module.exports = function (migration, context) {
  const page = migration.editContentType("page");

  page.editField("contentModules").items({
    type: "Link",
    linkType: "Entry",
    validations: [
      {
        linkContentType: ["hero", "tileSection", "richText"],
      },
    ],
  });
};

进入全屏模式 退出全屏模式

迁移您的空间后,您就可以创建新的联系页面了:

yarn migrate:contentful --file contentful-migrations/update-page-module-validation.js

进入全屏模式 退出全屏模式

将富文本添加到 About

要使用新的富文本模块 Content > Page > About,然后单击 Add Content > Page。您现在将使用新的富文本模块来添加有关您的商店的更多详细信息。如果您只想复制/粘贴,您可以编写自己的文本或使用下面提供的文本。

###关于美杜莎

Medusa 是一个开源无头商务引擎,适用于快速发展的企业。美杜莎入门非常简单,您将能够立即通过基本设置开始在线销售,但是,当您添加自定义功能并扩展核心以满足您的需求时,美杜莎的真正力量开始显现。

核心 Medusa 包和所有官方 Medusa 插件作为单独的 NPM 包提供,您可以安装到 Node 项目中。您的商店和插件在您的 medusa-config.js 文件中进行配置,这使得随着您的业务增长管理您的商店变得非常容易。自定义功能不一定来自插件,您还可以通过在src/文件夹中添加文件来添加项目级功能。 Medusa 将在引导阶段自动注册您的自定义功能。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--SGiU3HKA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur. com/hqiaoFq.png)

添加文本后,您可以单击 Publish changes(确保“关于”页面也已发布)。

更新店面以支持富文本模块

如果您想直接跳转到最终的前端代码,请访问medusajs/medusa-contentful-storefront@part-2。

要显示新创建的富文本模块,请打开店面代码并在src/components/rich-text/rich-text.jsx创建一个新文件。

// src/components/rich-text/rich-text.jsx

import React from "react"
import { renderRichText } from "gatsby-source-contentful/rich-text"

import * as styles from "../../styles/rich-text.module.css"

const RichText = ({ data }) => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        {data.body ? renderRichText(data.body) : ""}
      </div>
    </div>
  )
}

export default RichText

进入全屏模式 退出全屏模式

renderRichText函数是从gatsby-source-contentful插件中导入的,可以轻松地将您在富文本模块中输入的文本转换为 html。为了使富文本组件能够很好地呈现,请在src/styles/rich-text.module.css处添加一个样式文件。

/* src/styles/rich-text.module.css */

.container {
  display: flex;
  padding-top: 100px;
  padding-bottom: 100px;
}

.content {
  margin: auto;
  max-width: 870px;
}

进入全屏模式 退出全屏模式

如果您现在重新启动店面服务器,您将无法看到新的富文本模块。实现这一点的最后一步是让页面组件知道在页面的内容模块中遇到富文本时呈现新的富文本组件。在您的编辑器中打开文件src/pages/{ContentfulPage.slug}.js并添加以下内容:

在文件顶部导入您的RichText组件:

...
import RichText from "../components/rich-text/rich-text"
...

进入全屏模式 退出全屏模式

现在在contentModules.map函数中,只要遇到ContentfulRichText模块,就返回RichText组件。在 switch 语句中添加一个 case:

    case "ContentfulRichText":
      return <RichText key={cm.id} data={cm} />

进入全屏模式 退出全屏模式

最后,您需要通过修改文件底部的 GraphQL 代码,在添加contentModules {行之后从 Gatsby 的数据层获取富文本数据:

    ... on ContentfulRichText {
      id
      body {
        raw
      }
      internal {
        type
      }
    }

进入全屏模式 退出全屏模式

重新启动本地 Gatsby 服务器并访问http://localhost:8000/about,您现在将看到新添加的富文本模块。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KBLmd3uB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur .com/8Teuxin.png)

丰富您的产品页面

您现在已经了解了如何扩展 Contentful 中的 Page 模型以以可重用和模块化的方式包含新的内容模块。同样的想法可以扩展到您的产品页面,允许您围绕您的产品创建完全定制的宇宙。您将使用与上述相同的技术在“美杜莎衬衫”产品下方创建相关产品部分。

迁移产品

首先,向 Product 内容模型添加一个新字段。使用迁移,您可以创建文件contentful-migrations/product-add-modules.js:

// contentful-migrations/product-add-modules.js

module.exports = function (migration, context) {
  const product = migration.editContentType("product");

  product
    .createField("contentModules")
    .name("Content Modules")
    .type("Array")
    .items({
      type: "Link",
      linkType: "Entry",
      validations: [
        {
          linkContentType: ["hero", "tileSection", "richText"],
        },
      ],
    });
};

进入全屏模式 退出全屏模式

运行迁移:

yarn migrate:contentful --file contentful-migrations/product-add-modules.js

进入全屏模式 退出全屏模式

添加“相关产品”板块

迁移后,您现在可以将内容模块添加到产品中,以使用相关内容丰富产品页面。在本指南中,您将添加一个包含“相关产品”的图块部分,但该功能可以进一步扩展以展示外观书籍图像、鼓舞人心的内容或更详细的产品描述。

在 Contentful 中,转到 Content > Product > Medusa Shirt 一直滚动到底部,您应该可以在其中找到新的 Content Modules 字段:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--aCvAwJOT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur。 com/jUUpW9I.png)

单击 Add content > Tile Section,这将打开一个新的 Tile Section。对于标题,写“相关产品”,对于 Tiles,单击添加内容 > 添加现有内容 > Medusa Waterbottle > 插入 1 个条目。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--VB1C2J04--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur. com/N7alMGz.png)

单击 Publish 并确保 Medusa Shirt 产品也已发布。

您的数据现在已准备好在店面中使用,但您仍需要对店面代码进行一些更改才能查看新内容。

将内容模块添加到产品页面

就像您对 Page 组件所做的一样,您必须从 Gatsby 的 GraphQL 数据层获取内容模块。

在文件src/pages/products/{ContentfulProduct.handle}.js中,在文件底部的 GraphQL 查询中添加以下内容(例如,在变量查询之后):

  # src/pages/products/{ContentfulProduct.handle}.js

  contentModules {
    ... on ContentfulTileSection {
      id
      title
      tiles {
        ... on ContentfulProduct {
          id
          title
          handle
          thumbnail {
            gatsbyImageData
          }
          internal {
            type
          }
        }
        ... on ContentfulTile {
          id
          title
          cta
          image {
            gatsbyImageData
          }
          link {
            linkTo
            reference {
              slug
            }
          }
          internal {
            type
          }
        }
      }
      internal {
        type
      }
    }
  }

进入全屏模式 退出全屏模式

此代码段将查询为产品定义的内容模块,并允许您在组件中使用数据。

接下来打开src/views/products.jsx文件并添加以下代码段。

导入TileSection组件:

import TileSection from "../components/tile-section/tile-section"

进入全屏模式 退出全屏模式

在最终关闭div之前在 JSX 中添加内容模块:

  // src/views/products.jsx

  <div className={styles.contentModules}>
    {product.contentModules?.map((cm) => {
      switch (cm.internal.type) {
        case "ContentfulTileSection":
          return <TileSection key={cm.id} data={cm} />
        default:
          return null
      }
    })}
  </div>

进入全屏模式 退出全屏模式

重新启动 Gatsby 服务器并访问http://localhost:8000/product/medusa-shirt您现在应该会在产品页面控件下方看到新的“相关产品”磁贴部分。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--HAn6S_hP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com /AQHKA6j.png)

总结

在本指南中,您使用contentful-migration在 Contentful 中为富文本输入创建了一个新的内容模型。您进一步扩展了店面以呈现新的富文本插件。本指南中的概念旨在演示如何使用 Contentful 以模块化和可扩展的方式使您的商店更加强大。本指南中涵盖的内容模块可以进一步扩展以添加其他自定义模块,例如,您可以添加一个 Newsletter Signup,当在代码中遇到该模块时,该模块会呈现一个时事通讯表单。

接下来是什么

在本指南的下一部分中,您将了解如何在您的网站上实现更多的商务功能,例如添加对折扣代码、基于区域的购物等的支持。 (快来了)

• 在 Heroku 上部署美杜莎

• 在 Netlify 上部署 Medusa 管理员