{"componentChunkName":"component---src-templates-doc-page-js","path":"/docs/configuration-options/","result":{"data":{"page":{"fields":{"path":"docs/configuration-options.md"},"frontmatter":{"title":"Configuration Options","group":"reference"},"html":"<p>All configuration options for Netlify CMS are specified in a <code>config.yml</code> file, in the folder where you access the editor UI (usually in the <code>/admin</code> folder).</p>\n<p>Alternatively, you can specify a custom config file using a link tag:</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token comment\">&lt;!-- Note the \"type\" and \"rel\" attribute values, which are required. --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>link</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>path/to/config.yml<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>text/yaml<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>cms-config-url<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>To see working configuration examples, you can <a href=\"../start-with-a-template\">start from a template</a> or check out the <a href=\"https://cms-demo.netlify.com\" target=\"_blank\" rel=\"noopener noreferrer\">CMS demo site</a>. (No login required: click the login button and the CMS will open.) You can refer to the demo <a href=\"https://github.com/netlify/netlify-cms/blob/master/dev-test/config.yml\" target=\"_blank\" rel=\"noopener noreferrer\">configuration code</a> to see how each option was configured.</p>\n<p>You can find details about all configuration options below. Note that <a href=\"https://en.wikipedia.org/wiki/YAML#Basic_components\" target=\"_blank\" rel=\"noopener noreferrer\">YAML syntax</a> allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.</p>\n<h2 id=\"backend\" style=\"position:relative;\"><a href=\"#backend\" aria-label=\"backend permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Backend</h2>\n<p><em>This setting is required.</em></p>\n<p>The <code>backend</code> option specifies how to access the content for your site, including authentication. Full details and code samples can be found in <a href=\"/docs/backends-overview\">Backends</a>.</p>\n<p><strong>Note</strong>: no matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it will always fetch and commit files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI will match the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI will save directly to the hosted repository, even if you're running the UI locally or in staging.</p>\n<h2 id=\"publish-mode\" style=\"position:relative;\"><a href=\"#publish-mode\" aria-label=\"publish mode permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Publish Mode</h2>\n<p>By default, all entries created or edited in the Netlify CMS are committed directly into the main repository branch.</p>\n<p>The <code>publish_mode</code> option allows you to enable \"Editorial Workflow\" mode for more control over the content publishing phases. All unpublished entries will be arranged in a board according to their status, and they can be further reviewed and edited before going live.</p>\n<p><strong>Note:</strong> Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is <a href=\"/docs/beta-features/#gitlab-and-bitbucket-editorial-workflow-support\">in beta</a>.</p>\n<p>You can enable the Editorial Workflow with the following line in your Netlify CMS <code>config.yml</code> file:</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">publish_mode</span><span class=\"token punctuation\">:</span> editorial_workflow</code></pre></div>\n<p>From a technical perspective, the workflow translates editor UI actions into common Git commands:</p>\n<table>\n<thead>\n<tr>\n<th>Actions in Netlify UI ...</th>\n<th>Perform these Git actions</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Save draft</td>\n<td>Commits to a new branch (named according to the pattern <code>cms/collectionName/entrySlug</code>), and opens a pull request</td>\n</tr>\n<tr>\n<td>Edit draft</td>\n<td>Pushes another commit to the draft branch/pull request</td>\n</tr>\n<tr>\n<td>Approve and publish draft</td>\n<td>Merges pull request and deletes branch</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"media-and-public-folders\" style=\"position:relative;\"><a href=\"#media-and-public-folders\" aria-label=\"media and public folders permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Media and Public Folders</h2>\n<p>Netlify CMS users can upload files to your repository using the Media Gallery. The following settings specify where these files are saved, and where they can be accessed on your built site.</p>\n<h3 id=\"media-folder\" style=\"position:relative;\"><a href=\"#media-folder\" aria-label=\"media folder permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Media Folder</h3>\n<p><em>This setting is required.</em></p>\n<p>The <code>media_folder</code> option specifies the folder path where uploaded files should be saved, relative to the base of the repo.</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">media_folder</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"static/images/uploads\"</span></code></pre></div>\n<h3 id=\"public-folder\" style=\"position:relative;\"><a href=\"#public-folder\" aria-label=\"public folder permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Public Folder</h3>\n<p>The <code>public_folder</code> option specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site. For fields controlled by [file] or [image] widgets, the value of the field is generated by prepending this path to the filename of the selected file. Defaults to the value of <code>media_folder</code>, with an opening <code>/</code> if one is not already included.</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">public_folder</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"/images/uploads\"</span></code></pre></div>\n<p>Based on the settings above, if a user used an image widget field called <code>avatar</code> to upload and select an image called <code>philosoraptor.png</code>, the image would be saved to the repository at <code>/static/images/uploads/philosoraptor.png</code>, and the <code>avatar</code> field for the file would be set to <code>/images/uploads/philosoraptor.png</code>.</p>\n<h2 id=\"media-library\" style=\"position:relative;\"><a href=\"#media-library\" aria-label=\"media library permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Media Library</h2>\n<p>Media library integrations are configured via the <code>media_library</code> property, and its value should be an object with at least a <code>name</code> property. A <code>config</code> property can also be used for options that should be passed to the library in use.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">media_library</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> uploadcare\n  <span class=\"token key atrule\">config</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">publicKey</span><span class=\"token punctuation\">:</span> demopublickey</code></pre></div>\n<h2 id=\"site-url\" style=\"position:relative;\"><a href=\"#site-url\" aria-label=\"site url permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Site URL</h2>\n<p>The <code>site_url</code> setting should provide a URL to your published site. May be used by the CMS for various functionality. Used together with a collection's <code>preview_path</code> to create links to live content.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">site_url</span><span class=\"token punctuation\">:</span> https<span class=\"token punctuation\">:</span>//your<span class=\"token punctuation\">-</span>site.com</code></pre></div>\n<h2 id=\"display-url\" style=\"position:relative;\"><a href=\"#display-url\" aria-label=\"display url permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Display URL</h2>\n<p>When the <code>display_url</code> setting is specified, the CMS UI will include a link in the fixed area at the top of the page, allowing content authors to easily return to your main site. The text of the link consists of the URL without the protocol portion (e.g., <code>your-site.com</code>).</p>\n<p>Defaults to <code>site_url</code>.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">display_url</span><span class=\"token punctuation\">:</span> https<span class=\"token punctuation\">:</span>//your<span class=\"token punctuation\">-</span>site.com</code></pre></div>\n<h2 id=\"custom-logo\" style=\"position:relative;\"><a href=\"#custom-logo\" aria-label=\"custom logo permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Custom Logo</h2>\n<p>When the <code>logo_url</code> setting is specified, the CMS UI will change the logo displayed at the top of the login page, allowing you to brand the CMS with your own logo. <code>logo_url</code> is assumed to be a URL to an image file.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">logo_url</span><span class=\"token punctuation\">:</span> https<span class=\"token punctuation\">:</span>//your<span class=\"token punctuation\">-</span>site.com/images/logo.svg</code></pre></div>\n<h2 id=\"locale\" style=\"position:relative;\"><a href=\"#locale\" aria-label=\"locale permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Locale</h2>\n<p>The CMS locale.</p>\n<p>Defaults to <code>en</code>.</p>\n<p>Other languages than English must be registered manually.</p>\n<p><strong>Example</strong></p>\n<p>In your <code>config.yml</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">locale</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'de'</span></code></pre></div>\n<p>And in your custom JavaScript code:</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import</span> <span class=\"token constant\">CMS</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'netlify-cms-app'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> de <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'netlify-cms-locales'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token constant\">CMS</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerLocale</span><span class=\"token punctuation\">(</span><span class=\"token string\">'de'</span><span class=\"token punctuation\">,</span> de<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>When a translation for the selected locale is missing the English one will be used.</p>\n<blockquote>\n<p>When importing <code>netlify-cms</code> all locales are registered by default (so you only need to update your <code>config.yml</code>).</p>\n</blockquote>\n<h2 id=\"show-preview-links\" style=\"position:relative;\"><a href=\"#show-preview-links\" aria-label=\"show preview links permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Show Preview Links</h2>\n<p><a href=\"../deploy-preview-links\">Deploy preview links</a> can be disabled by setting <code>show_preview_links</code> to <code>false</code>.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">show_preview_links</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">false</span></code></pre></div>\n<h2 id=\"slug-type\" style=\"position:relative;\"><a href=\"#slug-type\" aria-label=\"slug type permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Slug Type</h2>\n<p>The <code>slug</code> option allows you to change how filenames for entries are created and sanitized.\nIt also applies to filenames of media inserted via the default media library.<br>\nFor modifying the actual data in a slug, see the per-collection option below.</p>\n<p><code>slug</code> accepts multiple options:</p>\n<ul>\n<li>\n<p><code>encoding</code></p>\n<ul>\n<li><code>unicode</code> (default): Sanitize filenames (slugs) according to <a href=\"https://tools.ietf.org/html/rfc3987\" target=\"_blank\" rel=\"noopener noreferrer\">RFC3987</a> and the <a href=\"https://url.spec.whatwg.org/\" target=\"_blank\" rel=\"noopener noreferrer\">WHATWG URL spec</a>. This spec allows non-ASCII (or non-Latin) characters to exist in URLs.</li>\n<li><code>ascii</code>: Sanitize filenames (slugs) according to <a href=\"https://tools.ietf.org/html/rfc3986\" target=\"_blank\" rel=\"noopener noreferrer\">RFC3986</a>. The only allowed characters are (0-9, a-z, A-Z, <code>_</code>, <code>-</code>, <code>~</code>).</li>\n</ul>\n</li>\n<li><code>clean_accents</code>: Set to <code>true</code> to remove diacritics from slug characters before sanitizing. This is often helpful when using <code>ascii</code> encoding.</li>\n<li><code>sanitize_replacement</code>: The replacement string used to substitute unsafe characters, defaults to  <code>-</code>.</li>\n</ul>\n<p><strong>Example</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">slug</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">encoding</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"ascii\"</span>\n  <span class=\"token key atrule\">clean_accents</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span>\n  <span class=\"token key atrule\">sanitize_replacement</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"_\"</span></code></pre></div>\n<h2 id=\"collections\" style=\"position:relative;\"><a href=\"#collections\" aria-label=\"collections permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Collections</h2>\n<p><em>This setting is required.</em></p>\n<p>The <code>collections</code> setting is the heart of your Netlify CMS configuration, as it determines how content types and editor fields in the UI generate files and content in your repository. Each collection you configure displays in the left sidebar of the Content page of the editor UI, in the order they are entered into your Netlify CMS <code>config.yml</code> file.</p>\n<p><code>collections</code> accepts a list of collection objects, each with the following options:</p>\n<ul>\n<li><code>name</code> (required): unique identifier for the collection, used as the key when referenced in other contexts (like the <a href=\"../widgets/#relation\">relation widget</a>)</li>\n<li><code>identifier_field</code>: see detailed description below</li>\n<li><code>label</code>: label for the collection in the editor UI; defaults to the value of <code>name</code></li>\n<li><code>label_singular</code>: singular label for certain elements in the editor; defaults to the value of <code>label</code></li>\n<li><code>description</code>: optional text, displayed below the label when viewing a collection</li>\n<li><code>files</code> or <code>folder</code> (requires one of these): specifies the collection type and location; details in <a href=\"../collection-types\">Collection Types</a></li>\n<li><code>filter</code>: optional filter for <code>folder</code> collections; details in <a href=\"../collection-types\">Collection Types</a></li>\n<li><code>create</code>: for <code>folder</code> collections only; <code>true</code> allows users to create new items in the collection; defaults to <code>false</code></li>\n<li><code>publish</code>: for <code>publish_mode: editorial_workflow</code> only; <code>false</code> hides UI publishing controls for a collection; defaults to <code>true</code></li>\n<li><code>delete</code>: <code>false</code> prevents users from deleting items in a collection; defaults to <code>true</code></li>\n<li><code>extension</code>: see detailed description below</li>\n<li><code>format</code>: see detailed description below</li>\n<li><code>frontmatter_delimiter</code>: see detailed description under <code>format</code></li>\n<li><code>slug</code>: see detailed description below</li>\n<li><code>preview_path</code>: see detailed description below</li>\n<li><code>preview_path_date_field</code>: see detailed description below</li>\n<li><code>fields</code> (required): see detailed description below</li>\n<li><code>editor</code>: see detailed description below</li>\n<li><code>summary</code>: see detailed description below</li>\n<li><code>sortableFields</code>: see detailed description below</li>\n</ul>\n<p>The last few options require more detailed information.</p>\n<h3 id=\"identifier_field\" style=\"position:relative;\"><a href=\"#identifier_field\" aria-label=\"identifier_field permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>identifier_field</code></h3>\n<p>Netlify CMS expects every entry to provide a field named <code>\"title\"</code> that serves as an identifier for the entry. The identifier field serves as an entry's title when viewing a list of entries, and is used in <a href=\"#slug\">slug</a> creation. If you would like to use a field other than <code>\"title\"</code> as the identifier, you can set <code>identifier_field</code> to the name of the other field.</p>\n<p><strong>Example</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">collections</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> posts\n    <span class=\"token key atrule\">identifier_field</span><span class=\"token punctuation\">:</span> name</code></pre></div>\n<h3 id=\"extension-and-format\" style=\"position:relative;\"><a href=\"#extension-and-format\" aria-label=\"extension and format permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>extension</code> and <code>format</code></h3>\n<p>These settings determine how collection files are parsed and saved. Both are optional—Netlify CMS will attempt to infer your settings based on existing items in the collection. If your collection is empty, or you'd like more control, you can set these fields explicitly.</p>\n<p><code>extension</code> determines the file extension searched for when finding existing entries in a folder collection and it determines the file extension used to save new collection items. It accepts the following values: <code>yml</code>, <code>yaml</code>, <code>toml</code>, <code>json</code>, <code>md</code>, <code>markdown</code>, <code>html</code>.</p>\n<p>You may also specify a custom <code>extension</code> not included in the list above, as long as the collection files can be parsed and saved in one of the supported formats below.</p>\n<p><code>format</code> determines how collection files are parsed and saved. It will be inferred if the <code>extension</code> field or existing collection file extensions match one of the supported extensions above. It accepts the following values:</p>\n<ul>\n<li><code>yml</code> or <code>yaml</code>: parses and saves files as YAML-formatted data files; saves with <code>yml</code> extension by default</li>\n<li><code>toml</code>: parses and saves files as TOML-formatted data files; saves with <code>toml</code> extension by default</li>\n<li><code>json</code>: parses and saves files as JSON-formatted data files; saves with <code>json</code> extension by default</li>\n<li><code>frontmatter</code>: parses files and saves files with data frontmatter followed by an unparsed body text (edited using a <code>body</code> field); saves with <code>md</code> extension by default; default for collections that can't be inferred. Collections with <code>frontmatter</code> format (either inferred or explicitly set) can parse files with frontmatter in YAML, TOML, or JSON format. However, they will be saved with YAML frontmatter.</li>\n<li><code>yaml-frontmatter</code>: same as the <code>frontmatter</code> format above, except frontmatter will be both parsed and saved only as YAML, followed by unparsed body text. The default delimiter for this option is  <code>---</code>.</li>\n<li><code>toml-frontmatter</code>: same as the <code>frontmatter</code> format above, except frontmatter will be both parsed and saved only as TOML, followed by unparsed body text. The default delimiter for this option is  <code>+++</code>.</li>\n<li><code>json-frontmatter</code>: same as the <code>frontmatter</code> format above, except frontmatter will be both parsed and saved as JSON, followed by unparsed body text. The default delimiter for this option is  <code>{</code> <code>}</code>.</li>\n</ul>\n<h3 id=\"frontmatter_delimiter\" style=\"position:relative;\"><a href=\"#frontmatter_delimiter\" aria-label=\"frontmatter_delimiter permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>frontmatter_delimiter</code></h3>\n<p>If you have an explicit frontmatter format declared, this option allows you to specify a custom delimiter like <code>~~~</code>. If you need different beginning and ending delimiters, you can use an array like <code>[\"(\", \")\"]</code>.</p>\n<h3 id=\"slug\" style=\"position:relative;\"><a href=\"#slug\" aria-label=\"slug permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>slug</code></h3>\n<p>For folder collections where users can create new items, the <code>slug</code> option specifies a template for generating new filenames based on a file's creation date and <code>title</code> field. (This means that all collections with <code>create: true</code> must have a <code>title</code> field (a different field can be used via <a href=\"#identifier_field\"><code>identifier_field</code></a>).</p>\n<p>The slug template can also reference a field value by name, eg. <code>{{title}}</code>. If a field name conflicts with a built in template tag name - for example, if you have a field named <code>slug</code>, and would like to reference that field via <code>{{slug}}</code>, you can do so by adding the explicit <code>fields.</code> prefix, eg. <code>{{fields.slug}}</code>.</p>\n<p><strong>Available template tags:</strong></p>\n<ul>\n<li>Any field can be referenced by wrapping the field name in double curly braces, eg. <code>{{author}}</code></li>\n<li><code>{{slug}}</code>: a url-safe version of the <code>title</code> field (or identifier field) for the file</li>\n<li><code>{{year}}</code>: 4-digit year of the file creation date</li>\n<li><code>{{month}}</code>: 2-digit month of the file creation date</li>\n<li><code>{{day}}</code>: 2-digit day of the month of the file creation date</li>\n<li><code>{{hour}}</code>: 2-digit hour of the file creation date</li>\n<li><code>{{minute}}</code>: 2-digit minute of the file creation date</li>\n<li><code>{{second}}</code>: 2-digit second of the file creation date</li>\n</ul>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">slug</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"{{year}}-{{month}}-{{day}}_{{slug}}\"</span></code></pre></div>\n<p><strong>Example using field names:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">slug</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}\"</span></code></pre></div>\n<p><strong>Example using field name that conflicts with a template tag:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">slug</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"{{year}}-{{month}}-{{day}}_{{fields.slug}}\"</span></code></pre></div>\n<h3 id=\"preview_path\" style=\"position:relative;\"><a href=\"#preview_path\" aria-label=\"preview_path permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>preview_path</code></h3>\n<p>A string representing the path where content in this collection can be found on the live site. This allows deploy preview links to direct to lead to a specific piece of content rather than the site root of a deploy preview.</p>\n<p><strong>Available template tags:</strong></p>\n<p>Template tags are the same as those for <a href=\"#slug\">slug</a>, with the following exceptions:</p>\n<ul>\n<li><code>{{slug}}</code> is the entire slug for the current entry (not just the url-safe identifier, as is the case with <a href=\"#slug\"><code>slug</code> configuration</a>)</li>\n<li>The date based template tags, such as <code>{{year}}</code> and <code>{{month}}</code>, are pulled from a date field in your entry, and may require additional configuration - see <a href=\"#preview_path_date_field\"><code>preview_path_date_field</code></a> for details. If a date template tag is used and no date can be found, <code>preview_path</code> will be ignored.</li>\n<li><code>{{filename}}</code> The file name without the extension part.</li>\n<li><code>{{extension}}</code> The file extension.</li>\n</ul>\n<p><strong>Examples:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">collections</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> posts\n    <span class=\"token key atrule\">preview_path</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"blog/{{year}}/{{month}}/{{slug}}\"</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">collections</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> posts\n    <span class=\"token key atrule\">preview_path</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"blog/{{year}}/{{month}}/{{filename}}.{{extension}}\"</span></code></pre></div>\n<h3 id=\"preview_path_date_field\" style=\"position:relative;\"><a href=\"#preview_path_date_field\" aria-label=\"preview_path_date_field permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>preview_path_date_field</code></h3>\n<p>The name of a date field for parsing date-based template tags from <code>preview_path</code>. If this field is not provided and <code>preview_path</code> contains date-based template tags (eg. <code>{{year}}</code>), Netlify CMS will attempt to infer a usable date field by checking for common date field names, such as <code>date</code>. If you find that you need to specify a date field, you can use <code>preview_path_date_field</code> to tell Netlify CMS which field to use for preview path template tags.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">collections</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> posts\n    <span class=\"token key atrule\">preview_path_date_field</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"updated_on\"</span></code></pre></div>\n<h3 id=\"fields\" style=\"position:relative;\"><a href=\"#fields\" aria-label=\"fields permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>fields</code></h3>\n<p>The <code>fields</code> option maps editor UI widgets to field-value pairs in the saved file. The order of the fields in your Netlify CMS <code>config.yml</code> file determines their order in the editor UI and in the saved file.</p>\n<p><code>fields</code> accepts a list of collection objects, each with the following options:</p>\n<ul>\n<li><code>name</code> (required): unique identifier for the field, used as the key when referenced in other contexts (like the <a href=\"../widgets/#relation\">relation widget</a>)</li>\n<li><code>label</code>: label for the field in the editor UI; defaults to the value of <code>name</code></li>\n<li><code>widget</code>: defines editor UI and inputs and file field data types; details in <a href=\"../widgets\">Widgets</a></li>\n<li><code>default</code>: specify a default value for a field; available for most widget types (see <a href=\"../widgets\">Widgets</a> for details on each widget type). Please note that field default value only works for folder collection type.</li>\n<li><code>required</code>: specify as <code>false</code> to make a field optional; defaults to <code>true</code></li>\n<li><code>pattern</code>: add field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with <a href=\"../custom-widgets/#advanced-field-validation\">custom widgets</a></li>\n<li><code>comment</code>: optional comment to add before the field (only supported for <code>yaml</code>)</li>\n</ul>\n<p>In files with frontmatter, one field should be named <code>body</code>. This special field represents the section of the document (usually markdown) that comes after the frontmatter.</p>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">fields</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Title\"</span>\n    <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"title\"</span>\n    <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"string\"</span>\n    <span class=\"token key atrule\">pattern</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'.{20,}'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Must have at least 20 characters\"</span><span class=\"token punctuation\">]</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Layout\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"layout\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"hidden\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"blog\"</span><span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Featured Image\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"thumbnail\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"image\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">required</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">false</span><span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Body\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"body\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"markdown\"</span><span class=\"token punctuation\">}</span>\n    <span class=\"token key atrule\">comment</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'This is a multiline\\ncomment'</span></code></pre></div>\n<h3 id=\"editor\" style=\"position:relative;\"><a href=\"#editor\" aria-label=\"editor permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>editor</code></h3>\n<p>This setting changes options for the editor view of the collection. It has one option so far:</p>\n<ul>\n<li><code>preview</code>: set to <code>false</code> to disable the preview pane for this collection; defaults to <code>true</code></li>\n</ul>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\">  <span class=\"token key atrule\">editor</span><span class=\"token punctuation\">:</span>\n     <span class=\"token key atrule\">preview</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">false</span></code></pre></div>\n<h3 id=\"summary\" style=\"position:relative;\"><a href=\"#summary\" aria-label=\"summary permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>summary</code></h3>\n<p>This setting allows the customization of the collection list view. Similar to the <code>slug</code> field, a string with templates can be used to include values of different fields, e.g. <code>{{title}}</code>. This option over-rides the default of <code>title</code> field and <code>identifier_field</code>.</p>\n<p><strong>Available template tags:</strong></p>\n<p>Template tags are the same as those for <a href=\"#slug\">slug</a>, with the following additions:</p>\n<ul>\n<li><code>{{filename}}</code> The file name without the extension part.</li>\n<li><code>{{extension}}</code> The file extension.</li>\n<li><code>{{commit_date}}</code> The file commit date on supported backends (git based backends).</li>\n<li><code>{{commit_author}}</code> The file author date on supported backends (git based backends).</li>\n</ul>\n<p><strong>Example</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\">    <span class=\"token key atrule\">summary</span><span class=\"token punctuation\">:</span> <span class=\"token key atrule\">\"Version</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>version<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span> <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>title<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span>\"</code></pre></div>\n<h3 id=\"sortablefields\" style=\"position:relative;\"><a href=\"#sortablefields\" aria-label=\"sortablefields permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>sortableFields</code></h3>\n<p>An optional list of sort fields to show in the UI.</p>\n<p>Defaults to inferring <code>title</code>, <code>date</code>, <code>author</code> and <code>description</code> fields and will also show <code>Update On</code> sort field in git based backends.</p>\n<p>When <code>author</code> field can't be inferred commit author will be used.</p>\n<p><strong>Example</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\">    <span class=\"token comment\"># use dot notation for nested fields</span>\n    <span class=\"token key atrule\">sortableFields</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'commit_date'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'title'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'commit_author'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'language.en'</span><span class=\"token punctuation\">]</span></code></pre></div>"},"nav":{"group":[{"fieldValue":"backends","edges":[{"node":{"fields":{"slug":"/docs/backends-overview/"},"frontmatter":{"title":"Overview","group":"backends"},"tableOfContents":"<ul>\n<li><a href=\"/docs/backends-overview/#backend-configuration\">Backend Configuration</a></li>\n<li><a href=\"/docs/backends-overview/#creating-a-new-backend\">Creating a New Backend</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/git-gateway-backend/"},"frontmatter":{"title":"Git Gateway","group":"backends"},"tableOfContents":"<ul>\n<li><a href=\"/docs/git-gateway-backend/#git-gateway-with-netlify\">Git Gateway with Netlify</a></li>\n<li><a href=\"/docs/git-gateway-backend/#reconnect-after-changing-repository-permissions\">Reconnect after Changing Repository Permissions</a></li>\n<li><a href=\"/docs/git-gateway-backend/#git-gateway-without-netlify\">Git Gateway without Netlify</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/bitbucket-backend/"},"frontmatter":{"title":"Bitbucket","group":"backends"},"tableOfContents":"<ul>\n<li><a href=\"/docs/bitbucket-backend/#client-side-implicit-grant-bitbucket\">Client-Side Implicit Grant (Bitbucket)</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/github-backend/"},"frontmatter":{"title":"GitHub","group":"backends"},"tableOfContents":"<ul>\n<li><a href=\"/docs/github-backend/#specifying-a-status-for-deploy-previews\">Specifying a status for deploy previews</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/gitlab-backend/"},"frontmatter":{"title":"GitLab","group":"backends"},"tableOfContents":"<ul>\n<li><a href=\"/docs/gitlab-backend/#web-application-flow-with-netlify\">Web Application Flow with Netlify</a></li>\n<li><a href=\"/docs/gitlab-backend/#client-side-implicit-grant-gitlab\">Client-Side Implicit Grant (GitLab)</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/test-backend/"},"frontmatter":{"title":"Test","group":"backends"},"tableOfContents":""}},{"node":{"fields":{"slug":"/docs/external-oauth-clients/"},"frontmatter":{"title":"External OAuth Clients","group":"backends"},"tableOfContents":""}}]},{"fieldValue":"contributing","edges":[{"node":{"fields":{"slug":"/docs/contributor-guide/"},"frontmatter":{"title":"Contributor Guide","group":"contributing"},"tableOfContents":"<ul>\n<li><a href=\"/docs/contributor-guide/#getting-started-with-contributing\">Getting started with contributing</a></li>\n<li><a href=\"/docs/contributor-guide/#the-basics-of-the-netlify-cms-docs\">The basics of the Netlify CMS docs</a></li>\n<li><a href=\"/docs/contributor-guide/#style-guidelines\">Style guidelines</a></li>\n<li><a href=\"/docs/contributor-guide/#filing-issues\">Filing issues</a></li>\n<li><a href=\"/docs/contributor-guide/#improve-existing-content\">Improve existing content</a></li>\n<li><a href=\"/docs/contributor-guide/#other-places-to-get-involved\">Other places to get involved</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/writing-style-guide/"},"frontmatter":{"title":"Writing Style Guide","group":"contributing"},"tableOfContents":"<ul>\n<li>\n<p><a href=\"/docs/writing-style-guide/#netlify-cms-style-guide\">Netlify CMS Style Guide</a></p>\n<ul>\n<li>\n<p><a href=\"/docs/writing-style-guide/#documentation-formatting-standards\">Documentation Formatting Standards</a></p>\n<ul>\n<li><a href=\"/docs/writing-style-guide/#use-angle-brackets-for-placeholders\">Use angle brackets for placeholders</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-bold-for-user-interface-elements\">Use bold for user interface elements</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-italics-to-define-or-introduce-new-terms\">Use italics to define or introduce new terms</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-code-style-for-filenames-directories-and-paths\">Use code style for filenames, directories, and paths</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-the-international-standard-for-punctuation-inside-quotes\">Use the international standard for punctuation inside quotes</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/writing-style-guide/#inline-code-formatting\">Inline code formatting</a></p>\n<ul>\n<li><a href=\"/docs/writing-style-guide/#use-code-style-for-inline-code-and-commands\">Use code style for inline code and commands</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-code-style-for-object-field-names\">Use code style for object field names</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-normal-style-for-string-and-integer-field-values\">Use normal style for string and integer field values</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/writing-style-guide/#code-snippet-formatting\">Code snippet formatting</a></p>\n<ul>\n<li><a href=\"/docs/writing-style-guide/#dont-include-the-command-prompt\">Don’t include the command prompt</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/writing-style-guide/#content-best-practices\">Content best practices</a></p>\n<ul>\n<li><a href=\"/docs/writing-style-guide/#use-present-tense\">Use present tense</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-active-voice\">Use active voice</a></li>\n<li><a href=\"/docs/writing-style-guide/#use-simple-and-direct-language\">Use simple and direct language</a></li>\n<li><a href=\"/docs/writing-style-guide/#address-the-reader-as-you\">Address the reader as “you”</a></li>\n<li><a href=\"/docs/writing-style-guide/#avoid-latin-phrases\">Avoid Latin phrases</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/writing-style-guide/#patterns-to-avoid\">Patterns to avoid</a></p>\n<ul>\n<li><a href=\"/docs/writing-style-guide/#avoid-using-we\">Avoid using “we”</a></li>\n<li><a href=\"/docs/writing-style-guide/#avoid-jargon-and-idioms\">Avoid jargon and idioms</a></li>\n<li><a href=\"/docs/writing-style-guide/#avoid-statements-about-the-future\">Avoid statements about the future</a></li>\n<li><a href=\"/docs/writing-style-guide/#avoid-statements-that-will-soon-be-out-of-date\">Avoid statements that will soon be out of date</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/architecture/"},"frontmatter":{"title":"Architecture","group":"contributing"},"tableOfContents":"<ul>\n<li><a href=\"/docs/architecture/#state-shape--reducers\">State shape / reducers</a></li>\n<li><a href=\"/docs/architecture/#selectors\">Selectors</a></li>\n<li><a href=\"/docs/architecture/#value-objects\">Value Objects</a></li>\n<li>\n<p><a href=\"/docs/architecture/#components-structure-and-workflows\">Components structure and Workflows</a></p>\n<ul>\n<li>\n<p><a href=\"/docs/architecture/#entry-editing\">Entry Editing</a></p>\n<ul>\n<li><a href=\"/docs/architecture/#widget-components-implementation\">Widget components implementation</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/architecture/#editorial-workflow-implementation\">Editorial Workflow implementation</a></p>\n<ul>\n<li><a href=\"/docs/architecture/#about-metadata\">About metadata</a></li>\n</ul>\n</li>\n</ul>"}}]},{"fieldValue":"customization","edges":[{"node":{"fields":{"slug":"/docs/custom-widgets/"},"frontmatter":{"title":"Creating Custom Widgets","group":"customization"},"tableOfContents":"<ul>\n<li>\n<ul>\n<li><a href=\"/docs/custom-widgets/#writing-react-components-inline\">Writing React Components inline</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/custom-widgets/#registerwidget\"><code>registerWidget</code></a></li>\n<li><a href=\"/docs/custom-widgets/#registereditorcomponent\"><code>registerEditorComponent</code></a></li>\n<li><a href=\"/docs/custom-widgets/#advanced-field-validation\">Advanced field validation</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/customization/"},"frontmatter":{"title":"Creating Custom Previews","group":"customization"},"tableOfContents":"<ul>\n<li>\n<ul>\n<li><a href=\"/docs/customization/#react-components-inline-interaction\">React Components inline interaction</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/customization/#registerpreviewstyle\"><code>registerPreviewStyle</code></a></li>\n<li><a href=\"/docs/customization/#registerpreviewtemplate\"><code>registerPreviewTemplate</code></a></li>\n</ul>"}}]},{"fieldValue":"features","edges":[{"node":{"fields":{"slug":"/docs/deploy-preview-links/"},"frontmatter":{"title":"Deploy Preview Links","group":"features"},"tableOfContents":"<ul>\n<li>\n<p><a href=\"/docs/deploy-preview-links/#using-deploy-preview-links\">Using deploy preview links</a></p>\n<ul>\n<li><a href=\"/docs/deploy-preview-links/#waiting-for-builds\">Waiting for builds</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/deploy-preview-links/#configuring-preview-paths\">Configuring preview paths</a></p>\n<ul>\n<li><a href=\"/docs/deploy-preview-links/#dates-in-preview-paths\">Dates in preview paths</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/deploy-preview-links/#preview-links-for-published-content\">Preview links for published content</a></li>\n<li><a href=\"/docs/deploy-preview-links/#disabling-deploy-preview-links\">Disabling deploy preview links</a></li>\n<li><a href=\"/docs/deploy-preview-links/#how-it-works\">How it works</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/open-authoring/"},"frontmatter":{"title":"Open Authoring","group":"features"},"tableOfContents":"<ul>\n<li><a href=\"/docs/open-authoring/#requirements\">Requirements</a></li>\n<li><a href=\"/docs/open-authoring/#enabling-open-authoring\">Enabling Open Authoring</a></li>\n<li><a href=\"/docs/open-authoring/#usage\">Usage</a></li>\n<li><a href=\"/docs/open-authoring/#alternative-for-external-contributors-with-git-gateway\">Alternative for external contributors with Git Gateway</a></li>\n<li><a href=\"/docs/open-authoring/#linking-to-specific-entries-in-the-cms\">Linking to specific entries in the CMS</a></li>\n</ul>"}}]},{"fieldValue":"guides","edges":[{"node":{"fields":{"slug":"/docs/gatsby/"},"frontmatter":{"title":"Gatsby","group":"guides"},"tableOfContents":"<ul>\n<li><a href=\"/docs/gatsby/#create-a-new-gatsby-site\">Create a new Gatsby site</a></li>\n<li><a href=\"/docs/gatsby/#get-to-know-gatsby\">Get to know Gatsby</a></li>\n<li>\n<p><a href=\"/docs/gatsby/#add-netlify-cms-to-your-site\">Add Netlify CMS to your site</a></p>\n<ul>\n<li><a href=\"/docs/gatsby/#configuration\">Configuration</a></li>\n<li><a href=\"/docs/gatsby/#push-to-github\">Push to GitHub</a></li>\n<li><a href=\"/docs/gatsby/#add-your-repo-to-netlify\">Add your repo to Netlify</a></li>\n<li><a href=\"/docs/gatsby/#enable-identity-and-git-gateway\">Enable Identity and Git Gateway</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/gatsby/#start-publishing\">Start publishing</a></p>\n<ul>\n<li><a href=\"/docs/gatsby/#cleanup\">Cleanup</a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/hugo/"},"frontmatter":{"title":"Hugo","group":"guides"},"tableOfContents":"<ul>\n<li><a href=\"/docs/hugo/#introduction\">Introduction</a></li>\n<li>\n<p><a href=\"/docs/hugo/#getting-started-with-hugo\">Getting started with Hugo</a></p>\n<ul>\n<li><a href=\"/docs/hugo/#installation\">Installation</a></li>\n<li><a href=\"/docs/hugo/#creating-a-new-site\">Creating a new site</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/hugo/#getting-started-with-netlify-cms\">Getting Started With Netlify CMS</a></p>\n<ul>\n<li><a href=\"/docs/hugo/#add-the-netlify-cms-files-to-hugo\">Add the Netlify CMS files to Hugo</a></li>\n<li><a href=\"/docs/hugo/#pushing-to-github\">Pushing to GitHub</a></li>\n<li><a href=\"/docs/hugo/#deploying-with-netlify\">Deploying With Netlify</a></li>\n<li><a href=\"/docs/hugo/#authenticating-with-netlify-identity\">Authenticating with Netlify Identity</a></li>\n<li><a href=\"/docs/hugo/#enable-identity--git-gateway-in-netlify\">Enable Identity &#x26; Git Gateway in Netlify</a></li>\n<li><a href=\"/docs/hugo/#accessing-the-cms\">Accessing the CMS</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/hugo/#using-netlify-cms-content-in-hugo\">Using Netlify CMS content in Hugo</a></p>\n<ul>\n<li><a href=\"/docs/hugo/#creating-a-list-of-posts\">Creating a list of posts</a></li>\n<li><a href=\"/docs/hugo/#creating-a-single-page-post-layout\">Creating a single page post layout</a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/nextjs/"},"frontmatter":{"title":"NextJS","group":"guides"},"tableOfContents":"<ul>\n<li><a href=\"/docs/nextjs/#creating-a-new-project\">Creating a new project</a></li>\n<li><a href=\"/docs/nextjs/#adding-netlify-cms\">Adding Netlify CMS</a></li>\n<li>\n<p><a href=\"/docs/nextjs/#publishing-to-github-and-netlify\">Publishing to GitHub and Netlify</a></p>\n<ul>\n<li><a href=\"/docs/nextjs/#enable-identity-and-git-gateway\">Enable Identity and Git Gateway</a></li>\n<li><a href=\"/docs/nextjs/#celebrate\">Celebrate!</a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/nuxt/"},"frontmatter":{"title":"Nuxt","group":"guides"},"tableOfContents":"<ul>\n<li><a href=\"/docs/nuxt/#starting-with-create-nuxt-app\">Starting With <code>create-nuxt-app</code></a></li>\n<li>\n<p><a href=\"/docs/nuxt/#setting-up-netlify-cms\">Setting Up Netlify CMS</a></p>\n<ul>\n<li><a href=\"/docs/nuxt/#add-the-netlify-cms-files-to-nuxt\">Add the Netlify CMS files to Nuxt</a></li>\n<li><a href=\"/docs/nuxt/#add-the-content-directory-to-nuxt\">Add the <code>content/</code> directory to Nuxt</a></li>\n<li><a href=\"/docs/nuxt/#pushing-to-github\">Pushing to GitHub</a></li>\n<li><a href=\"/docs/nuxt/#deploying-with-netlify\">Deploying With Netlify</a></li>\n<li><a href=\"/docs/nuxt/#authenticating-with-netlify-identity\">Authenticating with Netlify Identity</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/nuxt/#integrating-content-in-nuxt-with-vuex\">Integrating content in Nuxt with Vuex</a></p>\n<ul>\n<li><a href=\"/docs/nuxt/#rendering-markdown-with-nuxtjsmarkdownit\">Rendering Markdown with <code>@nuxtjs/markdownit</code></a></li>\n<li><a href=\"/docs/nuxt/#generating-pages-with-the-generate-property\">Generating pages with the <code>generate</code> property</a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/jekyll/"},"frontmatter":{"title":"Jekyll","group":"guides"},"tableOfContents":"<ul>\n<li><a href=\"/docs/jekyll/#introduction\">Introduction</a></li>\n<li><a href=\"/docs/jekyll/#setup\">Setup</a></li>\n<li>\n<p><a href=\"/docs/jekyll/#add-netlify-cms\">Add Netlify CMS</a></p>\n<ul>\n<li><a href=\"/docs/jekyll/#add-adminindexhtml\">Add admin/index.html</a></li>\n<li><a href=\"/docs/jekyll/#add-adminconfigyml\">Add admin/config.yml</a></li>\n<li><a href=\"/docs/jekyll/#setup-backend\">Setup Backend</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/jekyll/#cms-configuration\">CMS Configuration</a></p>\n<ul>\n<li><a href=\"/docs/jekyll/#blog-collection\">Blog Collection</a></li>\n<li><a href=\"/docs/jekyll/#author-collection\">Author Collection</a></li>\n<li><a href=\"/docs/jekyll/#about-page\">About Page</a></li>\n<li><a href=\"/docs/jekyll/#navigation\">Navigation</a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/middleman/"},"frontmatter":{"title":"Middleman","group":"guides"},"tableOfContents":"<ul>\n<li><a href=\"/docs/middleman/#installation\">Installation</a></li>\n<li>\n<p><a href=\"/docs/middleman/#create-a-new-middleman-site\">Create a new Middleman site</a></p>\n<ul>\n<li><a href=\"/docs/middleman/#add-the-middleman-blog-extension\">Add the Middleman blog extension</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/middleman/#get-started-with-middleman\">Get started with Middleman</a></p>\n<ul>\n<li><a href=\"/docs/middleman/#activate-the-blog-extension\">Activate the blog extension</a></li>\n<li><a href=\"/docs/middleman/#load-the-articles\">Load the articles</a></li>\n<li><a href=\"/docs/middleman/#add-an-article-layout\">Add an article layout</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/middleman/#add-netlify-cms-to-your-site\">Add Netlify CMS to your site</a></p>\n<ul>\n<li><a href=\"/docs/middleman/#configuration\">Configuration</a></li>\n<li><a href=\"/docs/middleman/#push-to-github\">Push to GitHub</a></li>\n<li><a href=\"/docs/middleman/#add-your-repo-to-netlify\">Add your repo to Netlify</a></li>\n<li><a href=\"/docs/middleman/#enable-identity-and-git-gateway\">Enable Identity and Git Gateway</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/middleman/#start-publishing\">Start publishing</a></li>\n</ul>"}}]},{"fieldValue":"media","edges":[{"node":{"fields":{"slug":"/docs/cloudinary/"},"frontmatter":{"title":"Cloudinary","group":"media"},"tableOfContents":"<ul>\n<li><a href=\"/docs/cloudinary/#creating-a-cloudinary-account\">Creating a Cloudinary Account</a></li>\n<li>\n<p><a href=\"/docs/cloudinary/#connecting-cloudinary-to-netlify-cms\">Connecting Cloudinary to Netlify CMS</a></p>\n<ul>\n<li><a href=\"/docs/cloudinary/#security-considerations\">Security Considerations</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/cloudinary/#netlify-cms-configuration-options\">Netlify CMS configuration options</a></li>\n<li>\n<p><a href=\"/docs/cloudinary/#cloudinary-configuration-options\">Cloudinary configuration options</a></p>\n<ul>\n<li><a href=\"/docs/cloudinary/#authentication\">Authentication</a></li>\n<li><a href=\"/docs/cloudinary/#media-library-behavior\">Media library behavior</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/cloudinary/#image-transformations\">Image transformations</a></p>\n<ul>\n<li>\n<p><a href=\"/docs/cloudinary/#transforming-images-via-media-library\">Transforming images via Media Library</a></p>\n<ul>\n<li><a href=\"/docs/cloudinary/#global-configuration\">Global configuration</a></li>\n<li><a href=\"/docs/cloudinary/#field-configuration\">Field configuration</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li><a href=\"/docs/cloudinary/#inserting-cloudinary-url-in-page-templates\">Inserting Cloudinary URL in page templates</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/netlify-large-media/"},"frontmatter":{"title":"Netlify Large Media","group":"media"},"tableOfContents":"<ul>\n<li><a href=\"/docs/netlify-large-media/#requirements\">Requirements</a></li>\n<li>\n<p><a href=\"/docs/netlify-large-media/#image-transformations\">Image transformations</a></p>\n<ul>\n<li><a href=\"/docs/netlify-large-media/#transformation-control-for-media-gallery-thumbnails\">Transformation control for media gallery thumbnails</a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/uploadcare/"},"frontmatter":{"title":"Uploadcare","group":"media"},"tableOfContents":"<ul>\n<li><a href=\"/docs/uploadcare/#creating-an-uploadcare-account\">Creating an Uploadcare Account</a></li>\n<li><a href=\"/docs/uploadcare/#updating-netlify-cms-configuration\">Updating Netlify CMS Configuration</a></li>\n<li>\n<p><a href=\"/docs/uploadcare/#configuring-the-uploadcare-widget\">Configuring the Uploadcare Widget</a></p>\n<ul>\n<li><a href=\"/docs/uploadcare/#global-configuration\">Global configuration</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/uploadcare/#field-configuration\">Field configuration</a></li>\n<li><a href=\"/docs/uploadcare/#integration-settings\">Integration settings</a></li>\n</ul>"}}]},{"fieldValue":"reference","edges":[{"node":{"fields":{"slug":"/docs/configuration-options/"},"frontmatter":{"title":"Configuration Options","group":"reference"},"tableOfContents":"<ul>\n<li><a href=\"/docs/configuration-options/#backend\">Backend</a></li>\n<li><a href=\"/docs/configuration-options/#publish-mode\">Publish Mode</a></li>\n<li>\n<p><a href=\"/docs/configuration-options/#media-and-public-folders\">Media and Public Folders</a></p>\n<ul>\n<li><a href=\"/docs/configuration-options/#media-folder\">Media Folder</a></li>\n<li><a href=\"/docs/configuration-options/#public-folder\">Public Folder</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/configuration-options/#media-library\">Media Library</a></li>\n<li><a href=\"/docs/configuration-options/#site-url\">Site URL</a></li>\n<li><a href=\"/docs/configuration-options/#display-url\">Display URL</a></li>\n<li><a href=\"/docs/configuration-options/#custom-logo\">Custom Logo</a></li>\n<li><a href=\"/docs/configuration-options/#locale\">Locale</a></li>\n<li><a href=\"/docs/configuration-options/#show-preview-links\">Show Preview Links</a></li>\n<li><a href=\"/docs/configuration-options/#slug-type\">Slug Type</a></li>\n<li>\n<p><a href=\"/docs/configuration-options/#collections\">Collections</a></p>\n<ul>\n<li><a href=\"/docs/configuration-options/#identifier_field\"><code>identifier_field</code></a></li>\n<li><a href=\"/docs/configuration-options/#extension-and-format\"><code>extension</code> and <code>format</code></a></li>\n<li><a href=\"/docs/configuration-options/#frontmatter_delimiter\"><code>frontmatter_delimiter</code></a></li>\n<li><a href=\"/docs/configuration-options/#slug\"><code>slug</code></a></li>\n<li><a href=\"/docs/configuration-options/#preview_path\"><code>preview_path</code></a></li>\n<li><a href=\"/docs/configuration-options/#preview_path_date_field\"><code>preview_path_date_field</code></a></li>\n<li><a href=\"/docs/configuration-options/#fields\"><code>fields</code></a></li>\n<li><a href=\"/docs/configuration-options/#editor\"><code>editor</code></a></li>\n<li><a href=\"/docs/configuration-options/#summary\"><code>summary</code></a></li>\n<li><a href=\"/docs/configuration-options/#sortablefields\"><code>sortableFields</code></a></li>\n</ul>\n</li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/widgets/"},"frontmatter":{"title":"Widgets","group":"reference"},"tableOfContents":"<ul>\n<li><a href=\"/docs/widgets/#common-widget-options\">Common widget options</a></li>\n<li><a href=\"/docs/widgets/#default-widgets\">Default widgets</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/beta-features/"},"frontmatter":{"title":"Beta Features!","group":"reference"},"tableOfContents":"<ul>\n<li><a href=\"/docs/beta-features/#working-with-a-local-git-repository\">Working with a Local Git Repository</a></li>\n<li><a href=\"/docs/beta-features/#gitlab-and-bitbucket-editorial-workflow-support\">GitLab and BitBucket Editorial Workflow Support</a></li>\n<li><a href=\"/docs/beta-features/#github-graphql-api\">GitHub GraphQL API</a></li>\n<li><a href=\"/docs/beta-features/#open-authoring\">Open Authoring</a></li>\n<li><a href=\"/docs/beta-features/#folder-collections-path\">Folder Collections Path</a></li>\n<li><a href=\"/docs/beta-features/#folder-collections-media-and-public-folder\">Folder Collections Media and Public Folder</a></li>\n<li>\n<p><a href=\"/docs/beta-features/#list-widget-variable-types\">List Widget: Variable Types</a></p>\n<ul>\n<li><a href=\"/docs/beta-features/#additional-list-widget-options\">Additional list widget options</a></li>\n<li><a href=\"/docs/beta-features/#example-configuration\">Example Configuration</a></li>\n<li><a href=\"/docs/beta-features/#example-output\">Example Output</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/beta-features/#custom-mount-element\">Custom Mount Element</a></li>\n<li><a href=\"/docs/beta-features/#manual-initialization\">Manual Initialization</a></li>\n<li><a href=\"/docs/beta-features/#raw-css-in-registerpreviewstyle\">Raw CSS in <code>registerPreviewStyle</code></a></li>\n<li><a href=\"/docs/beta-features/#squash-merge-github-pull-requests\">Squash merge GitHub pull requests</a></li>\n<li><a href=\"/docs/beta-features/#commit-message-templates\">Commit Message Templates</a></li>\n<li><a href=\"/docs/beta-features/#image-widget-file-size-limit\">Image widget file size limit</a></li>\n<li><a href=\"/docs/beta-features/#registering-to-cms-events\">Registering to CMS Events</a></li>\n<li><a href=\"/docs/beta-features/#dynamic-default-values\">Dynamic Default Values</a></li>\n</ul>"}}]},{"fieldValue":"start","edges":[{"node":{"fields":{"slug":"/docs/intro/"},"frontmatter":{"title":"Introduction","group":"start"},"tableOfContents":"<ul>\n<li><a href=\"/docs/intro/#netlify-cms-vs-netlify\">Netlify CMS vs. Netlify</a></li>\n<li><a href=\"/docs/intro/#find-out-more\">Find out more</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/start-with-a-template/"},"frontmatter":{"title":"Start with a Template","group":"start"},"tableOfContents":"<ul>\n<li><a href=\"/docs/start-with-a-template/#access-netlify-cms-on-your-new-site\">Access Netlify CMS on your new site</a></li>\n<li><a href=\"/docs/start-with-a-template/#more-paths-to-explore\">More paths to explore</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/add-to-your-site/"},"frontmatter":{"title":"Add to Your Site","group":"start"},"tableOfContents":"<ul>\n<li>\n<p><a href=\"/docs/add-to-your-site/#app-file-structure\">App File Structure</a></p>\n<ul>\n<li><a href=\"/docs/add-to-your-site/#installing-with-npm\">Installing with npm</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/add-to-your-site/#configuration\">Configuration</a></p>\n<ul>\n<li><a href=\"/docs/add-to-your-site/#backend\">Backend</a></li>\n<li><a href=\"/docs/add-to-your-site/#editorial-workflow\">Editorial Workflow</a></li>\n<li><a href=\"/docs/add-to-your-site/#media-and-public-folders\">Media and Public Folders</a></li>\n<li><a href=\"/docs/add-to-your-site/#collections\">Collections</a></li>\n<li><a href=\"/docs/add-to-your-site/#filter\">Filter</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"/docs/add-to-your-site/#authentication\">Authentication</a></p>\n<ul>\n<li><a href=\"/docs/add-to-your-site/#setup-on-netlify\">Setup on Netlify</a></li>\n<li><a href=\"/docs/add-to-your-site/#enable-identity-and-git-gateway\">Enable Identity and Git Gateway</a></li>\n<li><a href=\"/docs/add-to-your-site/#add-the-netlify-identity-widget\">Add the Netlify Identity Widget</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/add-to-your-site/#accessing-the-cms\">Accessing the CMS</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/collection-types/"},"frontmatter":{"title":"Collection Types","group":"start"},"tableOfContents":"<ul>\n<li>\n<p><a href=\"/docs/collection-types/#folder-collections\">Folder collections</a></p>\n<ul>\n<li><a href=\"/docs/collection-types/#filtered-folder-collections\">Filtered folder collections</a></li>\n</ul>\n</li>\n<li><a href=\"/docs/collection-types/#file-collections\">File collections</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/update-the-cms-version/"},"frontmatter":{"title":"Update the CMS Version","group":"start"},"tableOfContents":"<ul>\n<li><a href=\"/docs/update-the-cms-version/#package-manager\">Package Manager</a></li>\n<li><a href=\"/docs/update-the-cms-version/#cdn\">CDN</a></li>\n</ul>"}},{"node":{"fields":{"slug":"/docs/examples/"},"frontmatter":{"title":"Examples","group":"start"},"tableOfContents":""}}]}]},"menu":{"siteMetadata":{"menu":{"docs":[{"name":"start","title":"Quick Start"},{"name":"backends","title":"Backends"},{"name":"features","title":"Features"},{"name":"reference","title":"Reference"},{"name":"media","title":"Media"},{"name":"guides","title":"Guides"},{"name":"customization","title":"Customization"},{"name":"contributing","title":"Contributing"}]}}},"widgets":{"edges":[{"node":{"frontmatter":{"title":"boolean","label":"Boolean"},"html":"<p>The boolean widget translates a toggle switch input to a true/false value.</p>\n<ul>\n<li><strong>Name:</strong> <code>boolean</code></li>\n<li><strong>UI:</strong> toggle switch</li>\n<li><strong>Data type:</strong> boolean</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts <code>true</code> or <code>false</code>; defaults to <code>false</code> when <code>required</code> is set to <code>false</code></li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Draft\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"draft\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"boolean\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span><span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"code","label":"Code"},"html":"<p>The code widget provides a code editor (powered by <a href=\"https://codemirror.net\" target=\"_blank\" rel=\"noopener noreferrer\">Codemirror</a>) with optional syntax awareness. Can output the raw code value or an object with the selected language and the raw code value.</p>\n<ul>\n<li><strong>Name:</strong> <code>code</code></li>\n<li><strong>UI:</strong> code editor</li>\n<li><strong>Data type:</strong> string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default_language</code>: optional; default language to use</li>\n<li><code>allow_language_selection</code>: optional; defaults to <code>false</code>: allows syntax to be changed</li>\n<li><code>keys</code>: optional; sets key names for code and lang if outputting an object; defaults to <code>{ code: 'code', lang: 'lang' }</code></li>\n<li><code>output_code_only</code>: set to <code>true</code> to output the string value only, defaults to <code>false</code></li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'Code'</span>\n<span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'code'</span>\n<span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'code'</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"date","label":"Date"},"html":"<p><em><strong>Deprecation notice</strong>: the date widget has been deprecated and will be removed in the next major release. Please use the datetime widget instead.</em></p>\n<p>The date widget translates a date picker input to a date string. For saving date and time together, use the datetime widget.</p>\n<ul>\n<li><strong>Name:</strong> <code>date</code></li>\n<li><strong>UI:</strong> date picker</li>\n<li><strong>Data type:</strong> Moment.js-formatted date string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts a date string, or an empty string to accept blank input; otherwise defaults to current date</li>\n<li><code>format</code>: optional; accepts Moment.js <a href=\"https://momentjs.com/docs/#/parsing/string-format/\" target=\"_blank\" rel=\"noopener noreferrer\">tokens</a>; defaults to raw Date object (if supported by output format)</li>\n<li><code>dateFormat</code>: optional; boolean or Moment.js <a href=\"https://momentjs.com/docs/#/parsing/string-format/\" target=\"_blank\" rel=\"noopener noreferrer\">tokens</a>. If <code>true</code> use default locale format.</li>\n<li><code>timeFormat</code>: optional; boolean or Moment.js <a href=\"https://momentjs.com/docs/#/parsing/string-format/\" target=\"_blank\" rel=\"noopener noreferrer\">tokens</a>. If <code>true</code> use default locale format, <code>false</code> hides time-picker. Defaults to false.</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'Birthdate'</span>\n<span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'birthdate'</span>\n<span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'date'</span>\n<span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">''</span>\n<span class=\"token key atrule\">format</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'MMM Do YY'</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"datetime","label":"DateTime"},"html":"<p>The datetime widget translates a datetime picker to a datetime string. For saving the date only, use the date widget.</p>\n<ul>\n<li><strong>Name:</strong> <code>datetime</code></li>\n<li><strong>UI:</strong> datetime picker</li>\n<li><strong>Data type:</strong> Moment.js-formatted datetime string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts a datetime string, or an empty string to accept blank input; otherwise defaults to current datetime</li>\n<li><code>format</code>: sets storage format; accepts Moment.js <a href=\"https://momentjs.com/docs/#/parsing/string-format/\" target=\"_blank\" rel=\"noopener noreferrer\">tokens</a>; defaults to raw Date object (if supported by output format)</li>\n<li><code>dateFormat</code>: sets date display format in UI; boolean or Moment.js <a href=\"https://momentjs.com/docs/#/parsing/string-format/\" target=\"_blank\" rel=\"noopener noreferrer\">tokens</a>. If <code>true</code> use default locale format.</li>\n<li><code>timeFormat</code>: sets time display format in UI; boolean or Moment.js <a href=\"https://momentjs.com/docs/#/parsing/string-format/\" target=\"_blank\" rel=\"noopener noreferrer\">tokens</a>. If <code>true</code> use default locale format, <code>false</code> hides time-picker.</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Start time\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"start\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"datetime\"</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"\"</span>\n  <span class=\"token key atrule\">dateFormat</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"DD.MM.YYYY\"</span> <span class=\"token comment\"># e.g. 24.12.2021</span>\n  <span class=\"token key atrule\">timeFormat</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"HH:mm\"</span> <span class=\"token comment\"># e.g. 21:07</span>\n  <span class=\"token key atrule\">format</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"LLL\"</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"file","label":"File"},"html":"<p>The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string.</p>\n<ul>\n<li><strong>Name:</strong> <code>file</code></li>\n<li><strong>UI:</strong> file picker button opens media gallery</li>\n<li><strong>Data type:</strong> file path string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts a file path string; defaults to null</li>\n<li><code>media_library</code>: media library settings to apply when a media library is opened by the\ncurrent widget</li>\n<li><code>allow_multiple</code>: <em>(default: <code>true</code>)</em> when set to <code>false</code>, prevents multiple selection for any media library extension, but must be supported by the extension in use</li>\n<li><code>config</code>: a configuration object that will be passed directly to the media library being\nused - available options are determined by the library</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Manual PDF\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"manual_pdf\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"file\"</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"/uploads/general-manual.pdf\"</span>\n  <span class=\"token key atrule\">media_library</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">config</span><span class=\"token punctuation\">:</span>\n      <span class=\"token key atrule\">multiple</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"hidden","label":"Hidden"},"html":"<p>Hidden widgets do not display in the UI. In folder collections that allow users to create new items, you will often want to set a default for hidden fields, so they will be set without requiring an input.</p>\n<ul>\n<li><strong>Name:</strong> <code>hidden</code></li>\n<li><strong>UI:</strong> none</li>\n<li><strong>Data type:</strong> any valid data type</li>\n<li>\n<p><strong>Options:</strong> </p>\n<ul>\n<li><code>default</code>: accepts any valid data type; recommended for collections that allow adding new items</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Layout\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"layout\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"hidden\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"blog\"</span><span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"image","label":"Image"},"html":"<p>The image widget allows editors to upload an image or select an existing one from the media library. The path to the image file will be saved to the field as a string.</p>\n<ul>\n<li><strong>Name:</strong> <code>image</code></li>\n<li><strong>UI:</strong> file picker button opens media gallery allowing image files (jpg, jpeg, webp, gif, png, bmp, tiff, svg) only; displays selected image thumbnail</li>\n<li><strong>Data type:</strong> file path string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts a file path string; defaults to null</li>\n<li><code>media_library</code>: media library settings to apply when a media library is opened by the\ncurrent widget</li>\n<li><code>allow_multiple</code>: <em>(default: <code>true</code>)</em> when set to <code>false</code>, prevents multiple selection for any media library extension, but must be supported by the extension in use</li>\n<li><code>config</code>: a configuration object that will be passed directly to the media library being\nused - available options are determined by the library</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Featured Image\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"thumbnail\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"image\"</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"/uploads/chocolate-dogecoin.jpg\"</span>\n  <span class=\"token key atrule\">media_library</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">config</span><span class=\"token punctuation\">:</span>\n      <span class=\"token key atrule\">multiple</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"list","label":"List"},"html":"<p>The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. map a user-provided string with a comma delimiter into a list. You can choose any widget as a child of a list widget—even other lists.</p>\n<ul>\n<li><strong>Name:</strong> <code>list</code></li>\n<li><strong>UI:</strong> if <code>fields</code> is specified, field containing a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets; if unspecified, a text input for entering comma-separated values</li>\n<li><strong>Data type:</strong> list of widget values</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: if <code>fields</code> is specified, declare defaults on the child widgets; if not, you may specify a list of strings to populate the text field</li>\n<li><code>allow_add</code>: if added and labeled <code>false</code>, button to add additional widgets disappears</li>\n<li><code>collapsed</code>: if added and labeled <code>false</code>, the list widget's content does not collapse by default</li>\n<li><code>field</code>: a single widget field to be repeated</li>\n<li><code>fields</code>: a nested list of multiple widget fields to be included in each repeatable iteration</li>\n</ul>\n</li>\n<li>\n<p><strong>Example</strong> (<code>field</code>/<code>fields</code> not specified):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Tags\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"tags\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"list\"</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"news\"</span><span class=\"token punctuation\">]</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (<code>allow_add</code> marked <code>false</code>):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Tags\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"tags\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"list\"</span>\n  <span class=\"token key atrule\">allow_add</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">false</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"news\"</span><span class=\"token punctuation\">]</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (with <code>field</code>):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Gallery\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"galleryImages\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"list\"</span>\n  <span class=\"token key atrule\">field</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Image<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> image<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> image<span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (with <code>fields</code>):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Testimonials\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"testimonials\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"list\"</span>\n  <span class=\"token key atrule\">fields</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Quote<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> quote<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> string<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Everything is awesome!\"</span><span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Author\n      <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> author\n      <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> object\n      <span class=\"token key atrule\">fields</span><span class=\"token punctuation\">:</span>\n        <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Name<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> name<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> string<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Emmet\"</span><span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Avatar<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> avatar<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> image<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"/img/emmet.jpg\"</span><span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (<code>collapsed</code> marked <code>false</code>):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Testimonials\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"testimonials\"</span>\n  <span class=\"token key atrule\">collapsed</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">false</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"list\"</span>\n  <span class=\"token key atrule\">fields</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Quote<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> quote<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> string<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Everything is awesome!\"</span><span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> Author<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> author<span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> string <span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"map","label":"Map"},"html":"<p>The map widget allows you to edit spatial data using an interactive map. Spatial data is saved as a GeoJSON string in WGS84 projection and is limited to a single geometry.</p>\n<ul>\n<li><strong>Name:</strong> <code>map</code></li>\n<li><strong>UI:</strong> interactive map</li>\n<li><strong>Data type:</strong> GeoJSON string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>decimals</code>: accepts a number to specify precision of saved coordinates; defaults to 7 decimals</li>\n<li><code>default</code>: accepts a GeoJSON string containing a single geometry; defaults to an empty string</li>\n<li><code>type</code>: accepts one string value of <code>Point</code>, <code>LineString</code> or <code>Polygon</code>; defaults to <code>Point</code></li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Location\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"location\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"map\"</span> <span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"markdown","label":"Markdown"},"html":"<p>The markdown widget provides a full fledged text editor - which is based on <a href=\"https://github.com/ianstormtaylor/slate\" target=\"_blank\" rel=\"noopener noreferrer\">slate</a> - that allows users to format text with features such as headings and blockquotes. Users are also allowed to write in markdown by simply flipping a switch.</p>\n<p><em>Please note:</em> If you want to use your markdown editor to fill a markdown file contents after its frontmatter, you'll have to name the field <code>body</code> so the CMS recognizes it and saves the file accordingly.</p>\n<ul>\n<li><strong>Name:</strong> <code>markdown</code></li>\n<li><strong>UI:</strong> full text editor</li>\n<li><strong>Data type:</strong> markdown</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts markdown content</li>\n<li><code>minimal</code>: accepts a boolean value, <code>false</code> by default. Sets the widget height to minimum possible.</li>\n<li><code>buttons</code>: an array of strings representing the formatting buttons to display (all shown by default). Buttons include: <code>bold</code>, <code>italic</code>, <code>code</code>, <code>link</code>, <code>heading-one</code>, <code>heading-two</code>, <code>heading-three</code>, <code>heading-four</code>, <code>heading-five</code>, <code>heading-six</code>, <code>quote</code>, <code>bulleted-list</code>, and <code>numbered-list</code>.</li>\n<li><code>editorComponents</code>: an array of strings representing the names of editor components to display (all shown by default). The <code>image</code> and <code>code-block</code> editor components are included with Netlify CMS by default, but others may be <a href=\"/docs/custom-widgets/#registereditorcomponent\">created and registered</a>.</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'Blog post content'</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'body'</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'markdown'</span> <span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>\n<p>This would render as:</p>\n<p><img src=\"/img/widgets-markdown.png\" alt=\"Markdown widget example\"></p>\n<p><em>Please note:</em> The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.</p>"}},{"node":{"frontmatter":{"title":"number","label":"Number"},"html":"<p>The number widget uses an HTML number input, saving the value as a string, integer, or floating point number.</p>\n<ul>\n<li><strong>Name:</strong> <code>number</code></li>\n<li><strong>UI:</strong> HTML <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number\" target=\"_blank\" rel=\"noopener noreferrer\">number input</a></li>\n<li><strong>Data type:</strong> string by default; configured by <code>valueType</code> option</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts string or number value; defaults to empty string</li>\n<li><code>valueType</code>: accepts <code>int</code> or <code>float</code>; any other value results in saving as a string</li>\n<li><code>min</code>: accepts a number for minimum value accepted; unset by default</li>\n<li><code>max</code>: accepts a number for maximum value accepted; unset by default</li>\n<li><code>step</code>: accepts a number for stepping up/down values in the input; 1 by default</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Puppy Count\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"puppies\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"number\"</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token number\">2</span>\n  <span class=\"token key atrule\">valueType</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"int\"</span>\n  <span class=\"token key atrule\">min</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>\n  <span class=\"token key atrule\">max</span><span class=\"token punctuation\">:</span> <span class=\"token number\">101</span>\n  <span class=\"token key atrule\">step</span><span class=\"token punctuation\">:</span> <span class=\"token number\">2</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"object","label":"Object"},"html":"<p>The object widget allows you to group multiple widgets together, nested under a single field. You can choose any widget as a child of an object widget—even other objects.</p>\n<ul>\n<li><strong>Name:</strong> <code>object</code></li>\n<li><strong>UI:</strong> a field containing one or more child widgets</li>\n<li><strong>Data type:</strong> list of child widget values</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: you can set defaults within each sub-field's configuration</li>\n<li><code>fields</code>: (<strong>required</strong>) a nested list of widget fields to include in your widget</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Profile\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"profile\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"object\"</span>\n  <span class=\"token key atrule\">fields</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Public\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"public\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"boolean\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span><span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Name\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"name\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"string\"</span><span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Birthdate\"</span>\n      <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"birthdate\"</span>\n      <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"date\"</span>\n      <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"\"</span>\n      <span class=\"token key atrule\">format</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"MM/DD/YYYY\"</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Address\"</span>\n      <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"address\"</span>\n      <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"object\"</span>\n      <span class=\"token key atrule\">fields</span><span class=\"token punctuation\">:</span> \n        <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Street Address\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"street\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"string\"</span><span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"City\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"city\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"string\"</span><span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Postal Code\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"post-code\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"string\"</span><span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"relation","label":"Relation"},"html":"<p>The relation widget allows you to reference items from another collection. It provides a search input with a list of entries from the collection you're referencing, and the list automatically updates with matched entries based on what you've typed.</p>\n<ul>\n<li><strong>Name:</strong> <code>relation</code></li>\n<li><strong>UI:</strong> text input with search result dropdown</li>\n<li><strong>Data type:</strong> data type of the value pulled from the related collection item</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts any widget data type; defaults to an empty string</li>\n<li><code>collection</code>: (<strong>required</strong>) name of the collection being referenced (string)</li>\n<li><code>displayFields</code>: list of one or more names of fields in the referenced collection that will render in the autocomplete menu of the control. Defaults to <code>valueField</code>. For nested fields, separate each subfield with a <code>.</code> (E.g. <code>name.first</code>).</li>\n<li><code>searchFields</code>: (<strong>required</strong>) list of one or more names of fields in the referenced collection to search for the typed value. Syntax to reference nested fields is similar to that of <em>displayFields</em>.</li>\n<li><code>valueField</code>: (<strong>required</strong>) name of the field from the referenced collection whose value will be stored for the relation. Syntax to reference nested fields is similar to that of <em>displayFields</em> and <em>searchFields</em>. As <code>valueField</code> only allows for a single field, this parameter only accepts a string.</li>\n<li><code>multiple</code> : accepts a boolean, defaults to <code>false</code></li>\n<li><code>optionsLength</code>: accepts integer to override number of options presented to user. Defaults to <code>20</code>.</li>\n</ul>\n</li>\n<li>\n<p><strong>Example</strong> (assuming a separate \"authors\" collection with \"name\" and \"twitterHandle\" fields with subfields \"first\" and \"last\" for the \"name\" field):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Post Author\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"author\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"relation\"</span>\n  <span class=\"token key atrule\">collection</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"authors\"</span>\n  <span class=\"token key atrule\">searchFields</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"name.first\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"twitterHandle\"</span><span class=\"token punctuation\">]</span>\n  <span class=\"token key atrule\">valueField</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"name.first\"</span>\n  <span class=\"token key atrule\">displayFields</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"twitterHandle\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"followerCount\"</span><span class=\"token punctuation\">]</span></code></pre></div>\n<p>The generated UI input will search the authors collection by name and twitterHandle, and display each author's handle and follower count. On selection, the author name will be saved for the field.</p>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"select","label":"Select"},"html":"<p>The select widget allows you to pick a string value from a dropdown menu.</p>\n<ul>\n<li><strong>Name:</strong> <code>select</code></li>\n<li><strong>UI:</strong> select input</li>\n<li><strong>Data type:</strong> string or array</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li>\n<p><code>default</code>: default values must be contained in <code>options</code> and are ignored otherwise</p>\n<ul>\n<li>string values: accepts a string; defaults to an empty string. Accepts an array of strings and defaults to an empty array  with <code>multiple: true</code> enabled.</li>\n<li>object with <code>label</code> and <code>value</code> fields: accepts an object with <code>label</code> and <code>value</code> field or an array of such objects when <code>multiple: true</code> is enable. Defaults to no value</li>\n</ul>\n</li>\n<li>\n<p><code>options</code>: (<strong>required</strong>) a list of options for the dropdown menu; can be listed in two ways:</p>\n<ul>\n<li>string values: the label displayed in the dropdown is the value saved in the file</li>\n<li>object with <code>label</code> and <code>value</code> fields: the label displays in the dropdown; the value is saved in the file</li>\n</ul>\n</li>\n<li><code>multiple</code>: accepts a boolean; defaults to <code>false</code></li>\n<li><code>min</code>: minimum number of items; ignored if <strong>multiple</strong> is not <code>true</code></li>\n<li><code>max</code>: maximum number of items; ignored if <strong>multiple</strong> is not <code>true</code></li>\n</ul>\n</li>\n<li>\n<p><strong>Example</strong> (options as strings):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Align Content\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"align\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"select\"</span>\n  <span class=\"token key atrule\">options</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"left\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"center\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"right\"</span><span class=\"token punctuation\">]</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (options as objects):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"City\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"airport-code\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"select\"</span>\n  <span class=\"token key atrule\">options</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Chicago\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">value</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"ORD\"</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Paris\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">value</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"CDG\"</span> <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Tokyo\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">value</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"HND\"</span> <span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (multiple):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Tags\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"tags\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"select\"</span>\n  <span class=\"token key atrule\">multiple</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span>\n  <span class=\"token key atrule\">options</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"Design\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"UX\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Dev\"</span><span class=\"token punctuation\">]</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"Design\"</span><span class=\"token punctuation\">]</span></code></pre></div>\n</li>\n<li>\n<p><strong>Example</strong> (min/max):</p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Tags\"</span>\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"tags\"</span>\n  <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"select\"</span>\n  <span class=\"token key atrule\">multiple</span><span class=\"token punctuation\">:</span> <span class=\"token boolean important\">true</span>\n  <span class=\"token key atrule\">min</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>\n  <span class=\"token key atrule\">max</span><span class=\"token punctuation\">:</span> <span class=\"token number\">3</span>\n  <span class=\"token key atrule\">options</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"Design\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"UX\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Dev\"</span><span class=\"token punctuation\">]</span>\n  <span class=\"token key atrule\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"Design\"</span><span class=\"token punctuation\">]</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"string","label":"String"},"html":"<p>The string widget translates a basic text input to a string value. For larger textarea inputs, use the text widget.</p>\n<ul>\n<li><strong>Name:</strong> <code>string</code></li>\n<li><strong>UI:</strong> text input</li>\n<li><strong>Data type:</strong> string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts a string; defaults to an empty string</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Title\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"title\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"string\"</span><span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}},{"node":{"frontmatter":{"title":"text","label":"Text"},"html":"<p>The text widget takes a multiline text field and saves it as a string. For shorter text inputs, use the string widget.</p>\n<ul>\n<li><strong>Name:</strong> <code>text</code></li>\n<li><strong>UI:</strong> HTML textarea</li>\n<li><strong>Data type:</strong> string</li>\n<li>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>default</code>: accepts a string; defaults to an empty string</li>\n</ul>\n</li>\n<li>\n<p><strong>Example:</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token punctuation\">-</span> <span class=\"token punctuation\">{</span><span class=\"token key atrule\">label</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"Description\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"description\"</span><span class=\"token punctuation\">,</span> <span class=\"token key atrule\">widget</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"text\"</span><span class=\"token punctuation\">}</span></code></pre></div>\n</li>\n</ul>"}}]}},"pageContext":{"slug":"/docs/configuration-options/"}}}