Skip to content

Commit 544cd81

Browse files
zhangyx1998brc-dduserquin
authored
feat(theme)!: add isHome frontmatter option (#4673)
BREAKING CHANGE: `useLocalNav` and `useSidebar` are removed in favor of `useLayout`. To migrate, just do find and replace. Sidebar controls are no longer exported, but I didn't find any usage on GitHub. If there is demand, we can export respective composables later. `DefaultTheme.DocSidebar` and `DefaultTheme.DocLocalNav` types are also removed. --------- Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Co-authored-by: userquin <userquin@gmail.com>
1 parent ea5cbfc commit 544cd81

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+306
-554
lines changed

Diff for: ‎__tests__/e2e/.vitepress/theme/components/ApiPreference.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function removeSpaces(str: string) {
3030
<input
3131
type="radio"
3232
:id="option.key"
33-
:name="name"
33+
:name
3434
:value="option.value"
3535
v-model="selected"
3636
/>

Diff for: ‎docs/en/reference/default-theme-config.md

+35
Original file line numberDiff line numberDiff line change
@@ -457,3 +457,38 @@ Can be used to customize the label of the skip to content link. This link is sho
457457
- Default: `false`
458458

459459
Whether to show an external link icon next to external links in markdown.
460+
461+
## `useLayout` <Badge type="info" text="composable" />
462+
463+
Returns layout-related data. The returned object has the following type:
464+
465+
```ts
466+
interface {
467+
isHome: ComputedRef<boolean>
468+
469+
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
470+
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
471+
hasSidebar: ComputedRef<boolean>
472+
isSidebarEnabled: ComputedRef<boolean>
473+
474+
hasAside: ComputedRef<boolean>
475+
leftAside: ComputedRef<boolean>
476+
477+
headers: ShallowRef<DefaultTheme.OutlineItem[]>
478+
hasLocalNav: ComputedRef<boolean>
479+
}
480+
```
481+
482+
**Example:**
483+
484+
```vue
485+
<script setup>
486+
import { useLayout } from 'vitepress/theme'
487+
488+
const { hasSidebar } = useLayout()
489+
</script>
490+
491+
<template>
492+
<div v-if="hasSidebar">Only show when sidebar exists</div>
493+
</template>
494+
```

Diff for: ‎docs/en/reference/default-theme-sidebar.md

-33
Original file line numberDiff line numberDiff line change
@@ -180,36 +180,3 @@ export default {
180180
}
181181
}
182182
```
183-
184-
## `useSidebar` <Badge type="info" text="composable" />
185-
186-
Returns sidebar-related data. The returned object has the following type:
187-
188-
```ts
189-
export interface DocSidebar {
190-
isOpen: Ref<boolean>
191-
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
192-
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
193-
hasSidebar: ComputedRef<boolean>
194-
hasAside: ComputedRef<boolean>
195-
leftAside: ComputedRef<boolean>
196-
isSidebarEnabled: ComputedRef<boolean>
197-
open: () => void
198-
close: () => void
199-
toggle: () => void
200-
}
201-
```
202-
203-
**Example:**
204-
205-
```vue
206-
<script setup>
207-
import { useSidebar } from 'vitepress/theme'
208-
209-
const { hasSidebar } = useSidebar()
210-
</script>
211-
212-
<template>
213-
<div v-if="hasSidebar">Only show when sidebar exists</div>
214-
</template>
215-
```

Diff for: ‎docs/en/reference/default-theme-team-page.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const members = [
5353

5454
Say hello to our awesome team.
5555

56-
<VPTeamMembers size="small" :members="members" />
56+
<VPTeamMembers size="small" :members />
5757
```
5858

5959
The above will display a team member in card looking element. It should display something similar to below.
6060

61-
<VPTeamMembers size="small" :members="members" />
61+
<VPTeamMembers size="small" :members />
6262

6363
`<VPTeamMembers>` component comes in 2 different sizes, `small` and `medium`. While it boils down to your preference, usually `small` size should fit better when used in doc page. Also, you may add more properties to each member such as adding "description" or "sponsor" button. Learn more about it in [`<VPTeamMembers>`](#vpteammembers).
6464

@@ -107,9 +107,7 @@ const members = [
107107
team, some of whom have chosen to be featured below.
108108
</template>
109109
</VPTeamPageTitle>
110-
<VPTeamMembers
111-
:members="members"
112-
/>
110+
<VPTeamMembers :members />
113111
</VPTeamPage>
114112
```
115113

Diff for: ‎docs/en/reference/frontmatter-config.md

+13
Original file line numberDiff line numberDiff line change
@@ -225,3 +225,16 @@ Then you can customize styles of this specific page in `.vitepress/theme/custom.
225225
/* page-specific styles */
226226
}
227227
```
228+
229+
### isHome
230+
231+
- Type: `boolean`
232+
233+
The default theme relies on checks like `frontmatter.layout === 'home'` to determine if the current page is the home page.\
234+
This is useful when you want to force show the home page elements in a custom layout.
235+
236+
```yaml
237+
---
238+
isHome: true
239+
---
240+
```

Diff for: ‎docs/es/reference/default-theme-sidebar.md

-33
Original file line numberDiff line numberDiff line change
@@ -181,36 +181,3 @@ export default {
181181
}
182182
}
183183
```
184-
185-
## `useSidebar` <Badge type="info" text="composable" />
186-
187-
Devuelve datos relacionados con la barra lateral. El objeto devuelto tiene el siguiente tipo:
188-
189-
```ts
190-
export interface DocSidebar {
191-
isOpen: Ref<boolean>
192-
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
193-
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
194-
hasSidebar: ComputedRef<boolean>
195-
hasAside: ComputedRef<boolean>
196-
leftAside: ComputedRef<boolean>
197-
isSidebarEnabled: ComputedRef<boolean>
198-
open: () => void
199-
close: () => void
200-
toggle: () => void
201-
}
202-
```
203-
204-
**Exemplo:**
205-
206-
```vue
207-
<script setup>
208-
import { useSidebar } from 'vitepress/theme'
209-
210-
const { hasSidebar } = useSidebar()
211-
</script>
212-
213-
<template>
214-
<div v-if="hasSidebar">Sólo visible cuando existe la barra lateral</div>
215-
</template>
216-
```

Diff for: ‎docs/es/reference/default-theme-team-page.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const members = [
5353

5454
Saluda a nuestro increible equipo.
5555

56-
<VPTeamMembers size="small" :members="members" />
56+
<VPTeamMembers size="small" :members />
5757
```
5858

5959
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.
6060

61-
<VPTeamMembers size="small" :members="members" />
61+
<VPTeamMembers size="small" :members />
6262

6363
El componente `<VPTeamMembers>` 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>`](#vpteammembers).
6464

@@ -107,9 +107,7 @@ const members = [
107107
Algunos de los miembros han elegido aparecer a continuación.
108108
</template>
109109
</VPTeamPageTitle>
110-
<VPTeamMembers
111-
:members="members"
112-
/>
110+
<VPTeamMembers :members />
113111
</VPTeamPage>
114112
```
115113

Diff for: ‎docs/fa/reference/default-theme-sidebar.md

-35
Original file line numberDiff line numberDiff line change
@@ -178,38 +178,3 @@ export default {
178178
}
179179
}
180180
```
181-
182-
## `useSidebar` <Badge type="info" text="composable" /> {#usesidebar}
183-
184-
داده‌های مربوط به نوار کناری را برمی‌گرداند. شیء برگردانده شده دارای نوع‌های زیر است:
185-
186-
```ts
187-
export interface DocSidebar {
188-
isOpen: Ref<boolean>
189-
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
190-
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
191-
hasSidebar: ComputedRef<boolean>
192-
hasAside: ComputedRef<boolean>
193-
leftAside: ComputedRef<boolean>
194-
isSidebarEnabled: ComputedRef<boolean>
195-
open: () => void
196-
close: () => void
197-
toggle: () => void
198-
}
199-
```
200-
201-
**مثال:**
202-
203-
```vue
204-
<script setup>
205-
import { useSidebar } from 'vitepress/theme'
206-
207-
const { hasSidebar } = useSidebar()
208-
</script>
209-
210-
<template>
211-
<div v-if="hasSidebar">فقط ن
212-
213-
مایش داده شود زمانی که نوار کناری وجود دارد</div>
214-
</template>
215-
```

Diff for: ‎docs/fa/reference/default-theme-team-page.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const members = [
5353

5454
با سلام به تیم فوق‌العاده‌ی ما خوش آمدید.
5555

56-
<VPTeamMembers size="small" :members="members" />
56+
<VPTeamMembers size="small" :members />
5757
```
5858

5959
بالا به صورت عنصری با شکل کارتی اعضای تیم را نمایش می‌دهد. باید به شکل زیر نمایش داده شود.
6060

61-
<VPTeamMembers size="small" :members="members" />
61+
<VPTeamMembers size="small" :members />
6262

6363
کامپوننت `<VPTeamMembers>` دارای دو اندازه مختلف، `small` و `medium` است. معمولاً اندازه `small` برای استفاده در صفحات مستندات مناسب‌تر است. همچنین می‌توانید ویژگی‌های بیشتری برای هر عضو اضافه کنید مانند "توضیحات" یا "دکمه حامی". جهت کسب اطلاعات بیشتر به [`<VPTeamMembers>`](#vpteammembers) مراجعه کنید.
6464

@@ -106,9 +106,7 @@ const members = [
106106
توسعه ویت‌پرس توسط تیمی بین‌المللی راهنمایی می‌شود، برخی از اعضا که انتخاب کرده‌اند تا در زیر نمایش داده شوند.
107107
</template>
108108
</VPTeamPageTitle>
109-
<VPTeamMembers
110-
:members="members"
111-
/>
109+
<VPTeamMembers :members />
112110
</VPTeamPage>
113111
```
114112

Diff for: ‎docs/ko/reference/default-theme-sidebar.md

-33
Original file line numberDiff line numberDiff line change
@@ -180,36 +180,3 @@ export default {
180180
}
181181
}
182182
```
183-
184-
## `useSidebar` <Badge type="info" text="composable" />
185-
186-
사이드바 관련 데이터를 반환합니다. 반환된 객체는 다음과 같은 타입을 가집니다:
187-
188-
```ts
189-
export interface DocSidebar {
190-
isOpen: Ref<boolean>
191-
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
192-
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
193-
hasSidebar: ComputedRef<boolean>
194-
hasAside: ComputedRef<boolean>
195-
leftAside: ComputedRef<boolean>
196-
isSidebarEnabled: ComputedRef<boolean>
197-
open: () => void
198-
close: () => void
199-
toggle: () => void
200-
}
201-
```
202-
203-
**예제:**
204-
205-
```vue
206-
<script setup>
207-
import { useSidebar } from 'vitepress/theme'
208-
209-
const { hasSidebar } = useSidebar()
210-
</script>
211-
212-
<template>
213-
<div v-if="hasSidebar">사이드바가 있을 때만 보여줍니다</div>
214-
</template>
215-
```

Diff for: ‎docs/ko/reference/default-theme-team-page.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const members = [
5353

5454
Say hello to our awesome team.
5555

56-
<VPTeamMembers size="small" :members="members" />
56+
<VPTeamMembers size="small" :members />
5757
```
5858

5959
위 코드는 카드 형태의 엘리먼트로 팀 구성원을 표시합니다. 아래와 비슷한 형태로 표시됩니다.
6060

61-
<VPTeamMembers size="small" :members="members" />
61+
<VPTeamMembers size="small" :members />
6262

6363
`<VPTeamMembers>` 컴포넌트는 `small`과 `medium` 두 가지 크기로 제공됩니다. 개인의 선호도에 따라 선택할 수 있지만, 일반적으로 `small` 사이즈가 문서 페이지에 더 적합합니다. 또한, 각 구성원에 "설명"이나 "후원" 버튼과 같은 프로퍼티를 추가할 수도 있습니다. 자세한 내용은 [`<VPTeamMembers>`](#vpteammembers)에서 확인할 수 있습니다.
6464

@@ -107,9 +107,7 @@ const members = [
107107
team, some of whom have chosen to be featured below.
108108
</template>
109109
</VPTeamPageTitle>
110-
<VPTeamMembers
111-
:members="members"
112-
/>
110+
<VPTeamMembers :members />
113111
</VPTeamPage>
114112
```
115113

Diff for: ‎docs/pt/reference/default-theme-sidebar.md

-33
Original file line numberDiff line numberDiff line change
@@ -180,36 +180,3 @@ export default {
180180
}
181181
}
182182
```
183-
184-
## `useSidebar` <Badge type="info" text="composable" />
185-
186-
Retorna dados relacionados à barra lateral. O objeto retornado tem o seguinte tipo:
187-
188-
```ts
189-
export interface DocSidebar {
190-
isOpen: Ref<boolean>
191-
sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
192-
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
193-
hasSidebar: ComputedRef<boolean>
194-
hasAside: ComputedRef<boolean>
195-
leftAside: ComputedRef<boolean>
196-
isSidebarEnabled: ComputedRef<boolean>
197-
open: () => void
198-
close: () => void
199-
toggle: () => void
200-
}
201-
```
202-
203-
**Exemplo:**
204-
205-
```vue
206-
<script setup>
207-
import { useSidebar } from 'vitepress/theme'
208-
209-
const { hasSidebar } = useSidebar()
210-
</script>
211-
212-
<template>
213-
<div v-if="hasSidebar">Visível apenas quando a barra lateral existe</div>
214-
</template>
215-
```

Diff for: ‎docs/pt/reference/default-theme-team-page.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const members = [
5353

5454
Diga olá à nossa equipe incrível.
5555

56-
<VPTeamMembers size="small" :members="members" />
56+
<VPTeamMembers size="small" :members />
5757
```
5858

5959
O código acima exibirá um membro da equipe em um elemento tipo cartão. Ele deve exibir algo semelhante ao abaixo.
6060

61-
<VPTeamMembers size="small" :members="members" />
61+
<VPTeamMembers size="small" :members />
6262

6363
O componente `<VPTeamMembers>` vem em 2 tamanhos diferentes, pequeno `small` e médio `medium`. Enquanto é uma questão de preferência, geralmente o tamanho `small` deve encaixar melhor quando usado na página de documento. Além disso, você pode adicionar mais propriedades a cada membro, como adicionar o botão "descrição" ou "patrocinador". Saiba mais sobre em [`<VPTeamMembers>`](#vpteammembers).
6464

@@ -107,9 +107,7 @@ const members = [
107107
alguns dos membros escolheram ser apresentados abaixo.
108108
</template>
109109
</VPTeamPageTitle>
110-
<VPTeamMembers
111-
:members="members"
112-
/>
110+
<VPTeamMembers :members />
113111
</VPTeamPage>
114112
```
115113

0 commit comments

Comments
 (0)