Démarrer

Installez le thème avec Composer, puis activez-le dans la configuration de votre site.

composer require cecil/theme-leon

curl -LO https://github.com/Cecilapp/theme-leon/releases/latest/download/leon.zip
unzip leon.zip -d themes/leon

Puis continuez avec le Démarrage rapide →

Ce que vous pouvez faire

Pour aller plus loin

Les encadrés mettent une information en valeur. Utilisez :::note, :::info, :::tip, :::warning, :::danger ou :::important :

:::tip
Organisez votre contenu en dossiers imbriqués pour construire la barre latérale.
:::

Onglets

Chaque titre #### démarre un nouvel onglet. Les onglets de même libellé sont synchronisés sur toute la page, et le choix est mémorisé.

brew install cecil

scoop install cecil

curl -LO https://cecil.app/cecil.phar

:::tabs
#### macOS
Installez avec Homebrew :

```bash
brew install cecil
```

#### Windows
Installez avec Scoop :

```powershell
scoop install cecil
```

#### Linux
Téléchargez le Phar :

```bash
curl -LO https://cecil.app/cecil.phar
```
:::

Groupes de code

Un groupe de code présente des blocs de code alternatifs dans un même cadre :

brew install cecil

scoop install cecil

curl -LO https://cecil.app/cecil.phar

:::code-group
#### macOS
```bash
brew install cecil
```
#### Windows
```powershell
scoop install cecil
```
#### Linux
```bash
curl -LO https://cecil.app/cecil.phar
```
:::

Sans titres, les onglets prennent le nom du langage de chaque bloc :

theme:
  - leon

{"theme": ["leon"]}

:::code-group
```yaml
theme:
  - leon
```
```json
{"theme": ["leon"]}
```
:::

Étapes

:::steps
#### Écrire
Rédigez vos pages en Markdown.

#### Générer
Lancez `php cecil.phar build`.

#### Publier
Déployez le dossier `_site` où vous voulez.
:::

Accordéons

:::accordion
#### Qu'est-ce que Cecil ?
Un générateur de site statique, écrit en PHP, qui transforme des fichiers Markdown en site web.

#### Puis-je utiliser du HTML ?
Oui, et un élément natif `<details>` est lui aussi mis en forme comme un accordéon.
:::

Cartes

:::cards
- [Démarrage rapide](../../getting-started/quickstart/) : créer un site de zéro
- [Configuration](../../../reference/configuration/) : toutes les options du thème
:::

Imbrication

Un bloc peut en contenir d'autres : sa clôture doit alors être plus longue que la leur (::::steps … ::::).

::::steps
#### Installer
:::code-group
```bash
brew install cecil
```
```powershell
scoop install cecil
```
:::

#### Configurer
:::tip
Ajoutez `leon` à la liste `theme` de votre site.
:::

#### Générer
Lancez `cecil build`.
::::

composer require cecil/theme-leon

::::tabs
#### Composer
```bash
composer require cecil/theme-leon
```

#### Archive
:::warning
Installez aussi les thèmes de composants requis.
:::
::::

Code

Du code en ligne, des touches de clavier comme Ctrl + K, et des blocs avec coloration syntaxique :

<?php
// génère le site
$builder = Cecil\Builder::create($config);
$builder->build(['drafts' => false]);

{% for page in site.pages|sort_by_date %}
  <a href="{{ url(page) }}">{{ page.title }}</a>
{% endfor %}

Tableaux

Diagrammes

flowchart LR
  A[Markdown] --> B(Cecil)
  B --> C{Léon}
  C --> D[HTML]
  C --> E[Markdown]
  C --> F[llms.txt]

Citations et listes

La simplicité est la sophistication suprême.

1. Premier élément
2. Deuxième élément
   • Élément imbriqué
   • Un autre
3. Troisième élément

Chaque couleur est une propriété personnalisée CSS, définie pour les modes clair et sombre :

:root {
  --leon-accent: #2563eb;
}
.dark {
  --leon-page: #000;
}

Templates

Copiez n'importe quel template de themes/leon/layouts/ dans le répertoire layouts/ de votre site pour le surcharger.

leon:
  accent: ''         # couleur d'accent (ex. '#2563eb'), argile par défaut
  accent_dark: ''    # couleur d'accent en mode sombre, dérivée de `accent` par défaut
  fonts:
    bundled: true    # charge les polices embarquées
    sans: ''
    serif: ''
    mono: ''
  header:
    title: true      # titre du site à côté du logo
    cta: {}          # ex. {name: Commencer, url: /docs/}
  tabs:
    enabled: true
    sections: []
  sidebar:
    collapsed: false
  language:
    suggest: false   # suggère la traduction correspondant à la langue du navigateur
  toc:
    enabled: true
  copypage:
    enabled: true
    assistants: [claude, chatgpt] # et/ou perplexity
  github:
    repo: ''
    branch: main
    path: pages
  lastupdated: false
  footer: ''

Logo

Le logo se définit avec la clé logo à la racine de la configuration du site (pas sous leon), avec un chemin relatif à assets/ ou static/. Il est affiché avant le titre du site, dans l'en-tête et dans le pied de page :

logo: images/logo.svg

Pour utiliser un fichier différent selon le mode de couleur :

logo:
  light: images/logo.svg      # affiché sur le fond clair
  dark: images/logo-dark.svg  # affiché sur le fond sombre

Options de Cecil

Léon configure Cecil pour un site de documentation : votre configuration peut surcharger chacune de ces options.

pages:
  sortby: weight     # le préfixe `1-` du nom de fichier, ou la variable `weight`
  pagination:
    enabled: false   # les cartes d'une section listent toutes ses pages
output:
  pagetypeformats:
    page:
      markdown: true # version Markdown des pages (« Copier la page »)
    section:
      markdown: true
    homepage:
      llms: true     # fichier `llms.txt`

Pour retirer un format de sortie, passez-le à false : un tableau de booléens ajoute ou retire un format sans remplacer les autres.

Coloration syntaxique

Les blocs de code sont colorés par highlight.php par défaut. Léon met aussi en forme le résultat de tempest/highlight, plus rapide mais limité aux langages du web :

pages:
  body:
    highlight:
      engine: tempest # `highlightjs` par défaut

Groupes de résultats

Les résultats sont groupés par section, dans l'ordre de l'option flexsearch.sections :

flexsearch:
  sections:
    docs:
      limit: 6
    reference:
      limit: 4

Configuration multilingue

Traduisez les options dans la clé config de chaque langue. Le bloc leon est fusionné avec celui de la langue par défaut : ne définissez que les clés traduites.

leon:
  header:
    cta:
      name: Get started
      url: /docs/getting-started/quickstart/
  footer: 'Released under the MIT license.'
languages:
  - code: en
    name: English
    locale: en_US
  - code: fr
    name: Français
    locale: fr_FR
    config:
      leon:
        header:
          cta:
            name: Commencer # l'`url` est héritée
        footer: 'Publié sous licence MIT.'

Langue du navigateur

Avec leon.language.suggest: true, un bandeau suggère la traduction de la page correspondant à la langue du navigateur, rédigé dans cette langue. Il reste affiché jusqu'à ce que le visiteur le suive, le ferme ou choisisse une langue avec le sélecteur.

composer require cecil/theme-leon

Composer installe Léon dans themes/leon, et ses dépendances dans themes/flexsearch et themes/darkmodetoggle.

Manuellement

Téléchargez la dernière version et décompressez-la dans themes/leon.

Prérequis