Skip to content
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

Jump to bottom

Traduction de head.md #17

Merged
merged 1 commit into from
Jul 22, 2017
Merged

Traduction de head.md #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion en/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
26 changes: 13 additions & 13 deletions en/head.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# Gestion des entêtes (En) <br><br> *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'
Expand All @@ -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
Expand All @@ -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
<html>
Expand All @@ -79,12 +79,12 @@ And inside the `template` passed to bundle renderer:
</html>
```

**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.