为什么我们的营销团队使用 Strapi

您刚刚阅读了这篇文章,这有几个原因:

• 您是 Strapi 社区的成员,您会定期阅读我们的文章。我会让你知道我们爱你胜过爱巧克力🍫

• 你是一名工程领导,你试图说服你的营销同事 Strapi 可以成为管理内容的好解决方案。本文将帮助您做到这一点!

• 您是营销团队的成员,您正在评估 Strapi 以确定它是否能满足您的需求。本文将有助于您的研究。

在本文中,我们将介绍我们自己的营销团队如何每天使用 Strapi 来管理我们网站的内容,因为是的,如果您不知道,Strapi.io是用 Strapi 和制作的用于生产的 React 框架:Next.js。

在本文的菜单上:自定义、搜索引擎优化、预览、登录页面、Webhook、协作,以及释放创造力所需的一切。让我们立即开始吧!

Strapi 是面向开发人员的 CMS

诶!你要去哪里!

您将理解为什么从营销人员的角度来看,Strapi 具有很多优势。如果您不知道,Strapi 是一个无头 CMS,它是:

• 开源:任何人都可以为源代码做出贡献,从而帮助、改进、解决问题、提出想法等......感谢社区的努力,Strapi 将始终保持更新,产品请求有更多机会得到满足。该项目在社区旁边发展,它是无价的。除了代码贡献之外,由于我们的Write for the Community 计划、 youtube 上的视频、网络研讨会或您可能会在一些点:Awesome Strapi 存储库

• 自托管:这是您的技术团队,他们将选择您的 Strapi 应用程序的托管位置,以便在 Web 上可用。无论是在 AWS、Digital Ocean、Heroku 还是您自己的服务器上。您可以控制您的数据。随着您的扩展和需要确保数据治理和隐私,这将变得越来越重要。

• 100% Javascript:作为营销人员,您可能看不到 Javascript 的优势,但您的 CTO 可能会。通过使用这种编程语言,我们以现代方式构建提供更好性能的网站和应用程序:The Jamstack。只需向您的工程师提及 Strapi 基于 Node.js 和 React 😉

• 可定制:这是最重要的优势。 Strapi 是开源的e,您的技术团队可以访问代码,他们可以做他们想要的任何事情以及营销团队想要的任何事情。我们已经看到客户完全修改了管理界面,老实说,这令人印象深刻。您可以在本文末尾阅读有关自定义的更多信息

但为什么这对营销团队来说是一个优势?

我们每天都在努力促进开发人员的体验,并确保他们可以构建一个 Strapi 应用程序:可定制、结构良好、可扩展,快速轻松,以便您可以管理内容以流畅灵活的方式。

如果有一个公司使用 Strapi 来管理其内容的例子,那就太好了......

在 Strapi 使用 Strapi

一年前我们重建了我们的网站,我们决定使用 Strapi 作为后端(显然)和 Next.js 作为前端。它是由网络机构不太可能制作的。

我们的营销团队与我们的许多客户有相同的需求,因此写这篇文章非常容易。以下是最重要的主题:

• 定制

• 搜索引擎优化

• 登陆页面

• 预览

• 网络挂钩

• 协作

定制

定制无疑是 Strapi 的最大优势。

事实上,假设您几乎可以在 Strapi 应用程序上做任何您想做的事情。你想更改默认的 WYSIWYG 编辑器吗?去吧,完全有可能。您想在管理员中加入导览以加入您的内容管理器吗?这就是我们在FoodAdvisor 演示应用程序上所做的。您希望能够安排发布您的内容吗?创建一个publish_at字段并插入一个自定义代码,该代码将使用 cron 功能发布您的数据。这对你来说可能太技术性了,所以我会让你的工程师遵循这个确切用例的指南:计划发布在 Strapi中。

您拥有代码。我的意思不是您,您的开发人员,但我想说的是,我们为您提供了灵活性,让您可以使用 Headless CMS** 做任何您想做的事情。

我能够在 FoodAdvisor 中在内容管理器中包含一个预览按钮,并使用react-tour包创建一个导览插件。没有它,我应该等待这些功能发布。

当我们将自己定义为释放创造力的产品时,这就是我们的意思。我们为您提供可定制的产品,其余的由您完成,社区将随时为您提供帮助。

现在,在我谈论 SEO 之前,我必须告诉你一些事情。我总是尝试为社区或潜在用户提出的简单问题提供尽可能多的答案,以向他们保证 Strapi 可以成为他们项目的解决方案。

他们中的许多人在不知道它到底是什么或它是如何工作的情况下使用 Strapi。曾经有很多人问我们以下问题:我可以将 Strapi 与 React、Angular、Ionic 或 Python 等(x 前端框架/编程语言)一起使用。答案显然是是,因为 Strapi 是一个允许您通过 API 使用其内容的 CMS。如果您使用允许您执行 HTTP 请求的技术,那么是,您可以使用 Strapi 作为您的数据源。我写了一篇关于它的文章:Integrate Strapi with everything。

我还在网站](https://strapi.io/integrations)以及文档页面上创建了几个[集成页面,其中包含与各种前端框架/编程语言的连接的实际示例。

你知道吗?没有人再问这个问题了,或者至少,没有直接问我。我很高兴,因为我知道用户现在更好地了解 Strapi 是什么以及它是如何工作的(但我很伤心,因为现在没有人跟我说话......)

我为什么要谈论这个?

好吧,SEO主题是完全一样的。你们中的许多人询问使用 Strapi 是否对您的网站/应用程序是 SEO 友好的。答案显然是是,是,是,是和是。

因此,我将再次尝试在我们的网站上创建有用的资源,以向您证明 是的,Strapi 对 SEO 很友好,尽管 这取决于您!

搜索引擎优化

举个例子:您想在您的应用程序上列出文章。您可能会有一个集合类型article,其中包含各种字段:

• title(文字)

• description(长文本)

• image(媒体)等...

现在,考虑 Strapi 应用程序中的每篇文章在前端都有自己的页面。好吧,为了使这个页面对 SEO 友好,您只需要实现必要的字段,如元标题、元描述、元图像或布尔值(真/假)来索引页面或不索引。不要忘记为您的元标题和元描述字段设置一些规则,例如字符限制。

没有比这更复杂的了!不要忘记,Strapi 允许您创建和管理前端将接收的数据。这里最大的工作是从一开始就考虑您的数据架构,以避免您的技术团队对其进行多次迭代。因此,这是一个与您的开发人员一起计划的问题,**您将需要哪些字段用于 SEO **,您的开发人员将注意在 Strapi 中实施它们。例如,您可以与您的技术团队一起了解如何在创建内容时自动填充结构化数据JSON 字段。

免责声明: 您的前端并且只有您的前端才是需要在 Google 搜索结果中执行的应用程序。 Strapi 只会通过其 API 为您的前端提供数据。很多人认为Strapi应用的SEO很重要。除非您希望您的 CMS 在搜索结果中排名,这是一个糟糕的主意,否则您的 Strapi 应用程序的 SEO 性能并不重要。因此,Strapi 是使用 JavaScript 制作的这一事实对您的网站没有任何不利影响。然而,Javascript 导致更快的 API 响应时间,再加上静态站点生成器前端可以导致闪电般快速的网站,这对于 SEO 绝对重要。

我鼓励您将我写给您的技术团队的这篇文章发送给您的技术团队,内容涉及 Strapi](https://strapi.io/blog/headless-cms-strapi-seo-best-practices)中的一些[良好 SEO 实践。这些只是基础知识,请随意进一步定制。这些是我们在我们的网站以及Foodadvisor、我们的现场演示中明显使用的做法。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--yQTltMgw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1.cloudfront.net /uploads/Capture_decran_2021_07_12_a_16_07_52_6619628775.png)

根据 SEMRush,我们的网站健康度比我们类别的网站高出 7% 😎

它基于在我们网站上抓取的页面上发现的错误总数和警告总数。

登陆页面

拥有创建登陆页面的能力对于任何营销团队来说都非常重要,而 Strapi 绝对可以做到这一点。实际上,集合类型可以代表您的应用程序的任何类型的数据,它可以是文章、产品、类别,甚至是页面。

让我们回到上面使用的示例。您想在您的网站上列出文章。因此,您将拥有一个列出这些文章的页面以及每篇文章的页面。这个逻辑和架构将在前端完成,无需赘述,您的工程负责人知道😉

但是,您希望能够拥有更通用的页面,例如 /about-us、/pricing 或 /contact 页面。为此,非常简单,您只需要创建一个Page集合类型。对于文章,这将允许您根据需要创建多个页面。

注意: 我们在本文中将其称为Page,但您可以随意称呼它。

以下是我们网站上一些登陆页面的列表:

通过在 slug 前加上https://strapi.io/来随意访问它们

这是我们每个页面中可以包含的 56 个组件的列表。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--utETY6d9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1。 cloudfront.net/uploads/Capture_decran_2021_07_13_a_18_02_29_3c68e0fbbe.png)

正是在这个确切的时刻,我必须告诉您 Strapi 中非常强大的功能,它使之成为可能:动态区域。

这个功能吓到了一些人。究竟是什么?它的用途是什么,它是如何工作的?让我们尝试涵盖所有这些问题!

在来到动态区之前,我必须首先告诉你两件事:

• Strapi 中内容类型的字段。

• 组件。

字段

当您在 Strapi 中创建任何内容类型时,您定义了它将包含的字段。这很简单,对于文章集合类型,您将拥有例如:

• title(文字)

• description(长文本)

• image(媒体)等...

事实证明,我们开发人员根本不喜欢重复自己。因此,当我们创建产品时,我们还要确保将使用它的人不会重复自己。这就是我们创建组件的原因。

组件

组件是可用于任何内容类型的一组字段。假设您的文章和类别集合类型都共享meta-title(文本)、meta-description(长文本)和meta-image(媒体)字段。然后,您最好创建一个包含这 3 个名为seo的字段的组件。然后将它用于您的两个集合类型。所以你不要重复自己!容易吧?

当您在内容类型中包含一个组件时,它肯定会被包含在内。这听起来很奇怪,但一旦添加,它就会一直存在。所以 SEO 组件的例子是完美的,没有问题,但是如果我有时,你想包含一个组件,有时你不想呢?你看到转变即将到来了吗?

动态区域

动态区域是“块”,首先,它允许您在内容类型中包含特定的组件列表。

假设我删除了之前创建的文章集合类型的 SEO 组件,并且我希望能够在某些文章中包含或不包含它。

为此,我在文章集合类型中创建了一个动态区域,并在其中简单地包含了 SEO 组件。如果我浏览任何文章,内容管理器页面底部会出现一个小“+”按钮。我只需单击它来创建一个新的“块”并选择我的 SEO 组件。然后,我只需要填写我的文章对 SEO 友好的字段。

[中的其他组件](https://res.cloudinary.com/practicaldev/image/fetch/s--k5fERUcQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1. cloudfront.net/uploads/Capture_decran_2021_07_13_a_17_46_41_b94f16c746.png)

这就是动态区域用于在内容类型中动态包含组件的用途。而已。 - 我

现在想象一个包含动态区域的Page集合类型,其中包括以下组件:

• 英雄,

• 主要功能,

• 分步指南,

• 集成,

• 条评论,

• CTA 和更多...

嗯,这正是我们网站上的内容。 (我不是在开玩笑,请随时查看我们的主页)。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--SLjhBfm0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1.cloudfront .net/uploads/Capture_decran_2021_07_13_a_18_11_53_2f19c8fec9.png)

我们使用动态区域来生成我们页面的特定部分。它允许我们根据页面包含或不包含特定组件。这样您就可以看到,即使我们的大多数页面都是Page集合类型的一部分,它们也不会显示相同的内容、相同的组件。

这个相同的系统位于 FoodAdvisor 上,其组件包括:

• 英雄,

• 个特征,

• 见证,

• 个带有图像的特征,

• 常见问题,

• 团队,

• 号召性用语

[](https://res.cloudinary.com/practicaldev/image/fetch/s--gzZQtfE0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1. cloudfront.net/uploads/Capture_decran_2021_07_13_a_17_49_18_a848656b92.png)

定价页面也有一个动态区域,但您可以决定包含不同的组件,例如定价卡。

我真的希望 Dynamic Zone 没有更多的秘密给你。如果您对此功能深信不疑,请在 Twitter 上使用#StrapiDynamicZones 与我们分享消息🐦

关于如何使用 Strapi 创建登录页面的教程即将推出😉

预览

预览系统使我们能够在内容发布之前对其进行可视化。如您所知,Strapi 是Headless CMS。这意味着我们不会为您的数据生成页面。事实上,它会在美丽的湖边耐心等待 React、Python 或 Ionic 应用程序获取。我们几乎可以肯定,您的技术团队已经开发了一个很好的前端,可以使用这些数据。

因此没有本机功能允许您在前端查看新文章,因为默认情况下它们未连接。必须建立这种联系,但我向您保证,这非常简单,至少我知道您的技术团队可以在喝咖啡的同时做到这一点。

这是关于如何使用 Strapi 后端使用 Next Applications 实现预览的教程,这对您的工程师肯定会非常有用。

但是,我告诉过您,Strapi 在很大程度上是可定制的。我没撒谎!很有可能在内容管理器中包含一个预览按钮,允许您以预览模式打开前端页面。这是目前在我们的 FoodAdvisor 演示中使用的系统。

你能看到右下角卡片上的预览按钮吗?这将在我的 Next.js 前端打开此页面:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--UBfkaVot--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1.cloudfront .net/uploads/Capture_decran_2021_07_12_a_16_33_13_ac9dd034f2.png)

这个演示一点也不差!

网络挂钩

我希望我没有用这个吓到你。如果您不知道它是什么,Webhook 允许您将特定事件的信息发送到另一个应用程序。在 Strapi 中,您可以将 webhook 发送到 Zapier,例如当您发布内容、创建、编辑或删除某些内容时。

例如,当您在 Strapi 应用程序中创建新文章时,您可以设置 webhook 以通过 Zapier 发布推文。可能性是无穷无尽的,只有你的想象力是障碍。

这个是为您的 CTO 准备的:当您发布数据时,也可以使用 webhook 来构建静态站点生成器,或者只需手动激活 webhook。这正是我们在 Strapi 所做的。 Webhook 允许我们直接从 Strapi 管理员在 Vercel 上构建 Next.js 站点,这意味着我们的团队可以决定何时可以刷新网站的内容。

合作

我们在基于角色的访问控制功能中的角色使您可以在团队成员之间建立协作系统。您可以管理 Strapi 管理界面的阅读、编辑和发布权限。审查和发布草稿,但也只共享对必要内容的访问。

超级管理员的界面如下所示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--K66SjAKW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1.cloudfront.net /uploads/Capture_decran_2021_07_13_a_18_35_17_75b6a4dd12.png)

以下是作者用户根据超级管理员赋予他的权限所看到的内容:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1mBzq-MG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2zv2ciw0ln4h1。 cloudfront.net/uploads/Capture_decran_2021_07_13_a_18_37_14_56b43a1bed.png)

这将使您能够使角色与组织工作流程保持一致,并帮助您的团队更有效、更自主地完成工作。随时阅读我们的用户故事,Continuum 如何为 Banco Internacional 提供具有 30 个自定义角色的公司网站

在 Strapi 中开始实施批准工作流程的一种简单方法是禁用草稿和发布本机功能,并在“设置”组件中添加一个“状态”枚举字段,在所有新条目中都是强制性的,它列出了您的不同状态内容。

保存文章后,将激活触发器,以便内容移动到新状态。拥有权限的团队现在可以访问内容。

Strapi 的 RBAC 功能被罚款(感谢“自定义条件”)足以允许特定用户将内容移动到特定状态。例如,“审批团队”可以是唯一允许推送处于“拒绝状态”的内容的团队

我将您的工程师重定向到项目,我们的一位解决方案工程师Derrick Mehaffy为更复杂的草稿工作流程展示了两种不同的方法。

结论

我们总是发布或多或少面向开发人员的文章,因为他们是首先使用 Strapi 的人。他们很容易理解 Strapi 的优缺点,我们实际上可以使用代码块进行交流。但是,对于营销或增长团队的成员来说,情况并非如此。这就是为什么我想写这篇内容,以尝试回答许多非技术人员关于最热门话题的问题。

我们的营销团队将 Strapi 与本文中介绍的所有功能一起使用。我们使用它是因为它简单、快速、方便、美观,它使我们能够轻松地为我们的网站创建内容。我们相信它是 SEO 友好的,我们可以灵活地动态创建页面并动态定义哪些内容将存在于这些页面上。我们有不同的环境(暂存、生产)来帮助我们改善部署体验,我们可以在不到 3 分钟的时间内发布新内容。

如果您想了解我们可以使用 Strapi 做什么,只需浏览我们的网站!数据来自 Strapi,设计来自 Next.js 应用程序。我们正在考虑尽快将其开源。您目前在我们的博客上,通过发现我们的展示、我们的用户故事和我们的职业页面(我们正在招聘)来继续您的旅程。

如果您需要更多信息或个性化演示,请尝试我们全新的FoodAdvisor 演示应用程序或随时联系销售团队成员。祝您有美好的一天,并在以后的文章中见到您。