如何修改Sitefinity 10.2响应式导航小部件的汉堡菜单文本？

我之前在Sitefinity 10.2里碰到过一模一样的问题！折腾了好一阵才找到几个靠谱的解决办法，分享给你：

方案一：全局修改（所有Navigation小部件生效） #

适合需要统一替换所有汉堡菜单文本的场景：

• 打开项目根目录下的App_GlobalResources文件夹，找到NavigationResources.resx（英文环境）或对应语言的资源文件（比如中文的NavigationResources.zh-CN.resx）
• 打开资源文件，找到键名为Menu的条目，将其值修改为你想要的文本（例如“导航”“菜单按钮”等）
• 保存文件后重启站点，所有响应式汉堡菜单的文本都会自动更新

方案二：修改特定Navigation小部件的模板 #

如果只想修改某个特定小部件的汉堡文本，用这个方法：

• 进入Sitefinity后台，找到目标Navigation小部件并点击「编辑」
• 切换到「模板」标签页，点击「创建自定义模板」（若已有自定义模板，直接编辑即可）
• 在模板代码中，找到类似 <span class="sfNavHamburgerText">menu</span> 的代码行，将menu替换为你的自定义文本
• 保存模板并发布，该小部件的汉堡菜单就会显示新文本

方案三：CSS伪元素快速替换（无需修改后台） #

适合临时修改或不想动后台配置的场景：

• 在主题的样式文件中，或页面的「自定义CSS」区域添加以下代码：

.sfNavHamburgerText {
    visibility: hidden;
    position: relative;
}
.sfNavHamburgerText::after {
    content: "你的自定义文本"; /* 替换成你想要的内容 */
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
}

• 保存后刷新页面，汉堡菜单的文本就会被替换

方案四：JavaScript动态修改（适合动态场景） #

如果需要根据页面或用户状态动态更改文本，可以用JS实现：

• 在页面的「自定义脚本」区域或主题的JS文件中添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    // 找到所有汉堡菜单文本元素
    const hamburgerElements = document.querySelectorAll('.sfNavHamburgerText');
    hamburgerElements.forEach(el => {
        el.textContent = "你的自定义文本"; // 替换成目标文本
    });
});

• 这段脚本会在页面加载完成后自动替换所有汉堡菜单的文本

这些方法我在10.2版本里都测试过，都能正常生效。根据你的需求选最合适的就行~

内容的提问来源于stack exchange，提问作者Udo E.