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!
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.
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.
/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.
/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.
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.
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.
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.
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.
Le composant de liste est crucial pour afficher les publications. Examinons d'autres composants essentiels.
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é.
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.
/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 .
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.
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;
`; 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>
));<global></global> composant Le<global></global> Le composant applique des styles à l'échelle du site.
// ... (code omis pour la concision) ...
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:
<global></global> Composants de style.(Liste des ressources et des crédits omis pour la concision; reportez-vous à la réponse originale de la liste complète.)
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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Base de données de restauration MySQL
Quels sont les frameworks Spring ?
Comment débloquer les restrictions d'autorisation Android
Langage C pour trouver le multiple le plus petit commun
Qu'est-ce que la rigidité de l'utilisateur
Quel est le code espace en HTML
utilisation de la commande head
Le but du niveau
Quelles sont les principales différences entre Linux et Windows
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
