jekyll theme basically basic
1.4.5 - 2021-07-05
Fondamentalement, Basic est un thème Jekyll destiné à remplacer le Minima par défaut, avec quelques améliorations ajoutées pour faire bonne mesure :
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 :
gem "jekyll-theme-basically-basic" Ajoutez cette ligne au fichier _config.yml de votre site Jekyll :
theme : jekyll-theme-basically-basicExé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 personnalisant votre site (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 configuration, consultez la documentation de GitHub.
Si vous avez créé ou téléchargé le dépôt jekyll-theme-basically-basic vous pouvez supprimer en toute sécurité les fichiers et dossiers suivants :
.editorconfig.gitattributes.github.scss-lint.ymlCHANGELOG.mdjekyll-theme-basically-basic.gemspecLICENSERakefileREADME.mdscreenshot.png/docs/exampleSi vous utilisez Ruby Gem ou les versions de thème distant de Basically Basic, 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 à :
<!--
Basically Basic Jekyll Theme 1.4.5
Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE
-->
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-basically-basic 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 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/jekyll-theme-basically-basic.git .
Pour l'ajouter, vous pouvez procéder comme suit :
git remote add upstream https://github.com/mmistakes/jekyll-theme-basically-basic.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 aucun changement, c'est probablement une bonne idée de consulter l'historique des validations du thème pour voir ce qui a changé depuis.
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/theme.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 de /assets/css/main.css , /assets/js/main.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. Feuilles de style et scripts dans assets , et quelques fichiers liés au développement dans le répertoire racine du projet.
Remarque : Si vous avez installé Basically Basic via la méthode Ruby Gem, les fichiers de thème trouvés dans /_layouts , /_includes , /_sass et /assets seront manquants. C'est normal car ils sont fournis avec la gemme jekyll-theme-basically-basic .
jekyll-theme-basically-basic
├── _data # data files
| └── theme.yml # theme settings and custom text
├── _includes # theme includes and SVG icons
├── _layouts # theme layouts (see below for details)
├── _sass # Sass partials
├── assets
| ├── javascripts
| | └── main.js
| └── stylesheets
| └── main.scss
├── _config.yml # sample configuration
└── index.md # sample home page (all 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/theme.ymlindex.mdRemarque : Consultez la documentation sur la pagination ci-dessous pour savoir comment l'activer pour la page d'accueil.
jekyll new L’utilisation de la jekyll new vous permettra d’être opérationnel le plus rapidement possible.
Modifiez _config.yml et créez _data/theme.yml comme indiqué ci-dessus et vous êtes prêt à partir.
La configuration des éléments à l'échelle du site ( lang , title , description , 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.
| Description | |
|---|---|
lang | Utilisé pour indiquer la langue du texte (par exemple, en-US, en-GB, fr) |
title | Le titre de votre site (par exemple, Dungan's Awesome Site) |
description | Brève description du site (par exemple, un blog sur la purée de sauterelles) |
url | L'URL complète de votre site (par exemple, https://groverloaf.org) |
author | Informations globales sur l'auteur (voir ci-dessous) |
logo | Chemin d'accès à un logo à l'échelle du site ~ 100 x 100 px (par exemple, /assets/your-company-logo.png) |
twitter_username | Nom d'utilisateur Twitter sur l'ensemble du site, utilisé comme lien dans la barre latérale |
github_username | Nom d'utilisateur GitHub sur l'ensemble du site, utilisé comme lien dans la barre latérale |
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 se décline en six skins différents (variations de couleurs). Pour changer d'apparence, ajoutez l'un des éléments suivants à votre fichier /_data/theme.yml :
skin: default | skin: night | skin: plum |
|---|---|---|
skin: sea | skin: soft | skin: steel |
|---|---|---|
Ce thème vous permet d'utiliser facilement Google Fonts dans tout le thème. Ajoutez simplement ce qui suit à votre /_data/theme.yml , en remplaçant le name de la police et weights en conséquence.
google_fonts :
- name : " Fira Sans "
weights : " 400,400i,600,600i "
- name : " Fira Sans Condensed " Pour modifier le texte trouvé dans le thème, ajoutez ce qui suit à votre fichier /_data/theme.yml et personnalisez-le si nécessaire.
t :
skip_links : " Skip links "
skip_primary_nav : " Skip to primary navigation "
skip_content : " Skip to content "
skip_footer : " Skip to footer "
menu : " Menu "
search : " Search "
site_search : " Site Search "
results_found : " Result(s) found "
search_placeholder_text : " Enter your search term... "
home : " Home "
newer : " Newer "
older : " Older "
email : " Email "
subscribe : " Subscribe "
read_more : " Read More "
posts : " Posts "
page : " Page "
of : " of "
min_read : " min read "
present : " Present "
cv_awards : " Awards "
cv_summary_contact : " Contact "
cv_summary_contact_email : " Email "
cv_summary_contact_phone : " Phone "
cv_summary_contact_website : " Website "
cv_location : " Location "
cv_education : " Education "
cv_education_courses : " Courses "
cv_interests : " Interests "
cv_languages : " Languages "
cv_publications : " Publications "
cv_references : " References "
cv_skills : " Skills "
cv_volunteer : " Volunteer "
cv_work : " Work " Par défaut toutes les pages internes avec un title seront ajoutées au menu "hors canevas". Pour un contrôle et un tri plus précis de ces liens de menu :
Créez une liste personnalisée pour remplacer le paramètre par défaut en ajoutant un tableau navigation_pages à votre fichier /_data/theme.yml .
Ajoutez les chemins de page bruts dans l'ordre souhaité :
navigation_pages :
- about.md
- cv.md Le titre et l'URL de chaque lien de menu seront renseignés respectivement en fonction de leur title et permalink .
Divisez la liste principale des publications en listes plus petites et affichez-les 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 gems dans votre fichier _config.yml et les paramètres de pagination suivants :
paginate : 5 # 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 activer la recherche sur l'ensemble du site, ajoutez search: true à votre _config.yml .
La recherche par défaut utilise Lunr pour créer un index de recherche de tous vos documents. Cette méthode est 100 % compatible avec les sites hébergés sur les pages GitHub.
Remarque : seuls les 50 premiers mots du contenu d'un article ou d'une page sont ajoutés à l'index de recherche Lunr. Définir search_full_content sur true dans votre _config.yml remplacera cela et pourrait avoir un impact sur les performances de chargement des pages.
Pour une recherche plus rapide et plus pertinente (voir démo) :
Ajoutez la gem jekyll-algolia à votre Gemfile , dans la section :jekyll_plugins .
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
gem "jekyll-algolia"
end Une fois cela fait, téléchargez toutes les dépendances en exécutant bundle install .
Basculez les fournisseurs de recherche de lunr vers algolia dans votre fichier _config.yml :
search_provider : algolia Ajoutez les informations d'identification Algolia suivantes à votre fichier _config.yml . Si vous n'avez pas de compte Algolia, vous pouvez ouvrir un forfait Communauté gratuit. Une fois connecté, vous pouvez récupérer vos informations d'identification depuis votre tableau de bord.
algolia :
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key : # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), falseUne fois vos identifiants configurés, vous pouvez exécuter l'indexation avec la commande suivante :
ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia
Pour les utilisateurs Windows, vous devrez utiliser set pour attribuer la variable d'environnement ALGOLIA_API_KEY .
set ALGOLIA_API_KEY=your_admin_api_key
bundle exec jekyll algolia
Notez que ALGOLIA_API_KEY doit être défini sur votre clé API d'administrateur.
Pour utiliser la recherche Algolia avec les sites hébergés GitHub Pages, suivez ce guide de déploiement. Ou ce guide de déploiement sur Netlify.
Remarque : Le plugin Jekyll Algolia peut être configuré de plusieurs manières. Assurez-vous de consulter leur documentation complète sur la façon d'exclure des fichiers et d'autres paramètres importants.
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 : /assets/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 : /assets/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 : /assets/images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /assets/images/drlight.png Actuellement author.picture n'est utilisé que dans layout: about . La taille recommandée est 300 x 300 pixels.
Pour activer le décompte du temps de lecture, ajoutez read_time: true au YAML Front Matter d'une publication ou d'une page.
Facultativement, si vous disposez d'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 sont activés par défaut et n'apparaîtront en production que lorsqu'ils seront créés avec la valeur d'environnement suivante : JEKYLL_ENV=production
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, 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 .
Par défaut, la ligne de copyright dans le pied de page affiche l'année en cours (au moment de la construction) suivie du titre de votre site. par exemple © 2018 Basically Basic.
Si vous souhaitez modifier cela, ajoutez copyright à votre fichier _config.yml avec le texte approprié :
copyright : " My custom copyright. " Ce thème fournit les mises en page suivantes, que vous pouvez utiliser en définissant la layout Front Matter 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 :
# optional alternate title to replace page.title at the top of the page
alt_title : " Basically Basic "
# optional sub-title below the page title
sub_title : " The name says it all "
# optional intro text below titles, Markdown allowed
introduction : |
Basically Basic is a Jekyll theme meant to be a substitute for the default --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
# optional call to action links
actions :
- label : " Learn More "
icon : github # references name of svg icon, see full list below
url : " http://url-goes-here.com "
- label : " Download "
icon : download # references name of svg icon, see full list below
url : " http://url-goes-here.com "
image : # URL to a hero image associated with the post (e.g., /assets/page-pic.jpg)
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
twitter : johndoetwitter
comments : false # disable comments on this postRemarque : les images de héros peuvent être superposées avec une couleur « d'accent » transparente pour les unifier avec la palette du thème. Pour l'activer, personnalisez le CSS avec le remplacement de variable Sass suivant :
$intro-image-color-overlay : true;layout: page Visuellement, cette mise en page ressemble et agit de la même manière que layout: post , avec deux différences mineures.
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), 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.
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 .
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: about Cette mise en page contient le même contenu que layout: page , avec l'ajout des éléments suivants pour afficher une image d'auteur :
author :
name : John Doe
picture : /assets/images/johndoe.png La taille picture recommandée est d'environ 300 x 300 pixels. Si l'objet author n'est pas explicitement défini dans la page d'accueil de la page À propos, le thème aura par défaut la valeur définie dans _config.yml .
S'il est vide, aucune image n'apparaîtra.
layout: cv Cette mise en page contient le même contenu que layout: page . Il exploite une norme de fichier basée sur JSON pour les données de CV afin de restituer facilement un curriculum vitæ ou un CV sans douleur.
Utilisez simplement le générateur de CV intégré au navigateur de JSON Resume pour exporter un fichier JSON et l'enregistrer dans votre projet sous _data/cv.json .
Les tailles d'image suggérées en pixels sont les suivantes :
| Image | Description | Taille |
|---|---|---|
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 | Image de la page de l'auteur. | 300 x 300 |
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 valeurs par défaut du thème peuvent être remplacées en plaçant un fichier du même nom dans le répertoire _includes ou _layouts de votre projet. Par exemple:
_includes/head.html , créez un répertoire _includes dans votre projet, copiez _includes/head.html du dossier gem de Basically Basic vers <your_project>/_includes et commencez à modifier ce fichier. Conseil de pro : pour localiser les fichiers du thème sur votre ordinateur, exécutez bundle info jekyll-theme-basically-basic . Cela renvoie l'emplacement des fichiers de thème basés sur les gemmes.
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 Basically Basic
bundle info jekyll-theme-basically-basic pour obtenir le chemin d'accès)./assets/stylesheets/main.scss à partir de là vers <your_project> .<your_project>/assets/stylesheets/main.scss .Copie de ce dépôt.
<your_project> .<your_project/assets/stylesheets/main.scss . Remarque : Pour apporter des modifications plus importantes et personnaliser les partiels Sass fournis dans la gemme. Vous devrez copier le contenu complet du répertoire _sass vers <your_project> en raison de la façon dont Jekyll lit actuellement ces fichiers.
Pour apporter des modifications de base au style du thème, les variables Sass peuvent être remplacées en les ajoutant à <your_project>/assets/stylesheets/main.scss . Par exemple, pour modifier la couleur d'accent utilisée dans le thème, ajoutez ce qui suit :
$accent-color : red ;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 Basically Basic
bundle info jekyll-theme-basically-basic pour obtenir le chemin d'accès)./assets/javascripts/main.js à partir de là vers <your_project> .<your_project>/assets/javascripts/main.js .Copie de ce dépôt.
<your_project> .<your_project>/assets/javascripts/main.js . Le thème utilise des logos de réseaux sociaux et d'autres iconographies enregistrées au format SVG pour plus de performances et de flexibilité. Lesdits SVG sont situés dans le répertoire _includes et préfixés par icon- . Chaque icône a été dimensionnée et conçue pour s'adapter à une fenêtre de visualisation 16 x 16 et optimisée avec SVGO.
| Icône | Nom de fichier |
|---|---|
| icône-flèche-gauche.svg | |
| icône-flèche-droite.svg | |
| icône-bitbucket.svg | |
| icône-calendrier.svg | |
| icône-codepen.svg | |
| icône-télécharger.svg | |
| icône-dribbble.svg | |
| icône-email.svg | |
| icône-facebook.svg | |
| icône-flickr.svg | |
| icône-github.svg | |
| icône-gitlab.svg | |
| icône-googleplus.svg | |
| icône-instagram.svg | |
| icône-lastfm.svg | |
| icône-linkedin.svg | |
| icône-pdf.svg | |
| icône-pinterest.svg | |
| icône-rss.svg | |
| icône-soundcloud.svg | |
| icône-stackoverflow.svg | |
| icône-chronomètre.svg | |
| icône-tumblr.svg | |
| icône-twitter.svg | |
| icône-xing.svg | |
| icône-youtube.svg |
Les couleurs de remplissage sont définies dans le partiel _sass/basically-basic/_icons.scss et définies avec .icon-name où le nom de la classe correspond à l'icône correspondante.
Par exemple, l'icône Twitter reçoit une couleur de remplissage de #1da1f2 comme ceci :
< span class =" icon icon--twitter " > {% include icon-twitter.svg %} </ span >Outre les actifs SVG, il existe des icônes d'assistance pour aider à générer des liens de réseaux sociaux.
| Inclure le paramètre | Description | Requis |
|---|---|---|
username | Nom d'utilisateur sur un réseau social donné | Requis |
label | Texte utilisé pour le lien hypertexte | Facultatif, par défaut le username |
Par exemple, le icon-github.html suivant inclut :
{% include icon-github . html username = jekyll label = 'GitHub' %}Affichera le code HTML suivant :
< a href =" https://github.com/jekyll " >
< span class =" icon icon--github " > < svg viewBox =" 0 0 16 16 " xmlns =" http://www.w3.org/2000/svg " fill-rule =" evenodd " clip-rule =" evenodd " stroke-linejoin =" round " stroke-miterlimit =" 1.414 " > < path d =" M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 " > </ path > </ svg > </ span >
< span class =" label " > GitHub </ span >
</ a >Pour configurer votre environnement pour développer ce thème :
cd dans /example et exécutez bundle install .Pour tester le thème localement au fur et à mesure que vous y apportez des modifications :
cd dans le dossier racine du dépôt (par exemple jekyll-theme-basically-basic ).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.
Vous avez trouvé une faute de frappe dans la documentation ? Vous souhaitez ajouter une fonctionnalité ou corriger un bug ? Ensuite, soumettez un problème par tous les moyens ou essayez de soumettre une pull request. S'il s'agit de votre première pull request, il peut être utile de lire sur GitHub Flow.
Lors de la soumission d'une pull request :
master et donnez-lui un nom significatif (par exemple my-awesome-new-feature ) et décrivez la fonctionnalité ou le correctif. Des exemples de pages peuvent être trouvés dans les dossiers /docs et /example si vous souhaitez vous attaquer aux « fruits à portée de main » comme la correction de fautes de frappe, une mauvaise grammaire, etc.
Michel Rose
La licence MIT (MIT)
Copyright (c) 2017-2021 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.
Fondamentalement, Basic intègre des icônes de The Noun Project. Les icônes sont distribuées sous Creative Commons Attribution 3.0 États-Unis (CC BY 3.0 US).
Fondamentalement, Basic intègre des photographies d'Unsplash.
Fondamentalement Basic incorpore Susy, Copyright (c) 2017, Miriam Eric Suzanne. Susy est distribué selon les termes de la licence BSD 3 clauses « nouvelle » ou « révisée ».
Fondamentalement, Basic intègre Breakpoint. Breakpoint est distribué selon les termes des licences MIT/GPL.
