Contenu
- 01. Installer les dépendances
- 02. Construire le serveur
- 03. Montez l'application
- 04. Démarrez le serveur de développement
- 05. Créer une route de serveur
- 06. Retourner les articles du blog
- 07. Créer une page d'index
- 08. Récupérer les données des articles de blog
- 09. Afficher les résumés des articles
- 10. Style du conteneur
- 11. Définissez un emplacement>
- 12. Exposer les accessoires PostSummary
- 13. Afficher le résumé des articles de blog
- 14. Lien vers l'article de blog
- 15. Récupérez un message par slug
- 16. Erreur si le message n'est pas trouvé
- 17. Afficher le billet de blog
- 18. Affichez plutôt du HTML
- 19. Définir le titre de la page> valeur
- 20. Mise à jour du titre>
- 21. Ajouter un en-tête permanent
Sapper est un framework construit sur Svelte. Il se concentre sur la vitesse prête à l'emploi avec le rendu du serveur, le préchargement des liens et la possibilité de créer des travailleurs de service. Combiné avec Svelte, le résultat final est un site hautement personnalisable, ultra-rapide avec un faible encombrement.
Dans ce didacticiel, nous utiliserons Sapper pour créer un site de blog léger à l'aide de composants Svelte (voir comment démarrer un article de blog pour des conseils moins techniques sur les blogs). Svelte est un framework avec une différence. Il analyse le code au moment de la compilation et crée un ensemble de modules en JavaScript vanilla, ce qui évite le besoin d'un runtime. Si vous avez besoin d'aide supplémentaire pour les mises en page, consultez notre article sur la façon d'obtenir la mise en page de site Web parfaite. Ou pour d'autres options, consultez ces meilleurs créateurs de sites Web et n'oubliez pas que vous devrez également mettre en place votre service d'hébergement Web.
Téléchargez les fichiers du didacticiel sur FileSilo ici
01. Installer les dépendances
Tout d'abord, nous devons télécharger et installer les dépendances. Il repose sur Svelte pour fonctionner et nécessite un autre framework pour construire le serveur, mais le reste dépend de l'application en cours de construction. Dans ce cas, nous avons besoin de quelques packages pour aider à extraire les fichiers Markdown plus tard.
Téléchargez les fichiers du didacticiel (ci-dessus), trouvez-les sur la ligne de commande et installez les dépendances.
02. Construire le serveur
Sapper est construit en deux parties: le framework côté client et le rendu côté serveur de ce framework. Cela aide à obtenir cette augmentation de vitesse supplémentaire pour ceux qui utilisent des réseaux plus lents. Il est construit à l'aide de Node, ce qui permet au middleware Sapper de faire tout le gros du travail pour nous.
Ouvrez server.js et créez le serveur avec Express. En utilisant leurs recommandations, nous incluons compression réduire les fichiers que nous envoyons et sirv pour servir des fichiers statiques.
express () .use (compression ({seuil: 0}), sirv (“statique”, {dev}), sapper.middleware ()) .listen (PORT);
03. Montez l'application
Du côté client, nous devons indiquer à Sapper où monter l'application. Ceci est similaire aux DOM de React rendre ou Vue's $ monter méthodes. Dans client.js, démarrez Sapper et montez-le à la racine div> élément. Cet élément est inclus dans le fichier modèle, sur lequel nous reviendrons plus tard.
importer * en tant que sapeur depuis «@ sapeur / app»; sapper.start ({cible: document.getElementById (“racine”)});
04. Démarrez le serveur de développement
Une fois le serveur de base et les fichiers client configurés, nous pouvons démarrer le serveur de développement. Cela lance une compilation des fichiers serveur, client et service worker, et démarre sur le port 3000 par défaut. Chaque fois qu'un fichier change, il reconstruira la partie de l'application qui a changé.
Exécutez le serveur sur la ligne de commande. Gardez cette fenêtre ouverte pendant le développement du site.
05. Créer une route de serveur
Tout ce qui se trouve dans le répertoire «routes» se transforme en route pour l'application. Fichiers avec le .js l'extension deviendra ce que l'on appelle des routes de serveur. Ces routes n'ont pas d'interface utilisateur, mais sont demandées à la place par l'application pour récupérer des données. Dans notre cas, nous les utiliserons pour charger des articles de blog.
le routes / blog / index.json.js fichier créera le /blog.json point final sur notre serveur. Importez les articles de blog et créez du JSON à partir d'eux.
importer des messages depuis «./_posts.js»; const contents = JSON.stringify (posts.map (post => ({auteur: post.author, image: post.image, titre: post.title, slug: post.slug})));
06. Retourner les articles du blog
Le serveur achemine les fonctions d'exportation qui correspondent aux méthodes HTTP. Par exemple, pour répondre à une requête GET, nous exportons une fonction appelée obtenir à partir du fichier d'itinéraire du serveur. Créer un obtenir fonction qui répond avec les données que nous avons collectées à l'étape précédente au format JSON. Ouvert http: // localhost: 3000 / blog.json dans le navigateur et vérifiez que les messages arrivent.
fonction d'exportation get (req, res) {res.writeHead (200, {“Content-Type”: “application / json”}); res.end (contenu); }
07. Créer une page d'index
Les pages dans Sapper sont des composants Svelte normaux. Chaque composant est un seul fichier avec un .svelte extension, et contiennent toute la logique et le style pour se gérer. Tout JavaScript dont ce composant a besoin pour s'exécuter vivra dans un script> balise - comme n'importe quelle page HTML.
À l'intérieur routes / index.svelte, importez quelques autres composants Svelte que nous pouvons utiliser pour créer cette page. Exporter un des postes variable que nous remplirons plus tard.
script> importer le conteneur depuis «../components/Container.svelte»; importer PostSummary depuis «../components/PostSummary.svelte»; exportez les messages; / script>
08. Récupérer les données des articles de blog
Une fois la page configurée, nous pouvons commencer à importer des articles de blog (vous voudrez peut-être les sauvegarder dans le stockage en nuage). Nous devons le faire dès que la page est chargée. Pour que le serveur en soit conscient et demande ensuite ces données lors du rendu de la page, il doit aller dans un autre script context = "module"> étiqueter.
Sur le serveur, Sapper recherchera un précharge et attendez qu'elle se termine avant d'afficher la page. Ici, nous peuplons le des postes variable de l'étape précédente.
script context = "module"> exporter la fonction asynchrone preload () {const res = wait this.fetch ("blog.json"); const data = attendre res.json (); return {posts: data}; } / script>
09. Afficher les résumés des articles
Dans Svelte, les variables sont réactives par défaut. Cela signifie qu'au fur et à mesure de leur mise à jour, nos composants seront également mis à jour. Comme le des postes La variable contient maintenant un tableau d'articles de blog, nous pouvons les parcourir et les afficher.
Nous pouvons le faire en utilisant un #chaque bloquer. Ceux-ci répéteront ce qui se trouve à l'intérieur des crochets pour chaque élément d'un tableau. Au bas du composant, en dehors des balises, ajoutez le HTML pour afficher les articles.
Container> ul> {#each posts as post} li> PostSummary {... post} /> / li> {/ each} / ul> / Container>
10. Style du conteneur
Nous pouvons utiliser des composants pour contenir toute logique répétée et les utiliser partout où ils sont nécessaires - styles inclus. le Conteneur> Le composant ne fait actuellement rien, mais nous pouvons l'utiliser pour donner une largeur maximale au contenu qu'il contient.
S'ouvrir composants / Container.svelte, et ajoutez des styles dans un style> étiqueter. Tous les styles que nous appliquons à l'intérieur d'un composant sont limités à ce composant, ce qui signifie que nous pouvons utiliser un sélecteur générique.
style> div {marge: 0 auto; rembourrage: 0 1rem; largeur max: 50rem; } / style>
11. Définissez un emplacement>
Si un composant est conçu pour être le parent d'autres composants, nous avons besoin d'un moyen de transmettre ces composants. le emplacement> element fait exactement cela, et peut être placé n'importe où qui a du sens dans le balisage d'un composant.
Avec Conteneur>, nous emballons le contenu dans un style div>. Utiliser emplacement> à l'intérieur de div> pour laisser passer tout le reste.
12. Exposer les accessoires PostSummary
Tous les composants ne vont pas chercher des données. Lorsque nous chargeons les articles à partir du composant de la page principale, il peut être transmis aux composants qu'il rend via ses attributs.
Ouvert composants / PostSummary.svelte et définissez certains attributs en haut du fichier. Ceux-ci sont remplis par l'opérateur de diffusion que nous avons ajouté à l'étape 09.
script> exportation de l'auteur; exporter l'image de let; exporter let slug; export let title; / script>
13. Afficher le résumé des articles de blog
Lorsque les attributs sont renseignés, ils sont ensuite accédés comme n'importe quelle autre variable. En ayant des attributs séparés pour chaque partie du résumé de l'article, nous facilitons la lecture du balisage.
Au bas du composant, ajoutez du HTML pour créer le résumé. Les classes se rapportent aux styles prédéfinis.
article> div class = "post-image" style = "background-image: url ({image})" /> div class = "body"> div class = "author-image"> img src = {author.image} alt = {author.name} /> / div> div class = "about"> h1> {title} / h1> span class = "byline"> par {author.name} / span> / div> / div> / article>
14. Lien vers l'article de blog
Contrairement à des frameworks similaires tels que Next.js, Sapper fonctionne avec des liens d'ancrage réguliers. Au moment de la construction, il est capable de détecter les liens internes, et également de faire ses propres optimisations.
Mettez à jour le balisage de l'étape précédente en l'enveloppant dans un lien. Il n'est pas nécessaire de créer des chaînes de modèle pour composer l'URL slugée.
a rel = "prefetch" href = "/ blog / {slug}"> article>… / article> / a>
15. Récupérez un message par slug
Sapper est capable de créer des pages basées sur des paramètres d'URL. Dans notre cas, nous établissons un lien vers / blog / slug, ce qui signifie qu'il rend le composant à /routes/blog/[slugITED.svelte.
À l'intérieur de ce composant, récupérez les données du blog comme nous l'avons fait pour la page d'index. le paramètres object contient les paramètres de l'URL, qui dans ce cas est le slug.
script context = ”module”> exporter la fonction asynchrone preload ({params}) {const res = wait this.fetch (`blog / $ {params.slug} .json`); const data = attendre res.json (); } / script>
16. Erreur si le message n'est pas trouvé
Contrairement à la page d'index, il est possible qu'il n'y ait pas d'article de blog à l'URL. Dans ce cas, nous devrions afficher une erreur. De même que aller chercher, les précharge la méthode comprend également Erreur qui modifie la réponse à une page d'erreur à la place.
À la fin de la méthode de préchargement, affichez une erreur s'il n'y a pas de publication trouvée. Sinon, réglez le Publier variable pour la page.
if (res.status === 200) {return {post: data}; } else {this.error (res.status, data.message); }
17. Afficher le billet de blog
Une fois les données récupérées, nous pouvons maintenant afficher le message sur la page. Semblable au composant PostSummary, nous affichons chaque partie du contenu de l'article entre accolades. Au bas du composant, ajoutez du balisage à afficher sur la page.
article> Conteneur> div class = "title"> h1> {post.title} / h1> div class = "byline"> par {post.author.name} / div> / div> img class = "post-image" src = {post.image} alt = ”” /> {post.html} / Container> / article>
18. Affichez plutôt du HTML
En regardant la page maintenant, tout s'affiche correctement, à l'exception du contenu réel de la publication. La conversion de démarque génère du HTML, mais nous voyons cela imprimé sous forme de texte sur le message lui-même. Sapper a un analyseur HTML intégré pour ce cas. Placement @html en face d'elle utilisera cet analyseur.
19. Définir le titre de la page> valeur
Notre blog fonctionne correctement, mais quelques changements sont nécessaires pour le terminer. L'un de ceux-ci consiste à mettre à jour le titre> sur la page pour renommer l'onglet dans lequel il est affiché.
Svelte prend en charge un svelte: tête> élément, qui injecte quoi que ce soit à l'intérieur de celui-ci dans le tête> de la page. Utilisez cette option pour définir le titre du message comme titre>.
svelte: tête> titre> {post.title} | Blog / titre du sapeur> / svelte: head>
20. Mise à jour du titre>
Chaque page passe par un modèle afin de tamponner le HTML pour le reste de la page. C'est là que toutes les configurations telles que les importations de polices et les balises meta seraient entrées. Ouvrez template.html et ajoutez un hook pour le contenu du svelte: tête> élément de l'étape précédente. Ajoutez ceci juste avant la fermeture / tête> étiqueter.
head> […]% sapper.head% / head> La dernière chose que nous devons ajouter est une mise en page pour le blog. Au lieu d'encapsuler chaque page dans un composant, Sapper cherchera un fichier «_layout.svelte» pour faire ce travail à notre place. Dans _layout.svelte, importez le composant Header> et montrez-le en haut de chaque page. Il fournit un lien pratique vers la page d'accueil.
21. Ajouter un en-tête permanent
La dernière chose que nous devons ajouter est une mise en page pour le blog. Au lieu d'encapsuler chaque page dans un composant, Sapper recherchera un _layout.svelte fichier pour faire ce travail pour nous. À l'intérieur _layout.svelte, importez le composant Header> et montrez-le en haut de chaque page. Il fournit un lien pratique vers la page d'accueil.
script> importer l'en-tête de «../components/Header.svelte»; / script> main> En-tête /> slot /> / main>
Ce contenu est apparu à l'origine dans Web Designer.
- Composants Web: le guide ultime
- 30 extensions Chrome pour les concepteurs Web et les développeurs
- 52 outils de conception Web pour vous aider à travailler plus intelligemment en 2019
