Foire aux questions

Lektor est un outil simple pour générer un site statique avec une interface d'administration. Électron est un thème de Lektor enrichi avec de nombreuses possibilités d’affichage en CSS et un back-office plus facile à utiliser.

Votre question n'est pas listée sur cette page ? Contactez-moi directement pour en parler.

Télécharger la FAQ

Back-office de Lektor+Électron
Interface d'administration de Lektor+Électron
Pourquoi avoir nommé « Électron » ce thème Lektor ?

Plusieurs raisons ont guidées ce choix de nom :

Premiers pas avec Lektor+Électron

Comment créer une nouvelle page ?

Par l’interface

Positionnez-vous sur la page d’accueil, puis cliquer sur le crayon en haut à droite pour accéder à la partie admin. Dans la partie admin, « action sur les pages », le lien « ajouter une page » pour créer la nouvelle page.

NB : Si vous vous positionnez sur une autre page que la page d’accueil, vous allez créer une sous-page de la page sélectionnée.

Manuellement (déconseillé)

Dans le dossier content, dupliquer un dossier de page existante, renommez-le et modifiez son contenu.

Comment publier son site sur le serveur ?

Dans l’interface d’administration, cliquez sur l’icône nuage en haut à droite et choisir « serveur ».

Comment ajouter ou enlever une page du menu ?

Après avoir créé la page, allez dans l’interface d’administration. Au dessus des « champs système », remplissez si nécessaire les champs « titre dans le menu » et « ordre d’affichage dans le menu ». Dans ce dernier champs, utilisez les numéros pour modifier l’arborescence :

  1. 1 = 1er lien du menu
  2. 2 = 2ème lien du menu, etc.

Pour que la page ne s’ajoute pas dans le menu, indiquez « -1 ».

Quelle est la différence entre page masquée, page non découvrable et page absente du menu ?

La page masquée ne sera pas générée en HTML, elle n’est donc consultable qu’en local sur votre ordinateur en passant par la liste des page de l’interface admin. Elle sera bien sûr absente de la page plan du site et du menu. La page non découvrable est générée en HTML mais non-présente dans le plan du site ni dans le menu. Elle doit être liée depuis une autre page du site pour qu’un utilisateur puisse y accéder facilement.

La page non découvrable est générée en HTML mais non-présente dans le plan du site ni dans le menu. Elle doit être liée depuis une autre page du site pour qu’un utilisateur puisse y accéder facilement.

La page absente du menu, comme son nom l’indique, ne sera pas présente dans le menu principal (header), mais elle sera générée en HTML et présente dans le plan du site.

Ajout de contenu

Comment mettre en gras, définir un titre, faire un lien, etc. ?

Lektor est bilingue : il comprend à la fois le Markdown et le HTML, mais je vous suggère d'utiliser autant que possible le Markdown qui est plus facile à apprendre. La barre d’outil du champs « contenu » dans l’interface d’administration devrait vous rendre très vite autonome. Si besoin, n’hésitez pas à utiliser la « page type » comme mémo de ce qui est possible.

J’attire néanmoins votre attention sur le sens de ce que vous allez écrire : il faut penser d’abord à la structuration avant de penser à l’effet graphique recherché. Au besoin, je peux vous créer un style spécifique.

Récapitulatif Markdown

Consulter les pages SimpleMDE Markdown Guide ou Markdown Guide basic Syntax

## Titre le plus important après le titre de la page
### Titre un peu moins important
#### Titre encore moins important

**mot important (en gras)**
*mot en emphase (en italique)*

Liste à puce
* 1er point d’une liste à puce
* 2ème point d’une liste à puce
* 3ème point d’une liste à puce

Liste numérotée
1. 1er point d’une liste à puce
2. 2ème point d’une liste à puce
3. 3ème point d’une liste à puce

Lien externe
[texte du lien](http://www.example.com)

Lien interne
[texte du lien](/ma-page-interne-de-mon-site)

> Citation
> Autre paragraphe de la citation
Récapitulatif HTML
<strong>mot important (en gras)

<em>mot en emphase (en italique)</em>

<a href="https://monsuperlien.fr">Texte de mon lien</a>
<a href="/mapageinterne-demonsite">Texte de mon lien</a>

<h2>Titre le plus important après le titre de la page</h2>
<h3>Titre un peu moins important</h3>

<p>paragraphe</p>

<blockquote><p>ma super citation</p><p>un autre paragraphe de ma citation</p></blockquote>

<ul><li>1er point d’une liste à puce<li>2ème point d’une liste à puce</li></ul>

<aside><p>Aparté/encart dans le texte, peut par exemple contenir/présenter une biographie, une définition d’un mot etc. Il peut être lu indépendamment du reste du contenu</p></aside>

&nbsp; permet de faire une espace insécable, pour empêcher un retour à la ligne avant un signe de ponctuation double ( : ou ? ou ! ou ; par exemple), à ne pas négliger pour un affichage optimal sur tous types d’appareils.
Comment ajouter des catégories aux articles de mon blog ?

Cliquez sur l’accès à l’interface administration pour éditer l’article. Remplir le champs « catégories » en séparant les mots ou expressions par des virgules. Éditer ainsi chaque page d’article en vérifiant de garder la même orthographe partout, pour éviter les doublons.

Les mots-clés sélectionnés ou correspondants à l’article ouvert s’affichent en bleu et en italique pour se différencier du reste des autres catégories.

Pourquoi ne faut-il pas utiliser l’action « joindre un fichier » sur une page web ?

Cette action accessible dans le menu « action sur les pages », à gauche, va ajouter la ressource directement dans le dossier « content », sur la page concernée. Il y a donc :

C’est pour toutes ces raisons que je préconise de boycotter cette fonctionnalité et à la place de déposer vos ressources dans des dossiers spécifiques du dossier « assets/static ».

Comment insérer une image dans une page ?

Une image peut avoir différentes natures :

Déposez votre image dans le dossier « assets/static/img »

Pensez auparavant à optimiser votre image avec un outil du type : imagecompressor.com

Dans l’interface de la page où vous souhaitez insérer l’image (ou dans le fichier « contents.lr » correspondant), ajoutez le code ci-desous ou utilisez l’outil d’insertion d’image qui va générer le code Markdown suivant :

![alternative textuelle à l’image](/static/img/ma-photo.jpg)

Il est très important de bien remplir l’alternative de l’image avec un texte pertinent d’environ 3 à 7 mots soit environ 80 caractères maximum pour favoriser accessibilité et améliorer référencement naturel sur les moteurs de recherche).

Si vous avez besoin d’appliquer une classe CSS sur une image, il faut obligatoirement passer par l’écriture HTML qui est de la forme :

<img src="/static/img/image.png" alt="alternative textuelle à l’image" class="ma-classe">
Comment insérer une galerie d’images avec agrandissement ?

Avant tout, il faut prévoir les images : elles doivent être optimisées et idéalement exister en version vignette et en plus grand format.

NB : L’utilisation de vignettes (mini) n’est pas obligatoire. Les images peuvent être rétrécies automatiquement à 300px mais elles conserveront leurs proportions d’origine et cela peut être moins harmonieux qu’un gabarit fixe. De plus, l’absence de miniatures alourdit le chargement de la page puisque l’image utilisée est plus lourde.

Placer les images dans le dossier « assets/static/img/diapo » (supprimer les images d’exemple).

Le « title » de la gallery est optionnel.

Pour chaque image, préciser le chemin (path), ajouter la légende (caption), l’alternative (alt) et la classe « slide ».

[% gallery title="Photos d'Islande" %]
[% image path="diapo/diapo.jpg" mini="diapo/diapo-mini.jpg" class="slide" caption="Paysage du Suðurland." alt="Suðurland" %]
[% image path="diapo/diapo2.jpg" mini="diapo/diapo2-mini.jpg" class="slide" caption="Un des aspects de l’éruption de l’Eyjafjöll en 2010." alt="Eyjafjöll" %]
[% endgallery %]
Comment faire un lien vers un PDF sur mon site ?

Commencez par optimiser votre PDF avec un outil du type pdfcompressor.com

Il faut placer les PDF dans le dossier « assets/static/pdf »

Et dans l’éditeur, faire un lien qui génèrera le code Markdown suivant :

[texte du lien vers le pdf](/static/pdf/document.pdf)

Visuellement, le texte du lien va apparaître avec à droite la mention PDF.

Fonctionnalités avancées

Comment mettre un message d'alerte sur toutes les pages ?

À la racine des dossiers du site, ouvrez le fichier nommé « nomdusite.lektorproject »

À la ligne « #information_message = » remplir avec le message de votre choix et enlever le « # » en début de ligne afin d'activer la fonctionnalité.

Le message s'affchera sur chaque page avant le titre principal de la page. Par défaut, il sera dans un encart bleu avec une écriture blanche.

Comment modifier le nombre d'articles affichés sur l'index du blog ?

Dans le dossier « models » ouvrez dans le fichier « blog-index.ini ».

Dans le paragraphe « [pagination] » modifier « per_page = 10 » avec le nombre voulu.

Personnaliser pour chaque page les méta données du titre et de la description ?

Ainsi qu'il est expliqué dans les articles La balise title et La balise meta description, personnaliser pour chaque page les balises title et description favorise un bon référencement naturel sur les moteurs de recherche.

Par défaut sur les sites Lektor+Électron, la description est commune à l'ensemble des pages et peut-être retrouvée dans le fichier « nomdusite.lektorproject ». La balise title est plus individualisée car elle est composée ainsi : titre de la page - nom du site.

Pour personnaliser ces balises, allez sur chaque page dans l'interface d’administration en dessous de la zone de texte, et remplir les champs « Titre dans les métadonnées ». et « Description dans les métadonnées » et enregistrer les changements de la page.