0
# Page Management
1

2
The Page class represents individual documents in a VuePress site, handling frontmatter processing, header extraction, permalink generation, and content transformation.
3

4
## Capabilities
5

6
### Page Class
7

8
Represents individual pages or documents in the VuePress site with comprehensive metadata and processing capabilities.
9

10
```javascript { .api }
11
/**
12
 * Individual page or document in VuePress site
13
 */
14
class Page {
15
  /**
16
   * Create a new Page instance
17
   * @param options - Page configuration options
18
   * @param context - App instance context
19
   */
20
  constructor(options: PageOptions, context: App);
21
  
22
  /** Page metadata properties */
23
  readonly title: string;
24
  readonly path: string;
25
  readonly regularPath: string;
26
  readonly relativePath: string;
27
  readonly key: string;
28
  readonly frontmatter: any;
29
  readonly headers: Header[];
30
  readonly excerpt: string;
31
}
32
```
33

34
**Usage Examples:**
35

36
```javascript
37
const { Page } = require("vuepress/lib/node/Page");
38

39
// Create page from file
40
const page = new Page({
41
  filePath: "/absolute/path/to/guide.md",
42
  relative: "guide/getting-started.md",
43
}, app);
44

45
// Create virtual page
46
const apiPage = new Page({
47
  path: "/api/",
48
  title: "API Reference",
49
  content: "# API Reference\n\nComplete API documentation...",
50
  frontmatter: {
51
    layout: "ApiLayout",
52
    sidebar: false,
53
  },
54
}, app);
55

56
// Access page properties
57
console.log(page.title); // "Getting Started"
58
console.log(page.path); // "/guide/getting-started.html"
59
console.log(page.relativePath); // "guide/getting-started.md"
60
```
61

62
### process Method
63

64
Processes page content, extracting metadata, headers, and preparing for rendering.
65

66
```javascript { .api }
67
/**
68
 * Process page content and metadata
69
 * @param options - Processing configuration
70
 * @returns Promise that resolves when processing is complete
71
 */
72
async process(options: ProcessOptions): Promise<void>;
73

74
interface ProcessOptions {
75
  /** Computed properties mixin */
76
  computed: any;
77
  /** Markdown processor instance */
78
  markdown: any;
79
  /** Page data enhancers from plugins */
80
  enhancers?: Enhancer[];
81
  /** Pre-render options */
82
  preRender?: any;
83
}
84

85
interface Enhancer {
86
  /** Enhancer function */
87
  value: (page: Page) => void | Promise<void>;
88
  /** Plugin name providing the enhancer */
89
  name: string;
90
}
91
```
92

93
**Usage Examples:**
94

95
```javascript
96
// Process page with app's markdown processor
97
await page.process({
98
  computed: new app.ClientComputedMixinConstructor(),
99
  markdown: app.markdown,
100
  enhancers: app.pluginAPI.getOption("extendPageData").items,
101
});
102

103
// After processing, page data is available
104
console.log(`Processed: ${page.title}`);
105
console.log(`Headers: ${page.headers.length}`);
106
console.log(`Frontmatter: ${JSON.stringify(page.frontmatter, null, 2)}`);
107
```
108

109
### toJson Method
110

111
Serializes page metadata for client-side consumption, excluding internal properties.
112

113
```javascript { .api }
114
/**
115
 * Serialize page metadata for client-side use
116
 * @returns Page data object (excludes properties starting with underscore)
117
 */
118
toJson(): PageData;
119

120
interface PageData {
121
  /** Page title */
122
  title: string;
123
  /** URL path */
124
  path: string;
125
  /** Unique page key */
126
  key: string;
127
  /** Page frontmatter */
128
  frontmatter: any;
129
  /** Extracted headers */
130
  headers?: Header[];
131
  /** Page excerpt HTML */
132
  excerpt?: string;
133
  /** Relative file path */
134
  relativePath?: string;
135
  /** Regular path without permalink */
136
  regularPath: string;
137
}
138
```
139

140
**Usage Examples:**
141

142
```javascript
143
await page.process({ /* options */ });
144

145
const pageData = page.toJson();
146

147
// Use in site data
148
const siteData = {
149
  pages: [pageData],
150
  // ... other site data
151
};
152

153
// Client-side page data excludes internal properties
154
console.log(pageData.title); // "Getting Started"
155
console.log(pageData._content); // undefined (internal property excluded)
156
```
157

158
### Page Properties
159

160
Computed properties providing access to page metadata and derived information.
161

162
```javascript { .api }
163
/**
164
 * Parent directory name
165
 */
166
get dirname(): string;
167

168
/**
169
 * File name without extension
170
 */
171
get filename(): string;
172

173
/**
174
 * URL-friendly slug
175
 */
176
get slug(): string;
177

178
/**
179
 * Stripped filename (date prefix removed if present)
180
 */
181
get strippedFilename(): string;
182

183
/**
184
 * Page date (from frontmatter or filename)
185
 */
186
get date(): string | null;
187
```
188

189
**Usage Examples:**
190

191
```javascript
192
// Page from file: docs/2023-01-15-my-post.md
193
const page = new Page({
194
  filePath: "/path/to/docs/2023-01-15-my-post.md",
195
  relative: "2023-01-15-my-post.md",
196
}, app);
197

198
await page.process({ /* options */ });
199

200
console.log(page.dirname); // "docs"
201
console.log(page.filename); // "2023-01-15-my-post"
202
console.log(page.slug); // "my-post"
203
console.log(page.strippedFilename); // "my-post"
204
console.log(page.date); // "2023-01-15"
205
```
206

207
## Page Configuration
208

209
### PageOptions
210

211
```javascript { .api }
212
interface PageOptions {
213
  /** URL path for the page */
214
  path?: string;
215
  /** Page metadata */
216
  meta?: any;
217
  /** Page title */
218
  title?: string;
219
  /** Markdown or Vue content */
220
  content?: string;
221
  /** Absolute file path */
222
  filePath?: string;
223
  /** Relative path from source directory */
224
  relative?: string;
225
  /** Permalink URL */
226
  permalink?: string;
227
  /** Frontmatter data */
228
  frontmatter?: any;
229
  /** Permalink pattern */
230
  permalinkPattern?: string;
231
  /** Header levels to extract (default: ['h2', 'h3']) */
232
  extractHeaders?: string[];
233
}
234
```
235

236
### Header Interface
237

238
```javascript { .api }
239
interface Header {
240
  /** Header text content */
241
  title: string;
242
  /** URL anchor */
243
  slug: string;
244
  /** Header level (1-6) */
245
  level: number;
246
  /** Child headers */
247
  children?: Header[];
248
}
249
```
250

251
**Usage Examples:**
252

253
```javascript
254
// Page with custom header extraction
255
const page = new Page({
256
  filePath: "/path/to/doc.md",
257
  extractHeaders: ["h1", "h2", "h3", "h4"], // Include h1 and h4
258
}, app);
259

260
await page.process({ /* options */ });
261

262
// Access extracted headers
263
page.headers.forEach(header => {
264
  console.log(`${header.level}: ${header.title} (#${header.slug})`);
265
  if (header.children) {
266
    header.children.forEach(child => {
267
      console.log(`  ${child.level}: ${child.title} (#${child.slug})`);
268
    });
269
  }
270
});
271
```
272

273
### Frontmatter Processing
274

275
VuePress automatically processes YAML frontmatter in markdown files and Vue component frontmatter in .vue files.
276

277
```javascript { .api }
278
// Markdown frontmatter example
279
/**
280
 * ---
281
 * title: Custom Page Title
282
 * description: Page description for SEO
283
 * layout: CustomLayout
284
 * sidebar: false
285
 * prev: /previous-page/
286
 * next: /next-page/
287
 * tags:
288
 *   - guide
289
 *   - tutorial
290
 * ---
291
 */
292

293
// Vue component frontmatter example
294
/**
295
 * <frontmatter>
296
 * title: Vue Component Page
297
 * layout: ComponentLayout
298
 * </frontmatter>
299
 */
300
```
301

302
**Usage Examples:**
303

304
```javascript
305
// Access frontmatter after processing
306
await page.process({ /* options */ });
307

308
console.log(page.frontmatter.title); // "Custom Page Title"
309
console.log(page.frontmatter.layout); // "CustomLayout"
310
console.log(page.frontmatter.sidebar); // false
311
console.log(page.frontmatter.tags); // ["guide", "tutorial"]
312

313
// Frontmatter affects page behavior
314
if (page.frontmatter.layout) {
315
  console.log(`Using layout: ${page.frontmatter.layout}`);
316
}
317
```
318

319
### Permalink Patterns
320

321
Pages can use permalink patterns to generate custom URLs.
322

323
```javascript { .api }
324
// Permalink pattern variables
325
/**
326
 * :year - Year from date (YYYY)
327
 * :month - Month from date (MM)  
328
 * :i_month - Month from date (M)
329
 * :day - Day from date (DD)
330
 * :i_day - Day from date (D)
331
 * :slug - Page slug
332
 * :regular - Regular path
333
 */
334
```
335

336
**Usage Examples:**
337

338
```javascript
339
// Blog post with date-based permalink
340
const blogPost = new Page({
341
  filePath: "/path/to/2023-01-15-my-post.md",
342
  permalinkPattern: "/blog/:year/:month/:day/:slug.html",
343
}, app);
344

345
await blogPost.process({ /* options */ });
346

347
console.log(blogPost.path); // "/blog/2023/01/15/my-post.html"
348

349
// Documentation with custom permalink
350
const docPage = new Page({
351
  filePath: "/path/to/guide/advanced.md",
352
  frontmatter: {
353
    permalink: "/docs/advanced-guide/",
354
  },
355
}, app);
356

357
await docPage.process({ /* options */ });
358

359
console.log(docPage.path); // "/docs/advanced-guide/"
360
```