TagCloud

TagCloud renders a wrapping row of tag links, each with the number of items that carry the tag. It loads the tags from the default content provider, or shows the tags you pass. Every tag is drawn at the same size; the component does not scale tags by count.

Package Osirion.Blazor.Cms.Web, namespace Osirion.Blazor.Cms.Web.Components. Source on GitHub.

@using Osirion.Blazor.Cms.Web.Components

@* The tags come from this site's own content, so the names and counts are real *@
<TagCloud Title="Tags" MaxTags="12" />

The demo shows the twelve most used tags of this site's own content.

Usage

@using Osirion.Blazor.Cms.Web.Components

<TagCloud Title="Tags" MaxTags="20" />

A tag page that keeps the tag name in the query string:

@page "/tags"
@using Osirion.Blazor.Cms.Web.Components

<TagCloud Title="Tags"
          ActiveTag="@Tag"
          TagUrlFormatter="@(tag => $"/tags?tag={Uri.EscapeDataString(tag.Name)}")" />

@if (!string.IsNullOrWhiteSpace(Tag))
{
    <ContentList Tag="@Tag" />
}

@code {
    [SupplyParameterFromQuery(Name = "tag")]
    public string? Tag { get; set; }
}

ContentList passes Tag to the content query, which matches a tag by its name or by its slug, ignoring case. The default /tag/{slug} links therefore work with a route that takes the slug, and a formatter like the one above works with the name.

Parameters

Class goes on the outer div. Style and Theme are accepted but not written, and other attributes on the tag are captured but not rendered.

Behavior

• Loaded tags come from the tags front matter of every item the default provider holds, across all locales and including unpublished items. Names that differ only in case count as one tag.
• MaxTags and SortByCount apply only to tags the component loads; tags you pass in Tags are shown as given.
• The loaded tags are kept inside the component, not in Tags, so changing MaxTags or SortByCount later shows the new limit or order, and tags you pass in Tags win over loaded ones for as long as the list is not empty.
• Under static SSR the response is sent with the finished list, and the loading text is never rendered.
• With no default provider registered, or when the provider throws, NoContentText is shown. A provider error is logged through ILogger; its details never reach the page.
• Links carry rel="nofollow". Tag names are written as text, so they are HTML-encoded.
• The current tag is marked with a class only, not with aria-current.

Styling

Tag colors use --osirion-tag-background-color, --osirion-tag-text-color and --osirion-tag-hover-background-color, which fall back to the theme's background and text tokens. The active tag uses --osirion-action-primary and --osirion-action-primary-text.

Related

• CategoriesList, the same idea for categories
• Content List, for the tag page itself
• CMS navigation components