ButterCMS

今回のプルリクはこちらです。
Feature/add butter cms by MH4GF · Pull Request #2 · MH4GF/CNR · GitHub
ButterCMSの追加をしました。見ての通りコード量は全然なく、簡単に導入できましたあとは自動生成されたHelloWorld.vueを削除したりしていますね

ButterCMSって何

f:id:ata-ata:20181024233912p:plain
ButterCMSは、ブログサービスの中でもヘッドレスCMSと呼ばれるものの一つで、API形式のデータの共有と、ブログの管理画面を提供してくれます。
なのでこちらとしてはフロントエンドだけ用意して、ButterCMSの管理画面で記事を書けばあとはよしなにいい感じにやってくれるスゴイやつです

やっていき

早速導入してみましょう Vue.jsのプロジェクトにButterCMSを導入する方法は、Vue.js公式ドキュメントでチュートリアルが用意されておりここに全てが書かれています

jp.vuejs.org

しかしクイックスタートの序盤でいきなりつまづいてしまいました、こちらの記述です

ES6 の使用:

import Butter from 'buttercms';
const butter = Butter('your_api_token');

頼むもっと説明してくれ〜〜〜〜〜！
何をしているのかはわかるけどどこに書けばええねん、初心者あるあるの一つ「記述するファイル名書いて欲しい」です（様々なパターンがあるのであえて明記してないのだろうなとは思いますが…）

こういう時はgithubを検索して自分と似たようなことをしている人いないかなーと探すのをよくやります vue-cliで自動生成してButterCMS導入した人なんてたくさんいるでしょう
こんな感じでコードを1行丸々ぐぐっちゃいます
f:id:ata-ata:20181021142639p:plain

すると良さげな人を見つけました Personal-Site/buttercms.js at master · ChrisSMendoza/Personal-Site · GitHub

src配下に別のjsファイルを用意して、cmsを使いたいファイルでインポートすれば良さそうです

というわけで今回はこんな感じで書きました
src/buttercms.js

import Butter from 'buttercms';

const butter = Butter('23c952c6842efc4729cce6501912809d9174816f');

export default butter;

src/components/BlogHome.vue

<script>
import butter from '../buttercms';  # 定数butterを読み込む

~~~
</script>

github検索、もっと使いこなせるようになると捗って良さそうです

やっていきその2

あとはチュートリアルをそのまま進めていけば問題ありませんでした、

vue-routerの導入

import Vue from 'vue';
import Router from 'vue-router';
import BlogHome from '../components/BlogHome';
import BlogPost from '../components/BlogPost';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: BlogHome,
    },
    {
      path: '/:slug',
      name: 'post',
      component: BlogPost,
    },
  ],
});

コピペ
'/'にアクセスするとBlogHomeが、'/記事名'にアクセスすればBlogPostが表示されます（slugは変数みたいなものと考えればいいのでしょうか）

src/components/BlogHome.vue

<template>
  <div id="blog-home">
      <h1>{{ page_title }}</h1>
      <!-- `v-for` の生成、および Vue 用に `key` 属性の適用。ここでは、slug と index の組みを使用します -->
      <div
        v-for="(post,index) in posts"
        :key="post.slug + '_' + index"
      >
        <router-link :to="post.slug">
          <article class="media">
            <figure>
              <!-- `:` による結果のバインディング -->
              <!-- `featured_image` を使うかどうかは、`v-if`/`else` で判定します -->
              <img
                v-if="post.featured_image"
                :src="post.featured_image"
                alt=""
              >
              <img
                v-else
                src="http://via.placeholder.com/250x250"
                alt=""
              >
            </figure>
            <h2>{{ post.title }}</h2>
            <p>{{ post.summary }}</p>
          </article>
        </router-link>
      </div>
  </div>
</template>
 <script>
import butter from '../buttercms';
 export default {
  name: 'blog-home',
  data() {
    return {
      page_title: 'Home',
      posts: [],
    };
  },
  methods: {
    getPosts() {
      butter.post.list({
        page: 1,
        page_size: 10,
      }).then((res) => {
        this.posts = res.data.data;
      });
    },
  },
  created() {
    this.getPosts();
  },
};
</script>
 <style lang="scss" scoped>
 </style>

コピペ

src/components/BlogPost.vue

<template>
  <div id="blog-post">
    <h1>{{ post.data.title }}</h1>
    <h4>{{ post.data.author.first_name }} {{ post.data.author.last_name }}</h4>
    <div v-html="post.data.body"></div>
     <router-link
      v-if="post.meta.previous_post"
      :to="post.meta.previous_post.slug"
      class="button"
    >
      {{ post.meta.previous_post.title }}
    </router-link>
    <router-link
      v-if="post.meta.next_post"
      :to="post.meta.next_post.slug"
      class="button"
    >
      {{ post.meta.next_post.title }}
    </router-link>
  </div>
</template>
 <script>
import butter from '../buttercms';
 export default {
  name: 'blog-post',
  data() {
    return {
      post: {},
    };
  },
  methods: {
    getPost() {
      butter.post.retrieve(this.$route.params.slug)
        .then((res) => {
          this.post = res.data;
        }).catch((res) => {
          console.log(res);
        });
    },
  },
  watch: {
    $route() {
      this.getPost();
    },
  },
  created() {
    this.getPost();
  },
};
</script>

コピペ

動いた〜〜〜〜〜〜 f:id:ata-ata:20181024001502g:plain