Skip to content

Commit c43b616

Browse files
Visual Editor: Update
1 parent 17fc6e9 commit c43b616

File tree

1 file changed

+23
-6
lines changed

1 file changed

+23
-6
lines changed

fern/products/docs/pages/customization/frontmatter.mdx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ subtitle: Set titles, add meta descriptions, and more
44
description: Use frontmatter to set a variety of page properties and metadata.
55
---
66

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+
711
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).
812

913
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
3135
The page title can be set in two ways:
3236

3337
1. In the page's frontmatter:
38+
3439
```mdx title="welcome.mdx"
3540
---
3641
title: Welcome to our docs
3742
---
3843
```
3944

4045
2. From the page name in docs.yml (used if no frontmatter title is set):
46+
4147
```yaml title="docs.yml"
4248
title: Fern | Documentation # Site-wide title suffix
4349
navigation:
@@ -46,6 +52,7 @@ navigation:
4652
```
4753
4854
The final title will include the site-wide suffix. For example:
55+
4956
- With frontmatter: "Welcome to our docs - Fern | Documentation"
5057
- Without frontmatter: "Welcome - Fern | Documentation"
5158
@@ -68,6 +75,7 @@ For example, if you set `slug: email` in frontmatter, the page will be available
6875
There are two ways to set a page's URL slug:
6976

7077
1. Using `slug` in docs.yml, which is relative to the page's location in the navigation:
78+
7179
<CodeBlock title='docs.yml'>
7280
```yaml
7381
navigation:
@@ -82,6 +90,7 @@ navigation:
8290
</CodeBlock>
8391

8492
2. Using `slug` in frontmatter, which overrides everything and sets the absolute path from the root:
93+
8594
<CodeBlock title='email-us.mdx'>
8695
```mdx
8796
---
@@ -91,6 +100,7 @@ slug: email # Results in /email (ignores navigation structure)
91100
</CodeBlock>
92101

93102
The key difference is:
103+
94104
- A slug in docs.yml is relative to the page's location in the navigation structure
95105
- A slug in frontmatter is absolute and ignores the navigation structure completely
96106

@@ -135,7 +145,9 @@ edit-this-page-url: https://github.com/your-org/docs/blob/main/content/api-refer
135145
</ParamField>
136146

137147
## Table of contents
148+
138149
### Hide table of contents
150+
139151
<ParamField path="hide-toc" type="boolean" required={false} default={false}>
140152
Controls the conditional rendering of the table of contents feature on the right-side of the page. Set to `true` to disable this feature.
141153
</ParamField>
@@ -156,6 +168,7 @@ hide-toc: true
156168
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).
157169

158170
### Max depth
171+
159172
<ParamField path="max-toc-depth" type="number" required={false}>
160173
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.
161174
</ParamField>
@@ -174,6 +187,7 @@ max-toc-depth: 3
174187
</Frame>
175188

176189
## Navigation links
190+
177191
<ParamField path="hide-nav-links" type="boolean" required={false} default={false}>
178192
Controls the conditional rendering of the navigation links (previous, next) at the bottom of the page. Set to true to disable this feature.
179193

@@ -194,6 +208,7 @@ hide-nav-links: true
194208
</Frame>
195209

196210
## On-page feedback
211+
197212
<ParamField path="hide-feedback" type="boolean" required={false} default={false}>
198213
Controls the conditional rendering of the on-page feedback form at the bottom of the page. Set to true to disable this feature.
199214

@@ -214,6 +229,7 @@ hide-feedback: true
214229
</Frame>
215230

216231
## Page logo
232+
217233
<ParamField path="logo" type="object" required={false}>
218234
Override the site-wide logo for a page. Specify different logos for light and dark modes using absolute URLs.
219235
</ParamField>
@@ -233,20 +249,22 @@ Currently, relative paths are _not_ supported for this field.
233249
</Info>
234250

235251
## Layout
252+
236253
<ParamField path="layout" type="string" required={false} default="guide">
237254
Sets the page layout. Available options:
238-
255+
239256
- `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+
241258
- `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+
243260
- `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+
245262
- `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+
247264
- `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.
248265
</ParamField>
249266

267+
250268
## SEO metadata
251269

252270
<Note title="Looking to set metadata across the entire site?">
@@ -262,4 +280,3 @@ Currently, relative paths are _not_ supported for this field.
262280
</ParamField>
263281

264282
<Markdown src="/snippets/changelog-example.mdx" />
265-

0 commit comments

Comments
 (0)