Home

デフォルトの VitePress テーマでは、ホームページのスタイルはHero Sectionを構成することで実現されます。多くの開発者はより個人的なホームページを好み、デフォルトのテーマでは要件を満たすには不十分です。VitePress 自体はテーマをカスタマイズする方法を提供していますが、ユーザーが簡単に始めることができるように、直接変更できるホームコンポーネントがホームページとして登録され、誰もが便利に使用できるようになっています。

使用法

スキャフォールディングを使用してプロジェクトを作成する際、ファイルdocs/.vitepress/theme/home.vueが自動的に作成されます。必要に応じて直接変更できます。デフォルトのテーマのホームページに戻したい場合は、docs/index.mdファイルのFrontmatterのlayoutフィールドをhomeに変更し、VitePress が提供するHero Sectionに従って構成する必要があります。

後でHomeを補完するには、まず依存関係をインストールするためにnpm install @huyikai/vitepress-helper -Dを実行し、次にdocs/.vitepress/theme/home.vueとdocs/.vitepress/theme/index.jsを作成する必要があります。また、ドキュメントルート（docs/index.md）のindex.mdファイルのFrontmatterのlayoutフィールドをcustomに変更する必要があります。これにより、実行時にホームページに表示されるコンテンツはhome.vueのカスタムコンテンツになります。

TIP

VitePress-Helper でデフォルトで追加されたhome.vueファイルには、VitePress によってエクスポートされた追加の<VPDoc />コンポーネントが追加されています。これにより、docs/index.mdファイルのコンテンツがホームページの下に追加でレンダリングされます。必要に応じてこの部分を保持または破棄することができます。

docs/.vitepress/theme/home.vue

<script setup>
...
</script>
<template></template>

docs/.vitepress/theme/index.js

...
import Home from './home.vue';

const theme = {
  Layout,
  enhanceApp: ({ app }: any) => {
    ...
    app.component('Home', Home);
  }
};
export default theme;

docs/index.md

---
layout: custom
aside: false
outline: false
lastUpdated: false
---