@nuxt/content で、抜粋のみをレンダリングする方法

Nuxt.JS
2022.11.04

注）この記事は、現在の橋本技研公式サイト（https://bagooon.com）を制作中に書いた記事です。

橋本技研の公式サイト（https://bagooon.com）は、独立したときにWordPressを使って突貫工事で作ったものなのですが、既製テンプレートに記事だけ突っ込んだ代物ですので、ウェブサイト制作の技術力のアピールもへったくれもないなと常々思っておりました。

名刺交換などしますと、「どうかサイトを見ませんように！」などと心の中で念じたりする始末で、もはやそんなサイトは消した方が良いのでは？という状況でした。（なので、上のリンクはけっしてクリックしてはいけない…）

独立してから４年も経ち、いつまでも放置しておくわけにはいきませんので、なんとか時間をやりくりしながら、NuxtJSを使って公式サイトの制作をしているところです。

注）繰り返しになりますが、サイトはすでに完成し公開中です。

@nuxt/content(v1)で記事を管理することに

得意のHeadless CMSを使ったパターンで作ろうかと思いましたが、さほど更新するものでもないので、@nuxt/contentを使ってシンプルに作ってみることにしました。

記事をマークダウンで書いて、それをページに反映するわけですが、なかなか快適で気に入りました。

@nuxt/contentには、抜粋のみをレンダリングする機能がない？！

記事の抜粋部分（<!–more–>以前の部分）のみを表示したいと思ったのですが、公式ドキュメントにはその方法の記述がありませんでした。ググってみても、そうした情報は見当たらず、どうもそういった機能は備わってない様子。

仕方ないので、@nuxt/contentのソースコードを読んでみることに。

nuxt-contentコンポーネントのソースコードを読んでみた

@nuxt/contentには、本文表示に「nuxt-content」というコンポーネントが用意されています。これに、何かpropsが用意されているのではと期待したのですが、あいにく「document」と「tag」しか生えてませんでした。

  props: {
    document: {
      required: true
    },
    tag: {
      type: String,
      default: 'div'
    }
  },

マジかよと思いながら、render部を読み進めてみると、document内のbodyプロパティを参照してレンダリングしていることが分かりました。

  render (h, { data, props }) {
    const { document, tag } = props
    const { body } = document || {}
    ...
  }

$contentからfetchしたデータには、excerptプロパティが含まれていまして、中身を確認すると、まさに抜粋部分のデータなのですが、その構造はbodyと共通のようですので、これをbodyの代わりに渡してやれば良さそうです。

nuxt-contentコンポーネントで、抜粋のみをレンダリングする方法

つまり、通常は以下のように書くところを

nuxt-content(:document="page")

こんな風にしてやれば、抜粋部のみを表示できそうです。

nuxt-content(:document="{ body: page.excerpt }")

試してみたところ、期待したとおりになりました。イエイ！

コメント

タイトルとURLをコピーしました