このページの翻訳は LLM によって生成されています。誤りに気づいた場合は GitHub で issue を開いてお知らせください。

コンテンツとブログ

varshaはAstroのコンテンツコレクションを使用して、ブログ記事とドキュメントページの両方を管理します。このガイドでは、コンテンツの作成、コレクションの管理、ブログ記事の公開方法について説明します。

コンテンツコレクションについて

Astroのコンテンツコレクションは、Markdown/MDXコンテンツを管理するための型安全な方法を提供します。varshaには2つのコレクションがあります：

コレクション	ディレクトリ	目的
`blog`	`src/content/blog/`	ブログ記事
`docs`	`src/content/docs/`	Starlightドキュメント（自動処理）

コレクションスキーマはsrc/content/config.tsで定義されています。

ブログ記事の作成

新しいブログ記事を作成するには、src/content/blog/に.mdまたは.mdxファイルを追加します：

---
title: "Launching varsha: A Premium Website Starter"
description: "Today we're launching varsha, a beautiful Astro starter template."
pubDate: "2025-01-15"
author: "Your Name"
tags: ["launch", "announcement", "astro"]
---

Today we're excited to announce the launch of **varsha**, our premium
website starter template built on Astro.

## Why varsha?

We built varsha because we were tired of starting every new project from
scratch. Every website needs a hero section, features grid, footer,
documentation, and blog — varsha gives you all of that out of the box.

## What's included

- 18+ beautiful themes
- Starlight documentation with search
- Blog with MDX support
- SEO optimization
- Zero-config deployment

ブログ記事のfrontmatter

フィールド	型	必須	説明
`title`	`string`	はい	記事タイトル
`description`	`string`	はい	SEOと記事一覧のための短い説明
`pubDate`	`string`	はい	公開日（`"YYYY-MM-DD"`形式）
`author`	`string`	いいえ	著者名
`tags`	`string[]`	いいえ	タグの配列
`heroImage`	`string`	いいえ	ヒーロー画像のパス
`draft`	`boolean`	いいえ	`true`の場合、記事が公開されない

MDXの使用

MDXを使用すると、Markdownコンテンツ内でJSXコンポーネントを使用できます。ブログ記事でMDXを使用するには、ファイル拡張子を.mdxにします：

---
title: "Feature Showcase"
description: "See varsha components in action."
pubDate: "2025-01-20"
---

import { Card, CardGrid } from '@astrojs/starlight/components';

## Built-in Components

Here are some components you can use in MDX:

<CardGrid>
  <Card title="Fast" icon="rocket">
    Zero JavaScript by default means lightning-fast pages.
  </Card>
  <Card title="Beautiful" icon="sparkles">
    18+ themes with carefully designed color palettes.
  </Card>
</CardGrid>

記事の一覧表示

ブログ記事はsrc/pages/blog/index.astroのブログ一覧ページに自動的に表示されます。このページはコンテンツコレクションから記事を取得します：

---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/BlogPost.astro';

const posts = await getCollection('blog', ({ data }) => {
  return import.meta.env.DEV || !data.draft;
});

const sortedPosts = posts.sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---

ドラフト記事

下書き中の記事はdraft: trueを設定します：

---
title: "Coming Soon"
description: "This post is not ready yet."
pubDate: "2025-02-01"
draft: true
---

ドラフトは開発環境では表示されますが、プロダクションビルドでは除外されます。

ドキュメントコンテンツ

ドキュメントページはStarlightによって処理され、src/content/docs/にあります。ドキュメントページは以下のfrontmatterを使用します：

---
title: "Page Title"
description: "A short description for SEO and the sidebar."
---

ローカライズ版ドキュメントはja/およびzh-cn/サブディレクトリに配置します。

画像の追加

コンテンツ内の画像

ブログ記事やドキュメントで画像を使用する場合：

最適化が必要な画像はsrc/assets/に配置し、MDXでインポート
最適化が不要な静的画像はpublic/に配置

---
title: "Post with Images"
description: "A post demonstrating images."
pubDate: "2025-01-25"
---

import myImage from '../../assets/my-image.png';

![Alt text](../../../assets/my-image.png)