Emacs est un logiciel puissant mais il nécessite de l'investissement et des compétences. Ce n'est pas un problème pour un informaticien qui maîtrise l'anglais mais les choses peuvent s'avérer bien plus délicates si ces deux aptitudes ne sont pas réunies.
Toute personne ayant à manipuler du texte tirerait pourtant de gros avantages à utiliser le logiciel. C'est la raison pour laquelle nous avons monté le groupe local Emacsem sur Montpellier. Notre ambition est de créer une émulation suffisante pour que chacun progresse en fonction de ses besoins mais aussi de créer du contenu en français pour faciliter la compréhension de la mécanique du logiciel. Certaines personnes possèdent leur espace de publication mais beaucoup d'autres n'ont pas de blog à disposition. Ce blog vise donc à fournir un lieu pour constituer une base de connaissance aux utilisateurs d'Emacs qui souhaitent partager astuces, techniques, organisation…
Un blog statique
Ce blog est réalisé avec le moteur de site statique Hugo qui est un logiciel écrit en GO. Il offre l'avantage, outre ses performances, d'accepter les articles écrits avec la syntaxe org spécifque à Emacs. Il est également parfaitement intégré grâce au paquet easy-hugo qui, par la pression d'une simple touche (P), permet de générer et de publier le blog en ligne.
L'usage est simple, vous écrivez, vous vérifiez le fonctionnement du site en local avec la touche (p) et vous publiez avec la touche (P).
Participer à la documentation
Si vous le souhaitez, je peux publier vos articles Emacs sur ce blog. Si nous sommes suffisamment de personnes à rédiger des articles, nous aurons alors un excellent point d'entrée en français pour les nouveaux arrivants.
Si vous êtes débutant sur le logiciel, c'est d'autant plus intéressant de partager votre expérience car les nouveaux utilisateurs rencontreront probablement les mêmes points de friction. Si vous vous sortez d'une situation un peu délicate, il est utile de venir la documenter ici.
Rédiger un article
L'en-tête
---
author: "Nom de l'auteur"
title: "Titre de l'article"
date: 2020-07-09T10:45:46+02:00
archives: "2020"
tags: "misc"
description: "La description de mon article pour les moteurs de recherche"
keywords: "emacs configuration init.org"
featuredimage: /img/dossier_article/image_illustration.jpg
draft: true
---Tout article commence par un en-tête contenant les méta données. La compréhension est assez limpide mais nous allons donner quelques explications.
-
date : Elle est sous la forme année-mois-jour puis heure-minute-seconde (T) et enfin le fuseau horaire.
-
tags : correspond à la catégorie dans laquelle se trouvera l'article.
-
description : Concerne le résumé du texte qui sera affiché sur les moteurs de recherche et les réseaux sociaux. Considérez une description entre 150 et 200 caractères.
-
keywords : N'est plus utilisé sur Google mais d'autres moteurs pourraient s'en servir.
-
featuredimage : C'est l'image d'illustration que vous souhaitez voir apparaître sur les réseaux sociaux.
-
draft : Son statut de brouillon. Je me charge de le mettre à false pour publier votre article.
Le texte
Rédigez simplement avec la syntaxe org habituelle. Vous trouverez l'ensemble de la syntaxe supportée sur le compte Github de Niklas Fasching.
Le titre de votre billet sera le titre de niveau 1 (H1) ce qui créera un décalage dans le titrage de vos sections. De cette façon, L'article ne contiendra qu'un seul titre de niveau 1, ce qui est une bonne pratique.
title:"H1"
* Titre H2
** Titre H3
…Les images
Il est probable que vous souhaitiez ajouter des images pour illustrer votre propos. Il est alors important de ne pas surdimensionner ses images. Une largeur de 1000 pixels est un maximum. Mettez toutes vos images dans un dossier dont le nom est lié à votre article. Je le placerai ensuite dans le dossier img.
Il y a plusieurs façons d'ajouter une image. La syntaxe org le permet. Je suis assez attentif à la légèreté du blog. J'ai ainsi tendance à utiliser le format webp qui est le plus léger. Problème, ce format n'est pas supporté sur le navigateur Safari. Une astuce consiste donc à fournir une image de remplacement en jpg ou png pour les navigateurs qui ne supportent pas le webp.
Il n'y a aucune difficulté à l'intégrer, il suffit de copier le petit code suivant dans votre article en remplaçant votre_dossier par le nom de votre dossier et image par celui de votre image. La fonction loading="lazy" permet de ne charger que les images visibles à l'écran, ce qui allège le chargement de la page. Enfin, n'oubliez pas de décrire l'image dans la balise alt afin de faciliter la lecture du blog par nos amis déficients visuels.
#+CAPTION: Titre de l'image
#+BEGIN_export html
<picture>
<source srcset="/img/votre_dossier/image.webp" type="image/webp">
<source srcset="/img/votre_dossier/image.jpg" type="image/jpg">
<img src="/img/votre_dossier/image.jpg" loading="lazy" alt="Description de l'image">
</picture>
#+END_exportCe bout de code fonctionne également pour les gif qui peuvent aussi être convertis en webp. Pour information, la taille est divisée par 5 sans perte de qualité.
Les vidéos
Parfois, une vidéo accompagne avantageusement un texte et nous utiliserons les iframes pour leur intégration. Il s'agit encore d'un bout de code qui facilite l'intégration au site et permet à la vidéo de s'adapter à la taille des écrans. Il suffit juste de remplacer lien_vers_la_vidéo par votre lien.
<div style="position:relative; padding-top:56.25%; sandbox="allow-same-origin"; z-index: 0;">
<iframe src="https://lien_vers_la_vidéo"
loading="lazy" frameborder="none" allowfullscreen="true"
style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>Le code
Vous voudrez certainement partager un bout de code avec les lecteurs. Il suffit de mettre les balises #+BEGIN_SRC nom_du_langage et #+END_SRC comme dans l'exemple ci-dessous. Le résultat sera identique aux bouts de code de cet article et comprendra la coloration syntaxique.
#+BEGIN_SRC elisp (bout_de_code_en_elisp) #+END_SRC
Je pense que vous avez dorénavant toutes les armes pour écrire des articles sur ce blog. À vos claviers !