WordPress + Nuxt.js でポートフォリオサイトを作る その10

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その10

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

meta 設定

トップと詳細で出力を分ける。
また詳細は動的に設定する。

nuxt.config.js

// meta設定
const title = 'サイトのタイトル'
const description = 'サイトのディスクリプション'
const url = 'https://siteUrl.com'
const ogImage = `${url}/assets/img/ogp.png`

export default {
  // ...
  head: {
    htmlAttrs: {
      prefix: 'og: http://ogp.me/ns#'
    },
    titleTemplate: `%s | ${title}`,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: description },
      { property: 'og:image', content: ogImage },
      { property: 'og:site_name', content: title },
      { property: 'og:description', content: description },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      { hid: 'og:url', property: 'og:url', content: url },
      { hid: 'og:title', property: 'og:title', content: title },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:image:src', content: ogImage },
      { name: 'twitter:description', content: description },
      { hid: 'twitter:url', name: 'twitter:url', content: url },
      { hid: 'twitter:title', name: 'twitter:title', content: title }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // ...

トップページの.vue

index.vue

// ...
export default {
  // ...
  head () {
    return {
      titleTemplate: null,
      title: 'Works',
    }
  }
  // ...
}
// ...

詳細ページの.vue

_slug.vue

// ...
export default {
// ...
  data () {
    return {
      post: {},
      meta: {
        title: '',
        type: 'article',
        url: ''
      }
    }
  },
  async asyncData( { params } ) {
    const { data } = await axios.get('https://apiUrl.com/wp-json/wp/v2/posts?slug=' + params.slug)
    return {
      post: data[0],
      meta: {
        title: data[0].title.rendered,
        url: `https://works-yuheijotaki.netlify.com/${data[0].slug}/`
      }
    }
  },
  head () {
    return {
      title: this.meta.title,
      meta: [
        { hid: 'description', name: 'description', content: this.meta.description },
        { hid: 'og:type', property: 'og:type', content: this.meta.type },
        { hid: 'og:url', property: 'og:url', content: this.meta.url },
        { hid: 'og:title', property: 'og:title', content: `${this.meta.title} | ${title}` },
        { hid: 'twitter:url', property: 'twitter:url', content: this.meta.url },
        { hid: 'twitter:title', property: 'twitter:title', content: `${this.meta.title} | ${title}` }
      ]
    }
  }
}
// ...

参考:

• Nuxt.jsでWebサイト構築時に初期設定しておきたい項目まとめ - to-R Media
• Nuxt.js で API から取得した値を meta タグにセットする（nuxt-property-decorator）
• nuxtでtitleタグを動的に設定する · polidog lab++

残り

• コンテンツ調整
• 古いworksはアーカイブつくる
• ドメイン当てる？
• ドキュメント作成