组件IO简介

比眉伴天荒 2022-12-03 09:46 153阅读 0赞

![alt][]

*This article is part of an SEO series from [Component IO][]. Thank you for supporting the partners who make SitePoint possible.*

*本文是[Component IO][]的SEO系列的一部分。* *感谢您支持使SitePoint成为可能的合作伙伴。*

It doesn’t matter what content management system you use — at some point, someone, somewhere will want to make a change which is beyond the technical limit of their control. Typical examples:

使用哪种内容管理系统都没有关系-有时，某个地方的某人想要进行超出其控制技术极限的更改。 典型示例：

*  changing your site’s logo or header appearance
    
    更改网站的徽标或标题外观
 *  updating the content of your standard page footer
    
    更新标准页面页脚的内容
 *  adding, removing or rearranging social media buttons
    
    添加，删除或重新排列社交媒体按钮
 *  re-configuring a contact form’s fields or layout
    
    重新配置联系表单的字段或布局
 *  adding links to a navigation menu which are not part of the page hierarchy.
    
    将链接添加到不属于页面层次结构的导航菜单。

It’s impossible to create a CMS with an easy-to-use interface which provides for every possible option users could ever want. *(Well, you could, but it’d effectively be a code editor!)* At some point, you’ll need to make technical changes to your WordPress template, static site rendering, React components, Angular configuration or whatever system you’re using. The process will typically involve:

创建具有易于使用的界面的CMS是不可能的，该界面提供了用户可能想要的所有可能的选项。 *(可以，但是它实际上是代码编辑器！)*在某个时候，您需要对WordPress模板，静态网站渲染，React组件，Angular配置或您使用的任何系统进行技术更改。 。 该过程通常涉及：

1.  Allocating developer time and resources. That could be a matter of contacting your development agency, discussing the options and agreeing a budget.
    
    分配开发人员的时间和资源。 这可能是与您的开发机构联系，讨论选择方案并同意预算的问题。
2.  Adding new code, plug-ins or configurations to the existing templates as required.
    
    根据需要将新代码，插件或配置添加到现有模板。
3.  Pushing the updates to a staging server.
    
    将更新推送到登台服务器。
4.  Testing the new system thoroughly and ensuring it doesn’t cause regression problems elsewhere.
    
    全面测试新系统，并确保它不会在其他地方引起回归问题。
5.  Repeating the steps above if any errors or omissions are encountered.
    
    如果遇到任何错误或遗漏，请重复上述步骤。
6.  Deploying the verified updates to your live server.
    
    将经过验证的更新部署到实时服务器。

Even the smallest changes take time and money. Inevitably, a new request will arrive the minute the first update goes live.

即使是最小的更改也要花费时间和金钱。 不可避免地，新请求将在首次更新生效的那一刻到达。

## 组件IO方法 **(** The Component IO Approach**)** ##

[Component IO][] tackles the problem in a different way. Rather than taking a holistic, site-wide approach, the service provides a range of ready-to-use components which can be embedded into any website or application regardless of the implementation technology. Most developers will use the service to supplement existing CMS-based content. However, it is possible to create a multi-page site with minimal HTML and a series of embedded components which control everything.

[组件IO][Component IO]以不同的方式解决该问题。 该服务提供了一系列现成的组件，而不是采用整个站点的整体方法，而可以将它们嵌入任何网站或应用程序中，而与实现技术无关。 大多数开发人员将使用该服务来补充现有的基于CMS的内容。 但是，可以用最少HTML和一系列控制所有内容的嵌入式组件来创建一个多页站点。

Hundreds of components are available including:

数百个组件可用，包括：

*  content blocks
    
    内容块
 *  images and galleries
    
    图像和画廊
 *  navigation bars and menus
    
    导航栏和菜单
 *  social media integration
    
    社交媒体整合
 *  overlays and modal dialogs
    
    覆盖和模式对话框
 *  carousels and sliders
    
    旋转木马和滑块
 *  sign-up and contact forms
    
    注册和联系表格
 *  buttons, tabs and form elements
    
    按钮，标签和表单元素
 *  videos, maps and other embedded media.
    
    视频，地图和其他嵌入式媒体。

Components are added to a page with a <component> block and any number can be used. A single </script> tag at the end of the page is then required to activate and control every component.

使用<component>块将组件添加到页面，并且可以使用任何数量。 然后需要页面末尾的单个</ script>标签来激活和控制每个组件。

Once a component has been installed, developers and non-technical users can access the Component IO dashboard to make changes. They don’t need to understand HTML, CSS and JavaScript or directly edit the page where the component is used. Updates are instantly available on the next refresh.

一旦安装了组件，开发人员和非技术用户都可以访问组件IO仪表板进行更改。 他们不需要了解HTML，CSS和JavaScript或直接编辑使用该组件的页面。 更新在下一次刷新时立即可用。

The benefits of Component IO include:

组件IO的优点包括：

*  there are hundreds of ready-made, attractive and configurable components to choose from
    
    有数百种现成的，有吸引力的和可配置的组件可供选择
 *  component code can be installed with a simple cut and paste
    
    可以通过简单的剪切和粘贴来安装组件代码
 *  every CMS, framework and system is supported. If you can edit the HTML, you can add a component.
    
    每个CMS，框架和系统均受支持。 如果可以编辑HTML，则可以添加组件。
 *  it’s easy for non-technical editors to use. They can make changes in a WYSIWYG editor and check it with a live preview
    
    非技术编辑人员易于使用。 他们可以在WYSIWYG编辑器中进行更改，并通过实时预览进行检查
 *  developers can make changes to a component’s HTML, CSS and JavaScript code in the dashboard if necessary
    
    开发人员可以根据需要在仪表板中更改组件HTML，CSS和JavaScript代码
 *  all users can share Component IO dashboard links and collaborate on the same items
    
    所有用户都可以共享组件IO仪表板链接并在相同项目上进行协作
 *  Component IO is fast and delivers items quickly with a single API call regardless of the number embedded within the page
    
    组件IO速度很快，并且通过一个API调用即可快速交付项目，而无需考虑页面中嵌入的数量
 *  a full help guide and real-time chat assistance is available
    
    完整的帮助指南和实时聊天帮助
 *  a free trial account can be used to test the service on your system.
    
    可以使用免费的试用帐户来测试系统上的服务。

## 示例1：创建一个内容块 **(** Example 1: Create a Content Block**)** ##

A content block is one of the simplest and most-used components. First, create or switch to your project by clicking the shield icon at the top left.

内容块是最简单和最常用的组件之一。 首先，通过单击左上方的盾牌图标创建或切换到您的项目。

Switch to the library tab at the top to view a list of several hundred components. Click the **Content Block** component to view a preview then hit the **Add to your project** button.

切换到顶部的库选项卡，以查看数百个组件的列表。 单击“ **内容块”**组件以查看预览，然后单击“ **添加到您的项目”**按钮。

![1498462763componentio-01-library.png][]

The **Install** tab shows the code block which must be pasted into your page(s):

“ **安装”**选项卡显示必须粘贴到您的页面中的代码块：

![QgizG46CHUdt7m3C-DJALdf15YpPnLdAVIBt2nWrcia-rs7tII0aFK7zn8i-fYzk9BTSymd8YaPdi0JmipDtZ2NjzOwtto9VvsK4BTdjkjalpvrV9dbV1fyUThYOlRjwW2yU2714][]

Two code snippets must be copied into your site’s HTML template. A <script> tag is required just before the closing </body> tag – only one per page is necessary regardless of the number of components you are using:

必须将两个代码段复制到您网站HTML模板中。 在结束</ body>标记之前，需要一个<script>标记-无论使用多少组件，每页只需要一个标记：

The code for the component is copied into the HTML sources at the position is is required:

需要将该组件的代码复制到需要该位置HTML源代码中：

The **Edit** button leads to the component editing control:

“ **编辑”**按钮可导致组件编辑控件：

![1498462769componentio-03-edit.png][]

You can change the component’s content and the display name reference used in the Component.io control panel. Users with a paid subscription or a free trial can click the **Code** tab to edit the component’s HTML, CSS and JavaScript in a code editor.

您可以在Component.io控制面板中更改组件的内容和显示名称引用。 具有付费订阅或免费试用版的用户可以单击“ **代码”**选项卡，以在代码编辑器中编辑组件HTML，CSS和JavaScript。

Once your edits are complete, refresh the page where your component is installed to view the new content updates.

编辑完成后，刷新安装组件的页面以查看新的内容更新。

Finally, hit the project shield icon to return to your component dashboard.

最后，点击项目盾牌图标以返回到组件仪表板。

![1498462771componentio-04-dashboard.png][]

## 范例2： **(** Example 2:**)** ##

Let’s now add and configure a simple contact form for our page. From the **Library** tab, search for *contact form* and select **Contact form with company**:

现在让我们为页面添加并配置一个简单的联系表单。 在**库**标签中，搜索*联系表格，*然后选择**与公司联系表格** ：

![1498462774componentio-05-contact.png][]

Hit the **Add to your project** button on the preview page to view the **Install** tab:

点击预览页面上的**添加到您的项目**按钮以查看**安装**选项卡：

![1498462777componentio-06-install.png][]

Copy the component code into your page as before. Remember you won’t need the <script> tag if it’s already been added for other components.

像以前一样将组件代码复制到您的页面中。 请记住，如果<script>标记已经为其他组件添加了，则不需要。

Refresh your page to view your new contact form. Submit a response and it’ll appear in the Component.io **Responses** screen:

刷新页面以查看新的联系表。 提交响应，它将显示在Component.io **响应**屏幕中：

![BM4N6JfQbS-kDpQmeqYYif71025FaKKCRmtD_c75m6MZNfkpBJaZQKDRL5g8uaiJdDpv2vVQwLjFUxM_UWfvtvvwKHMAoC1Z_x63OPs54xlGpbruTprJaq-HM8jPxZFdcwOKHHv5][]

For easier management, components can be organised by page on the **Pages** tab.

为了简化管理，可以在“ **页面”**选项卡上按页面组织组件。

## 在组件IO上注册 **(** Sign up at Component IO**)** ##

[Component IO (component.io)][Component IO] offers a free starter plan to try the service. Plans with further features and more than 10,000 component requests start from $7.95 per month. You can [sign-up][] with a Google account or your email address. Make sure you use the promo code **SITEPOINT** on your project settings page to get your first month on the Standard Plan free. *What are you waiting for?!*

[组件IO(component.io)][Component IO]提供了免费的入门计划来尝试该服务。 具有更多功能和10,000多个组件请求的计划，每月最低$ 7.95起。 您可以[登录了][sign-up]一个谷歌帐户，或者您的电子邮件地址。 确保在项目设置页面上使用促销代码**SITEPOINT** ，以免费获得第一个月的标准计划。 *你在等什么？！*

> 翻译自: [https://www.sitepoint.com/an-introduction-to-component-io/][https_www.sitepoint.com_an-introduction-to-component-io]

[alt]: /images/20221123/98121a8f202b44d5b23c659d0e72f9f8.png
[Component IO]: http://synd.co/2skh33v
[1498462763componentio-01-library.png]: /images/20221123/54fc156a9abd4351a7258dfdd3ccf73a.png
[QgizG46CHUdt7m3C-DJALdf15YpPnLdAVIBt2nWrcia-rs7tII0aFK7zn8i-fYzk9BTSymd8YaPdi0JmipDtZ2NjzOwtto9VvsK4BTdjkjalpvrV9dbV1fyUThYOlRjwW2yU2714]: https://lh3.googleusercontent.com/QgizG46CHUdt7m3C-DJALdf15YpPnLdAVIBt2nWrcia-rs7tII0aFK7zn8i-fYzk9BTSymd8YaPdi0JmipDtZ2NjzOwtto9VvsK4BTdjkjalpvrV9dbV1fyUThYOlRjwW2yU2714
[1498462769componentio-03-edit.png]: /images/20221123/a11222215f2f44688ff5fa13db076f5d.png
[1498462771componentio-04-dashboard.png]: /images/20221123/63c72faf7ef34672936ffba838f7b349.png
[1498462774componentio-05-contact.png]: /images/20221123/eaa82bde2a074c18862b491bf4ff2c6b.png
[1498462777componentio-06-install.png]: /images/20221123/afbe2a6daf07406393ed7a4dfeb3d8ab.png
[BM4N6JfQbS-kDpQmeqYYif71025FaKKCRmtD_c75m6MZNfkpBJaZQKDRL5g8uaiJdDpv2vVQwLjFUxM_UWfvtvvwKHMAoC1Z_x63OPs54xlGpbruTprJaq-HM8jPxZFdcwOKHHv5]: https://lh4.googleusercontent.com/BM4N6JfQbS-kDpQmeqYYif71025FaKKCRmtD_c75m6MZNfkpBJaZQKDRL5g8uaiJdDpv2vVQwLjFUxM_UWfvtvvwKHMAoC1Z_x63OPs54xlGpbruTprJaq-HM8jPxZFdcwOKHHv5
[sign-up]: http://synd.co/2sID6mt
[https_www.sitepoint.com_an-introduction-to-component-io]: https://www.sitepoint.com/an-introduction-to-component-io/