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 en nous 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.  -## 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 utilisant 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 inclut 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 +## Catégories, 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) + * [Catégories](https://buttercms.com/docs/api/?ruby#categories) +* [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 où l'on récupère tous les articles par catégorie. Appelez ces méthodes sur le connecteur `created()` du cycle 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.