如何在 jekyll 的单个帖子中显示传单地图？

Question

我正在尝试在 Jekyll 的单个帖子中插入地图。

这是我尝试的明显努力：github link

这里是github账号的链接：link

我采用了默认模板，即 Hyde。

然后我在 _includes/head.html 中添加了 Leaflet 的 CSS 和 JS 文件

然后我创建了一个依赖 _layouts/default.html 的帖子（默认来自 head.html）

正如我所说，我正在尝试在单个帖子中插入单个地图。如果您查看第一个链接，它会以一种奇怪的方式在整个博客中显示地图。

它不会显示在单个帖子本身中。

我怎样才能做到这一点？

如果可能的话，我希望最终能发布一系列帖子，每个帖子都有自己的地图。

这是我迄今为止发表的单独帖子中的代码：

---
layout: default
title: Trying to integrate map in jekyll
---
<div id="map">

</div>

<script>
        var map = L.map('map').setView([34.00000, -118.260126], 14); 

        mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; ' + mapLink, maxZoom: 18, }).addTo(map);


        var marker = L.marker([34.063298, -118.260126]) .addTo(map).bindPopup("<b>Blah Blah Blah</b><br /><a href='http://www.cnn.com'>Additional Information</a><br />").openPopup();


</script>

我意识到这篇文章在很大程度上依赖于链接，这在 SO 是不受欢迎的。但是我没有其他方法可以解释我的问题。

Answer 1

_includes/head.html 中的正确代码是：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">

不是

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"></script>

和

<style type="text/css">
  #map {
    width:400px;
    height:550px;
    background-color: red;
  }
</style>

不是

<style type="text/css">
  #map {
    width:400px%;
    height:550px;
    background-color: red;
  }
</style>