チームページ

チームを紹介したい場合は、チームコンポーネントを使用してチームページを作成できます。これらのコンポーネントには2つの使用方法があります。1つはドキュメントページに埋め込む方法、もう1つは完全なチームページを作成する方法です。

ページにチームメンバーを表示

任意のページにチームメンバーのリストを表示するには、`vitepress/theme`から公開されている``コンポーネントを使用できます。

<script setup>
import { VPTeamMembers } from 'vitepress/theme'

const members = [
  {
    avatar: 'https://www.github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  ...
]
</script>

# Our Team

Say hello to our awesome team.

<VPTeamMembers size="small" :members="members" />

上記は、カードのような要素でチームメンバーを表示します。下記のような表示になります。

Evan You

作成者

Kia King Ishii

開発者

``コンポーネントには、`small`と`medium`の2つのサイズがあります。好みによるところですが、通常はドキュメントページで使用する場合、`small`サイズの方が適しています。「説明」や「スポンサー」ボタンなどのプロパティを各メンバーに追加することもできます。``で詳細をご覧ください。

ドキュメントページにチームメンバーを埋め込むことは、チームの規模が小さく、専用のチームページを用意するのが大きすぎる場合、またはドキュメントのコンテキストへの参照として一部のメンバーを紹介する場合に適しています。

メンバーの数が多く、チームメンバーを表示するスペースをもっと確保したい場合は、完全なチームページの作成を検討してください。

完全なチームページを作成

ドキュメントページにチームメンバーを追加する代わりに、カスタムホームページを作成する方法と同様に、完全なチームページを作成することもできます。

チームページを作成するには、まず新しいmdファイルを作成します。ファイル名は問いませんが、ここでは`team.md`と呼びましょう。このファイルで、frontmatterオプション`layout: page`を設定し、`TeamPage`コンポーネントを使用してページ構造を作成できます。

---
layout: page
---
<script setup>
import {
  VPTeamPage,
  VPTeamPageTitle,
  VPTeamMembers
} from 'vitepress/theme'

const members = [
  {
    avatar: 'https://www.github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  ...
]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>
      Our Team
    </template>
    <template #lead>
      The development of VitePress is guided by an international
      team, some of whom have chosen to be featured below.
    </template>
  </VPTeamPageTitle>
  <VPTeamMembers
    :members="members"
  />
</VPTeamPage>

完全なチームページを作成する際は、すべてのコンポーネントを``コンポーネントでラップすることを忘れないでください。このコンポーネントにより、ネストされたすべてのチーム関連コンポーネントに、適切なレイアウト構造（スペースなど）が適用されます。

``コンポーネントはページのタイトルセクションを追加します。タイトルは`

`見出しです。`#title`と`#lead`スロットを使用して、チームについて説明します。

``は、ドキュメントページで使用する場合と同じように機能します。メンバーのリストを表示します。

チームメンバーを分割するためのセクションを追加

チームページに「セクション」を追加できます。たとえば、コアチームメンバーとコミュニティパートナーなど、異なるタイプのチームメンバーがいる場合があります。これらのメンバーをセクションに分割することで、各グループの役割をより明確に説明できます。

そのためには、前に作成した`team.md`ファイルに``コンポーネントを追加します。

---
layout: page
---
<script setup>
import {
  VPTeamPage,
  VPTeamPageTitle,
  VPTeamMembers,
  VPTeamPageSection
} from 'vitepress/theme'

const coreMembers = [...]
const partners = [...]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>Our Team</template>
    <template #lead>...</template>
  </VPTeamPageTitle>
  <VPTeamMembers size="medium" :members="coreMembers" />
  <VPTeamPageSection>
    <template #title>Partners</template>
    <template #lead>...</template>
    <template #members>
      <VPTeamMembers size="small" :members="partners" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>

``コンポーネントには、``コンポーネントと同様に`#title`と`#lead`スロット、そしてチームメンバーを表示するための`#members`スロットがあります。

`#members`スロット内に``コンポーネントを配置することを忘れないでください。

``

``コンポーネントは、指定されたメンバーのリストを表示します。

<VPTeamMembers
  size="medium"
  :members="[
    { avatar: '...', name: '...' },
    { avatar: '...', name: '...' },
    ...
  ]"
/>

interface Props {
  // Size of each members. Defaults to `medium`.
  size?: 'small' | 'medium'

  // List of members to display.
  members: TeamMember[]
}

interface TeamMember {
  // Avatar image for the member.
  avatar: string

  // Name of the member.
  name: string

  // Title to be shown below member's name.
  // e.g. Developer, Software Engineer, etc.
  title?: string

  // Organization that the member belongs.
  org?: string

  // URL for the organization.
  orgLink?: string

  // Description for the member.
  desc?: string

  // Social links. e.g. GitHub, Twitter, etc. You may pass in
  // the Social Links object here.
  // See: https://vitepress.dokyumento.jp/reference/default-theme-config.html#sociallinks
  links?: SocialLink[]

  // URL for the sponsor page for the member.
  sponsor?: string

  // Text for the sponsor link. Defaults to 'Sponsor'.
  actionText?: string
}

``

完全なチームページを作成する場合のルートコンポーネントです。単一のスロットのみを受け付けます。渡されたすべてのチーム関連コンポーネントのスタイルを設定します。

``

ページの「タイトル」セクションを追加します。``の下で最初に使用するのが最適です。`#title`と`#lead`スロットを受け付けます。

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>
      Our Team
    </template>
    <template #lead>
      The development of VitePress is guided by an international
      team, some of whom have chosen to be featured below.
    </template>
  </VPTeamPageTitle>
</VPTeamPage>

``

チームページ内に「セクション」を作成します。`#title`、`#lead`、`#members`スロットを受け付けます。``内に必要な数のセクションを追加できます。

<VPTeamPage>
  ...
  <VPTeamPageSection>
    <template #title>Partners</template>
    <template #lead>Lorem ipsum...</template>
    <template #members>
      <VPTeamMembers :members="data" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>