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
Copy file name to clipboardExpand all lines: fern/products/docs/pages/customization/frontmatter.mdx
+23-6Lines changed: 23 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,10 @@ subtitle: Set titles, add meta descriptions, and more
4
4
description: Use frontmatter to set a variety of page properties and metadata.
5
5
---
6
6
7
+
TEST and more
8
+
9
+
You can optionally use frontmatter to set each page's title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents and on-page feedback. For advanced styling and functionality customizations beyond frontmatter options, see [custom CSS and JavaScript](/docs/customization/custom-css-js).
10
+
7
11
You can optionally use frontmatter to set each page's title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents and on-page feedback. For advanced styling and functionality customizations beyond frontmatter options, see [custom CSS and JavaScript](/docs/customization/custom-css-js).
8
12
9
13
Frontmatter must be added to the top of a `.md` or `.mdx` file, before the rest of the content. Use sets of three dashes to indicate the beginning and end of your frontmatter, as shown:
@@ -31,13 +35,15 @@ og:title: SEO Metadata Title
31
35
The page title can be set in two ways:
32
36
33
37
1. In the page's frontmatter:
38
+
34
39
```mdx title="welcome.mdx"
35
40
---
36
41
title: Welcome to our docs
37
42
---
38
43
```
39
44
40
45
2. From the page name in docs.yml (used if no frontmatter title is set):
46
+
41
47
```yaml title="docs.yml"
42
48
title: Fern | Documentation # Site-wide title suffix
43
49
navigation:
@@ -46,6 +52,7 @@ navigation:
46
52
```
47
53
48
54
The final title will include the site-wide suffix. For example:
55
+
49
56
- With frontmatter: "Welcome to our docs - Fern | Documentation"
50
57
- Without frontmatter: "Welcome - Fern | Documentation"
51
58
@@ -68,6 +75,7 @@ For example, if you set `slug: email` in frontmatter, the page will be available
68
75
There are two ways to set a page's URL slug:
69
76
70
77
1. Using `slug` in docs.yml, which is relative to the page's location in the navigation:
78
+
71
79
<CodeBlock title='docs.yml'>
72
80
```yaml
73
81
navigation:
@@ -82,6 +90,7 @@ navigation:
82
90
</CodeBlock>
83
91
84
92
2. Using `slug` in frontmatter, which overrides everything and sets the absolute path from the root:
Controls the conditional rendering of the table of contents feature on the right-side of the page. Set to `true` to disable this feature.
141
153
</ParamField>
@@ -156,6 +168,7 @@ hide-toc: true
156
168
When the table of contents is hidden, Fern will center the contents of the page by default. To control the layout of the page, see the [layout documentation](#layout).
Sets the maximum depth of the table of contents. For example, a value of `3` will only show `<h1>`, `<h2>`, and `<h3>` headings in the table of contents.
- `overview`: A spacious, full-width layout without a table of contents. Perfect for landing pages, section overviews, and content that benefits from maximum horizontal space. Navigation sidebar remains visible.
240
-
257
+
241
258
- `guide`: The default documentation layout featuring a table of contents on the right side. Ideal for tutorials, how-to guides, and any content that benefits from easy navigation through sections.
242
-
259
+
243
260
- `reference`: A full-width layout optimized for an API or SDK reference. Removes the table of contents so you can add another column, such as code examples. Navigation sidebar remains visible.
244
-
261
+
245
262
- `page`: A distraction-free, full-screen layout that hides both the table of contents and navigation sidebar. Best for standalone content that benefits from focused reading experiences.
246
-
263
+
247
264
- `custom`: A blank canvas layout that removes all default styling constraints. Hides both the table of contents and navigation sidebar, allowing complete control over the page layout.
248
265
</ParamField>
249
266
267
+
250
268
## SEO metadata
251
269
252
270
<Note title="Looking to set metadata across the entire site?">
@@ -262,4 +280,3 @@ Currently, relative paths are _not_ supported for this field.
0 commit comments