【Nuxt.js + Prismic.io】第2回 簡単なサイトを作ってみよう

  • NuxtJS
  • Prismic

はじめに

第1回の記事がありますので、まだ読まれていない方はご覧ください。

この記事での作業スコープ

  • 作成するサイトの構成
  • カスタムタイプ(記事作成フォームの用意)

作成するサイトの構成

第1回の記事でも書いたように、そこまで複雑で作り込んだサイトは作らない予定です。

簡単にフロントページ(内容は新着記事一覧)と記事詳細ページの構成としたいと思います。整理すると以下の感じです。

  • フロントページ : /
  • 記事詳細ページ : /page/{uid}

{uid}は記事のユニークなIDを表します。

カスタムタイプ(記事作成フォームの用意)

カスタムタイプは扱うデータのモデルを定義したものです。ここでは記事が該当しますが、用途によって様々だと思います。(ショッピングサイトであれば、記事というよりも商品が適切でしょうか)

記事のカスタムタイプを作成していこうと思います。

作成

カスタムタイプが未登録の場合は、Create custom typeボタンが表示されていると思います。(参考までにキャプチャ画像を貼付しましたのでご覧ください)

ボタンをクリックした後、カスタムタイプの種類選択と名前記入フォームが現れます。記事は複数作成される想定ですので、Repeatable Typeを選択します。名前はPageとします。

フィールドの配置

カスタムタイプは作成できましたが、まだフィールド(入力項目)が配置できていない状態です。

フィールドは次の3つとしたいと思います。(キャプチャ画像をご覧ください)

  • uid : 記事を表すユニークなID
  • title : 記事タイトル
  • body : 記事本文

API IDは、その名の通りAPIで取得するデータのプロパティになります。簡潔でわかりやすい名前を指定しましょう。

カスタムタイプはJSONで構成を定義できますので、下に示すJSONをコピペしてしまってください。Gitでカスタムタイプの管理するといったことも可能です。

{
  "Main": {
    "uid": {
      "type": "UID",
      "config": {
        "label": "UID"
      }
    },
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1",
        "label": "Title",
        "placeholder": "記事タイトルです。"
      }
    },
    "body": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
        "allowTargetBlank": true,
        "label": "Body",
        "placeholder": "記事本文です"
      }
    }
  }
}

次回予告

  • Nuxt.jsのプロジェクトを用意

ようやく実装段階へ!

次回の記事へ

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚