feat(theme): support custom page class

docs/reference/frontmatter-config.md

@@ -199,3 +199,23 @@ Whether to display [footer](./default-theme-footer).
 footer: false
 ---
 ```
+
+### pageClass <Badge type="info" text="default theme only" />
+
+- Type: `string`
+
+Add extra class name to a specific page.
+
+```yaml
+---
+pageClass: custom-page-class
+---
+```
+
+Then you can customize styles of this specific page in `.vitepress/theme/custom.css` file:
+
+```css
+.custom-page-class {
+  /* page-specific styles */
+}
+```

src/client/theme-default/Layout.vue

@@ -34,7 +34,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
 </script>
 
 <template>
-  <div v-if="frontmatter.layout !== false" class="Layout">
+  <div v-if="frontmatter.layout !== false" class="Layout" :class="frontmatter.pageClass" >
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />