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,135 @@ 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
-
```
13
+
<ResponseFieldname="title"type="string"required>
14
+
The title of your page that appears in navigation and browser tabs.
15
+
</ResponseField>
18
16
19
-
## Descriptions
17
+
<ResponseFieldname="description"type="string">
18
+
A brief description of what this page covers. Appears under the title and improves SEO.
19
+
</ResponseField>
20
20
21
-
You can add a description that shows the summary of the page under the title with the `description` metadata.
21
+
<ResponseFieldname="sidebarTitle"type="string">
22
+
A short title that displays in the sidebar navigation.
23
+
</ResponseField>
22
24
23
-
```mdx
24
-
---
25
-
description: "Your description goes here"
26
-
---
27
-
```
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).
28
27
29
-
## Sidebar Title
28
+
</ResponseField>
30
29
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.
30
+
<ResponseFieldname="tag"type="string">
31
+
A tag that appears next to your page title in the sidebar.
32
+
</ResponseField>
32
33
33
-
```mdx
34
+
```yaml Example YAML frontmatter wrap
34
35
---
35
-
title: "Your very long page title you want to shorten"
36
-
sidebarTitle: "Short title"
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"
37
41
---
38
42
```
39
43
40
-
## Icons
41
-
42
-
Add an icon next to your page's sidebar title by including the `icon` field in your page's frontmatter.
44
+
## Page mode
43
45
44
-
```mdx
45
-
---
46
-
title: "Code Block"
47
-
icon: "code"
48
-
---
49
-
```
46
+
Control how your page displays with the `mode` setting.
50
47
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).
48
+
### Default
52
49
53
-
For Font Awesome icons, you can optionally set the icon type. If not set, the icon type will be regular.
50
+
If no mode is defined, defaults to a standard layout with a sidebar navigation and table of contents.
54
51
55
-
```mdx
52
+
```yaml
56
53
---
57
-
iconType: "solid"
54
+
title: "Default page title"
58
55
---
59
56
```
60
57
61
-
##Tag
58
+
### Wide
62
59
63
-
Add tags to label specific pages. Tags display in the sidebar next to page titles.
60
+
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.
64
61
65
-
```mdx
66
-
---
67
-
tag: "NEW"
62
+
```yaml
68
63
---
69
-
```
70
-
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.
75
-
76
-
Learn more about API pages by visiting the [API page guides](/api-playground/overview).
77
-
78
-
```mdx
79
-
---
80
-
openapi: "GET /endpoint"
64
+
title: "Wide page title"
65
+
mode: "wide"
81
66
---
82
67
```
83
68
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.
89
-
90
-
### Default
69
+
### Custom
91
70
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.
71
+
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
72
95
-
```mdx
73
+
```yaml
96
74
---
97
-
title: "Default page title"
75
+
title: "Custom page title"
76
+
mode: "custom"
98
77
---
99
78
```
100
79
101
-
### Wide Mode
80
+
### Center
102
81
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.
82
+
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
83
107
-
```mdx
84
+
```yaml
108
85
---
109
-
mode: "wide"
86
+
title: "Center page title"
87
+
mode: "center"
110
88
---
111
89
```
112
90
113
-
### Custom Mode
91
+
##API pages
114
92
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.
93
+
Create interactive API playgrounds by adding an API specification to your frontmatter, `api` or `openapi`.
118
94
119
-
```mdx
95
+
```yaml
120
96
---
121
-
mode: "custom"
97
+
openapi: "GET /endpoint"
122
98
---
123
99
```
124
100
125
-
### Center Mode
101
+
Learn more about building [API documentation](/api-playground/overview).
126
102
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.
103
+
## External links
129
104
130
-
```mdx
131
-
---
132
-
mode: "center"
133
-
---
134
-
```
135
-
136
-
## External Links
105
+
Link to external sites directly from your navigation with the `url` metadata.
137
106
138
-
If you want the sidebar to open an external URL, you can set the `url` metadata
139
-
in any page.
140
-
141
-
```mdx
107
+
```yaml
142
108
---
143
-
title: "Page that goes to external link"
109
+
title: "npm Package"
144
110
url: "https://www.npmjs.com/package/mint"
145
111
---
146
112
```
147
113
148
-
## Search Engine Optimization
114
+
## Search engine optimization
149
115
150
-
You can set meta tags like the image set when shared on social media by passing
151
-
them into your page's metadata.
116
+
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
117
153
-
Note that meta tags with colons need to be wrapped in quotes.
118
+
<Note>
119
+
Meta tags with colons must be wrapped in quotes.
120
+
</Note>
154
121
155
-
```mdx
122
+
```yaml
156
123
---
157
-
"twitter:image": "/images/your-photo.jpg"
124
+
"twitter:image": "/images/social-preview.jpg"
158
125
---
159
126
```
160
127
161
-
See [SEO](/settings/seo)to learn more about SEO metadata.
128
+
See [SEO](/settings/seo)for complete SEO metadata options.
162
129
163
-
## Internal Search Optimization
130
+
## Internal search keywords
164
131
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.
132
+
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