タグ付けとタグでの絞り込み

まずタグの作り方ですが、 Contentでブログ以外にTagなどを作成します。 Authorと同じですね。 そして、Blog記事のContent modelを編集し、 Referencesを追加します。 この時、1個のみでも複数でも構いません。

Contentでタグをいくつか作成し、記事に紐づけてみましょう。（Authorを選択するのと同じ要領です） それだけで記事にはタグ付けができた状態になります。

あとは、ブログ記事を表示する際に、指定のタグで絞り込めば完了です。 下記の例にもありますが、 fields に作成したcontentが入ってきますので、 そこを対象のIDで指定してやれば一致する内容を取得してくれます。

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      'fields.tags.sys.id': '絞り込みたいタグID',
    })
  },

参照 Links to a specific item If you want to retrieve all items linked to a specific entry, the query URL should filter entries on their specific content_type, linking_field (field to link items) and entry_id from the target entry. Contentful Document links/links-to-a-specific-item

除外

例えば記事に紐づく関連記事として、同じタグの他の記事を引っ張りたいなどのニーズがあるとします。 その時に、対象となる記事を関連記事のリストから除外したいというケースがあるかと思うのですが、 その際には[ne]を利用します。

下記の例だと、 対象のslug以外のブログ記事を新着順に引っ張るということをしております。

  async fetch() {
    const limit = 5
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      order: '-sys.createdAt',
      'fields.slug[ne]': 'slug',
    })
  },

参照 Inequality operator Uses the [ne] parameter to exclude items matching a certain pattern. Contentful Document search-parameters/inequality-operator

全文検索

全文検索機能まで用意してくれています！ getEntriesにqueryを追加してあげるだけで、Contentの内容を全文検索してくれるようです。 至れり尽くせりって感じですね！

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      query: '全文検索したいテキスト',
    })
  },

参照 Full-text search It's possible to perform a full-text search across all text and symbol fields with the query parameter. Note: Full-text search is case insensitive and might return more results than expected. A query will only take values with more than 1 character. Contentful Document search-parameters/full-text-search

ちなみに、fieldsを指定しての検索も可能なようです。 例えば、記事のタイトルに対して検索したい場合はこんな感じでしょうか？

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      'fields.title[match]': 'Nuxt', // Content Type BLOG_POSTの記事タイトルにNuxtを含むものを検索したい
    })
  },

参照 Full-text search on a field You can perform a full-text search on a specific field with the [match] operator. Note: Full-text search is case insensitive and might return more results than expected. A query will only take values with more than 1 character. Contentful Document search-parameters/full-text-search-on-a-field

まとめ

全体的にドキュメントを読めば、こんなん出来るのか👀 みたいなのがいっぱいあるので、是非色んな機能を使ってMVPをサクッと作るとかやってみたいですね

今後も便利な機能があったら、紹介したいと思います！