You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Set the argument `title` to add a brand text to the left of the navbar. The text moves to the center on smaller screens, pending on the `size` setting.
Hinode uses [npm packages]({{< ref "/docs/0.9/advanced-settings/overview#npm-packages" >}}) and [mounted folders]({{< param "links.hugo_mounts" >}}) to create a flexible, automated build system. This guide shows how to add an npm package to your site. It installs Leaflet as an example. [Leaflet]({{< param "links.leaflet" >}}) is an open-source JavaScript library to add mobile-friendly interactive maps to your site. This guide assumes you have a working site already. Check the [introduction]({{< relref "introduction" >}}) on how to set up a site with Hinode.
16
16
17
+
{{< alert color="info" >}}
18
+
A full working example of this guide is available on [GitHub]({{< param "links.repository_leaflet" >}}).
19
+
{{< /alert >}}
20
+
17
21
## Step 1 - Setting up leaflet
18
22
19
23
As first step we will install the Leaflet package with npm. Next, we will mount the JavaScript library. Lastly, we will import Leaflet's stylesheet.
@@ -37,11 +41,22 @@ Using Hugo's module mounts, Hinode bundles all JavaScript files found in the `as
37
41
includeFiles = "leaflet.js"
38
42
```
39
43
44
+
The default marker from Leaflet requires several images. Mount these images to `static/css/images` for them to become available.
45
+
46
+
```toml
47
+
[[module.mounts]]
48
+
source = "node_modules/leaflet/dist/images"
49
+
target = "static/css/images"
50
+
includeFiles = "*.png"
51
+
```
52
+
40
53
### Importing the css file
41
54
42
-
Leaflet requires the presence of several style elements. Similarly to the JavaScript bundle, add the following statement to `assets/scss/app.scss` to include Leaflet's <abbrtitle="Cascading Stylesheet">CSS</abbr> file in your main style. Please note that the file extension `.css` should be omitted.
55
+
Leaflet requires the presence of several style elements. Similarly to the JavaScript bundle, add an import statement to `assets/scss/app.scss` to include Leaflet's <abbrtitle="Cascading Stylesheet">CSS</abbr> file in your main style. You can copy the basic file from the Hinode repository and add the statement to the bottom of the file. Please note that the file extension `.css` should be omitted.
43
56
44
57
```scss
58
+
[...]
59
+
45
60
// Import Leaflet
46
61
@import"leaflet/dist/leaflet";
47
62
```
@@ -62,18 +77,21 @@ Add a `map` placeholder to your (Markdown) content file. The following placehold
62
77
<divid="map"class="ratio ratio-16x9 w-100"></div>
63
78
```
64
79
65
-
Next, initialize the map placeholder with the OpenStreetMap content. The following code uses the city of London as an example. The `mapID` refers to the ID of the placeholder. The code tests if an element with the `map` ID is present and initializes the placeholder accordingly. You can place the code in `assets/js/leaflet.js`, where Hinode will pick it up automatically.
80
+
Next, initialize the map placeholder with the OpenStreetMap content. The following code uses the city of London as an example. The `mapID` refers to the ID of the placeholder. The code tests if an element with the `map` ID is present and initializes the placeholder accordingly. It adds a marker with a default icon next. You can place the code in `assets/js/leaflet.js`, where Hinode will pick it up automatically.
0 commit comments