使用 Netlify CMS 创建具有开放创作功能的 JAMstack 站点

2025-06-10

使用 Netlify CMS 创建具有开放创作功能的 JAMstack 站点

社区的力量是巨大的。互联网常常通过将这种力量转化为“众包”的方式而取得成功，例如用于筹集资金甚至管理内容。众包内容最明显的例子是维基百科，但像Medium或DEV这样的网站也利用社区驱动的内容贡献。许多项目和公司也依靠社区来改进文档。

说到 JAMstack 网站，这些社区驱动的内容通常直接由 GitHub 的 fork 和拉取请求驱动。这种方式效果很好，但需要一定的技术知识以及一些手动操作（拉取代码、进行修改、提交代码、提交拉取请求等等）。这可能会造成很大的阻碍——尤其是当你的目标是从技术水平不高的人那里获得贡献时。

然而， Netlify CMS的一项名为“开放创作”的新功能，让这个过程变得像直接在 CMS 中编辑内容一样简单——所有 fork 和拉取请求都在后台处理。在本文中，我将逐步讲解如何在最初使用Stackbit构建的网站上使用 Netlify CMS 设置开放创作。

什么是 Netlify CMS 和 Open Authoring？

Netlify CMS 是由 Netlify 维护的一个开源项目。它通常被称为基于 Git 的 CMS。作为基于 Git 的 CMS，Netlify CMS 提供了维护内容的 UI 和工具，但内容本身以文件形式存储在 Git 仓库中，版本控制由该仓库负责。在典型的部署中，用户访问权限可能由 Netlify Identity（或第三方集成）管理，您可以邀请获得 CMS 管理员访问权限的贡献者来编辑内容。您可能已经建立了工作流程，但编辑内容仍然仅限于拥有特殊访问权限的小组。

对于一个旨在提供“众包”内容的网站，您需要将访问权限设置为公开，以便任何人都可以提交内容，但您还需要确保更改在上线前经过审核和批准。为了解决这个问题，Netlify CMS 发布了开放创作功能，目前该功能还处于测试阶段。我第一次了解到这个功能是在CSS Tricks 用它来编辑他们的一些社区驱动的页面时。

以下是其工作原理的简要概述。开放创作使用 GitHub 身份验证，这意味着任何拥有 GitHub 帐户的人都可以在您的网站上添加或修改内容。内容编辑是通过创建项目的分支 (fork) 来完成的，当他们提交更改以供审核时，会以拉取请求 (pull request) 的形式提交。然而，虽然整个分支和拉取请求流程是该功能的基础，但对于仅在 CMS 中更改内容的用户来说，它（大部分）是透明的。这意味着，除了需要 GitHub 帐户之外，任何人都可以轻松贡献内容，无论他们的技术知识水平如何。

示例站点

本教程将以我刚刚上线的RageQuit.tips网站为例，该网站旨在提供关于“倦怠”主题的社区资源。倦怠的定义是“通常由于长期压力或挫折而导致的体力、情感或动力的耗竭”。它通常与工作压力有关，无论身处哪个行业，我们很多人都曾面临过类似的问题。创建该网站的初衷是让社区成员分享应对倦怠的经验和资源。

愤怒戒烟小贴士

如果你对倦怠这个话题感兴趣，欢迎阅读。如果你有经验或资源愿意分享，欢迎投稿。

该网站采用以下技术构建：

  • Stackbit - Stackbit 允许使用主题轻松生成网站和 CMS，之后可以对其进行定制以满足网站的特定需求。
  • Jekyll - 底层静态站点生成器是 Jekyll 。选择它是为了方便源代码贡献，因为它是最古老、最广为人知的静态站点生成器之一。
  • Netlify CMS——如前所述，这是一个开源的、基于 git 的 CMS。
  • Netlify - Netlify 用于部署和托管网站，但也维护通过 GitHub 验证 CMS 所需的钩子。
  • GitHub - GitHub 管理存储库，同时也处理身份验证。

以该网站的代码为例，让我们探索在 Netlify CMS 网站上启用开放创作的步骤。

入门

Stackbit 提供了一个很棒的（免费）工具，可以轻松上手一个由 CMS 驱动的 JAMstack 网站，包括 Netlify CMS。对于像我这样设计能力欠缺的人来说，最棒的是它提供了一系列精美的模板供选择。我不会在这里详细介绍整个过程，但基本上你只需要选择一个主题，然后选择一个静态网站生成器，最后选择一个 CMS。你可以在这里亲自尝试一下。

我选择了 Jekyll 作为静态网站生成器，当然还有 Netlify CMS。我选择了Libris作为主题。Libris 是一个文档网站模板，同时还带有一个博客。这对于我计划中的资源部分和博客来说非常合适。

Stackbit 开箱即用，部署了相当标准的 Netlify CMS 配置。因此，部署完成后，您将收到邀请电子邮件，通过 Netlify CMS 协作处理内容。

Netlify CMS 邀请

解决限制

在继续之前，我想指出一个问题，它可能会像我最初遇到的那样，让您感到困惑。如果您继续接受此邀请并登录（尽管我们稍后会更改身份验证以支持开放式创作），您可能会注意到此模板在使用 Netlify CMS 时存在一个限制。“文档页面”部分不显示任何页面，即使存储库包含多个页面。这是因为，目前 Netlify CMS 中的集合不支持子文件夹中的内容，尽管这项功能应该很快就会添加。

目前有两个潜在的解决方案。第一个是将文档页面移至文件夹的根目录docs。然后对 Netlify CMS 配置进行一些小改动，使其在文件夹中查找文档页面，docs而不是通过站点的根目录（它已预先配置为查找站点中所有包含layout: docs首页的页面）。

  - name: docs
    label: Documentation Pages
    folder: docs
    ...
Enter fullscreen mode Exit fullscreen mode

这样做最大的缺点是，您还需要修改文档布局文件以支持此更改。具体来说，您需要修改模板生成文档章节导航的方式。

第二种解决方案，也是我选择的方法，就是进行上述更改，然后在 Netlify 配置中为每个子文件夹复制该模型。您需要更改每个子文件夹的name、folder和label值。例如，您可以将以下内容作为附加内容模型：

  - name: docs_faq
    label: Docs FAQ Section
    folder: docs/faq
    ...
Enter fullscreen mode Exit fullscreen mode

虽然维护起来比较困难，但第二种解决方案的好处是，你可以将内容保留在子文件夹中，从而避免进行复杂的布局更改。理论上，一旦 Netlify CMS 支持此功能，你就可以删除所有附加模型。

配置 Netlify CMS 进行开放创作

首先，开放创作功能目前处于 Beta 阶段。因此，我们需要将项目更改为使用 Beta 版本。请打开项目admin/index.html，并将源代码替换netlify-cms.js为 Beta 版本。

<script src="https://unpkg.com/netlify-cms@beta/dist/netlify-cms.js"></script>
Enter fullscreen mode Exit fullscreen mode

接下来，开放创作要求我们对后端使用 GitHub 身份验证。因此，让我们为此修改 Netlify CMS 配置，然后启用开放创作。打开admin/config.yaml并将 更改backend为 使用github而不是 ，git-gateway并定义关联的repo（请注意，repo值不需要github.com部分）。还要添加 的值open_authoring并将其设置为true。完成后，您的backend配置应该如下所示：

backend:
  name: github
  branch: master
  repo: remotesynth/ragequit-tips
  open_authoring: true
Enter fullscreen mode Exit fullscreen mode

您需要在配置中进行的下一个更改是更改为编辑工作流程。这意味着内容在发布之前必须经过审核和批准流程。由于开放式创作的工作方式，这是必需的。在config.yaml文件根目录中添加publish_mode并将其设置为editorial_workflow。例如，我的就在 的正上方collections和正下方public_folder。

...
media_folder: images
public_folder: /images
publish_mode: editorial_workflow
collections:
...
Enter fullscreen mode Exit fullscreen mode

您还需要通过Netlify 管理控制台中的访客访问设置启用 GitHub 身份验证。为此，首先需要在 GitHub 中设置一个 OAuth 应用。在 GitHub 中，前往“设置”>“开发者设置”> “OAuth 应用”。您需要提供一个名称和一个 URL（如果您愿意，现在可以使用您的 netlify.com 域名）以及一个授权回调 URL，该 URL 应设置为https://api.netlify.com/auth/done。

在 GitHub 中添加 OAuth 应用

这应该会为您提供一个客户端 ID 和密钥，您需要将其复制到 Netlify 中。

GitHub 客户端 ID 和密钥

接下来，在 Netlify 中，转到“设置”>“访问控制”>“OAuth”，然后单击“安装提供程序”按钮。它默认为 GitHub，您可以在此处粘贴 GitHub 提供的客户端 ID 和密钥。

添加 GitHub 身份验证

如果您提交这些更改或在本地测试并访问您网站的admin，您将看到使用 GitHub 登录的选项，而不是使用 Netlify 登录。点击该选项后，您必须通过 GitHub OAuth 流程授予网站访问权限，但之后您应该像以前一样拥有对管理员的完整访问权限。但请注意，由于编辑工作流程，您需要先保存，然后将状态设置为“就绪”，然后点击“发布”并推送更改。

更改文档状态

就这样！开放创作功能现已启用，任何人都可以访问您的/admin内容并添加或编辑内容。不过，他们的体验会与您的略有不同，我们来看一下。

最终用户体验

假设现在有人访问您的/admin，体验会是什么样的？

当他们进入管理员账户时，系统会提示他们使用 GitHub 登录，就像你之前一样。他们可以使用现有账户或创建一个账户，并且必须接受其账户上的权限。

使用 GitHub 授权权限

一旦他们创建了仓库，如果这是他们第一次进行编辑，系统会要求他们 fork 该仓库。他们需要同意 fork 才能进入管理员界面。（请注意，我认为对于非技术用户来说，这种措辞可以改进，他们可能不熟悉“fork”之类的术语，但仍然注册 GitHub 进行贡献。我还认为有必要澄清一下，“不 fork 该仓库”选项实际上是一种不继续操作的选择。）

复制存储库

一旦他们接受并进入管理员界面，他们就需要按照工作流程添加或编辑页面。例如，要编辑页面，他们需要进行编辑并点击页面左上角的“保存”按钮。

保存更改

完成所有更改后，他们需要通过页面右上角的下拉菜单将内容状态更改为“审核中”。

审核状态

这会将需要审核和接受的更改以 GitHub 上的拉取请求 (pull request) 形式提交到网站，尽管这对他们来说是透明的。添加新内容也遵循类似的流程。

轻松编辑页面

你不太可能直接把用户扔进去/admin，让他们自己摸索。最好的办法是在内容上添加链接，直接引导他们到他们可能想在 CMS 中编辑或创建的页面。

好消息是，这只需要链接到正确的位置即可/admin。只需确保链接指向CMS中正确的集合或页面即可。例如，假设您想要一个链接来向博客添加新帖子，您可以使用：

<a href="/admin/#/collections/post/new" class="button">Add a Post to Our Blog</a>
Enter fullscreen mode Exit fullscreen mode

name: post之所以能做到这一点，是因为 Netlify CMS中有一个集合config.yml。如果你想编辑特定的博客文章，你需要直接输入文件名（不带扩展名），而不是直接new输入 URL 路径。大多数静态网站生成器都提供了可以执行此操作的页面变量。在 Jekyll 中，你可以这样做：

<a href="/admin/#/collections/post/{{page.name | replace: ".md", ""}}" class="button">Edit this post</a>
Enter fullscreen mode Exit fullscreen mode

让我们再看一个稍微复杂一点的例子。你可能还记得，在这篇文章的前面，我创建了多个内容映射，构成了RageQuit.tips 的资源部分。在这个部分中，我希望你能够编辑任何现有页面或将页面添加到当前部分。我这样做的方法是，根据子文件夹在配置中标准化各个部分的命名方式，而无需为每个子部分创建不同的布局模板。例如，在 CMS 中，/resources/faq将被定义为 的内容模型resources_faq。然后，我可以替换路径中的文本，并链接到 CMS 中的正确部分。

{% assign collection_path = page.path | replace: '.md', '' %}
{% assign collection_array = collection_path | split: "/" %}
<!-- the root content model name is just resources so checking if we aren't in the root -->
{% if collection_array.size >= 3 %}
  {% assign collection_path = collection_path | replace: "resources/", "resources_" %}
{% endif %}
<!-- this is used to swap out the page name with new for the new post link -->
{% assign page_cms = page.name | replace: ".md", "" %}
<p><a href="/admin/#/edit/{{collection_path}}" class="button">Edit this page</a>{% if collection_path != "resources/index" %}&nbsp;&nbsp;<a href="/admin/#/collections/{{collection_path | replace: page_cms, 'new'}}" class="button">Add a New Page to This Section</a>{% endif %}</p>
Enter fullscreen mode Exit fullscreen mode

您可以在RageQuit.tips 贡献指南中查看有关当前最终用户编辑体验的更多详细信息。

促进社区贡献的强大工具

Netlify CMS 中的开放式创作功能确实非常棒。我认为它还有一些不足之处，可能会阻碍非技术用户的贡献——例如需要 GitHub 帐户和提示“fork”。毕竟，这是一个测试版功能。然而，尽管这篇文章可能篇幅较长（冗长是我的核心竞争力），但它的实现和使用其实出奇地简单。

如果您想查看我引用的演示的完整源代码，其中包括对 Netlify CMS 内容模型的所有必要更新以及对 Stackbit 生成的模板的许多其他调整，您可以在 GitHub 上查看它。

综上所述，我还想邀请您为RageQuit.tips贡献力量。这不仅仅是一个演示网站，它旨在为所有正在应对倦怠的人提供一个真正的社区资源。如果您也经历过倦怠，请分享对您有帮助的资源，或将您的故事添加到博客中。我们可以用我们的经验来帮助其他可能正在应对类似困境的人。

鏂囩珷鏉ユ簮锛�https://dev.to/remotesynth/creating-a-jamstack-site-with-open-authoring-using-netlify-cms-5ab5
Devto 翻译
PREV
Web 应用中离线数据入门 Pt. 1
NEXT
Windows 12，但适用于 Web