Intlayer Système de Gestion de Contenu (CMS) Documentation

Le CMS Intlayer est une application qui vous permet d'externaliser votre contenu d'un projet Intlayer.

Pour cela, Intlayer introduit le concept de 'dictionnaires distants'.

Comprendre les dictionnaires distants

Intlayer fait la différence entre les dictionnaires 'locaux' et 'distants'.

• Un dictionnaire 'local' est un dictionnaire qui est déclaré dans votre projet Intlayer. Comme le fichier de declaration d'un bouton, ou votre barre de navigation. L'externalisation de votre contenu n'a pas de sens dans ce cas car ce contenu n'est pas censé changer souvent.

• Un dictionnaire 'distant' est un dictionnaire qui est géré via le CMS Intlayer. Il peut être utile de permettre à votre équipe de gérer votre contenu directement sur votre site web, et a également pour but d'utiliser les fonctionnalités de test A/B et l'optimisation automatique SEO.

Éditeur visuel vs CMS

L'Éditeur Visuel Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires locaux. Une fois qu'un changement est effectué, le contenu sera remplacé dans le code de base. Cela signifie que l'application sera reconstruite et que la page sera rechargée pour afficher le nouveau contenu.

En revanche, le CMS Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires distants. Une fois qu'un changement est effectué, le contenu n'impactera pas votre code de base. Et le site web affichera automatiquement le contenu modifié.

Intégration

Pour plus de détails sur la façon d'installer le package, consultez la section pertinente ci-dessous :

Intégration avec Next.js

Pour l'intégration avec Next.js, référez-vous au guide de configuration.

Intégration avec Create React App

Pour l'intégration avec Create React App, référez-vous au guide de configuration.

Intégration avec Vite + React

Pour l'intégration avec Vite + React, référez-vous au guide de configuration.

Configuration

1. Activer l'Éditeur dans votre fichier intlayer.config.ts

Dans votre fichier de configuration Intlayer, vous pouvez personnaliser les paramètres de l'éditeur :

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... autres paramètres de configuration  editor: {    /**     * L'ID de client et le secret de client sont nécessaires pour activer l'éditeur.     * Ils permettent d'identifier l'utilisateur qui édite le contenu.     * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (/dashboard/projects).     * clientId: process.env.INTLAYER_CLIENT_ID,     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,     */    clientId: process.env.INTLAYER_CLIENT_ID,    clientSecret: process.env.INTLAYER_CLIENT_SECRET,    /**     * Optionnel     * Par défaut `true`. Si `false`, l'éditeur est inactif et ne peut pas être accessible.     * Peut être utilisé pour désactiver l'éditeur pour des environnements spécifiques pour des raisons de sécurité, comme la production.     */    enabled: process.env.INTLAYER_ENABLED,  },};export default config;

Si vous n'avez pas d'ID de client et de secret de client, vous pouvez les obtenir en créant un nouveau client dans le tableau de bord Intlayer - Projets.

Pour voir tous les paramètres disponibles, référez-vous à la documentation de configuration.

Utilisation du CMS

Lorsque l'éditeur est installé, vous pouvez voir chaque champ indexé par Intlayer en survolant votre contenu avec votre curseur.

Si votre contenu est délimité, vous pouvez le maintenir enfoncé pour afficher le tiroir d'édition.