Skip to content

Latest commit

 

History

History
137 lines (104 loc) · 4.68 KB

buttercms.mdx

File metadata and controls

137 lines (104 loc) · 4.68 KB
Raw
title description type service stub i18nReady
ButterCMSとAstro
ButterCMSを使ってコンテンツをAstroプロジェクトへ追加する
cms
ButterCMS
false
true

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

ButterCMSは、プロジェクトで利用できる構造化されたコンテンツを公開可能なヘッドCMSとブログエンジンです。

Astroとの連携

:::note 完全なブログサイトの例については、Astro + ButterCMS スタータープロジェクトをご覧ください。 :::

このセクションでは、ButterCMS SDKを使ってデータをAstroプロジェクトに取り込む方法を解説します。

始めるには以下の手順に従ってください。

必須要件

  1. Astroプロジェクト - もしAstroプロジェクトをまだ持っていない場合は、自動CLIでAstroをインストールを見ると、すぐに使い始めることができます。

  2. ButterCMSアカウント - もしアカウントを持っていない場合は、無料トライアルとして登録できます。

  3. ButterCMS APIトークン - SettingsページからAPIトークンを見つけることができます。

セットアップ

1. `.env`ファイルをプロジェクトのルートディレクトリに作成し、環境変数にAPIトークンを追加します。 
```ini title=".env"
BUTTER_TOKEN=APIトークンをここに記載
```

:::tip
[環境変数](/ja/guides/environment-variables/)のAstroの`.env`ファイルについてをご覧ください。
:::

  1. ButterCMS SDKを依存関係としてインストールします。 

    npm install buttercms
    ```shell pnpm add buttercms ``` ```shell yarn add buttercms ```

  2. プロジェクトにsrc/lib/を作り、そこへbutter.cms.jsを作成します。

    import Butter from "buttercms";

export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);

これは、APIトークンを使用してSDKの認証を行い、プロジェクト全体で利用するためにエクスポートします。

データを取得する

コンテンツを取得するために、このクライアントをインポートして、その中のretrieve関数を使用します。

このサンプルでは、ショートテキストのnameと数字のprice、そしてWYSIWYGのdescriptionの3フィールドを持つコレクションを取得します。

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.content.retrieve(["shopitem"]);

interface ShopItem {
	name: string,
	price: number,
	description: string,
}

const items = response.data.data.shopitem as ShopItem[];
---
<body>
	{items.map(item => <div>
		<h2>{item.name} - ${item.price}</h2>
		<p set:html={item.description}></p>
	</div>)}
</body>

インターフェイスはフィールドタイプを反映しています。WYSIWYGのdescriptionフィールドはHTML文字列としてロードされ、set:htmlを使い描画します。

同様にページを取得してフィールドを表示できます。

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.page.retrieve("*", "simple-page");
const pageData = response.data.data;

interface Fields {
  seo_title: string,
  headline: string,
  hero_image: string,
}

const fields = pageData.fields as Fields;
---
<html>
  <title>{fields.seo_title}</title>
  <body>
    <h1>{fields.headline}</h1>
    <img src={fields.hero_image} />
  </body>
</html>

もっと詳しく

コミュニティリソース

  • 追加してください！