An Interest In:
Web News this Week
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
Using Data with Hugo
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:
- First we have the map element which will hold the map.
- Then were loading the stylesheet for Leaflet, which will help us create nice pins and pop-ups on the map.
- Next is the leaflet JavaScript file.
- Following that is the list of markers coming from your data file. Here its output as a JSON array.
- 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: '© <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:
- The Hugo documentation is a great resource for learning everything Hugo has to offer
- The Hugo community forums are welcoming to new comers. This is a good place to get support and connect with the community.
- Bootstrap to a client editable Hugo site is a more advanced Hugo tutorial that shows you how to convert a purely static website to a Hugo site clients can update.
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To