This is the content of the first section.
" heading_tag="h3" %} {# Accordion group with multiple items #} {% dsfr_accordion_group accordion_items %} ``` -------------------------------- ### Django Template Inheritance and Includes Source: https://github.com/numerique-gouv/django-dsfr/blob/main/example_app/templates/example_app/base.html This snippet demonstrates basic Django template inheritance and the inclusion of reusable components. It extends the 'dsfr/base.html' template and includes header, footer, and newsletter follow components from 'example_app'. ```django {% extends "dsfr/base.html" %} {% load static i18n %} {% block header %} {% include "example_app/blocks/header.html" %} {% endblock header %} {% block footer %} {% include "example_app/blocks/footer.html" %} {% endblock footer %} {% block extra_js %} {% endblock extra_js %} {# djlint:off #} {% block lang %}{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE }}{% endblock lang %} {# djlint:on #} {% block follow_newsletter_social_media %} {% include "dsfr/follow.html" %} {% endblock follow_newsletter_social_media %} ``` -------------------------------- ### Django: Create Buttons and Button Groups Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Shows how to render primary, secondary, icon, and disabled buttons using the dsfr_button tag. It also illustrates creating button groups with multiple actions. Requires 'dsfr_tags' to be loaded. ```django {% load dsfr_tags %} {# Primary submit button #} {% dsfr_button label="Submit Form" type="submit" %} {# Secondary button with onclick action #} {% dsfr_button label="Cancel" type="button" onclick="history.back()" extra_classes="fr-btn--secondary" %} {# Disabled button #} {% dsfr_button label="Not Available" is_disabled=True %} {# Button with left icon #} {% dsfr_button label="Download" extra_classes="fr-btn--secondary fr-btn--icon-left fr-icon-download-line" %} {# Button group with multiple buttons #} {% dsfr_button_group items=button_list extra_classes="fr-btns-group--inline-md" %} ``` -------------------------------- ### Site Configuration Model Access (Python) Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Provides Python code to access site-wide configuration settings stored in the `DsfrConfig` model. It includes a utility function to retrieve the configuration for the current language, falling back to a default if necessary. Assumes `dsfr.models.DsfrConfig` is available. ```python # models.py - Accessing configuration in views from dsfr.models import DsfrConfig from django.utils.translation import get_language def get_site_config(): """Get site configuration for current language""" config = DsfrConfig.objects.filter(language=get_language()).first() if not config: config = DsfrConfig.objects.first() return config # The context processor automatically provides SITE_CONFIG in templates # templates/myapp/page.html # {{ SITE_CONFIG.site_title }} # {{ SITE_CONFIG.site_tagline }} # {{ SITE_CONFIG.header_brand }} ``` -------------------------------- ### Django Template: Internationalization and License Info Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/footer.html This snippet demonstrates the use of Django's internationalization tags to translate strings and display license information. It includes a link to the license details. ```django {% load i18n %} {% translate "Opens a new window" as new_window_label %} {% translate "etalab-2.0 license" as etalab_license %} {% translate "Unless explicit mention of intellectual property held by third parties, the contents of this site are offered under" %} [{{ etalab_license }}](https://github.com/etalab/licence-ouverte/blob/master/LO.md "{{ etalab_license|capfirst }} - {{ new_window_label }}") {% block footer_bottom_extra %} {% endblock footer_bottom_extra %} ``` -------------------------------- ### Set Up Breadcrumb Navigation Data in Django View Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt This snippet illustrates how to prepare data for DSFR breadcrumb navigation within a Django view. It constructs a dictionary containing navigation links, the current page title, and an optional root directory setting. This data is then passed to the template rendering the breadcrumb component. ```python # views.py - Setting up breadcrumb navigation def article_detail(request, category_slug, article_slug): article = get_object_or_404(Article, slug=article_slug) breadcrumb_data = { 'links': [ {'url': '/', 'title': 'Home'}, {'url': f'/category/{category_slug}/', 'title': article.category.name}, ], 'current': article.title, 'root_dir': '' # Set if site is not at domain root } return render(request, 'myapp/article.html', { 'article': article, 'breadcrumb_data': breadcrumb_data }) ``` -------------------------------- ### Service Title and Beta Tag - Django Template Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/header.html Displays the service title in the header, including an optional 'BETA' tag if `SITE_CONFIG.beta_tag` is true. This title also functions as a link to the homepage. ```django {% block service_title %}[{% SITE_CONFIG.site_title }} {% if SITE_CONFIG.beta_tag %} BETA {% endif %} ](/ "Accueil — {{ SITE_CONFIG.site_title }}"){% endblock service_title %} ``` -------------------------------- ### Use Django Messages Framework for Alerts Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Demonstrates the use of Django's messages framework to send different types of messages (success, error, info, warning, debug). These messages can be automatically converted to DSFR alerts. ```python # views.py - Using Django messages framework from django.contrib import messages def process_form(request): if request.method == 'POST': form = MyForm(request.POST) if form.is_valid(): form.save() messages.success(request, "Your data has been saved successfully.") return redirect('success_page') else: messages.error(request, "Please correct the errors in the form.") # Can also use other message levels messages.info(request, "This is an informational message.") messages.warning(request, "This action cannot be undone.") messages.debug(request, "Debug information for developers.") return render(request, 'myapp/form.html', {'form': form}) ``` -------------------------------- ### DSFR Alert Component Usage Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Shows how to use the `dsfr_alert` template tag to render various types of alerts (info, success, error, warning) with options for titles, content, and collapse functionality. It also demonstrates rendering alerts from Python view context. ```django {% load dsfr_tags %} {# Simple info alert #} {% dsfr_alert title="Information" type="info" content="This is an informational message." %} {# Success alert with HTML content #} {% dsfr_alert title="Success" type="success" content="Your form has been successfully submitted." %} {# Error alert with collapsible close button #} {% dsfr_alert title="Error" type="error" content="An error occurred while processing your request." is_collapsible=True %} {# Small alert without title #} {% dsfr_alert type="warning" content="Brief warning message" extra_classes="fr-alert--sm" %} {# Alert from Python view context #} {# In view: context['alert_data'] = {'title': 'Notice', 'type': 'info', 'content': 'Message'} #} {% dsfr_alert alert_data %} ``` -------------------------------- ### Build Nested Menu Structure for Sidemenu Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Constructs a nested list of dictionaries representing menu items for a sidemenu. This Python code prepares data for the Django template. ```python # views.py - Building nested menu structure def documentation_view(request): menu_items = [ { 'label': 'Getting Started', 'items': [ {'label': 'Installation', 'link': '/docs/installation/'}, {'label': 'Quick Start', 'link': '/docs/quickstart/'}, ] }, { 'label': 'Components', 'items': [ {'label': 'Buttons', 'link': '/docs/components/buttons/'}, {'label': 'Forms', 'link': '/docs/components/forms/'}, {'label': 'Cards', 'link': '/docs/components/cards/'}, ] }, { 'label': 'API Reference', 'link': '/docs/api/' } ] return render(request, 'myapp/docs.html', { 'menu_items': menu_items }) ``` -------------------------------- ### HTML Template for DSFR Search Page Source: https://github.com/numerique-gouv/django-dsfr/blob/main/example_app/templates/example_app/search.html This HTML snippet demonstrates how to structure a search results page using Django template tags. It extends a base template, loads static files, and defines blocks for CSS and JavaScript. The content block displays a search prompt, and the extra_js block contains the client-side JavaScript logic for handling search queries and displaying results. ```html {% extends "example_app/base.html" %} {% load static dsfr_tags %} {% block extra_css %} .alert-hidden { display:none; } {% endblock extra_css %} {% block content %} Recherche ========= Merci de taper votre recherche ci-dessus. {% endblock content %} {% block extra_js %} {% endblock extra_js %} ``` -------------------------------- ### Reference Static Assets using Django Template Tag Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/theme_modale.html The `{% static %}` template tag is used to generate URLs for static files, such as images. This ensures that assets are correctly linked in the HTML, regardless of the deployment configuration. Images for theme selection (light, dark, system) are referenced this way. ```django {% load static i18n %}    ``` -------------------------------- ### Build Accordion Groups with Django View Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt This snippet demonstrates how to create an accordion component in a Django view. It defines a list of items, each with an ID, title, content, and heading tag, which are then passed to a template for rendering. No external dependencies beyond Django are required. ```python def faq_view(request): context = { 'accordion_items': [ { 'id': 'faq-1', 'title': 'What is this service?', 'content': 'This service provides access to government information and services.
', 'heading_tag': 'h3', }, { 'id': 'faq-2', 'title': 'How do I register?', 'content': 'You can register by clicking the registration button and filling out the form.
', 'heading_tag': 'h3', }, { 'id': 'faq-3', 'title': 'Who can use this service?', 'content': 'This service is available to all French citizens and residents.
', 'heading_tag': 'h3', } ] } return render(request, 'myapp/faq.html', context) ``` -------------------------------- ### Header Tools Links - Django Template Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/header.html Defines a list of tool links for the header, such as 'Créer un espace', 'Se connecter', and 'S’enregistrer'. The URLs are placeholders and need to be modified. ```django {% block header_tools %}* [Créer un espace]([url - à modifier]) * [Se connecter]([url - à modifier]) * [S’enregistrer]([url - à modifier]) {% endblock header_tools %} ``` -------------------------------- ### Python: Prepare Button Group Data for Django Template Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt This Python view prepares a list of dictionaries, where each dictionary represents a button for a button group. This data is then passed to the Django template for rendering. ```python from django.shortcuts import render def form_view(request): context = { 'button_list': [ { 'label': 'Save Draft', 'name': 'action', 'type': 'submit', 'extra_classes': 'fr-btn--secondary', }, { 'label': 'Submit', 'name': 'action', 'type': 'submit', }, { 'label': 'Cancel', 'type': 'button', 'onclick': 'window.location.href="/";', 'extra_classes': 'fr-btn--tertiary', } ] } return render(request, 'myapp/form.html', context) ``` -------------------------------- ### Main Menu Translation and Links - Django Template Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/header.html Renders the main navigation menu. It includes a 'Close' button and uses translated labels for the menu. The menu items are placeholder links that need to be updated. ```django {% block main_menu %} {% translate "Close" %} {% translate "Main menu" as main_menu_label %} * [accès direct](#) * [accès direct](#) * [accès direct](#) * [accès direct](#) {% endblock main_menu %} ``` -------------------------------- ### Add Social Media Links Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Creates new social media links associated with a site configuration. Requires Django ORM and a 'config_fr' object. ```python DsfrSocialMedia.objects.create( site_config=config_fr, title='Twitter', url='https://twitter.com/example', icon_class='fr-icon-twitter-line' ) DsfrSocialMedia.objects.create( site_config=config_fr, title='LinkedIn', url='https://linkedin.com/company/example', icon_class='fr-icon-linkedin-line' ) ``` -------------------------------- ### Render DSFR Tile Component in Django Templates Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/tile.html This snippet illustrates the structure for rendering a DSFR tile component within Django templates. It includes logic for displaying a title, optional description, details, and either tags or badges. ```django {% load dsfr_tags %} <{{ self.heading_tag | default:"h3" }} class="fr-tile__title"> [{{ self.title }}]({{ self.url }}) {% if self.description %} {{ self.description }} {% endif %} {% if self.detail %} {{ self.detail }} {% endif %} {% if self.top_detail %} {% if self.top_detail.tags %} {% for tag in self.top_detail.tags %}* {% dsfr_tag tag %} {% endfor %} {% elif self.top_detail.badges %} {% for badge in self.top_detail.badges %}* {% dsfr_badge badge %} {% endfor %} {% endif %} {% endif %} {% if self.svg_path %} {% else %}  {% endif %} ``` -------------------------------- ### Display Quote and Highlight Components Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Renders DSFR quote and highlight components using Django template tags. Supports various attributes for customization like author, source, image, and color classes. ```django {% load dsfr_tags %} {# Simple quote #} {% dsfr_quote text="This is an important statement from a government official." author="Jean Dupont" source="Ministry of Example" %} {# Quote with source URL and image #} {% dsfr_quote text="Quote text here" author="Minister Name" source="Official Statement" source_url="https://example.gouv.fr/statement" image_url="/static/img/minister.jpg" extra_classes="fr-quote--green-emeraude" %} {# Highlight important text #} {% dsfr_highlight content="Important: This service will be unavailable on January 20th." size_class="fr-text--lg" %} {# Colored highlight #} {% dsfr_highlight content="New feature available" extra_classes="fr-highlight--green-emeraude" %} ``` -------------------------------- ### Create Sidemenu Navigation Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Generates a hierarchical sidemenu navigation component using DSFR template tags. Requires 'dsfr_tags' and a 'menu_items' list. ```django {% load dsfr_tags %} {% dsfr_sidemenu title="Documentation" items=menu_items extra_classes="fr-sidemenu--sticky" %} ``` -------------------------------- ### Manage Multi-step Form with Stepper Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Manages multi-step form data and provides information for the DSFR stepper component. This Python view prepares step data and renders the appropriate form. ```python # views.py - Multi-step form with stepper def registration_step(request, step): steps = [ {'id': 1, 'title': 'Account Creation', 'form': AccountForm}, {'id': 2, 'title': 'Personal Information', 'form': PersonalInfoForm}, {'id': 3, 'title': 'Address Details', 'form': AddressForm}, {'id': 4, 'title': 'Confirmation', 'form': None}, ] current = steps[step - 1] next_step = steps[step] if step < len(steps) else None stepper_data = { 'current_step_id': current['id'], 'current_step_title': current['title'], 'next_step_title': next_step['title'] if next_step else None, 'total_steps': len(steps) } return render(request, 'myapp/registration.html', { 'stepper_data': stepper_data, 'form': current['form']() if current['form'] else None }) ``` -------------------------------- ### Base Template Integration with DSFR Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Demonstrates how to extend the DSFR base template in a Django project to include custom headers and footers. It utilizes Django template tags and DSFR specific tags for rendering. ```django {# templates/myapp/base.html #} {% extends "dsfr/base.html" %} {% load static dsfr_tags %} {% block title %}My Government Service{% endblock %} {% block header %}République
française
My Service Name
Service tagline
Aucun résultat trouvé
"; } }); } ``` -------------------------------- ### Integrate Forms with Django DSFR Base Form and Templates Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt This snippet demonstrates creating DSFR-styled forms in Django using `DsfrBaseForm` and rendering them in templates. It covers rendering the entire form, individual fields using `dsfr_form_field`, displaying Django messages as DSFR alerts, and using `dsfr_button_group` for submission. The `dsfr_tags` must be loaded. ```django {# templates/myapp/form.html #} {% load dsfr_tags %} ``` -------------------------------- ### Django Template: Footer Links Generation Source: https://github.com/numerique-gouv/django-dsfr/blob/main/dsfr/templates/dsfr/footer.html This snippet generates various links for the footer, including sitemap, accessibility status, legal notice, personal data, and cookie management. It utilizes Django's URL tag for dynamic link generation. ```django {% load i18n %} {% block footer_links %}* {% url 'footer-sitemap' as sitemap_url %} [{% translate "Sitemap" %}]({% %}) * {% url 'footer-accessibility-status' as accessibility_status_url %} [{% with accessibility_status=SITE_CONFIG.get_accessibility_status_display|default:"non" %} {% blocktranslate %}Accessibility: {{ accessibility_status }} compliant{% endblocktranslate %} {% endwith %}]({% %}) * {% url 'footer-legal-notice' as legal_notice_url %} [{% translate "Legal notice" %}]({% %}) * {% url 'footer-personal-data' as personal_data_url %} [{% translate "Personal data" %}]({% %}) * {% url 'footer-cookie-management' as cookie_management_url %} [{% translate "Cookie management" %}]({% %}) {% endblock footer_links %} ``` -------------------------------- ### Creating Tag and Badge Data (Python) Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt A Django view function that prepares data for DSFR tags and badges, typically for displaying article-specific information like status and view counts. The data is structured as a list of dictionaries, suitable for passing to template tags like `dsfr_badge_group`. ```python # views.py - Creating tag and badge collections def article_detail(request, slug): article = get_object_or_404(Article, slug=slug) badges = [ {'label': article.status, 'extra_classes': 'fr-badge--success'}, {'label': f'{article.view_count} views', 'extra_classes': 'fr-badge--info fr-badge--sm'}, ] context = { 'article': article, 'badges': badges } return render(request, 'myapp/article.html', context) ``` -------------------------------- ### Display Stepper Component Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Renders a DSFR stepper component to indicate progress in a multi-step process. Requires the current step ID, title, next step title, and total number of steps. ```django {% load dsfr_tags %} {% dsfr_stepper current_step_id=2 current_step_title="Personal Information" next_step_title="Address Details" total_steps=4 heading_tag="h2" %} ``` -------------------------------- ### Python: Prepare Complex Card Data for Django Template Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt This Python view constructs a complex data structure for a card component, including badges, top details with icons and tags, bottom details, and call-to-action buttons. It also specifies an image ratio. ```python from dsfr.constants import IMAGE_RATIOS from django.shortcuts import render def event_list(request): context = { 'badge_list': [ {'label': 'New', 'extra_classes': 'fr-badge--success'}, {'label': 'Featured', 'extra_classes': 'fr-badge--info'}, ], 'top_detail_data': { 'detail': { 'text': 'Published on 2024-01-15', 'icon_class': 'fr-icon-calendar-line' }, 'tags': [ {'label': 'Education'}, {'label': 'Technology'}, ] }, 'bottom_detail_data': { 'text': 'Location: Paris', 'icon_class': 'fr-icon-map-pin-line' }, 'cta_buttons': [ { 'label': 'Register Now', 'onclick': 'register()', 'extra_classes': 'fr-btn--sm' } ], 'ratio': IMAGE_RATIOS['16x9'] } return render(request, 'myapp/events.html', context) ``` -------------------------------- ### DSFR Pagination Component Integration (Django Template) Source: https://context7.com/numerique-gouv/django-dsfr/llms.txt Integrates the DSFR pagination component into a Django template to provide navigation for list views. It requires the `dsfr_tags` to be loaded and uses `page_obj` passed from the view context. Assumes `page_obj` is a Django Paginator object. ```django {% load dsfr_tags %}