在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複製。

我在您的網頁上看到您已經使用其他方法工作。我只是想包括這一點，因爲我只是在研究相同的主題...