VitePress

简体中文

English

简体中文

English

Appearance

Embed AI chat in your VitePress using your own content. Open-source.Try now →

团队页 ​

如果你想介绍你的团队，你可以使用 Team components 来构建团队页面。有两种使用这些组件的方法。一种是将其嵌入文档页面，另一种是创建完整的团队页面。

在页面中显示团队成员 ​

你可以在任何页面上使用从 vitepress/theme 暴露出的公共组件 <VPTeamMembers> 显示团队成员。

html
<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>

# 我们的团队，向我们出色的团队问好。

<VPTeamMembers size="small" :members="members" />
<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>

# 我们的团队，向我们出色的团队问好。

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

以上将在卡片外观元素中显示团队成员。它应该显示类似于下面的内容。

<VPTeamMembers> 组件有 2 种不同的尺寸，small 和 medium。虽然它取决于为你的偏好，但通常尺寸在文档页面中使用时 small 应该更适合。此外，你可以为每个成员添加更多属性，例如添加“描述”或“赞助”按钮。在 <VPTeamMembers>中了解更多信息。

在文档页面中嵌入团队成员对于小型团队来说非常有用，某种情况下，完整的贡献团队可能太大了，可以引入部分成员作为文档上下文的参考。

如果你有大量成员，或者只是想有更多空间来展示团队成员，请考虑创建一个完整的团队页面。

创建一个完整的团队页面 ​

除了将团队成员添加到 doc 页面，你还可以创建一个完整的团队页面，类似于创建自定义默认主题：主页的方式。

要创建团队页面，首先，创建一个新的 md 文件。文件名无所谓，这里我们就叫它 team.md 吧。在这个文件中，在 frontmatter 设置 layout: page，然后你可以使用 TeamPage 组件来组成你的页面结构。

html
---
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>
---
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> 和在 doc 页面中使用时一样。它将显示成员列表。

添加分段以划分团队成员 ​

你可以将“分段”添加到团队页面。例如，你可能有不同类型的团队成员，例如核心团队成员和社区合作伙伴。你可以将这些成员分成几个部分，以更好地解释每组的角色。

为此，将 <VPTeamPageSection> 组件添加到我们之前创建的 team.md 文件中。

html
---
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>
---
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> 组件可以有类似于 VPTeamPageTitle 组件的 #title 和 #lead 插槽，还有用于显示团队成员的 #members 插槽。

请记住将 <VPTeamMembers> 组件放入 #members 插槽中。

<VPTeamMembers> ​

<VPTeamMembers> 组件显示给定的成员列表。

html
<VPTeamMembers
	size="medium"
	:members="[
    { avatar: '...', name: '...' },
    { avatar: '...', name: '...' },
    ...
  ]" />
<VPTeamMembers
	size="medium"
	:members="[
    { avatar: '...', name: '...' },
    { avatar: '...', name: '...' },
    ...
  ]" />
ts
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/reference/default-theme-config.html#sociallinks
	links?: SocialLink[]

	// URL for the sponsor page for the member.
	sponsor?: string
}
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/reference/default-theme-config.html#sociallinks
	links?: SocialLink[]

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

<VPTeamPage> ​

创建完整团队页面时的根组件。它只接受一个插槽。它将设置所有传入的团队相关组件的样式。

The root component when creating a full team page. It only accepts a single slot. It will style all passed in team related components.

<VPTeamPageTitle> ​

添加页面的标题。最好在一开始就在 <VPTeamPage> 下使用。它接受 #title 和 #lead 插槽。

html
<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>
<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> 中添加任意数量的分段。

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

未出现在侧边栏的完整团队页面

Released under the MIT License.

Copyright © 2019-present Evan You