Un mécanisme basique de gestion de thèmes est disponible sur Sourceml.

Si vous souhaitez modifier l'affichage de Sourceml, vous pouvez créer un dossier pour votre thème, et copier dedans les fichiers sur lesquels vous voulez faire des modifications. Ces fichiers seront utilisés à la place des fichiers d'origine de Sourceml.

Ainsi vous pouvez modifier l'affichage, tout en gardant la possibilité d'upgrader votre installation de Sourceml sans perdre vos modifications.

Déclarer un nouveau thème

Commencez par indiquer dans la configuration que vous voulez utiliser un thème, en remplaçant, dans le fichier config/packages/app.yaml la ligne :

    sourceml_theme: null

Par :

    sourceml_theme: my_theme

En remplaçant my_theme par un nom de cotre choix pour votre thème.

Puis supprimez le dossier de cache, pour forcer Sourceml à recharger la configuration. Effacez le dossier prod (ou dev selon votre installation) :

var/cache/prod

Modifier les fichiers publics

Tous les fichiers publics de Sourceml (CSS, Javascript, miages...) sont dans le dossier public.

Pour modifier un fichier public, commencez par créer un dossier portant le nom de votre thème, dans le répertoire public/themes :

public/themes/my_theme

Mettons que vous souhaitez modifier le fichier :

public/app/css/style.css

Copiez-le dans votre dossier de thème, en conservant le chemin et le nom du fichier :

public/themes/my_theme/app/css/style.css

Et voilà. Votre fichier sera utilisé à la place de celui de Sourceml.

Modifier les fichiers de template HTML

Chaque bout de code HTML que Sourceml envoie aux navigateurs vient d'un fichier de template Twig. Ces fichiers se trouvent dans le dossier templates et ont une extension .twig.

Pour modifier un fichier de template, le mécanisme est le même que pour les fichiers publics, en faisant une copie du fichier twig à modifier dans votre dossier de thème. Pour les templates, ce dossier doit se trouver dans le répertoire templates/themes :

templates/themes/my_theme

Mettons par exemple que vous voulez modifier le fichier :

templates/App/base.html.twig

Copiez-le dans votre dossier de thème, en conservant le chemin et le nom du fichier :

templates/themes/my_theme/App/base.html.twig

Ce fichier sera alors utilisé à la place de celui de Sourceml.

Rafraichir le cache

Symfony utilise un mécanisme de cache pour le rendu des fichiers twig. Si après avoir modifié un fichier twig dans votre thème vous ne voyez pas la modification dans votre navigateur, videz le dossier de cache pour forcer Sourceml à regénérer le rendu des fichiers twig. Supprimez le dossier prod (ou dev selon votre installation) :

var/cache/prod

Localiser les fichier utilisés par Sourceml

Les fichiers publics

Les fichiers publics sont relativement faciles à localiser, en utilisant par exemple un outil d'inspection de code dans un navigateur.

Concernant les règles CSS, la plupart des modifications seront à faire l'un de ces fichiers :

public/app/css/style.css

public/sources/css/admin.css

public/sources/css/sources.css

Les fichiers de template

Les fichiers twigs sont pour leur part moins évidents à trouver.

Ils sont répartis dans le dossier templates, dans 3 principaux répertoires :

• App : les fichiers twigs qui traitent de la structure globale du site
• Sources : la quasi-totalité des contenus
• JQFileUpload : les fichiers twig pour les formulaires d'upload

Chacun de ces répertoires contient des fichiers et des sous-dossiers, avec des noms plus ou moins explicitent...

Un bon point de départ serait de jeter un oeil au fichier twig qui défini la structure de base du site :

templates/App/base.html.twig

Localiser un fichier twig

Sourceml est basé sur Symfony. Une approche un peu plus formelle, pour localiser un fichier twig, serait de suivre les mécanismes de Symfony qui mènent à son utilisation.

En résumé, ça pourrait donner :

• Commencez par regarder l'URL, pour trouver la route correspondante dans l'un des fichiers .yaml du dossier config/routes
• Dans la définition de la route, vous trouverez l'action et le controlleur utilisé
• Dans le code de l'action, vous verrez quel fichier twig est utilisé
• Suivez les inclusions dans le fichier twig s'il ne contient pas lui-même la partie HTML que vous cherchez à modifier

Mais Symfony est très bien documenté et si vous découvrez ce framework, je vous invite à consulter la documentation de Symfony.