Fields

Describe fields of an object in your VuePress site.

Settings

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
markdown
: {
    
fields
: true,
  },
});

Syntax

Use a fields container to describe fields. Each line starting with @ followed by an inline code is a field item, and its attributes follow the closing backtick.

::: fields
@`theme` type=`ThemeConfig` required default=`{ base: '/' }`

Theme config.

@`enabled` type=boolean optional default=`true`

Whether it is enabled.

:::

All attributes are allowed and displayed as-is. The common ones are:

• type is displayed as a code block in the field header.
• default is displayed as a labeled code block below the field header.
• required, optional and deprecated are displayed as badges, and a deprecated field name is colored red and struck through.
• Other attributes are displayed as Name: value badges.

Nesting

To describe fields of an object type, nest a field item inside another one by increasing the leading @ by one for each level of nesting.

::: fields
@`options` type=object

Options.

@@`options.name` type=string

Option name.

:::

Demo

themeRequiredThemeConfig

Default{ base: '/' }

Theme config.

enabledOptionalboolean

Defaulttrue

Whether it is enabled.

legacyDeprecatedstring

Deprecated field.

Demo

::: fields
@`theme` type=`ThemeConfig` required default=`{ base: '/' }`

Theme config.

@`enabled` type=boolean optional default=`true`

Whether it is enabled.

@`legacy` type=string deprecated

Deprecated field.

:::