在Github上托管的jekyll网站上嵌入R - Leaflet地图

Question

我有一个网站here使用Beautiful Jekyll托管在Github页面上。有关Github上的博客背后的实际代码，请参阅here。

我想将小册子地图嵌入到我的某篇博文中。我正在使用R包小册子。

所以说，比如我做一个地图：

library(htmlwidgets) 
library(leaflet) 

m <- leaflet() %>% #basic map 
    addTiles() %>% 

如何嵌入这个我的网页上？我试图做的一件事是保存HTML文件使用：

saveWidget(widget = m, file="your_map.html", selfcontained = FALSE) 

这工作并保存在本地的HTML文件。我试图复制和粘贴到Github上的_posts之一的HTML代码，但没有奏效。 有什么建议吗？

Answer 1

你可以看看他们是如何做在their github page（网站，而不是小册子代码）。

我没有在您的网站上看到您正在使用R标记创建您的降价页面。这真的值得一试！看看yihui's jekyll example。基本上你使用knitr来生成你的页面。这意味着您可以写下降价并能够将您的R代码嵌入到降价页面中。例如像：

```{r} 
plot(runif(10)) 
``` 

你可以用传单做同样的：

```{r} 
library(leaflet) 
leaflet() %>% addTiles() %>% setView(10, 51, zoom = 8) 
``` 

htmlwidgets应该自动被加载knitr。

例如，您可以看看R宣传页的basemap page是如何在R标记中完成的。

如果在页面中包含传单地图，一个重要的事情是包括页头中的所有脚本。在我的页面上，我将它插入_includes文件夹中的head.html。

我不得不添加以下内容：

{% if page.maps %} 
<script src="/assets/jquery-1.11.1/jquery.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link href="/assets/bootstrap-3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="/assets/bootstrap-3.3.1/js/bootstrap.min.js"></script> 
<script src="/assets/bootstrap-3.3.1/shim/html5shiv.min.js"></script> 
<script src="/assets/bootstrap-3.3.1/shim/respond.min.js"></script> 
<script src="/assets/htmlwidgets-0.5/htmlwidgets.js"></script> 
<link href="/assets/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> 
<script src="/assets/leaflet-0.7.3/leaflet.js"></script> 
<link href="/assets/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" /> 
<script src="/assets/leaflet-binding-1.0.1/leaflet.js"></script> 
{% endif %} 

我增加了一个选项maps: true到的与地图的页面的前面的问题，使得部分{% if page.maps %}确保所有这些代码只加载需要它的网页。

当我编译没有jekyll的R标记页时，我复制了由knitr创建的文件夹中的所有脚本。因此，我必须设置

output: 
    html_document: 
    self_contained: no 

在前面的问题（否则代码嵌入在页面中，不能很容易复制）。

背后[R传单的球队包括像这样在他们index.html的库：

<script src="libs/jquery/jquery.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link href="libs/bootstrap/css/flatly.min.css" rel="stylesheet" /> 
<script src="libs/bootstrap/js/bootstrap.min.js"></script> 
<script src="libs/bootstrap/shim/html5shiv.min.js"></script> 
<script src="libs/bootstrap/shim/respond.min.js"></script> 
<script src="libs/htmlwidgets/htmlwidgets.js"></script> 
<link href="libs/leaflet/leaflet.css" rel="stylesheet" /> 
<script src="libs/leaflet/leaflet.js"></script> 
<link href="libs/leafletfix/leafletfix.css" rel="stylesheet" /> 
<script src="libs/leaflet-binding/leaflet.js"></script> 

您可以将库从their libs folder复制。

我在您的网页上看到您已经使用其他方法工作。我只是想包括这一点，因为我只是在研究相同的主题...