Tags Field
Options
- General
- Label — the human-friendly label shown above the input field in the editor.
- Name — the key stored in your content’s front matter, used to access it in your templates.
- Description — a human friendly description of what the field does and/or instructions for your editors.
- Hidden — hides the field in the editor, but allows developers to set default values or maintain the field for legacy purposes.
- Default — supply a default list of tags
Templating
You can access this field in your templates using the field’s name
:
Hugo
<p>{{ delimit .Params.tags ", " }}</p>
Display a comma delimited string using the
delimit
filter.
<h2>Tags:</h2>
<ul>
{{ range .Params.tags }}
<li>{{ . }}</li>
{{ end }}
</ul>
Jekyll
<p>{{ page.tags | array_to_sentence_string }}</p>
Display a comma delimited string using the
array_to_sentence_string
filter
<h2>Tags:</h2>
<ul>
{% for tag in page.tags %}
<li>{{ tag }}</li>
{% endfor %}
</ul>
VuePress
<template>
<p>{{ $page.frontmatter.categories.join(', ') }}</p>
</template>
Display a comma delimited string using the
v-for
and v-text
attributes.
<template>
<h2>Tags:</h2>
<ul>
<li v-for="category in $page.frontmatter.categories"
v-text="category" />
</ul>
</template>
Config Files
You can configure this field in Front Matter Template Config Files as follows:
type: tag_list
name: [String]
label: [String]
description: [String]
hidden: [true|false]
default:
- [String]
Example
type: tag_list
name: ssg
label: Static Site Generator
description: Pickup your tool
default:
- Eleventy
- Gatsby
- Gridsome
- Hexo
- Hugo
- Jekyll
- NextJS
- NuxtJS
- Sapper
June 11, 2020
Caught a mistake or want to contribute to the docs? Edit this page on Github!