Utilisation de Trello comme CMS super simple

Parfois, nos sites ont besoin d'un peu de pincement de gestion de contenu. Pas toujours. Pas beaucoup. Mais un peu. Le marché CMS est en plein essor avec des produits abordables et accessibles, nous ne sommes donc pas à court d'options. Heureusement, c'est un monde très différent de celui qui avait l'habitude de forcer les entreprises à éclabousser un GA-Jillionty et un dollar (pas un coût exact: j'ai arrondi au bazillion le plus proche) pour une plate-forme CMS ™ CMS ™ tout -tteuse et intégrée.

Parfois, cependant, il est agréable d'utiliser un outil vraiment simple que toute personne mettant à jour le contenu sur le site est déjà familiarisée, plutôt que de s'adapter à un nouveau CMS.

J'aime beaucoup Trello pour gérer les idées et les tâches. Et il a une API. Pourquoi ne pas l'utiliser comme source de contenu pour un site Web? Je veux dire, hé, si nous pouvons le faire avec Google Sheets, alors qu'est-ce qui nous empêche d'essayer d'autres choses?

Bonjour, Trello

Voici un site simple à explorer. Il tire son contenu de cette carte Trello et ce contenu est affiché dans les sections. Chaque section est peuplée par les champs de titre et de description d'une carte dans notre tableau Trello.

Trello utilise Markdown, qui est utile ici. Quiconque modifie le contenu dans une carte Trello peut appliquer le formatage de texte de base et avoir le même flux de marque dans le site et transformé en HTML par un processus de construction.

Blocs de construction

Je suis un grand fan de ce modèle d'exécution d'une version qui tire le contenu de divers flux et sources, puis les écrase avec un modèle pour générer le HTML d'un site Web. Il découple la présentation de la gestion du contenu (d'où vient le terme «découplé» dans les produits CMS modernes populaires). Et cela signifie que nous sommes libres de créer le site Web comme nous le voulons avec toutes les astuces et techniques méprisantes que nous avons apprises ici sur CSS-Tricks.

Étant donné que nous tirons le contenu au moment de la construction, nous n'avons pas à nous soucier des quotas d'utilisation ou des performances de nos sources de données si nos sites deviennent populaires et apportent beaucoup de trafic. Et pourquoi ne le feraient-ils pas? Regardez à quel point nous les avons fait!

Je veux jouer!

Bien. Vous pouvez prendre une copie du code de ce site et bricoler dans le contenu de votre cœur. Cette version comprend des informations sur la façon de créer votre propre carte Trello et de les utiliser comme source de contenu de la build.

• Exemple de référentiel de code de site sur github
• Site de démonstration
• Cloner et déployer votre propre copie en quelques clics

Si vous voulez expliquer comment cela fonctionne d'abord plutôt que de plonger directement, lisez la suite.

Découvrir l'API

Trello a une API bien documentée et un ensemble de ressources de développeur. Il existe également un module de nœud pratique pour simplifier la tâche d'authentification et d'interaction avec l'API. Mais vous pouvez également explorer l'API en bricolant avec les URL lorsque vous explorez vos planches Trello.

Par exemple, l'URL de la carte Trello ci-dessus est:

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

Si nous ajoutons .json à cette URL, Trello nous montre le contenu représenté comme JSON. Jetez un œil.

Nous pouvons utiliser cette technique pour inspecter les données sous-jacentes à travers Trello. Voici l'URL pour une carte en particulier:

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

Si nous utilisons cette petite astuce et ajoutez .json à l'URL, nous verrons les données qui décrivent cette carte.

Nous trouverons des choses intéressantes - des identifiants uniques pour le tableau, la liste et la carte. Nous pouvons voir le contenu de la carte et beaucoup de métadonnées.

J'adore faire ça! Regardez toutes les belles données! Comment l'utiliserons-nous?

Décider comment utiliser une planche

Pour cet exemple, supposons que nous avons un site avec une seule page de contenu gérable. Une liste ou une colonne de notre carte serait idéale pour contrôler les sections de cette page. Un éditeur pourrait leur donner des titres et du contenu, et les entraîner dans l'ordre qu'ils souhaitent.

Nous aurons besoin de l'ID de la liste afin que nous puissions y accéder via l'API. Heureusement, nous avons déjà vu comment découvrir cela - jetez un œil aux données de l'une des cartes de la liste en question. Chacun a une propriété de planches. Bingo!

Générer le site

Le plan consiste à récupérer les données de Trello et à l'appliquer à certains modèles pour remplir notre site. La plupart des générateurs de sites statiques (SSG) feraient le travail. C'est ce qu'ils sont bons. J'utiliserai Eleventy parce que je pense qu'il a les concepts les plus simples à comprendre. De plus, il est très efficace pour obtenir des données et générer un HTML propre avec Nunjucks (une langue de modèle populaire).

Nous voulons pouvoir utiliser une expression lin notre modèle qui publie un élément de section pour chaque élément trouvé dans un objet JavaScript appelé Trello:

 
{% pour la carte dans Trello%}
<segction>
  <h2 id="card-name"> {{card.name}} </h2>
  <div>
    {% Markdown%}
      {{- card.desc | sûr }}
    {% EndMarkdown%}
  </div>
 section>
{% end pour%}</segction>

Récupérer les données de la construction

Une technique populaire avec des sites Jamstack comme celui-ci consiste à exécuter une construction avec Gulp, Grunt ou [insérer la dernière chaleur du script de nouvelle construction ici] qui va et récupére les données de diverses API et flux, cache les données dans un format approprié pour le SSG, puis exécute le SSG pour générer le HTML. Cela fonctionne plutôt bien.

Eleventy simplifie les choses ici en soutenant l'exécution de JavaScript dans ses fichiers de données. En d'autres termes, plutôt que de ne tirer que des données stockées sous forme de JSON ou YAML, il peut utiliser tout ce qui est renvoyé par JavaScript, ouvrant la porte à faire des demandes directement aux API lorsque la version Eleventy s'exécute. Nous n'aurons pas besoin d'une étape de construction séparée pour aller chercher les données en premier. Eleventy le fera pour nous.

Utilisons cela pour obtenir les données de notre objet Trello dans les modèles.

Nous pourrions utiliser le client du nœud Trello pour interroger l'API, mais il s'avère que toutes les données que nous voulons sont là dans le JSON pour la carte. Tout! Dans une demande! Nous pouvons juste le récupérer en une seule fois!

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

  // Utiliser la feste de nœud pour obtenir les données JSON sur cette carte
  const fetch = require ('nœud-fetch');
  return fetch (trello_json_url)
    .Then (res => res.json ())
    .Then (json => console.log (json));
};

Cependant, nous ne voulons pas afficher toutes les données de ce conseil. Il comprend des cartes sur d'autres listes, des cartes qui ont été fermées et supprimées, etc. Mais nous pouvons filtrer les cartes pour n'inclure que celles d'intérêt grâce à la méthode du filtre de JavaScript.

 // Trello.js
module.exports = () => {
   const Trello_json_Url = 'https: //trello.com/b/zzc0uswz/hellotrello.json'
   const Trello_list_id = '5e98325d6d6bd120f2b7395f',
 
   // Utiliser la feste de nœud pour obtenir les données JSON sur cette carte
   const fetch = require ('nœud-fetch');
   return fetch (trello_json_url)
   .Then (res => res.json ())
   .Then (JSON => {
 
     // Concentrez-vous simplement sur les cartes qui sont dans la liste que nous voulons
     // et n'a pas de statut fermé
     Selon contentcards = json.cards.filter (card => {
       return card.idlist == trello_list_id &&! card.closed;
     });
 
     return contentcards;
 });
};

Ça va le faire! Avec cela enregistré dans un fichier appelé Trello.js dans le répertoire de données d'Eleventy, nous aurons ces données prêtes à l'emploi dans nos modèles dans un objet appelé Trello.

Done-zo! ?

Mais nous pouvons faire mieux. Passons également des images jointes et ajoutons également un moyen de faire passer du contenu pour examen avant qu'il ne soit mis en ligne.

Pièces jointes

Il est possible d'attacher des fichiers à des cartes dans Trello. Lorsque vous joignez une image, il s'affiche juste dans la carte avec l'URL source de l'actif décrit dans les données. Nous pouvons en utiliser!

Si une carte a une pièce jointe d'image, nous voulons obtenir son URL source et l'ajouter en tant que balise d'image à ce que notre modèle insère dans la page au moment de la construction. Cela signifie ajouter la marque d'une image à la marque dans la propriété description de notre JSON (card.desc).

Ensuite, nous pouvons laisser Eleventy transformer cela en HTML pour nous avec tout le reste. Ce code recherche des cartes dans notre JSON et masse les données dans la forme dont nous aurons besoin.

 // Trello.js

// Si une carte a une pièce jointe, ajoutez-la comme image 
// dans la marque de description
contenucards.ForEach (card => {
  if (card.attachments.length) {
    card.desc = card.desc `\ n! [$ {card.name}] ($ {card.attachments [0] .url} '$ {card.name}')`;
  }
});

Maintenant, nous pouvons également déplacer des images dans notre contenu. Pratique!

Contenu de mise en scène

Ajoutons un autre épanouissement à la façon dont nous pouvons utiliser Trello pour gérer le contenu de notre site.

Il existe plusieurs façons de vouloir prévisualiser le contenu avant de le lancer dans le monde. Notre tableau Trello pourrait avoir une liste de mise en scène et une liste de contenu de production . Mais cela rendrait difficile la visualisation de la façon dont le nouveau contenu vit aux côtés de ce qui est déjà publié.

Une meilleure idée serait d'utiliser les étiquettes de Trello pour signifier quelles cartes sont publiées en direct et lesquelles ne devraient être incluses que sur une version mise en scène du site. Cela nous donnera un bon flux de travail. Nous pouvons ajouter plus de contenu en ajoutant une nouvelle carte au bon endroit. Étiquetez-le avec «scène» et filtrez-le à partir des cartes apparaissant sur notre branche de production.

Un peu plus de filtrage de notre objet JavaScript est demandé:

 // Trello.js

// n'inclut que des cartes étiquetées avec "en direct" ou avec
// le nom de la branche dans laquelle nous sommes
contenucards = contenucards.filter (card => {
  return card.labels.filter (label => (
    label.name.tolowercase () == 'live' ||
    label.name.tolowercase () == branche
   )).longueur;
 });

Nous voulons que le contenu intitulé «live» apparaisse sur chaque version de la construction, de mise en scène ou non. De plus, nous chercherons à inclure des cartes qui ont une étiquette correspondant à une variable appelée «branche».

Comment ça se fait? Qu'est ce que c'est?

C'est là que nous devenons rusés! J'ai choisi d'héberger ce site sur Netlify (Avertissement: j'y travaille). Cela signifie que je peux exécuter la version à partir de l'environnement CI / CD de Netlify. Cela redéploite le site chaque fois que je pousse les modifications à son référentiel GIT, et donne également accès à quelques autres choses qui sont vraiment pratiques pour ce site.

L'une est les déploiements de branche. Si vous voulez un nouvel environnement pour un site, vous pouvez en créer un en créant une nouvelle branche dans le référentiel GIT. La construction s'exécutera dans ce contexte et votre site sera publié sur un sous-domaine qui comprend le nom de la branche. Comme ça.

Jetez un œil et vous verrez toutes les cartes de notre liste, y compris celle qui a l'étiquette Orange «Stage». Nous l'avons inclus dans cette version car son étiquette correspondait au nom de la branche pour le contexte de construction. La branche était une variable d'environnement qui contenait la branche dans laquelle la construction courait.

 label.name.tolowercase () == branche

En théorie, nous pourrions faire autant de branches et d'étiquettes que nous le souhaitons, et avoir toutes sortes d'environnements de mise en scène et de test. Prêt à promouvoir quelque chose de «Stage» à «Live»? Échangez les étiquettes et vous êtes prêt à partir!

Mais comment est-ce que cela met à jour?

Le deuxième avantage que nous obtenons de l'exécution de la construction du site dans un CI / CD tel que Netlify est que nous pouvons déclencher une version pour s'exécuter quand nous le voulons. Netlify nous permet de créer des crochets de construction. Ce sont des webhooks qui lancent un nouveau déploiement lorsque vous leur envoyez une publication HTTP.

Si Trello prend également en charge WebHooks, nous pourrions coudre ces services ensemble et actualiser automatiquement le site chaque fois que la carte Trello change. Et devinez ce que… ils font! HOORAH!

Pour créer un crochet de construction Netlify, vous devrez visiter le panneau d'administration de votre site. (Vous pouvez bootstrap ce site de démonstration dans un nouveau site Netlify en quelques clics si vous souhaitez l'essayer.)

Maintenant, armé d'une nouvelle URL de crochet de construction, nous devrons enregistrer un nouveau Trello WebHook qui l'appelle lorsque le contenu change. La méthode de création de webhooks dans Trello est via l'API de Trello.

Le dépôt de ce site comprend un petit utilitaire pour appeler l'API Trello et créer le webhook pour vous. Mais vous devrez avoir un jeton de développeur Trello et une clé. Heureusement, il est facile de les créer gratuitement en visitant le portail des développeurs Trello et en suivant les instructions sous «Autorisation d'un client».

Vous les avez? Super! Si vous les enregistrez dans un fichier .env dans votre projet, vous pouvez exécuter cette commande pour configurer le webhook Trello:

 npm run hook --url https://api.netlify.com/build_hooks/xxxxx

Et avec cela, nous avons créé un joli petit flux pour gérer le contenu sur un site simple. Nous pouvons fabriquer notre frontend comme nous le voulons, et avoir des mises à jour du contenu sur une carte Trello qui met automatiquement à jour le site chaque fois que les modifications sont apportées.

Puis-je vraiment l'utiliser?

Ceci est un exemple simpliste. C'est par conception. Je voulais vraiment démontrer les concepts de découplage et d'utiliser l'API d'un service externe pour conduire le contenu d'un site.

Cela ne remplacera pas un CMS découplé complet pour des projets plus impliqués. Mais les principes sont totalement applicables aux sites plus complexes.

Ce modèle, cependant, pourrait être un excellent match pour les types de sites Web que nous voyons pour les entreprises telles que les magasins indépendants, les bars et les restaurants. Imaginez une planche Trello qui a une liste pour gérer la page d'accueil d'un restaurant et une pour gérer ses articles de menu. Très accessible pour le personnel du restaurant, et beaucoup plus agréable que de télécharger un nouveau PDF du menu chaque fois qu'il change.

Prêt à explorer un exemple et à expérimenter votre propre planche et votre propre contenu? Essayez ceci:

• Clone et déployez l'exemple d'en haut, et commencez à apporter vos modifications.
• En savoir plus sur Netlify ce que vous pouvez faire avec Netlify Branch Builds
• Approfondir les ressources du développeur Trello.
  

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!