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> {{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!