Question

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

我想在我的一篇博文中嵌入传单地图。我正在使用R包传单。

所以说例如我制作一张地图：

library(htmlwidgets)
library(leaflet)

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

如何在我的网页上嵌入此内容？我尝试做的一件事是使用以下方法保存html文件：

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

这可以在本地保存html文件。我尝试将html代码复制并粘贴到Github上的_posts之一，但这不起作用。有什么建议？

Answer 1

您可以查看official R leaflet page their github page处的yihui's jekyll example（网站的内容，而不是传单代码）。

我在您的网站上看不到您正在使用R-markdown来创建降价页面。真的值得一试！看看knitr。基本上，您使用basemap page来生成页面。这意味着您可以编写降价功能，并且可以将您的R代码嵌入降价页面。例如：

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

您可以使用传单：

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

htmlwidgets应由knitr自动加载。

例如，您可以查看R小册子页面的index.html如何在R-markdown中完成。

如果在页面中包含传单映射，则一个重要的事情是包含页眉中的所有脚本。在我的页面上，我将其插入head.html文件夹中的_includes。

我必须添加以下内容：

{% 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-markdown页面时，我复制了knitr创建的文件夹中的所有脚本。因此我必须设置

output: 
  html_document: 
    self_contained: no

在前面的事情中（否则代码嵌入页面中，并且不能轻易复制）。

R传单背后的团队包括他们their libs folder中的libs：

<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>

您可以从Merge different products belong to each standard复制库。

我在您的页面上看到您已经使用其他方法使用它。我只是想把它包括在内，因为我只是在研究同一个话题......

Answer 2

基于@nnn答案，我整理了一个这样做的教程：

FULL TUTORIAL ON THIS LINK

简而言之：

在GitHub / Jekyll上

标识您需要包含的代码。我已经为您See on my GitHub
将其复制/粘贴到构建<head>的代码中。这将取决于您的Jekyll实现。完成此操作后，每次Jekyll构建网站时都会加载所需的库。

在Rstudio上

使用leaflet创建地图并将其编织到github_document。在最前面使用always_allow_html: yes进行编织很重要。

降价促销

检查每个leaflet映射是否在html文件中产生了.md代码。像这样：

<!--html_preserve-->

  <script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
    {"x":{"options": ...
<!--more funky code here-->

将此块粘贴到<script>部分之前：

<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html-widget"></div>

因此，每个leaflet地图都有类似的内容：

<!--html_preserve-->
 <div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html- widget"></div>

  <script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
    {"x":{"options": ...
<!--more funky code here-->

现在将其发布在GitHub上。现在，当 Jekyll 构建在 GitHub 上托管的博客/网站时，将加载库并正确显示传单地图。请注意，在本地或降价时，地图仍然不可见。

完成几次后，您将看到基本上是复制/粘贴/修改我在第5步中介绍的块。

Answer 3

我在这里找到了解决方案https://jayrobwilliams.com/posts/2020/09/jekyll-html

将 saveWidget 的输出存储在您的网站目录中。

根据需要将相对路径包装在 iframe 和样式中。

<iframe src="/interactiveDocs/map.html" height="600px" width="100%" style="border:none;"></iframe>

它对我的目的很有效

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

3 个答案: