Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 34 additions & 28 deletions src/content/docs/ja/guides/cms/buttercms.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ description: ButterCMSを使ってコンテンツをAstroプロジェクトへ
type: cms
service: ButterCMS
stub: false
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Expand All @@ -13,6 +14,10 @@ ButterCMSは、プロジェクトで利用できる構造化されたコンテ

## Astroとの連携

:::note
完全なブログサイトの例については、[Astro + ButterCMS スタータープロジェクト](https://buttercms.com/starters/astro-starter-project/)をご覧ください。
:::

このセクションでは、[ButterCMS SDK](https://www.npmjs.com/package/buttercms)を使ってデータをAstroプロジェクトに取り込む方法を解説します。

始めるには以下の手順に従ってください。
Expand All @@ -29,42 +34,42 @@ ButterCMSは、プロジェクトで利用できる構造化されたコンテ

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

```ini title=".env"
BUTTER_TOKEN=APIトークンをここに記載
```
```ini title=".env"
BUTTER_TOKEN=APIトークンをここに記載
```

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

2. ButterCMS SDKを依存関係としてインストールします。
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install buttercms
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm install buttercms
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add buttercms
```
</Fragment>
</PackageManagerTabs>
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install buttercms
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add buttercms
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add buttercms
```
</Fragment>
</PackageManagerTabs>

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

```js title="src/lib/buttercms.js"
import Butter from "buttercms";
```js title="src/lib/buttercms.js"
import Butter from "buttercms";

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

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

### データを取得する

Expand Down Expand Up @@ -122,6 +127,7 @@ const fields = pageData.fields as Fields;

### もっと詳しく

- [Astro + ButterCMS スタータープロジェクト](https://buttercms.com/starters/astro-starter-project/)
- [完全なButterCMS APIドキュメント](https://buttercms.com/docs/api/)
- ButterCMSの[JavaScriptガイド](https://buttercms.com/docs/api-client/javascript/)

Expand Down