Share
Webhook est une nouvelle plate-forme de création de site qui a été soutenue avec succès sur Kickstarter en mai 2014 et qui vient d'être rendue publique. Le concept derrière Webhook est, si vous excusez mon enthousiasme, absolument génial.
L’une des requêtes les plus souvent entendues par de nombreuses communautés CMS est "Comment personnaliser le système pour (remplir les trous)". Les responsables de Webhook souhaitaient répondre à ce besoin commun, mais au lieu de créer un nouveau CMS pré-construit avec l’idée de le rendre extensible, ils ont pris les choses plus loin et ont demandé:" Et si nous créions une Constructeur CMS au lieu?".
La caractéristique la plus unique de Webhook, et peut-être même qui révolutionne le jeu, est que, pour chaque site, vous pouvez contrôler exactement le type de contenu pouvant être publié par simple création par glisser-déposer de formulaires dans la zone d'administration.
Supposons que vous ayez besoin de publier des podcasts mais que vous ne souhaitiez pas vous occuper de publications et de pages de blog typiques. Vous créez un type de contenu "Épisodes" et faites glisser et déposez des champs dans lesquels vous pouvez entrer le nom des épisodes, saisir votre texte d'épisode et télécharger des fichiers de podcast..
Ou, si vous voulez un blog, mais vous voulez aussi un endroit pour afficher une galerie de vidéos? Vous pouvez le faire aussi, il suffit de "glisser-déposer" vous-même une zone de publication de blog traditionnel plus une autre section dédiée à l'ajout de vidéos.
Et que diriez-vous si vous devez créer plusieurs types de contenu différents qui entretiennent des relations complexes les uns avec les autres? Oui, vous pouvez le faire aussi. En dehors de la gestion complète du commerce électronique ou des membres, quels que soient les besoins de votre site, vous pouvez créer l'interface CMS adaptée à vos besoins..
Le principe de base de Webhook est que vous devriez avoir la possibilité de créer facilement un CMS avec tout ce dont vous avez besoin et rien que vous ne voulez, pour chaque projet. Voyons maintenant comment Webhook fonctionne et comment commencer à l'utiliser..
Webhook vit à deux endroits:
Vous installez Webhook localement et construisez votre site hors connexion afin que vous puissiez obtenir la zone d'administration, la présentation et le contenu tels que vous le souhaitez. Vous le déployez ensuite sur le serveur live lorsque vous êtes prêt. À partir de ce moment, vous pourrez également mettre à jour votre site localement et le redéployer autant de fois que vous le souhaitez..
Webhook s'installe en quelques minutes via la ligne de commande via NPM.
Après vous être assuré que Node.js est installé, lancez un terminal (Mac / Linux) ou une invite de commande (Windows), puis exécutez la commande suivante:
npm installer -g grunt-cli wh
Remarque: vous devrez peut-être y ajouter la commande "sudo" pour obtenir les privilèges d'administrateur sur Mac ou Linux.
Ceci télécharge tous les fichiers requis de Webhook et configure votre ordinateur afin qu'il puisse créer et gérer des sites Webhook à partir de la ligne de commande..
Une fois Webhook installé, vous pouvez créer un site en exécutant la commande suivante:
pour créer votre_nom_site
Dans votre terminal, vous devrez ensuite saisir l'adresse e-mail que vous avez associée à Webhook, puis définir ou entrer votre mot de passe:
Une fois la configuration du site terminée, vous verrez une confirmation:
Qu'est-ce qui vient juste de se passer? Vous constaterez qu'un dossier a été créé localement avec le nom que vous avez spécifié lors de la création et que les fichiers requis y ont été téléchargés:
Vous êtes maintenant prêt à exécuter votre serveur Webhook local afin de pouvoir travailler sur votre site hors connexion avant de le déployer en direct. Pour ce faire, commencez par aller dans le dossier de votre site sur votre terminal en entrant:
cd votre_nom_site
Puis lancez la commande:
pour servir
Votre site local s'ouvrira automatiquement dans votre navigateur par défaut et vous verrez:
Lorsque vous cliquez sur le À la recherche du CMS? lien, vous devrez vous connecter, puis vous serez redirigé vers un écran où vous devrez choisir entre un thème Webhook existant ou en créer un de toutes pièces:
Les thèmes Webhook jouent un rôle très différent de ceux des autres plates-formes. Par conséquent, avant de poursuivre, vous devez comprendre ce que vous choisissez réellement lorsque vous sélectionnez un thème Webhook ou si vous choisissez d'en créer un nouveau..
Sur un CMS traditionnel, les thèmes contrôlent l'apparence d'un site, tandis que les types de contenu et leurs méthodes de saisie sont gérés séparément. Toutefois, sur Webhook, le thème détermine non seulement la présentation, mais également le type de contenu accepté par le site, ainsi que la manière dont ce contenu est publié via le panneau de configuration..
Par exemple, si vous installez le thème prédéfini "Podcast et blog", vous obtenez un système frontal conçu à cet effet avec des inclusions telles que des liens iTunes, des lecteurs audio, des liens de téléchargement, etc.:
Mais vous obtiendrez également une zone d’administration spécialement conçue pour le type de contenu que vous publierez sur votre site:
Notez les types de contenu associés au podcast "Membres de la distribution", "Épisodes" et "Détails du podcast". Notez également que, dans la capture d'écran ci-dessus de l'interface de publication "Épisodes", elle ne comporte que des champs spécifiques à la publication d'un podcast, par exemple le numéro d'épisode, l'insertion de fichier audio, etc. Vous n'avez pas à contourner les champs de saisie de contenu superflus qui ne seront pas utilisé.
Les éléments frontaux et ce que vous voyez dans le back-end sont contrôlés par le thème. Donc dans un sens, pour chaque site Webhook, le thème est le CMS.
Cela a beaucoup de sens à bien des égards. Sur toute plate-forme, un thème doit s’aligner sur le type de contenu pouvant être publié sur le site. Sur un CMS traditionnel, si un nouveau type de contenu personnalisé est ajouté, à l'aide d'un plugin par exemple, il est souvent impossible de l'utiliser si un thème ne le prend pas en charge. L'approche de Webhook veille à ce que les thèmes et les types de contenu d'un site correspondent parfaitement en les contenant dans le même système..
Dans les prochains tutoriels, nous verrons en détail comment créer vos propres thèmes Webhook personnalisés. C'est pourquoi, dans le but de vous présenter la plate-forme, j'ai opté pour l'option préfabriquée. Cela m'a donné huit thèmes à choisir.
J'ai sélectionné "Bootstrap blog", qui est un thème de blogging simple appelé Bootstrap qui vous donne les types de contenu "Articles" et "À propos de moi" dans la zone d'administration:
Après avoir ajouté du contenu, l'interface de mon site local ressemblait à ceci:
Prendre ce que vous avez créé localement et le déployer sur votre site en direct est également incroyablement facile. Ouvrez un terminal dans le dossier contenant votre site local et exécutez la commande:
qui déploie
Remarque: J'ai trouvé plus facile d'ouvrir un deuxième terminal à cet effet, car cela me permet de quitter le premier terminal ouvert en exécutant le processus de mon site Webhook local..
Une fois le déploiement réussi, vous obtenez une confirmation sur votre terminal, ainsi qu'un rappel de l'URL à laquelle vous pouvez voir votre site actif:
Vous pouvez visiter le site de démonstration créé ci-dessus à l'adresse http://tutsplusdemo.webhook.org/
Comme je l'ai mentionné plus tôt, nous allons vous donner des tutoriels complets sur le thème de Webhook dans un proche avenir. Néanmoins, jetons quand même un exemple simple de personnalisation de l'un des types de contenu de notre site afin de vous donner une idée de la facilité avec laquelle cela peut être..
Par défaut, la page "À propos de moi" affiche un en-tête et une biographie:
Nous allons ajouter la possibilité d'ajouter une URL de site Web à la fin de la page..
Allez dans la zone d'administration et cliquez Ajouter / Modifier les types de contenu dans la barre latérale gauche:
Vous verrez une liste des types de contenu existants:
Clique le À propos de moi entrée et vous serez pris pour le système de construction de formulaire. Sur le côté gauche de l'écran, vous verrez tous les différents types de champs de saisie de contenu que vous pouvez ajouter, appelés "Widgets" dans la terminologie Webhook. Trouvez le Site Internet widget dans le Détails section puis faites-le glisser du côté gauche et déposez-le à droite:
Clique le Enregistrer le formulaire bouton en bas à droite de l'interface:
Une fois l’enregistrement terminé, vous serez redirigé vers le formulaire de saisie de contenu que vous venez de mettre à jour, où vous verrez votre nouveau Site Internet champ. Lorsque vous survolez le champ, la balise que vous devez utiliser pour afficher son contenu via le fichier de modèle approprié s'affiche également.
Le fichier modèle "about.html" qui contrôle la présentation de la page "À propos de moi" se trouve dans le sous-dossier "pages" de ce thème. Nous en parlerons plus en détail sur le fonctionnement du système de templates dans notre tutoriel complet sur les thèmes Webhook..
Pour l'instant, vous pouvez simplement ouvrir le fichier "about.html" et localiser la ligne suivante:
about.body | safe
Sous cette ligne, ajoutez ce qui suit:
about.website
Enregistrez le fichier et votre site local détectera le changement et s'actualisera automatiquement. Vous verrez alors votre nouveau lien sous le texte principal:
Après avoir expérimenté toutes les fonctionnalités décrites ci-dessus, Webhook m'impressionnait énormément et pensait aux applications pour lesquelles je pouvais l'utiliser. Pourtant, j'ai trouvé encore plus de fonctionnalités qui ont continué à piquer mon intérêt..
Avec les thèmes Webhook, vous pouvez non seulement contrôler les données, la présentation et la zone administrative, mais également leur demander de récupérer les packages NPM lors de l'installation..
Cela signifie que vous pouvez, par exemple, extraire un package de préprocesseur afin que les fichiers LESS / Sass / Stylus puissent être compilés à la volée. Chaque fois que vous servez votre site Webhook local, il exécute une tâche "Grunt Watch" afin que vous puissiez personnaliser le fichier Gruntfile inclus pour gérer ces types d'opérations..
Cela signifie également que vous pouvez intégrer tous les outils disponibles via NPM, tels que les frameworks de préprocesseur, les plugins jQuery et tout autre élément utile que vous pourriez trouver parmi les 80 000 packages disponibles..
Étant donné que l'ensemble du CMS est contrôlé depuis votre dossier de thèmes, vous avez également le contrôle sur la façon dont il est stylé. Tout ce que vous avez à faire est d’ajouter un lien vers votre propre CSS personnalisé dans le fichier de modèle. pages / cms.html. Par exemple, vous pouvez ajouter votre propre style pour rendre les champs de texte plus larges que leur valeur par défaut:
Et bien sûr, vous pouvez également mettre en place un style plus complet pour retravailler complètement le jeu de couleurs, la typographie et tout ce que vous choisissez.
Jetez un œil à ces superbes vidéos montrant ce que Webhook peut faire:
Accentsconagua