Hugo支持插入地图的shortcode

2019年2月22日 20:10

Hugo是什么? 本博客网站就是使用有Hugo渲染, 关于Hugo的介绍可以看这里
Ps: 在Hugo面前, hexo的渲染速度就是一个渣渣!

概述

在博客网站里插入地图容器我觉得是一件很棒的功能, 比如分享自己的旅行记录.
所以, 就有了这篇文章 ~ ~

大体实现

依赖框架: leaflet.js
地图源  : openstreetmap.org
实现方式: hugo shortcode

示例

效果

代码


{{ <map h="320px" pos="120.12887,30.26833" zoom="17" alt="这里是黄龙体育馆"> }}

参数说明

字段	含义	必填	备注
h	high, 容器的高度		默认360px
w	width, 容器的宽度		默认为容器的宽
pos	position, 地理坐标	✓	“经度,维度”
zoom	缩放系数		默认16, 范围: 1~18
alt	alert, 弹出框文本		没有指定位置则为中心点
altLan	alert的经度
altLat	alert的维度
displayZoom	显示 `放大/缩小` 按钮, `true` 显示		默认隐藏

实现

模板文件

创建shortcodes模板文件 layouts/shortcodes/map.html, 如下:


{{- if .IsNamedParams -}}
{{- $mapPosition := (split (.Get "pos") ",") -}}
{{- $mapLon := default 120 (index $mapPosition 0) -}}
{{- $mapLat := default 30 (index $mapPosition 1) -}}
{{- $mapWidth := default "100%" (.Get "w") -}}
{{- $mapHeight := default "360px" (.Get "h") -}}
<div class="map-box">
<div id="map-{{$mapLon}}-{{$mapLat}}" style="max-width:{{$mapWidth}};height:{{$mapHeight}};"></div>
</div>
<script>
    var mymap = L.map('map-{{$mapLon}}-{{$mapLat}}', { attributionControl:false }).setView([{{$mapLat}},{{$mapLon}}], {{ if .Get "zoom" }}{{ int (.Get "zoom") }}{{ else }}16{{ end }});
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(mymap);
	{{ if .Get "alt" }}
    {{ if and (.Get "altLat") (.Get "altLon") }}
	var marker = L.marker([{{.Get "altLat"}}, {{.Get "altLon"}}]).addTo(mymap);
    {{ else }}
    var marker = L.marker([{{$mapLat}},{{$mapLon}}]).addTo(mymap);
	{{ end }}
	marker.bindPopup("{{.Get "alt" }}").openPopup();	
	{{ end }}
</script>
{{- end -}}

依赖

在 leafletjs下载页¹获取相应的js, css, image文件, 存放在主题static目录下:

static
├── css
│   ├── images
│   │   ├── layers-2x.png
│   │   ├── layers.png
│   │   ├── marker-icon-2x.png
│   │   ├── marker-icon.png
│   │   └── marker-shadow.png
│   ├── leaflet.css
├── js
     └── leaflet.js

在<head>中引入文件:


<script type="text/javascript" src="/js/leaflet-ab59f61559.js"></script>
<link rel="stylesheet" href="/css/leaflet-7be53ed796.css"/>

https://leafletjs.com/download.html ↩︎

文章作者: qbeenslee