| title | altLangPage | dateModified | description | layout | language | overwriteBreadcrumbs | feedback | css | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
GCWeb, le thème WET-BOEW de Canada.ca |
index-en.html |
2024-05-01 |
Page d'accueil décrivant l'ensemble des composants du thème de Canada.ca, nommé GCWeb. |
no-container |
fr |
true |
true |
|
{::nomarkdown}
Les gabarits et les conceptions communes si dessous sont une référence d'implémentation du Système de conception de Canada.ca, incluant les exigences obligatoire de la spécifications du contenu et de l’architecture de l'information (C&AI) pour Canada.ca. Les ministères et organisme du gouvernement du Canada peuvent y contribuer en publiant leur modèle et leur conception commune via le dépôt github de GCWeb.
Télécharger le thème GCWeb v15.0.0
({{ page.dateModified | date: '%F' }} - Note de version)
- Composantes
- Gabarits
- Configurations de conception
- Méli-mélo et thématiques
- Global et de sites Wet-boew
- Autre
- Implémenter / Développer
Vous avez trouvé des problèmes d'implémentation par rapport au C&AI ou vous désirez contribuer au dévelopement, faites nous le savoir en soumettant une requête GCWeb, en envoyant une pull request ou en participant à un de nos heures de service de la BOEW (anciennement connu sous le nom de WET-BOEW code sprint) hedbomadaire à chaque mardi.
{% assign page_group = site.data.i18n.page_group[ page.language ] %} {% assign comp_status = site.data.i18n.component_status[ page.language ] %}Définition des états
- {{comp_status.stable}}
- Rencontre les exigences d'une spécification.
- {{comp_status.provisional}}
- Plutôt stable, mais expérimental; utilisez à vos risques et périls.
- {{comp_status.deprecated}}
- Ne pas utilisé car c'est obsolète, mais disponible pour votre information.
- Défaut
- Manque le statut dans la documentation de la composante.
-
{% for component in site.data.components %}
{% assign list-pages = component.pages %}
-
{{ component.title[ page.language ] }} {% if component.status == "stable" %} État: {{ comp_status[ component.status ] }} {% elsif component.status == "provisional" %} État: {{ comp_status[ component.status ] }} {% elsif component.status == "deprecated" %} État: {{ comp_status[ component.status ] }} {% else %} État: Non défini {% endif %}
{{ component.description[ page.language ] | default: "[Courte description de la composante]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}-
{% if mainExamples %}
- {% if mainExamples.path %} Exemple pratique {% elsif mainExamples.url %} Exemple pratique {% else %} Exemple pratique {% endif %} {% endif %} {% if list-pages.docs %} {% assign docs = list-pages.docs | where: "language", page.language %} {% for doc in docs %}
- Documentation {% endfor %} {% endif %}
- Code source
Tous les exemples et info
-
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
- {{ page_group[ grpkey ] | default: "Groupe inconnu" }}
-
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
- {{ example.title }} {% elsif example.url %}
- {{ example.title }} {% else %}
- {{ example.title }} {% endif %} {% endfor %}
{% endfor %}
{% endfor %}
-
{% for template in site.data.templates %}
{% assign list-pages = template.pages %}
-
{{ template.title[ page.language ] }} {% if template.status == "stable" %} État: {{ comp_status[ template.status ] }} {% elsif template.status == "provisional" %} État: {{ comp_status[ template.status ] }} {% elsif template.status == "deprecated" %} État: {{ comp_status[ template.status ] }} {% else %} État: Non défini {% endif %}
{{ template.description[ page.language ] | default: "[Courte description du gabarit]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}-
{% if mainExamples %}
- {% if mainExamples.path %} Exemple pratique {% elsif mainExamples.url %} Exemple pratique {% else %} Exemple pratique {% endif %} {% endif %} {% if list-pages.docs %} {% assign docs = list-pages.docs | where: "language", page.language %} {% for doc in docs %}
- Documentation {% endfor %} {% endif %}
Tous les exemples et info
-
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
- {{ page_group[ grpkey ] | default: "Groupe inconnu" }}
-
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
- {{ example.title }} {% elsif example.url %}
- {{ example.title }} {% else %}
- {{ example.title }} {% endif %} {% endfor %}
{% endfor %}
{% endfor %}
-
{% for designPattern in site.data.design-patterns %}
{% assign list-pages = designPattern.pages %}
-
{{ designPattern.title[ page.language ] }} {% if designPattern.status == "stable" %} État: {{ comp_status[ designPattern.status ] }} {% elsif designPattern.status == "provisional" %} État: {{ comp_status[ designPattern.status ] }} {% elsif designPattern.status == "deprecated" %} État: {{ comp_status[ designPattern.status ] }} {% else %} État: Undefined {% endif %}
{{ designPattern.description[ page.language ] | default: "[Short description of the design pattern]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}-
{% if mainExamples %}
- {% if mainExamples.path %} Exemple pratique {% elsif mainExamples.url %} Exemple pratique {% else %} Exemple pratique {% endif %} {% endif %} {% if list-pages.docs %} {% assign docs = list-pages.docs | where: "language", page.language %} {% for doc in docs %}
- Documentation {% endfor %} {% endif %}
- Code source
Tous les exemples et info
-
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
- {{ page_group[ grpkey ] | default: "Unknown group" }}
-
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
- {{ example.title }} {% elsif example.url %}
- {{ example.title }} {% else %}
- {{ example.title }} {% endif %} {% endfor %}
{% endfor %}
{% endfor %}
L'espace d'expérimentation que vous attendiez ! Les Méli-mélos permettent d'ajouter au thème de Canada.ca du nouveau code intéressant que vous considéreriez habituellement comme "personnalisé".
Avez-vous un ensemble de pages qui arborent un look original relié à une promotion spécifique ? Dans ce cas, essayez plutôt cet espace de thématiques promotionnelles.
<h3 id="Composantes-primaires-canadaca">Composantes primaires pour le thème de Canada.ca</h3>
<ul class="row list-unstyled wb-eqht-grd wb-filter mrgn-tp-md" data-wb-filter='{ "selector": ">li" }'>
{% for item in site.data.sites %}
{% assign list-pages = item.pages %}
<li class="col-xs-12 col-md-6 mrgn-tp-md mrgn-bttm-md">
<div class="brdr-tp brdr-rght brdr-bttm brdr-lft hght-inhrt">
<h4 class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">{{ item.title[ page.language ] }}
{% if item.status == "stable" %}
<span class="label label-success mrgn-lft-sm"><span class="wb-inv">État: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "provisional" %}
<span class="label label-warning mrgn-lft-sm"><span class="wb-inv">État: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "deprecated" %}
<span class="label label-danger mrgn-lft-sm"><span class="wb-inv">État: </span>{{ comp_status[ item.status ] }}</span>
{% else %}
<span class="label label-default mrgn-lft-sm"><span class="wb-inv">État: </span>Non défini</span>
{% endif %}
</h4>
<div class="mrgn-rght-md mrgn-bttm-md mrgn-lft-md">
<p>{{ item.description[ page.language ] | default: "[Courte description de la fonctionnalité globale]" }}</p>
<!--
Main working example
- First working example in the example list where the language match
-->
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}
<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">
{% if mainExamples %}
<li>
{% if mainExamples.path %}
<a href="sites/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ mainExamples.path }}" {% if mainExamples.language != page.language %}lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"{% endif %}><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Exemple pratique</a>
{% elsif mainExamples.url %}
<a href="{{ mainExamples.url }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Exemple pratique</a>
{% else %}
<span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Exemple pratique
{% endif %}
{% endif %}
<!--
Documentation
- Link to the documentations if any
-->
{% if list-pages.docs %}
<!--<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">-->
{% assign docs = list-pages.docs | where: "language", page.language %}
{% for doc in docs %}
<li><a href="sites/{{ item.componentName }}/{{ doc.path }}"><span class="fas fa-info-circle small mrgn-rght-sm" aria-hidden="true"></span>Documentation</a></li>
{% endfor %}
{% endif %}
</ul>
<!--
> All examples and info
* Example
* Documentation
* Spec
-->
<details class="mrgn-tp-lg"><summary>Tous les exemples et info</summary>
<ul class="mrgn-tp-md">
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
<li>{{ page_group[ grpkey ] | default: "Groupe inconnu" }}
<ul>
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
<li><a href="sites/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ example.path }}" {% if example.language != page.language %}lang="{{ example.language }}" hreflang="{{ example.language }}"{% endif %}>{{ example.title }}</a></li>
{% elsif example.url %}
<li><a href="{{ example.url }}">{{ example.title }}</a></li>
{% else %}
<li>{{ example.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</details>
</div>
</div>
</li>
{% endfor %}
</ul>
<h3 id="composantes-communes">Composantes communes</h3>
<ul class="row list-unstyled wb-eqht-grd wb-filter mrgn-tp-md" data-wb-filter='{ "selector": ">li" }'>
{% for item in site.data.common %}
{% assign list-pages = item.pages %}
<li class="col-xs-12 col-md-6 mrgn-tp-md mrgn-bttm-md">
<div class="brdr-tp brdr-rght brdr-bttm brdr-lft hght-inhrt">
<h4 class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">{{ item.title[ page.language ] }}
{% if item.status == "stable" %}
<span class="label label-success mrgn-lft-sm"><span class="wb-inv">État: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "provisional" %}
<span class="label label-warning mrgn-lft-sm"><span class="wb-inv">État: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "deprecated" %}
<span class="label label-danger mrgn-lft-sm"><span class="wb-inv">État: </span>{{ comp_status[ item.status ] }}</span>
{% else %}
<span class="label label-default mrgn-lft-sm"><span class="wb-inv">État: </span>Non défini</span>
{% endif %}
</h4>
<div class="mrgn-rght-md mrgn-bttm-md mrgn-lft-md">
<p>{{ item.description[ page.language ] | default: "[Courte description de la fonctionnalité commune]" }}</p>
<!--
Main working example
- First working example in the example list where the language match
-->
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}
<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">
{% if mainExamples %}
<li>
{% if mainExamples.path %}
<a href="common/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ mainExamples.path }}" {% if mainExamples.language != page.language %}lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"{% endif %}><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Exemple pratique</a>
{% elsif mainExamples.url %}
<a href="{{ mainExamples.url }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Exemple pratique</a>
{% else %}
<span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Exemple pratique
{% endif %}
{% endif %}
<!--
Documentation
- Link to the documentations if any
-->
{% if list-pages.docs %}
<!--<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">-->
{% assign docs = list-pages.docs | where: "language", page.language %}
{% for doc in docs %}
<li><a href="common/{{ item.componentName }}/{{ doc.path }}"><span class="fas fa-info-circle small mrgn-rght-sm" aria-hidden="true"></span>Documentation</a></li>
{% endfor %}
{% endif %}
</ul>
<!--
> All examples and info
* Example
* Documentation
* Spec
-->
<details class="mrgn-tp-lg"><summary>Tous les exemples et info</summary>
<ul class="mrgn-tp-md">
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
<li>{{ page_group[ grpkey ] | default: "Groupe inconnu" }}
<ul>
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
<li><a href="common/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ example.path }}" {% if example.language != page.language %}lang="{{ example.language }}" hreflang="{{ example.language }}"{% endif %}>{{ example.title }}</a></li>
{% elsif example.url %}
<li><a href="{{ example.url }}">{{ example.title }}</a></li>
{% else %}
<li>{{ example.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</details>
</div>
</div>
</li>
{% endfor %}
</ul>
<!-- The new added section of wet-boew -->
<h2 id="wetboew" class="mrgn-bttm-lg">Wet-boew</h2>
<ul class="row list-unstyled wb-eqht-grd wb-filter mrgn-tp-md pb-4" data-wb-filter='{ "selector": ">li" }'>
{% for wetboew in site.data[ "wet-boew" ] %}
{% assign list-pages = wetboew.pages %}
<li class="col-xs-12 col-md-6 mrgn-tp-md mrgn-bttm-md">
<div class="brdr-tp brdr-rght brdr-bttm brdr-lft hght-inhrt">
<h3 class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">{{ wetboew.title[ page.language ] }}
{% if wetboew.status == "stable" %}
<span class="label label-success mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ wetboew.status ] }}</span>
{% elsif wetboew.status == "provisional" %}
<span class="label label-warning mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ wetboew.status ] }}</span>
{% elsif wetboew.status == "deprecated" %}
<span class="label label-danger mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ wetboew.status ] }}</span>
{% else %}
<span class="label label-default mrgn-lft-sm"><span class="wb-inv">State: </span>Undefined</span>
{% endif %}
</h3>
<div class="mrgn-rght-md mrgn-bttm-md mrgn-lft-md">
<p>{{ wetboew.description[ page.language ] | default: "[Courte description de wetboew]" }}</p>
<!--
Main working example
- First working example in the example list where the language match
-->
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}
<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">
{% if mainExamples %}
<li>
{% if mainExamples.path %}
<a href="wet-boew/
{%- if wetboew.componentName -%}
{{ wetboew.componentName }}/
{%- endif -%}
{{ mainExamples.path }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% elsif mainExamples.url %}
<a href="{{ mainExamples.url }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% else %}
<span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example
{% endif %}
{% endif %}
<!--
Documentation
- Link to the documentations if any
-->
{% if list-pages.docs %}
<!--<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">-->
{% assign docs = list-pages.docs | where: "language", page.language %}
<!--
Documentation in GCWeb repo
-->
{% for doc in docs %}
{% if doc.url %}
<li><a href="{{ doc.url }}"><span class="fas fa-info-circle small mrgn-rght-sm" aria-hidden="true"></span>Documentation</a></li>
{% endif %}
{% endfor %}
{% endif %}
<li><a href="https://github.com/wet-boew/GCWeb/tree/master/wet-boew/{{ wetboew.componentName }}" hreflang="en"><span class="fas fa-code small mrgn-rght-sm" aria-hidden="true"></span>Source code</a></li>
</ul>
<!--
> All examples and info
* Example
* Documentation
* Spec
-->
<details class="mrgn-tp-lg"><summary>All examples and info</summary>
<ul class="list-unstyled">
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
<li>{{ page_group[ grpkey ] | default: "Unknown group" }}
<ul>
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
<li><a href="wet-boew/
{%- if wetboew.componentName -%}
{{ wetboew.componentName }}/
{%- endif -%}
{{ example.path }}" {% if example.language != page.language %}lang="{{ example.language }}" hreflang="{{ example.language }}"{% endif %}>{{ example.title }}</a></li>
{% elsif example.url %}
<li><a href="{{ example.url }}">{{ example.title }}</a></li>
{% else %}
<li>{{ example.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</details>
</div>
</div>
</li>
{% endfor %}
</ul>
<hr />
<h2 id="autre">Autre documentation</h2>
<div class="row mrgn-tp-md">
<div class="col-md-8">
<section class="row d-flex">
<div class="col-xs-3 col-md-2 d-flex align-self-center">
<img src="https://raw.github.com/wet-boew/wet-boew-attachments/master/Promo/WET_Logo.png" class="full-width" alt="">
</div>
<div class="col-xs-9 col-md-10">
<h3 class="mrgn-tp-md" id="wet-boew-demos">Fonctionnalités BOEW avec le thème de Canada.ca</h3>
<p><a href="/gcweb-compiled-demos/index.html#wet-boew">Voir les démos</a></p>
</div>
</section>
</div>
</div>
<h3 id="gcweb-projet-documentation">Documentation du projet GCWeb</h3>
<ul lang="en">
<li><a href="docs/index.html">GCWeb theme - Meta information</a></li>
<li><a href="docs/v5-migration.html">Migration instruction - GCWeb theme V5</a></li>
<li><a href="docs/GCWeb-en.html">Archived - Documentation - GCWeb English</a></li>
<li><a href="docs/release/index-en.html">Archived - Releases English</a></li>
<li><a href="docs/static-header-footer/bootstrap-3.html">Skeleton - Static header/footer - Bootstrap 3</a></li>
<li><a href="docs/static-header-footer/bootstrap-4.html">Prototype skeleton - Static header/footer - Bootstrap 4</a></li>
</ul>
<h4>Évaluations et rapports</h4>
<ul>
<li><a href="docs/evaluation-report/1-accessibility.html" lang="en" hreflang="en">1 - Accessibility assessment as 2018-11-14</a></li>
<li><a href="docs/evaluation-report/2-wetplugin-gcweb2.html" lang="en" hreflang="en">2 - Regression user acceptance testing as 2018-11-16</a></li>
</ul>
<div class="row">
<div class="col-md-9">
<h2 id="implementer-developper"><span aria-hidden="true" class="fas fa-code mrgn-rght-md"></span>Implémenter / Développer</h2>
<h3>Implémenter GCWeb sur votre site</h3>
<p>Guide d'implémentation pour le thème de Canada.ca avec la Boîte à outils de l'expérience web version 4.x.</p>
<p><a href="docs/implementing-fr.html" class="btn btn-lg btn-default" hreflang="en">Guide rapide</a></p>
<h3 id="developper-pour-gcweb">Développer pour GCWeb</h3>
<p>Rejoignez la communauté et commencez à créer, améliorer et réparer GCWeb, le thème de Canada.ca. Apprenez comment organiser votre environnement local.</p>
<p class="mrgn-bttm-lg"><a href="docs/developing-fr.html" class="btn btn-call-to-action" hreflang="en">Commencer à programmer</a></p>
</div>
</div>