團隊頁面

如果您想介紹您的團隊，您可以使用團隊元件來建構團隊頁面。使用這些元件有兩種方式。一種是將其嵌入文件頁面，另一種是建立完整的團隊頁面。

在頁面中顯示團隊成員

您可以使用從 vitepress/theme 公開的 <VPTeamMembers> 元件，在任何頁面上顯示團隊成員清單。

<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" />

以上會在類似卡片的元素中顯示團隊成員。它應該會顯示類似以下的內容。

尤雨溪

建立者

石井嘉浩

開發者

<VPTeamMembers> 元件有 2 種不同的尺寸，small 和 medium。雖然這取決於您的喜好，但通常在文件頁面中使用時，small 尺寸會更合適。此外，您還可以為每個成員新增更多屬性，例如新增「說明」或「贊助商」按鈕。在 <VPTeamMembers> 中深入了解它。

將團隊成員嵌入文件頁面對於小型團隊來說很好，因為擁有專用的完整團隊頁面可能太多了，或者作為文件內容參考來介紹部分成員。

如果您有大量的成員，或者只是想有更多空間來顯示團隊成員，請考慮 建立一個完整的團隊頁面。

建立一個完整的團隊頁面

除了將團隊成員新增到文件頁面之外，您還可以建立一個完整的團隊頁面，類似於您可以建立自訂 首頁 的方式。

要建立團隊頁面，首先建立一個新的 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>

建立完整的團隊頁面時，記得使用 <VPTeamPage> 元件包覆所有元件。此元件會確保所有巢狀團隊相關元件取得適當的版面結構，例如間距。

<VPPageTitle> 元件會新增頁面標題區段。標題為 <h1> 標題。使用 #title 和 #lead 插槽來記錄你的團隊。

<VPMembers> 的運作方式與在文件頁面中使用時相同。它會顯示成員清單。

新增區段來區分團隊成員

你可以為團隊頁面新增「區段」。例如，你可能有不同類型的團隊成員，例如核心團隊成員和社群夥伴。你可以將這些成員分為區段，以更好地說明每個群組的角色。

為此，將 <VPTeamPageSection> 元件新增到我們先前建立的 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>

<VPTeamPageSection> 元件可以有 #title 和 #lead 插槽，類似於 VPTeamPageTitle 元件，還有 #members 插槽用於顯示團隊成員。

記得在 #members 插槽中放入 <VPTeamMembers> 元件。

<VPTeamMembers>

<VPTeamMembers> 元件會顯示給定的成員清單。

<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.dev.org.tw/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
}

<VPTeamPage>

建立完整團隊頁面時的根元件。它只接受單一插槽。它會設定所有傳入的團隊相關元件的樣式。

<VPTeamPageTitle>

新增頁面的「標題」區段。最好在 <VPTeamPage> 下方最開始的地方使用。它接受 #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>

<VPTeamPageSection>

在團隊頁面中建立「區段」。它接受 #title、#lead 和 #members 插槽。你可以在 <VPTeamPage> 內新增任意數量的區段。

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