THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Faire des modifications dans le CSS du template frontOffice par défaut peut paraitre un peu obscur pour celles et ceux qui avaient l'habitude d'inclure un fichier .css dans leur fichier HTML, comme au bon vieux temps. Mais bon, depuis, le développement front à un peu changé : http://tooling.github.io/book-of-modern … index.html

Une première chose: ne JAMAIS modifier les fichiers qui se trouvent dans web/assets: en effet, il s'agit d'un cache qui permet de rendre visible en ligne des fichiers qui ne sont pas censés être publiés (dans un Thelia standard, seul le contenu du dossier web devrait être publié). Comme ce cache peut être vidé à tout moment, vos modifs seraient perdues pour toujours.

Une deuxième chose : dans Thelia, le fichier CSS principal du template front-office, assets/dist/css/thelia.min.css, est généré par grunt ( https://gruntjs.com/ ) à partir d'une ribambelle de fichiers less et des directives du fichier Gruntfile.js. Donc là non plus, il ne faut pas modifier directement le fichier assets/dist/css/thelia.min.css.

Mais alors que faire ?!

Si vous n'êtes pas très à l'aise avec la console et les outils grunt et bower, sachez que Thelia sait très bien compiler tout seul et en temps réel les fichiers LESS pour produire un fichier CSS. Mais oui madame.

Pour ce faire il faut suivre la méthode suivante :

1) Travailler en mode développement, comme on devrait toujours le faire quant on fabrique une boutique Thelia 2. Voir ici comment ça marche : http://forum.thelia.net/viewtopic.php?id=11787
2) Dans le back-office, dans la configuration des variables, positionner la variable process_assets à 1, que qui indique à Thelia qu'il doit surveiller les modifications apportées aux assets. Na pas oublier de la remettre à 0 une fois en production, ça consomme de la ressource.
3) Dans le fichier layout.tpl, remplacer {stylesheets file='assets/dist/css/thelia.min.css'} par {stylesheets file='assets/src/less/thelia.less' filters='less'}, ce qui veut dire qu'on va compiler thelia.less chaque fois que ce fichier ou une de ses dépendances sera modifiée.
4) Toujours dans layout.tpl, modifier {declare_assets directory='assets/dist'} en {declare_assets directory='assets/src'}. Pour info, cette fonction permet de copier tous les assets statiques (fonts, images, js, etc.) dans le cache qui est dans web/assets.

Et voilà ! Chaque modification dans un fichier less sera désormais automatiquement prise en compte.

Inconvénients de cette méthode :

1) la compilation des .less consomme pas mal de ressources, du coup, chaque modif de style est un peu laborieuse si votre site ne tourne pas sur une machine puissante. C'est d'ailleurs en partie pour ça qu'on préfère générer les assets différemment, avec grunt , bower, gulp, webpack, etc. qui au passage permettent de faire bien plus que de simplement compiler du less.

2) On doit désormais travailler dans le dossier assets/src, et non plus dans assets/dist. Du coup, même en prod, on va rester dans assets/src. Ce n'est pas forcément un problème, mais il faut bien garder ça à l'esprit et ne plus faire de modifs dans assets/dist, voire le supprimer complètement.

Les détails sont dans la doc : http://doc.thelia.net/en/documentation/ … generation

Sur Windows, pour les allergiques à la console, une autre solution pour compiler à la demande les fichiers less est d'utiliser WinLess ( http://winless.org/ ) qui lui aussi permet de surveiller les répertoires des assets et de génère un fichier css à partir d'une collection de fichiers less.

Pour les pas-allergiques à la console qui ne veulent pas utiliser grunt, vous pouvez installer node.js, npm, et less.js : http://lesscss.org/, avec en:prime less-watch-compiler pour surveiller les changements et compiler automatiquement. Mais bon, si vous savez déjà faire ça, autant utiliser grunt.

A ce sujet, un article intéressant (bien que légèrement obsolète) sur Thelia School : http://thelia-school.com/utiliser-grunt … helia.html


OpenStudio Toulouse

Offline


C'est quand même du grand n'importe quoi, pour changer juste la couleur d'un truc ou une dim-mention de devoir déployer une tel usine à gaz, c'est parfaitement absurde.

Par contre, impossible de travailler convenablement avec chrome (ou n'importe quel autre navigateur) car le css final est toujours un sombre merde à 1 ligne ou 2 ligne genre "201e030.css" sont, «l'inspecteur» devient quasi inutilisable.

J'aimerais bien connaitre le but de ce parfait merdier ?..

Last edited by PacifickFR42 (17-02-2020 07:46:08)

Offline


ce merdier est très utile , car qui dit fichier plus petit, dit affichage plus rapide de la page, dit Google qui te référence mieux, et quand on fait un site c'est pour avoir un bon référencement

Offline


Le développement Web front a bien changés ces 10 dernières années, le ticket d'entrée est un peu plus élevé qu'au temps héroïques de la bidouille. Processer les assets (css, js, images, ...) permet d'effectuer toutes sortes de tâches: utilisation de pré-processeurs (less, sass, typescript, ...), concaténation, compression, modularisation, etc.

Ce topic parle juste de la méthode pour activer la compilation automatique du code less par Thelia (qui code encore en CSS en 2020 ?), c'est vraiment basique. Le template de base "default" utilise grunt (cf. http://thelia-school.com/utiliser-grunt … helia.html si jamais ça t’intéresse de comprendre comment sont générés les assets du template par défaut), qui est malheureusement largement obsolète, on utilise plutôt webpack de nos jours.

Pour ce qui est de debugger le CSS généré avec l'insepecteur de Chrome, c'est tout à fait possible avec les CSS Source Maps cf. cet article https://robdodson.me/debug-less-with-ch … per-tools/

Mais ceci dit, rien ne t'empêche d'utiliser du bon gros CSS des familles si tu préfères: il suffit d'utiliser templates/frontOffice/default/assets/src/css/thelia.css avec {stylesheets file='assets/src/css/thelia.css'}, et faire tes modifs directement dedans.


OpenStudio Toulouse

Offline


merci pour ma petite connaissance de webpack, c'est génial il prend tout les formats et en fait 4 fichiers directement utilisable

Offline


Haaa, si une bonne âme voulait migrer les assets du template par defaut sur Webpack, ce serait top.


OpenStudio Toulouse

Offline


Salut, ( et merci Roadster31 pour l'activation du coup! )
Il se pourrait que je sois la bonne âme (ou le bon âne à vous d'en juger dans les semaines avenirs)!

Nouvelle recrue d'une boîte qui bosse avec Thelia, j'ai créé et utilisé à titre perso déjà ce genre d'outil sur un autre CMS: https:// github.com/RomainMazB/octobercms-tailwindcss-boilerplate (je ne peut pas mettre de lien, je vous laisse enlever l'espace en trop). Il s'agit d'une configuration webpack avec un layout ultra basique dont le seul but est de fournir aux développeurs un outil pour créer plus rapidement un thème customisé. J'ai aussi créé pour ce kit un loader spécial pour webpack puisque le CMS en question avait étendu Twig pour y intégrer des filtres spéciaux pour charger les assets depuis le dossier thème.

Étant habitué à cet outil que je trouve aujourd'hui indispensable, impossible pour moi de travailler sur Thelia en passant mon temps a faire des Alt+tab puis refresh sur le navigateur à chaque fois que je veut voir le résultat d'une modif'... J'ai donc créé la configuration pour Thelia, mais ne bossant sur Thelia que depuis lundi avec, j'aurai bien aimé faire tester l'outil à des personnes plus expérimentés pour avoir des feedback avant de faire une première release. J'en ai profité pour corriger quelques petites erreurs du genre l'adresse du fichier ajax-loader.gif mal renseigné et j'ai mis à jour FontAwesome dans sa dernière version en faisant les modif nécessaires pour les icônes qui ont été dépréciés/remplacés. Des volontaires ?

Également sur le même principe que le filtre custom sur Twig, je m'attends peut être à trouver des modifs de Smarty peut être en utilisant Thelia, si vous avez des infos à m'envoyer en avance pour savoir sur quoi je vais buter ça fera gagner du temps.

Pour détailler, sur l'autre CMS on a l'habitude de charger les assets du thème avec cette syntaxe qui n'existe pas sur Twig et est propre au système :
{% 'assets/images/header.jpg' | theme %}
Et j'ai donc du créé un loader spécial pour ça afin que webpack enregistre le fichier en tant que dépendance et en lui fournissant l'adresse absolue du fichier ainsi que l'url publique finale que j'avais à déterminer en amont.

Romain!

Offline


Hello,

Je testerais ton template avec plaisir, même si je ne suis pas sur de pouvoir te faire des retours immédiats, because planning chargé.

Je ne suis pas au top sur WebPack, mais je sais qu'on utilise Laravel Mix sur nos templates maison, et que le hot reloading fonctionne très bien dès que les assets ou les sources du template sont modifiés.


OpenStudio Toulouse

Offline


Cool! Je met au propre, fait deux trois tests de plus et je t'envoie l'invitation GH. Pas de lézard pour le timing: je ferais avec le planning de tout ceux qui voudront bien le tester. Le tout c'est que je n'envoie pas un truc flingué pour me retrouver avec des critiques négatives et inutiles derrière.

Si d'autres volontaires n'hésitez pas! Sinon dès que je serais à peu près sûr de moi et que j'aurais fait le tour de la doc sur les parties concernant d'éventuels chargement d'assets pouvant être intégré via webpack, je mettrais tout ça en publique.

Offline


Excellent, merci beaucoup smile Je suis persuadé que cette modernisation du template front va intéresser du monde.


OpenStudio Toulouse

Offline


Maz wrote:

... Des volontaires ? !

Oui. Je suis intéressé par cette intégration de Webpack pour Thelia.

Offline


Repo initialisé, paré pour les tests!
Si vous voulez l'essayer, envoyez moi votre nom d'utilisateur/mail Git pour que je vous invites au repo, je la laisse en privée le temps d'effectuer les tests.

Offline


Premiers tests très concluants, j'ai cependant un truc mystérieux lié à Thelia je pense: lorsque je modifie un fichier less, il est automatiquement recompilé en CSS dans le dossier dist, le navigateur rafraîchis, mais je dois quand même rafraîchir à nouveau pour que les modifications apparaissent.

Je sais que Thelia compile les fichiers less, je me dis que peut-être Thelia "recompile" a nouveau mon CSS (ou le met en cache où je ne sais quoi d'autre) et donc au premier affichage affiche l'ancien.

Je veut garder la compilation less>css par webpack car je veut ensuite lui appliquer PurgeCSS.

Ce que j'évoque est une éventualité? ou la compilation intégrée à Thelia ignore les fichiers dont l'extension est .css?

Offline


Dans le template de base, il n'y a pas de "compilation intégrée", à moins justement de le demander comme décrit au début du topic. Par contre, les assets générés dans assets/dist sont mis en cache dans web/assets, via le mécanisme {stylesheet file="..."}, et {declare_assets directory='assets/dist'}, qui copie dans web/assets les fichiers générés dans assets/dist,  si le fichier dans assets/dist est plus récent que celui dans web/assets. Le fichier dans le cache garde en général toujours le même nom, et il se peut qu'il ne soit pas rechargé par le navigateur par le hot reload.


OpenStudio Toulouse

Offline


Bonjour tous,

Juste pour suivre wink

Offline


Bonjour à tous, j'ai une question soudainement qui me turlupine :
- En local, j'ai travaillé avec Grunt, etc, et j'ai bien modifié mes fichiers Less. De ce coté, pas de problème.
- Mais en prod, sur l'hébergement, cela veut dire qu'il faut aussi charger les fichiers Less ? Est-ce que l'on peut se contenter, en prod, de ne charger que le dossier dist ?
Merci,
Éric LM

Offline


En prod, tu dois déployer au moins le dossier dist, puisque c'est là que se trouvent les assets compilés par Grunt


OpenStudio Toulouse

Offline


Ok, ça y est. C'est la tâche "Watch" du gruntfile qui compile les fichiers Less. Donc si rien en change (c'est le cas en prod) les fichiers ne sont pas compilés, et donc on peut se contenter de ne charger que le dossier dist. C'est ça ?

Offline