[default-theme] Allow custom layout used as home layout

[zhangyx1998]

Is your feature request related to a problem? Please describe.

Currently the default theme hardcodes a string comparison to determine if current page is home layout:

class = {
  'is-home': frontmatter.layout === 'home'
}

There are many occurrences in the default theme where the above expression is used to control special treatments for home pages (e.g. hide sidebar, disable local nav, expand content width in CSS).

In my case, I need to create a custom Home layout in addition to the one provided by the default theme. However, it's almost impossible to make a custom layout page behave like the home layout because of these hardcoded conditions.

Describe the solution you'd like

Accept an optional config isHomeLayout in front-matter. When left undefined, this entry should default to frontmatter.layout === 'home'.

Example:

---
layout: my-custom-layout
isHomeLayout: true
---

# My home content

Lorem ipsum dolor sit amet ....

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

It might be better to just do something like this instead of using a custom layout for home:

vitepress/docs/en/guide/custom-theme.md

Lines 112 to 127 in 35f36a9

	<script setup>
	import { useData } from 'vitepress'
	const { page, frontmatter } = useData()
	</script>
	<template>
	<h1>Custom Layout!</h1>
	<div v-if="page.isNotFound">
	Custom 404 page!
	</div>
	<div v-if="frontmatter.layout === 'home'">
	Custom home page!
	</div>
	<Content v-else />
	</template>

vitepress/docs/en/guide/custom-theme.md

Lines 133 to 148 in 35f36a9

	<script setup>
	import { useData } from 'vitepress'
	import NotFound from './NotFound.vue'
	import Home from './Home.vue'
	import Page from './Page.vue'
	const { page, frontmatter } = useData()
	</script>
	<template>
	<h1>Custom Layout!</h1>
	<NotFound v-if="page.isNotFound" />
	<Home v-if="frontmatter.layout === 'home'" />
	<Page v-else /> <!-- <Page /> renders <Content /> -->
	</template>

[zhangyx1998]

Not sure if I understood it correctly, but that looks like creating an entire custom theme.

I guess what I'm planning for is just a minimal extension to the default theme (i.e. an extra component added via enhanceApp()).

Currently I have to do it this way:

index.md

---
layout: home
portfolio: true # This selects Portfolio.vue instead of VPHome.vue
---

# My home title

Lorem ipsum dolor sit amet ....

VPContent.vue (patched)

  <template>
-   <VPHome v-else-if="frontmatter.layout === 'home'">
+   <component :is="frontmatter.portfolio ? Portfolio : VPHome" v-else-if="frontmatter.layout === 'home'">
      <template #home-hero-before><slot name="home-hero-before" /></template>
      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
      <template #home-hero-info><slot name="home-hero-info" /></template>
      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
      <template #home-hero-image><slot name="home-hero-image" /></template>
      <template #home-hero-after><slot name="home-hero-after" /></template>
      <template #home-features-before><slot name="home-features-before" /></template>
      <template #home-features-after><slot name="home-features-after" /></template>
-   </VPHome>
+   </component>
  </template>

And in order to make the patched VPContent.vue effective, I have to also hijack Layout.vue so it imports my patched version instead of the one shipped inside vitepress/dist/client/default-theme.

[brc-dd]

Ah, you're keeping the rest of theme (navbar, footer) in home as it is, only updating the VPContent part. Hmm, we can probably support that frontmatter. Maybe create a composable that returns computed(() => frontmatter.value.layout === 'home' || !!frontmatter.value.isHomeLayout) and use it in these - https://github.com/search?q=repo:vuejs/vitepress+/%3D%3D+'home/+path:/src/&type=code

[zhangyx1998]

Actually I already have a local version of vitepress that implements this. The approach is slightly different. I'll organize it into a PR.