mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
139 lines
3.5 KiB
Plaintext
139 lines
3.5 KiB
Plaintext
---
|
|
title: "Pages"
|
|
description: "Pages are the building blocks of your documentation"
|
|
icon: "letter-text"
|
|
---
|
|
|
|
Each page is an MDX file, which combines Markdown content with React components to let you create rich, interactive documentation.
|
|
|
|
## Page metadata
|
|
|
|
Every page starts with frontmatter—YAML metadata enclosed by `---` at the beginning of your file. This metadata controls how your page appears and behaves.
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
The title of your page that appears in navigation and browser tabs.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="description" type="string">
|
|
A brief description of what this page covers. Appears under the title and improves SEO.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="sidebarTitle" type="string">
|
|
A short title that displays in the sidebar navigation.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="icon" type="string">
|
|
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).
|
|
|
|
</ResponseField>
|
|
|
|
<ResponseField name="tag" type="string">
|
|
A tag that appears next to your page title in the sidebar.
|
|
</ResponseField>
|
|
|
|
```yaml Example YAML frontmatter wrap
|
|
---
|
|
title: "About frontmatter"
|
|
description: "Frontmatter is the metadata that controls how your page appears and behaves"
|
|
sidebarTitle: "Frontmatter"
|
|
icon: "book"
|
|
tag: "NEW"
|
|
---
|
|
```
|
|
|
|
## Page mode
|
|
|
|
Control how your page displays with the `mode` setting.
|
|
|
|
### Default
|
|
|
|
If no mode is defined, defaults to a standard layout with a sidebar navigation and table of contents.
|
|
|
|
```yaml
|
|
---
|
|
title: "Default page title"
|
|
---
|
|
```
|
|
|
|
### Wide
|
|
|
|
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.
|
|
|
|
```yaml
|
|
---
|
|
title: "Wide page title"
|
|
mode: "wide"
|
|
---
|
|
```
|
|
|
|
### Custom
|
|
|
|
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.
|
|
|
|
```yaml
|
|
---
|
|
title: "Custom page title"
|
|
mode: "custom"
|
|
---
|
|
```
|
|
|
|
### Center
|
|
|
|
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.
|
|
|
|
```yaml
|
|
---
|
|
title: "Center page title"
|
|
mode: "center"
|
|
---
|
|
```
|
|
|
|
## API pages
|
|
|
|
Create interactive API playgrounds by adding an API specification to your frontmatter, `api` or `openapi`.
|
|
|
|
```yaml
|
|
---
|
|
openapi: "GET /endpoint"
|
|
---
|
|
```
|
|
|
|
Learn more about building [API documentation](/api-playground/overview).
|
|
|
|
## External links
|
|
|
|
Link to external sites directly from your navigation with the `url` metadata.
|
|
|
|
```yaml
|
|
---
|
|
title: "npm Package"
|
|
url: "https://www.npmjs.com/package/mint"
|
|
---
|
|
```
|
|
|
|
## Search engine optimization
|
|
|
|
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.
|
|
|
|
<Note>
|
|
Meta tags with colons must be wrapped in quotes.
|
|
</Note>
|
|
|
|
```yaml
|
|
---
|
|
"twitter:image": "/images/social-preview.jpg"
|
|
---
|
|
```
|
|
|
|
See [SEO](/settings/seo) for complete SEO metadata options.
|
|
|
|
## Internal search keywords
|
|
|
|
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.
|
|
|
|
```yaml
|
|
---
|
|
keywords: ['configuration', 'setup', 'getting started']
|
|
---
|
|
```
|