DT包使用hugo-future-imperfect主题不能使用blogdown

Question

我有一个基于hugo-future-imperfect主题的博客网站，其中在rmd中正确创建了DT输出，但在应用serve_site / build_site

时未显示数据（尽管标题为）

我创建了两个全新的网站（因此没有其他复杂情况）来说明问题。这是代码和输出

```{r DT}
library(DT)
library(tidyverse)

iris %>% 
  datatable()
```

a）默认主题

b）hugo-imperfect

Answer 1

从https://owi.usgs.gov/blog/leaflet/和https://github.com/rstudio/blogdown/issues/20，答案是在iframe中显示输出。所以：

将输出绑定到代码中的变量，不显示此块的输出：

```{r, message=FALSE, warning=FALSE, include=FALSE}
library(DT)
library(tidyverse)

d1 <- iris %>% 
  datatable()

d1

```

在下一个块中，将窗口小部件保存到单独的文件中（隐藏代码和输出）。

```{r, message=FALSE, warning=FALSE, include=FALSE}
library(htmlwidgets)
library(htmltools)

htmlwidgets::saveWidget(d1, file = "d1.html", selfcontained = TRUE)

```

窗口小部件不会保存为d1.html，而是创建文件夹d1并在文件夹中创建文件index.html。您需要从iframe标记（代码块之外）

引用此索引文件

<iframe seamless src="../d1/index.html" width="100%" height="500"></iframe>

您应该会在页面中看到此iframe的输出。

这不是一个很好的解决方法。希望这个问题很快就会在rblogdown中得到解决。

Answer 2

除了MrHopko上面的答案，你可以在你的主题中破解数据表支持。今天早上我刚刚破解了我的hugo主题以支持数据表。

在我的示例中，您将直接在主题中进行更改，但可以使用覆盖机制。

您可以运行DT::saveWidget(d1, "temp.html", selfcontained = FALSE)一次以生成必要的库。然后将“temp_files / *”复制到“themes / your-theme / static / lib”

这将复制几个JavaScript库。然后，您需要在主题中引用它们。然后你需要将库引入你的部分。然后，您需要将“temp.html”中的依赖项复制到其关联的部分中。

然后您需要设置它，以便您的帖子加载这些依赖项。在我的情况下，我需要将<script>标签放入“themes / my-theme / layouts / partials / scripts.html”，将<link rel="stylesheet" ...>标签放入“themes / my-theme / layouts / partials /” head.html”。

在我的情况下，我补充道：

<link href="{{ "lib/datatables-css-0.0.0/datatables-crosstalk.css" | relURL }}" rel="stylesheet">
<link href="{{ "lib/dt-core-1.10.16/css/jquery.dataTables.min.css" | relURL }}" rel="stylesheet">
<link href="{{ "lib/dt-core-1.10.16/css/jquery.dataTables.extra.css" | relURL }}" rel="stylesheet">
<link href="{{ "lib/crosstalk-1.0.0/css/crosstalk.css" | relURL }}" rel="stylesheet">

到head.html和

<script src="{{ "lib/htmlwidgets-1.0/htmlwidgets.js" | relURL }}"></script>
<script src="{{ "lib/jquery-1.12.4/jquery.min.js" | relURL }}"></script>
<script src="{{ "lib/datatables-binding-0.4/datatables.js" | relURL }}"></script>
<script src="{{ "lib/dt-core-1.10.16/js/jquery.dataTables.min.js" | relURL }}"></script> 
<script src="{{ "lib/crosstalk-1.0.0/js/crosstalk.min.js" | relURL }}"></script> 

到scripts.html

之后

```{r, results = "asis"}
DT::datatable(d1)
```

应该工作。

Answer 3

您可以使用软件包widgetframe。

安装软件包并将数据表保存在变量中。

install.packages("widgetframe")

ts <- iris %>% DT::datatable()

因此，当您要显示数据表时，只需执行以下操作：

widgetframe::frameWidget(ts)

对我有用！