Easy Steps for Creating a Sitemap with Middleman

Table of Contents:

1. Introduction
2. What is the sitemap variable?
3. Setting up the layout
   1. Creating a navigational list
   2. Filtering pages
4. Accessing information about the current page
   1. Parent page
   2. Siblings
   3. Children
5. Utilizing the sitemap variable for different purposes
   1. Creating directories
   2. Implementing breadcrumbs navigation
   3. Section-wide navigation
6. Conclusion

Using the Sitemap Variable in Middleman

In this tutorial, we will explore the usage of the sitemap variable in Middleman. The sitemap variable is a powerful tool that allows us to access information about the pages on our website. By utilizing the sitemap variable, we can dynamically loop through all the pages or access specific information about a particular page, such as its parent or sibling pages. Understanding how the sitemap variable works is essential for optimizing your Middleman website.

1. Introduction

Before diving into the intricacies of the sitemap variable, let's discuss the layout setup we will be working with. Within the source folder, we have several HTML files named A, B, C, and one home page. Our goal is to loop through these pages and gain insights into the structure of our website using the sitemap variable.

2. What is the sitemap variable?

The sitemap variable stores information about all the pages on your website. It allows you to access and manipulate this data to build various functional elements, such as navigational lists or directory structures. By using the sitemap variable, we can iteratively loop through the resources, which represent the individual pages, and retrieve information about them.

3. Setting up the layout

To begin utilizing the sitemap variable, let's create a navigational list within our layout file (layout.erb). This list will display all the pages on our website and provide links to each page. To access the sitemap variable, simply type "sitemap". We can then utilize a for loop to iterate through the resources (pages) on our site.

<% sitemap.resources.each do |page| %>
    <%= page.data.title %>
<% end %>

By printing out the page.data.title, we can see the title of each page as we loop through them. This gives us a comprehensive list of all the pages on our website.

3.1 Creating a navigational list

To enhance our navigational list, we can create a HTML link for each page by utilizing the page.path attribute within the href attribute of the link. Additionally, we can include the page.data.title within the link to display the page's title.

<% sitemap.resources.each do |page| %>
    <li>
        <a href="<%= page.path %>"><%= page.data.title %></a>
    </li>
<% end %>

With this implementation, we have now built a functional table of contents for our website, providing links to each page.

3.2 Filtering pages

In some cases, we may not want to loop through certain pages, such as CSS or JavaScript files. To filter the pages being looped through, we can use the page.content_type attribute. The content_type attribute reveals the type of content the page contains, such as HTML, CSS, or JavaScript. By including an if statement, we can check if the content_type includes "text/html" to filter out non-HTML pages.

<% sitemap.resources.each do |page| %>
    <% if page.content_type.include?("text/html") %>
        <li>
            <a href="<%= page.path %>"><%= page.data.title %></a>
        </li>
    <% end %>
<% end %>

With this implementation, we have successfully filtered out non-HTML pages, displaying only the HTML pages within our navigational list.

4. Accessing information about the current page

The sitemap variable not only allows us to loop through pages but also gives us access to specific information about the current page being processed. For example, we can retrieve the parent, sibling, or child pages of a particular page.

4.1 Parent page

To access the parent page of the current resource, we can use the current_resource.parent attribute. By accessing the parent's data.title, we can print out the parent page's title.

<%= current_resource.parent.data.title %>

If the current resource does not have a parent, such as the home page, this attribute will return nil.

4.2 Siblings

To access the siblings of the current page, we can use the current_resource.siblings attribute. By looping through the siblings, we can access their data.title and display their names.

<% current_resource.siblings.each do |sibling| %>
    <%= sibling.data.title %>
<% end %>

This implementation allows us to print out the names of all the siblings of the current page.

4.3 Children

If a page has children, we can access them using the current_resource.children attribute. By looping through the children, we can print out their data.title to display their names.

<% current_resource.children.each do |child| %>
    <%= child.data.title %>
<% end %>

By utilizing the sitemap variable, we gain the ability to access valuable information about the pages and their relationships to one another.

5. Utilizing the sitemap variable for different purposes

The sitemap variable provides immense flexibility in terms of incorporating structured data about your website. Let's explore some additional use cases for utilizing the sitemap variable.

5.1 Creating directories

By utilizing the sitemap variable to loop through pages, you can create directory-like structures on your website. This allows users to navigate through different sections of your site easily. You can display all the pages within a particular section by filtering based on a common structure or tag.

5.2 Implementing breadcrumbs navigation

Breadcrumbs navigation provides users with a trail of links that shows their current location within the website's hierarchy. By utilizing the sitemap variable and accessing the parent and siblings attributes, you can build a dynamic breadcrumbs navigation that accurately reflects the user's position within the website.

5.3 Section-wide navigation

Depending on the section a user is in, you can list out all the pages within that section using the sitemap variable. This helps users navigate within a specific area of your site without overwhelming them with unnecessary information.

6. Conclusion

The sitemap variable in Middleman allows for powerful manipulation of data about your website's pages. By understanding how to utilize this variable, you can build interactive and dynamic elements that enhance user experience and streamline navigation. Experiment with the different attributes and functionalities available with the sitemap variable to fully optimize your Middleman website.

Highlights:

• The sitemap variable in Middleman provides access to information about the pages on your website.
• Using the sitemap variable, you can loop through all the pages or access specific information about a particular page.
• The sitemap variable is useful for building navigational lists, creating directories, and implementing breadcrumbs navigation.
• Utilize the parent, sibling, and children attributes to access information about the relationships between different pages on your site.
• Experiment with the sitemap variable to enhance the structure and functionality of your Middleman website.

FAQ

Q: Can I use the sitemap variable in other static site generators? A: The sitemap variable is specific to Middleman and may not be available in other static site generators. However, other generators may have similar functionalities for accessing page information.

Q: How can I filter pages based on specific criteria using the sitemap variable? A: You can use conditional statements within the loop to filter pages based on attributes like content_type or tags. By including if statements, you can selectively display pages that meet your desired criteria.

Q: Can I access attributes other than parent, sibling, and children using the sitemap variable? A: Yes, the sitemap variable provides access to various attributes and data associated with each page. Explore the documentation or consult the Middleman community to discover additional attributes you can utilize.