Statamique est un CMS de fichier plat de Laravel. Quand j’ai commencé à l’utiliser il y a quelques années, j’ai été immédiatement vendu. Avec Statamic, j’ai pu créer des sites Web clients sur mesure plus rapidement et mieux, car il dispose des outils dont j’ai besoin chaque jour. Avec sa flexibilité et une belle interface utilisateur, pour moi, il est bien au-dessus de la concurrence.

Je me suis retrouvé à créer et à m’amuser. J’ai commencé à réutiliser du code, des modèles et des méthodes appropriés pour tous mes projets Statamic. Même si la plupart des sites Web sont faits sur mesure, ils partagent des principes similaires. Lorsque la version 3 attendue est sortie, j’ai décidé de réécrire mon sac d’astuces pour la version 3, de le regrouper et de le publier sous forme de kit de démarrage appelé Peak.

Le kit de démarrage

sommet est un kit de démarrage pour tous vos sites Statamic. Le kit est indépendant de la conception mais est livré avec des outils tels que Tailwind et AlpineJS. Il applique un flux de travail dans lequel vous pouvez créer tout ce que vous voulez aussi sèchement que possible.

Les points forts incluent un constructeur de page, une intégration SEO professionnelle complète, une implémentation personnalisable de la configuration Tailwinds et bien plus encore. L’objectif est de vous amener immédiatement sur le site Web de vos clients, car Peak peut facilement être étendu ou modifié pour répondre aux besoins du site Web de vos clients. Le but ultime est de nous amener à partager et à collaborer pour améliorer nos sites Web et nos outils. Le kit gagne en popularité et reçoit fréquemment des PR.

Si vous utilisez Tailwind et AlpineJS, c’est votre chemin vers le monde merveilleux de Statamic.

Plans, ensembles de terrain et puissance qu’ils apportent

Statamic propose une large gamme de types de champs. Cependant, au début, cela peut être accablant. C’est là que Peak entre en jeu. La plupart des fonctions sont créées à l’aide de ces champs natifs et des options de modèle. Cela signifie que vous pouvez éviter la corvée quotidienne de mise en place du même matériel pour chacun de vos sites Web.

Générateur de pages

Bien que vous puissiez créer différents modèles pour tous vos types de pages, l’idée est de rendre vos pages aussi modulaires que possible sans donner à vos clients autant de liberté pour ruiner la conception. Chaque élément de votre site Web peut être un sous-élément (une partie de modèle Statamic) et un bouton dédié dans le générateur de page. Cela vous permet d’ajouter des formulaires, des blocs de liens, des éléments de collection (par exemple, des nouvelles de dernière minute ou des éléments de portefeuille en surbrillance) ou du contenu long à vos pages.

Générateur de pages

Tous les blocs que vous ajoutez au générateur de page sont régulièrement espacés dans une seule grille de colonnes afin que vous n’ayez pas à penser aux marges du haut ou du bas. Comme pour tout, la grille dans les fichiers de configuration de Tailwind est personnalisable.

Il est important de noter qu’il ne s’agit pas d’un générateur de page que vous connaissez peut-être d’un CMS comme WordPress. Ce générateur de page vous offre une structure et un balisage sémantiquement valide. Le design dépend entièrement de vous.

L’un des blocs du générateur de page est le champ Barde. J’appelle cela un article dans le générateur de page, car il s’agit d’un contenu de longue durée. Le champ Bard offre une édition de texte limitée et possède ses propres jeux de champs. Peak est livré avec des expressions standard telles que des images réactives, des boutons, des incorporations vidéo, des guillemets ou une table des matières. Étant donné que le texte et les phrases que vous ajoutez à votre contenu de forme longue sont organisés sur leur propre grille, vous pouvez séparer les images du contenu et ajouter ce modèle à vos propres phrases de barde.

Ensembles d'articles

SEO

Bien que l’écosystème Statamic propose plusieurs options payantes fantastiques pour les plugins de référencement, obtenir une prise en charge complète du référencement avec des champs et des modèles natifs n’est pas si difficile. C’est ce que vous obtenez avec Peak. Options de site globales pour des fonctionnalités telles que JSON-ld, un plan de site XML généré automatiquement, des images OG standard et une intégration de tracker pour Fathom, Google et Cloudflare. De plus, vous pouvez activer une bannière de cookies en appuyant simplement sur un bouton. Vous n’avez plus à vous soucier d’un spécialiste du marketing vous demandant d’inclure Google Tag Manager. Comme nous utilisons le système de conception configurable de Tailwinds, la conception de la bannière de cookies et de tous les autres modèles prend en compte la marque de votre site Web par défaut.

Configuration globale du référencement

Les pages d’entrée prennent en charge toutes les bases telles que les balises OG, une méta-description, le basculement sans index, les ID JSON personnalisés et les URL canoniques. Si vous utilisez Multisite Peak, les balises hreflang correctes seront ajoutées automatiquement. Utiliser la pagination? Les liens de pagination sont automatiquement ajoutés à l’en-tête du document.

Vent arrière

Peak fait un usage intensif du vent arrière et des fichiers de configuration pour configurer votre site. J’ai divisé la configuration en plusieurs fichiers:

  • tailwind.config.js est le fichier de base dans lequel vous importez tous les autres fichiers de configuration et définissez des configurations telles que le nettoyage, le mode sombre et les variantes que vous souhaitez utiliser.
  • tailwind.config.peak.js Contient tous les utilitaires de Peak tels que la grille du site externe et les utilitaires de grille et de taille pour votre contenu de longue durée.
  • tailwind.config.typography.js Ici, vous ajustez le plugin optionnel pour la typographie de vent arrière. Par défaut, toutes les couleurs de site actuellement définies sont utilisées à partir de:
  • tailwind.config.site.js est le fichier de configuration dans lequel vous passerez la plupart de votre temps. Comment définir ici les couleurs et la typographie de votre projet actuel. Peak utilise des noms de couleurs comme neutral, primary, secondary, error, warning, et redTous les partiels mettent automatiquement à jour leur conception en fonction de votre configuration. Cela facilite la mise en route tout en conservant la possibilité d’être personnalisé.

Personnellement, je définis 100% de mon CSS personnalisé dans ces fichiers de configuration car il est logique pour moi de le faire de manière aussi centralisée que possible, de préférence dans une langue. Cependant, si vous préférez utiliser @applyIl existe un fichier CSS qui prend en charge les couches PurgeCSS qui sont prêtes à l’emploi.

Autres faits saillants

Avant de terminer, je pense qu’il y a encore quelques points à mentionner:

  • L’une des choses que je n’aime pas, c’est la création de formulaires et d’e-mails. En utilisant les outils natifs de Statamic, Peak propose des formulaires et des e-mails générés automatiquement avec un joli style standard. Les formulaires de Peak utilisent AJAX afin que vous puissiez utiliser la mise en cache statique complète pour que votre site Web fonctionne aussi rapidement que possible. Les e-mails peuvent être complètement localisés et prendre en charge toutes leurs variables spécifiques à l’emplacement de votre part .env ou des chaînes localisées.
  • Bien que je ne sois pas un expert en accessibilité, j’essaie de maintenir et de mettre en œuvre les meilleures pratiques dans tous les sous-domaines. Top appareils focus-visible et respecte les préférences de mouvement réduites. La même chose s’applique à la sémantique. Pas besoin de s’inquiéter des lecteurs d’écran et des modes de lecture lors de la configuration du générateur de page. Suivez les balises utilisées dans les modèles par défaut et votre contenu long devrait fonctionner parfaitement en mode lecture de Safari, par exemple.
  • Peak génère automatiquement les favoris pour les navigateurs modernes basés sur une image SVG.
  • Vous pouvez ajouter des redirections pour des URL inexistantes à partir de l’une des pages de configuration globale.
  • Ce kit contient toute une gamme d’autres éléments utiles tels que des partiels de typographie, des aides de vent arrière, des scripts standard pour Ploi et Forge, et un exemple de fichier Lisez-moi du projet. Voir par vous-même.

achèvement

C’est un plaisir de travailler avec Statamic au quotidien et c’est fantastique de travailler sur ce kit de démarrage. Pas seulement parce que je l’utilise, mais parce que d’autres l’utilisent aussi. C’est formidable de redonner à la communauté statamique que j’aime.

J’espère que cet article vous rendra curieux à propos de Statamic et comment il peut être utilisé pour créer des sites Web personnalisés. Pendant que vous vous amusez! Je vous exhorte à y jeter un œil et à voir à quel point cela vous rend productif. Ils ont plusieurs niveaux de prix, y compris un plan gratuit.

N’hésitez pas à me contacter Twitter ou E-mail si vous avez des questions.

statamic.com
sommet





Source link

Recent Posts