J4.x

Le Template Cassiopeia simplifié - Étude de cas

From Joomla! Documentation

This page is a translated version of the page J4.x:Cassiopeia Template Simplified - A Case Study and the translation is 100% complete.
Other languages:
English • ‎français
Joomla! 
4.x

Introduction

Les forums de Joomla 4 contiennent souvent des questions ou des commentaires tels que :

  • Comment puis-je personnaliser Cassiopeia ?
  • Comment puis-je créer un template simple pour Joomla 4 ?
  • Je ne veux pas utiliser Bootstrap !

Ce tutoriel aborde le deuxième point de la liste ci-dessus. Alors, qu'est-ce qu'un template et qu'est-ce qu'un modèle simple ? À bien des égards, Cassiopeia est un template simple conçu pour l'affichage général de contenu web composé d'articles et d'informations complémentaires sous forme de modules.

Un template simple peut être considéré comme ayant moins de positions de module et moins de variables que Cassiopeia. Mais attention, si votre template simple est destiné à des usages généraux, il est probable qu'il commence vraiment simple mais qu'il évolue jusqu'à devenir pas si simple et sans l'expertise et les tests qui ont été effectués pour rendre Cassiopeia fiable. Ainsi, un template simple pourrait être considéré comme un modèle avec un cas d'utilisation très bien défini et non pour des usages généraux.

Pour comprendre ce qui suit, vous devez être familier avec la structure du template Cassiopeia : Cassiopeia : Explication détaillée

Cas d'utilisation réel

J'ai un site utilisé à une seule fin : présenter des opportunités de bénévolat et permettre l'inscription en ligne dans des pays avec des organisations membres. Il a été mis en ligne juste au moment de la sortie de Joomla 1.6 en 2011 (?) et a évolué à travers les versions 2.x et 3.x jusqu'à la version 4.x de Joomla. Il est multilingue (16 langues) mais utilise un système de gestion des langues non standard et sert des branches membres en Extrême-Orient et en Extrême-Occident depuis un serveur basé en Europe.

Le site utilise deux positions de module pour le menu et le pied de page. La marque comprend un logo et un titre de page sous le menu. L'apparence générale a été conçue et/ou approuvée par un comité !

Le premier template de ce site était basé sur Beez3 et le second sur Protostar. Le template actuel a débuté avec une version précoce de Cassiopeia, mais il y avait tellement d'autres codes de composants à réviser pour Joomla 4 que le modèle de site a été négligé jusqu'au début de 2022. Le point important ici est qu'il existe un cas d'utilisation très bien défini qui est stable depuis des années et qui est susceptible de le rester pour les années à venir.

Moins évident est le choix de l'ensemble d'icônes. J'ai essayé à la fois Fontawesome et les icônes Bootstrap et j'ai décidé que je préférais ces dernières. En fait, le code du composant contient le balisage pour les deux afin que je puisse changer de templates pour une comparaison facile. De plus, je suis à l'aise avec Bootstrap et en raison de la nature internationale du site, je crois que l'utilisation des dépôts CDN Bootstrap pourrait offrir des avantages en termes de performances.

Un cas d'utilisation très bien défini ! Je pense qu'il vaut la peine de noter qu'il m'a fallu deux heures pour créer un template personnalisé fonctionnel basé sur Cassiopeia et le reste de la journée pour résoudre certains problèmes que je n'avais pas remarqués auparavant.

Structure de fichier

J'ai utilisé Eclipse PDT pour tout le développement de code. Voici la structure de mon projet PHP :

File Structure

  • Le dossier css contient le fichier user.css copié à partir du template précédent.
  • Le dossier html est initialement vide à l'exception d'un fichier index.html vide nécessaire pour l'installation.
  • Le dossier images contient les favicon du site, le logo et une autre image utilisée par le style du template.
  • Le dossier js est initialement vide à l'exception d'un fichier index.html vide nécessaire pour l'installation.
  • Le dossier language contient un sous-dossier en-GB contenant initialement cassiopeia.ini et cassiopeia.sys.ini copiés depuis language/en-GB. Ils sont renommés tpl_xxx.ini et tpl_xxx.sys.ini et le contenu est modifié. Les fichiers de langue seront copiés dans le dossier site/languages/en-GB lors de l'installation.
  • Le dossier scss est initialement vide à l'exception d'un fichier index.html vide nécessaire pour l'installation.
  • Les fichiers PHP ont été copiés à partir du template Cassiopeia.
  • Le fichier joomla.asset.json a été copié à partir de Cassiopeia.

Le fichier templateDetails a été copié à partir de Cassiopeia.

Je n'ai pas réellement besoin des dossiers vides. Ils sont là au cas où je déciderais de les utiliser ultérieurement.

Dans le reste de ce tutoriel, xxx est un espace réservé pour le nom de votre propre template.== Le fichier templateDetails.xml == Modifications :

  • Modifiez les métadonnées en haut du fichier pour correspondre à ce nouveau template.
  • Remplacez toutes les occurrences de cassiopeia en minuscules par xxx.
  • Remplacez toutes les occurrences de cassiopeia en majuscules par XXX.
  • Supprimez les positions que vous ne souhaitez pas utiliser.
  • Supprimez tous les champs de configuration que vous ne souhaitez pas utiliser.

J'ai laissé les positions et les champs de configuration pour le moment. Je pourrai les supprimer ultérieurement lorsque je serai sûr de ne pas en avoir besoin.

Le fichier joomla.assets.json

Modifiez ce fichier pour inclure ce dont vous avez besoin. Aucun contenu original n'est présent autre que la partie avant "assets". 

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "xxx",
  "version": "4.0.0",
  "description": "This file contains details of the assets of the Xxx site template.",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "bootstrap5",
      "type": "style",
      "uri": "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    },
    {
      "name": "bootstrap5",
      "type": "script",
      "uri": "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    },
    {
      "name": "bootstrapicons",
      "type": "style",
      "uri": "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css"
    },
    {
      "name": "template.user",
      "type": "style",
      "uri": "user.css",
      "dependencies": [
      ]
    }]
}

Le fichier index.php

Voici mon fichier index.php : 

<?php

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();
$wa->useScript('bootstrap5')
->useStyle('bootstrap5')
->useStyle('bootstrapicons')
->useStyle('template.user');

// Browsers support SVG favicons
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

$language = $app->getUserState('com_xxx.ini.language_joomla_code', 'en-GB');

?>
<!DOCTYPE html>
<html lang="<?php echo $language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<jdoc:include type="metas" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<jdoc:include type="styles" />
	<jdoc:include type="scripts" />
</head>

<body>
	<div class="row">
		<div class="col">
			<jdoc:include type="message" />
			<main>
				<jdoc:include type="component" />
			</main>
		</div>
	</div>

</body>
</html>

Il semble que j'ai laissé les instructions use Text et use URI par erreur. Et, si vous le souhaitez, au lieu d'insérer les métadonnées du viewport en tant que HTML, vous pouvez les ajouter avec : 

$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$language=line est spécifique au site utilisant ce template. Habituellement, cette ligne est omise et la ligne html contient lang="<?php echo $this->language; ?>".

Le fichier component.php

C'est utilisé pour afficher des informations sans le menu, la marque et le pied de page. 

<?php

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();
$wa->useScript('bootstrap5')
->useStyle('bootstrap5')
->useStyle('bootstrapicons')
->useStyle('template.user');

// Browsers support SVG favicons
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

$language = $app->getUserState('com_xxx.ini.language_joomla_code', 'en-GB');

?>
<!DOCTYPE html>
<html lang="<?php echo $language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<jdoc:include type="metas" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<jdoc:include type="styles" />
	<jdoc:include type="scripts" />
</head>

<body>

	<div class="row">
		<div class="col">
			<jdoc:include type="message" />
			<main>
				<jdoc:include type="component" />
			</main>
		</div>
	</div>

</body>
</html>

Les fichiers error.php et offline.php

Ces fichiers ont les mêmes premières lignes que les autres pages mais essentiellement le contenu original.

Conclusion

Pour voir le template décrit ici en action, visitez https://workcamps.sci.ngo/icamps/

Selon votre emplacement, vous pouvez voir ce site en anglais, en allemand, en français, en néerlandais, et ainsi de suite.

Informations connexes

Retrieved from "https://docs.joomla.org/index.php?title=J4.x:Cassiopeia_Template_Simplified_-_A_Case_Study/fr&oldid=1028101"