📝 Docs: split the document and reduce the length of a single post

2026-09-03 04:02:40 +00:00 · 2022-07-20 12:43:52 +08:00
parent 982175b8db
commit 7ab30e5905
27 changed files with 1694 additions and 1459 deletions
@@ -0,0 +1,97 @@
+---
+title: "Extended Shortcode - mapbox"
+date: 2022-07-20T12:22:15+08:00
+author: "Lruihao"
+authorLink: "https://lruihao.cn"
+description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+---
+
+{{< version 0.2.0 >}}
+
+The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
+
+<!--more-->
+
+[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
+
+The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
+
+* **lng** *[required]* (**first** positional parameter)
+
+    Longitude of the inital centerpoint of the map, measured in degrees.
+
+* **lat** *[required]* (**second** positional parameter)
+
+    Latitude of the inital centerpoint of the map, measured in degrees.
+
+* **zoom** *[optional]* (**third** positional parameter)
+
+    The initial zoom level of the map, default value is `10`.
+
+* **marked** *[optional]* (**fourth** positional parameter)
+
+    Whether to add a marker at the inital centerpoint of the map, default value is `true`.
+
+* **light-style** *[optional]* (**fifth** positional parameter)
+
+    Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **dark-style** *[optional]* (**sixth** positional parameter)
+
+    Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **navigation** *[optional]*
+
+    Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **geolocate** *[optional]*
+
+    Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **scale** *[optional]*
+
+    Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **fullscreen** *[optional]*
+
+    Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
+
+* **width** *[optional]*
+
+    Width of the map, default value is `100%`.
+
+* **height** *[optional]*
+
+    Height of the map, default value is `20rem`.
+
+Example simple `mapbox` input:
+
+```go-html-template
+{{</* mapbox 113.953277 22.559102 11 */>}}
+Or
+{{</* mapbox lng=113.953277 lat=22.559102 zoom=11 */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox 113.953277 22.559102 11 >}}
+
+Example `mapbox` input with the custom style:
+
+```go-html-template
+{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+Or
+{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
@@ -0,0 +1,101 @@
+---
+title: "扩展 Shortcode - mapbox"
+date: 2022-07-20T12:22:15+08:00
+author: "Lruihao"
+authorLink: "https://lruihao.cn"
+description: "mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能。"
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+
+tags: ["shortcodes"]
+categories: ["documentation"]
+
+hiddenFromHomePage: true
+
+mapbox:
+  lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true
+  darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true
+---
+
+{{< version 0.2.0 >}}
+
+`mapbox` shortcode 使用 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 库提供互动式地图的功能.
+
+<!--more-->
+
+[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) 和 [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 为来源，将它们渲染成互动式地图。
+
+`mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS:
+
+* **lng** *[必需]*（**第一个**位置参数）
+
+    地图初始中心点的经度，以度为单位。
+
+* **lat** *[必需]*（**第二个**位置参数）
+
+    地图初始中心点的纬度，以度为单位。
+
+* **zoom** *[可选]*（**第三个**位置参数）
+
+    地图的初始缩放级别，默认值是 `10`。
+
+* **marked** *[可选]*（**第四个**位置参数）
+
+    是否在地图的初始中心点添加图钉，默认值是 `true`。
+
+* **light-style** *[可选]*（**第五个**位置参数）
+
+    浅色主题的地图样式，默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。
+
+* **dark-style** *[可选]*（**第六个**位置参数）
+
+    深色主题的地图样式，默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。
+
+* **navigation** *[可选]*
+
+    是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), 默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。
+
+* **geolocate** *[可选]*
+
+    是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), 默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。
+
+* **scale** *[可选]*
+
+    是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), 默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。
+
+* **fullscreen** *[可选]*
+
+   是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), 默认值是 [前置参数](../theme-documentation-content#front-matter) 或者 [网站配置](../theme-documentation-basics#site-configuration) 中设置的值。
+
+* **width** *[可选]*
+
+    地图的宽度，默认值是 `100%`。
+
+* **height** *[可选]*
+
+    地图的高度，默认值是 `20rem`。
+
+一个简单的 `mapbox` 示例：
+
+```go-html-template
+{{</* mapbox 113.953277 22.559102 11 */>}}
+或者
+{{</* mapbox lng=113.953277 lat=22.559102 zoom=11 */>}}
+```
+
+呈现的输出效果如下：
+
+{{< mapbox 113.953277 22.559102 11 >}}
+
+一个带有自定义样式的 `mapbox` 示例：
+
+```go-html-template
+{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" */>}}
+或者
+{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" */>}}
+```
+
+呈现的输出效果如下：
+
+{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}