介绍
在 Netlify CMS 中，Widget 是指用于在 CMS 表单中添加自定义控件的插件。 @igloo-be/netlify-cms-widget-string 就是一个用于添加 String 类型字段的 Widget。该 Widget 允许您向 Netlify CMS 表单中添加文本输入字段。
在这篇文章中，我们将讨论如何使用 @igloo-be/netlify-cms-widget-string 包，并将指导您从头开始安装和使用它。
安装
@igloo-be/netlify-cms-widget-string 包是一个 Node.js 包，可以使用 npm 安装。在安装之前，请确保您已经在计算机上安装了 Node.js。
npm install @igloo-be/netlify-cms-widget-string
使用
要使用 @igloo-be/netlify-cms-widget-string，您需要在 Netlify CMS 的配置文件中将其注册为 Widget。在这里我们提供了一个示例，其中演示了如何将 @igloo-be/netlify-cms-widget-string 注册为 Widget。
import CMS from 'netlify-cms-app';
import { StringControl, StringPreview } from '@igloo-be/netlify-cms-widget-string';
CMS.registerWidget('string', StringControl, StringPreview);在这个示例中，我们首先导入了 Netlify CMS 的主要对象 CMS，并将它作为默认导出。接下来，我们导入了 StringControl 和 StringPreview Widget，并使用 CMS.registerWidget() 方法将它们注册为名为 string 的 Widget。
StringControl 和 StringPreview 分别代表 String 的表单控件和表单内容预览控件，它们是 @igloo-be/netlify-cms-widget-string 包的两个主要组件。这两个组件都必须在 Widget 注册期间提供。
示例
接下来我们提供一个使用 @igloo-be/netlify-cms-widget-string 的完整示例。
首先，我们创建了一个名为 index.html 的 HTML 文件，并使用以下内容填充它。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------------------------ ----------
-------
------
------- -----------------------------------------------------------------
------- ---------------------------------------------------------------------
--------
---------------------------- -------------- ---------------
-----------
---------
-------
-------在这个示例中，我们首先导入了 Netlify CMS 的 JavaScript 文件 netlify-cms.js，以及 @igloo-be/netlify-cms-widget-string 的 JavaScript 文件 @igloo-be/netlify-cms-widget-string。
接着，我们使用 CMS.registerWidget() 方法将 @igloo-be/netlify-cms-widget-string 中提供的 String 控件和预览控件注册到 Netlify CMS 中。
最后，我们使用 CMS.init() 方法初始化 Netlify CMS。
现在，您可以在 Netlify CMS 中创建一个新的 String 类型字段，该字段将使用 @igloo-be/netlify-cms-widget-string 中提供的控件进行渲染。
结论
@igloo-be/netlify-cms-widget-string 是一个很有用的 npm 包，它使得在 Netlify CMS 中添加文本输入字段变得非常简单。我们希望这篇文章能够帮助您开始使用它，以便从 Netlify CMS 中获得更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac66950