Search code examples
drop-down-menumenumarkdownhugohugo-shortcode

Hugo list pages for subdirectory?


I am using the Tokiwa theme for this project.

here is a link to my repo

In my content folder I have my folders organized as they are in this reference image.

directory organization

I want to have The main topic (writing) displayed on the home page. If you click on writing I want it to take you to a list page showing the subdirectories “Poems” and “Short Stories” Then if you click on either of those I want it to take you to another list page showing all of the content. I have other broad topics such as “Programming” organized in this same hierarchy and I wanted to get this same set up for each one. Currently my list.html is

{{ define "main" }}
<main>
<article>
    <header>
        <h1>{{.Title}}</h1>
    </header>
    <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
    {{.Content}}
</article>
<ul>
<!-- Ranges through content/posts/*.md -->
{{ range .Pages }}
{{.Dir}}<br>
    <li>
        <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
    </li>
{{ end }}
</ul>
{{ end }}

and in my content.toml file

[menu]
  [[menu.main]]
    identifier = "writing"
    name = "writing"
    url = "/writing"
    weight = 1
     [[menu.main]]
    identifier = "post"
    name = "post"
    url = "/post"
    weight = 2
  [[menu.main]]
    identifier = "poems"
    name = "poems"
    url = "/category/poems"
    parent = "writing"
    weight = 1
  [[menu.main]]
    identifier = "stories"
    name = "stories"
    url = "/category/stories"
    parent = "writing"
    weight = 2

Which seems close, but not exactly right.

Thank you for any help you can offer on this issue.


Solution

  • The solution was to have nested _index.md files

    so the _index.md file for writing has a hyperlink to poems

    <a href="/writing/poems/">poems</a> <br />
    

    Then the _index.md file for poems has a hyperlink to the poem itself. You can make a list of items on these pages.

    <a href="poem1">poem1 </a>