Vous avez probablement entendu parler de Fantôme , la plate-forme de blogging new-ish qui a pris d'assaut le monde des blogs; c'est simple, c'est élégant, c'est sexy; il a cette chose en live-preview. Que ne pas aimer?
Je déménage pour Fantôme , comme beaucoup de concepteurs Web, à partir d'un arrière-plan WordPress. Mais avant que je parvenais effectivement à envelopper ma tête WordPress «fonctions de modèle, j'avais essayé des dizaines, voire des centaines, d'options CMS. Certains des plus mémorables comprennent ExpressionEngine , Textpattern , le malheureux FrogCMS , un vieux script ancien appelé CuteNews , et beaucoup plus.
WordPress m'a longtemps donné tout ce dont j'avais besoin: de puissantes fonctions de template; une offre infinie de plugins; juste voir ce que je pouvais faire.
Mais depuis un certain temps, WordPress est bien plus qu'un moteur de blogs. Il se déplace progressivement vers le domaine du cadre à certains égards. Un cadre de publication, si vous voulez.
J'ai atteint le point où je veux un logiciel qui blogue, et c'est tout. Je veux écrire mes articles dans Réduction , tapez des mots-clés, ajoutez une ou deux images et cliquez sur publier, puis oubliez tout.
Il se trouve que je ne suis pas le seul à vouloir une plate-forme de blogage simple et morte. Les créateurs de Ghost se sont donné beaucoup de mal pour éliminer tout ce que nous avons ajouté au processus de création de blogs et pour créer une plate-forme de publication simple et rapide qui fera le travail. C'est une bête complètement différente.
Elle repose sur la philosophie selon laquelle un CMS pour bloguer devrait faire une chose et le faire bien. Vous ne verrez aucun magazine lancé sur cette plate-forme sans beaucoup de personnalisation. C'est un blog, et le transformer en autre chose serait en quelque sorte contrecarrer son objectif.
Ensuite, il y a le fait qu'il est construit sur de nouvelles technologies. Ghost est construit sur Node.js , qui exécute le code JavaScript sur le serveur plutôt que dans le navigateur. Il est aimé par les mêmes personnes qui aiment l’hébergement PaaS et tous ces nouveaux systèmes que des gens comme moi ont du mal à comprendre. En un sens, il a été mis à l’avenir dès le départ. Cela fait partie de la première génération d'une nouvelle génération de CMS.
Attention, du point de vue du blogueur, ce n'est qu'une simple interface pour bloguer. Du point de vue de l'utilisateur final, rien n'a vraiment changé, sauf peut-être que le thème du blog par défaut semble un peu "plat". Mais sous le capot, nous voyons quelque chose de totalement nouveau et c'est une bonne chose.
Installer Ghost facilement.
En règle générale, vous devez installer un composant ou deux séparément pour que Ghost soit installé et exécuté sur un ordinateur local. Vous devrez installer Node.js, puis vous devrez entrer et commencer à installer manuellement des paquets Node supplémentaires à partir de la ligne de commande.
C'est vrai, l'installation typique de Ghost nécessite l'utilisation de la ligne de commande. Pour les personnes plus habituées au processus de "configuration de cinq minutes" de WordPress avec des bases de données MySQL et un programme d'installation graphique, cela peut être inconfortable.
Si vous n'êtes pas habitué à utiliser la ligne de commande sur une machine Mac ou Linux, cela peut être pénible.
Heureusement, les gens gentils à Bitnami installateurs graphiques pour Windows, Mac et Linux.
Voici toutes les étapes à suivre:
Comme le programme d'installation vous fournit tous les composants dont vous avez besoin, tels que Node.js et un mini-serveur, le répertoire de fichiers n'est pas très simple.
Vous devrez ouvrir le dossier dans lequel vous avez installé Ghost, puis accéder à apps / ghost / htdocs / . C'est l'installation Ghost réelle.
Les thèmes se trouvent dans apps / ghost / htdocs / content / themes / .
Les thèmes fantômes sont assez faciles à créer, à condition de connaître le langage HTML et CSS. Les connaissances en programmation sont utiles, mais pas strictement nécessaires. Le système de template de Ghost est simple, et même plutôt intuitif, si vous avez construit des thèmes pour WordP ... ahem, d'autres CMS auparavant.
Je sais je sais. La comparaison avec WordPress est ancienne. Mais ce logiciel a dominé le marché depuis des années - un peu comme Photoshop pour les images - les comparaisons sont inévitables. Dans ce cas, ils sont même utiles.
Les personnes qui ont construit des thèmes WordPress trouveront une partie de la structure de fichiers et du langage de template familiers, bien que beaucoup plus simples. Les fonctions PHP de WordPress vous apportent beaucoup de flexibilité. mais ils compliquent également le processus de codage du thème.
Système de template de Ghost (construit avec Guidon ), est sémantique, puissant et beaucoup plus lisible que les fonctions PHP brutes avec lesquelles nous travaillons. Personnellement, je trouve que c'est beaucoup plus facile à utiliser.
D'autre part, il s'agit uniquement de créer des blogs. Vous ne construirez pas un site de nouvelles hybride / réseau social / forum avec cette chose. Plus simple mais limité C'est le compromis inhérent à toute la plate-forme.
Créer un thème de base pour Ghost.
Maintenant, si vous avez regardé la vidéo (vous devriez vraiment), vous connaissez les bases. Vous aurez votre installation Ghost en mode développement et vous aurez un thème très, très limité avec lequel travailler.
Pour récapituler, techniquement, vous n'avez besoin que de trois fichiers pour créer un thème Ghost:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
Cependant, il existe d'autres modèles de base que vous souhaitez probablement inclure. Vous pouvez, bien entendu, créer des modèles personnalisés pour les pages, les publications, les auteurs, les tags et bien plus encore. Nous arriverons à tout cela avec le temps.
Pour l'instant, je veux me concentrer uniquement sur les bases: la structure des thèmes, l'extension des fichiers de modèles et l'emplacement de l'ensemble du code HTML. Cela signifie qu'il faut ajouter des fichiers et des dossiers supplémentaires à notre thème Ghost. Regardons la structure révisée:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs servira de base à votre thème. Votre ,
, et les balises iront ici. Tous les autres modèles seront rendus "à l'intérieur" de celui-ci. Maintenant, vous n'avez pas à le faire de cette façon; mais c'est une pratique standard, et est fortement recommandé par les développeurs Ghost eux-mêmes.page.hbs est exactement ce que vous pensez, le modèle pour les pages statiques. Le dossier des ressources est assez explicite.
Le dossier Partials / est l'endroit où vous gardez des morceaux de code que vous utilisez plus d'une fois, sur différents modèles. Par exemple, navigation.hbs peut inclure le nom / logo de votre site et la navigation principale. loop.hbs peut générer une liste de publications avec du HTML et du style génériques. Cela pourrait être utilisé à plusieurs endroits sur le site.
Alors, montrons-nous à quel point la modélisation peut être simple. Tout d'abord, nous allons configurer notre fichier default.hbs :
{{! Here we see the functions for page titles and descriptions. }}{{meta_title}} {{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}
Maintenant, créons le gabarit navigation.hbs , car ce sera sur chaque page:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/pour chaque}}{{! Liens vers les pages suivantes et précédentes des liens. Vous pouvez définir le nombre de liens sur chaque page du panneau d'administration. }}{{pagination}}
Maintenant, nous allons lier le tout avec le modèle index.hbs , qui servira également de page d'accueil, sauf indication contraire de votre part. Le code pour cela, voir comment nous avons divisé et organisé la plupart du HTML ailleurs, est très simple:
{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}
Et c'est tout. Je vous ai dit que c'était simple!
Si vous avez des problèmes, consultez le thème par défaut de Ghost, et le Documentation . Jouez avec le HTML, jouez avec le système de template et commencez à styliser votre thème.
La prochaine fois, nous creuserons un peu plus. En attendant, amusez-vous!