Au début, j'allais titre cet article pirater un composant de routage dans Jekyll lorsqu'il est hébergé sur les pages GitHub avec Markdown, Liquid et Yaml . Évidemment, c'est un peu long, donc j'ai dû le raccourcir. Quoi qu'il en soit, le point ne change pas: Jekyll n'a pas une sorte de routeur, et je pense que j'ai trouvé une solution pas si terrible pour imiter une.
mais les premières choses d'abord: je viens d'un fond syfony, donc par router Je veux dire un composant qui mappe URL aux noms - a.k.a. routes - afin que vous puissiez changer en toute sécurité une URL sans avoir à ramper votre base de code pour mettre à jour tous les liens se dirigeant vers l'emplacement obsolète.
Je travaille actuellement dur sur les documents de Sassdoc V2 (non encore publié, au moment de la rédaction de cet article). Nous avons pas mal de contenu; Plus de 20 pages se divisent sur 4 sections différentes contenant de nombreux exemples de code et références croisées.
à quelques reprises lors de la réécriture, je voulais changer une URL. Le problème est que lorsque je change une URL, je dois mettre à jour tous les liens qui se dirigent vers cette URL si je ne veux pas qu'ils soient brisés. Ramper plus de 20 pages pour s'assurer que toutes les URL sont bien est loin d'être idéale…
C'est pourquoi nous avons besoin d'un composant de routage. Ensuite, nous référerions les URL par leur nom plutôt que par leur chemin, nous permettant de changer un chemin tout en gardant le nom parfaitement valide.
Alors, de quoi avons-nous besoin pour que cela fonctionne? Si vous exécutez Jekyll mais que vous ne vous limitez pas au mode sûr (ce qui est malheureusement le cas lorsque vous utilisez des pages GitHub pour l'hébergement), vous pouvez sûrement trouver / créer un plugin Ruby pour le faire. Ce serait la meilleure solution car c'est généralement quelque chose géré par un langage côté serveur.
Maintenant, si vous hébergez votre site sur les pages GitHub, ce qui est le plus souvent le cas qu'avec Jekyll, vous ne pouvez pas utiliser les plugins et vous ne pouvez pas étendre le noyau de Jekyll avec du code rubis personnalisé, vous finissez donc par pirater une solution avec ce qui est disponible: Liquide et marquage.
L'idée principale est d'avoir un fichier contenant tous nos itinéraires mappés sur des URL réelles. Heureusement, Jekyll nous permet de définir des variables globales personnalisées via des fichiers YAML / JSON / CSV stockés dans le dossier _data, accessible plus tard via Site.Data.
Pour ajouter un peu de sucre syntaxique sur le dessus, nous allons créer des références de lien de marque qui permettront une syntaxe plus conviviale - mais n'allons pas trop vite trop rapidement.
Le point du routeur est d'exposer les routes (a.k.a. noms ) mappés sur les URL (un à un). Il est possible de créer des fichiers YAML / JSON / CSV dans le dossier _data de tout projet Jekyll, alors allons avec un fichier YAML nommé Routes.yml:
home: "/" about: "/about-us/" faq: "/frequently-asked-questions/" repository: "https://github.com/user/repository"
Vous avez peut-être noté que nous ne sommes bien sûr pas limités aux liens internes. Nous pouvons totalement définir des itinéraires pour les URL externes afin d'éviter de les taper encore et encore s'ils ont tendance à apparaître régulièrement. Dans le même sens, nous nous sommes arrêtés à 4 itinéraires pour notre exemple, mais le routeur pourrait contenir des centaines de itinéraires.
Parce que le fichier est en _data, nous pouvons accéder à son contenu à peu près n'importe où avec Site.data.
---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).Comme vous pouvez le voir, nous ne nous référons plus aux URL, mais les routes à la place. Ce n'est pas magique, il dit seulement à Jekyll d'accéder aux variables globales stockées sur le chemin donné (par exemple site.data.routes.faq).
Maintenant, si le référentiel n'est plus hébergé sur GitHub ou l'URL de la page "About Us" est maintenant / à propos /, ne vous inquiétez pas! En mettant à jour le routeur, nous le faisons fonctionner sans avoir à revenir sur nos pages pour mettre à jour nos liens.
À ce stade, nous avons un routeur fonctionnel nous permettant de modifier une URL sans avoir à ramper notre site pour corriger les liens cassés. Vous pouvez donc dire que c'est déjà assez cool. Cependant, devoir taper site.data.routes.faq n'est pas très pratique. Nous pourrions sûrement le rendre un peu plus élégant!
oui et non. Au début, j'ai pensé à construire une petite fonction () en acceptant un nom de clé et en renvoyant la valeur stockée sur site.data.routes.
Ensuite, j'ai pensé à une fonctionnalité Markdown que je n'ai jamais utilisée auparavant: références de liaison. C'est ainsi qu'un lien est représenté dans Markdown:
home: "/" about: "/about-us/" faq: "/frequently-asked-questions/" repository: "https://github.com/user/repository"
Vous pouvez également définir le lien pour se diriger vers une référence - qui est complètement invisible au fait, définie n'importe où dans la page, comme ainsi:
---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).Remarque: Les parenthèses sont remplacées par des supports lors de l'utilisation d'une référence plutôt que d'une URL.
Cela pourrait vous permettre d'avoir tous vos liens définis au même endroit (en bas par exemple) plutôt que partout dans le document. Je dois dire que je n'ai pas beaucoup utilisé cette fonctionnalité, mais dans ce cas, il est utile.
L'idée est de les références de liaison automatiquement de notre routeur afin que nous puissions utiliser nos itinéraires comme référence dans n'importe quel fichier. Il se révèle étonnamment facile de le faire en liquide:
[I am a link](http://link.url/)
En ajoutant ceci pour la boucle n'importe où dans la page, cela demande à Jekyll de le traiter comme du code liquide, qui sera ensuite traité comme des références de marque. Ainsi, par exemple, et revenant à notre exemple précédent, nous pourrions faire:
[I am a link][id_reference] [id_reference]: http://link.url
Maintenant, nous parlons, non? Le seul problème est d'avoir à inclure cette boucle dans n'importe quelle page. Au début, j'ai pensé à l'ajouter dans la mise en page, donc il est automatiquement ajouté à n'importe quelle page en utilisant la disposition pertinente. Le problème est que les dispositions ne sont pas traitées comme Markdown dans Jekyll, donc les références sont réellement visibles au bas du DOM. Pire encore, ils ne sont pas utilisables dans nos pages car ils n'ont pas été traités comme Markdown… trop mal.
Cependant, nous pouvons toujours faire quelque chose pour le rendre légèrement meilleur. Nous pouvons mettre cette boucle dans un partiel liquide et inclure le partiel dans chaque page plutôt que de copier la boucle. Disons que nous créons un itoutes.html partiel dans le dossier _includes:
# _includes/route.html
{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}Et puis, dans notre page:
---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository][repository].
Or read the section dedicated to [Frequently Asked Questions][faq].
{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}Remarque: vous pouvez inclure le partiel n'importe où dans la page, pas seulement en haut. Vous pouvez le dire totalement comme la toute dernière ligne du fichier.
C'est les gens, nous avons piraté un petit composant de routage en mode de sécurité Jekyll. Maintenant, quels sont les inconvénients de cela? Il y en a quelques mineurs:
Le composant de routage de Jekyll est crucial car il détermine la structure des URL de votre site. Il est responsable de la cartographie de chaque page à une URL spécifique, ce qui est essentiel pour la navigation du site et le référencement. En piratant le composant de routage, vous pouvez personnaliser la structure URL de votre site en fonction de vos besoins spécifiques, améliorant l'expérience utilisateur et la visibilité des moteurs de recherche.
Jekyllll Vous permet de personnaliser votre structure URL grâce à l'utilisation des permaliens. Vous pouvez spécifier un permalien personnalisé dans la matière frontale de votre message, qui remplacera la structure d'URL par défaut. Cela vous permet de créer des URL plus descriptives et conviviales, qui peuvent améliorer l'expérience de référencement et d'utilisateur de votre site.
Jekyll est un simple , Générateur de sites statique, parfait pour les sites personnels, de projet ou d'organisation. Il est incroyablement flexible et prend en charge les structures, les thèmes, les plugins, les plugins, etc. De plus, parce qu'il génère des sites statiques, il est incroyablement rapide et sécurisé par rapport aux plates-formes CMS traditionnelles.
Jekyll prend en charge une large gamme des plates-formes de déploiement tierces, y compris les pages GitHub, Netlify, etc. Pour déployer votre site, vous devrez le construire localement, puis appuyez sur les fichiers statiques générés vers la plate-forme choisie. Chaque plate-forme a son propre processus de déploiement spécifique, alors assurez-vous de vérifier leur documentation pour des instructions détaillées.
Il existe de nombreux sites Web impressionnants conçus avec Jekyll , allant des blogs personnels aux grands sites d'organisation. Certains exemples incluent le site Web officiel de Jekyll, les pages GitHub et bien d'autres. Vous pouvez trouver une vitrine de sites Web Jekyll sur le site officiel de Jekyll.
CloudFlare Pages est une plate-forme Jamstack pour les développeurs Frontend pour collaborer et déployer Sites Web. Il est très compatible avec Jekyll et offre un processus de déploiement simple et rationalisé. Vous pouvez connecter votre référentiel GitHub aux pages CloudFlare, puis il construire et déployer automatiquement votre site chaque fois que vous appuyez sur votre référentiel.
L'officiel Le site Web Jekyll est une excellente ressource pour en savoir plus sur Jekyll. Il propose une documentation complète, des tutoriels et une vitrine de sites Web Jekyll. De plus, de nombreuses ressources communautaires sont disponibles, y compris des forums, des blogs et des référentiels GitHub.
Jekyll prend en charge une large gamme de plugins qui peuvent ajouter de nouvelles fonctionnalités et fonctionnalités à votre site. Pour ajouter un plugin, vous devrez l'installer, puis l'ajouter au fichier _config.yml de votre site. Certains plugins peuvent également nécessiter une configuration supplémentaire, alors assurez-vous de vérifier la documentation du plugin pour des instructions détaillées.
Jekyll est construit avec Ruby, mais il peut être utilisé avec d'autres langages de programmation grâce à l'utilisation de plugins et d'intégations. Par exemple, vous pouvez utiliser Jekyll avec JavaScript pour ajouter des fonctionnalités dynamiques à votre site, ou avec des préprocesseurs CSS comme SASS pour rationaliser votre processus de style.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
