Accentsconagua
Share
Une des nouvelles fonctionnalités remarquables de Jekyll est la possibilité de créer des thèmes officiels sous la forme de joyaux Ruby. Les utilisateurs de Jekyll peuvent installer ces thèmes pour personnaliser facilement leur blog ou leur site Web, leur permettant ainsi de gérer leur contenu..
Avant cette nouvelle fonctionnalité de thème, Kezz Bracey avait écrit un excellent tutoriel sur la création d'un thème Jekyll. Dans ce tutoriel, nous allons prolonger le message de Kezz en convertissant notre modèle en un joyau officiel de Jekyll..
La catégorie Jekyll sur Themeforest regroupe des thèmes allant de 16 $ à 29 $. Pourquoi ne pas soumettre le vôtre, le tout emballé comme un joyau Ruby?
Thèmes Jekyll sur ThemeforestAvant de commencer, je vous recommanderais de lire le didacticiel précédent. Je suppose que vous avez déjà un thème Jekyll créé à l'aide de la méthode de Kezz ou même un site Jekyll bien écrit que vous souhaitez convertir en thème officiel Jekyll..
Vous devrez utiliser la ligne de commande lorsque vous travaillerez sur votre thème Jekyll, mais encore une fois, Kezz vous a couvert.!
Ouvrez votre outil de ligne de commande et assurez-vous que la dernière version de Jekyll est installée (à la date de cet article, c'est la version 3.3) en utilisant les éléments suivants:
$ gem installer jekyll
Vous aurez également besoin de Bundler, un joyau pour gérer d’autres joyaux. J'expliquerai pourquoi vous en aurez besoin plus tard. Vous pouvez l'installer en utilisant:
$ gem install bundler
Enfin, vous devrez créer un compte RubyGems.org. Cela vous permet de transférer votre thème dans leur registre afin que les autres utilisateurs de Jekyll puissent le télécharger et l’utiliser..
Pour nous aider à démarrer, Jekyll a une commande qui permet de créer un nouveau thème. Dans votre outil de ligne de commande, localisez le répertoire dans lequel vous souhaitez travailler et utilisez la commande suivante pour créer les fichiers de base de votre thème:
$ jekyll nouveau-thème génial-jekyll-thème
Vous devriez voir quelque chose comme la liste ci-dessous dans votre dossier de travail:
awesome-jekyll-theme / _includes / _layouts / default.html page.html post.html _sass / assets / Gemfile LICENSE.txt awesome-jekyll-theme.gemspec README.md
le _layouts /, _includes / et _toupet/ les dossiers sont les mêmes que ceux que vous verriez dans un projet Jekyll normal, contenant toutes vos mises en page, les fichiers "includes" (ou "partiels") et Sass.
le les atouts/ le dossier est pour les fichiers que vous voulez sortie sur le site de l'utilisateur. Par exemple, JavaScript, fichiers d’image ou de style. Vous placeriez normalement ces fichiers dans js /, css / ou images/ Dossiers.
awesome-jekyll-theme.gemspec est le fichier qui décrit votre thème de gemme. Voici où vous pouvez lister le nom, la version, une description, une page d'accueil et une liste de gemmes pour votre gem thème.
le Gemfile est pour Bundler, que nous avons mentionné auparavant. Ceci relie les gemmes énumérées dans votre .gemspec fichier avec Bundler dans votre outil de ligne de commande. Nous utiliserons Bundler plus tard pour tester votre thème..
Finalement, le LISEZMOI.md et LICENSE.txt sont là pour documenter votre thème et pour fournir une licence appropriée. Vous connaissez probablement ces fichiers si vous avez déjà créé un projet GitHub.
Remarque: Il est important de documenter votre thème de manière approfondie. Ainsi, les personnes souhaitant utiliser votre thème pourront le faire facilement et utiliser les options et les commandes que vous avez fournies..
Etant donné qu'un projet Jekyll a une structure de fichier assez similaire à un thème Jekyll, vous pouvez continuer et copier la plupart de vos fichiers. Vous voudrez probablement écraser les fichiers de mise en page préexistants fournis avec le thème de base. Donc, tous vos fichiers de mise en page doivent aller dans le _layouts / dossier, votre inclut dans le _includes / dossier, et vos fichiers Sass dans le _toupet/ dossier dans le thème de base que vous avez créé.
Allusion: Nouveau chez Sass? Découvrez ce cours par Adi Purdila, 14 jours pour apprendre le sass
Vous devrez placer vos principaux styles, JavaScript et vos éléments graphiques dans le les atouts/ dossier. Il s'agit d'un dossier de clés pour la thématique Jekyll car il s'agit du seul répertoire qui apparaîtra sur le site des utilisateurs finaux. Vous pouvez vous retrouver avec un dossier d'actifs qui ressemble à ceci:
assets / styles.scss scripts.js theme-logo.png
À son tour, vous devrez mettre à jour les chemins dans votre code pour refléter ce changement de chemin. Par exemple, css / styles.scss changera à assets / styles.scss.
Allusion: Pour vous assurer que vos chemins sont corrects dans votre thème, vous pouvez vérifier relative_url et absolu_url qui ont été récemment ajoutés à Jekyll.
le .gemspec Le fichier est conçu pour fournir des informations essentielles sur votre bijou de thème. Le thème de base de Jekyll est fourni avec ce fichier, mais vous devrez remplacer les exemples de valeurs par les vôtres. Voici un exemple .gemspec fichier:
# coding: utf-8 Gem :: Specification.new do | spec | spec.name = "awesome-jekyll-theme" spec.version = "0.0.2" spec.authors = ["David Darnes"] spec.email = ["[email protected]"] spec.summary =% q Une brève explication de mon thème génial de gemmes. Spec.description = "Une explication plus longue de mon thème génial de gemmes qui ne correspond pas à mon résumé." spec.homepage = "https://alembic.darn.es" spec.license = "MIT" spec.files = git ls-fichiers -z.split ("\ x0"). select | f | f.match (% r ^ (actifs | _layouts | _includes | _sass | LICENSE | README) i) spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0" spec.add_development_dependency "jekyll", "~ > 3.3 "spec.add_development_dependency" bundler "," ~> 1.12 "fin
Vous trouverez ci-dessous un aperçu de ce que j'ai changé dans ma .gemspec fichier:
le prénom devrait être le nom de votre thème, qui devrait correspondre à la .gemspec nom de fichier. le version devrait être le dernier numéro de votre gem thème. le auteurs peut être une liste de personnes, mais, pour l'instant, ce n'est que moi qui développe ce thème. email devrait être le même email que vous avez signé pour RubyGems.org.
le résumé et la description devrait être des explications courtes et longues respectivement de votre thème gem. Vous pouvez soit définir le page d'accueil à une démonstration en direct du thème ou même au dépôt GitHub dans lequel réside.
le Licence doit correspondre à la licence que vous avez fournie dans le joyau à thème (le LICENSE.txt fichier). le des dossiers la valeur doit rester inchangée car cela marque les fichiers et les dossiers qui seront utilisés dans votre gem thème final.
La dernière partie de la .gemspec le fichier est une liste de gemmes qui sont nécessaire afin que votre thème fonctionne correctement. Dans mon exemple, je n'ai besoin que d'une gemme pour s'exécuter: jekyll-seo-tag. Les autres gemmes énumérées, Jekyll et fagot, sont développement gemmes et ne sont nécessaires que lorsque quelqu'un développe le thème gem.
Assurez-vous d’ajouter dans ce fichier toutes les gemmes dont vous avez besoin pour votre thème. Vous pouvez trouver une liste complète des plugins de Jekyll sur leur site.
Maintenant que nous avons nos fichiers de thèmes et notre .gemspec fichier a été rempli, nous pouvons maintenant effectuer des tests initiaux. Cependant, nous allons avoir besoin de quelques exemples de contenu, alors copiez le _config.yml à partir de votre ancien thème de modèle, avec du contenu de démarques. Un index.md Un fichier avec du contenu devrait suffire pour un premier test, mais vous pouvez également ajouter un exemple de publication. Le blogging est l’une des fonctionnalités clés de Jekyll, ce serait donc une bonne idée de le tester..
Remarque: Assurez-vous que votre mise en page a une mise en page sélectionnée ou vous risquez de ne pas voir le thème correctement lorsque vous l'exécutez en local.
Rappelez-vous que nous avons installé Bundler et que Gemfile dans la base de notre répertoire de thèmes? Bundler utilise Gemfiles pour gérer les gems dans les projets. Si vous ouvrez ce fichier, vous verrez ce qui suit:
source "https://rubygems.org" gemspec
Ce fichier ne fait que dire à Bundler de rechercher sur RubyGems.org les gemmes de votre .gemspec fichier. Alors, dans cet esprit, testons votre thème.
Dans votre outil de ligne de commande, utilisez la commande ci-dessous pour installer toutes les gemmes nécessaires à votre gem thème:
$ bundle install
Cela devrait installer tous les thèmes dans votre .gemspec, qui, dans mon exemple, serait juste jekyll-seo-tag. Maintenant, nous pouvons exécuter le thème localement en utilisant:
$ bundle exec jekyll servir
Vous devriez alors pouvoir visualiser votre thème à l'adresse http: // localhost: 4000. Si une erreur se produit, c'est peut-être parce qu'il vous manque une gemme dans votre .gemspec fichier.
Remarque: Vous devrez peut-être ajouter des pierres précieuses à votre liste blanche _config.yml fichier, si vous ne l'avez pas déjà fait, ainsi que de les indiquer dans votre .gemspec. Si vous avez du mal à comprendre Jekyll, Guy Routledge a créé un excellent parcours pour Tuts + sur la création de sites Web statiques avec Jekyll..
Ensuite, vous passerez un certain temps à peaufiner votre thème pour s’assurer qu’il fonctionne avec une variété de formats et de tailles de contenu. Vous pouvez également envisager des options de personnalisation, soit via un paramètre global dans _config.yml ou sur des pages séparées à l'avant.
L'utilisateur a la possibilité d'écraser n'importe quel fichier de votre bijou de thème avec son propre fichier sur son propre site Jekyll. Par exemple, si vous avez _includes / header.html dans votre thème bijou, le thème utilisateur peut écraser ce fichier avec _includes / header.html sur leur propre site. Vous voudrez peut-être envisager de rendre votre thème suffisamment flexible pour que l'utilisateur du thème puisse facilement écraser vos fichiers afin de rendre leur propre site plus unique..
Si vous personnalisez votre thème, vous aurez besoin d'une documentation complémentaire. Documenter votre bijou de thème est très important. Si la documentation est médiocre, les utilisateurs ne voudront pas utiliser le thème..
Voici quelques éléments que j'attendrais de voir dans la documentation d'un thème:
Tout cela peut être listé dans le LISEZMOI.md, qui a été créé lorsque nous avons généré le thème de base Jekyll. Lorsque le thème est transféré sur RubyGems.org, le fichier lisez-moi est traité et affiché sur la page de pierre précieuse pour que les personnes puissent s'y reporter..
Avec votre documentation, je vous recommanderais de fournir un contenu de démonstration pour inciter les gens à commencer avec votre thème. UNE _config.yml, index.md et un exemple de fichier post, similaire à ceux que vous utilisiez précédemment pour tester votre thème, ainsi qu’un Gemfile devraient suffire. Bien que l'utilisateur ne soit obligé d'ajouter la gemme à son fichier Gemfile, il serait très utile de fournir un exemple de configuration à télécharger et à utiliser immédiatement..
Vous devez fournir une capture d'écran pour votre thème, comme indiqué dans la documentation officielle de Jekyll, avec le nom screenshot.png. Non seulement cela permettra aux gens de voir comment votre thème est perçu en un coup d'œil, mais cela assurera également une cohérence entre tous les thèmes de Jekyll afin qu'ils puissent être affichés dans une galerie ou une interface d'administration à l'avenir..
Une fois que vous êtes satisfait de votre thème, que vous l'avez testé et documenté, vous devrez le placer dans le registre RubyGems.org pour que d'autres puissent l'utiliser..
Localisez votre bijou de thème avec votre outil de ligne de commande et utilisez les éléments suivants:
joyau construire génial-jekyll-theme.gemspec
Assurez-vous de faire correspondre le nom du .gemspec fichier dans votre thème avec la commande ci-dessus. Cela créera un fichier appelé awesome-jekyll-theme-0.0.2.gem, qui est votre joyau officiel du thème Jekyll! Ensuite, vous devrez pousser votre bijou jusqu'à RubyGems.org. Utilisez les éléments suivants dans votre outil de ligne de commande:
gem push awesome-jekyll-theme-0.0.2.gem
Si c'est la première fois que vous transmettez une gemme à RubyGems.org, il vous sera demandé de vous connecter avec les détails que vous avez utilisés pour vous inscrire. Après cela, la gemme devrait être insérée dans le registre, ce qui signifie que votre gemme de thème a été publiée..
Allusion: Avec la plupart des outils de ligne de commande, si vous écrivez les premières lettres d’un fichier puis appuyez sur Languette, il devrait compléter automatiquement le reste du nom du fichier, tant qu'il n'y a pas d'autre fichier commençant par les mêmes lettres dans le même dossier.
Une fois que cela est arrivé, vous devrez faire d'autres tests et suivre vos propres instructions pour installer et utiliser le joyau à thème. Les instructions doivent être assez similaires à celles indiquées sur le site officiel de Jekyll..
En plus de suivre ce tutoriel, vous voudrez peut-être consulter ces ressources pour créer votre propre joyau de thème Jekyll:
