Verwendung von Trello als super einfaches CMS

Manchmal brauchen unsere Websites ein wenig inhaltsübergreifend. Nicht immer. Nicht viel. Aber ein bisschen. Der CMS -Markt floriert mit erschwinglichen, zugänglichen Produkten, sodass keine Optionen zu wenig Optionen sind. Zum Glück ist es eine ganz andere Welt als diejenigen, die Unternehmen zwang, einen GA-Jillion-One-Dollar auszuspritzen (nicht genaue Kosten: Ich habe auf die nächste Bazillion abgerundet) für eine All-Singing, All-Dancing, All-Personalizing, Big-ENTERPRISING-CMS-Plattform.

Manchmal ist es jedoch schön, ein wirklich einfaches Tool zu verwenden, mit dem jeder, der Inhalte auf der Website aktualisiert, bereits vertraut ist, anstatt sich mit einem neuen CMS in den Griff zu bekommen.

Ich mag Trello sehr, um Ideen und Aufgaben zu verwalten. Und es hat eine API. Warum nicht als Inhaltsquelle für eine Website verwenden? Ich meine, hey, wenn wir es mit Google -Blättern tun können, was soll uns dann davon abhalten, andere Dinge auszuprobieren?

Hallo, Trello

Hier ist eine einfache Website, die Sie erkunden können. Es erhält seine Inhalte von dieser Trello -Karte und dieser Inhalt wird in Abschnitten angezeigt. Jeder Abschnitt ist durch die Titel- und Beschreibung der Felder einer Karte in unserem Trello -Board besiedelt.

Trello verwendet Markdown, was hier nützlich ist. Jeder, der Inhalte in einer Trello -Karte bearbeitet, kann eine grundlegende Textformatierung anwenden und denselben Aufschlag in die Website haben und durch einen Build -Prozess in HTML umgewandelt werden.

Bausteine

Ich bin ein großer Fan dieses Modells, einen Build auszuführen, der Inhalte aus verschiedenen Feeds und Quellen hervorruft und sie dann zusammen mit einer Vorlage mischt, um das HTML einer Website zu generieren. Es entkoppelt die Präsentation von der Verwaltung des Inhalts (in dem der Begriff „entkoppelt“ in den beliebten modernen CMS -Produkten stammt). Und es bedeutet, dass wir die Website mit all den Wizzy-Tricks und -Techniken, die wir hier auf CSS-Tricks gelernt haben, so herstellen können, wie wir es wollen.

Da wir den Inhalt zur Bauzeit einziehen, müssen wir uns keine Sorgen um die Verwendungsquoten oder die Leistung unserer Datenquellen machen, wenn unsere Websites populär werden und eine Menge Verkehr einbringen. Und warum sollten sie nicht? Schau wie hübsch, wie wir sie gemacht haben!

Ich will spielen!

Bußgeld. Sie können eine Kopie des Codes dieser Website schnappen und nach Herzenslust herumbasteln. Diese Version enthält Informationen zum Erstellen eines eigenen Trello -Boards und verwendet sie als Quelle für Inhalte für den Build.

• Beispiel Site -Code -Repository auf GitHub
• Demo -Site
• Klonen und bereitstellen Ihre eigene Kopie in einigen Klicks

Wenn Sie durchgehen möchten, wie dies zuerst funktioniert, anstatt selbst eintauchen, lesen Sie weiter.

Entdeckung der API

Trello hat eine gut dokumentierte API und eine Reihe von Entwicklerressourcen. Es gibt auch ein praktisches Knotenmodul, um die Aufgabe der Authentifizierung und Interaktion mit der API zu vereinfachen. Sie können aber auch die API erkunden, indem Sie an den URLs basteln, wenn Sie Ihre Trello -Boards erkunden.

Zum Beispiel lautet die URL für das obige Trello -Board:

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

Wenn wir .Json zu dieser URL hinzufügen, zeigt Trello uns den als JSON dargestellten Inhalt. Schauen Sie sich an.

Wir können diese Technik verwenden, um die zugrunde liegenden Daten in ganz Trello zu inspizieren. Hier ist die URL für eine Karte insbesondere für eine Karte:

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

Wenn wir diesen kleinen Trick verwenden und .json zur URL hinzufügen, werden wir die Daten sehen, die diese Karte beschreiben.

Wir werden interessante Dinge finden - eindeutige IDs für das Board, die Liste und die Karte. Wir können den Inhalt der Karte und viele Metadaten sehen.

Ich liebe das! Schauen Sie sich alle schönen Daten an! Wie sollen wir es benutzen?

Entscheidung, wie man ein Board benutzt

Nehmen wir bei diesem Beispiel an, dass wir eine Seite mit nur einer Seite mit überschaubarem Inhalt haben. Eine Liste oder Spalte in unserem Board wäre ideal für die Kontrolle der Abschnitte auf dieser Seite. Ein Redakteur könnte ihnen Titel und Inhalte geben und sie in die gewünschte Reihenfolge ziehen.

Wir benötigen die ID der Liste, damit wir über die API darauf zugreifen können. Zum Glück haben wir bereits gesehen, wie man das entdeckt - schauen Sie sich die Daten für eine der Karten in der fraglichen Liste an. Jeder hat eine Idboard -Eigenschaft. Bingo!

Erzeugen der Website

Der Plan besteht darin, die Daten von Trello abzurufen und auf einige Vorlagen anzuwenden, um unsere Website zu bevölkern. Die meisten statischen Site -Generatoren (SSG) würden den Job erledigen. Das ist es, was sie gut sind. Ich werde ELFEN verwenden, weil ich denke, dass es die einfachsten Konzepte zu verstehen hat. Außerdem ist es sehr effizient, Daten zu erhalten und saubere HTML mit Nunjucks (eine beliebte Vorlagensprache) zu generieren.

Wir möchten in der Lage sein, einen Ausdruck zu verwenden, der unsere Vorlage für jedes Element ausgibt, das in einem JavaScript -Objekt namens Trello gefunden wird:

 
{ % für Karte in Trello %}
<abschnitt>
  <h2 id="card-name"> {{card.name}} </h2>
  <div>
    { % Markdown %}
      {{- card.desc | sicher }}
    { % endmarkdown %}
  </div>
</abschnitt>
{ % endfor %}

Abrufen der Daten für den Build

Eine beliebte Technik mit JamStack -Websites wie diesem besteht darin, einen Build mit Schluck, Grunzen oder [hier einfügen neuesten neuen Build -Skript -Schriftzugs ein einzufügen], das Daten aus verschiedenen APIs und Feeds abreißt, die Daten in einem geeigneten Format für das SSG verstärkt und dann die SSG ausführt, um die HTML zu generieren. Dies funktioniert ziemlich gut.

ELFENY vereinfacht hier die Dinge, indem die Ausführung von JavaScript in seinen Datendateien unterstützt wird. Mit anderen Worten, anstatt nur Daten zu nutzen, die als JSON oder YAML gespeichert sind, kann es alles verwenden, was von JavaScript zurückgegeben wird, wodurch die Tür geöffnet wird, um Anfragen direkt an APIs zu stellen, wenn die elf Build läuft. Wir brauchen keinen separaten Build -Schritt, um zuerst Daten zu holen. ELFEN wird es für uns tun.

Verwenden wir das, um die Daten für unser Trello -Objekt in den Vorlagen zu erhalten.

Wir könnten den Trello -Knoten -Client verwenden, um die API abzufragen, aber wie sich herausstellt, dass alle von uns gewünschten Daten genau dort im JSON für das Board sind. Alles! In einer Anfrage! Wir können es einfach auf einmal holen!

 // trello.js
module.exports = () => {
  const trello_json_url = 'https: //trello.com/b/zzc0uswz/hellotrello.json';

  // Verwenden Sie Knotenfetch
  const fetch = require ('node-fetch');
  return fetch (trello_json_url)
    .then (res => res.json ())
    .then (json => console.log (json));
};

Wir möchten jedoch nicht alle Daten von diesem Board anzeigen. Es enthält Karten auf anderen Listen, Karten, die geschlossen und gelöscht wurden und so weiter. Aber wir können die Karten filtern, um dank der Filtermethode von JavaScript nur die von Interesse zu erteilen.

 // trello.js
module.exports = () => {
   const trello_json_url = 'https: //trello.com/b/zzc0uswz/hellotrello.json'
   const trello_list_id = '5e98325d6d6bd120f2b7395f',,
 
   // Verwenden Sie Knotenfetch
   const fetch = require ('node-fetch');
   return fetch (trello_json_url)
   .then (res => res.json ())
   .then (json => {
 
     // Konzentrieren Sie sich nur auf die Karten, die sich in der gewünschten Liste befinden
     // und keinen geschlossenen Status haben
     lass contentCards = json.cards.filter (card => {
       return card.idlist == trello_list_id &&! card.closed;
     });
 
     Inhaltskarten zurückgeben;
 });
};

Das wird es tun! Mit diesem in einer Datei namens trello.js in ELETY von Datenverzeichnis gespeicherten Daten werden diese Daten in unseren Vorlagen in einem Objekt namens Trello verwendet.

Drede-Zo! ?

Aber wir können es besser machen. Gehen wir auch angehängte Bilder ab und fügen Sie auch eine Möglichkeit hinzu, Inhalte zur Überprüfung durchzuführen, bevor es live geht.

Bildanhänge

Es ist möglich, Dateien an Karten in Trello anzuhängen. Wenn Sie ein Bild anhängen, wird es genau dort in der Karte mit der Quell -URL des in den Daten beschriebenen Vermögenswerts angezeigt. Wir können das nutzen!

Wenn eine Karte über einen Bildanhang verfügt, möchten wir ihre Quell -URL abrufen und sie als Bild -Tag zu dem hinzufügen, was unsere Vorlage zum Bauzeit in die Seite einfügt. Das bedeutet, den Markdown für ein Bild zum Markdown in der Beschreibungseigenschaft unseres JSON (Card.desc) hinzuzufügen.

Dann können wir Eleventy zusammen mit allem anderen in HTML für uns verwandeln lassen. Dieser Code sucht nach Karten in unserem JSON und massiert die Daten in die Form, die wir benötigen.

 // trello.js

// Wenn eine Karte einen Anhang hat, fügen Sie sie als Bild hinzu 
// im Beschreibung Markdown
contentcards.foreach (card => {
  if (card.attachments.length) {
    card.desc = card.desc `\ n! [$ {card.name}] ($ {card.attachments [0] .url} '$ {card.name}')`;
  }
});

Jetzt können wir auch Bilder in unseren Inhalten verschieben. Praktisch!

Inhalte inszenieren

Fügen wir ein weiteres Blumen hinzu, wie wir Trello verwenden können, um den Inhalt unserer Website zu verwalten.

Es gibt einige Möglichkeiten, wie wir in den Inhalten in den Vorschau gehen möchten, bevor wir ihn in die Welt starten. Unser Trello -Board kann eine Liste für die Inszenierung und eine Liste für Produktionsinhalte haben. Das würde es jedoch schwierig machen, sich zu visualisieren, wie neue Inhalte neben dem, was bereits veröffentlicht wird, lebt.

Eine bessere Idee wäre, Trellos Etiketten zu verwenden, um zu sagen, welche Karten live veröffentlicht werden und welche nur in einer inszenierten Version der Website enthalten sein sollten. Dies gibt uns einen schönen Workflow. Wir können mehr Inhalte hinzufügen, indem wir an der richtigen Stelle eine neue Karte hinzufügen. Beschriften Sie es mit „Bühne“ und filtern Sie es aus den Karten, die in unserer Produktionszweig erscheinen.

Ein wenig mehr Filterung unseres JavaScript -Objekts ist erforderlich:

 // trello.js

// enthalten nur Karten, die mit "Live" oder mit dem Karten beschriftet sind
// der Name des Zweigs, in dem wir uns befinden
contentcards = contentcards.filter (card => {
  return card.labels.filter (Label => (
    label.name.tolowerCase () == 'live' ||
    label.name.tolowerCase () == Branch
   )).Länge;
 });

Wir möchten, dass der Inhalt "Live" auf jeder Version des Builds, in der Inszenierung oder nicht auf der Version des Builds angezeigt wird. Außerdem werden wir Karten mit einem Etikett enthalten, das eine Variable namens "Branch" entspricht.

Wie kommts? Was ist das?

Hier werden wir schlau! Ich habe mich entschieden, diese Site auf Netlify zu hosten (Haftungsausschluss: Ich arbeite dort). Dies bedeutet, dass ich den Build aus der CI/CD -Umgebung von Netlify ausführen kann. Dies setzt die Site erneut ein, wenn ich Änderungen in das Git -Repository drücke, und bietet auch Zugriff auf einige andere Dinge, die für diese Website sehr praktisch sind.

Einer ist Branch -Bereitstellungen. Wenn Sie eine neue Umgebung für eine Website wünschen, können Sie eine erstellen, indem Sie im Git -Repository einen neuen Zweig erstellen. Der Build wird in diesem Kontext ausgeführt, und Ihre Website wird in einer Subdomain veröffentlicht, die den Zweignamen enthält. So was.

Schauen Sie sich an und Sie werden alle Karten aus unserer Liste sehen, einschließlich desjenigen, das über das orangefarbene „Bühnen“ -Label verfügt. Wir haben es in diesen Build aufgenommen, weil sein Etikett mit dem Zweignamen für den Build -Kontext übereinstimmte. Zweig war eine Umgebungsvariable, die den Zweig, in dem der Build lief, enthielt.

 label.name.tolowerCase () == Branch

Theoretisch konnten wir so viele Zweige und Etiketten machen, wie wir wollen, und alle möglichen Inszenierungs- und Testumgebungen haben. Sind Sie bereit, etwas von „Bühne“ zu „leben“ zu fördern? Tauschen Sie die Etiketten aus und Sie können loslegen!

Aber wie aktualisiert es?

Der zweite Vorteil, den wir aus der Ausführung des Site -Builds in einem CI/CD wie Netlify erhalten, ist, dass wir einen Build auslösen können, der ausgeführt wird, wann immer wir möchten. Mit Netlify können wir Build -Hooks erstellen. Dies sind Webhooks, die eine neue Bereitstellung initiieren, wenn Sie einen HTTP -Post an diese senden.

Wenn Trello auch Webhooks unterstützt, können wir diese Dienste zusammenfügen und die Website automatisch aktualisieren, wenn sich das Trello -Board ändert. Und raten Sie mal, was ... sie tun! Hoorah!

Um einen Netlify Build Hook zu erstellen, müssen Sie das Administratorfeld Ihrer Website besuchen. (Sie können diese Demo -Site in ein paar Klicks auf einer neuen Netlify -Site starten, wenn Sie sie ausprobieren möchten.)

Jetzt, mit einer neuen Build -Hook -URL, müssen wir einen neuen Trello -Webhook registrieren, der es bei der Änderung von Inhalten aufruft. Die Methode zum Erstellen von Webhooks in Trello ist über die API von Trello.

Das Repo für diese Website enthält ein kleines Dienstprogramm, um die Trello -API anzurufen und den Webhook für Sie zu erstellen. Aber Sie müssen ein Trello -Entwickler -Token und einen Schlüssel haben. Zum Glück ist es einfach, diese kostenlos zu erstellen, indem Sie das Trello -Entwicklerportal besuchen und die Anweisungen unter „Autorisierung eines Kunden“ befolgen.

Hast du sie? Großartig! Wenn Sie sie in einer .Env -Datei in Ihrem Projekt speichern, können Sie diesen Befehl ausführen, um das Trello Webhook einzurichten:

 NPM Run Hook --url https://api.netlify.com/build_hooks/xxxxx

Und damit haben wir einen schönen kleinen Fluss für die Verwaltung von Inhalten auf einer einfachen Website erstellt. Wir können unsere Frontend so gestalten, wie wir es wollen, und haben Aktualisierungen des Inhalts in einem Trello -Board, das die Website automatisch aktualisiert, wenn Änderungen vorgenommen werden.

Könnte ich das wirklich verwenden?

Dies ist ein simpeltes Beispiel. Das ist Design. Ich wollte unbedingt die Konzepte der Entkopplung demonstrieren und die API eines externen Dienstes nutzen, um den Inhalt für eine Website voranzutreiben.

Dies ersetzt ein mit vollem Funktionsgeschäft entkoppelter CMS nicht für mehr beteiligte Projekte. Die Prinzipien sind jedoch völlig auf komplexere Standorte anwendbar.

Dieses Modell könnte jedoch eine großartige Übereinstimmung mit den Arten von Websites für Unternehmen wie unabhängige Geschäfte, Bars und Restaurants entsprechen. Stellen Sie sich ein Trello -Board mit einer Liste für die Verwaltung der Homepage eines Restaurants und eine zum Verwalten ihrer Menüpunkte vor. Sehr zugänglich für das Restaurant -Mitarbeiter und viel schöner als das Hochladen eines neuen PDF des Menüs, wenn es sich ändert.

Sind Sie bereit, ein Beispiel zu untersuchen und mit Ihrem eigenen Board und Inhalt zu experimentieren? Versuchen Sie das:

• Klonen und geben Sie das Beispiel von oben aus und nehmen Sie Ihre Änderungen vor.
• Erfahren Sie mehr über Netlify, was Sie mit Netlify -Branch -Builds tun können
• Geben Sie tiefer in die Trello -Entwicklerressourcen ein.
  

Das obige ist der detaillierte Inhalt vonVerwendung von Trello als super einfaches CMS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!