HUGO支持插入地图的SHORTCODE

2019年2月22日 20:10

Hugo logo
Hugo logo

Hugo是什么? 本博客网站就是使用有Hugo渲染, 关于Hugo的介绍可以看这里

Ps: 在Hugo面前, hexo的渲染速度就是一个渣渣!

概述

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

大体实现

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

效果

markdown文档插入语句

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

{{}}内两端的空格去掉

实现

模板文件

创建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下载页1获取相应的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.js"></script>
<link rel="stylesheet" href="/css/leaflet.css"/>

参数说明

字段含义必填备注
hhigh, 容易的高度
wwidth, 容器的宽度
posposition, 地理坐标“经度,维度”
zoom缩放系数默认16, 范围: 1~18
altalert, 弹出框文本没有指定位置则为中心点
altLanalert的经度
altLatalert的维度

文章作者: qbeenslee

本文为原创,转载请遵守本站版权声明