コンテンツへスキップ
NotroTail

カスタマイズ

NotroTail は Astro ファイルを直接編集するテンプレートです。 サイト名・ナビゲーション・フッターは各コンポーネントに直書きされているので、該当箇所を編集するだけです。 さらにコンポーネントを差し替えたり、スタイルをカスタマイズしたりすることも可能です。

1. サイト設定（config.ts）

src/config.ts にはブログのページネーション数とシステムタグのみ定義されています。 サイト名や説明文は各コンポーネントに直接記述します。

src/config.ts
// 1ページあたりの記事数
export const BLOG_POSTS_PER_PAGE = 10;

// System tags — affect post filtering logic
export const INTERNAL_TAGS = ["page", "pinned"];

2. ビルド設定（astro.config.mjs）

サイトの canonical URL は astro.config.mjs の site オプションで設定します。SeoHead.astro 内の SITE_URL と合わせてください。

astro.config.mjs（抜粋）
export default defineConfig({
  site: "https://example.com",
  // ...
});

3. トップページのカスタマイズ（widgets/）

トップページ（src/pages/index.astro） は以下の Widget コンポーネントに分割されています。 不要なセクションは削除し、必要なセクションを追加するだけです。

src/pages/index.astro
---
import Hero from "../components/widgets/Hero.astro";
import Features from "../components/widgets/Features.astro";
import CTA from "../components/widgets/CTA.astro";
// 不要なものは削除、必要なものだけ残す
---

<Layout ...>
  <main>
    <Hero />       {/* ← tagline や description は props で上書き可能 */}
    <Features />   {/* ← features 配列を props で渡せばカスタム内容に変更可 */}
    <CTA />
  </main>
</Layout>

各 Widget は props でデフォルト値を上書きできます。 例えば <Hero tagline="私のブログへようこそ" /> のように渡すだけでキャッチフレーズを変更できます。

4. ブログコンポーネントのカスタマイズ

ブログ関連のコンポーネントは src/components/blog/ にまとめられています。

ファイル 役割
blog/PostCard.astro 記事カード（サムネイル・タイトル・日付・タグ）
blog/BlogList.astro 記事カードのグリッドリスト
blog/Pagination.astro 前へ / 次へ ページネーション
notro/Callout.astro Notion コールアウトブロック（notro-ui）

5. スタイルのカスタマイズ

Notion ブロックコンポーネントのスタイルは notro-ui で管理します。 npx notro-ui init でコピーされたファイルはプロジェクト所有になるので、直接編集してください。

コンポーネントを直接編集する

src/components/notro/Callout.astro などを直接編集することでスタイルを変更できます。 コンポーネントファイルは Tailwind ユーティリティクラスのみで記述されており、自由にカスタマイズできます。

src/components/notro/Callout.astro（抜粋）
---
const { color, class: className } = Astro.props;
// Edit Tailwind classes here to customize callout appearance
---
<div class:list={["flex items-start gap-3 my-4 ...", className]}>
  <slot />
</div>

CSS テーマ変数を変更する

色などのデザイントークンは src/styles/notro-theme.css の --notro-* CSS 変数として定義されています。 ここを編集することでテーマ全体の色を変更できます。