Generating navigation tree and including in layout?

#1

I’m working on a new site where I want the top-level navigation to auto-update with the contents in a particular folder in /source. I can generate HTML just by crawling the directories fine, but I can’t figure out how to include that in the overall layout that Middleman is using (i.e. add stuff to my layout.slim BEFORE individual pages are built).

Is there any way to have Middleman generate layouts/templates during build?

Generating a site navigation pulldown menu
#2

Not sure I understand, what happens when you try to run your code from the layout? Should work just fine.

I’d suggest using the sitemap because it’s got methods for parents/children/siblings without having to look at the files on disk.

#3

So it looks like the sitemap object is indeed what I’m looking for, but the documentation for it is not very helpful because it lists everything and not just my content (so the js and css files also in /source). Do you know of any good resources for explaining how to work with that object?

#4

Our test cases are probably the best spot:

#5

That’s kind of useful, but not really. Plus the Middleman::Sitemap::Queryable class referenced on the Siteman docs no longer exists. I guess I just have to use trial and error to get a decent navigation tree.

#6

Looks like the API docs are actually here:

http://rubydoc.info/gems/middleman-core/frames

I’ll update the website

#7

Just in case anyone else is wondering, this is what I ended up doing to get a 2-level deep nav menu in my layout (using slim)

ul
  - for resource in sitemap.resources
    - if resource.ext == '.html' && resource.children.count > 0 && resource.parent != nil
      li == link_to page_title(resource), "/#{resource.destination_path}"
      ul
        - for child in resource.children
          li == link_to page_title(child), "/#{child.destination_path}"
1 Like
#8

You can also link_to the resource directly:

link_to page_title(child), child
#9

This discussion has been helpful, as I’m trying to do something similar. However, I’ve got a few constraints.

  1. I cannot predict how deep the navigation will need to be.
  2. It needs to be generated automatically (I cannot use a hierarchy defined in a .yml file, like this one)
  3. I don’t think I can use the traversal methods, because I can’t guarantee each folder will contain an “index.html” for defining parent/child relationships (I played around with them a lot before I realized this).

Basically, I’d like to reproduce something similar to the one at __middleman/sitemap, but in a page template or partial.

Some possible leads are

  • This all_files_under(*paths) utility method
  • Reusing the code used to build the sitemap metapage on my own pages (the template for it is here and I also found the sitemap_tree.render method).
  • Writing a script from scratch that looks at each resource and pieces them together into a tree based on their file paths.

Is there any reason I can’t reuse the same methods used on the metapages in my own templates? If so, and thoughts on how could I adapt them to work for me?

#10

I’m in the same boat. I want to output a TOC based on an unpredictable directory structure. I want to start at a specific directory, and generate a ul for each sub-directory level. I have no idea how I’d do this with the sitemap object.

#11

I ended up solving this without the sitemap object. I wrote an extension in which I provide a parent directory and it loops recursively through the children, writing the structure to a .yml file in the data folder.

I put the extension up on github, if anybody wants to try it out: https://github.com/bryanbraun/middleman-navtree

1 Like