--- title: カスタムページ description: >- 完全にカスタムな .astro ルートをドキュメントと並べてマウントし、サイトの設定、ナビゲーション、コンテンツを blume:data モジュールから読み取ります。 --- Blume サイトの大部分は Markdown ですが、ドキュメント*ではない* ルートが必要になることもあります — ランディングページ、料金ページ、手作りのブログやチェンジログのインデックス、あるいはインタラクティブなダッシュボードなどです。**pages** フォルダに `.astro` ファイルを置けば、Blume がそれをコンテンツと並ぶ実際のルートとしてマウントします。 ## ページを追加する [#add-a-page] プロジェクトルートに `pages/` フォルダを作成し、`.astro` ファイルを追加します: ```astro pages/pricing.astro lineNumbers --- import data from "blume:data"; ---

Pricing for {data.config.title}

``` `blume dev` はこれを即座に検出し、`blume build` は静的 HTML にプリレンダリングします。フォルダ名は [`content.pages`](/docs/configuration#content) で設定できます（デフォルトは `"pages"`）。 カスタムページはディスク上の元の場所を保持するため、相対インポート、コンポーネントのインポート、[`getStaticPaths`](https://docs.astro.build/en/reference/routing-reference/#getstaticpaths) はすべて、素の Astro プロジェクトとまったく同じように動作します — Blume は各ファイルをコピーするのではなく、それがある場所にマウントします。 ## ファイルとルート [#files-and-routes] pages フォルダ配下の各ファイルのパスがそのルートになります。`index` は親フォルダに対応し、動的な `[param]` セグメントはそのまま保持されます: | ファイル | ルート | | ------------------------- | ------------- | | `pages/pricing.astro` | `/pricing` | | `pages/blog/index.astro` | `/blog` | | `pages/blog/[slug].astro` | `/blog/:slug` | | `pages/changelog.astro` | `/changelog` | 同じパスに生成されたルートがある場合、カスタムページが**優先されます**。たとえば `pages/changelog.astro` を追加すると、Blume の[生成されるチェンジログのタイムライン](/docs/advanced/changelog)が自作のものに置き換わります。 ## サイトデータの読み取り [#reading-site-data] `blume:data` をインポートすると、サイトの他の部分が使っているのと同じ解決済みの設定、ナビゲーション、ルート、フィードを読み取れます: ```astro pages/all-pages.astro lineNumbers --- import data from "blume:data"; ---

All pages

``` Blume プロジェクト内では、このモジュールは自動的に型付けされます。型付きヘルパー、props、あるいは独自の tsconfig のために、`import type { BlumeData } from "blume"` で型を明示的に取り込むこともできます: ```ts import type { BlumeData, BlumeRoute } from "blume"; const indexable = (data: BlumeData): BlumeRoute[] => data.routes.filter((route) => route.indexable); ``` このモジュールが公開するもの: | Prop | Type | Default | Description | | - | - | - | - | | `config` | `BlumeDataConfig` | - | 解決済みのサイト設定: title、description、logo、favicon、appleIcon、banner、theme、site、repoUrl、github（owner、repo、host、および REST api のベース — 未設定の場合は null）、search、i18n、mcp、ask、og、analytics、feedback、structuredData、toc、codeThemes、codeWrap、imageZoom。 | | `navigation` | `Navigation` | - | コンテンツから推論されたサイドバー、タブ、セレクター（デフォルトロケール）。 | | `navigationByLocale` | `Record` | - | ロケールコードをキーとする、ロケールごとのナビゲーションツリー。i18n が設定されていない限り空です。 | | `routes` | `BlumeRoute[]` | - | すべてのコンテンツページ: { id, path, title, locale, indexable, hidden, draft, fallback, editUrl, lastModified, alternates, collection, entryId }。 | | `feeds` | `BlumeFeed[]` | - | 生成された RSS フィード: { href, title }。 | | `fontCssVars` | `string[]` | - | 設定されたフォントの CSS 変数名（Astro の インテグレーション）。 | | `ui` | `UIStrings` | - | デフォルトロケール向けの解決済み UI クローム文字列（検索、サイドバー、フッターのラベル）。 | | `uiByLocale` | `Record` | - | ロケールコードをキーとする、ロケールごとの UI 文字列。i18n が設定されていない限り空です。 | `routes` はページのメタデータを持ちますが、`type` や `date` のようなフロントマターは含みません。コンテンツタイプでフィルタリングしたリスト — ブログやチェンジログのインデックス — を作るには、フロントマターを保持している Astro の `docs` コンテンツコレクションと組み合わせてください: ```astro pages/blog/index.astro lineNumbers --- import { getCollection } from "astro:content"; import data from "blume:data"; // Each route's id matches its collection entry id. const routeById = new Map(data.routes.map((route) => [route.id, route.path])); const posts = (await getCollection("docs")) .filter((entry) => entry.data.type === "blog" && !entry.data.draft) .map((entry) => ({ description: entry.data.description, href: routeById.get(entry.id), title: entry.data.title, })); ---
    { posts.map((post) => (
  • {post.title}

    {post.description}

    • )) }
``` ## ランタイムヘルパー [#runtime-helpers] `blume/runtime` は一般的なデータパターンをまとめて提供するため、`blume:data` の内部に手を伸ばす必要がありません。 **`getBlumeCollection(data, query?)`** はコンテンツルートを選択します — コレクション、ロケール、パスのプレフィックスでフィルタリングし、下書きと非表示ページを除外し、結果をパス順にソートします — これはまさにカスタムインデックスに必要なものです: ```astro pages/blog/index.astro lineNumbers --- import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const posts = getBlumeCollection(data, { prefix: "/blog" }); --- ``` **``** はコンテンツエントリの本文をカスタムページ内でレンダリングし、Blume 組み込みの MDX コンポーネント（コールアウト、カード、ステップなど）があらかじめ組み込まれた状態になります — ランディングページでドキュメントを目立たせたり、実際のコンテンツを表示する独自のインデックスを構築したりするのに使えます: ```astro pages/index.astro lineNumbers --- import BlumePage from "blume/components/BlumePage.astro"; import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const [intro] = getBlumeCollection(data, { prefix: "/docs" }); --- {intro && } ``` 独自のオーバーライドやアイランド（生成されたランタイム内に存在し、デフォルトではインポートされません）を追加するには `components` を、`"docs"` 以外のコレクションから読み取るには `collection` を渡します。 ## サイトレイアウトを使う [#using-the-site-layout] `RootLayout` は、生成されたページが使うのと同じ 3 カラムグリッドでラップすることで、カスタムページに完全なドキュメントのクローム — ヘッダー、サイドバー、検索、目次、テーマ — を与えます。ランディングページやマーケティングページではそのグリッドが邪魔になるので、代わりに **`PageLayout`** を使いましょう: これはドキュメントのシェル、ヘッダー、テーマ、フォントに加えて、単一の全幅 `` を提供します（サイドバーなし、prose なし、目次なし）。オプションの `footer` スロットは `
` の後にレンダリングされます: ```astro pages/index.astro lineNumbers --- import PageLayout from "blume/components/layout/PageLayout.astro"; import data from "blume:data"; import Footer from "./_home/Footer.astro"; const { config } = data; ---

Build docs that fly