重新创建Codepen Gutenberg嵌入块以进行理智。

本教程演示了如何建立理智。IOO便携式文本编辑器块，用于嵌入代码epens，反映了类似的Gutenberg块。它利用结构化数据来进行查询性和防止未来的数据。该过程需要不到七分钟的时间，展示了理智方法的效率。

重新创建 @Chriscoyier的Codepen Gutenberg Block @Sanity_io的富文本编辑器在7分钟内！结构化的数据使其可查询，防止未来，并易于与任何前端集成。链接到Tweet

让我们开始。

设置理智工作室

本教程与node.js和npm一起假定基本的JavaScript和React知识。安装理智CLI：

 NPM安装-Global @Sanity/CLI

使用sanity init创建一个新的理智项目，选择“博客”模板。导航到项目目录（ cd your-project-name ），然后以sanity start （按CTRL C停止）启动开发服务器。

添加Codepen模式

模式定义文档类型和输入字段。 create /yourproject/schemas/codepen.js codepen.js：

导出默认{
  名称：“ codepen”，
  类型：“对象”，
  标题：“嵌入Codepen”，
  字段：[
    {
      名称：“ url”，
      类型：“ url”，
      标题：“ Codepen URL”
    }，，
    {
      名称：“主题”，
      类型：“字符串”，
      标题：“主题ID（例如，黑暗）”，
      默认值：“黑暗”
    }
  这是给出的
};

将此架构导入/yourproject/schemas/schema.js ：

 // ...其他进口
从“ ./codepen”导入codepen; //导入Codepen模式

导出默认createSchema（{
  // ...其他模式类型
  类型：schematypes.concat（[[
    / *您的其他模式类型 */
    codepen，
  ]），，
}）;

现在，在/yourproject/schemas/blockContent.js中添加codepen类型：

导出默认{
  标题：“块内容”，
  名称：“块”，
  类型：“数组”，
  的： [
    // ...现有类型
    {type：“ codepen”}
  这是给出的
};

重新启动sanity start服务器。 Codepen字段现在应该出现在您富的文本编辑器中。

创建Codepen预览组件

在/yourproject/schemas/codepen.js中创建一个React Preview组件：

从“反应”中导入反应；

const codepenpreview =（{value}）=> {
  const {url，themid =“ dark”} = value;
  如果（！url）返回<div>添加Codepen URL</div> ;

  const [用户，哈希] = url.split（“/”）。slice（-2）; //简化的URL解析
  const embedUrl =`https://codepen.io/quljo/qul {user}/embed/$ {hash}？height = 370＆them-id = $ {themID}＆default-tab = result`;

  返回 （
    <iframe src="%7BembedUrl%7D" style="{{" width: height: title="Codepen嵌入" frameborder="0" allowfullscreen allowtransparency></iframe>
  ）；
};

导出默认{
  // ...现有模式定义
  预览： {
    选择：{url：“ url”，themeid：“ themeid”}，，
    组件：codepenpreview
  }
};

该组件提取Codepen URL和主题，构造嵌入URL，并呈现iframe。更新codepen.js文件中的preview部分以使用此组件。

结论

该增强教程提供了一种更强大，更有效的方法，用于在Sanity.io的便携式文本编辑器中创建自定义的Codepen嵌入块。通过使用结构化数据和自定义预览组件，您可以获得灵活性和可维护性。通过扩展架构和预览组件，可以很容易地实现进一步的自定义，例如添加更多Codepen嵌入式选项。

以上是重新创建Codepen Gutenberg嵌入块以进行理智。的详细内容。更多信息请关注PHP中文网其他相关文章！