diff --git a/en/SUMMARY.md b/en/SUMMARY.md index c809a5ff..7ea69f19 100644 --- a/en/SUMMARY.md +++ b/en/SUMMARY.md @@ -7,7 +7,7 @@ - [Introduction au moteur de dépaquetage](bundle-renderer.md) - [Configuration de pré-compilation](build-config.md) - [Gestion des CSS](css.md) -- [Gestion des entêtes (En)](head.md) +- [Gestion des entêtes](head.md) - [Mise en cache (En)](caching.md) - [Envoi par flux (En)](streaming.md) - [Réference de l'API (En)](api.md) diff --git a/en/head.md b/en/head.md index ea21d281..8b4cdbef 100644 --- a/en/head.md +++ b/en/head.md @@ -1,17 +1,17 @@ -# Gestion des entêtes (En)

*Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).* +# Gestion des entêtes -Similar to asset injection, head management follows the same idea: we can dynamically attach data to the render `context` in a component's lifecycle, and then interpolate those data in `template`. +Similaire à l'injection de fichier, la gestion des entêtes suit la même idée : nous pouvons dynamiquement attacher des données au rendu `context` dans le cycle de vie du composant, et interpoler ses données dans le template. -> In version >=2.3.2, you can directly access the SSR context in a component as `this.$ssrContext`. In older versions you'd have to manually inject the SSR context by passing it to `createApp()` and expose it on the root instance's `$options` - child components can then access it via `this.$root.$options.ssrContext`. +> Dans la version 2.3.2+, vous pouvez directement accéder au contexte SSR du composant via `this.$ssrContext`. Dans les versions plus anciennes, vous devez injecter manuellement le contexte SSR en le passant à la fonction `createApp()` et ainsi l'exposer dans `$options` de l'instance racine — les composants enfants pouvant y accéder via `this.$root.$options.ssrContext`. -We can write a simple mixin to perform title management: +Nous pouvons écrire un mixin simple pour effectuer la gestion du titre : ``` js // title-mixin.js function getTitle (vm) { - // components can simply provide a `title` option - // which can be either a string or a function + // les composants doivent simplement fournir une option `title` + // pouvant être soit une chaîne de caractères soit une fonction const { title } = vm.$options if (title) { return typeof title === 'function' @@ -38,13 +38,13 @@ const clientTitleMixin = { } } -// VUE_ENV can be injected with webpack.DefinePlugin +// `VUE_ENV` peut être injecté avec `webpack.DefinePlugin` export default process.env.VUE_ENV === 'server' ? serverTitleMixin : clientTitleMixin ``` -Now, a route component can make use of this to control the document title: +Maintenant, un composant de route peut être utilisé ainsi pour contrôler le titre du document : ``` js // Item.vue @@ -66,7 +66,7 @@ export default { } ``` -And inside the `template` passed to bundle renderer: +Et passé au moteur de rendu de paquetage dans le template. ``` html @@ -79,12 +79,12 @@ And inside the `template` passed to bundle renderer: ``` -**Notes:** +**Notes :** -- Use double-mustache (HTML-escaped interpolation) to avoid XSS attacks. +- Utilisez les doubles moustaches (interpolation de HTML échapé) pour éviter les attaques XSS. -- You should provide a default title when creating the `context` object in case no component has set a title during render. +- Vous devriez fournir un titre par défaut quand vous créez l'object `context` au cas ou aucun composant de définisse de titre durant le rendu. --- -Using the same strategy, you can easily expand this mixin into a generic head management utility. +En utilisant la même stratégie, vous pouvez facilement étendre votre mixin en une fonction utilitaire générique de gestion des entêtes.