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

ページとレイアウト

varshaはファイルベースのルーティングを使用しており、src/pages/にファイルを置くだけでページを作成できます。このガイドでは、ページの作成、レイアウトの使用、共通コンポーネントの構成方法について説明します。

ページの作成方法

基本的なマーケティングページ

マーケティングページ（ランディングページ、About、Pricingなど）はすべてMarketingLayoutを使用する必要があります：

---
import MarketingLayout from '../components/MarketingLayout.astro';
---

<MarketingLayout
  title="About Us"
  description="Learn about our company."
  canonicalPath="/about/"
>
  <main class="page">
    <section class="hero">
      <h1>About Us</h1>
      <p>We build tools that help people ship faster.</p>
    </section>
  </main>
</MarketingLayout>

MarketingLayoutのプロパティ

プロパティ	型	必須	説明
`title`	`string`	はい	ページタイトル（`<title>`タグとOGタグに使用）
`description`	`string`	はい	メタディスクリプション
`canonicalPath`	`string`	はい	正規URLパス（`/about/`のように）
`image`	`string`	いいえ	OG画像のパス（デフォルトは`/og-image.png`）

ヒーロー付きページ

ヒーローセクションのあるページを作成：

---
import MarketingLayout from '../components/MarketingLayout.astro';
---

<MarketingLayout
  title="Features"
  description="Everything varsha has to offer."
  canonicalPath="/features/"
>
  <main class="page">
    <section class="hero">
      <h1>Everything you need to ship.</h1>
      <p>Built-in components, themes, and tools.</p>
      <div class="hero-actions">
        <a href="/docs/quick-start/" class="btn btn-primary">Get started</a>
        <a href="#features" class="btn btn-secondary">See features</a>
      </div>
    </section>

    <section id="features" class="section">
      <div class="container">
        <h2>Features</h2>
        <div class="card-grid">
          <div class="card">
            <h3>Beautiful by default</h3>
            <p>18+ themes and a polished design system.</p>
          </div>
          <div class="card">
            <h3>Fast by default</h3>
            <p>Astro ships zero JavaScript by default.</p>
          </div>
        </div>
      </div>
    </section>
  </main>
</MarketingLayout>

ページの構造化

varshaはマーケティングページに一貫したセクション構造を使用しています：

<main class="page">
  <section class="hero">        <!-- ページヘッダー/ヒーロー -->
  <section class="section">     <!-- コンテンツセクション -->
    <div class="container">     <!-- コンテンツ幅を制限 -->
  <section class="section alt"> <!-- 代替背景のセクション -->
</main>

使用可能なユーティリティクラス

クラス	目的
`.page`	メインページラッパー
`.hero`	フルワイドのヒーローセクション
`.section`	標準パディング付きコンテンツセクション
`.section.alt`	代替背景のセクション
`.container`	最大幅のコンテナ（デフォルトで中央揃え）
`.card-grid`	レスポンシブなカードグリッド
`.card`	個々のカード
`.btn` / `.btn-primary` / `.btn-secondary`	ボタンスタイル

既存コンポーネントの使用

BuiltWith

「Built with varsha by myndlabs」の帰属バッジを表示します。このコンポーネントはMarketingLayoutによって自動的に含まれます。削除しないでください — これはvarshaの使用条件において必要な帰属表示です。

import BuiltWith from '../components/BuiltWith.astro';

<BuiltWith />

カスタムセクションコンポーネント

再利用可能なセクションコンポーネントをsrc/components/に作成できます：

---
const { features } = Astro.props;
---

<div class="card-grid">
  {features.map(feature => (
    <div class="card">
      <h3>{feature.title}</h3>
      <p>{feature.description}</p>
    </div>
  ))}
</div>

そして任意のページで使用：

---
import MarketingLayout from '../components/MarketingLayout.astro';
import FeatureGrid from '../components/FeatureGrid.astro';

const features = [
  { title: 'Fast', description: 'Zero JS by default.' },
  { title: 'Beautiful', description: '18+ built-in themes.' },
];
---

<MarketingLayout title="Features" description="..." canonicalPath="/features/">
  <main class="page">
    <section class="hero">
      <h1>Features</h1>
    </section>
    <section class="section">
      <div class="container">
        <FeatureGrid features={features} />
      </div>
    </section>
  </main>
</MarketingLayout>

ナビゲーションの更新

新しいページを追加した後、MarketingLayout.astroのナビゲーションリンクを更新します：

<div class="nav-links">
  <a href="/">Home</a>
  <a href="/features/">Features</a>
  <a href="/pricing/">Pricing</a>
  <a href="/docs/">Docs</a>
</div>