DT包在使用hugo-future-imperfect主题的blogdown中无法正常工作

Question

我有一个基于hugo-future-imperfect主题的blogdown网站，其中在rmd中正确创建了DT输出，但是当应用serve_site/build_site时，数据不会显示（尽管标题会显示）。

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

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

iris %>% 
  datatable()
```

a) 默认主题

b) Hugo Imperfect主题

- pssguy

---

我在使用Hugo Academic时遇到了同样的问题，仍在寻找解决方案。 - MrHopko

Answer 1

你可以使用包widgetframe。

安装该包后，将您的数据表保存在一个变量中。

install.packages("widgetframe")

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

所以当你想要展示数据表时，只需要这样做：

widgetframe::frameWidget(ts)

对我来说没问题！

- igorkf

Answer 2

根据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中很快得到解决。

- MrHopko

---

非常感谢。有几个要点。我认为应该是src =“../ d1 / index.html”。此外，我发现将所有代码合并到一个块中（不包括d1行）就足够了。分割它的原因是什么？希望能解决这个问题或至少得到需要这种hack的主题和小部件列表。 - pssguy

好的，你发现了笔误。我已经将其编辑掉了。将代码分成不同的块的原因是您可能不希望读者看到包含小部件保存的块，因为这不是您正在展示的示例的一部分。我想这并不总是情况，只是一个选项。 - MrHopko

那么这是一个不好的点（呻吟声）和一个好的点，谢谢再次非常有帮助。 - pssguy

同样的问题，同样的主题。这似乎对帖子本身有效，但网站首页现在似乎自我引用，而不是表格，又回到了我的网站？你有这个问题吗？ - mdgbeck

最终我切换到了Icarus主题。希望这对所有的htmlwidgets都有效。 - pssguy

实际上，如果我运行 htmlwidgets::saveWidget(d1, file = "d1.html", selfcontained = TRUE)，它会创建一个名为 d1.html 的文件。该文件将被创建在 blogdown 的 content/post 目录中，因此会影响常规文章的排版... - giocomai

Answer 3

除了上面Hopko先生的回答外，您也可以将datatable支持集成到您的主题中。今天早上我刚刚修改了我的hugo主题以支持datatables。

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

您可以运行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)
```

应该可以工作。

- C. Hammill

---

+1 你真是个天才！！其他注意事项：对我来说，我必须使用"/lib/...而不是"lib/...。此外，我还必须将htmlwidgets-1.0更新为htmlwidgets-1.2。最后，我没有scripts.html文件，但有一个js.html文件。所有这些都取决于主题，因此直接复制粘贴在这里不起作用。另外，我在本地使其工作了，但在netlify上无法工作，我意识到我在.gitignore文件中有lib/，所以我必须使用git add ... -f。现在它可以工作了！ - RAFisherman