將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中文網其他相關文章！