Skip to content

i18n(fr): update basics/layouts.mdx #8961

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yanthomasdev merged 2 commits into from
Aug 1, 2024
Merged

i18n(fr): update basics/layouts.mdx #8961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15569de
i18n(fr): update basics/layouts.mdx
ArmandPhilippot Jul 31, 2024
346c267
Merge branch 'main' into i18n/fr-update-basics/layouts.mdx
yanthomasdev Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions src/content/docs/fr/basics/layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,27 +238,39 @@ const { title, fancyJsHelper } = Astro.props;

<ReadMore>Pour en savoir plus sur la prise en charge de Markdown et de MDX par Astro, consultez notre [guide Markdown/MDX](/fr/guides/markdown-content/).</ReadMore>

## Utilisation d'une mise en page unique pour les fichiers `.md`, `.mdx` et `.astro`.
## Utilisation de TypeScript avec des mises en page

Une unique mise en page Astro peut être écrite pour recevoir l'objet `frontmatter` des fichiers `.md` et `.mdx`, ainsi que toutes les propriétés nommées, passées depuis les fichiers `.astro`.
Toute mise en page Astro peut être modifiée pour introduire la sécurité des types et la saisie semi-automatique en fournissant les types pour vos propriétés :

Dans l'exemple ci-dessous, la mise en page va afficher le titre de la page, soit depuis la propriété YAML `title` de frontmatter, soit depuis un composant Astro passant un attribut `title` :

```astro /{?title}?/ /Astro.props[.a-z]*/
```astro ins={2-7} title="src/components/MyLayout.astro"
---
// src/components/MyLayout.astro
const { title } = Astro.props.frontmatter || Astro.props;
interface Props {
title: string;
description: string;
publishDate: string;
viewCount: number;
}
const { title, description, publishDate, viewCount } = Astro.props;
---
<html>
<head></head>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content={description}>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<slot />
<header>
<p>Publié le {publishDate}</p>
<p>Consulté par {viewCount} personnes</p>
</header>
<main>
<slot />
</main>
</body>
</html>
```

## Mises en page d'emboîtement
## Imbrication de mises en page

Les composants de mises en pages ne doivent pas nécessairement contenir une page entière de HTML. Vous pouvez décomposer vos mises en page en composants plus petits et combiner des composants de mises en page pour créer des templates de page encore plus flexibles. Ce modèle est utile lorsque vous souhaitez partager du code entre plusieurs mises en page.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/fr/tutorial/4-layouts/3.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,4 @@ Vous avez déjà une mise en page `BaseLayout.astro` pour définir la mise en pa

### Ressources

- [Imbrication de mises en page dans Astro](/fr/basics/layouts/#utilisation-dune-mise-en-page-unique-pour-les-fichiers-md-mdx-et-astro)
- [Imbrication de mises en page dans Astro](/fr/basics/layouts/#imbrication-de-mises-en-page)