Question

我想在github上为我的jekyll网站添加一个可点击的地图。

例如，我单击以到达锚标记的美国地图包含与点击状态相关的文本。

我希望最终得到的一个例子是： http://wilsonmar.github.io/museums-roadtrip-usa/

有两种不同的方法：HTML和CSS。

是否有jithyll托管在github页面上的例子？

Answer 1

为了使用Jekyll生成html图像映射，您可以使用集合。

file：_us-states / alaska.md

---
name: Alaska
abbrev: AK
coord: "52,249,42,253,..."
---
Your text here

您可以像这样生成图像映射：

<img src="image.png" alt="Us states" usemap="#us-states" />
<map name="us-states">
{% for s in site.collections['us-states'] %}
    <area shape="poly" coords="{{ s.map.coord }}" 
          href="{{ site.baseurl }}{{ s.url }}" 
          alt="{{ s.name }}" title="{{ s.name }}" >
{% endfor %}
</map>

Jekyll网站中的可点击图片地图

1 个答案: