Thème Paris.fr - Navigation et footer

@cOffcanvas

Exemple

Afficher le menu gauche

Menu Offcanvas

Menu 1
Menu 2

Afficher le menu haut

Menu Offcanvas - Top

Menu 1
Menu 2

Afficher le menu de droite

Menu Offcanvas - Right

Menu 1
Menu 2

Extrait de code Macro

<@cOffcanvas id='off1'>
<@chList>
    <@chItem>Menu 1</@chItem>
    <@chItem>Menu 2</@chItem>
</@chList>
</@cOffcanvas>

Extrait de code HTML

<a id="btn-off-end" class="btn btn-primary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#off-end" role="button" aria-controls="off-end" title="Afficher le menu gauche">
Afficher le menu gauche
<span class="visually-hidden">Afficher le menu gauche</span>
</a>
<div class="offcanvas offcanvas-end w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="off-end" aria-labelledby="off-endLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="off-endLabel">Menu Offcanvas</h2>
<button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close mt-xs" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div id="offcanvas-body-off-end" class="offcanvas-body text-break ps-xl">
<ul >
<li>
Menu 1</li>
<li>
Menu 2</li>
</ul>
</div>
</div>
<a id="btn-off-top" class="btn btn-secondary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#off-top" role="button" aria-controls="off-top" title="Afficher le menu haut">
Afficher le menu haut
<span class="visually-hidden">Afficher le menu haut</span>
</a>
<div class="offcanvas offcanvas-top w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="off-top" aria-labelledby="off-topLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="off-topLabel">Menu Offcanvas - Top </h2>
<button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close mt-xs" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div id="offcanvas-body-off-top" class="offcanvas-body text-break ps-xl">
<ul >
<li>
Menu 1</li>
<li>
Menu 2</li>
</ul>
</div>
</div>
<a id="btn-off-start" class="btn btn-primary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#off-start" role="button" aria-controls="off-start" title="Afficher le menu de droite">
Afficher le menu de droite
<span class="visually-hidden">Afficher le menu de droite</span>
</a>
<div class="offcanvas offcanvas-start w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="off-start" aria-labelledby="off-startLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="off-startLabel">Menu Offcanvas - Right </h2>
<button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close mt-xs" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<div id="offcanvas-body-off-start" class="offcanvas-body text-break ps-xl">
<ul >
<li>
Menu 1</li>
<li>
Menu 2</li>
</ul>
</div>
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

id (string) required - l'ID du composant hors-canvas.
position (string) optionnal - la position du composant hors-canvas "start", "end", "top", ou "bottom".
title (string) optionnal - le titre du composant hors-canvas.
btnTitle (string) optionnal - le texte sur le bouton de bascule.
btnColor (string) optionnal - la couleur du bouton de bascule.
btnIcon (string) optionnal - l'icône pour le bouton de bascule.
btnClass (string) optionnal - classes supplémentaires pour le bouton de bascule.
bodyClass (string) optionnal - classes supplémentaires pour le corps du hors-canvas.
backdrop (boolean) optionnal - si un arrière-plan doit être affiché lorsque le composant hors-canvas est ouvert.
size (string) optionnal - la taille du composant hors-canvas "full", "half", "auto", ou "sm".
btnSize (string) optionnal - la taille du bouton de bascule.
targetUrl (string) optionnal - l'URL pour charger le contenu lorsque le composant hors-canvas est ouvert.
targetElement (string) optionnal - l'ID de l'élément dans lequel charger le contenu.
redirectForm (boolean) optionnal - si le formulaire doit être redirigé lors de la soumission.
badgeContent (string) optionnal - le contenu du badge sur le bouton de bascule.
badgeColor (string) optionnal - la couleur du badge.

Aide

Génère un composant hors-canvas pour un panneau coulissant en superposition.

@skipNav

Exemple

Effectuer quelques tabulations pour faire apparaître le menu d'accès rapide

Extrait de code Macro

<@skipNav />

Extrait de code HTML

<!-- Accessibility Skip Nav Menu-->
<nav aria-label="Accès rapide">
<ul class="skip-links">
<li><a href="http://localhost:8080/forms/navigation-et-footer.html#main">Aller au contenu principal</a></li>
<li><a id="skip-nav" href="http://localhost:8080/forms/navigation-et-footer.html#main-site-menu">Aller au menu principal</a></li>
</ul>
</nav>
<p class="mt-5 pt-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-accessible" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1" /><circle cx="12" cy="7.5" r=".5" fill="currentColor" /></svg>
Effectuer quelques tabulations pour faire apparaître le menu d'accès rapide
</p>

Paramètres

Voici la liste des différents paramètres de la macro :

Aucun

Aide

Menu d'accès rapide pour permettre d'accéder rapidement au menu principal ou au contenu principal

@cMainNav

Exemple

Extrait de code Macro

<@cMainNav hasMenu=false isSidebar=false isSidebarCollapsible=false title='Paris'>
<#-- Add your own Main Menu Content here with @cMainNavItem macro -->

Extrait de code HTML

<!-- Warning : wrong or deprecated argument(s) : isSidebarCollapsible, ... -->
<header class="theme-main-header is-fixed has-banner" id="main-banner-themeparisfr" role="banner">
<div class="main-header" style="position:static">
<nav class="navbar navbar-expand-md navbar-paris navbar-light" aria-labelledby="main-nav-title">
<a class="navbar-brand" href=".">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<hr aria-hidden="true">
<span id="main-nav-title" class="main-service-title">Paris </span>
</a>
<span class="navbar-menu-button">
<button class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarMainMenu" aria-label="Show menu" aria-controls="navbarMainMenu">
<span id="navbar-icon" >
<span></span>
<span></span>
<span></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header justify-content-center">
<div class="d-flex flex-1 flex-column bg-white-color ">
<div class="d-flex w-100 justify-content-between align-items-center px-m">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="" data-bs-target="#navbarMainMenu"></button>
</div>
<h2 class="h6 offcanvas-title flex-1 main-bg-color text-center px-auto py-sm mt-m text-white" id="navbarMainMenuOffcanvasLabel">Paris</h2>
</div>
</div>
<div class="offcanvas-body p-4 pt-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main me-auto" aria-label="Main menu">
<li class="nav-item navbar-mon-paris ms-auto" aria-label="Mon Paris">
<ul id="monparis-wrapper" class="navbar-nav mon-paris">
<li class="nav-item dropdown">
<button type="button" class="nav-link" id="dropdownMenuMonParisUser" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMonParisUser">
<div class="dropdown-content d-flex flex-column align-items-center">
<h2 class="h3">Your Mon Paris account</h2>
<p class="mt-xl pb-l">Have you already an account ?</p>
<a class="btn btn-primary btn-user btn-default-user" href="https://moncompte.rec.apps.paris.mdp/moncompte/" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect to Mon Paris</span>
</a>
<p class="py-m lh-sm">Mon Paris gives you access to all the Cityâs services and allows you to track your requests.</p>
<a class="btn btn-outline-primary btn-user btn-outline-user" href="jsp/site/Portal.jsp?page=myluteceusergu&view=createAccount" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Create an account Mon Paris</span>
</a>
<p class="mt-5 text-center">
<a href="https://www.paris.fr/pages/mentions-legales-235" title="Credits [New window]" target="_blank" >
<span class="link-label">Credits</span>
</a>
</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner page-" id="main-banner" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Thème Paris.fr</h1>
</div>
</header>
<main id="main" role="main">

Paramètres

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de la barre de navigation
class (string) optionnal - classe(s) css de la barre de navigation
title (string) required - Titre du site. Par défaut récupère le nom de la variable "favorite".
logoImg (string) required - url de l'image utilisée comme logo pour le titre du site
href (string) required - url de redirection sur le logo du titre du site
hasMenu (boolean) required - si true, le site possède un menu
isSidebar (boolean) required - si true, le menu sera vertical calé à gaucheConfigurable en BO
isSidebarCollapsible (boolean) required - si true, le menu pourra être masquéConfigurable en BO
showDefaultMenu (boolean) required - si true, affiche le menu
hasSearchMenu (boolean) required - si true, ajoute la rercherche au menu
typeSearch (string) required - Si Field, ajoute le champs de rercherche sinon un lien paramètre sur l'url de recherche précisée dans les paramètres les propriétés du site. Si la valeur est button une icone de recherche sera positionnée après le menu.
searchUrl (string) required - Url pour l'icone de recherche. Par défaut récupère la valeur de l'url de recherche précisée dans les paramètres les propriétés du site.
searchAction (string) required - Url d'action pour le formulaire nécessite typeSearch='field'
searchSolr (boolean) required - si "true" fait la recherche sur Solr et non sur le moteur de recherche par défaut.
searchParams (string) optionnal - tous champs à ajouter au formulaire nécessitent typeSearch='field'
hasLogin (boolean) required - si true, le site est authentifié et propose un bouton de login (connexion Mon Paris)
loginClass (string) optionnal - classe CSS pour le bouton de login
role (string) required - role aria par défaut
params (string) optionnal - permet d'ajouter des paramètres HTML à la barre de navigation

Aide

Navigation principale configurée par défaut dans le template "WEB-INF\templates\skin\site\themeparisfr_frameset_main_nav.html"

Authentification Mon Paris

@cMainNavItem

Exemple

Extrait de code Macro

<@cMainNav hasMenu=false isSidebar=false isSidebarCollapsible=false title='Paris' hasLogin=false params='style="position:static"'>
  <@cMainNavItem title='Home' url='.' />
  <@cMainNavItem title='Paris.fr' url='https://paris.fr' target='_blank' />

Extrait de code HTML

<!-- Warning : wrong or deprecated argument(s) : isSidebarCollapsible, ... -->
<header class="theme-main-header is-fixed has-banner" id="main-banner-themeparisfr" role="banner">
<div class="main-header" style="position:static">
<nav class="navbar navbar-expand-md navbar-paris navbar-light" aria-labelledby="main-nav-title">
<a class="navbar-brand" href=".">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<hr aria-hidden="true">
<span id="main-nav-title" class="main-service-title">Paris </span>
</a>
<span class="navbar-menu-button">
<button class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarMainMenu" aria-label="Show menu" aria-controls="navbarMainMenu">
<span id="navbar-icon" >
<span></span>
<span></span>
<span></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header justify-content-center">
<div class="d-flex flex-1 flex-column bg-white-color ">
<div class="d-flex w-100 justify-content-between align-items-center px-m">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="" data-bs-target="#navbarMainMenu"></button>
</div>
<h2 class="h6 offcanvas-title flex-1 main-bg-color text-center px-auto py-sm mt-m text-white" id="navbarMainMenuOffcanvasLabel">Paris</h2>
</div>
</div>
<div class="offcanvas-body p-4 pt-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main me-auto" aria-label="Main menu">
</ul>
</div>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner page-" id="main-banner" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Thème Paris.fr</h1>
</div>
</header>
<main id="main" role="main">

Paramètres

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique de l'élément de navigation
class (string) optionnal - classe(s) css de l'élément de navigation
title (string) required - titre de l'élément de navigation
url (string) required - url de redirection de l'élément de navigation
target (string) optionnal - les valeurs possibles sont '', _top, _blank, _parent
showTitle (boolean) required - ajoute l'attribute title avec le libellé du paramètre "title"
params (string) optionnal - permet d'ajouter des paramètres HTML à l'élément de navigation

Aide

Entrée de menu pour le menu de navigation

@cMainNavUser

Exemple

Menu non connecté

Menu connecté "John Doe"

Extrait de code Macro

${'<@cMainNavUser connected=true username=\'User Name\' logout=\'AgLogout\' />'}

Extrait de code HTML

<hr>
<p>Menu non connecté</p>
<hr>
<!-- Warning : wrong or deprecated argument(s) : isSidebarCollapsible, ... -->
<header class="theme-main-header is-fixed has-banner" id="main-banner-themeparisfr" role="banner">
<div class="main-header menuConnect" style="position:static">
<nav class="navbar navbar-expand-md navbar-paris navbar-light" aria-labelledby="main-nav-title">
<a class="navbar-brand" href=".">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<hr aria-hidden="true">
<span id="main-nav-title" class="main-service-title">Paris </span>
</a>
<span class="navbar-menu-button">
<button class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarMainMenu" aria-label="Show menu" aria-controls="navbarMainMenu">
<span id="navbar-icon" >
<span></span>
<span></span>
<span></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header justify-content-center">
<div class="d-flex flex-1 flex-column bg-white-color ">
<div class="d-flex w-100 justify-content-between align-items-center px-m">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="" data-bs-target="#navbarMainMenu"></button>
</div>
<h2 class="h6 offcanvas-title flex-1 main-bg-color text-center px-auto py-sm mt-m text-white" id="navbarMainMenuOffcanvasLabel">Paris</h2>
</div>
</div>
<div class="offcanvas-body p-4 pt-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main me-auto" aria-label="Main menu">
<li class="nav-item navbar-mon-paris ms-auto" aria-label="Mon Paris">
<ul id="monparis-wrapper" class="navbar-nav mon-paris">
<li class="nav-item dropdown">
<button type="button" class="nav-link" id="dropdownMenuMonParisUser" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMonParisUser">
<div class="dropdown-content d-flex flex-column align-items-center">
<h2 class="h3">Your Mon Paris account</h2>
<p class="mt-xl pb-l">Have you already an account ?</p>
<a class="btn btn-primary btn-user btn-default-user" href="https://moncompte.rec.apps.paris.mdp/moncompte/" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect to Mon Paris</span>
</a>
<p class="py-m lh-sm">Mon Paris gives you access to all the Cityâs services and allows you to track your requests.</p>
<a class="btn btn-outline-primary btn-user btn-outline-user" href="jsp/site/Portal.jsp?page=myluteceusergu&view=createAccount" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Create an account Mon Paris</span>
</a>
<p class="mt-5 text-center">
<a href="https://www.paris.fr/pages/mentions-legales-235" title="Credits [New window]" target="_blank" >
<span class="link-label">Credits</span>
</a>
</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner page-" id="main-banner" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Thème Paris.fr</h1>
</div>
</header>
<main id="main" role="main">
</main>
<hr>
<p>Menu connecté "John Doe"</p>
<hr>
<!-- Warning : wrong or deprecated argument(s) : isSidebarCollapsible, ... -->
<header class="theme-main-header is-fixed has-banner" id="main-banner-themeparisfr" role="banner">
<div class="main-header menuConnect" style="position:static">
<nav class="navbar navbar-expand-md navbar-paris navbar-light" aria-labelledby="main-nav-title">
<a class="navbar-brand" href=".">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<hr aria-hidden="true">
<span id="main-nav-title" class="main-service-title">Paris </span>
</a>
<span class="navbar-menu-button">
<button class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarMainMenu" aria-label="Show menu" aria-controls="navbarMainMenu">
<span id="navbar-icon" >
<span></span>
<span></span>
<span></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header justify-content-center">
<div class="d-flex flex-1 flex-column bg-white-color ">
<div class="d-flex w-100 justify-content-between align-items-center px-m">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="" data-bs-target="#navbarMainMenu"></button>
</div>
<h2 class="h6 offcanvas-title flex-1 main-bg-color text-center px-auto py-sm mt-m text-white" id="navbarMainMenuOffcanvasLabel">Paris</h2>
</div>
</div>
<div class="offcanvas-body p-4 pt-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main me-auto" aria-label="Main menu">
<li class="nav-item navbar-mon-paris ms-auto" aria-label="Mon Paris">
<ul id="monparis-wrapper" class="navbar-nav mon-paris">
<li class="nav-item dropdown">
<button type="button" class="nav-link" id="dropdownMenuMonParisUser" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMonParisUser">
<div class="dropdown-content d-flex flex-column align-items-center">
<h2 class="h3">Your Mon Paris account</h2>
<p class="mt-xl pb-l">Have you already an account ?</p>
<a class="btn btn-primary btn-user btn-default-user" href="https://moncompte.rec.apps.paris.mdp/moncompte/" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect to Mon Paris</span>
</a>
<p class="py-m lh-sm">Mon Paris gives you access to all the Cityâs services and allows you to track your requests.</p>
<a class="btn btn-outline-primary btn-user btn-outline-user" href="jsp/site/Portal.jsp?page=myluteceusergu&view=createAccount" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" arialabelledby="paris-icon-user-paris-title" focusable="false" role="img" aria-hidden="true">
<title id="paris-icon-user-paris-title">Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Create an account Mon Paris</span>
</a>
<p class="mt-5 text-center">
<a href="https://www.paris.fr/pages/mentions-legales-235" title="Credits [New window]" target="_blank" >
<span class="link-label">Credits</span>
</a>
</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner page-" id="main-banner" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Thème Paris.fr</h1>
</div>
</header>
<main id="main" role="main">
</main>

Paramètres

Voici la liste des différents paramètres de la macro :

id (string) optionnal - identifiant unique du menu
class (string) optionnal - classe(s) css du menu
connected (boolean) required - indique si une connexion utilisateur existe
userName (boolean) required - nom de l'utilisateur si connecté
urlConnect (string) required - url de connexion ou de déconnexion
btnToggle (boolean) required - ouvre le menu dans un dropdown
userFullName (string) optionnal - nom de l'utilisateur à afficher
userEmail (string) optionnal - email de l'utilisateur à afficher
userInitials (string) optionnal - initiales de l'utilisateur à afficher
hasIcon (boolean) required - permet d'afficher ou non l'icone utilisateur
title (string) required - libellé pour les icônes
params (string) optionnal - permet d'ajouter des paramètres HTML au menu

Aide

Menu Mon Paris

Il n'est pas nécessaire de mettre cette macro en surcharge dans la macro @cMainNav. Elle est chargée par défaut si la config est en place

PRE-REQUIS: activer dans le BO les plugins suivants : myLutece, OATH2

Il est possible de modifier l'environnement de connexion MonParis via le BO en allant dans : Site/Gestion des propriétés du Site/Configuration du Thème Paris/Mon Paris

@cMainBanner

Exemple

Extrait de code Macro

<@cMainBanner title='Banner_01' imageSrc='images/local/skin/banner.jpg' id='banner_01'/>

<@cMainBanner title='Banner_02' id='banner_02'/>

<@cMainBanner title='Banner_03' class='internal' imageSrc='images/local/skin/banner.jpg' id='banner_03'/>

<@cMainBanner title='Banner_04' class='internal' id='banner_04'/>

Extrait de code HTML

<div class="banner bg-banner page-" id="banner_01" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Banner_01</h1>
</div>
<hr>
<div class="banner bg-banner page-" id="banner_02" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Banner_02</h1>
</div>
<hr>
<div class="banner internalbg-banner page-" id="banner_03" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Banner_03</h1>
</div>
<hr>
<div class="banner internalbg-banner page-" id="banner_04" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Banner_04</h1>
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

id (string) required - identifiant unique de la bannière
class (string) optionnal - classe(s) css de la bannière
title (string) required - titre de la bannière
onlyHome (boolean) required - si true, le site possède un menu
imageSrc (string) required - Chemin vers une image. Attention cette image sera placée en fond et couvrira la totalité de taille de la bannière.
params (string) optionnal - permet d'ajouter des paramètres HTML à la bannière

Aide

Image bannière sur page principale. Par défaut l'image affichée est définie dans le BO. Accéder aux propriétés du site ( menu "Administration du site / Propriétés du site" ou bouton ), onglet "Configuration du Thème Parisfr ". Dans l'onglet le champs "Image du bandeau" contient le chemin de l'image affichée. Plusieurs options permettent de gérer l'affichage de ce bandeau :

Afficher l'image sur le bandeau sur la page d'accueil du site : Afficher l'image définie dans le champs "Image du bandeau" bandeau sur la page d'accueil du site

Afficher le bandeau sur toutes les pages : Si n'est pas coché affiche seulement le bandeu sur la home page

Afficher l'image du site sur le bandeau : Si coché affiche l'image

@cBreadCrumb

Style guide @cBreadCrumb [New window] Doc Bootstrap @cBreadCrumb [New window]

Exemple

Home

Page 1

Page 2

${'<#assign ls = [ {"title":"Page 1", "url":"https://paris.fr"},{"title":"Page 2", "url":"https://www.paris.fr/municipalite"}]>'?html} ${'<@cBreadCrumb \'Home\' ls />'?html}

<nav aria-label="breadcrumb" class="breadcrumb-nav"> <div class="container"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a target="_top" href=".">Home</a> </li> <li class="breadcrumb-item "> <a href="https://paris.fr" title="Page 1" target="_top"> Page 1 </a> </li> <li class="breadcrumb-item active" aria-current="page"> Page 2 </li> </ol> </div> </nav>

Paramètres

Voici la liste des différents paramètres de la macro :

class (string) optionnal - classe(s) css de la bannière

home (string) required - Titre de la page Home. Par défaut clé Fil d'ariane disponible dans le fichier "themeparisfr_messages_fr.properties"

items (list) required - Objet JSON list avec liste d'item de page. L'objet contient un attribut 'titre' et un attribut 'url'.

params (string) optionnal - permet d'ajouter des paramètres HTML au fil d'ariane

Aide

Fil d'ariane

@cMainFooter

Style guide @cMainFooter [New window] Doc Bootstrap @cMainFooter [New window]

Exemple

Paris.fr [Nouvelle Fen�tre]
Thème Paris.fr

Paris.fr Paris.fr [Nouvelle Fen�tre]

plan du site plan du site [Nouvelle Fen�tre]

Contact Contact [Nouvelle Fen�tre]

Mentions l�gales Mentions l�gales [Nouvelle Fen�tre]

Conditions g�n�rales d'utilisation Conditions g�n�rales d'utilisation [Nouvelle Fen�tre]

Protection des donn�es Protection des donn�es [Nouvelle Fen�tre]

Accessibilit� Accessibilit� [Nouvelle Fen�tre]

Politique de cookies Politique de cookies [Nouvelle Fen�tre]

${'<@cMainFooter>'?html} ${' <#-- Add your own Footer Menu Content here with @mainNavItem macro -->'?html} ${' <@cMainNavItem title=\'Formulaires\' url=\'jsp/site/Portal.jsp?page=forms&view=stepView&id_form=1&init=true\' />'?html} ${''?html}

<footer> <div class="container"> <div class="row flex-column m-0 hide-icon-target"> <div class="main-footer col pb-3"> <a class="logo text-right" href="http://www.paris.fr" target="_blank"> <img src="themes/skin/parisfr/images/footer-logo-paris.svg" alt="" class="d-inline-block"> <span class="visually-hidden">Paris.fr [Nouvelle Fen�tre]</span> </a> <hr> <a class="text-left" title="Thème Paris.fr" href=".">Thème Paris.fr</a> </div> <div class="col justify-content-center mt-3"> <nav class="navbar" aria-label="Informations Pied de Page"> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="http://www.paris.fr" target="_blank"> Paris.fr <span class="visually-hidden">Paris.fr [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="jsp/site/Portal.jsp?page=map"> plan du site <span class="visually-hidden">plan du site [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/contact-232" target="_blank"> Contact <span class="visually-hidden">Contact [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank"> Mentions l�gales <span class="visually-hidden">Mentions l�gales [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank"> Conditions g�n�rales d'utilisation <span class="visually-hidden">Conditions g�n�rales d'utilisation [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank"> Protection des donn�es <span class="visually-hidden">Protection des donn�es [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="plugins/nonaccessible" target="_blank"> Accessibilit� <span class="visually-hidden">Accessibilit� [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/cookies-234" target="_blank"> Politique de cookies <span class="visually-hidden">Politique de cookies [Nouvelle Fen�tre]</span> </a> </li> </ul> </nav> </div> </div> </div> </footer>

Paramètres

Voici la liste des différents paramètres de la macro :

title (string) required - nom du service numérique

nested_pos (string) required - Position du contenu 'nested' passé dans la macro. Valeurs possible avant,'before' et aprés,'after'

Aide

Pied de page principal

@cMainFooterSocial

Style guide @cMainFooterSocial [New window] Doc Bootstrap @cMainFooterSocial [New window]

Exemple

Paris.fr [Nouvelle Fen�tre]
Th�me Paris.fr

Paris.fr Paris.fr [Nouvelle Fen�tre]

plan du site plan du site [Nouvelle Fen�tre]

Contact Contact [Nouvelle Fen�tre]

Mentions l�gales Mentions l�gales [Nouvelle Fen�tre]

Conditions g�n�rales d'utilisation Conditions g�n�rales d'utilisation [Nouvelle Fen�tre]

Protection des donn�es Protection des donn�es [Nouvelle Fen�tre]

Accessibilit� Accessibilit� [Nouvelle Fen�tre]

Politique de cookies Politique de cookies [Nouvelle Fen�tre]

Nous suivre

Recevez chaque semaine l'actualit� de votre ville sur les r�seaux sociaux

${'<@cMainFooterSocial title=\'Exemple\'>'?html} ${' <#-- Add your own Footer Menu Content here with @mainNavItem macro -->'?html} ${' <@cMainNavItem title=\'Formulaires\' url=\'jsp/site/Portal.jsp?page=forms&view=stepView&id_form=1&init=true\' />'?html} ${''?html}

<footer class="social"> <div class="row m-0"> <div class="col-12 col-md-7"> <div class="main-footer justify-content-around py-4"> <div class="d-flex align-items-center justify-content-center justify-content-lg-start w-100"> <a class="logo hide-icon-target" href="http://www.paris.fr" target="_blank"> <img src="themes/skin/parisfr/images/footer-logo-paris.svg" alt="" class="d-inline-block"> <span class="visually-hidden">Paris.fr [Nouvelle Fen�tre]</span> </a> <hr> <a class="site" title="Th�me Paris.fr" alt="Paris.fr" href=".">Th�me Paris.fr</a> </div> </div> <div class="main-footer justify-content-around"> <nav class="navbar d-flex align-items-center" aria-label="Informations Pied de Page"> <ul class="nav d-flex justify-content-center justify-content-md-start"> <li class="nav-item"> <a class="nav-link" href="http://www.paris.fr" target="_blank"> Paris.fr <span class="visually-hidden">Paris.fr [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="jsp/site/Portal.jsp?page=map"> plan du site <span class="visually-hidden">plan du site [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/contact-232" target="_blank"> Contact <span class="visually-hidden">Contact [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank"> Mentions l�gales <span class="visually-hidden">Mentions l�gales [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank"> Conditions g�n�rales d'utilisation <span class="visually-hidden">Conditions g�n�rales d'utilisation [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/mentions-legales-235" target="_blank"> Protection des donn�es <span class="visually-hidden">Protection des donn�es [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="plugins/nonaccessible" target="_blank"> Accessibilit� <span class="visually-hidden">Accessibilit� [Nouvelle Fen�tre]</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.paris.fr/pages/cookies-234" target="_blank"> Politique de cookies <span class="visually-hidden">Politique de cookies [Nouvelle Fen�tre]</span> </a> </li> </ul> </nav> </div> </div> <div class="col-12 main-bg-color col-md-5 d-flex justify-align-items"> <div class="social-links"> <h2 class="paris-footer-social-title text-center text-gray">Nous suivre</h2> <ul class="list-inline text-center"> <li class="list-inline-item"> <a class="social-link has-icon hide-icon-target" target="_blank" href="https://www.facebook.com/paris"> <svg class="paris-icon paris-icon-facebook" role="img" aria-labelledby="paris-icon-title-fb" focusable="false"> <title id="paris-icon-title-fb">Facebook </title> <use xlink:href="#paris-icon-facebook"></use> </svg> </a> </li> <li class="list-inline-item"> <a class="social-link has-icon hide-icon-target" target="_blank" href="https://twitter.com/paris"> <svg class="paris-icon paris-icon-x" role="img" aria-labelledby="paris-icon-title-tw" focusable="false"> <title id="paris-icon-title-x">Twitter</title> <use xlink:href="#paris-icon-x"></use> </svg> </a> </li> <li class="list-inline-item"> <a class="social-link has-icon hide-icon-target" target="_blank" href="https://www.instagram.com/paris_maville/"> <svg class="paris-icon paris-icon-instagram" role="img" aria-labelledby="paris-icon-title-in" focusable="false"> <title id="paris-icon-title-in">Instagram</title> <use xlink:href="#paris-icon-instagram"></use> </svg> </a> </li> <li class="list-inline-item"> <a class="social-link has-icon hide-icon-target" target="_blank" href="https://www.linkedin.com/company/villedeparis/"> <svg class="paris-icon paris-icon-linkedin" role="img" aria-labelledby="paris-icon-title-li" focusable="false"> <title id="paris-icon-title-li">LinkedIn</title> <use xlink:href="#paris-icon-linkedin"></use> </svg> </a> </li> </ul> <p class="paris-footer-social-title text-center">Recevez chaque semaine l'actualit� de votre ville sur les r�seaux sociaux</p> </div> </div> </div> </footer>

Paramètres

Voici la liste des différents paramètres de la macro :

title (string) required - nom du service numérique

nested_pos (string) required - position du contenu 'nested' passé dans la macro. Valeurs possible avant,'before' et aprés,'after'

socialNested (string) optionnal - position du contenu 'nested' passé dans la macro. Valeurs possible avant,'before' et après,'after'

align (string) required - alignement de la partie "menu" dans le pied de page. Valeurs possibles : 'arround' | 'between' | 'start' | 'end' | 'evenly'

classColMain (string) required - taille de la zone "menu"

classColSocial (string) required - taille de la zone "social"

Aide

Pied de page principal avec les Boutons Réseaux Sociaux de Paris.fr