Share
Statamic est un CMS moderne qui s'efforce d'être simple et intuitif. De sa conception à fichier plat à son utilisation de technologies telles que Markdown et YAML, vous pouvez accomplir une quantité de travail exceptionnelle sans écrire de code..
Dans cet article, nous allons examiner le processus de l'installation à la configuration d'un portefeuille de base..
Avec une conception de fichier à plat, l'installation est aussi simple que d'extraire le fichier zip que vous téléchargez du site Web Statamic. Il n'y a pas de base de données impliquée, tout le contenu et les paramètres sont stockés localement dans une foule de fichiers différents, ce qui signifie également que vous avez des sauvegardes automatiques et une gestion des versions sur tout votre contenu si vous utilisez quelque chose comme Git..
Avec le contenu extrait, jetons un coup d'œil à la structure de Statamic.
Il y a plus ou moins cinq dossiers différents avec lesquels vous allez probablement interagir, et ils sont:
En plus de ceux-ci, vous avez les quatre dossiers suivants que vous ne toucherez probablement pas directement:
La première étape de chaque site Statamic consiste à configurer ses options..
Tous les fichiers de configuration se trouvent dans le dossier _config, comme décrit ci-dessus. Le fichier principal que vous devriez jeter un oeil est le settings.yaml.
Si vous êtes nouveau dans YAML, tout ce que vous avez besoin de savoir, c'est qu'il s'agit d'un format de données similaire à JSON, à ceci près qu'il est censé être un format plus lisible par l'homme. Pour ce faire, il ne requiert pas de caractères de séparation, tels que points-virgules ou guillemets, mais tire sa structure du placement et de l'indentation..
le settings.yaml Le fichier est vraiment bien documenté, vous ne devriez donc pas avoir de problème à le remplir. Certaines des options que vous voudrez probablement examiner sont les suivantes:
_license_key: Entrez votre clé de licence _site_name: Mon portfolio _site_url: http: // localhost: 7000 _theme: portfolio _taxonomy: - language _log_enabled: true _cookies.secret_key: Clé aléatoire
La plupart d'entre eux sont assez simples, comme la définition de la clé de licence, le nom et l'URL de votre site. le thème option définit quel dossier de thème à charger. Nous y reviendrons dans un instant, mais un thème est essentiellement l’endroit où vous spécifiez le fonctionnement des différentes pages de votre site. Nous allons créer notre propre thème pour que vous puissiez le nommer comme vous le souhaitez. J'ai choisi 'portfolio'.
L'option suivante est un tableau appelé taxonomie. Si vous avez déjà utilisé quelque chose comme WordPress, vous devriez savoir à quoi cela sert. En gros, cela vous permet d'ajouter un paramètre ou un "type" à chaque publication. Vous pouvez ensuite utiliser ces taxonomies pour filtrer votre contenu et créer des pages personnalisées pour ces groupes..
Je ne fais qu'ajouter une taxonomie; la taxonomie linguistique, car dans notre exemple de portfolio, nous allons spécifier les langages de programmation de chaque travail. Vous n'avez pas besoin de créer une taxonomie pour chaque propriété personnalisée. Nous allons vouloir d'autres choses dans notre portefeuille, comme des liens et des descriptions. Une taxonomie concerne les champs communs à plusieurs entrées et les champs pour lesquels vous souhaitez créer une page personnalisée..
le log_enabled Ce paramètre active la journalisation afin que vous puissiez voir les problèmes qui apparaissent à partir du panneau d’administration. Ils seront stockés dans le _logs dossier que nous avons vu plus tôt. Enfin, la dernière option que j'ai mentionnée est la clé secrète utilisée pour chiffrer le cookie..
Ce fichier peut maintenant être sauvegardé, mais avant de passer au contenu, prenons un moment pour configurer le modèle de portefeuille afin que nous puissions voir ce que nous faisons..
Comme la plupart des frameworks modernes, lorsque vous chargez une page, vous pouvez la construire à partir de plusieurs composants réutilisables. Une page en Statamic est composée d'un disposition, une modèle, et un fichier de contenu. Les fichiers de présentation et les modèles peuvent éventuellement être composés d’un nombre encore plus important de pièces appelées partielles..
le disposition est la coque externe dans laquelle votre modèle sera placé. Ceci est généralement utilisé pour contenir le code HTML standard comme la section head, ainsi que le corps de base nécessaire à toutes les pages utilisant cette présentation, comme l'ajout de bibliothèques communes au bas de votre fichier..
le modèle est une vue spécifique pour une seule page. Vous pouvez avoir un modèle de page d'accueil, un modèle de page de contact, etc. Vous n'avez pas besoin d'en créer un par page, mais je vous en recommanderais un par page. type de page.
Dans ces modèles, vous pouvez utiliser des variables stockées dans les fichiers de contenu réels. Par exemple, supposons que vous ayez besoin d’une page qui affiche un index des livres que vous lisez, puis d’une autre page pour afficher une liste des émissions que vous regardez. Au lieu de répliquer l'essentiel du code pour chaque page, vous pouvez créer un modèle pour afficher une liste d'objets, puis extraire les détails de la liste à extraire du fichier de contenu lui-même..
le fichier de contenu-comme son nom l'indique, est la ressource actuellement affichée. Cela peut aller d'une page Web unique à une seule entrée de blog. Nous y reviendrons plus en détail dans un instant.
Maintenant, au lieu de créer manuellement tous ces différents composants, Statamic fournit une sorte de modèle de départ, vous donnant une structure de base pour commencer. Vous pouvez télécharger le dossier de thèmes depuis Github.
Il suffit de placer le dossier entier dans le _themes répertoire et renommez le dossier en 'portfolio' (il s’agit du nom de thème que nous avons déclaré dans le fichier de paramètres). Vous devez également renommer le kindling.js fichier du dossier js et le kindling.css fichier du répertoire css, à portfolio.js et portfolio.css respectivement, comme il y a une balise spéciale pour les tirer automatiquement.
C’est toute la configuration dont nous avons besoin à présent, mais pour avoir une meilleure idée de ce dont je parlais concernant la mise en page et le modèle, examinons ces fichiers. Pour commencer, ouvrez le fichier nommé default.html du mises en page dossier. Cela correspond à la mise en page par défaut, comme vous l'avez peut-être deviné.
_nom du site layout_content
Comme je l'ai mentionné plus tôt, la disposition est un bon endroit pour insérer le code requis sur plusieurs pages (ou plutôt pour des modèles). C'est pourquoi la disposition par défaut de ce fichier contient uniquement le contour de base d'un fichier HTML. Maintenant, nous n'en avons pas encore vraiment parlé, mais Statamic est livré avec son propre moteur de templates, qui est assez facile à prendre en main. En gros, vous placez simplement une balise à l'endroit où vous souhaitez insérer quelque chose, similaire à Handlebars si vous êtes familier avec cela..
Cette mise en page contient quelques balises que je pensais parcourir, la première étant _nom du site. Cette balise renvoie en fait à la propriété que nous avons définie à l’intérieur du settings.yaml fichier. Vous trouverez cette convention tout au long de Statamic. Vous pouvez définir les options YAML globalement comme ceci, ou même fichier par fichier. Vous pouvez ensuite obtenir ces options simplement en plaçant une balise avec leur nom dans vos modèles..
La prochaine balise, qui revient en fait deux fois, est le thème étiquette. Les aides dans Statamic ressemblent davantage à des modules indépendants, ils peuvent donc avoir plusieurs fonctions différentes attachées au même nom. vous accédez aux fonctions individuelles avec deux points, puis le nom de la commande que vous voulez.
le thème tag est tout au sujet de chargement dans les ressources spécifiques à ce thème. Il peut être utilisé pour insérer des éléments tels que des scripts et des feuilles de style, mais également des éléments tels que des images et des partiels. C’est une fonction d’aide qui vous permet en gros de fournir le nom de la ressource souhaitée et de renseigner le chemin du répertoire des modèles en cours. Donc par exemple si vous deviez écrire:
theme: js src = "underscore.js"
Il remplacerait cela par un lien vers un fichier nommé underscore.js à l'intérieur du dossier js du thème actuel. Par défaut, si aucun paramètre src n'est défini pour la commande js ou css, cela signifie que vous faites référence à un fichier js ou css portant le nom du thème actuel. C'est pourquoi nous avons renommé les fichiers correspondants. c'est juste une question de commodité, donc nous n'avons pas besoin de les spécifier et cela nettoie un peu la source.
La prochaine balise qui apparaît est layout_content. Ceci est similaire à rendement dans d'autres moteurs de templates, et cela signifie fondamentalement où le modèle interne doit être inséré.
La dernière chose que je veux faire dans ce fichier est de supprimer le lien vers jQuery, car je ne vais pas l'utiliser (si vous le souhaitez, vous pouvez bien sûr le laisser)..
Passons ensuite au fichier de modèle par défaut (templates / default.html). Il devrait être vide. Pour l'éducation, ajoutons une balise appelée contenu qui insère simplement le contenu de la page en cours de chargement.
Donc, pour récapituler, lorsque vous allez sur une page, il charge d’abord le fichier de mise en page, puis layout_content tag est placé ce modèle sera inséré. Ce gabarit sera alors simplement sorti quel que soit le contenu de la page en cours.
Ceci fait, enregistrez ces fichiers et passons au contenu..
Le contenu dans Statamic est spécifié par défaut dans les fichiers Markdown et le fichier chargé par défaut est appelé page.md. De la même manière qu'un serveur Web standard chargera index.html si aucun fichier n'est spécifié, Statamic chargera page.md.
Il convient également de noter que les itinéraires ou les liens d’URL de votre site seront définis par le _contenu annuaire. Par exemple, si vous créez un dossier nommé démo dans le _contenu répertoire et placez-y un fichier nommé link.md, cela correspondra à l'URL / démo / lien. Si vous placez un page.md fichier à l'intérieur, il sera chargé si vous accédez à / démo / puisqu'il s'agit du nom de fichier par défaut.
Statamic est livré avec un contenu de démonstration, mais vous pouvez simplement supprimer tout ce qui se trouve à l'intérieur du _contenu répertoire pour cet exemple (ou le mettre de côté pour l'instant).
Commençons par une page d'accueil de base. À la racine de la _contenu répertoire, créer un fichier nommé page.md avec ce qui suit:
--- title: Home --- # Bienvenue sur la page title
Tous les fichiers de contenu sont divisés en deux sections. l'avant-propos de YAML et son contenu. La partie supérieure (entre les lignes pointillées) est l'endroit où vous pouvez mettre YAML standard spécifique à ce fichier et constitue un bon moyen de définir des options pour ajuster vos fichiers de modèle. La deuxième partie est la zone Markdown, où vous mettez le contenu de la page réelle. Vous pouvez utiliser Markdown standard ainsi que les balises auxiliaires Statamic..
Cette page se chargera avec les fichiers de modèle et de présentation par défaut que nous venons de configurer, mais si vous souhaitez en utiliser différents, vous pouvez les spécifier en tant qu'options dans la section YAML en haut à l'aide de _disposition et _modèle respectivement.
Si vous créez un serveur à la racine de votre répertoire Statamic:
php -S localhost: 7000
… Puis naviguez vers http: // localhost: 7000 dans votre navigateur, vous devriez voir la balise H1 avec notre message de bienvenue.
C’est tout ce que vous avez besoin de savoir pour créer des pages dans Statamic. Si vous construisez un site relativement statique, cela suffira. Mais pour de nombreux sites, nous devons pouvoir ajouter des données dynamiques, qui peuvent prendre la forme de billets de blog, d'articles de magasin ou, dans notre cas, de travaux sur les portefeuilles..
Il n'y a pas de base de données dans Statamic, donc ces types d'entrées sont stockés dans des fichiers Markdown, tout comme la page que nous venons de créer, bien que deux choses aient été faites pour introduire de manière subtile plusieurs fonctionnalités afin d'optimiser les choses et de le faire fonctionner dans l'administrateur.
Tout d'abord, vous pouvez nommer les fichiers avec un format de date spécial pour pouvoir les trier et les filtrer par date. Vous faites cela en pré-attendant le titre avec un année mois jour modèle. Si vous souhaitez créer un article nommé 'foobar', vous pouvez le nommer comme suit:
2013-09-15-foobar.md
Tous les paramètres requis par la publication sont placés dans la partie supérieure de la section précédant le contenu, puis le contenu est placé en dessous. Cela suit le format des pages comme indiqué ci-dessus.
Bien que ce soit plutôt cool, cela équivaut à entrer manuellement des publications dans une base de données d'un système traditionnel. Il y a une autre option!
Statamic est livré avec un très bon administrateur qui peut faire tout cela à votre place, mais pour le configurer, nous devons lui indiquer les champs que ce type d’entrée est censé avoir. Ceci est fait dans un fichier portant le nom approprié fields.yaml.
Donc, pour notre exemple, créons un dossier dans le répertoire _content nommé travaux, et à l'intérieur du travaux dossier Créons un fichier nommé fields.yaml. À l'intérieur de fields.yaml fichier, nous devons spécifier les propriétés que nos 'entrées' contiendront et les types individuels pour chacun de ces paramètres.
Vous pouvez soit spécifier votre groupe de champs (la liste des champs) dans _config / fieldsets / répertoire et extraire une définition, ou vous pouvez simplement entrer la définition ici (ou vous pouvez faire les deux pour étendre une définition existante). Pour notre exemple simple, je vais simplement mettre la définition ici car nous ne la réutiliserons nulle part:
type: date champs: langue: type: balises affichage: Programmation Langage requis: vrai description: type: affichage du texte: Description requis: faux lien: type: affichage du texte: Lien requis: vrai contenu: type: caché
La première propriété indique simplement à Statamic que nous souhaitons que ces fichiers d’entrée aient une propriété de date et soient nommés de manière appropriée. Ensuite, nous ouvrons un objet YAML nommé des champs contenant toutes les propriétés de nos entrées.
Le premier est le la langue domaine, qui si vous vous en souvenez est la taxonomie que nous avons créée dans le settings.yaml. À l'intérieur de chaque propriété, nous devons spécifier son type (ou par défaut une zone de texte), son texte d'affichage (qui utilisera par défaut le nom de la propriété) et si cela est requis. Vous pouvez définir d'autres options, notamment des instructions et la valeur par défaut. Vous pouvez afficher plus d'informations sur ces options sur le site Web de Statamic. Outre ces paramètres, différents types de champs peuvent avoir leurs propres options personnalisées..
Pour le la langue entrée, je le configure pour utiliser le étiquette type, ce qui vous permet de définir plusieurs tags pour cette option. C'est juste un type d'entrée différent pour entrer sa valeur dans l'admin. Vous pouvez afficher tous les différents types de champs dans la documentation de Statamic ou sur la feuille de triche officielle de Statamic sous «Types de champs»..
le la description et lien sont à peu près les mêmes. Ils seront tous deux des zones de texte, sauf qu'un sera requis et l'autre ne le sera pas. Outre les champs que vous spécifiez, toutes les entrées sont accompagnées d'un titre et d'un champ de contenu. Nous ne voulons pas vraiment d'un champ de contenu - dans nos travaux, ils seront plus comme des liens - je l'ai donc défini sur caché.
La dernière étape avant de passer à l’administrateur est de créer un page.md déposer à l'intérieur du travaux annuaire. Cela n’est pas obligatoire, mais l’administrateur essaiera d’obtenir le titre de ce type d’entrée à partir d’ici, c’est donc une bonne idée de le placer simplement. Pour ce faire, créez un page.md déposer à l'intérieur du travaux dossier avec juste le titre réglé sur 'Works':
--- titre: œuvres ---
Pour entrer dans l’administrateur, nous devons d’abord créer un utilisateur. C’est un simple fichier YAML à l’intérieur du config dossier. Le nom du fichier est le nom d'utilisateur que vous utiliserez pour vous connecter. Dans le fichier, vous configurez les détails et le mot de passe de l'utilisateur..
Créons un nouvel utilisateur avec un nom d'utilisateur de éditeur. Nous faisons cela en créant un fichier appelé editor.yaml à l'intérieur de la _config / utilisateurs / dossier. Insérez les données suivantes (sauf avec vos informations à la place des miennes):
--- prénom: Gabriel dernier nom: Manricks rôles: [admin] email: [email protected] mot de passe: mot de passe --- L'éditeur de ce portefeuille
La plupart de ces colonnes sont assez simples et je ne pense pas qu'elles nécessitent une explication. Le seul domaine qui mérite d'être mentionné est le rôles réglage. Actuellement admin est la seule option disponible, mais à l'avenir, vous pourrez ajuster les autorisations d'édition de l'utilisateur..
Il est également intéressant de mentionner que le mot de passe ne restera pas en texte brut. Après la première connexion, Statamic hachera le mot de passe avec un sel et inclura ceux-ci ici.
Tout ce qui suit les lignes pointillées sera stocké en tant que contenu pour cet utilisateur et pourra être utilisé comme une sorte de bio pour lui..
Enregistrez maintenant ce fichier et, si votre serveur Web est toujours en cours d'exécution, accédez à / admin dans votre navigateur. Cela ouvrira la console de connexion où vous pourrez entrer ces propriétés. La première fois que vous vous connectez, vous devrez le faire deux fois, une fois pour hacher le mot de passe et la deuxième fois pour vous connecter..
Une fois que vous êtes connecté, vous verrez une liste de nos pages. Inclus est notre page d'accueil ainsi que le type d'entrée «Works». Jetons un coup d'oeil à ce que notre déclaration de champs a fait pour nous. Clique sur le Créer lien à l'intérieur du Travaux bar.
Vous devriez voir un beau formulaire qui comprend tous les champs que nous avons spécifiés, ainsi que le titre. Essayez d'ajouter quelques articles pour le tester.
Avec quelques messages stockés, nous avons terminé la première ronde. Vous savez maintenant comment créer des pages, des thèmes, des utilisateurs et des entrées, c’est une excellente première étape. Mais Statamic a bien plus à offrir.
Avoir quelques articles créés est bien, mais ce qui serait mieux, c'est de pouvoir les afficher sur une page. Pour cela, nous devrons éditer le modèle par défaut.
Ce sera notre première véritable interaction avec le moteur de gabarit inclus, mais ne vous inquiétez pas, la conception intuitive de Statamic facilite la prise en main..
Pour afficher une liste complète des balises disponibles, vous pouvez consulter la documentation de Statamic. Tout ce dont nous avons besoin pour cet exemple est le les entrées balise, qui est utilisée pour extraire des entrées d’un dossier spécifique du répertoire _contenu annuaire. Il existe de nombreuses propriétés facultatives, vous permettant de filtrer par date ou par conditions telles que les taxonomies ou même les propriétés standard. Nous allons garder les choses simples et lister les propriétés par date (qui est la valeur par défaut).
Voici le nouveau modèle complet par défaut (templates / default.html):
Portefeuille
la langue | Titre - la description |
Dans ce code, nous créons une table et parcourons toutes les publications du répertoire 'works'. Ces types de balises de bloc, dans lesquelles vous placez plus de HTML à l'intérieur, affectent de nouveaux espaces réservés. En plus de fournir un accès à des éléments tels que tous les attributs de l'article, vous obtenez également des variables d'assistance spéciales qui peuvent vous indiquer des informations telles que l'index actuel ou le premier ou le dernier article. Nous n'utiliserons aucune de ces variables. Tout ce dont nous avons besoin est d’afficher le titre, la langue, la description et le lien. Cependant, si vous chargez la page dans votre navigateur, vous vous rendrez probablement compte qu'au lieu d'afficher la langue, il est simplement écrit "Array".
En effet, nous définissons cette propriété comme une balise type, ce qui signifie qu'elle peut contenir plusieurs langues. Ainsi, même si vous n’avez mis qu’une seule langue, celle-ci est toujours stockée dans un tableau. Heureusement, Statamic est livré avec des modificateurs.
Pour terminer ce guide, jetons un coup d’œil à quelques modificateurs qui nous permettront d’améliorer encore cette page.
Le premier et le plus gros problème est de faire apparaître la langue. Si vous jetez un coup d’œil à la feuille de triche Statamic, tout en bas à gauche, vous verrez une section Liste des raccourcis. Bien que techniquement, il ne soit pas un modificateur, Statamic vous permet d’ajouter ces mots à la fin d’une variable de liste et renvoie à la place une représentation sous forme de chaîne. Celui que je veux utiliser dans cette situation est la norme _liste assistant. Ce que cela va faire est de séparer plusieurs valeurs dans le tableau avec une virgule et un espace, et c'est ce que nous voudrions dans notre situation.
Pour l'essayer, remplacez le la langue tag avec language_list. Actualisez votre navigateur et il devrait maintenant afficher les langues correctement.
Ensuite, ajoutons un modificateur au titre pour le mettre en majuscule. Si vous avez déjà utilisé quelque chose comme le moteur de templates Smarty, cela fonctionne de la même manière. Vous ajoutez un tuyau à la fin du nom de la variable, puis vous ajoutez un modificateur. Dans notre exemple, il vous suffit de remplacer l'appel à Titre avec titre | supérieur et ceux-ci sont chaînables afin que vous puissiez continuer à ajouter des tuyaux indéfiniment.
Ajoutons maintenant quelques CSS pour styliser tout. Rappelez-vous, cela va dans le css / portfolio.css fichier:
body background: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; marge inférieure: 28 px; table police: 15px 'Coustard', serif; td padding: 10px 10px 0 10px; p margin-bottom: 15px; .lang p background: # CA9F53; couleur: #FFF; rembourrage: 3px 5px; text-align: right; .work text-align: left; .work a border-bottom: 1px solid # 000; texte-décoration: aucun; .title font-weight: 600; couleur: # 000; .desc color: # 666;
Et ces deux polices proviennent de Google Fonts, vous devrez donc ajouter le lien suivant en haut de votre fichier de présentation par défaut:
_nom du site layout_content
Si tout fonctionne, vous devriez voir la page suivante (sauf avec les œuvres que vous avez ajoutées):
Dans ce didacticiel, je vous ai expliqué tout le processus d'installation, de configuration, de création d'un nouveau type d'entrée et de création d'un thème personnalisé. C’est beaucoup de choses à faire et c’est seulement possible grâce à la facilité avec laquelle Statamic facilite les choses.
Nous avons déjà vu beaucoup de fonctionnalités et nous n’avons même pas parlé de la création de vos propres modules et de l’extension de Statamic avec PHP, mais je pense que le plus étonnant jusqu’à présent est que nous n’ayons pas écrit une seule ligne de PHP dans tout ce tutoriel! C'est quelque chose à vanter.
Je pense donc que la principale question que les gens pourraient avoir est: "Dois-je l'utiliser?" Ou "Qu'est-ce que cela devrait remplacer dans mon répertoire actuel?" Il est important de déterminer à quoi sert Statamic. Si vous construisez une nouvelle start-up et avez besoin de la flexibilité d'un framework à part entière, je suis sûr que vous pourrez le faire fonctionner sous Statamic, mais ce serait beaucoup de code personnalisé qui risquerait de compromettre le but recherché. Là où je pense que cela va prospérer, c’est comme une plateforme de blogs ou un CMS..
Venant d'un fond de WordPress, cela ressemble à un successeur direct. Il suit en théorie beaucoup de conventions identiques, mais elles sont toutes mises en œuvre de manière beaucoup plus intelligente. Comparer la quantité de code requise dans chacun devient une blague. À l'avenir, Statamic dispose d'une API incroyable pour la création d'étiquettes personnalisées, de crochets, de nouveaux types de champs et bien plus encore. Imaginez que Statamic le rend aussi simple et aussi simple à faire que vous le souhaiteriez..
J'espère que vous avez apprécié cet article. Si vous avez des questions, n'hésitez pas à me demander ci-dessous, sur Twitter @ gabrielmanricks ou sur le canal IRC de Tuts + web dev sur freenode (#nettuts)..
Accentsconagua