Sith/howto/statics/index.html

2925 lines
60 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="fr" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Le site de l'association des étudiants de l'UTBM">
<link rel="canonical" href="https://ae-utbm.github.io/sith/howto/statics/">
<link rel="prev" href="../translation/">
<link rel="next" href="../js-import-paths/">
<link rel="icon" href="../../img/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.40">
<title>Gérer les statics - Site AE UTBM</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.8c3ca2c6.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../assets/_mkdocstrings.css">
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="deeppurple" data-md-color-accent="deeppurple">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#cest-quoi-les-fichiers-statics" class="md-skip">
Aller au contenu
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="En-tête">
<a href="../.." title="Site AE UTBM" class="md-header__button md-logo" aria-label="Site AE UTBM" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Site AE UTBM
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Gérer les statics
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="deeppurple" data-md-color-accent="deeppurple" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="blue" data-md-color-accent="blue" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Rechercher" placeholder="Rechercher" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Recherche">
<button type="reset" class="md-search__icon md-icon" title="Effacer" aria-label="Effacer" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initialisation de la recherche
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/ae-utbm/sith" title="Aller au dépôt" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
sith
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Site AE UTBM" class="md-nav__button md-logo" aria-label="Site AE UTBM" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
Site AE UTBM
</label>
<div class="md-nav__source">
<a href="https://github.com/ae-utbm/sith" title="Aller au dépôt" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
sith
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Accueil
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Explications
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Explications
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../explanation/" class="md-nav__link">
<span class="md-ellipsis">
Accueil
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../explanation/technos/" class="md-nav__link">
<span class="md-ellipsis">
Technologies utilisées
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../explanation/conventions/" class="md-nav__link">
<span class="md-ellipsis">
Conventions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../explanation/archives/" class="md-nav__link">
<span class="md-ellipsis">
Archives
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Tutoriels
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Tutoriels
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tutorial/install/" class="md-nav__link">
<span class="md-ellipsis">
Installer le projet
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/install-advanced/" class="md-nav__link">
<span class="md-ellipsis">
Installer le projet (avancé)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/devtools/" class="md-nav__link">
<span class="md-ellipsis">
Configurer son éditeur
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/structure/" class="md-nav__link">
<span class="md-ellipsis">
Structure du projet
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/perms/" class="md-nav__link">
<span class="md-ellipsis">
Gestion des permissions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/groups/" class="md-nav__link">
<span class="md-ellipsis">
Gestion des groupes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/etransaction/" class="md-nav__link">
<span class="md-ellipsis">
Etransactions
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
How-to
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
How-to
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../querysets/" class="md-nav__link">
<span class="md-ellipsis">
L'ORM de Django
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../migrations/" class="md-nav__link">
<span class="md-ellipsis">
Gérer les migrations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../translation/" class="md-nav__link">
<span class="md-ellipsis">
Gérer les traductions
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Gérer les statics
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Gérer les statics
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table des matières">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table des matières
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#cest-quoi-les-fichiers-statics" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi les fichiers statics ?
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#lintegration-des-scss" class="md-nav__link">
<span class="md-ellipsis">
L'intégration des scss
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#lintegration-webpack" class="md-nav__link">
<span class="md-ellipsis">
L'intégration webpack
</span>
</a>
<nav class="md-nav" aria-label="L'intégration webpack">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#les-imports-au-sein-des-fichiers-de-webpack" class="md-nav__link">
<span class="md-ellipsis">
Les imports au sein des fichiers de webpack
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#comment-ca-fonctionne-le-post-processing" class="md-nav__link">
<span class="md-ellipsis">
Comment ça fonctionne le post processing ?
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../js-import-paths/" class="md-nav__link">
<span class="md-ellipsis">
Ajouter un chemin d'import javascript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../prod/" class="md-nav__link">
<span class="md-ellipsis">
Configurer pour la production
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../logo/" class="md-nav__link">
<span class="md-ellipsis">
Ajouter un logo de promo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../subscriptions/" class="md-nav__link">
<span class="md-ellipsis">
Ajouter une cotisation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../weekmail/" class="md-nav__link">
<span class="md-ellipsis">
Modifier le weekmail
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../terminal/" class="md-nav__link">
<span class="md-ellipsis">
Terminal
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../direnv/" class="md-nav__link">
<span class="md-ellipsis">
Direnv
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Reference
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_1" >
<label class="md-nav__link" for="__nav_5_1" id="__nav_5_1_label" tabindex="0">
<span class="md-ellipsis">
accounting
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_1">
<span class="md-nav__icon md-icon"></span>
accounting
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/accounting/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/accounting/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
<label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
<span class="md-ellipsis">
antispam
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_2">
<span class="md-nav__icon md-icon"></span>
antispam
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/antispam/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/antispam/forms/" class="md-nav__link">
<span class="md-ellipsis">
Forms
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" >
<label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0">
<span class="md-ellipsis">
club
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_3">
<span class="md-nav__icon md-icon"></span>
club
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/club/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/club/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" >
<label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="0">
<span class="md-ellipsis">
com
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_4">
<span class="md-nav__icon md-icon"></span>
com
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/com/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/com/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_5" >
<label class="md-nav__link" for="__nav_5_5" id="__nav_5_5_label" tabindex="0">
<span class="md-ellipsis">
core
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_5">
<span class="md-nav__icon md-icon"></span>
core
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/core/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/core/model_fields/" class="md-nav__link">
<span class="md-ellipsis">
Champs de modèle
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/core/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/core/schemas/" class="md-nav__link">
<span class="md-ellipsis">
Schemas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/core/api_permissions/" class="md-nav__link">
<span class="md-ellipsis">
Api permissions
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_6" >
<label class="md-nav__link" for="__nav_5_6" id="__nav_5_6_label" tabindex="0">
<span class="md-ellipsis">
counter
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_6">
<span class="md-nav__icon md-icon"></span>
counter
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/counter/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/counter/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/counter/schemas/" class="md-nav__link">
<span class="md-ellipsis">
Schemas
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_7" >
<label class="md-nav__link" for="__nav_5_7" id="__nav_5_7_label" tabindex="0">
<span class="md-ellipsis">
eboutic
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_7">
<span class="md-nav__icon md-icon"></span>
eboutic
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/eboutic/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/eboutic/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_8" >
<label class="md-nav__link" for="__nav_5_8" id="__nav_5_8_label" tabindex="0">
<span class="md-ellipsis">
election
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_8">
<span class="md-nav__icon md-icon"></span>
election
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/election/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/election/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_9" >
<label class="md-nav__link" for="__nav_5_9" id="__nav_5_9_label" tabindex="0">
<span class="md-ellipsis">
forum
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_9">
<span class="md-nav__icon md-icon"></span>
forum
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/forum/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/forum/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_10" >
<label class="md-nav__link" for="__nav_5_10" id="__nav_5_10_label" tabindex="0">
<span class="md-ellipsis">
galaxy
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_10">
<span class="md-nav__icon md-icon"></span>
galaxy
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/galaxy/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/galaxy/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_11" >
<label class="md-nav__link" for="__nav_5_11" id="__nav_5_11_label" tabindex="0">
<span class="md-ellipsis">
launderette
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_11">
<span class="md-nav__icon md-icon"></span>
launderette
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/launderette/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/launderette/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_12" >
<label class="md-nav__link" for="__nav_5_12" id="__nav_5_12_label" tabindex="0">
<span class="md-ellipsis">
matmat
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_12">
<span class="md-nav__icon md-icon"></span>
matmat
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/matmat/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/matmat/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_13" >
<label class="md-nav__link" for="__nav_5_13" id="__nav_5_13_label" tabindex="0">
<span class="md-ellipsis">
pedagogy
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_13">
<span class="md-nav__icon md-icon"></span>
pedagogy
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/pedagogy/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/pedagogy/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/pedagogy/schemas/" class="md-nav__link">
<span class="md-ellipsis">
Schemas
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_14" >
<label class="md-nav__link" for="__nav_5_14" id="__nav_5_14_label" tabindex="0">
<span class="md-ellipsis">
rootplace
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_14">
<span class="md-nav__icon md-icon"></span>
rootplace
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/rootplace/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/rootplace/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_15" >
<label class="md-nav__link" for="__nav_5_15" id="__nav_5_15_label" tabindex="0">
<span class="md-ellipsis">
sas
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_15_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_15">
<span class="md-nav__icon md-icon"></span>
sas
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/sas/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/sas/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/sas/schemas/" class="md-nav__link">
<span class="md-ellipsis">
Schemas
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_16" >
<label class="md-nav__link" for="__nav_5_16" id="__nav_5_16_label" tabindex="0">
<span class="md-ellipsis">
staticfiles
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_16_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_16">
<span class="md-nav__icon md-icon"></span>
staticfiles
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/staticfiles/apps/" class="md-nav__link">
<span class="md-ellipsis">
Apps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/staticfiles/storage/" class="md-nav__link">
<span class="md-ellipsis">
Storage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/staticfiles/finders/" class="md-nav__link">
<span class="md-ellipsis">
Finders
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/staticfiles/processors/" class="md-nav__link">
<span class="md-ellipsis">
Processors
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_17" >
<label class="md-nav__link" for="__nav_5_17" id="__nav_5_17_label" tabindex="0">
<span class="md-ellipsis">
subscription
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_17_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_17">
<span class="md-nav__icon md-icon"></span>
subscription
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/subscription/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/subscription/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_18" >
<label class="md-nav__link" for="__nav_5_18" id="__nav_5_18_label" tabindex="0">
<span class="md-ellipsis">
trombi
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_18_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_18">
<span class="md-nav__icon md-icon"></span>
trombi
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/trombi/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/trombi/views/" class="md-nav__link">
<span class="md-ellipsis">
Views
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table des matières">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table des matières
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#cest-quoi-les-fichiers-statics" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi les fichiers statics ?
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#lintegration-des-scss" class="md-nav__link">
<span class="md-ellipsis">
L'intégration des scss
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#lintegration-webpack" class="md-nav__link">
<span class="md-ellipsis">
L'intégration webpack
</span>
</a>
<nav class="md-nav" aria-label="L'intégration webpack">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#les-imports-au-sein-des-fichiers-de-webpack" class="md-nav__link">
<span class="md-ellipsis">
Les imports au sein des fichiers de webpack
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#comment-ca-fonctionne-le-post-processing" class="md-nav__link">
<span class="md-ellipsis">
Comment ça fonctionne le post processing ?
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1>Gérer les statics</h1>
<h2 id="cest-quoi-les-fichiers-statics">C'est quoi les fichiers statics ?<a class="headerlink" href="#cest-quoi-les-fichiers-statics" title="Permanent link">&para;</a></h2>
<p>Les fichiers statics sont tous les fichiers qui ne sont pas générés par le backend Django et qui sont téléchargés par le navigateur.
Cela comprend les fichiers css, javascript, images et autre.</p>
<p>La <a href="https://docs.djangoproject.com/fr/4.2/howto/static-files/">documentation officielle</a> est très compréhensive.</p>
<p>Pour faire court, dans chaque module d'application il existe un dossier <code>static</code>
où mettre tous ces fichiers. Django se débrouille ensuite pour aller chercher
ce qu'il faut à l'intérieur.</p>
<p>Pour accéder à un fichier static dans un template Jinja il suffit d'utiliser la fonction <code>static</code>.</p>
<div class="language-jinja highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="x"> </span><span class="c">{# Exemple pour ajouter sith/core/static/core/base.css #}</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="x"> &lt;link rel=&quot;stylesheet&quot; href=&quot;</span><span class="cp">{{</span> <span class="nv">static</span><span class="o">(</span><span class="s1">&#39;core/base.css&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="x">&quot;&gt;</span>
</span></code></pre></div>
<h2 id="lintegration-des-scss">L'intégration des scss<a class="headerlink" href="#lintegration-des-scss" title="Permanent link">&para;</a></h2>
<p>Les scss sont à mettre dans le dossier static comme le reste.
Il n'y a aucune différence avec le reste pour les inclure,
le système se débrouille automatiquement pour les transformer en <code>.css</code></p>
<div class="language-jinja highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="x"> </span><span class="c">{# Exemple pour ajouter sith/core/static/core/base.scss #}</span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="x"> &lt;link rel=&quot;stylesheet&quot; href=&quot;</span><span class="cp">{{</span> <span class="nv">static</span><span class="o">(</span><span class="s1">&#39;core/style.scss&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="x">&quot;&gt;</span>
</span></code></pre></div>
<h2 id="lintegration-webpack">L'intégration webpack<a class="headerlink" href="#lintegration-webpack" title="Permanent link">&para;</a></h2>
<p>Webpack est intégré un peu différement. Le principe est très similaire mais
les fichiers sont à mettre dans un dossier <code>static/webpack</code> de l'application à la place.</p>
<p>Pour accéder au fichier, il faut utiliser <code>static</code> comme pour le reste mais en ajouter <code>webpack/</code> comme prefix.</p>
<div class="language-jinja highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="x"> </span><span class="c">{# Example pour ajouter sith/core/webpack/alpine-index.js #}</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="x"> &lt;script src=&quot;</span><span class="cp">{{</span> <span class="nv">static</span><span class="o">(</span><span class="s1">&#39;webpack/alpine-index.js&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="x">&quot; defer&gt;&lt;/script&gt;</span>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="x"> &lt;script src=&quot;</span><span class="cp">{{</span> <span class="nv">static</span><span class="o">(</span><span class="s1">&#39;webpack/other-index.ts&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="x">&quot; defer&gt;&lt;/script&gt;</span>
</span></code></pre></div>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Seuls les fichiers se terminant par <code>index.js</code> sont exportés par webpack.
Les autres fichiers sont disponibles à l'import dans le JavaScript comme
si ils étaient tous au même niveau.</p>
</div>
<h3 id="les-imports-au-sein-des-fichiers-de-webpack">Les imports au sein des fichiers de webpack<a class="headerlink" href="#les-imports-au-sein-des-fichiers-de-webpack" title="Permanent link">&para;</a></h3>
<p>Pour importer au sein de webpack, il faut préfixer ses imports de <code>#app:</code>.</p>
<p>Exemple:</p>
<div class="language-js highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">paginated</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;#core:utils/api&quot;</span><span class="p">;</span>
</span></code></pre></div>
<h2 id="comment-ca-fonctionne-le-post-processing">Comment ça fonctionne le post processing ?<a class="headerlink" href="#comment-ca-fonctionne-le-post-processing" title="Permanent link">&para;</a></h2>
<p>Le post processing est géré par le module <code>staticfiles</code>. Les fichiers sont
compilés à la volée en mode développement.</p>
<p>Pour la production, ils sont compilés uniquement lors du <code>./manage.py collectstatic</code>.
Les fichiers générés sont ajoutés dans le dossier <code>staticfiles/generated</code>. Celui-ci est
ensuite enregistré comme dossier supplémentaire à collecter dans Django.</p>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Pied de page" >
<a href="../translation/" class="md-footer__link md-footer__link--prev" aria-label="Précédent: Gérer les traductions">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Précédent
</span>
<div class="md-ellipsis">
Gérer les traductions
</div>
</div>
</a>
<a href="../js-import-paths/" class="md-footer__link md-footer__link--next" aria-label="Suivant: Ajouter un chemin d&#39;import javascript">
<div class="md-footer__title">
<span class="md-footer__direction">
Suivant
</span>
<div class="md-ellipsis">
Ajouter un chemin d'import javascript
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.footer", "content.code.annotate", "content.code.copy", "content.tabs.link"], "search": "../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copi\u00e9 dans le presse-papier", "clipboard.copy": "Copier dans le presse-papier", "search.result.more.one": "1 de plus sur cette page", "search.result.more.other": "# de plus sur cette page", "search.result.none": "Aucun document trouv\u00e9", "search.result.one": "1 document trouv\u00e9", "search.result.other": "# documents trouv\u00e9s", "search.result.placeholder": "Taper pour d\u00e9marrer la recherche", "search.result.term.missing": "Non trouv\u00e9", "select.version": "S\u00e9lectionner la version"}}</script>
<script src="../../assets/javascripts/bundle.525ec568.min.js"></script>
</body>
</html>