如何在 Flexdashboard 导航栏菜单中转义单引号？

Question

我正在使用 R markdown 创建一个 flexdashboard。我在我的一个导航栏菜单的标题中转义单引号时遇到困难。

我希望我的菜单标题包含一个单引号，并尝试使用 {data-navmenu="The Joneses\' House"} 将其转义。如果我编写该代码，则不会出现 The Joneses' House 的导航栏菜单。如果我删除反斜杠和撇号 (') 并编织，菜单将出现（但当然没有撇号）。

我已将我的代码包含在 YAML 中。在此代码中，菜单不会出现在仪表板中。我怎样才能使菜单标题包含一个撇号？谢谢。

---
title: "Sample Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

Bedroom {data-navmenu="The Joneses\' House"}
=====================================

Answer 1

我有一个修复程序，但这不是逃避。

我相信除了 JS 之外，您将无能为力。 flexdashboard 使用导航选项卡名称作为 HTML 元素的 ID。 HTML 元素 ID 不能包含特殊字符。

我的变通方法似乎不想只使用这段稀疏的代码。但是，一旦我添加了另一个选项卡、一些 R 代码或其他任何东西，它就可以正常工作了。

我使用 JQuery 在您呈现页面后更改导航栏文本。您可以将带有 engine='js' 的 fixit 块放在脚本中的任何位置。不要忘记文本字符串 ("House ") 末尾的 space。这是编译页面时 flexdashboard 所采取步骤的一部分。

密码

已更新；我显然丢失了下拉箭头

---
title: "Sample Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---


Bedroom {data-navmenu='The Joneses House'}
=====================================

More info...



Bath {data-navmenu='The Other House'}
=====================================


```{r fixit, engine="js", results="asis"}

setTimeout(function(){ 
  tx = $('#TheJonesesHouse > a').html();
  tx = tx.replace("Joneses", "Joneses'");
  $('#TheJonesesHouse > a').html(tx);
}, 200); // for loading time

```

从查看器窗格（更新）：

从我的浏览器（更新）：

如何在 Flexdashboard 导航栏菜单中转义单引号？

How to escape single quote in Flexdashboard Navbar Menu?

css

r

r-markdown

flexdashboard

已更新；我显然丢失了下拉箭头