Sanity のコンテンツツリーの制御

コンテンツ表示項目

今回はブログの Post に関しての実装例となります。今現在 Post に関してのスキーマの定義において、プレビューに関しては以下のように設定をしています。

  preview: {
    select: {
      title: "title",
      author: "author.name",
      media: "featuredMedia",
    },
    prepare(selection) {
      const { author } = selection;
      return { ...selection, subtitle: author && `by ${author}` 
    };
  },

このコードで表示されるコンテンツの項目は、タイトル、メディア、サブタイトルです。

要素としては３つ利用しており title と media はそのままに、author の部分を編集者名ではなく公開日を指定します。公開日は date と定義しているとして、以下のように変更をします。

  preview: {
    select: {
      title: "title",
      date: "date",
      media: "featuredMedia",
    },
    prepare(selection) {
      const { date } = selection;
      return { ...selection, subtitle: date && `on ${date}` };
    },
  },

結果、以下のように表示が変わりました。

今回に時間の部分は不要で、日付のみを設定したいので、少し変更をします。

  preview: {
    select: {
      title: "title",
      date: "date",
      media: "featuredMedia",
    },
    prepare(selection) {
      const { date } = selection;
      return { ...selection, subtitle: `on ${date?.substring(0, 10)}` };
    },
  },

結果、以下のように日付のみを表示するようにしました。

表示の調整

上記の画像を参照するとわかりますが、表示されている順番に関しては最近更新したものが一番上に表示されるようになっています。これは、表示順を変更する仕組みは用意されており、以下のように現在は表示されている形です。

表示順を変更するために、以下の ordering の設定を preview の前に今回は追加します。

  orderings: [
    {
      title: "Date, New",
      name: "dateDesc",
      by: [{ field: "date", direction: "desc" }],
    },
  ],
  
  preview: {

これで Date, New という選択肢が追加されて、選択をすると日付順となります。なお、日付を記載していない投稿はこのルールの場合は一番上に表示されます。

標準の設定

上記の表示順をデフォルトとして扱うために、Structure の表示設定を変更していきます。まず変更のルールに関してのファイルとして、sanity/structure.ts を作成します。コードは以下の通りです。

// ./sanity/structure.ts
import type {StructureResolver} from 'sanity/structure'

export const structure: StructureResolver = (S) =>
  S.list()
    .title('コンテンツ')
    .id('root')
    .items([
      S.listItem()
        .title('投稿')
        .id('post')
        .child(
          S.documentTypeList('post')
            .title('投稿')
            .defaultOrdering([{field: 'date', direction: 'desc'}])
        ),

      // Everything except posts is displayed normally.
      ...S.documentTypeListItems().filter((listItem) => listItem.getId() !== 'post'),
    ])

続いてこの設定を反映させるために、sanity.config.ts のファイルを以下のように更新します。

// Load environment variables only in Node.js environment
if (typeof window === 'undefined') {
  require('dotenv').config()
}

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {visionTool} from '@sanity/vision'
import {schema} from './schemaTypes'
import { structure } from './sanity/structure'

export default defineConfig({
  name: 'default',
  title: 'Haramizu.jp',

  projectId: process.env.SANITY_STUDIO_PROJECT_ID || 'project_id',
  dataset: process.env.SANITY_STUDIO_DATASET || 'production',

  plugins: [structureTool({structure}), visionTool()],

  schema,
})

上記の設定変更後、アクセスをすると標準で公開日順として表示されるようになりました。

まとめ

今回はコンテンツの一覧の表示順を変更して、今回はブログサイトのためブログのコンテンツの最新、もしくは下書きのコンテンツが新着順という形で表示を変更しました。これを応用してフィルタする手順などもありますが、今回はシンプルな実装のみで完了させました。