有時，我們的網(wǎng)站需要一些內(nèi)容管理。并非總是如此。不多。但是有點。 CMS市場蓬勃發(fā)展，價格合理，平易近人的產(chǎn)品，因此我們不足以選擇。值得慶幸的是，這與曾經(jīng)迫使公司濺出一筆ga-億萬美元（不是確切的成本：我四舍五入到最接近的千億美元）的世界截然不同。

但是，有時候，最好使用一個非常簡單的工具，任何更新網(wǎng)站上內(nèi)容的人已經(jīng)熟悉，而不是使用新的CMS。

我非常喜歡Trello來管理思想和任務(wù)。它有一個API。為什么不將其用作網(wǎng)站的內(nèi)容源？我的意思是，嘿，如果我們可以用Google表進(jìn)行操作，那么什么可以阻止我們嘗試其他事情？

您好，Trello

這是一個可以探索的簡單網(wǎng)站。它從該Trello板上獲取內(nèi)容，并在各節(jié)中顯示內(nèi)容。每個部分都由我們的Trello板上卡的標(biāo)題和描述字段填充。

Trello使用Markdown，這很方便。任何在Trello卡中編輯內(nèi)容的人都可以應(yīng)用基本的文本格式，并將相同的降價流入站點，并通過構(gòu)建過程轉(zhuǎn)換為HTML。

構(gòu)建塊

我是這種運行構(gòu)建模型的忠實擁護(hù)者，該模型可以從各種供稿和來源中汲取內(nèi)容，然后將它們與模板一起搗碎以生成網(wǎng)站的HTML。它使演示文稿與內(nèi)容的管理（這是流行的現(xiàn)代CMS產(chǎn)品中來自“分離”一詞的位置）。這意味著我們可以自由地使用我們在CSS-tricks上學(xué)到的所有技巧和技術(shù)來按照我們想要的方式制作網(wǎng)站。

由于我們在構(gòu)建時間介紹了內(nèi)容，因此如果我們的網(wǎng)站流行并引入大量流量，我們不必?fù)?dān)心使用配額或數(shù)據(jù)源的性能。他們?yōu)槭裁床荒?？看看我們使它們變得多么漂亮?/p>

我想玩！

美好的。您可以獲取本網(wǎng)站的代碼的副本，然后修改您內(nèi)心的內(nèi)容。此版本包括有關(guān)如何創(chuàng)建自己的Trello板并將其用作構(gòu)建內(nèi)容的源的信息。

• 示例網(wǎng)站代碼存儲庫在github上
• 演示網(wǎng)站
• 克隆并單擊幾下部署自己的副本

如果您想首先瀏覽它的工作方式，而不是自己潛入其中，請繼續(xù)閱讀。

發(fā)現(xiàn)API

Trello擁有有據(jù)可查的API和一組開發(fā)人員資源。還有一個方便的節(jié)點模塊，可以簡化身份驗證和與API交互的任務(wù)。但是，當(dāng)您探索Trello板時，您也可以通過修補URL來探索API。

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

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

如果我們將.json添加到該URL，則Trello向我們展示了表示為JSON的內(nèi)容?？纯?。

我們可以使用此技術(shù)來檢查整個Trello的基礎(chǔ)數(shù)據(jù)。這是一張卡的URL：

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

如果我們使用這個小技巧并將.json添加到URL中，我們將看到描述該卡的數(shù)據(jù)。

我們會找到有趣的東西 - 董事會，列表和卡的獨特ID。我們可以看到該卡的內(nèi)容以及許多元數(shù)據(jù)。

我喜歡這樣做！查看所有可愛的數(shù)據(jù)！我們該如何使用它？

決定如何使用板

在此示例中，假設(shè)我們只有一個只有一頁可管理的內(nèi)容的站點。我們董事會中的列表或列對于控制該頁面上的各個部分是理想的選擇。編輯可以給他們標(biāo)題和內(nèi)容，并將其拖入所需的順序。

我們需要列表的ID，以便我們可以通過API訪問它。幸運的是，我們已經(jīng)看到了如何發(fā)現(xiàn)這一點 - 查看有關(guān)列表中任何卡片的數(shù)據(jù)。每個人都有一個IDBOARD屬性。賓果！

生成網(wǎng)站

該計劃是從Trello獲取數(shù)據(jù)，并將其應(yīng)用于某些模板以填充我們的網(wǎng)站。大多數(shù)靜態(tài)站點生成器（SSG）都可以完成這項工作。那就是他們擅長的。我會使用高度，因為我認(rèn)為它具有最簡單的概念要理解。另外，使用nunjucks（一種流行的模板語言），獲取數(shù)據(jù)并生成清潔的HTML非常有效。

我們希望能夠使用一個表達(dá)式lin我們的模板，該模板為JavaScript對象中的每個項目輸出一個名為Trello：的截面元素：

 
{trello％的卡片}

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

{％endfor％}

獲取構(gòu)建數(shù)據(jù)

像這樣的jamstack網(wǎng)站的一種流行技術(shù)是，在此處使用Gulp，Grunt或[在此處插入最新的新構(gòu)建腳本Hotness]的構(gòu)建，并從各種API中獲取數(shù)據(jù)，并以適合SSG的格式將數(shù)據(jù)藏起來，然后運行SSG以生成HTML。這效果很好。

高架通過支持JavaScript在其數(shù)據(jù)文件中的執(zhí)行來簡化此處的內(nèi)容。換句話說，它不僅可以利用存儲為JSON或YAML的數(shù)據(jù)，還可以使用JavaScript返回的任何內(nèi)容，在高度構(gòu)建運行時為直接向API提出請求打開大門。我們不需要單獨的構(gòu)建步驟才能首先獲取數(shù)據(jù)。高架會為我們做。

讓我們使用它在模板中獲取我們的trello對象的數(shù)據(jù)。

我們可以使用trello節(jié)點客戶端來查詢API，但是事實證明，我們想要的所有數(shù)據(jù)就在板上的JSON中。一切！在一個請求中！我們可以一口氣獲?。?/p>

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

  //使用Node-fetch獲取有關(guān)此板的JSON數(shù)據(jù)
  const fetch = require（'node-fetch'）;
  返回提?。╰rello_json_url）
    然后（res => res.json（））
    然后。
};

但是，我們不想顯示該董事會的所有數(shù)據(jù)。它包括其他列表上的卡，已關(guān)閉和刪除的卡片等等。但是，由于JavaScript的過濾器方法，我們可以過濾卡以僅包括有趣的卡片。

 // trello.js
Module.exports =（）=> {
   const trello_json_url ='https：//trello.com/b/zzc0uswz/hellotrello.json'
   const trello_list_id ='5E98325D6BD120F2B7395F'，
 
   //使用Node-fetch獲取有關(guān)此板的JSON數(shù)據(jù)
   const fetch = require（'node-fetch'）;
   返回提取（trello_json_url）
   然后（res => res.json（））
   。然后（json => {
 
     //只專注于我們想要的列表中的卡片
     //并且沒有封閉狀態(tài)
     LET ContentCards = JSON.CARDS.FILTER（card => {
       return card.idlist == trello_list_id &&！card.closed;
     }）;
 
     返回contentcard;
 }）;
};

那會做的！將其保存在高度數(shù)據(jù)目錄中的名為trello.js的文件中，我們將準(zhǔn)備在模板中使用此數(shù)據(jù)在一個名為Trello的對象中。

完成！ ？

但是我們可以做得更好。我們還可以處理附件的圖像，還添加了一種在上線之前進(jìn)行審查的方法。

圖像附件

可以將文件附加到Trello的卡上。當(dāng)您附加圖像時，它在卡片中顯示在數(shù)據(jù)中所述資產(chǎn)的源URL中。我們可以利用它！

如果卡具有圖像附件，我們將要獲取其源URL，并將其作為圖像標(biāo)簽添加到構(gòu)建時間時的模板插入到頁面中的內(nèi)容。這意味著將圖像的標(biāo)記添加到我們的JSON（card.desc）的描述屬性中的降價中。

然后，我們可以讓高架將其與其他所有事物一起將其轉(zhuǎn)變?yōu)镠TML。此代碼在我們的JSON中尋找卡片，并將數(shù)據(jù)按摩到我們需要的形狀中。

 // trello.js

//如果卡有附件，請將其添加為圖像 
//在說明降價中
contentcards.foreach（card => {
  if（card.attachments.length）{
    card.desc = card.desc`\ n！[$ {card.name}]（$ {card.attachments [0] .url}'$ {card.name}'）
  }
}）;

現(xiàn)在，我們也可以在內(nèi)容中移動圖像。便利！

分期內(nèi)容

讓我們添加一個蓬勃發(fā)展，以便如何使用Trello來管理網(wǎng)站的內(nèi)容。

在將內(nèi)容啟動到世界之前，我們可能需要多種方法來預(yù)覽內(nèi)容。我們的Trello董事會可能有一個列表進(jìn)行分期，并有一個用于生產(chǎn)內(nèi)容的列表。但這將使很難形象化新內(nèi)容與已經(jīng)發(fā)布的內(nèi)容一起生活。

一個更好的主意是使用Trello的標(biāo)簽來表示現(xiàn)場直播的卡片，哪些應(yīng)該僅包含在該網(wǎng)站的舞臺版本中。這將為我們提供一個不錯的工作流程。我們可以通過在正確的位置添加新卡來添加更多內(nèi)容。用“舞臺”標(biāo)記它，并將其從我們生產(chǎn)分支上出現(xiàn)的卡片中濾出。

我們的JavaScript對象進(jìn)行了更多的過濾：

 // trello.js

//僅包含標(biāo)有“ Live”或帶有標(biāo)簽的卡片
//我們所在的分支的名稱
contentcards = contentcards.filter（card => {
  返回卡.labels.filter（label =>（（
    label.name.tolowercase（）=='live'||
    label.name.tolowercase（）==分支
   ））。長度;
 }）;

我們希望標(biāo)有“ Live”的內(nèi)容出現(xiàn)在構(gòu)建的每個版本，是否登臺上。此外，我們將考慮包含具有匹配一個稱為“分支”的變量的標(biāo)簽的卡。

怎么會？那是什么？

這是我們狡猾的地方！我選擇在Netlify上托管此網(wǎng)站（免責(zé)聲明：我在那里工作）。這意味著我可以從Netlify的CI/CD環(huán)境中運行構(gòu)建。每當(dāng)我推動更改其GIT存儲庫時，這將重新部署該網(wǎng)站，并可以訪問其他幾件事，這些內(nèi)容對于此網(wǎng)站確實很方便。

一個是分支部署。如果您想要一個網(wǎng)站的新環(huán)境，則可以通過在GIT存儲庫中制作一個新分支來創(chuàng)建一個環(huán)境。該構(gòu)建將在這種情況下運行，您的網(wǎng)站將在包括分支名稱的子域上發(fā)布。像這樣。

看一看，您將看到我們列表中的所有卡，包括具有橙色“舞臺”標(biāo)簽的卡片。我們將其包括在此構(gòu)建中，因為它的標(biāo)簽與構(gòu)建上下文的分支名稱匹配。分支是一個環(huán)境變量，其中包含構(gòu)建式運行的分支。

 label.name.tolowercase（）==分支

從理論上講，我們可以根據(jù)自己的意愿制作盡可能多的分支機構(gòu)和標(biāo)簽，并具有各種分期和測試環(huán)境。準(zhǔn)備從“舞臺”推廣到“現(xiàn)場”的東西了嗎？交換標(biāo)簽，您很高興！

但是如何更新呢？

我們從CI/CD（例如Netlify的）中運行網(wǎng)站構(gòu)建而獲得的第二好是，我們可以隨時觸發(fā)構(gòu)建構(gòu)建。 Netlify使我們可以創(chuàng)建構(gòu)建鉤子。這些是Webhooks，當(dāng)您向其發(fā)送HTTP帖子時，可以啟動新部署。

如果Trello也支持Webhooks，那么我們可以將這些服務(wù)縫合在一起，并在Trello板更改時自動刷新網(wǎng)站。猜猜……他們做什么！哇！

要創(chuàng)建一個NetLify Build Hook，您需要訪問網(wǎng)站的管理面板。 （如果您想嘗試一下，您可以單擊幾下將此演示站點引導(dǎo)到一個新的NetLify站點中。）

現(xiàn)在，用新的構(gòu)建掛鉤URL武裝，我們需要注冊一個新的Trello Webhook，該Webhook在內(nèi)容更改時調(diào)用它。在Trello中創(chuàng)建Webhooks的方法是通過Trello的API。

該網(wǎng)站的存儲庫包括一個點擊Trello API并為您創(chuàng)建Webhook的實用程序。但是您需要有一個Trello開發(fā)人員令牌和鑰匙。值得慶幸的是，很容易通過訪問Trello開發(fā)人員門戶網(wǎng)站并按照“授權(quán)客戶”下的說明來免費創(chuàng)建它們。

得到了嗎？偉大的！如果將它們保存在項目中的.env文件中，則可以運行此命令以設(shè)置Trello Webhook：

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

因此，我們創(chuàng)建了一個不錯的流程，用于在簡單站點上管理內(nèi)容。我們可以按照我們想要的方式來制作前端，并在Trello板上更新內(nèi)容，該內(nèi)容在進(jìn)行更改時會自動更新網(wǎng)站。

我真的可以使用這個嗎？

這是一個簡單的例子。那是設(shè)計。我真的想演示解耦的概念，以及使用外部服務(wù)的API來推動網(wǎng)站的內(nèi)容。

這不會代替全功能的分離CM，以提供更多參與的項目。但是這些原則完全適用于更復(fù)雜的站點。

但是，對于我們看到的獨立商店，酒吧和餐館等企業(yè)所看到的網(wǎng)站類型，這種模型可能是一個很好的匹配。想象一下，一個特里洛板，其中有一個用于管理餐廳主頁的列表，另一個用于管理菜單項。餐廳工作人員的管理非常容易，并且在更改時上傳菜單的新pdf要好得多。

準(zhǔn)備探索一個榜樣并嘗試自己的董事會和內(nèi)容嗎？嘗試以下操作：

• 克隆并從上方部署示例，然后開始進(jìn)行更改。
• 了解有關(guān)NetLify您可以使用NetLify分支機構(gòu)構(gòu)建的更多信息
• 深入研究Trello開發(fā)人員資源。
  

以上是將Trello用作超級簡單的CMS的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！