我有一个使用 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 之一，但这没有用。
有什么建议么？
【问题讨论】：
标签： r leaflet jekyll github-pages
您可以在their github page 上查看他们是如何为official R leaflet page 执行此操作的（用于网站的，而不是用于传单代码的）。
我没有在您的网站上看到您正在使用 R-markdown 来创建您的降价页面。真的值得一试！看看yihui's jekyll example。基本上你使用knitr 来生成你的页面。这意味着您编写 markdown 并能够将您的 R-Code 嵌入到 markdown 页面中。比如：
```{r}
plot(runif(10))
```
你可以用传单做同样的事情：
```{r}
library(leaflet)
leaflet() %>% addTiles() %>% setView(10, 51, zoom = 8)
```
htmlwidgets 应该由 knitr 自动加载。
例如，您可以看看 R 传单页面的 basemap page 是如何在 R-markdown 中完成的。
如果您在页面中包含传单地图，一件重要的事情是在页面标题中包含所有脚本。在我的页面上，我将其插入到 _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-markdown 页面时，我从 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 复制库。
我在您的页面上看到您已经让它使用不同的方法。我只是想包括这个，因为我只是在研究同一个主题......
【讨论】：
根据@nnn 的回答，我整理了一个教程：
简而言之：
在 GitHub/Jekyll 上
确定您需要包含的代码。我已经为你做了See on my GitHub
将其复制/粘贴到构建您的<head> 的代码中。这将取决于您的 Jekyll 实现。之后，每次 Jekyll 构建网站时都会加载所需的库。
在 Rstudio 上
leaflet 创建一个地图并将其编织到github_document。在前面使用always_allow_html: yes 编织它很重要。降价
leafletmap 是否在.md文件中生成了html 代码。像这样：<!--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 步中提出的块。
【讨论】：
我在这里找到了解决方案https://jayrobwilliams.com/posts/2020/09/jekyll-html
将saveWidget 的输出存储在您的网站目录中。
将相对路径包装在 iframe 中并随意设置样式。
<iframe src="/interactiveDocs/map.html" height="600px" width="100%" style="border:none;"></iframe>
它对我的目的很有效
【讨论】：