---
title: "Annotations · Documentation Leiho"
description: "Indiquez ce que les rédacteurs peuvent modifier."
url: https://leiho.dev/fr/docs/annotations
lang: fr
updated: 2026-11-04
---
Guides

# Annotations

Indiquez ce que les rédacteurs peuvent modifier.

Dans un framework JavaScript, laissez le package `leiho` écrire les attributs : `field()`, `block()` et `entry()` renvoient un objet à étaler sur l’élément (JSX, Astro, Svelte ; `v-bind` dans Vue).

```jsx
import { field, block } from 'leiho';

<h1 {...field(page, 'hero_title')}>{page.fields.hero_title}</h1>
<section {...block(page, 'sections', i, 'Hero')}>…</section>
```

`field(page, 'intro', { html: true })` ajoute `data-leiho-apply="html"` ; `{ refresh: true }` ajoute `data-leiho-refresh="save"`. En HTML simple ou dans des templates serveur, écrivez à la main les attributs ci-dessous.

| Attribut | Rôle |
| --- | --- |
| `data-wp-post="12"` | Conteneur : l’ID de la publication WordPress à laquelle appartiennent les champs qu’il contient |
| `data-wp-field="hero_title"` | Élément modifiable : nom du champ ACF, ou `_title` / `_thumbnail` |
| `data-wp-field="cards.0.title"` | Les chemins à points descendent dans les repeaters, le contenu flexible et les groupes |
| `data-leiho-apply="html"` | La valeur contient du balisage (un `<span>` d’accentuation dans un titre) : injecte du HTML filtré au lieu de texte |
| `data-leiho-refresh="save"` | Pas d’aperçu en direct pour ce champ ; la page est rechargée après l’enregistrement (rendu WYSIWYG complexe) |
| `data-leiho-section="Hero"` | Nomme une section dans l’arborescence Structure |
| `data-leiho-layout="sections.2"` | Lie une section à une ligne de contenu flexible, pour que les rédacteurs puissent l’ajouter, la déplacer, la dupliquer et la supprimer |
| `data-leiho-managed="menu"` | Contenu géré ailleurs (menus, listes d’articles, WooCommerce) : un clic indique où le modifier |
| `data-leiho-edit-url="…"` | L’écran wp-admin de ce contenu géré ailleurs |

**Une seule règle :** affichez toujours un élément annoté, même quand sa valeur est vide. `{title && <h2 data-wp-field="title">…}` casse l’édition en direct, car un élément absent de la page ne peut pas être rempli. Leiho signale ces champs comme « absents de cette page ».

La navigation côté client (React Router, liens Next.js, `history.pushState`) et les nouveaux rendus sont pris en charge : le bridge réanalyse la page et réapplique les modifications non enregistrées.

Mis à jour le 4 novembre 2026[Un point pas clair sur cette page ? Dites-le-nous →](https://github.com/pixelersagency/leiho/issues/new?title=Docs%3A%20Annotations)