Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 10, 2022 12:41 am GMT

Using Data with Hugo

By Mike Neumegen

Brought to you by CloudCannon, the Git-based CMS for Hugo.

A data file in Hugo is sort of like a read-only database. The way it works is you can put JSON, CSV, YAML, XML, or TOML files in a directory called data, then access that data in a layout using .Site.Data. You can also download JSON or CSV files from an external source on build if you want to get fancy.

Creating your first data file

First well create a data file with all of your favorite vacation spots. Create /data/vacation_spots.yml with the following content:

    - name: Masai Mara National Reserve      latitude: -1.484751      longitude: 35.101904    - name: Serengeti National Park      latitude: -2.333333      longitude: 34.833332    - name: Okavango Delta      latitude: -19.304543      longitude: 22.643703    - name: Etosha National Park      latitude: -18.855591      longitude: 16.32932    - name: Kidepo Valley Park      latitude: 3.882778      longitude: 33.874444

What are Shortcodes?

To list your favorite vacation spots, youre going to need:

  • Map software youll use the fantastic OpenStreetMap and Leaflet.
  • A JavaScript list of markers you have this in a data file currently
  • JavaScript to set up the map and markers
  • A div to hold the map

We could put all of this in a content file, but its going to be far more complicated than the simple markdown we have there currently. And what if we wanted to use this map again on another page? Thats a lot of HTML to copy and paste around.

Fortunately, Hugo has an answer, and its called Shortcodes. A shortcode is similar to a partial, except you use them in content files. Hugo even has a bunch already built in.

Youll create a shortcode which can be used in any content file to create a map with marked locations. Lets see how it works.

Your first Shortcode

Create a directory called shortcodes inside /layouts/ and add a file called vacation_spots.html with the following content:

    <div id="map"></div>    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""/>    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>    <script>      let markers = {{ $.Site.Data.vacation_spots }};    </script>    <script src="/map.js"></script>

There are a few things going on here, so let me explain:

  1. First we have the map element which will hold the map.
  2. Then were loading the stylesheet for Leaflet, which will help us create nice pins and pop-ups on the map.
  3. Next is the leaflet JavaScript file.
  4. Following that is the list of markers coming from your data file. Here its output as a JSON array.
  5. Finally were referencing /map.js which well create shortly. This is responsible for initializing the map and adding the markers.

Lets add the JavaScript to initialize the map and add the markers. Create /static/map.js with the following content:

    const map = L.map('map');    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',         {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})        .addTo(map);    let bounds = [];    for (let i = 0; i < markers.length; i++ ) {        const marker = L.marker([markers[i].latitude, markers[i].longitude]).addTo(map);        marker.bindPopup(markers[i].name);        bounds.push([markers[i].latitude, markers[i].longitude]);    }    map.fitBounds(bounds);

Were not here to learn JavaScript so Ill leave this one for you to decipher (or not).

The final set is to actually use the shortcode. Open up /content/about.md and append the following:

    ### These are my favorite vacation spots    {{< vacation_spots >}}

Open it up in a browser and admire all your hard work.

Whats next?

This is only the beginning of your Hugo journey. You now have the skills to build a basic Hugo site. To continue the journey theres a few resources I recommend:

Finally I want to quickly mention CloudCannon - its a content management system with first class support for Hugo and syncs directly with your Git repository. So your developer team can continue working in Hugo while your content team can manage the content on the site. Its the best of both worlds.

Thanks for reading and Happy Hugoing!


Original Link: https://dev.to/cloudcannon/using-data-with-hugo-110f

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To