A collection of ASP.NET Core components for optimizing the rendering and loading of script, style, and image assets on Kentico Xperience 13.0 sites
This package is compatible with ASP.NET Core 6.0+ applications or libraries integrated with Kentico Xperience 13.0.
-
Install the NuGet package in your ASP.NET Core project (or class library)
dotnet add package XperienceCommunity.HTMLTagPageBuilderComponents
-
Create an implementation of
IHTMLTagsRetrieverwhich should useIPageRetrieverto get either global HTML tag page content or a specific HTML tag page's content to display on the site:public class : MyHTMLTagsRetreiver : IHTMLTagsRetriever { private readonly IPageRetriever pageRetriever; public MyHTMLTagsRetriever(IPageRetriever pageRetriever) => this.pageRetriever = pageRetriever; public async Task<GlobalTags> RetrieveGlobalTags(CancellationToken cancellationToken = default) { var pages = await pageRetriever.RetrieveAsync<GlobalTagsContent>(); if (!pages.Any()) { throw new Exception("..."); } return pages.Select(p => new GlobalTags(...)).Single(); } public async Task<AdvancedHTMLTag> RetrieveAdvancedTag(Guid nodeGUID, CancellationToken cancellationToken = default) { var pages = await pageRetriever.RetrieveAsync<HTMLTagContent>(q => q.WhereEquals(nameof(TreeNode.NodeGUID), nodeGUID)); if (!pages.Any()) { throw new Exception("..."); } return pages.Select(p => new AdvancedHTMLTag(...)).Single(); } }
-
Call the
IServiceCollectionextension to register all the library's services:services.AddHTMLTagPageBuilderComponents<MyHTMLTagsRetreiver>();
-
Add the HTML Tag View Components to the main areas of your Layout:
<!DOCTYPE html> <html lang="en"> <head id="head"> <vc:page-html-tag-resource-hints /> <vc:page-html-tags render-location="HeadStart" /> <!-- ... --> <vc:page-html-tags render-location="HeadEnd" /> </head> <body> <vc:page-html-tags render-location="AfterBodyStart" /> <!-- ... -> @RenderBody() <!-- ... -> <vc:page-html-tags render-location="BeforeBodyEnd" /> </body> </html>
If you have an image added to a page programmatically, or through a Widget, you can use the IHTMLTagDataStore to store an Image file path which will have a resource hint added to the <head>:
void AddImageLinkPreload(IHTMLTagDataStore store, string imagePath)
{
string tag = new HTMLTagData(
PageRenderLocation.None,
HTMLTagType.ImageFile,
imagePath);
store.StoreTagData(tag);
}In the <head> where you add <vc:page-html-tag-resource-hints />, the following will be rendered:
<link rel="preload" as="image" href="/path/to/your/image.jpg" />
When using a Widget, you could provide a Widget Property that toggles whether or not this image has a preload hint.
With a single Page in the content tree that stores global HTML tags (ex: Marketing Tags, Analytics scripts) you can
map the fields of that content to various locations on the page automatically with the <vc:page-html-tags /> View Component.
If your Page Type has a "Before Body End" field, that would be rendered at the bottom of the Layout using the following:
<vc:page-html-tags render-location="BeforeBodyEnd" />TODO
If you discover a problem, please open an issue.
If you would like contribute to the code or documentation, please open a pull request.