はじめる

Starlight Theme Page はstarlight-theme-blackからインスピレーションを受けて作られた現代的な Starlight テーマです。

クイックスタート

📦 npm 🚀 pnpm 🧶 Yarn

npm install @pelagornis/page

pnpm add @pelagornis/page

yarn add @pelagornis/page

2. Astro 設定

astro.config.mjsファイルにプラグインを追加してください：

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import pagePlugin from "@pelagornis/page";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [pagePlugin()],
    }),
  ],
});

3. スタイル追加

src/styles/global.cssファイルにスタイルを追加してください：

@import "@pelagornis/page/styles";

主な特徴

🎨 現代的なデザイン

クリーンで直感的なインターフェースで最高のユーザー体験を提供

🌙 ダークモードサポート

自動テーマ切り替えと完璧なダークモードサポート

📱 レスポンシブ

モバイルからデスクトップまで、すべてのデバイスで完璧なユーザー体験

カスタマイゼーション

色の変更

CSS 変数を使用してテーマの色を簡単に変更できます：

:root {
  --page-accent: hsl(220, 100%, 50%);
  --page-accent-hover: hsl(220, 100%, 40%);
  --page-bg: hsl(0, 0%, 100%);
  --page-text: hsl(0, 0%, 10%);
}

ナビゲーションリンク

プラグイン設定でナビゲーションリンクを設定できます：

pagePlugin({
  navLinks: [
    {
      label: "Blog",
      link: "/blog/",
      badge: "New",
    },
  ],
});

コンポーネント例

コードブロック

npm install @pelagornis/page

次のステップ

テーマの設定が完了しました！ヘッダーのテーマトグルボタンをクリックしたり、ロゴにマウスを乗せてみてください。