diff --git a/docs/es/reference/default-theme-team-page.md b/docs/es/reference/default-theme-team-page.md new file mode 100644 index 00000000..05eca387 --- /dev/null +++ b/docs/es/reference/default-theme-team-page.md @@ -0,0 +1,258 @@ + + +# Página de Equipo {#team-page} + +Si desea presentar a su equipo, puede utilizar componentes del equipo para crear la página del equipo. Hay dos formas de utilizar estos componentes. Una es incrustarlo en la página del documento y otra es crear una página de equipo completa. + +## Mostrar miembros del equipo en una página {#show-team-members-in-a-page} + +Puedes usar el componente `` expuesto en `vitepress/theme` para mostrar una lista de los miembros del equipo en cualquier página. + +```html + + +# Nuestro equipo + +Saluda a nuestro increible equipo. + + +``` + +El código anterior mostrará a un miembro del equipo en un elemento similar a una tarjeta. Debería mostrar algo similar a lo siguiente. + + + +El componente `` viene en dos tamaños diferentes, pequeño `small` y médio `medium`. Si bien es una cuestión de preferencia, generalmente el tamaño `small` debería encajar mejor cuando se use en la página del documento. Además, puede agregar más propiedades a cada miembro, como agregar el botón "descripción" o "patrocinador". Obtenga más información sobre en [``](#vpteammembers). + +Incrustar miembros del equipo en la página del documento es bueno para equipos pequeños donde tener una página de equipo dedicada completa puede ser demasiado, o introducir miembros parciales como referencia al contexto de la documentación. + +Si tienes una gran cantidad de miembros o simplemente deseas más espacio para exhibir a los miembros del equipo, considere [crear una página de equipo completa.](#create-a-full-team-page) + +## Creando una página de equipo completa {#create-a-full-team-page} + +En lugar de agregar miembros del equipo a la página del documento, también puede crear una página de equipo completa, del mismo modo que puede crear una [Página Inicial](./default-theme-home-page) personalizada. + +Para crear una página de equipo, primero cree un nuevo md. El nombre del archivo no importa, pero aquí lo llamaremos `team.md`. En este archivo, configure la opción `layout: page` desde frontmatter, y luego puedes componer la estructura de tu página usando componentes `TeamPage`. + +```html +--- +layout: page +--- + + + + + + + + + +``` + +Al crear una página de equipo completa, recuerde agrupar todos los componentes con el componente ``. Este componente garantizará que todos los componentes anidados relacionados con el equipo obtengan la estructura de diseño adecuada, como los espacios. + +El componente `` adiciona la sección de título de la página. El título es `

`. Use los _slots_ `#title` y `#lead` para poder documentar sobre su equipo. + +`` funciona igual que cuando se usa en una página de documento. Mostrará la lista de miembros. + +### Agregar secciones para dividir a los miembros del equipo {#add-sections-to-divide-team-members} + +Puede agregar "secciones" a la página de su equipo. Por ejemplo, puede tener diferentes tipos de miembros del equipo, como miembros del equipo central y socios de la comunidad. Puede dividir a estos miembros en secciones para explicar mejor las funciones de cada grupo. + +Para poder hacerlo, agregue al componente `` al archivo `team.md` que creamos anteriormente. + +```html +--- +layout: page +--- + + + + + + + + + + + + + + +``` + +El componente `` Puede tener los _slots_ `#title` y `#lead` similares al componente `VPTeamPageTitle`, y también al _slot_ `#members` para mostrar a los miembros del equipo. + +Recuerde colocar el componente `` dentro del _slot_ `#members`. + +## `` + +El componente `` muestra una determinada lista de miembros. + +```html + +``` + +```ts +interface Props { + // Tamaño de cada miembro. El valor predeterminado es `medium`. + size?: 'small' | 'medium' + + // Lista de miembros que se mostrará. + members: TeamMember[] +} + +interface TeamMember { + // Imagen de avatar de miembro. + avatar: string + + // Nombre del miembro. + name: string + + // Título a ser mostrado a bajo del nombre del miembro. + // Ej.: Desarrollador, Ingeniero de Software, etc. + title?: string + + // Organización a la que pertenece al miembro. + org?: string + + // URL de la organización. + orgLink?: string + + // Descripción del miembro. + desc?: string + + // Links sociales, por ejemplo, GitHub, Twitter, etc. + // Puedes pasar un objeto de Links Sociales aquí. + // Vea: https://vitepress.dev/reference/default-theme-config.html#sociallinks + links?: SocialLink[] + + // URL de la página del patrocinador del miembro. + sponsor?: string + + // Texto para enlace del patrocinador. El valor predeterminado es 'Sponsor'. + actionText?: string +} +``` + +## `` + +El componente raíz al crear una página de equipo completa. Sólo acepta una _slot_. Aplicará estilo a todos los componentes anteriores relacionados con el equipo. + +## `` + +Agrega la sección "título" a la página. Es mejor usarlo desde el principio debajo ``. Acepta los _slots_ `#title` y `#lead`. + +```html + + + + + + +``` + +## `` + +Crea una 'sección' en la página del equipo. Aceptar los _slots_ `#title`, `#lead` y `#members`. Puedes agregar tantas secciones como quieras dentro ``. + +```html + + ... + + + + + + +```