Open navClose nav

Textarea Field

https://res.cloudinary.com/forestry-demo/image/fetch/c_limit,dpr_auto,f_auto,q_80,w_640/https://forestry.io/uploads/2018/01/textarea-preview.png

Options

  • General
    • Label — the human-friendly label shown above the input field in the editor.
    • Name — the key stored in your content’s front matter, used to access it in your templates.
    • Description — a human friendly description of what the field does and/or instructions for your editors.
    • Hidden — hides the field in the editor, but allows developers to set default values or maintain the field for legacy purposes.
  • Widget
    • Textarea/WYSIWYG — toggle rich-text editing. See WYSIWYG mode
    • Format — the format that should be used when writing the content to the file.
  • Validation
    • Required — prevent changes from being saved if this field is empty.
  • Default — supply default text.

Templating

You can access this field in your templates using the field’s name:

Hugo

<!-- Plain Text or HTML -->
<p>{{ .Params.description }}</p> 

<!-- Markdown -->
{{ .Params.description | markdownify }}

Jekyll

<!-- Plain Text or HTML -->
<p>{{ page.description }}</p> 

<!-- Markdown -->
{{ page.description | markdownify }}

VuePress

<template>
  <!--- Description is Plain Text -->
  <div>
    <p v-text="$page.frontmatter.description" />
  </div>

  <!--- Description Contains HTML -->
  <div v-html="$page.frontmatter.description" />
</template>

Storing Markdown VuePress Front Matter

VuePress does not have a built-in markdownify like function in Hugo or Jekyll, but you could always write your own filter!

Config Files

You can configure this field in Front Matter Template Config Files as follows:

type: textarea
name: [String]
label: [String]
description: [String]
hidden: [true|false]
default: [String]
config:
  wysiwyg: [true|false]

Example

type: textarea
name: description
label: Description
description: Short description of the page
hidden: false
default: ""
config:
  wysiwyg: false

WYSIWYG

Enables a rich text editor.

File Format

This field appears when WYSIWYG is enabled. Select which format should be output to your front matter:

  • Markdown
  • HTML
  • Inline HTML (only inline elements allowed)

Example

type: textarea
name: description
label: Description
description: Short description of the page
hidden: false
default: ""
config:
  wysiwyg: true
  schema:
    format: markdown

Field UI

https://res.cloudinary.com/forestry-demo/image/fetch/c_limit,dpr_auto,f_auto,q_80,w_640/https://forestry.io/uploads/2018/01/textarea-wysiwyg-preview.png

Templating

If you have a text field in your template, you can access it in your templates using the field’s name:

Hugo

<p>{{ .Params.description }}</p> 

Jekyll

<p>{{ page.description }}</p> 

Use the markdownify filters in Hugo or Jekyll to automatically format your HTML with paragraph tags and other formatting.

Hugo

{{ .Params.description | markdownify }}

Jekyll

{{ page.description | markdownify }}

Config Files

Example

type: textarea
name: description
label: Description
description: Short description of the page
hidden: false
default: ""
config:
  wysiwyg: true

Last updated on December 31, 2017