コンテンツにスキップ
yuumaのノート

Sidebarのカスタマイズ

目的

Section titled “目的”

Starlightテーマのサイドバーに絵文字を追加できるようにカスタマイズしたい。

astro-iconifyの機能が使えるようにするのが目的。

やったこと

Section titled “やったこと”

  1. astro-iconifyをインストールする。

    Terminal window
    npm install astro-iconify

  2. オーバーライド用のSidebar.astroを作成する

    src/components/Sidebar.astro
    ---
    import SidebarPersister from './SidebarPersister.astro';
    import SidebarSublist from './SidebarSublist.astro';
    

    

    // ✅ 公開APIのみ使用（Astro.locals 経由）
    const { sidebar = [], hasSidebar = true } = Astro.locals.starlightRoute ?? {};
    ---
    

    

    {hasSidebar && sidebar?.length > 0 && (
    <SidebarPersister>
    <SidebarSublist sublist={sidebar} />
    </SidebarPersister>
    )}

  3. 設定ファイルでcomponentsのオーバーライドを追加する。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
    

    export default defineConfig({
    integrations: [
        starlight({
        // ここを追加
        components: { Sidebar: './src/components/Sidebar.astro' },
        // ← 既存の設定はそのまま
        sidebar: [
            { label: 'icon:fluent-emoji-flat:house Home Page', autogenerate: { directory: 'home' } },
            { label: 'icon:fluent-emoji-flat:microscope ラボで作った技術', autogenerate: { directory: 'techlab' } },
            { label: 'icon:fluent-emoji-flat:orange-book 日記', autogenerate: { directory: 'diary' } },
            { label: 'icon:fluent-emoji-flat:rocket Astro', autogenerate: { directory: 'astro-tech' } },
            { label: 'icon:fluent-emoji-flat:books 研究', autogenerate: { directory: 'study' } },
            { label: 'icon:fluent-emoji-flat:fire Rust', autogenerate: { directory: 'rust' } },
            { label: 'icon:fluent-emoji-flat:warning Private', autogenerate: { directory: 'private' } }
        ],
        }),
    ],
    });

これでlabelをicon:fluent-emoji-flat:house Home Pageのようにicon:アイコン名で設定すると、サイドバーに絵文字が表示されるようになる。

参考

Section titled “参考”