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

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 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.

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 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).

Comment faire un lien vers un PDF sur mon site ?

De la même manière que pour les images, 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.

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 %]
Pourquoi ne 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 ».