Using Normal Blazor Pages In ZauberCMS
YodasMyDad
14 days ago
One of the cool things about ZauberCMS, is under the hood, it's just Blazor. Meaning, you can add standard Blazor pages and component to your site and render them with a @page url like any other Blazor project.
I have done just that in this blog. Instead of creating a Tags ContentType and an associated Tags ContentView, I have just created a standalone Blazor page and still displayed Content from the CMS in it. I can also use the MainLayout the CMS ContentViews use, because, as I keep saying, it's just Blazor.
Code is below, and super simple. No virtual pages or other hacks to get standard pages to show.
@layout MainLayout
@page "/t/{TagSlug}"
@using System.Web
@using ZauberCMS.Core.Content.Commands
@using ZauberCMS.Core.Shared.Models
@using ZauberCMS.Core.Membership.Models
@using Lee.Components.Layout
<PageTitle>Posts Tagged With @HttpUtility.HtmlEncode(TagSlug)</PageTitle>
<div class="p-6 mx-auto border bg-white rounded -mt-8 max-w-3xl">
<Avatar/>
<div>Showing posts tagged with <span class="font-semibold">@HttpUtility.HtmlEncode(TagSlug)</span></div>
@if (!BlogPages.Items.Any())
{
<p>There are no posts to show</p>
}
</div>
@foreach (var post in BlogPages.Items)
{
<BlogItem Post="post" Users="Users"/>
}
@code {
[Parameter] public string TagSlug { get; set; } = string.Empty;
private int CurrentPage { get; set; } = 1;
private PaginatedList<Content> BlogPages { get; set; } = new();
private Dictionary<Guid, User> Users { get; set; } = new();
protected override async Task OnInitializedAsync()
{
var queryCommand = new QueryContentCommand
{
TagSlugs = [TagSlug],
AmountPerPage = 6,
OrderBy = GetContentsOrderBy.DateCreatedDescending
};
if (NavigationManager.TryGetQueryString<int>("p", out var page))
{
queryCommand.PageIndex = page;
CurrentPage = page;
}
BlogPages = await Mediator.Send(queryCommand);
foreach (var blogPage in BlogPages.Items)
{
var user = await Mediator.GetUser(blogPage.LastUpdatedById);
Users.TryAdd(blogPage.LastUpdatedById, user);
}
}
}