4
votes

Comment définir le titre de la page dans Blazor?

Comme Blazor est un framework SPA, j'aimerais savoir est-il possible de définir un titre de page pour chaque page individuelle dans Blazor?

Je travaille actuellement sur le projet d'assemblage Web Blazor et je ne parviens pas à trouver un moyen d'ajouter un titre de page car il n'y a qu'un seul index.html comme il se doit dans SPA, mais ce serait vraiment utile s'il était possible de définir un titre pour chaque "page".

blazor

0 commentaires

4 Réponses :

10
votes

Fournissez le script suivant dans votre index.html (ou dans un fichier .js inclus):

@code
{
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      await JSRuntime.InvokeVoidAsync("setTitle", "this is the new title"); ;        
   }    
}

Dans chaque page, injectez le jsinterop:
```
@inject IJSRuntime JSRuntime;
```
Après chaque rendu, définissez le titre du document sur la valeur de votre choix:
```
<script>
     setTitle = (title) => { document.title = title; };
</script>
```

6 commentaires

L'EDI peut se plaindre de ne pas pouvoir trouver IJSRuntime . Essayez de construire et d'exécuter de toute façon, ce n'est qu'un problème IDE.

InvokeVoidAsync ne doit être appelé qu'une seule fois, lorsque la valeur de firstRender est true. Le code ci-dessus est exécuté à chaque fois qu'OnAfterRenderAsync se produit.

@enet: C'est correct, mais le code ci-dessus provient d'un cas d'utilisation où le corps principal de ma page se compose de différents composants qui sont échangés et où je veux que le titre de la page reflète le composant qui est réellement affiché. En exécutant ce code sur chaque 'OnAfterRenderAsync', je m'assure que le titre est mis à jour chaque fois que le composant principal a changé.

Comment pouvons-nous le rendre convivial pour le référencement? Les robots d'exploration verront le titre de la page AVANT les chnages javascript

Débutant ici, je ne trouve pas d'index.html dans Blazor. Dois-je créer? Si oui, où créer le fichier?

@CBBSpike: Cet exemple a été écrit pour une version préliminaire de Blazor (côté serveur). Vous pouvez ajouter le script à _Host.cshtml à la place (par exemple juste après le script blazor.js).

1
votes

Félicitations à cet article , vous pouvez créer un composant réutilisable.

Ajoutez le script ci-dessous à un fichier js ou ajoutez à index.html

<PageTitle Title="Home sweet home" />

Dans le dossier partagé, créez un nouveau composant PageTitle.razor

@inject IJSRuntime JsRuntime;

@code {
    [Parameter]
    public string Title { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await SetTitle();
    }

    private async Task SetTitle()
    {
        await JsRuntime.InvokeVoidAsync("setTitle", Title);
    }
}

Ajoutez à la page du rasoir dont vous souhaitez modifier le nom:

<!DOCTYPE html>
<html>

<head>
...
</head>

<body>
...
    <script>
        window.setTitle = (title) => {
            document.title = title;
        }
    </script>
</body>

</html>

0 commentaires

3
votes

À partir d' ASP.NET CORE 5.0 , la documentation officielle indique que nous pouvons facilement influencer les éléments de balise HTML <head> en utilisant le composant Title .

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

<Title Value="{TITLE}" />

Mise à jour 1:

Il semble que cette API a été suspendue pour continuer à s'améliorer. Cela a été supprimé du lien de documentation officiel. Voici le problème github qui suit la même chose. Je mettrai à jour la réponse une fois que l'API sera enfin disponible dans la documentation.

0 commentaires

5
votes

Dans ASP.NET CORE 5.0, un nouveau composant pour Title est ajouté

<Title Value="My page title" />

Référence Msdn: https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/additional-scenarios?view=aspnetcore-5.0#influence-html-head-tag-elements

Ajoutez d'abord l'instruction using dans le composant

dotnet add package Microsoft.AspNetCore.Components.Web.Extensions --version 5.0.0-preview9.20467.1

Vous pouvez installer (s'il n'est pas installé) à l'aide de la commande.

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

5.0.0-preview9.20467.1 est la version au moment où j'écris ceci. Veuillez vérifier l'URL du nuget pour la dernière version

URL du Nuget: https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions/

Ajoutez ensuite la balise Title.

 <Title value="Page title" />

Voir l'exemple d'image de sortie ci-dessous

0 commentaires