シンプルブログ、meta descriptionとtitle変更

Vue.js

概要

DRFとVue.jsで、シンプルブログを作るシリーズの一つです。今回はページ毎のtitle要素とmeta descriptionを書き換えるようにしていきます。

書き換える要素を用意する

まず、public/index.htmlを書き換えます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Design Note</title>
    <meta name="description" content="デザインに関する個人的なメモ、備忘録、ノートです。">
    <script>
      (function(d) {
        var config = {
          kitId: 'kgr0pdb',
          scriptTimeout: 3000,
          async: true
        },
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<title>Design Note</title><meta name="description" content="デザインに関する個人的なメモ、備忘録、ノートです。">、あとついでにWebフォントの読み込みもここで行うようにしています。

記事一覧のタイトルと説明

PostList.vueにてmoutendを追加します。

        mounted() {
            document.title = `Design Note`
            document.querySelector('meta[name="description"]').setAttribute('content', 'デザインに関する個人的なメモ、備忘録、ノートです。')
        },

やっていることは単純で、タイトルとmeta descriptionを書き換えているだけです。DOM操作を行う場合は、createdではできないので、mountedに書く必要があります。

Post.vueも同様にしたいのですが、こちらは記事のタイトルやリードテキストを反映させたいです。なので、記事データをAjaxで取得してからでないと、書き換えることができません。簡単なな方法としては、createdでやっているAjax処理をmoutendに変更して、通信が終わったときに書き換えるという方法です。

        mounted() {
            this.$http(`${this.$httpPosts}${this.id}/`)
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    this.post = data
                    document.title = `${data.title} - Design Note`
                    document.querySelector('meta[name="description"]').setAttribute('content', data.lead_text)
                })
        },

Googleアナリティクス

一般に公開しているサイトならば、Googleアナリティクスは必要になるでしょう。

npm install vue-analytics

細かく色々とできるのですが、単純に使うならば、main.jsあたりに次のように追加しておきます。

import VueAnalytics from 'vue-analytics'  // 追加

// 追加
Vue.use(VueAnalytics, {
  id: 'UA-あなたの番号',
  router
})

Relation Posts

Comment

記事にコメントする

まだコメントはありません。