DT package does not work with blogging using hugo-future-imperfect theme

Question

I have a blogdown site based on the hugo-future-imperfect topic, where DT output is generated correctly in rmd, but the data is not displayed (although the headers) when using serve_site / build_site

I created two new sites (therefore, without any other complications) to illustrate this problem. This is the code and outputs.

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

iris %>% 
  datatable()
```

a) default theme

b) hugo-imperfect

Answer 1

From https://owi.usgs.gov/blog/leaflet/ and https://github.com/rstudio/blogdown/issues/20 The answer should display the output in an iframe. So:

, :

```{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 datatable support. 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" ...> /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> 

to scripts.html

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

.