【Nuxt.js】ContentfulのMarkdown形式のブログコンテンツを表示する

スポンサーリンク
nuxt.js-logo Vue.js/Nuxt.js

Nuxt.js + Contentfulを使ってブログシステムを構築中に
少しつまづいたのでメモ。

やりたいこと

  • ContentfulにはMarkdown形式でブログコンテンツのデータを保存
  • 最終的にブログをhtml形式で表示する
  • ブログのスタイル(css)をいじれるようにする

実現方法

  1. Markdown形式でブログ内容を登録する
  2. @nuxtjs/markdownitをインストールする
  3. nuxt.config.jsに設定を追加する
  4. $md.render()を使ってhtmlに変換して表示する
  5. ディープセレクタ/deep/を使ってcssを記述する

Markdown形式でブログ内容を登録する

Contentfulのモデル設定だが、
Long Textを選択すると、Markdownの項目が選択できるようになるため
こちらを利用する。

nuxtjs/markdownitをインストールする

公式サイト:https://www.npmjs.com/package/@nuxtjs/markdownit

これはmarkdown形式で書かれた文字列のデータを、
htmlタグに変換してくれる。

$ npm install @nuxtjs/markdownit

vue-markdownというものでも同様の機能を実現できるが
こちらは@nuxtjs/markdownitと比較して
サーバーサイドでレンダリングされないという違いがある。

nuxt.config.jsに設定を追加する

nuxt.config.js

module.exports = {

...

modules: [
    '@nuxtjs/markdownit'
  ],

...

markdownit: {
    injected: true,   // 「$md」でどこからでも使えるようにする
    breaks: true      // 改行を<br/>に変換する
  }
}

$md.render()を使ってhtmlに変換する

Contentfulからは改行のない連続した文字列で送られてくるので

  1. $md.render()を使ってhtml形式に変換
  2. html形式の文字列をv-htmlを使って表示

という手順で画面に表示する。

<template>
  <div class="blog-content" v-html="$md.render(content)"></div>
</template>

<script>
export default {
  data() {
    return {
       // 本来はcontentfulから取得したデータを入れておく
       content: '# 見出し1  ## 見出し2'
    }
  }
}
</script>

ディープセレクタを使ってcssをあてる

v-htmlによってレンダリングされるhtmlには、
スコープ付きcss(scoped)の機能が使えない。

そのため、ディープセレクタを使って
Markdownのテキストにcssを適応する。

<template>
  <div class="blog-content" v-html="$md.render(content)"></div>
</template>

<style lang="scss" scoped>
/deep/ h1 {
  color: red;  /* 色を赤に変更する */
}
</style>

まとめ

  • @nuxtjs/markdownitを使うとSSRできる
  • nuxt.config.jsに設定値を追加する
  • v-htmlを使ってレンダリングされたものにはディープセレクタを使ってcssをあてる
タイトルとURLをコピーしました