Ludovic ROLAND

Blog technique sur mes expériences de développeur.

Créer un blog statique avec Octopress (7/7) : personnaliser l'apparence de son blog

28 novembre 2014

Dans le chapitre précédent, nous avons appris à utiliser un thème pré-conçu afin de personnaliser l’apparence de notre blog et se démarquer des blogs Octopress utilisant le thème par défaut.

Dans ce chapitre, nous allons voir ensemble comment personnaliser certains éléments de notre blog comme le menu, les pieds de pages ou encore la couleur du texte dans le thème actuellement mis en place.

Plan

Personnaliser les éléments à afficher

Ce que nous avons déjà vu

Dans la première partie de ce tutoriel, nous avons déjà vu qu’il était possible de personnaliser les éléments à afficher sur notre blog notamment grâce au fichier _config.yml ou encore grâce aux entêtes YAML des articles et des pages qui permettent par exemple :

  • d’afficher des boutons de partage sur les réseaux sociaux ;
  • d’afficher vos répositories GitHub ;
  • d’afficher vos liens Delicious ;
  • etc.

Ce que nous allons voir

Dans le chapitre suivant, nous allons aller encore plus loin dans la personnalisation de notre blog Octopress. En effet, si jusqu’à maintenant nous nous sommes contentés d’utiliser le fichier _config.yml pour paramétrer notre blog, nous allons maintenant mettre les mains dans le code pour par exemple modifier :

  • le menu du blog ;
  • le pied de page du blog ;
  • la couleur des textes ;
  • la couleur des arrières plans ;
  • etc.

Modifications structurelles d’un thème existant

Comme je vous le disais, dans ce chapitre, nous allons mettre les mains dans le cambouis. Dans un premier temps, nous verrons comment modifier la structure de plusieurs éléments du blog comme par exemple le menu, puis, dans un second temps, nous verrons comment personnaliser le thème de votre blog.

Nous débutons donc la modification d’un thème existant par les modifications structurelles. Dans cette partie, nous allons apprendre à personnaliser les 5 éléments suivants :

  • la balise <head> des fichiers HTML du blog ;
  • la sidebar ;
  • l’entête du blog ;
  • le menu de navigation ;
  • le pied de page du blog.

La modification structurelle des différents éléments cités ci-dessus ne consiste pas à modifier de manière hasardeuse le code source d’Octopress, mais à nous limiter à un certain nombre de fichiers placés dans un répertoire bien spécifique . Il s’agit du répertoire source_includes\custom qui, comme la capture d’écran ci-dessous le montre, contient quelques fichiers :

Modification du contenu de la balise <head>

Dans ce dossier, je vous propose de débuter par le fichier head.html qui va nous permettre de personnaliser le contenu de la balise <head> des fichiers HTML de notre blog Octopress.

Vous n’êtes pas sans savoir, que dans la structure d’une page HTML, la section définie par les balises <head></head> permet d’indiquer les informations relatives à la page comme son encodage, son titre, une description ou des mots clefs. C’est également dans cette section que l’on associe généralement la page HTML à une ou plusieurs feuilles de styles CSS où encore que l’on charge des scripts Javascript.

Ainsi, personnaliser le contenu de la section définie par les balises <head></head> permet par exemple de lier les pages HTML de votre blog à des feuilles de styles CSS supplémentaires où encore charger des scripts Javascript supplémentaires.

Si vous ouvrez le fichier head.html du dossier source_includes\custom vous devriez alors y voir le contenu par défaut suivant :

<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

Comme vous pouvez le constater, le fichier, dans son état par défaut, ne se contente que de charger 2 polices de caractères sur le site de Google Webfont. Ainsi, si vous voulez par exemple ajouter du Javascript ou du CSS, il convient de les ajouter en dessous.

Par exemple, si je souhaite charger un fichier Javascript hébergé sur internet (par exemple la bibliothèque Slick), voici ce à quoi ressemblera mon fichier head.html :

<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

<script src="//raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.min.js"></script>

Si je souhaite maintenant intégrer la même bibliothèque mais l’héberger moi même, il convient de placer le fichier slick.min.js dans le dossier source\javascripts d’Octopress. Il convient maintenant de modifier le fichier head.html afin d’indiquer un chemin relatif. L’utilisation du chemin relatif nécessite l’utilisation d’un syntaxe un peu particullière :

<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

<script src="/javascripts/slick.min.js"></script>

Comme vous pouvez le constater, il convient d’utiliser le token ** qui sera automatiquement remplacé par la racine de votre site et ce même si vous décidez de la changer dans le temps. Par exemple le token pourra être remplacé par **/ ou encore /blog/.

En effet, vous n’êtes pas sans savoir que les géants de l’internet comme Google ou Yahoo! recommandent maintenant de charger les scripts à la fin de la page HTML afin de gagner en performance. Sachez qu’Octopress a tout prévu ! Ainsi, c’est dans le fichier after_footer.html qu”il convient de renseigner le script à charger. Par défaut, voici le contenu du fichier :


{% comment %}
Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example)
{% endcomment %}

Suite à l’ajout d’un script, le fichier pourrez par exemple resembler à ça :



<script src="/javascripts/slick.min.js"></script>

Modification de la sidebar

Continuons d’explorer les modifications structurelles que l’on peut apporter à un blog Octopress en nous attaquant à la sidebar. Pour rappel, la sidebar est la barre qui se trouve à droite au niveau de votre Octopress :

Précédemment, dans ce tutoriel, nous avons vu qu’il était possible de personnaliser le contenu de la sidebar via le fichier _config.yml. Si nous avons vu que nous pouvions afficher des marques pages Delicious ou un lien vers votre profil Google+, nous n’avons encore vu comment il était possible d’organiser l’affichage de ces sections.

Si vous vous rendez dans le fichier _config.yml et plus précisément dans la section Jekyll & Plugins, vous devriez y trouver le paramètre default_asides. Ce paramètre permet à l’aide d’un tableau YAML de définir l’ordre dans lequel on souhaite afficher les différentes sections de la sidebar. Par défaut voici son contenu :

default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

Comme vous pouvez le constater, par défaut, les sections sont affichées dans l’ordre suivante :

  • les derniers posts ;
  • les repositories HitHub ;
  • les marques pages Delicious ;
  • les marques pages Pinboard ;
  • le lien vers le profil Google+.

Modifier l’ordre d’affichage est donc très simple. Il convient tout simplement de modifier l’ordre des éléments dans le tableau YAML. Sachez qu’il est possible d’aller encore plus loin dans la personnalisation de la sidebar et ce en créant nos propres sections. Les sections, qui sont en réalité des fichiers HTML, doivent alors être placé dans le dossier source_includes\custom\asides. Il convient ensuite d’ajouter notre section dans le tableau YAML du paramètre default_asides dans le fichier _config.yml.

Pratiquons un peu ! Commencez par ouvrir le dossier source_includes\custom\asides. Vous devriez alors y constater la présence du fichier about.html.

Le créateur d’Octopress se doute que nombre de bloggeurs souhaite ajouter une section “à propos”, ainsi, si elle n’est pas active par défaut, le créateur d’Octopress a tout de même créé la structure d’une telle section qu’il convient alors de compléter. Ouvrez alors le fichier dans un éditeur de texte pour y constater ls structure d’une section :

<section>
  <h1>About Me</h1>
  <p>A little something about me.</p>
</section>

Vous pouvez donc constater qu’un section se matérialise grâce aux balises HTML5 <section></section>, qu’elle possède un titre et un corps (ici un paragraphe).

Afin de pratiquer un petit peu, je vous propose un petit exercice. Vous mission sera de créer une section sociale dans la sidebar à travers le fichier social.html. Le rôle de cette section est alors d’établir la liste des réseaux sociaux sur lesquels vous possédez un profil. Cette section devra ensuite être placée en première position dans la sidebar. A vous de jouer !

La première étape consiste donc à créer le fichier social.html dans le dossier source_includes\custom\asides.

La seconde étape consiste à écrire son contenu. Comme nous venons de le voir, la section doit être délimitée par les balises HTML5 <section></section> et doit contenir un titre. Concernant le corps de la section, il s’agit ici d’une liste :

<section>
  <h1>Retrouvez moi sur...</h1>
  <ul>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">LinkedIn</a></li>
    <li><a href="#">Viadeo</a></li>
    <li><a href="#">Google+</a></li>
  </ul>
</section>

La dernière étape consiste à paramétrer l’utilisation de notre section au niveau du fichier _config.yml :

default_asides: [custom/asides/social.html, asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

Générez et prévisualisez votre blog pour y constater l’apparition de la section dans la sidebar.

Nous n’en avons pas finis avec la personnalisation de la sidebar. En effet, sachez qu’il est possible, et ce manière extrêmement simple, de personnaliser les éléments à afficher dans la sidebar suivant que vous soyez sur la page d’accueil de votre blog, sur une page ou sur un article. Pour se faire, rendez-vous dans le fichier de configuration _config.yml d’Octopress et plus précisément dans la section Jekyll & Plugins. Vous devriez alors y trouver les 3 paramètres suivants, commentés par défaut :

  • blog_index_asides qui permet de personnaliser la sidebar de la page d’accueil ;
  • post_asides qui permet de personnaliser la sidebar d’un article ;
  • page_asides qui permet de personnaliser la sidebar d’une page.

Comme pour le paramètre default_asides, qui vous l’aurez compris permet de paramétrer la sidebar par défaut, les différents paramètres acceptent pour valeur un tableau YAML.

Modification de l’entête

Après la sidebar, je vous propose de continuer notre exploration des des modifications structurelles que l’on peut apporter à un blog Octopress en nous attaquant à l’entête du blog.

L’entête d’un blog Octopress est personnalisable en modifiant le fichier header.html qui se trouve dans le dossier source_includes\custom des sources du blog. Par défaut, voici le contenu du fichier :

<hgroup>
  <h1><a href="/"></a></h1>
  
</hgroup>

Vous pouvez donc constater que l’entête par défaut est composée :

  • d’un titre de niveau 1 (balise HTML <h1></h1>) qui contient le nom du blog ainsi qu’un lien HTML vers l’index du blog ;
  • d’un titre de niveau 2 (balise HTML <h2></h2>) qui n’est affiché que dans le cas où la propriété subtitle du fichier _config.yml est renseignée.

Je vous propose de personnaliser légèrement l’entête du blog en remplaçant le sous-titre par une petite phrase dans un paragraphe (balise HTML <p></p>). Pour des raisons de facilité, cette phrase sera écrite “en dur”, ce qui est bien évidemment à éviter ! Voici alors ce à quoi pourrez ressembler le fichier header.html une fois modifiée :

<hgroup>
  <h1><a href="/"></a></h1>
  <p>Ceci est une petite phrase !</p>
</hgroup>

Générez votre blog et prévisualisez le pour constater les changements :

Modification du menu de navigation

Continuons avec la modification du menu de navigation.

Le menu de navigation d’un blog Octopress est personnalisable en modifiant le fichier navigation.html qui se trouve dans le dossier source_includes\custom des sources du blog. Par défaut, voici le contenu du fichier :

<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
</ul>

Il s’agit donc d’une simple liste HTML. Je vous propose alors de modifier cette liste pour y ajouter une entrée vers une page de notre blog (par exemple vers une page test-page que vous auriez créé précédemment). Voici ce à quoi pourrez alors resembler le fichier navigation.html après modification :

<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="/test-page/">Test Page</a></li>
</ul>

Générez votre blog et prévisualisez le pour constater l’apparition d’une nouvelle entrée :

Modification du pied de page

Terminons notre exploration des modifications structurelles possibles sur un blog Octopress en jettant un coup d’oeil au pied de page.

Comme pour les autres modifications, il est possible de modifier le pied de page en modifiant un fichier du dossier source_includes\custom. Dans le cas du pied de page, il s’agit du fichier footer.html. Par défaut, voici son contenu :

<p>
  Copyright &copy; 2023 -  -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

Comme pour d’autres éléments personnalisables que nous avons vu jusqu’à maintenant, vous pouvez constater que le pied de page intègre plusieurs données dynamiques, comme par exemple l’auteur du blog, modifiable dans le fichier _config.yml de votre blog.

Comme pour les autres éléments que nous avons vu jusqu’ici, je vous propose de modifier légèrement le pied de page du blog afin de vérifier le bon fonctionnement de la personnalisation. Ainsi, je vous propose de remplacer la notion de Copyright par celle de Copyleft. Voici alors ce à quoi pourrait ressembler le fichier footer.html après modification :

<p>
  Copyleft -  -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

Générez votre blog et prévisualisez le pour constater la modification :

Commentaires