如何将Blazor默认模板中顶部栏可点击区域限制为仅用户名文本

默认Blazor模板中，登录后的顶部栏（top-row）会把整个行区域包裹在<a>标签内，导致点击顶部栏任意位置都会跳转至个人资料页。要将可点击范围限定为用户名文本，只需调整布局文件的结构并补充样式：

1. 修改布局/组件代码 #

场景一：直接修改MainLayout.razor #

找到Shared/MainLayout.razor中顶部栏的代码块，将原有的整行<a>标签拆分为普通文本+仅包裹用户名的<a>标签：

<div class="top-row px-4 auth">
    <span>欢迎回来，</span>
    <a href="authentication/profile" class="username-link">@context.User.Identity?.Name</a>
</div>

场景二：修改LoginDisplay.razor组件 #

如果用户信息是通过Shared/LoginDisplay.razor组件渲染的，调整该组件内容：

<AuthorizeView>
    <Authorized>
        <span>Hello, </span>
        <a href="authentication/profile" class="username-link">@context.User.Identity?.Name!</a>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

2. 添加CSS样式限制点击区域 #

在wwwroot/css/site.css中补充以下样式，确保<a>标签仅占文本范围，不拉伸至整行：

.top-row.auth {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 可选：增加普通文本与用户名的间距 */
}

.username-link {
    color: inherit; /* 继承原有文本颜色，保持样式统一 */
    text-decoration: underline; /* 可选：添加下划线提示可点击 */
    white-space: nowrap; /* 防止用户名过长换行 */
}

.username-link:hover {
    color: #007bff; /* 替换为你需要的hover颜色 */
}

修改完成后，只有用户名文本区域点击会触发跳转，顶部栏其他区域不再响应点击事件。

内容的提问来源于stack exchange，提问作者CageE