将Trello用作超级简单的CMS

有时，我们的网站需要一些内容管理。并非总是如此。不多。但是有点。 CMS市场蓬勃发展，价格合理，平易近人的产品，因此我们不足以选择。值得庆幸的是，这与曾经迫使公司溅出一笔ga-亿万美元（不是确切的成本：我四舍五入到最接近的千亿美元）的世界截然不同。

但是，有时候，最好使用一个非常简单的工具，任何更新网站上内容的人已经熟悉，而不是使用新的CMS。

我非常喜欢Trello来管理思想和任务。它有一个API。为什么不将其用作网站的内容源？我的意思是，嘿，如果我们可以用Google表进行操作，那么什么可以阻止我们尝试其他事情？

您好，Trello

这是一个可以探索的简单网站。它从该Trello板上获取内容，并在各节中显示内容。每个部分都由我们的Trello板上卡的标题和描述字段填充。

Trello使用Markdown，这很方便。任何在Trello卡中编辑内容的人都可以应用基本的文本格式，并将相同的降价流入站点，并通过构建过程转换为HTML。

构建块

我是这种运行构建模型的忠实拥护者，该模型可以从各种供稿和来源中汲取内容，然后将它们与模板一起捣碎以生成网站的HTML。它使演示文稿与内容的管理（这是流行的现代CMS产品中来自“分离”一词的位置）。这意味着我们可以自由地使用我们在CSS-tricks上学到的所有技巧和技术来按照我们想要的方式制作网站。

由于我们在构建时间介绍了内容，因此如果我们的网站流行并引入大量流量，我们不必担心使用配额或数据源的性能。他们为什么不呢？看看我们使它们变得多么漂亮！

我想玩！

美好的。您可以获取本网站的代码的副本，然后修改您内心的内容。此版本包括有关如何创建自己的Trello板并将其用作构建内容的源的信息。

• 示例网站代码存储库在github上
• 演示网站
• 克隆并单击几下部署自己的副本

如果您想首先浏览它的工作方式，而不是自己潜入其中，请继续阅读。

发现API

Trello拥有有据可查的API和一组开发人员资源。还有一个方便的节点模块，可以简化身份验证和与API交互的任务。但是，当您探索Trello板时，您也可以通过修补URL来探索API。

例如，上面的Trello板的URL是：

 https://trello.com/b/zzc0uswz/hellotrello

如果我们将.json添加到该URL，则Trello向我们展示了表示为JSON的内容。看看。

我们可以使用此技术来检查整个Trello的基础数据。这是一张卡的URL：

 https://trello.com/c/yvxlsezy/4-sections-from-cards

如果我们使用这个小技巧并将.json添加到URL中，我们将看到描述该卡的数据。

我们会找到有趣的东西 - 董事会，列表和卡的独特ID。我们可以看到该卡的内容以及许多元数据。

我喜欢这样做！查看所有可爱的数据！我们该如何使用它？

决定如何使用板

在此示例中，假设我们只有一个只有一页可管理的内容的站点。我们董事会中的列表或列对于控制该页面上的各个部分是理想的选择。编辑可以给他们标题和内容，并将其拖入所需的顺序。

我们需要列表的ID，以便我们可以通过API访问它。幸运的是，我们已经看到了如何发现这一点 - 查看有关列表中任何卡片的数据。每个人都有一个IDBOARD属性。宾果！

生成网站

该计划是从Trello获取数据，并将其应用于某些模板以填充我们的网站。大多数静态站点生成器（SSG）都可以完成这项工作。那就是他们擅长的。我会使用高度，因为我认为它具有最简单的概念要理解。另外，使用nunjucks（一种流行的模板语言），获取数据并生成清洁的HTML非常有效。

我们希望能够使用一个表达式lin我们的模板，该模板为JavaScript对象中的每个项目输出一个名为Trello：的截面元素：

 
{trello％的卡片}

  <h2 id="card-name"> {{card.name}} </h2>
  <div>
    {％Markdown％}
      {{ -  card.desc |安全的 }}
    {％endmarkDown％}
  </div>

{％endfor％}

获取构建数据

像这样的jamstack网站的一种流行技术是，在此处使用Gulp，Grunt或[在此处插入最新的新构建脚本Hotness]的构建，并从各种API中获取数据，并以适合SSG的格式将数据藏起来，然后运行SSG以生成HTML。这效果很好。

高架通过支持JavaScript在其数据文件中的执行来简化此处的内容。换句话说，它不仅可以利用存储为JSON或YAML的数据，还可以使用JavaScript返回的任何内容，在高度构建运行时为直接向API提出请求打开大门。我们不需要单独的构建步骤才能首先获取数据。高架会为我们做。

让我们使用它在模板中获取我们的trello对象的数据。

我们可以使用trello节点客户端来查询API，但是事实证明，我们想要的所有数据就在板上的JSON中。一切！在一个请求中！我们可以一口气获取！

 // trello.js
Module.exports =（）=> {
  const trello_json_url ='https：//trello.com/b/zzc0uswz/hellotrello.json';

  //使用Node-fetch获取有关此板的JSON数据
  const fetch = require（'node-fetch'）;
  返回提取（trello_json_url）
    然后（res => res.json（））
    然后。
};

但是，我们不想显示该董事会的所有数据。它包括其他列表上的卡，已关闭和删除的卡片等等。但是，由于JavaScript的过滤器方法，我们可以过滤卡以仅包括有趣的卡片。

 // trello.js
Module.exports =（）=> {
   const trello_json_url ='https：//trello.com/b/zzc0uswz/hellotrello.json'
   const trello_list_id ='5E98325D6BD120F2B7395F'，
 
   //使用Node-fetch获取有关此板的JSON数据
   const fetch = require（'node-fetch'）;
   返回提取（trello_json_url）
   然后（res => res.json（））
   。然后（json => {
 
     //只专注于我们想要的列表中的卡片
     //并且没有封闭状态
     LET ContentCards = JSON.CARDS.FILTER（card => {
       return card.idlist == trello_list_id &&！card.closed;
     }）;
 
     返回contentcard;
 }）;
};

那会做的！将其保存在高度数据目录中的名为trello.js的文件中，我们将准备在模板中使用此数据在一个名为Trello的对象中。

完成！ ？

但是我们可以做得更好。我们还可以处理附件的图像，还添加了一种在上线之前进行审查的方法。

图像附件

可以将文件附加到Trello的卡上。当您附加图像时，它在卡片中显示在数据中所述资产的源URL中。我们可以利用它！

如果卡具有图像附件，我们将要获取其源URL，并将其作为图像标签添加到构建时间时的模板插入到页面中的内容。这意味着将图像的标记添加到我们的JSON（card.desc）的描述属性中的降价中。

然后，我们可以让高架将其与其他所有事物一起将其转变为HTML。此代码在我们的JSON中寻找卡片，并将数据按摩到我们需要的形状中。

 // trello.js

//如果卡有附件，请将其添加为图像 
//在说明降价中
contentcards.foreach（card => {
  if（card.attachments.length）{
    card.desc = card.desc`\ n！[$ {card.name}]（$ {card.attachments [0] .url}'$ {card.name}'）
  }
}）;

现在，我们也可以在内容中移动图像。便利！

分期内容

让我们添加一个蓬勃发展，以便如何使用Trello来管理网站的内容。

在将内容启动到世界之前，我们可能需要多种方法来预览内容。我们的Trello董事会可能有一个列表进行分期，并有一个用于生产内容的列表。但这将使很难形象化新内容与已经发布的内容一起生活。

一个更好的主意是使用Trello的标签来表示现场直播的卡片，哪些应该仅包含在该网站的舞台版本中。这将为我们提供一个不错的工作流程。我们可以通过在正确的位置添加新卡来添加更多内容。用“舞台”标记它，并将其从我们生产分支上出现的卡片中滤出。

我们的JavaScript对象进行了更多的过滤：

 // trello.js

//仅包含标有“ Live”或带有标签的卡片
//我们所在的分支的名称
contentcards = contentcards.filter（card => {
  返回卡.labels.filter（label =>（（
    label.name.tolowercase（）=='live'||
    label.name.tolowercase（）==分支
   ））。长度;
 }）;

我们希望标有“ Live”的内容出现在构建的每个版本，是否登台上。此外，我们将考虑包含具有匹配一个称为“分支”的变量的标签的卡。

怎么会？那是什么？

这是我们狡猾的地方！我选择在Netlify上托管此网站（免责声明：我在那里工作）。这意味着我可以从Netlify的CI/CD环境中运行构建。每当我推动更改其GIT存储库时，这将重新部署该网站，并可以访问其他几件事，这些内容对于此网站确实很方便。

一个是分支部署。如果您想要一个网站的新环境，则可以通过在GIT存储库中制作一个新分支来创建一个环境。该构建将在这种情况下运行，您的网站将在包括分支名称的子域上发布。像这样。

看一看，您将看到我们列表中的所有卡，包括具有橙色“舞台”标签的卡片。我们将其包括在此构建中，因为它的标签与构建上下文的分支名称匹配。分支是一个环境变量，其中包含构建式运行的分支。

 label.name.tolowercase（）==分支

从理论上讲，我们可以根据自己的意愿制作尽可能多的分支机构和标签，并具有各种分期和测试环境。准备从“舞台”推广到“现场”的东西了吗？交换标签，您很高兴！

但是如何更新呢？

我们从CI/CD（例如Netlify的）中运行网站构建而获得的第二好是，我们可以随时触发构建构建。 Netlify使我们可以创建构建钩子。这些是Webhooks，当您向其发送HTTP帖子时，可以启动新部署。

如果Trello也支持Webhooks，那么我们可以将这些服务缝合在一起，并在Trello板更改时自动刷新网站。猜猜……他们做什么！哇！

要创建一个NetLify Build Hook，您需要访问网站的管理面板。 （如果您想尝试一下，您可以单击几下将此演示站点引导到一个新的NetLify站点中。）

现在，用新的构建挂钩URL武装，我们需要注册一个新的Trello Webhook，该Webhook在内容更改时调用它。在Trello中创建Webhooks的方法是通过Trello的API。

该网站的存储库包括一个点击Trello API并为您创建Webhook的实用程序。但是您需要有一个Trello开发人员令牌和钥匙。值得庆幸的是，很容易通过访问Trello开发人员门户网站并按照“授权客户”下的说明来免费创建它们。

得到了吗？伟大的！如果将它们保存在项目中的.env文件中，则可以运行此命令以设置Trello Webhook：

 npm run钩-url https://api.netlify.com/build_hooks/xxxxxx

因此，我们创建了一个不错的流程，用于在简单站点上管理内容。我们可以按照我们想要的方式来制作前端，并在Trello板上更新内容，该内容在进行更改时会自动更新网站。

我真的可以使用这个吗？

这是一个简单的例子。那是设计。我真的想演示解耦的概念，以及使用外部服务的API来推动网站的内容。

这不会代替全功能的分离CM，以提供更多参与的项目。但是这些原则完全适用于更复杂的站点。

但是，对于我们看到的独立商店，酒吧和餐馆等企业所看到的网站类型，这种模型可能是一个很好的匹配。想象一下，一个特里洛板，其中有一个用于管理餐厅主页的列表，另一个用于管理菜单项。餐厅工作人员的管理非常容易，并且在更改时上传菜单的新pdf要好得多。

准备探索一个榜样并尝试自己的董事会和内容吗？尝试以下操作：

• 克隆并从上方部署示例，然后开始进行更改。
• 了解有关NetLify您可以使用NetLify分支机构构建的更多信息
• 深入研究Trello开发人员资源。
  

以上是将Trello用作超级简单的CMS的详细内容。更多信息请关注PHP中文网其他相关文章！