From e029e6da75aae9d7155fc33cfcb890f6a278e29d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Le=20Moigne?= Date: Mon, 17 Dec 2018 22:17:26 +0100 Subject: [PATCH 01/15] Traduction de serverless-blog.md --- src/v2/cookbook/serverless-blog.md | 73 +++++++++++++++--------------- 1 file changed, 36 insertions(+), 37 deletions(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index aa0f0e34b8..f830bda650 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -4,42 +4,41 @@ type: cookbook order: 5 --- -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

So you've just launched your Vue.js website, congrats! Now you want to add a blog that quickly plugs into your website and you don't want to have to spin up a whole server just to host a Wordpress instance (or any DB-powered CMS for that matter). You want to just be able to add a few Vue.js blog components and some routes and have it all just work, right? What you're looking for is a blog that's powered entirely by API's you can consume directly from your Vue.js application. This tutorial will teach you how to do just that, let's dive in!

- -We're going to quickly build a CMS-powered blog with Vue.js. It uses [ButterCMS](https://buttercms.com/), an API-first CMS that lets you manage content using the ButterCMS dashboard and integrate our content API into your Vue.js app. You can use ButterCMS for new or existing Vue.js projects. +

Donc vous venez juste de lancer votre site web en Vue.js, félicitations ! Maintenant vous voulez lui ajouter un blog qui va s'intégrer rapidement sans avoir à mettre en place un serveur complet pour héberger une instance de Wordpress (or tout autre CMS utilisant une base de données). Vous voulez seulement ajouter quelques composants Vue.js et des routes pour que votre blog fonctionne, n'est-ce pas ? Ce que vous recherchez, c'est un blog qui fonctionne entièrement sur des interfaces de programmation directement consommées par votre application Vue.js. Ce tutoriel va vous apprendre à le faire, lançons-nous !

+Nous allons rapidement construire un blog se basant sur un CMS avec Vue.js. Ce CMS c'est [ButterCMS](https://buttercms.com/), un CMS implementant le patron de conception API-first qui vous permet de gèrer le contenu au travers du paneau d'administration de ButterCMS et de consommer les interfaces de programmation du contenu dans votre application Vue.js. Vous pouvez utiliser ButterCMS pour des nouveaux projets Vuejs ou pour des projets existants. ![Butter Dashboard](https://user-images.githubusercontent.com/160873/36677285-648798e4-1ad3-11e8-9454-d22fca8280b7.png "Butter Dashboard") -## Install +## Installation -Run this in your commandline: +Exécutez cette ligne de commande: ```bash npm install buttercms --save ``` -Butter can also be loaded using a CDN: +Butter peut aussi être chargé en utilisant un CDN: ```html ``` -## Quickstart +## Démarrage rapide -Set your API token: +Renseignez votre jeton d'identification: ```javascript -var butter = require('buttercms')('your_api_token'); +var butter = require('buttercms')('votre_jeton'); ``` -Using ES6: +En utilisant ES6: ```javascript import Butter from 'buttercms'; -const butter = Butter('your_api_token'); +const butter = Butter('votre_jeton'); ``` -Using CDN: +En utilisant le CDN: ```html @@ -48,7 +47,7 @@ Using CDN: ``` -Import this file into any component you want to use ButterCMS. Then from the console run: +Importez ce fichier dans chaque composant utilsant ButterCMS. Puis dans la console, exécutez: ```javascript butter.post.list({page: 1, page_size: 10}).then(function(response) { @@ -56,13 +55,13 @@ butter.post.list({page: 1, page_size: 10}).then(function(response) { }) ``` -This API request fetches your blog posts. Your account comes with one example post which you'll see in the response. +Cette requête sur l'interface de programmation récupère les articles du blog. Votre compte propose par défaut un article en exemple que vous verrez dans la réponse à cette requête. -## Display posts +## Afficher les articles -To display posts we create a `/blog` route (using Vue Router) in our app and fetch blog posts from the Butter API, as well as a `/blog/:slug` route to handle individual posts. +Afin d'afficher les articles, nous créons une route `/blog` (en utilisant Vue Router) dans notre application et nous récupérons tous les articles grâce à l'interface de programmation de Butter, et de la même manière nous créons la route `/blog/:slug` afin d'afficher récupérer les articles de manière individuelle. -See the ButterCMS [API reference](https://buttercms.com/docs/api/?javascript#blog-posts) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination. +Référez-vous à la [documentation de l'interface de programmation](https://buttercms.com/docs/api/?javascript#blog-posts) de ButterCMS pour prendre connaissance des options supplémentaires disponibles telles que le filtrage par catégorie ou par auteur. La réponse inclue aussi des métadonnées que nous utiliserons pour la pagination. `router/index.js:` @@ -91,7 +90,7 @@ export default new Router({ }) ``` -Then create `components/BlogHome.vue` which will be your blog homepage that lists your most recent posts. +Ensuite créez le fichier `components/BlogHome.vue` qui sera la page d'accueil de notre blog et qui listera vos plus récents articles. ```html ``` -Now your app has a working blog that can be updated easily in the ButterCMS dashboard. +Maintenant, votre application possède un blog fonctionnel qui peut être mis à jour facilement dans le panneau d'administration de ButterCMS. -## Categories, Tags, and Authors +## Categories, mots clés et auteurs -Use Butter's APIs for categories, tags, and authors to feature and filter content on your blog. +Utilisez les interfaces de programmation dédiées aux catégories, aux mots clés et aux auteurs pour mettre en valeur et filtrer le contenu de votre blog. -See the ButterCMS API reference for more information about these objects: +Consultez la référence des interfaces de programmation de ButterCMS pour plus d'information sur ces objets: * [Categories](https://buttercms.com/docs/api/?ruby#categories) -* [Tags](https://buttercms.com/docs/api/?ruby#tags) -* [Authors](https://buttercms.com/docs/api/?ruby#authors) +* [Mots clés](https://buttercms.com/docs/api/?ruby#tags) +* [Auteurs](https://buttercms.com/docs/api/?ruby#authors) -Here's an example of listing all categories and getting posts by category. Call these methods on the `created()` lifecycle hook: +Voici un exemple dans lequel on liste toutes les catégories et ou l'on récupère tous les articles par catégorie. Appelez ces méthodes sur le connecteur `created()` du cylce de vie du composant: ```javascript methods: { @@ -296,10 +295,10 @@ created() { } ``` -## Alternative Patterns +## Pattern alternatif -An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent.now.sh/guide/writing#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world. +Une alternative à considérer, surtout si vous préférez écrire seulement en Markdown, est d'utiliser par exemple [Nuxtent](https://nuxtent.now.sh/guide/writing#async-components). Nuxtent vous permet d'utiliser un composant Vue à l'intérieur de fichiers Markdown. Cette approche pourrait être apparentée à celle utilisée par les sites statiques (c'est-à-dire Jekyll) dans laquelle vous écrivez les articles dans des fichiers Markdown. Nuxtent permet une bonne intégration entre Vue.js et Markdown vous permettant de vivre dans un monde à 100% Vue.js. -## Wrap up +## Conclusion -That's it! You now have a fully functional CMS-powered blog running in your app. We hope this tutorial was helpful and made your development experience with Vue.js even more enjoyable :) +Et voilà ! Maintenant vous avez un blog basé sur un CMS totalement fonctionnel qui s'exécute dans votre application. Nous espérons que ce tutoriel vous a été utile et a rendu votre expérience du développement avec Vue.js encore plus appréciable. From 0b5c0eb2068416949eb6b8c8a2fb8535817010d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 19 Dec 2018 14:29:47 +0100 Subject: [PATCH 02/15] Update src/v2/cookbook/serverless-blog.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit corrige accent oublié Co-Authored-By: cedlemo --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index f830bda650..9d473d5b9e 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -5,7 +5,7 @@ order: 5 ---

Donc vous venez juste de lancer votre site web en Vue.js, félicitations ! Maintenant vous voulez lui ajouter un blog qui va s'intégrer rapidement sans avoir à mettre en place un serveur complet pour héberger une instance de Wordpress (or tout autre CMS utilisant une base de données). Vous voulez seulement ajouter quelques composants Vue.js et des routes pour que votre blog fonctionne, n'est-ce pas ? Ce que vous recherchez, c'est un blog qui fonctionne entièrement sur des interfaces de programmation directement consommées par votre application Vue.js. Ce tutoriel va vous apprendre à le faire, lançons-nous !

-Nous allons rapidement construire un blog se basant sur un CMS avec Vue.js. Ce CMS c'est [ButterCMS](https://buttercms.com/), un CMS implementant le patron de conception API-first qui vous permet de gèrer le contenu au travers du paneau d'administration de ButterCMS et de consommer les interfaces de programmation du contenu dans votre application Vue.js. Vous pouvez utiliser ButterCMS pour des nouveaux projets Vuejs ou pour des projets existants. +Nous allons rapidement construire un blog se basant sur un CMS avec Vue.js. Ce CMS c'est [ButterCMS](https://buttercms.com/), un CMS implémentant le patron de conception API-first qui vous permet de gérer le contenu au travers du panneau d'administration de ButterCMS et de consommer les interfaces de programmation du contenu dans votre application Vue.js. Vous pouvez utiliser ButterCMS pour de nouveaux projets Vuejs ou pour des projets existants. ![Butter Dashboard](https://user-images.githubusercontent.com/160873/36677285-648798e4-1ad3-11e8-9454-d22fca8280b7.png "Butter Dashboard") From bbb4b43d5ac1c6a714b9161482c4f184009d4508 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 19 Dec 2018 14:30:26 +0100 Subject: [PATCH 03/15] Update src/v2/cookbook/serverless-blog.md Corrige lettre manquante dans utilisant Co-Authored-By: cedlemo --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index 9d473d5b9e..69cf7b1dd9 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -47,7 +47,7 @@ En utilisant le CDN: ``` -Importez ce fichier dans chaque composant utilsant ButterCMS. Puis dans la console, exécutez: +Importez ce fichier dans chaque composant utilisant ButterCMS. Puis dans la console, exécutez: ```javascript butter.post.list({page: 1, page_size: 10}).then(function(response) { From c142b4395d1ddd7d4fbf191ebf06186178e68d1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 19 Dec 2018 14:31:06 +0100 Subject: [PATCH 04/15] Update src/v2/cookbook/serverless-blog.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Conjugaison du verbe inclure à la troisième personne du singulier Co-Authored-By: cedlemo --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index 69cf7b1dd9..427bd3db9a 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -61,7 +61,7 @@ Cette requête sur l'interface de programmation récupère les articles du blog. Afin d'afficher les articles, nous créons une route `/blog` (en utilisant Vue Router) dans notre application et nous récupérons tous les articles grâce à l'interface de programmation de Butter, et de la même manière nous créons la route `/blog/:slug` afin d'afficher récupérer les articles de manière individuelle. -Référez-vous à la [documentation de l'interface de programmation](https://buttercms.com/docs/api/?javascript#blog-posts) de ButterCMS pour prendre connaissance des options supplémentaires disponibles telles que le filtrage par catégorie ou par auteur. La réponse inclue aussi des métadonnées que nous utiliserons pour la pagination. +Référez-vous à la [documentation de l'interface de programmation](https://buttercms.com/docs/api/?javascript#blog-posts) de ButterCMS pour prendre connaissance des options supplémentaires disponibles telles que le filtrage par catégorie ou par auteur. La réponse inclut aussi des métadonnées que nous utiliserons pour la pagination. `router/index.js:` From d9e7360dfc3ac28c3cb51f762d7e810fc1ba4e53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 19 Dec 2018 14:31:35 +0100 Subject: [PATCH 05/15] Update src/v2/cookbook/serverless-blog.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Accord participe passé du verbe utiliser Co-Authored-By: cedlemo --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index 427bd3db9a..bd4d272164 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -214,7 +214,7 @@ Voici un aperçu: Maintenant notre application récupère tous les articles et nous pouvons afficher chaque post individuellement. Cependant, les boutons article suivant/précédent ne fonctionne pas. -Une chose à noter lorsque l'on utilise les routes avec des paramètres, c'est que quand l'utilisateur navigue de `blog/foo` à `blog/bar`, la même instance du composant va être utilisé. Comme chaque route correspond au même composant, c'est plus efficace que de détruire l'instance et d'en recréer une. +Une chose à noter lorsque l'on utilise les routes avec des paramètres, c'est que quand l'utilisateur navigue de `blog/foo` à `blog/bar`, la même instance du composant va être utilisée. Comme chaque route correspond au même composant, c'est plus efficace que de détruire l'instance et d'en recréer une.

Soyez conscient, qu'utiliser un composant de cette manière signifie que les connecteurs du cycle de vie du composant ne seront pas appelés. Consultez la documentation de Vue Router pour en apprendre plus sur la [recherche de route dynamique](https://router.vuejs.org/en/essentials/dynamic-matching.html)

From ec150f95d4f4123fda08f175ad0593145ae9b7ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 19 Dec 2018 14:33:36 +0100 Subject: [PATCH 06/15] Update src/v2/cookbook/serverless-blog.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit tiret manquant dans mots-clés Co-Authored-By: cedlemo --- src/v2/cookbook/serverless-blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/serverless-blog.md b/src/v2/cookbook/serverless-blog.md index bd4d272164..8d55a251b9 100644 --- a/src/v2/cookbook/serverless-blog.md +++ b/src/v2/cookbook/serverless-blog.md @@ -256,7 +256,7 @@ Section `