[ 目次 ]

• はじめに
• なぜ変更したか？
• vue-markdownのアンインストール
• nuxtjs/markdownitのインストール
• nuxt.config.jsに設定を追加
• 利用方法
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

以前の「技術ブログを新しく作り直しました 」という投稿で、本ブログで利用している技術について少し述べましたたが、本ブログではContentfulで管理いているmarkdown形式の投稿データをhtmlに変換して記事を表示しています。vue-markdownを利用いてmarkdownデータをhtmlに変換しているのですが、今回は nuxtjs/markdownit を利用する形に変更します。

なぜ変更したか？

vue-markdownはブラウザ上でmarkdownデータをhtmlに変換していました。
この場合、Googleなどの検索エンジンはブログ記事の内容をクローリングすることができず、タイトルと説明の部分しかSEOの判断材料としてくれません。
今後記事を増やしていき多くの方に記事を見て頂き参考にしてもらいたいので、SEO対策としてvue-markdownを止めてnuxtjs/markdownit を利用することにしました。

※ vue-markdownもnuxtjs/markdownitも内部では markdown-it というライブラリを利用していますが、実装方法が異なるようです。中身までは未確認です。

vue-markdownのアンインストール

■ npmを利用する場合

$ npm uninstall vue-markdown --save

■ yarnを利用する場合

$ yarn remove vue-markdown

nuxtjs/markdownitのインストール

■ npmを利用する場合

$ npm install @nuxtjs/markdownit --save

■ yarnを利用する場合

$ yarn add @nuxtjs/markdownit

nuxt.config.jsに設定を追加

nuxt.config.jsにnuxtjs/markdownitのモジュール読み込みと設定を追加します。

{
  modules: [
    '@nuxtjs/markdownit'
  ],
 
  markdownit: {
    injected: true, // $mdを利用してmarkdownをhtmlにレンダリングする
    breaks: true, // 改行コードを<br>に変換する
    html: true, // HTML タグを有効にする
    linkify: true, // URLに似たテキストをリンクに自動変換する
    typography: true,  // 言語に依存しないきれいな 置換 + 引用符 を有効にします。
    use: [
      'markdown-it-toc' // 目次を作るためのライブラリ。別途インストールが必要
    ]
  }
}

Contentfulから取得したmarkdownデータをhtmlにレンダリングするため、「Using $md to render markdown」の設定(injected: true)を指定します。

利用方法

前述した$mdという変数を使って、Contentfulから取得したmarkdownのデータをhtmlにレンダリングします。

<div v-html="$md.render(post.fields.body)"></div>

post.fields.bodyがContentfulから取得したデータです。bodyがmarkdown形式の記事データになります。
renderファンクションの引数に、markdown形式のデータを渡すことでhtmlが返却されます。

最後に

今回は、nuxtjs/markdownit の利用方法についてまとめました。
@nuxtjs/markdownitのUseage にもありますが、mdファイルを直説読み込んだり、vueからmdファイルを読み込み変数化したりできます。

「Contentfulが利用できなくなった」とか「無料の上限が近い」とか、データの保存方法を変更する必要が出てきた場合、ブログの記事をmdファイルとして保存しておくのもいいかも！っと思ったりしました。