Vue d'ensemble

Le système de thèmes de Larapen vous permet de changer complètement l'apparence de votre site web en installant différents thèmes. Chaque thème fournit ses propres mises en page, styles et philosophie de design tout en utilisant le même contenu et les mêmes données.

Thèmes disponibles

Larapen propose plusieurs thèmes, chacun avec une identité visuelle distincte :

ThèmeDescriptionDisponibilité
DefaultPropre, moderne, professionnel avec une mise en page large et un espacement équilibré.Inclus avec l'application principale
CreativeAudacieux, créatif, mises en page asymétriques pour freelances et agences.Vendu séparément
ElegantÉlégant, style éditorial avec typographie raffinée et grille inspirée des magazines.Vendu séparément
MinimalistDesign épuré et minimaliste avec un espacement généreux, axé sur le contenu et la simplicité.Vendu séparément
OliveThème inspiré de la nature, tons chauds avec des formes organiques et des couleurs terreuses.Vendu séparément
TechnologyMode sombre par défaut, orienté tech pour développeurs et startups.Vendu séparément
Note : Seul le thème Default est inclus avec l'application principale Larapen. Tous les autres thèmes sont vendus séparément en tant qu'achats additionnels sur le Marketplace Larapen.

Méthodes d'installation

Méthode 1 : Via le panneau d'administration (recommandé)

  1. Connectez-vous à votre panneau d'administration sur https://votresite.com/admin.
  2. Allez dans Apparence → Thèmes.
  3. Cliquez sur « Téléverser un thème ».
  4. Sélectionnez le fichier ZIP du thème et cliquez sur Téléverser.
  5. Le système extraira le thème dans extensions/themes/{nom-theme}/ et l'enregistrera.
  6. Le nouveau thème apparaîtra dans la liste des thèmes.

Méthode 2 : Via FTP/Gestionnaire de fichiers (manuel)

  1. Téléchargez le package du thème (fichier ZIP).
  2. Extrayez le fichier ZIP sur votre ordinateur local.
  3. Téléversez le dossier du thème extrait dans extensions/themes/ sur votre serveur. Par exemple :
    • extensions/themes/creative/
    • extensions/themes/elegant/
    • extensions/themes/minimalist/
    • extensions/themes/olive/
    • extensions/themes/technology/
  4. Connectez-vous au panneau d'administration.
  5. Allez dans Apparence → Thèmes.
  6. Cliquez sur « Synchroniser » pour détecter le thème nouvellement téléversé.

Méthode 3 : Via SSH (ligne de commande)

# Extraire le thème dans le répertoire des extensions
unzip creative-theme.zip -d extensions/themes/creative/

# Publier les assets du thème (liens symboliques vers public/themes/)
php artisan theme:publish creative

# Compiler les assets du thème (compiler SCSS/JS)
npx vite build

Structure du répertoire d'un thème

Chaque thème suit une structure standardisée dans extensions/themes/{nom-theme}/ :

extensions/themes/creative/
├── theme.json              ← Manifeste (nom, version, couleurs, paramètres)
├── assets/
│   ├── css/                ← CSS compilé
│   ├── js/                 ← Fichiers JavaScript
│   ├── scss/               ← Fichiers source SCSS
│   └── images/             ← Images et icônes du thème
├── views/
│   ├── layouts/
│   │   └── master.blade.php    ← Template de mise en page principal
│   ├── pages/              ← Templates de pages
│   ├── partials/           ← Composants réutilisables (en-tête, pied, nav)
│   └── components/         ← Composants Blade
└── config.php              ← Paramètres par défaut spécifiques au thème

Activer un thème

  1. Allez dans Apparence → Thèmes dans le panneau d'administration.
  2. Vous verrez tous les thèmes installés avec des miniatures d'aperçu.
  3. Cliquez sur « Activer » sur le thème que vous souhaitez utiliser.
  4. Le changement de thème prend effet immédiatement; visitez votre site web pour le voir.
Note : Un seul thème peut être actif à la fois. L'activation d'un nouveau thème désactive automatiquement le précédent. Votre contenu, vos paramètres et vos données ne sont pas affectés; seule la présentation visuelle change.

Après l'installation

Compiler les assets du thème

Après avoir installé un nouveau thème, vous devrez peut-être compiler ses assets CSS/JS :

  1. Allez dans Apparence → Thèmes.
  2. Cliquez sur « Compiler » à côté du nouveau thème.
  3. Attendez que la compilation se termine.

Ou via SSH :

npx vite build

Configurer les paramètres du thème

  1. Allez dans Apparence → Paramètres du thème.
  2. Personnalisez les couleurs, polices, options de mise en page et autres paramètres spécifiques au thème.
  3. Cliquez sur Enregistrer. Les modifications prennent effet immédiatement.

Compatibilité thème + add-on

Les thèmes peuvent fournir des vues personnalisées pour les add-ons installés. Par exemple, le thème Creative pourrait styliser les articles de blog différemment du thème Default. Si un thème ne fournit pas de vues pour un add-on spécifique, les vues par défaut intégrées de l'add-on sont utilisées automatiquement.

Gestion des thèmes

Prévisualiser un thème

Avant d'activer un thème, vous pouvez le prévisualiser :

  1. Allez dans Apparence → Thèmes.
  2. Cliquez sur « Aperçu » sur n'importe quel thème installé.
  3. Un aperçu en direct s'ouvre dans un nouvel onglet, montrant votre contenu réel avec le design du nouveau thème.

Supprimer un thème

  1. Assurez-vous que le thème que vous souhaitez supprimer n'est pas le thème actif. Basculez d'abord vers un autre thème.
  2. Allez dans Apparence → Thèmes.
  3. Cliquez sur « Supprimer » à côté du thème inactif.
  4. Confirmez la suppression. Cela supprime les fichiers du thème de extensions/themes/.
Note : Vous ne pouvez pas supprimer le thème actuellement actif ou le thème Default (qui sert de thème de secours du système).

Dépannage

Le thème n'apparaît pas après le téléversement

  • Vérifiez la structure des dossiers : extensions/themes/{nom}/theme.json doit exister.
  • Cliquez sur « Synchroniser » sur la page des Thèmes pour re-scanner.
  • Vérifiez que le fichier theme.json est un JSON valide.

Styles manquants ou mise en page cassée

  • Compilez les assets du thème : Apparence → Thèmes → Compiler.
  • Videz le cache du navigateur avec un rafraîchissement forcé (Ctrl+Maj+R / Cmd+Maj+R).
  • Videz le cache de l'application : Paramètres → Cache → Tout vider.

Images du thème ne se chargent pas

  • Exécutez la commande de publication des assets du thème pour créer les liens symboliques corrects : via SSH : php artisan theme:publish {nom-theme}
  • Vérifiez que le lien symbolique public/themes/{nom-theme}/ existe et pointe vers le bon répertoire.

Cet article vous a-t-il été utile ?

Merci pour votre retour !

Besoin d'aide ? Créez un ticket de support

Créer un Ticket