so simple theme
3.2.0
So Simple est un thème Jekyll simple pour vos mots et vos images. Conçu pour fournir :
Découvrez les nouveautés du CHANGELOG. Documentation v2 .
| Description | ||
|---|---|---|
| Un article avec une grande image de héros. | Aperçu | Source |
| Un article contenant une variété d’éléments HTML courants montrant comment le thème les stylise. | Aperçu | Source |
| Post affichant le code en surbrillance. | Aperçu | Source |
| Un article affichant des images avec une variété d’alignements. | Aperçu | Source |
| Tous les articles regroupés par année. | Aperçu | Source |
| Tous les articles regroupés par catégorie. | Aperçu | Source |
| Tous les articles regroupés par tag. | Aperçu | Source |
| Page de catégorie. | Aperçu | Source |
| Liste des documents sous forme de grille. | Aperçu | Source |
Des exemples de publications supplémentaires peuvent être consultés sur le site de démonstration. Les fichiers sources de ceux-ci (et de l'intégralité du site de démonstration) se trouvent dans le dossier /docs .
Si vous utilisez Jekyll v3.5+ et que vous êtes auto-hébergé, vous pouvez rapidement installer le thème en tant que joyau Ruby. Si vous hébergez avec GitHub Pages, vous pouvez l'installer en tant que thème distant ou copier directement tous les fichiers de thème (voir la structure ci-dessous) dans votre projet.
Ajoutez cette ligne au Gemfile de votre site Jekyll (ou créez-en un) :
gem "jekyll-theme-so-simple" Ajoutez cette ligne au fichier _config.yml de votre site Jekyll :
theme : jekyll-theme-so-simpleExécutez ensuite Bundler pour installer la gemme de thème et ses dépendances :
bundle install
GitHub Pages a ajouté une prise en charge complète pour tout thème hébergé sur GitHub.
Remplacez gem "jekyll" par :
gem "github-pages" , group : :jekyll_plugins Exécutez bundle update et vérifiez que toutes les gemmes s'installent correctement.
Ajoutez remote_theme: "mmistakes/[email protected]" à votre fichier _config.yml . Supprimez toute autre entrée theme: ou remote_theme:
Remarque : votre site Jekyll devrait être visible immédiatement sur http://USERNAME.github.io. Si ce n'est pas le cas, vous pouvez forcer une reconstruction en envoyant des validations vides vers GitHub (voir ci-dessous pour plus de détails).
Si vous hébergez plusieurs sites basés sur Jekyll sous le même nom d'utilisateur GitHub, vous devrez utiliser les pages de projet au lieu des pages utilisateur. Essentiellement, vous renommez le dépôt en quelque chose d'autre que USERNAME.github.io et créez une branche gh-pages hors de master . Pour plus de détails sur la façon dont cela fonctionne, consultez la documentation de GitHub.
Si vous avez créé ou téléchargé le dépôt so-simple-theme vous pouvez supprimer en toute sécurité les fichiers et dossiers suivants :
.githubdocsexample.editorconfig.gitattributesbanner.jsCHANGELOG.mdGemfilejekyll-theme-so-simple.gemspecpackage.jsonRakefileREADME.mdREADME-OLD.mdscreenshot.pngSi vous utilisez Ruby Gem ou les versions de thème distant de So Simple, la mise à niveau est assez simple.
Pour vérifier quelle version vous utilisez actuellement, affichez la source de votre site créé et vous devriez obtenir quelque chose de similaire à :
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
Ce sera en haut de chaque fichier .html , /assets/css/main.css et /assets/js/main.js .
Exécutez simplement bundle update si vous utilisez Bundler (avez un Gemfile ) ou gem update jekyll-theme-so-simple si vous ne l'êtes pas.
Vérifiez que vous disposez de la dernière version attribuée dans _config.yml
remote_theme: "mmistakes/[email protected]"
Remarque : Si @xxx est omis, la branche master actuelle du thème sera utilisée. Il est conseillé de "verrouiller" remote_theme sur une version spécifique pour éviter d'introduire des modifications importantes sur votre site.
L'étape suivante nécessite de reconstruire votre site GitHub Pages afin qu'il puisse extraire les dernières mises à jour du thème. Cela peut être réalisé en plaçant un commit dans votre dépôt GitHub.
Un commit vide fera également le travail si vous n'avez rien à pousser pour le moment :
git commit --allow-empty -m "Force rebuild of site"
Si vous souhaitez tirer le meilleur parti du flux de travail Jekyll + GitHub Pages, vous devrez utiliser Git. Pour extraire manuellement les mises à jour du thème, vous devez d'abord vous assurer qu'il existe une télécommande en amont. Si vous avez créé le référentiel du thème, vous êtes probablement prêt à partir.
Pour vérifier, exécutez git remote -v et vérifiez que vous pouvez récupérer depuis origin https://github.com/mmistakes/so-simple-theme.git .
Pour l'ajouter, vous pouvez procéder comme suit :
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
Vous pouvez désormais extraire tous les commits effectués sur la branche master du thème avec :
git pull upstream master
En fonction du nombre de personnalisations que vous avez effectuées après le fork, il est probable qu'il y ait des conflits de fusion. Travaillez sur tous les fichiers en conflit signalés par Git, organisez les modifications que vous souhaitez conserver, puis validez-les.
Une autre façon de gérer les mises à jour consiste à télécharger le thème --- en remplaçant manuellement vos mises en page, inclusions et ressources par les plus récentes. Pour être sûr de ne manquer aucune modification, consultez l'historique des validations du thème pour voir ce qui a changé.
Voici une liste de contrôle rapide des dossiers/fichiers importants dont vous devez tenir compte :
| Nom | |
|---|---|
_layouts | Remplacez tout. Appliquez les modifications si vous avez personnalisé des mises en page. |
_includes | Remplacez tout. Appliquez les modifications si vous avez personnalisé des inclusions. |
assets | Remplacez tout. Appliquez les modifications si vous avez personnalisé des feuilles de style ou des scripts. |
_sass | Remplacez tout. Appliquez les modifications si vous avez personnalisé les partiels Sass. |
_data/navigation.yml | Coffre-fort à conserver. Vérifiez qu’il n’y a pas eu de changements ou d’ajouts structurels majeurs. |
_data/text.yml | Coffre-fort à conserver. Vérifiez qu’il n’y a pas eu de changements ou d’ajouts structurels majeurs. |
_config.yml | Coffre-fort à conserver. Vérifiez qu’il n’y a pas eu de changements ou d’ajouts structurels majeurs. |
Remarque : Si vous ne voyez pas la dernière version, assurez-vous de vider les caches du navigateur et du CDN. En fonction de votre environnement d'hébergement, les anciennes versions des fichiers /assets/css/main.css , /assets/js/main.min.js ou *.html peuvent être mises en cache.
Les mises en page, les inclusions, les partiels Sass et les fichiers de données sont tous placés à leurs emplacements par défaut. Les feuilles de style et les scripts peuvent être trouvés dans assets , ainsi que quelques fichiers liés au développement dans le répertoire racine du projet.
Remarque : Si vous avez installé So Simple via Ruby Gem ou des méthodes de thème distant, les fichiers de thème trouvés dans /_layouts , /_includes , /_sass et /assets seront absents de votre projet. C'est normal car ils sont fournis avec la gemme jekyll-theme-so-simple .
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
Après avoir créé un Gemfile et installé le thème, vous devrez ajouter et modifier les fichiers suivants :
_config.yml/_data/navigation.yml/_data/text.ymlindex.mdRemarque : Consultez la documentation sur la pagination ci-dessous pour savoir comment l'activer sur la page d'accueil.
jekyll new L’utilisation de la jekyll new vous permettra d’être opérationnel le plus rapidement possible.
Modifiez vos fichiers Gemfile et _config.yml en suivant le guide d'installation ci-dessus et le guide de configuration ci-dessous, puis créez _data/text.yml comme indiqué précédemment.
La configuration des éléments à l'échelle du site ( locale , title , description , url , logo , author , etc.) s'effectue dans _config.yml de votre projet. Voir l'exemple de configuration dans ce dépôt pour référence supplémentaire.
| Nom | Description | Exemple |
|---|---|---|
locale | Langue principale du site. | "en-us" |
title | Titre du site. | "My Awesome Site" |
description | Une brève description. | "This is my site, it is awesome." |
baseurl | Utilisé pour tester le site Web sous la même URL de base sur laquelle il sera déployé. | /my-base-path |
url | L'URL complète de votre site. | "https://your-site.com" |
logo | Chemin d'accès à un logo à l'échelle du site utilisé dans l'en-tête. | /images/your-logo.png |
Trois skins (par défaut, clair et foncé) sont disponibles pour changer la palette de couleurs du thème.
default.css | light.css | dark.css |
|---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "Pour utiliser un skin personnalisé autre que ceux fournis :
/assets/css/skins/default.scss dans votre dépôt local.skin dans _config.yml pour référencer ce nouveau fichier skin .css . site.locale est utilisé pour déclarer la langue principale de chaque page Web du site.
Exemple : locale : "en-US" définit l'attribut lang du site sur le style anglais des États-Unis, tandis que en-GB correspond au style anglais du Royaume-Uni. Les codes de pays sont facultatifs et la variante locale: "en" est également acceptable. Pour trouver vos codes de langue et de pays, consultez ce tableau de référence.
Il est important de définir correctement les paramètres régionaux pour associer le texte localisé trouvé dans le fichier de données texte.
Remarque : Le thème par défaut est le texte en anglais ( en , en-US , en-GB ). Si vous modifiez les paramètres régionaux dans _config.yml en quelque chose d'autre, assurez-vous d'ajouter la clé de paramètres régionaux correspondante et le texte traduit à _data/text.yml .
Le nom d'hôte de base et le protocole de votre site. Si vous hébergez avec GitHub Pages, cela ressemblera à quelque chose comme url: "https://github.io.mmistakes" ou url: "https://your-site.com" si vous avez un nom de domaine personnalisé.
GitHub Pages force désormais https:// pour les nouveaux sites, alors gardez cela à l'esprit lorsque vous définissez votre URL pour éviter les avertissements de contenu mixte.
Remarque : Jekyll remplace la valeur de url par http://localhost:4000 lors de l'exécution jekyll serve localement en cours de développement. Si vous souhaitez éviter ce comportement, définissez JEKYLL_ENV=production pour forcer l'environnement en production.
Cette option provoque toutes sortes de confusions dans la communauté Jekyll. Si vous n'hébergez pas votre site en tant que page de projet GitHub ou dans un sous-dossier (par exemple, /blog ), ne vous embêtez pas.
Dans le cas du site de démonstration So Simple , il est hébergé sur GitHub à l'adresse https://mmistakes.github.io/so-simple-theme. Pour définir correctement ce chemin de base, j'utiliserais url: "https://mmistakes.github.io" et baseurl: "/so-simple-theme" .
Pour plus d'informations sur la façon d'utiliser correctement site.url et site.baseurl comme prévu par les responsables de Jekyll, consultez le message de Parker Moore sur le sujet.
Remarque : lorsque vous utilisez baseurl n'oubliez pas de l'inclure dans vos chemins de liens et d'actifs dans votre contenu. Les valeurs de url: et baseurl: "/blog" rendraient votre site local visible sur http://localhost:4000/blog et non sur http://localhost:4000. Vous pouvez soit ajouter tous vos chemins d'actifs et de liens internes avec {{ site.baseurl }} soit utiliser relative_url de Jekyll.
Pour utiliser les exemples de valeurs au-dessus du chemin d'image suivant de {{ '/images/my-image.jpg' | relative_url }} afficherait correctement comme http://localhost:4000/blog/images/my-image.jpg .
Sans le filtre relative_url , ce chemin d'actif manquerait /blog et vous auriez une image cassée sur votre page.
Vous pouvez modifier le format de date par défaut en spécifiant date_format dans _config.yml . Il accepte tous les formats de date Liquid standard.
Par exemple, la valeur par défaut de "%B %-d, %Y" pourrait être modifiée comme suit :
date_format : " %Y-%m-%d " Activez les extraits de temps de lecture estimés sur l’ensemble du site avec read_time: true . 200 a été défini comme valeur de mots par minute par défaut – qui peut être modifiée words_per_minute dans votre fichier _config.yml .
read_time : true
words_per_minute : 200Activez MathJax (un moteur d'affichage JavaScript pour les mathématiques) sur l'ensemble du site avec
mathjax :
enable : true L'option combo vous permet de choisir une combinaison de composants MathJax : la valeur par défaut est « tex-svg ». De plus, l'option tags vous permet de contrôler la numérotation des équations : les choix sont "ams" (par défaut), "tout" et "aucun".
Exemple de configuration :
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all" Utilisez facilement Google Fonts sur tout votre site en remplaçant le name et weights de la police en conséquence. Les associations de polices suggérées sont les suivantes :
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Remarque : Si d'autres familles de polices sont utilisées, assurez-vous d'en ajouter, puis de remplacer les variables SCSS suivantes dans /assets/css/main.scss par les valeurs font-family fournies par Google.
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;Consultez la documentation de la feuille de style ci-dessous pour plus d'informations sur le remplacement des variables par défaut du thème.
Répartissez la liste principale des articles sur la page d'accueil sur plusieurs pages en activant la pagination.
Incluez le plugin jekyll-paginate dans votre Gemfile .
group :jekyll_plugins do
gem "jekyll-paginate"
end Ajoutez jekyll-paginate au tableau plugins (anciennement gems ) dans votre fichier _config.yml et les paramètres de pagination suivants :
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/ Créez index.html (ou renommez index.md ) à la racine de votre projet et ajoutez les éléments préliminaires suivants :
layout : home
paginate : true Pour indexer le contenu complet de vos documents afin de l'utiliser dans une page de recherche, définissez search_full_content sur true dans _config.yml :
search_full_content : true Remarque : Un grand nombre de publications augmentera la taille de l'index de recherche, ce qui aura un impact sur les performances de chargement des pages. La définition de search_full_content sur false (valeur par défaut) limite l'indexation aux 50 premiers mots du contenu du corps.
Par défaut, la catégorie et les balises ajoutées à une publication ne sont pas liées aux pages d'archives de taxonomie. Pour activer ce comportement et créer des liens vers des pages contenant des articles regroupés par catégorie ou balise, ajoutez ce qui suit :
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# " Ces chemins doivent imiter les permaliens utilisés pour vos pages d’archives de catégories et de balises . Le # à la fin est nécessaire pour cibler la bonne section de taxonomie sur les pages.
Par exemple, si vous deviez créer categories.md avec la préface suivante :
title : Categories Archive
layout : categories
permalink : /foo/ Vous devrez remplacer category_archive_path par "/foo/# pour que les liens de catégorie fonctionnent correctement.
Remarque : Vous pouvez créer manuellement des pages de catégories et de balises dédiées avec layout: category et layout: tag . Ou utilisez des plugins comme jekyll-archives ou jekyll-paginate-v2 pour les générer automatiquement.
Si vous avez un compte Disqus , vous pouvez afficher une section de commentaires sous chaque publication.
Pour activer les commentaires Disqus, ajoutez votre nom abrégé Disqus au fichier _config.yml de votre projet :
disqus :
shortname : my_disqus_shortname Les commentaires n'apparaissent en production que lorsqu'ils sont créés avec la valeur d'environnement suivante : JEKYLL_ENV=production pour éviter de polluer votre compte Disqus avec du contenu localhost .
Si vous ne souhaitez pas afficher les commentaires pour une publication particulière, vous pouvez les désactiver en ajoutant comments: false au début de cette publication.
Pour activer Google Analytics , ajoutez votre identifiant de suivi à _config.yml comme ceci :
google_analytics : UA-NNNNNNNN-N Semblable aux commentaires Disqus ci-dessus, le script de suivi Google Analytics n'apparaîtra en production que lors de l'utilisation de la valeur d'environnement suivante : JEKYLL_ENV=production .
Pour plus d'options de configuration, assurez-vous de consulter la documentation de : jekyll-seo-tag , jekyll-feed , jekyll-paginate et jekyll-sitemap .
Ce thème fournit les mises en page suivantes, que vous pouvez utiliser en définissant la layout en page sur chaque page, comme ceci :
---
layout : name
---layout: default Cette mise en page gère tous les échafaudages de page de base en plaçant le contenu de la page entre les éléments d'en-tête et de pied de page. Toutes les autres mises en page héritent de celle-ci et fournissent un style et des fonctionnalités supplémentaires à l'intérieur du bloc {{ content }} .
layout: postCette mise en page prend en charge les éléments frontaux suivants :
| Nom | Taper | Description |
|---|---|---|
image | Chaîne | Chemin d'accès à une grande image associée à la publication. Également utilisé pour OpenGraph, les cartes Twitter et la vignette du flux du site si activé. Tailles d'image suggérées. |
image.path | Chaîne | Comme ci-dessus. Utilisé lorsqu'une thumbnail ou caption doit également être attribuée à l'objet image . |
image.caption | Chaîne | Décrit l'image ou fournit un crédit. La démarque est autorisée. |
author | Objet ou chaîne | Spécifiez name de l'auteur , picture , twitter , links , etc. |
comments | Booléen | Désactivez les commentaires avec comments: false . |
share | Booléen | Ajoutez des liens de partage social à une publication avec share: true . |
Exemple de publication d'image :
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) " Remarque : le contenu image.feature est obsolète, pour prendre entièrement en charge jekyll-seo-tag. Si vous n'utilisez pas thumbnail ou caption l'image de la publication peut être attribuée de manière plus concise en tant image: /images/your-post-image.jpg .
Exemple d'auteur de message :
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Remarque : Les informations sur l'auteur peuvent être centralisées dans _data/authors.yml en procédant comme suit dans le texte préliminaire du document :
author : johndoe Avec la clé d'auteur correspondante dans _data/authors.yml :
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Remarque : la taille recommandée author.picture est 150 x 150 pixels.
Pour définir les liens qui apparaissent dans la barre latérale de l'auteur, utilisez la clé authors.links dans _config.yml ou /_data/authors.yml .
| Nom | Description |
|---|---|
title | Décrit le lien. Non visible, utilisé à des fins d'accessibilité. |
url | URL vers laquelle pointe le lien. |
icon | Correspond à une icône Font Awesome, par exemple, fab fa-twitter-square . |
Exemple:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-squareRemarque : Pour désactiver complètement les liens d'auteur, utilisez :
author :
links : falselayout: page Visuellement, cette mise en page ressemble et agit de manière similaire layout: post , avec les différences suivantes.
La mise en page constitue la base de plusieurs autres mises en page telles que home , posts , categories , tags , collection , category , tag et search .
layout: home Cette mise en page contient les mêmes éléments préliminaires que layout: page , avec l'ajout des éléments suivants :
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), gridLorsque la pagination n'est pas activée, la page affiche par défaut les 10 dernières publications. Pour modifier le nombre de publications affichées, attribuez une valeur limite en ajoutant ce qui suit au début de la page.
posts_limit : 5 Par défaut, les publications sont affichées sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page.
layout: posts Cette mise en page affiche tous les articles regroupés par année de publication. Il contient le même contenu que layout: page .
Par défaut, les publications sont affichées sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page.
layout: categories Cette mise en page affiche toutes les catégories de messages regroupés. Il contient le même contenu que layout: page .
Par défaut, les publications sont affichées sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page.
layout: tags Cette mise en page affiche toutes les publications regroupées par balise. Il contient le même contenu que layout: page .
Par défaut, les publications sont affichées sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page.
layout: collection Cette mise en page affiche tous les documents regroupés par une collection spécifique. Il contient le même contenu que layout: page avec l'ajout des éléments suivants :
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse Pour créer une page affichant tous les documents de la collection recipes , vous devez créer recipes.md à la racine de votre projet et ajouter cette introduction :
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes Par défaut, les documents sont affichés sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page. Si vous souhaitez trier la collection par titre, ajoutez sort_by: title . Si vous souhaitez un tri inversé, ajoutez sort_order: reverse . Si vous recherchez simplement une liste contenant les titres des recettes (sans extraits), ajoutez show_excerpts: false .
layout: category Cette mise en page affiche tous les articles regroupés par une catégorie spécifique. Il contient le même contenu que layout: page avec l'ajout des éléments suivants :
taxonomy : # category name
entries_layout : # list (default), grid Par défaut, les publications sont affichées sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page.
Pour créer une page affichant tous les messages attribués à la catégorie foo vous devez créer foo.md à la racine de votre projet et ajouter cette introduction :
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foolayout: tag Cette mise en page affiche toutes les publications regroupées par une balise spécifique. Il contient le même contenu que layout: page avec l'ajout des éléments suivants :
taxonomy : # tag name
entries_layout : # list (default), grid Par défaut, les publications sont affichées sous forme de liste. Pour passer à une vue en grille, ajoutez entries_layout: grid au début de la page.
Pour créer une page affichant tous les messages attribués à la balise foo bar vous devez créer foo-bar.md à la racine de votre projet et ajouter cette introduction :
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo barlayout: searchCette mise en page affiche un formulaire de recherche et affiche les pages associées en fonction de la requête.
Index du contenu de la page : title , excerpt , content (si activé), categories , tags et url .
Si vous souhaitez exclure des pages/articles spécifiques de l'index de recherche, définissez l'indicateur de recherche sur false dans leur introduction.
search : false Pour indexer le contenu complet de vos documents, définissez search_full_content sur true dans _config.yml :
search_full_content : true Remarque : Un grand nombre de publications augmentera la taille de l'index de recherche, ce qui aura un impact sur les performances de chargement des pages. La définition de search_full_content sur false (valeur par défaut) limite l'indexation aux 50 premiers mots du contenu du corps.
Les tailles d'image suggérées en pixels sont les suivantes :
| Image | Description | Taille |
|---|---|---|
site.logo | Logo à l'échelle du site utilisé dans l'en-tête. | 200 x 200 |
page.image.path | Grande image de document pleine largeur. | Les images hautes pousseront le contenu vers le bas de la page. 1600 x 600 est une bonne taille intermédiaire à viser. |
page.image | Raccourci pour page.image.path lorsqu'il est utilisé seul (sans thumbnail , caption ou autres variables). | Identique à page.image.path |
page.image.thumbnail | Image de petit document utilisée en mode grille. | 400 x 200 |
author.picture | Photo de l’auteur dans la barre latérale du message. | 150 x 150 |
Pour modifier le texte trouvé dans le thème, copiez le fichier /_data/text.yml suivant et personnalisez-le si nécessaire.
Lorsque vous ajoutez de nouveaux textes, assurez-vous que les clés correspondent à ces codes de langue/pays, qui peuvent être utilisés pour site.locale .
Pour définir quelles pages sont liées dans la navigation supérieure :
Créez un fichier /_data/navigation.yml .
Ajoutez des pages dans l'ordre dans lequel vous souhaitez qu'elles apparaissent :
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/Remarque : Des titres longs ou de nombreux liens peuvent entraîner la division de la barre de navigation en plusieurs lignes, en particulier sur les écrans plus petits. Gardez cela à l’esprit lorsque vous développez la navigation principale de votre site.
Les informations sur l'auteur sont utilisées comme métadonnées pour les publications "par lignes" et propagent le champ creator des fiches récapitulatives Twitter avec la préface suivante dans _config.yml :
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.pngLes informations sur l'auteur à l'échelle du site peuvent être remplacées dans la préface d'un document de la même manière :
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.png Ou en spécifiant une clé correspondante dans la préface du document, qui existe dans site.data.authors . Par exemple, vous avez ce qui suit dans la préface du document :
author : megaman Et vous avez ce qui suit dans _data/authors.yml :
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png Actuellement author.picture n'est utilisé que dans layout: post . La taille recommandée est 150 x 150 pixels.
Les liens de pied de page et le texte du droit d’auteur peuvent tous deux être personnalisés.
Les liens de pied de page sont définis dans _config.yml sous la clé footer_links .
| Nom | Description |
|---|---|
title | Décrit le lien. Non visible, utilisé à des fins d'accessibilité. |
url | URL vers laquelle pointe le lien. |
icon | Correspond à une icône Font Awesome 5, par exemple, fab fa-twitter-square . |
Exemples :
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square Remarque : Pour désactiver complètement les liens de pied de page, utilisez footer_links: false .
Par défaut, le droit d'auteur insère l'année en cours, site.title et les mots "Powered by Jekyll & So Simple." Pour changer cela, ajoutez copyright à votre _config.yml comme ceci (le Markdown est autorisé) :
copyright : " This site is made with <3 by *me, myself, and I*. " Vous pouvez considérer ces assistants Jekyll comme des codes courts. Étant donné que les pages GitHub n'autorisent pas la plupart des plugins, les balises personnalisées sont supprimées. Au lieu de cela, le thème exploite les fonctionnalités pour faire quelque chose de similaire.
Intégrez une vidéo de YouTube/Vimeo ou de tout autre contenu iframe dont la taille s'adapte de manière réactive à la largeur de son parent.
| Paramètre | Requis | Description |
|---|---|---|
url | Oui | URL de la vidéo ou de l'iframe, par exemple https://www.youtube.com/watch?v=-PVofD2A9t8 |
ratio | Facultatif | Ratio du contenu vidéo ou iframe. 21:9 , 16:9 , 4:3 , 1:1 . Si aucun rapport n’est attribué, 16:9 est utilisé. |
Exemple:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}Pour inclure une table des matières générée automatiquement pour les articles et les pages, ajoutez l'assistant suivant à l'endroit où vous souhaitez qu'il apparaisse.
{% include toc %}So Simple 3 est une réécriture majeure de l’ensemble du thème. Les changements les plus notables sont résumés ci-dessous, suivis de changements plus spécifiques.
Il est prudent de dire que vous souhaiterez probablement abandonner tous les fichiers _layouts , _includes , _sass , .css et .js de la v2 et utiliser soit la gemme Ruby, soit les options d'installation de thème à distance.
_layouts , _includes , _sass et JavaScript ont été reconstruits.site.url et site.baseurl en tirant parti des filtres relative_url et absolute_url ./_includes/open-graph.html personnalisé par jekyll-seo-tag .tags et posts ) pour une utilisation plus facile.404.md supprimée.atom.xml personnalisé par jekyll-feed .favicon.ico et favicon.png par défaut.float ont été utilisées afin que les choses ne semblent pas trop cassées dans les navigateurs qui ne prennent pas en charge display: grid et flexbox. Le format est passé de en_US (avec un trait de soulignement) à en-US avec un trait d'union.
site.owner est désormais site.author pour mieux prendre en charge jekyll-seo-tag et jekyll-feed.
| v2 | v3 |
|---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | obsolète , remplacé par jekyll-seo-tag |
site.owner.bing-verify | obsolète , remplacé par jekyll-seo-tag |
site.owner.google.analytics est désormais site.google_analytics . Voir la documentation pour plus d'informations.
site.owner.disqus-shortname est désormais site.disqus.shortname . Voir la documentation pour plus d'informations.
Pour désactiver les commentaires sur une publication particulière, ajoutez comments: false à son contenu.
search_omit a été renommé search . Pour exclure un article ou une page de la recherche, ajoutez plutôt search: false à son contenu.
Lors de l'attribution de chemins d'image pour des éléments tels que site.logo , page.image.path , author.picture , etc., ils nécessitent désormais un chemin relatif ou absolu complet.
Dans So Simple v2, les images étaient toutes placées dans /images/ et attribuées en premier avec uniquement le nom de fichier. Pour que les images se chargent correctement, vous devez maintenant faire précéder tous les chemins de /images/ ... si vous y stockez des images, par exemple /images/your-image.jpg .
Pour mieux prendre en charge les plugins Jekyll comme jekyll-seo-tag, jekyll-feed et jekyll-sitemap, la plupart des clés image ont été renommées. Ajustez le contenu de tous vos articles et pages en conséquence.
| v2 | v3 |
|---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (Markdown autorisé) |
image.creditlink | obsolète, utilisez **image.caption** à la place |
Un article avec le sujet suivant de la v2 :
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.comSerait converti en la présentation v3 suivante :
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "Étapes grossières pour migrer un fork d'origine So Simple v2 (sans aucune modification) vers la dernière version.
Supprimez _includes/ , _layouts/ , _sass/ , jshintrc , Gruntfile.js et search.json .
Modifiez Gemfile pour les méthodes d'installation de la gemme Ruby ou des pages GitHub et suivez ces instructions.
Ajoutez les polices Google suivantes à _config.yml :
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Modifiez _config.yml en accordant une attention particulière aux clés qui ont été renommées ou qui ont de nouvelles exigences de chemin relatif. locale , logo owner sont de bons points de départ.
Renommez toutes les instances de image.feature , image.thumb et image.credit dans les articles/pages en respectant les modifications d'image ci-dessus.
Supprimez le contenu du corps dans index.html et remplacez layout: page par layout: home . Configurez la pagination si nécessaire.
Supprimez le contenu du corps dans /search/index.md et remplacez layout: page par layout: search .
Supprimez le contenu du corps dans /tags/index.md et remplacez layout: page par layout: tags .
Supprimez le contenu du corps dans /articles/index.md et modifiez layout: page en layout: category et ajoutez taxonomy: articles .
Supprimez le contenu du corps dans /body/index.md et modifiez layout: page en layout: category et ajoutez taxonomy: blog .
Renommez le contenu modified dans les articles/pages en last_modified_at pour une meilleure parité avec les plugins qui le prennent en charge.
Ajoutez tag_archive_path: "/tags/#" à _config.yml pour activer les liens de balises dans la barre latérale post-méta.
Renommez avatar en picture dans _data/authors.yml (et dans tous les articles/pages préliminaires) et modifiez les chemins en respectant les modifications du chemin de l'image ci-dessus.
Lors de l'installation en tant que gemme Ruby ou thème distant, les fichiers de thème principaux ( _layouts , _includes , _sass , assets , etc.) seront absents de votre projet.
La structure, le style et les scripts par défaut de ce thème peuvent être remplacés et personnalisés des deux manières suivantes :
Les fichiers de thème peuvent être remplacés en plaçant un fichier du même nom dans le répertoire _includes ou _layouts de votre projet. Par exemple:
_includes/social-share.html , créez un répertoire _includes dans votre projet, copiez _includes/social-share.html du dossier gem de So Simple vers <your_project>/_includes et modifiez ce fichier. ProTip : pour localiser les fichiers du thème sur votre ordinateur, exécutez bundle show jekyll-theme-so-simple . Cela renvoie l'emplacement des fichiers de thème basés sur les gemmes.
Le thème est livré avec deux fichiers pour aider à injecter du balisage et du contenu personnalisés dans des emplacements prédéfinis.
| Description | |
|---|---|
_includes/head-custom.html | Inséré à l'intérieur de l'élément <head> pour ajouter des métadonnées, des favicons, etc. |
_includes/footer-custom.html | Inséré à l'intérieur de l'élément <footer> avant les scripts du site et les informations de droits d'auteur. |
Pour remplacer le Sass par défaut (situé dans le répertoire _sass du thème), effectuez l'une des opérations suivantes :
Copiez directement à partir de la gemme So Simple
bundle show jekyll-theme-so-simple pour obtenir le chemin d'accès)./assets/css/main.scss à partir de là vers <your_project> .<your_project>/assets/css/main.scss .Copie de ce dépôt.
<your_project> .<your_project/assets/css/main.scss . Remarque : Pour personnaliser les partiels Sass réels regroupés dans la gemme, vous devrez copier le contenu complet du répertoire _sass dans <your_project> . En raison de la manière dont Jekyll importe actuellement ces fichiers, c'est tout ou rien. Remplacer un seul partiel Sass (ou deux) ne fonctionnera pas comme _includes et _layouts .
Pour apporter des modifications de base au style du thème, les variables Sass peuvent être remplacées en les ajoutant à <your_project>/assets/css/main.scss . Par exemple, pour modifier la couleur d'accent utilisée dans le thème, ajoutez ce qui suit avant toutes les lignes @import :
$accent-color : tomato ;Pour remplacer le JavaScript par défaut intégré au thème, effectuez l'une des opérations suivantes :
Copiez directement à partir de la gemme So Simple
bundle show jekyll-theme-so-simple pour obtenir le chemin d'accès)./assets/js/main.js à partir de là vers <your_project> .<your_project>/assets/js/main.js .Copie de ce dépôt.
/assets/js/main.js dans <your_project> .<your_project>/assets/js/main.js . Le fichier /assets/js/main.min.js du thème est construit à partir de plugins jQuery et d'autres scripts trouvés dans /assets/js/ .
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
Pour modifier ou ajouter vos propres scripts, incluez-les dans assets/js/main.js puis reconstruisez à l'aide de npm run build:js . Voir ci-dessous pour plus de détails.
Si vous ajoutez des scripts supplémentaires à /assets/js/plugins/ et souhaitez qu'ils soient concaténés avec les autres, assurez-vous de mettre à jour le script uglify dans package.json . Il en va de même pour les scripts que vous supprimez.
Vous pouvez également ajouter des scripts aux éléments <head> ou fermant </body> en ajoutant des chemins aux tableaux suivants dans _config.yml .
Exemple:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js Remarque : Si vous attribuez des chemins à footer_scripts le fichier /assets/js/main.min.js du thème sera désactivé. Ce script inclut des plugins et autres scripts qui cesseront de fonctionner à moins que vous ne les ajoutiez spécifiquement au tableau footer_scripts .
Le thème utilise la version Font Awesome SVG avec JS pour l'iconographie. Les emplacements importants où ces icônes apparaissent se trouvent dans la barre latérale de l'auteur et dans les liens de pied de page.
Pour configurer votre environnement pour développer ce thème :
cd dans /example et exécutez bundle install .Pour tester le thème localement lorsque vous y apportez des modifications :
cd dans le dossier racine du dépôt (par exemple jekyll-theme-so-simple ).bundle exec rake preview et ouvrez votre navigateur sur http://localhost:4000/example/ . Cela démarre un serveur Jekyll en utilisant les fichiers du thème et le contenu du répertoire example/ . Au fur et à mesure que des modifications sont apportées, actualisez votre navigateur pour voir les modifications.
Dans le but de réduire les dépendances, un ensemble de scripts npm est utilisé pour créer main.min.js au lieu d'exécuteurs de tâches comme Gulp ou Grunt. Si ces outils correspondent davantage à votre style, utilisez-les à la place.
Pour commencer :
cd à la racine de votre projet. Remarque : Si vous avez effectué une mise à niveau à partir d'une version précédente du thème, assurez-vous d'avoir copié package.json avant d'exécuter npm install . Vous devrez peut-être également supprimer votre répertoire node_modules .
Si tout se passe bien, l'exécution npm run build:js compressera/concaténera main.js et tous les scripts de plugin dans /assets/js/main.min.js .
Vous avez trouvé une faute de frappe dans la documentation ? Vous demandez une fonctionnalité ou une correction de bug ? Recherchez parmi les problèmes ouverts et fermés avant de soumettre un problème pour éviter les duplications.
Les demandes de tirage sont également appréciées. Si c'est votre première fois, il peut être utile de lire sur GitHub Flow.
Si votre contribution ajoute ou modifie le comportement du thème, assurez-vous de mettre à jour la documentation et/ou l'exemple de contenu. La documentation se trouve dans README.md tandis que les exemples d'articles, de pages et de collections se trouvent dans les dossiers docs et example .
Lors de la soumission d'une pull request :
master et donnez-lui un nom significatif (par exemple my-awesome-new-feature ).Michel Rose
La licence MIT (MIT)
Copyright (c) 2013-2019 Michael Rose et contributeurs
L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :
L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.
LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION. EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, DE OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.
So Simple intègre Font Awesome, Copyright (c) 2017 Dave Gandy. Font Awesome est distribué selon les termes de la licence SIL OFL 1.1 et MIT.
So Simple intègre des photographies d'Unsplash.
So Simple intègre des photographies de WeGraphics
Si simple incorpore le point d'arrêt. Le point d'arrêt est distribué selon les termes des licences MIT / GPL.
Si simple incorpore JQuery Smooth Scroll, Copyright (C) 2017 Karl Swedberg. JQuery Smooth Scroll est distribué selon les termes de la licence MIT.
Si simple incorpore Lunr, Copyright (C) 2017 Oliver Nightingale. Lunr est distribué selon les termes de la licence du MIT.
Si simple incorpore Lity, Copyright (C) 2015-2016, Jan Sorgalla. Lity est distribuée en vertu des termes de la licence MIT] (http://openseource.org/licenses/mit).
Si simple incorpore la table des matières Toggle, Copyright (C) 2017 Timothy B. Smith. La table des contenus est répartie en vertu des termes de la licence MIT] (http://opensource.org/licenses/mit).
