Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement
Head element support (change the document title, "meta" elements such as OGP, and "link" elements) for Blazor apps.
https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement
blazor head meta ogp ogp-meta title
Last synced: about 2 months ago
JSON representation
Head element support (change the document title, "meta" elements such as OGP, and "link" elements) for Blazor apps.
- Host: GitHub
- URL: https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement
- Owner: jsakamoto
- License: mpl-2.0
- Created: 2019-09-12T14:30:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-09T21:14:48.000Z (2 months ago)
- Last Synced: 2024-07-28T16:10:09.030Z (about 2 months ago)
- Topics: blazor, head, meta, ogp, ogp-meta, title
- Language: C#
- Homepage: https://demo-blazor-headelement.azurewebsites.net/
- Size: 1.04 MB
- Stars: 158
- Watchers: 7
- Forks: 11
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Head Element Helper -   `<Title>` and `<Meta>` components for changing the document titile and meta elements, with server-side prerendering support for SEO/OGP. ([Demo](https://demo-blazor-headelement.azurewebsites.net/)). (Libraries & Extensions / 2D/3D Rendering engines)
README
# Blazor Head Element Helper [](https://www.nuget.org/packages/Toolbelt.Blazor.HeadElement/)
## Summary
This components and services allows you to **change the title of document, "meta" elements such as OGP, and "link" elements such as canonical url, favicon etc. on your Blazor app**.
This package supports both seiver-side Blazor and client-side Blazor WebAssembly app.
And also supports server-side pre-rendering on your server-side Blazor app.
See also following the live demonstration sites.
- [Blazor WebAssembly (Client-side Blazor) edition](https://demo-blazor-headelement-wasm.azurewebsites.net/)
- [Blazor Server (Server-side Blazor) edition](https://demo-blazor-headelement.azurewebsites.net/)
### Notice
Blazor on .NET 6 (since preview 7) or later has started to provide `` and `` components.
_["ASP.NET Core updates in .NET 6 Preview 7 - Modify HTML `` content from Blazor components" | ASP.NET Blog](https://j.mp/3zJ9mWD)_
However, I'm going to continue to provide this package and keep maintaining, because this library still has a few advantages in some edge cases.
Please see the following table to know the differences between this library and ``/`` components in .NET 6 or later.
Feature | This library | .NET6 or later
--------------------------------------|-------------------------|--------------------------------------------
Overriding pre-rendered meta or link | 👍 Can handle it properly. | 😢 Just append it. it may cause duplication.
Canceling `` | 👍 Works well. | 😢 There is no support.
Using it as a service, not components | 👍 Supported. | 😢 Maybe not Supported.
Modify `` content from many places | 👍 Can do. | 😢 Only one instance of the `` component can effect.
Server-side pre-rendering | 👍 Just add one line inside the server code. | 😢 You have to split the fallback page into two .cshtml files for resolving complicated rendering order problems.
Controlling the order of elements inside a `` | 😢 hard | 👍 Can control perfectly
Support | 😢 Just personal hobby | 👍 Official support from the ASP.NET Team
## How to use
### Installation
1. Add package to your project like this.
```shell
dotnet add package Toolbelt.Blazor.HeadElement
```
2. Register "Head Element Helper" service at your Blazor app's `Startup`.
```csharp
using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddHeadElementHelper(); // <- Add this.
...
```
If the project is Blazor WebAssembly App v.3.2+, you should do it in `Program` class, instead.
```csharp
using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
...
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
...
builder.Services.AddHeadElementHelper(); // <- Add this.
...
```
3. Open `Toolbelt.Blazor.HeadElement` namespace in `_Imports.razor` file.
```
@* This is "_Imports.razor" *@
...
@using Toolbelt.Blazor.HeadElement
```
### A. Change the title of the document
3. Markup `` component in your .razor file.
```html
@* This is "Pages/Counter.razor" *@
@page "/counter"
Counter(@currentCount) - Server Side App
```
The title of document will be changed.
### B. Change "meta" elements
You can also add or override "meta" elements at runtime dynamically using `` component like this.
```html
@* This is "Pages/Counter.razor" *@
@page "/counter"
```
_**Note:**_ You can also use native attribute names (lower and kebab case. ex: "http-equiv") instead of Razor component parameter names (pascal case).
### C. Change "link" elements
You can add or override "link" elements at runtime dynamically using `` component like this.
```html
@* This is "Pages/Counter.razor" *@
@page "/counter"
```
_**Note:**_ You can also use native attribute names (lower and kebab case) instead of Razor component parameter names (pascal case).
### D. IHeadElementHelper
You can do these tasks by using `IHeadElementHelper` service instead of using ``, ``, and `` components.
You can get the `IHeadElementHelper` service instnace by "Dependency Injection" mechanism.
```csharp
@inject IHeadElementHelper HeadElementHelper
@using static Toolbelt.Blazor.HeadElement.MetaElement
...
@code {
protected override async Task OnInitializedAsync()
{
await HeadElementHelper.SetTitleAsync("Wow!");
await HeadElementHelper.SetMetaElementsAsync(
ByName("description", "Foo bar..."),
ByProp("og:title", "WoW!")
);
await HeadElementHelper.SetLinkElementsAsync(
new LinkElement("canonical", "https://foo.com/bar")
);
...
```
## Server-side pre-rendering support
If you want to get srever-side pre-rendering support, do this.
1. Add `Toolbelt.Blazor.HeadElement.ServerPrerendering` package to your project like this.
```shell
dotnet add package Toolbelt.Blazor.HeadElement.ServerPrerendering
```
2. Register "Head Element Server Prerendering" middleware at your server-side Blazor app's `Startup`, before `app.UseStaticFiles()`.
```csharp
using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
...
public class Startup
{
...
public void ConfigureServices(IServiceCollection services)
{
services.AddHeadElementHelper(); //