Thème Paris.fr

@cMainNav

Exemple

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

<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="">
<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 class="visually-hidden-focusable">Show menu</span></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" role="dialog" 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="Logo de Ville de Paris – Aller vers l’accueil">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" 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 py-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu Show 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 credits page-" id="main-banner" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" style="background-image:url(images/banner_v.jpg);" >
<h1 style="color:#ffffff;">Thème Paris.fr</h1>
</div>
</header>
<main id="main" class="h-50" role="main">

Paramètres

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

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

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

<!-- 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="">
<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 class="visually-hidden-focusable">Show menu</span></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" role="dialog" 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="Logo de Ville de Paris – Aller vers l’accueil">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" 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 py-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu Show menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main me-auto" aria-label="Main menu">
<li class="nav-item">
<a class="nav-link" role="navitem" href="." >
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" role="navitem" href="https://paris.fr" target="_blank">
Paris.fr <span class="visually-hidden">[New window]</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner credits page-" id="main-banner" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" style="background-image:url(images/banner_v.jpg);" >
<h1 style="color:#ffffff;">Thème Paris.fr</h1>
</div>
</header>
<main id="main" class="h-50" 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"

<@cMainNavUser connected=true username='User Name' logout='AgLogout' />

<p class="divider">Menu non connecté</p>
<!-- 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="">
<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 class="visually-hidden-focusable">Show menu</span></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" role="dialog" 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="Logo de Ville de Paris – Aller vers l’accueil">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" 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 py-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu Show 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 mt-0 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"data-mce-svg="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img">
<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-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"data-mce-svg="paris-icon paris-icon-user" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Create an account Mon Paris</span>
</a>
<p class="mt-5 text-center">
<a href="" 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 credits page-" id="main-banner" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" style="background-image:url(images/banner_v.jpg);" >
<h1 style="color:#ffffff;">Thème Paris.fr</h1>
</div>
</header>
<main id="main" class="h-50" role="main">
</main>
<p class="divider">Menu connecté "John Doe"</p>
<!-- 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="">
<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 class="visually-hidden-focusable">Show menu</span></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</span>
</button>
</span>
<div class="offcanvas-md offcanvas-end flex-grow-1" tabindex="-1" id="navbarMainMenu" aria-labelledby="navbarMainMenuOffcanvasLabel" role="dialog" 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="Logo de Ville de Paris – Aller vers l’accueil">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" 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 py-0 p-lg-0">
<div class="navbar-main" aria-label="Main menu Show menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main me-auto" aria-label="Main menu">
<ul id="monparis-wrapper" class="navbar-nav mon-paris">
<li class="nav-item mt-0 dropdown">
<button type="button" class="nav-link" href="#" role="button" id="dropdownMenuMonParisUser" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
John Doe
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMonParisUser">
<div class="dropdown-content d-flex flex-column align-items-center">
<h2 class="h3" id="myluteceusername"></h2>
<p class="font-bold"></p>
<p>
<a class="btn btn-primary" href="jsp/site/Portal.jsp?page=mydashboard&panel=home#home" aria-label="Link to connect to Mon Paris Account" title="Link to connect to Mon Paris Account">
Mon Paris’s home
</a>
</p>
<p class="border-bottom border-b-md main-info-border-color pb-1">
<a href="jsp/site/Portal.jsp?page=mydashboard&panel=datas#datas" class="fs-sm font-bold main-info-color">Manage my account</a>
</p>
<hr>
<p class="services show main-color font-bold">Favorites services </p>
<div id="monparis-favs" class="d-flex flex-wrap justify-content-center align-items-center"></div>
<div id="monparis-apps" class="d-flex flex-wrap justify-content-center align-items-center"></div>
<p class="show">
<a class="btn btn-link-primary" href="" title="Link to disconnect from Mon Paris Account">
<span>Disconnect</span>
</a>
</p>
<p class="mt-5 text-center">
<a href="" title="Credits [New window]" target="_blank" >
<span class="link-label">Credits</span>
</a>
</p>
</div>
</div>
</li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner credits page-" id="main-banner" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" style="background-image:url(images/banner_v.jpg);" >
<h1 style="color:#ffffff;">Thème Paris.fr</h1>
</div>
</header>
<main id="main" class="h-50" 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 : plugin-mylutece, module-mylutece-oauth2, plugin-oauth2 ou module-mylutece-database

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

@skipNav

Exemple

<@skipNav />

<nav aria-label="Quick access" role="navigation">
<ul class="skip-links">
<li><a href="#main">Go to main content</a></li>
<li><a id="skip-nav" href="#main-site-menu">Go to main menu</a></li>
</ul>
<div id="top" class="visually-hidden visually-hidden-focusable">Top of the page</div>
</nav>

Paramètres

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

target (string) optionnal - Default: main, id du contenu principal.Configurable en BO
skipMenu (booelan) optionnal - Default: true, si true affiche le lien vers le menu.Configurable en BO

Aide

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

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

Cette macro n'est pas immédiatement visible sur la page.

@cMainBanner

Exemple

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

<p class="divider">Avec image</p>
<div class="banner bg-banner credits page-" id="banner_01" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" style="background-image:url(images/local/skin/banner.jpg);" >
<h1 style="color:#ffffff;">Banner_01</h1>
</div>
<p class="divider">Sans image</p>
<div class="banner credits page-" id="banner_02" data-credits="Crédit photo : Sophie Robichon / Ville de Paris" >
<h1 style="color:#ffffff;">Banner_02</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 affiche la bannière que sur la première page Configurable en BO
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. Configurable en BO
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 Configurable en BO:

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
Crédit de l'image du site sur le bandeau : Si rempli affiche le crédit pour l'image du bandeau

@cBreadCrumb

Exemple

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

<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

@cMainFooter

Exemple

${'<@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

Exemple

${'<@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

@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

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

<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"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<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"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<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.

@cGoToTop

Exemple

<@cGoToTop />

<button class="btn btn-primary fadein btn-gototop" type="button">
<span class="btn-label ">Top of the page</span>
<span class="main-info-color">
&#8593;</span>
</button>
<script>
const gototop = document.querySelector('.btn-gototop');
document.addEventListener( "DOMContentLoaded", () => {
document.addEventListener("scroll", (e) => {
if ( document.documentElement.scrollTop > 100) {
gototop.classList.add('active');
} else {
gototop.classList.remove('active');
}
});
gototop.addEventListener( 'click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
left: 0,
});
});
});
</script>

Paramètres

L'affichage du bouton "Retour en haut de page" est Configurable en BO

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

scrollLabel (string) optionnal - Nom du menu par défaut - Top of the page / Haut de page -
scrollClass (string) optionnal - Classe CSS de l'effet de scroll sur le bouton. Par défaut "primary fadein"
scrollBtnClass (list) optionnal - Classe CSS du bouton. Par défaut "btn-gototop"
scrollTop (string) optionnal - Offset top par défaut pour apparition du bouton. Par défaut 100

Thème Paris.fr

@cMainNav

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cMainNavItem

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cMainNavUser

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

Menu Mon Paris

@skipNav

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cMainBanner

Exemple

Banner_01

Banner_02

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cBreadCrumb

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cMainFooter

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cMainFooterSocial

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cOffcanvas

Exemple

Menu Offcanvas

Menu Offcanvas - Top

Menu Offcanvas - Right

Extrait de code Macro

Extrait de code HTML

Paramètres

Aide

@cGoToTop

Exemple

Extrait de code Macro

Extrait de code HTML

Paramètres

Plan du site

Paramètres