From 2ae90a234338ea074b536e5583d81fd565d8e3f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=83=BD=E5=AE=81?= <miqilin18@gmail.com>
Date: Sat, 29 Jul 2023 18:33:23 +0800
Subject: [PATCH] feat(theme): support custom page class (#2696)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 docs/reference/frontmatter-config.md | 42 ++++++++++++++++++++--------
 src/client/theme-default/Layout.vue  |  2 +-
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/docs/reference/frontmatter-config.md b/docs/reference/frontmatter-config.md
index 4bbf65d57dd8..10297687ec30 100644
--- a/docs/reference/frontmatter-config.md
+++ b/docs/reference/frontmatter-config.md
@@ -86,7 +86,7 @@ type HeadConfig =
 
 The following frontmatter options are only applicable when using the default theme.
 
-### layout <Badge type="info" text="default theme only" />
+### layout
 
 - Type: `doc | home | page`
 - Default: `doc`
@@ -103,15 +103,15 @@ layout: doc
 ---
 ```
 
-### hero <Badge type="info" text="default theme only" /> <Badge type="info" text="Home page only" />
+### hero <Badge type="info" text="home page only" />
 
 Defines contents of home hero section when `layout` is set to `home`. More details in [Default Theme: Home Page](./default-theme-home-page).
 
-### features <Badge type="info" text="default theme only" /> <Badge type="info" text="Home page only" />
+### features <Badge type="info" text="home page only" />
 
 Defines items to display in features section when `layout` is set to `home`. More details in [Default Theme: Home Page](./default-theme-home-page).
 
-### navbar <Badge type="info" text="default theme only" />
+### navbar
 
 - Type: `boolean`
 - Default: `true`
@@ -124,7 +124,7 @@ navbar: false
 ---
 ```
 
-### sidebar <Badge type="info" text="default theme only" />
+### sidebar
 
 - Type: `boolean`
 - Default: `true`
@@ -137,7 +137,7 @@ sidebar: false
 ---
 ```
 
-### aside <Badge type="info" text="default theme only" />
+### aside
 
 - Type: `boolean | 'left'`
 - Default: `true`
@@ -154,14 +154,14 @@ aside: false
 ---
 ```
 
-### outline <Badge type="info" text="default theme only" />
+### outline
 
 - Type: `number | [number, number] | 'deep' | false`
 - Default: `2`
 
 The levels of header in the outline to display for the page. It's same as [config.themeConfig.outline](./default-theme-config#outline), and it overrides the theme config.
 
-### lastUpdated <Badge type="info" text="default theme only" />
+### lastUpdated
 
 - Type: `boolean`
 - Default: `true`
@@ -174,7 +174,7 @@ lastUpdated: false
 ---
 ```
 
-### editLink <Badge type="info" text="default theme only" />
+### editLink
 
 - Type: `boolean`
 - Default: `true`
@@ -187,15 +187,35 @@ editLink: false
 ---
 ```
 
-### footer <Badge type="info" text="default theme only" />
+### footer
 
 - Type: `boolean`
 - Default: `true`
 
-Whether to display [footer](./default-theme-footer). 
+Whether to display [footer](./default-theme-footer).
 
 ```yaml
 ---
 footer: false
 ---
 ```
+
+### pageClass
+
+- 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 */
+}
+```
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 7afba5768377..80f298b5ddba 100644
--- a/src/client/theme-default/Layout.vue
+++ b/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" />