Cet article a été lancé avant l'acquisition par Automattic de Frontity et de son équipe. Les fondateurs de Frontity prévoient de transformer le cadre en un projet axé sur la communauté, garantissant sa stabilité, son fonctionnement sans bug et sa documentation complète. Comme d'autres projets open source, la frontière restera gratuite, offrant des possibilités de contributions communautaires et d'améliorations. De plus amples détails sont disponibles dans leur FAQ.

Mon article précédent a détaillé la création d'un site WordPress sans tête avec la frontière et a brièvement examiné sa structure de fichiers. Cet article plonge dans le package @frontity/mars-theme (thème Mars), fournissant un guide étape par étape de la personnalisation. Le thème Mars est un excellent point de départ, étant le thème par défaut de la frontière, similaire aux vingt et à un vingt et à un.

Nous explorerons les composants principaux du thème Mars, y compris ses ?blocs de construction? et examiner les différents composants inclus dans le package. Nous couvrirons les fonctionnalités, le fonctionnement et le style avec des exemples pratiques.

Commen?ons!

Table des matières

• Introduction: Comprendre les éléments constitutifs de la frontière
• Section 1: Exploration de la structure du thème Mars
• Section 2: Utilisation du composant de la liste
• Section 3: Liens, menus et images en vedette
• Section 4: styliser un projet frontalier
• Section 5: Personnalisation du thème de la frontière Mars
• Section 6: Ressources et remerciements
• Conclusion: Réflexions et réflexions finales

Composants fondamentaux de la frontière

Revoyons la structure du fichier du projet Frontity à partir de l'article précédent, mettant en évidence les principaux composants de la frontière: frontity.settings.js , package.json et le dossier packages/mars-theme . Le fichier package.json fournit des informations cruciales de projet, y compris le nom, la description, l'auteur et les dépendances. Les packages clés comprennent:

• frontity : Le package principal contenant des méthodes de développement d'applications de frontière et la CLI.
• @frontity/core : gère le regroupement, le rendu, la fusion, le transport et le service. L'accès direct n'est généralement pas nécessaire pour le développement d'applications. Une liste complète se trouve dans la documentation de la frontière.
• @frontity/wp-source : se connecte à l'API WordPress REST, récupérant des données pour le thème Mars.
• @frontity/tiny-router : gère window.history and Routing.
• @frontity/html2react : convertit HTML en réaction, en utilisant des processeurs pour remplacer les sections HTML par des composants React.

Le noyau de la frontière, ou @frontity/package (également appelé "bloc de construction"), inclut les bibliothèques de composants React utiles dans @frontity/components , exportant des composants comme Link , Auto Prefetch , Image , Props , Iframe , Switch et autres fonctions et objets. Des descriptions détaillées et des informations de syntaxe se trouvent dans l'API de référence du package.

La documentation de la frontière explique le processus de démarrage du projet: Tous les packages définis dans frontity.settings.js sont importés par @frontity/file-settings , et leurs paramètres et exportations sont fusionnés par @frontity/core dans un seul magasin. Ce magasin permet d'accéder à l'état et les actions de différents packages pendant le développement à l'aide de @frontity/connect , le gestionnaire d'état de Frontity.

Ensuite, nous allons examiner comment ces blocs de construction sont utilisés dans le thème Mars pour créer un projet de frontière fonctionnelle avec un point de terminaison WordPress sans tête.

Section 1: Comprendre la structure du thème Mars

Avant la personnalisation, nous familiariser avec la structure de fichiers du thème Mars ( @frontity/mars-theme ):

 <code>packages/mars-theme/ |__ src/ |__ index.js |__ components/ |__ list/ |__ index.js |__ list-item.js |__ list.js |__ pagination.js |__ featured-media.js |__ header.js |__ index.js |__ link.js |__ loading.js |__ menu-icon.js |__ menu-model.js |__ menu.js |__ nav.js |__ page-error.js |__ post.js |__ title.js</code>

Les composants clés du thème Mars sont: /src/index.js , src/list/index.js et src/components/index.js . La documentation de la frontière fournit des explications détaillées sur la fa?on dont ces composants sont définis et interconnectés. Concentrons-nous sur les trois plus importants: racine, thème et liste.

Composant racine du thème ( /src/index.js )

Le fichier src/index.js (la racine du thème) est crucial. Il sert de point d'entrée, ciblant un<div> dans le balisage du site pour injecter les racines de tous les packages installés. Un thème de frontière exporte une <code>root et d'autres packages nécessaires dans le DOM. La documentation de la frontière illustre ceci à l'aide de modèles d'extensibilité de l'emplacement et de remplissage. Un exemple du package de thème Mars montre comment il initialise le composant racine:

 // Mars-thème / src / composants / index.js
// ... (code omis pour la concision) ...

Le composant racine exporte des packages, y compris roots , fills , state , actions et libraries . Plus de détails sur le composant racine sont dans la documentation de la frontière.

Composant de thème ( /src/components/index.js )

Le composant de thème de frontière est le principal composant de niveau racine exporté par l'espace de noms de Theme . Il est enveloppé avec la fonction @frontity/connect , offrant un accès à state , actions et des accessoires libraries . Cela permet au composant de thème de lire l'état, d'utiliser des actions et d'utiliser du code à partir d'autres packages.

 // Mars-thème / src / composants / index.js
// ... (code omis pour la concision) ...

Cet exemple, à partir du thème Mars /src/components/index.js , utilise state.source.get() pour récupérer des données pour le rendu des composants comme la liste et le poste.

Section 2: Travailler avec le composant de la liste

La section précédente couvrait les composants au niveau du thème. Maintenant, examinons un composant spécifique: liste.

Le composant de liste est exporté par src/components/list/index.js , à l'aide de @loadable/components pour le fractionnement de code. Le composant se charge uniquement lorsqu'un utilisateur considère une liste; Il ne rendra pas lors de la visualisation d'un seul message.

Affichage des listes de messages

Le composant src/components/list/list.js rend des listes de publications à l'aide de state.source.get(link) et de son champ items .

 // src / composants / list / list.js
// ... (code omis pour la concision) ...

La fonction connect donne accès à l'état mondial. list-item.js et pagination.js sont également importés.

Paginage d'une liste de messages

Le composant Pagination ( src/components/list/pagination.js ) permet aux utilisateurs de naviguer entre des pages de publications.

 // src / composants / liste / pagination.js
// ... (code omis pour la concision) ...

La fonction connect accorde l'accès à l'état mondial et aux actions.

Affichage des messages uniques

Le composant Post affiche des messages et des pages uniques. La structure est similaire, sauf que les publications comprennent des métadonnées (auteur, date, catégories, etc.).

 // src / composants / post.js
// ... (code omis pour la concision) ...

Le rendu conditionnel garantit que les métadonnées sont affichées uniquement pour les publications, et les images en vedette sont affichées en fonction des paramètres de thème.

Section 3: Liens, menus et images en vedette

Le composant de liste est crucial pour afficher les publications. Examinons d'autres composants essentiels.

Le composant de liaison ( src/components/link.js )

Le composant MarsLink ( src/components/link.js ) est un wrapper autour du composant @frontity/components/link .

 // src / composants / link.js
// ... (code omis pour la concision) ...

Il comprend un gestionnaire pour fermer le menu mobile lorsqu'un lien est cliqué.

Menu de frontière ( src/components/nav.js )

Le composant Nav ( src/components/nav.js ) itère sur les éléments de menu définis dans frontity.settings.js ou l'état de frontière, les URL correspondant et l'affichage des composants dans l'en-tête.

 // src / composants / nav.js
// ... (code omis pour la concision) ...

La fonction connect donne accès à l'état. Des composants de menu supplémentaires ( menu.js et menu-modal.js ) sont fournis pour les vues mobiles.

Composant d'image en vedette ( /src/components/featured-media.js )

Les médias en vedette sont définis dans le theme.state.featured de la composante racine.State.Férée. Le code complet est dans /src/components/featured-media.js .

Section 4: styliser un projet frontalier

Le style en frontière diffère de WordPress. La frontière fournit des composants réutilisables construits avec des composants stylisés et des émotions, une bibliothèque CSS-in-JS.

Utilisation de composants stylisés

Les composants stylisés sont créés à l'aide de la fonction styled de l'émotion. Par exemple:

 // Création du composant de style bouton
import {Styled} de "Frontity";

const Button = Styled.div`
  Contexte: LightBlue;
  Largeur: 100%;
  Texte-aligne: Centre;
  Couleur: blanc;
`;

Utilisation d'un accessoire CSS

L'hélice css permet un style en ligne à l'aide de littéraux de modèle.

 / * En utilisant comme CSS Prop * /
import {CSS} de "Frontity";

const PinkButton = () => (
  <div css="{css`background:" pink>
    Mon bouton rose
  </div>
));

En utilisant le<global></global> composant

Le<global></global> Le composant applique des styles à l'échelle du site.

 // ... (code omis pour la concision) ...

Section 5: Personnalisation du thème de la frontière Mars

Cette section montre la personnalisation du thème Mars. (Exemples détaillés et extraits de code omis pour la concision; reportez-vous à la réponse d'origine pour les exemples de code complets.) Les personnalisations de clés incluent:

• Renommer le package de thème.
• Refactorisation de la navigation avec le menu dynamique a récupéré (en utilisant le plugin WP-Rest-API V2).
• Modification de la structure des fichiers pour une meilleure organisation.
• Ajout d'un composant de pied de page personnalisé.
• Personnalisation de l'en-tête du thème.
• Ajout<global></global> Composants de style.
• Mise en ?uvre de la typographie fluide.
• Ajout de webfonts.
• Pages et messages de style (y compris les styles de blocs Gutenberg).

Section 6: Ressources et remerciements

(Liste des ressources et des crédits omis pour la concision; reportez-vous à la réponse originale de la liste complète.)

Conclusion: Réflexions et réflexions finales

Cette exploration de la frontière et de son thème Mars met en évidence sa convivialité débutante, son faible entretien et sa compatibilité avec les thèmes de bloc expérimental. Cependant, les co?ts d'hébergement actuels et les zones d'amélioration de la documentation sont notés. Une exploration plus approfondie du développement de sites sans tête à l'aide de Gatsby et de la frontière, ainsi que l'évolution des thèmes de blocs WordPress, est prévue.