HTML : menu et hiérarchie de pages⚓
Conseil -
Nous partons d'un document composé uniquement d'une seule page. Tout le contenu est à l'intérieur de cette page. Nous allons chercher à faire un document en plusieurs pages HTML : une page par planète, avec un menu pour naviguer entre les planètes.
Création de la page au niveau des planètes⚓
Création du menu⚓
Nous avons défini les pages, mais il n'y a aucun moyen d'accès pour les choisir. Nous allons donc déclarer un menu (ou outline) dans page.uiTemplate.
- Changer la structure du template et ajouter une div
menuqui sera positionnée sur la page lors de l'étape de stylage.⚓ - Cette
divcontient unwidgetde typeoutlineUiWidget. Utiliser le+pour créer la balisewidgetet créer un item de typeoutlineUiWidgetnommé mainMenu.⚓ - Nous allons modifier 2 paramètres de ce
widget:⚓Scope⚓
Le scope : les éléments visibles ou non dans le menu. Un scope « all » dévoilera tous les éléments du menu.
Classes⚓
Les classes : permettent de choisir des styles CSS à appliquer dans les éléments du menu, en fonction de conditions précises (position dans l'arbre par rapport à la page courante, profondeur, type d'éléments, etc.).
Transformer⚓
Remarque - La première page est affichée par défaut⚓
Dans une publication HTML, la première page est toujours affichée, si vous voulez insérer une page d'accueil fixe, au lieu d'afficher la première planète, vous devez déclarer une nouvelle page dans universe.transf avant le for.
Résultat⚓
Notre contenu n'ayant pas une structure extra-ordinaire, vous devriez simplement voir apparaître une liste des pages en début de votre publication HTML et le contenu de la première sera affichée par défaut.
Complément - Les folders⚓
Pour créer une hiérarchie de page plus complexe, avec des sous-niveaux, on déclare des Folders et on y crée les pages à l'intérieur. L'option folderPreview est la page qui s'affiche lorsque l'utilisateur clique sur le dossier dans le menu, sans folderPreview c'est la première page de contenu du folder qui est utilisée.
Pour tenir notre cahier des charges, nous devons modifier l'emplacement de la création de page : passer d'une page pour la composition
universe.modelà une page parpartde cettecomposition.web, ouvrir l'itemuniverse.transfet modifier les données suivantes :⚓<for codes="*"> <callSubModel>dansuniverse.transfpour décharger ce transformer de la création des pages, puis la reporter dansastrobj.transf, qui dans ce cas doit être en modenavigationet noncontent.⚓