DT 包不能使用 hugo-future-imperfect 主题的 blogdown
DT package not working with blogdown using hugo-future-imperfect theme
我有一个基于 hugo-future-imperfect 主题的 blogdown 站点,其中在 rmd 中正确创建了 DT 输出,但在应用 serve_site/build_site
我已经创建了两个全新的网站(因此没有其他并发症)来说明这个问题。这是代码和输出
```{r DT}
library(DT)
library(tidyverse)
iris %>%
datatable()
```
a) 默认主题
b) 雨果不完美
来自 https://owi.usgs.gov/blog/leaflet/ and 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 的回答之外,您还可以将数据表支持破解到您的主题中。今天早上我刚刚破解了我的 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)
```
应该可以。
您可以使用包 widgetframe
。
安装包,然后将数据表保存在变量中。
install.packages("widgetframe")
ts <- iris %>% DT::datatable()
所以当你想显示数据表时,就这样做:
widgetframe::frameWidget(ts)
这对我有用!
我有一个基于 hugo-future-imperfect 主题的 blogdown 站点,其中在 rmd 中正确创建了 DT 输出,但在应用 serve_site/build_site
我已经创建了两个全新的网站(因此没有其他并发症)来说明这个问题。这是代码和输出
```{r DT}
library(DT)
library(tidyverse)
iris %>%
datatable()
```
a) 默认主题
b) 雨果不完美
来自 https://owi.usgs.gov/blog/leaflet/ and 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 的回答之外,您还可以将数据表支持破解到您的主题中。今天早上我刚刚破解了我的 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)
```
应该可以。
您可以使用包 widgetframe
。
安装包,然后将数据表保存在变量中。
install.packages("widgetframe")
ts <- iris %>% DT::datatable()
所以当你想显示数据表时,就这样做:
widgetframe::frameWidget(ts)
这对我有用!