시작하기

Starlight Theme Page는 starlight-theme-black에서 영감을 받아 만든 현대적인 Starlight 테마입니다.

Quick Start

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

다음 단계

이제 테마가 설정되었습니다! 헤더의 테마 토글 버튼을 클릭해보거나, 로고에 마우스를 올려보세요. 모든 인터랙션이 부드러운 애니메이션과 함께 작동합니다.

다음 문서들을 확인해보세요:

컴포넌트 가이드 - 각 컴포넌트의 사용법
기본 예제 - 간단한 설정 예제
고급 예제 - 복잡한 커스터마이제이션