You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -4,170 +4,134 @@ description: "Pages are the building blocks of your documentation"
4
4
icon: "letter-text"
5
5
---
6
6
7
-
## Basics
7
+
Each page is an MDX file, which combines Markdown content with React components to let you create rich, interactive documentation.
8
8
9
-
Each page is an MDX file that should begin with `---` at the start and end. This is used to define the page's metadata, such as the title and description.
9
+
## Page metadata
10
10
11
-
For example, you can define the title for this page as follows.
11
+
Every page starts with frontmatter—YAML metadata enclosed by `---` at the beginning of your file. This metadata controls how your page appears and behaves.
12
12
13
-
```mdx
14
-
---
15
-
title: "Your title goes here"
16
-
---
17
-
```
18
-
19
-
## Descriptions
20
-
21
-
You can add a description that shows the summary of the page under the title with the `description` metadata.
13
+
<ResponseFieldname="title"type="string"required>
14
+
The title of your page that appears in navigation and browser tabs.
15
+
</ResponseField>
22
16
23
-
```mdx
24
-
---
25
-
description: "Your description goes here"
26
-
---
27
-
```
17
+
<ResponseFieldname="description"type="string">
18
+
A brief description of what this page covers. Appears under the title and improves SEO.
19
+
</ResponseField>
28
20
29
-
## Sidebar Title
21
+
<ResponseFieldname="sidebarTitle"type="string">
22
+
A short title that displays in the sidebar navigation.
23
+
</ResponseField>
30
24
31
-
If you want to show a different title in the navigation, you can set the `sidebarTitle` metadata. This is useful if your title is long and you want something shorter in the navigation links.
32
-
33
-
```mdx
34
-
---
35
-
title: "Your very long page title you want to shorten"
36
-
sidebarTitle: "Short title"
37
-
---
38
-
```
25
+
<ResponseFieldname="icon"type="string">
26
+
An icon next to your page title in the sidebar. Choose an icon from Font Awesome, Lucide, or use a custom URL. Configure your preferred icon library with the [icons library setting](/settings#param-icons).
39
27
40
-
## Icons
28
+
</ResponseField>
41
29
42
-
Add an icon next to your page's sidebar title by including the `icon` field in your page's frontmatter.
30
+
<ResponseFieldname="tag"type="string">
31
+
A tag that appears next to your page title in the sidebar.
32
+
</ResponseField>
43
33
44
-
```mdx
34
+
```yaml Example YAML frontmatter wrap
45
35
---
46
-
title: "Code Block"
47
-
icon: "code"
36
+
title: "About frontmatter"
37
+
description: "Frontmatter is the metadata that controls how your page appears and behaves"
38
+
sidebarTitle: "Frontmatter"
39
+
icon: "book"
40
+
tag: "NEW"
48
41
---
49
42
```
50
43
51
-
You can set icons from a URL, [Font Awesome](https://fontawesome.com/icons), or [Lucide](https://lucide.dev/icons). Choose your preferred icon library (Font Awesome or Lucide) with the [icon library setting](settings#param-icons).
44
+
## Page mode
52
45
53
-
For Font Awesome icons, you can optionally set the icon type. If not set, the icon type will be regular.
54
-
55
-
```mdx
56
-
---
57
-
iconType: "solid"
58
-
---
59
-
```
46
+
Control how your page displays with the `mode` setting.
60
47
61
-
##Tag
48
+
### Default
62
49
63
-
Add tags to label specific pages. Tags display in the sidebar next to page titles.
50
+
If no mode is defined, defaults to a standard layout with a sidebar navigation and table of contents.
64
51
65
-
```mdx
66
-
---
67
-
tag: "NEW"
52
+
```yaml
53
+
title: "Default page title"
68
54
---
69
55
```
70
56
71
-
## API Pages
72
-
73
-
API pages let you build interactive API playgrounds. To create an API page, you
74
-
must set an `api` or `openapi` property in the page metadata.
57
+
### Wide
75
58
76
-
Learn more about API pages by visiting the [API page guides](/api-playground/overview).
59
+
Wide mode hides the table of contents. This is useful for pages that do not have any headings or if you prefer to use the extra horizontal space.
77
60
78
-
```mdx
61
+
```yaml
79
62
---
80
-
openapi: "GET /endpoint"
63
+
title: "Wide page title"
64
+
mode: "wide"
81
65
---
82
66
```
83
67
84
-
## Page Mode
85
-
86
-
The Page Mode setting allows you to customize the appearance of your page. You can choose from
87
-
different modes to adjust the layout according to your needs. If no mode is specified, the page
88
-
will use the default settings.
68
+
### Custom
89
69
90
-
### Default
91
-
92
-
If no specific mode is given, the page will default to standard settings. This means the page
93
-
will display the default table of contents and other standard elements.
70
+
Custom mode provides a minimalist layout that removes all elements except for the top navbar. Custom mode is a blank canvas to create landing pages or any other unique layouts that you want to have minimal navigation elements for.
94
71
95
-
```mdx
72
+
```yaml
96
73
---
97
-
title: "Default page title"
74
+
title: "Custom page title"
75
+
mode: "custom"
98
76
---
99
77
```
100
78
101
-
### Wide Mode
79
+
### Center
102
80
103
-
In Wide Mode, you can hide the table of contents (ToC) on the right side of the page. This is
104
-
particularly useful if your page doesn’t have any headings or if you prefer to utilize the
105
-
extra horizontal space for more content.
81
+
Center mode removes the sidebar and table of contents, centering the content. This is useful for changelogs or other pages where you want to emphasize the content.
106
82
107
-
```mdx
83
+
```yaml
108
84
---
109
-
mode: "wide"
85
+
title: "Center page title"
86
+
mode: "center"
110
87
---
111
88
```
112
89
113
-
### Custom Mode
90
+
##API pages
114
91
115
-
Custom Mode provides a minimalist layout by removing all elements except for the top bar.
116
-
This mode offers a blank canvas, which is ideal for creating a "landing page" or any page where
117
-
you want a clean, distraction-free environment.
92
+
Create interactive API playgrounds by adding an API specification to your frontmatter, `api` or `openapi`.
118
93
119
-
```mdx
94
+
```yaml
120
95
---
121
-
mode: "custom"
96
+
openapi: "GET /endpoint"
122
97
---
123
98
```
124
99
125
-
### Center Mode
126
-
127
-
Center Mode removes the sidebar and the table of contents, and centers the page content. This mode is great for changelogs
128
-
or any page where you want to focus on the content.
129
-
130
-
```mdx
131
-
---
132
-
mode: "center"
133
-
---
134
-
```
100
+
Learn more about building [API documentation](/api-playground/overview).
135
101
136
-
## External Links
102
+
## External links
137
103
138
-
If you want the sidebar to open an external URL, you can set the `url` metadata
139
-
in any page.
104
+
Link to external sites directly from your navigation with the `url` metadata.
140
105
141
-
```mdx
106
+
```yaml
142
107
---
143
-
title: "Page that goes to external link"
108
+
title: "npm Package"
144
109
url: "https://www.npmjs.com/package/mint"
145
110
---
146
111
```
147
112
148
-
## Search Engine Optimization
113
+
## Search engine optimization
149
114
150
-
You can set meta tags like the image set when shared on social media by passing
151
-
them into your page's metadata.
115
+
Most SEO meta tags are automatically generated. You can set SEO meta tags manually to improve your site's SEO, social sharing, and browser compatibility.
152
116
153
-
Note that meta tags with colons need to be wrapped in quotes.
117
+
<Note>
118
+
Meta tags with colons must be wrapped in quotes.
119
+
</Note>
154
120
155
-
```mdx
121
+
```yaml
156
122
---
157
-
"twitter:image": "/images/your-photo.jpg"
123
+
"twitter:image": "/images/social-preview.jpg"
158
124
---
159
125
```
160
126
161
-
See [SEO](/settings/seo)to learn more about SEO metadata.
127
+
See [SEO](/settings/seo)for complete SEO metadata options.
162
128
163
-
## Internal Search Optimization
129
+
## Internal search keywords
164
130
165
-
You can also enhance a specific page's discoverability in the built-in search by
166
-
providing `keywords` in your metadata. These keywords won't appear as part of the page
167
-
content or in search results, but users that search for them will be shown the page as a result.
131
+
Enhance a specific page's discoverability in the built-in search by providing `keywords` in your metadata. These keywords won't appear as part of the page content or in search results, but users that search for them will be shown the page as a result.
0 commit comments