.png?fit=max&auto=format&n=AyzhRn9-CO-nDNc4&q=85&s=63c78e2325701880237e6cbce1399c2a)
.png?fit=max&auto=format&n=AyzhRn9-CO-nDNc4&q=85&s=0db283df6e4d31745079d6d03fd029ed)
related-tags section renders a row of clickable topic chips beneath a post. It uses two collection references: item resolves to the current route’s Post object (which carries an array of tag references), and tags provides the full tags collection as a lookup map. At render time, the section resolves each tag key in item.tags against the tags map and renders one chip per matched tag — each linking to that tag’s page.
Use related-tags on posts/[slug] pages, placed directly below the Post Detail section.
Data fields
Post
required
A collection reference that resolves to the current route’s
Post object. In your page JSON, set this to { "$ref": "collection:current" }. The section reads the resolved post’s tags array to determine which chips to render.Record<string, Tag>
required
A reference to the full tags collection, provided as a string-keyed map of
Tag objects. In your page JSON, set this to { "$ref": "../../collections/tags/tags.json" }. The section uses this map to look up each tag referenced in item.tags and to construct navigation hrefs.string
Optional heading rendered above the chips row — for example
"Relations demo". When omitted, no label is shown.string
Optional secondary title rendered below
label — for example "Filed under". Rendered with lighter typographic weight than label.string
Optional message displayed when the current post has no tags — for example
"This post has no topics yet.". When omitted and the post has no tags, the section renders nothing.Relation model
The post-to-tag relation is stored on the post side only. Each post’stags array holds references to tag entries. The tag record itself carries no posts field — the Related Tags section reads the forward relation from the post and renders the result.
Settings fields
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied above the section.
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied below the section.
JSON example
The following example is taken fromposts/[slug].json:
collection:current to the post for the current route and the $ref path to the full tags collection before passing both to the section. The component then filters and renders chips for each matching tag.
Typical page usage
Placerelated-tags immediately after Post Detail on the posts/[slug] page. Both sections share the same collection:current post reference, so no extra configuration is needed to connect them.