How to organised hierachical content

Hello there,

I have been struggeling with this for some time (perhaps because I am still not understanding how hugo works). I am wondering what the best practice is for organising hierachical content? Basically, my whole website is a heirarchy. I organise content in a tree, and the website user is meant to be able to navigate it like a tree also…

The website is not a blog as such, it is just a reference.

Below is an image of what my current filesystem looks like, and what my filesystem current gets rendered like in html;

I do have it sort of working, but, to put it plainly…its a real pain in the neck to edit because I have to edit index files for each parent node, which to me, is just redundant work (there are other reasons, but basically, I just dont like doing it that way)

So my goal is as follows;

  • To somehow get rid of the index files. (One index at the top of the hierarchy is fine. But other than that, its just extra editing overhead).
  • To have only one markdown file for every node in the tree.
  • To use the lowest weighted markdown file in a directory…as the parent node.

Is such a thing possible?

Thank you kindly for any thoughts
John

1 Like

If I am understanding you correctly, could you not put all your .md files under content/ then just display them in tree using your layouts?

1 Like

Hi zwbetz, thank you kindly again for your help…

It seems to me that I could do it that way, honestly, I dont see why not, but truth is I have a contractor working on it and for whatever reason he hasn’t done it that way…(there could be a valid reason)…the other complication is that I have prefixed everything with numbers to preserve order…

I have used a contractor because I didnt want to have to dig in real deep into Hugo (not from desire, just lack of time, im the content guy not the webdev)… looks like I am going to have to get in and do it myself…I sort of feel like its a never ending list of problems…

But just to confirm/clarify. Say for example I have;

The following folder and file structure;

\content\100_matchedbetting\
\content\100_matchedbetting\100_Introduction\
\content\100_matchedbetting\100_Introduction\100_Introduction.md    
\content\100_matchedbetting\100_Introduction\101_how_much_can_you_make_doing_matched_betting.md
\content\100_matchedbetting\110_the_signup_bonus_procedures\
\content\100_matchedbetting\110_the_signup_bonus_procedures\110_the_sign_up_procedures.md
\content\100_matchedbetting\110_the_signup_bonus_procedures\110_your_first_signup_bonus.md
\content\100_matchedbetting\150_the_sub_procedures\
\content\100_matchedbetting\150_the_sub_procedures\150_the_sub_procedures.md_
\content\100_matchedbetting\150_the_sub_procedures\151_markdownfile1.md
\content\100_matchedbetting\150_the_sub_procedures\152_markdownfile2.md
\content\100_matchedbetting\150_the_sub_procedures\153_markdownfile3.md
\content\100_matchedbetting\150_the_sub_procedures\154_markdownfile4.md

I want it to display as below (if fully expanded);

Introduction
    How much can you make doing matched betting?
The Signup bonus procedures
    Your first signup bonus
The Sub Procedures
    Markdownfile1
    Markdownfile2
    Markdownfile3
    Markdownfile4

I hope that clarifies what I am trying to do? Sorry if I am not doing a very good job of explanation

Do you see any reason why I can’t do that? Are the number’s in front what might be causing problems? (I am stripping those out in my stubs, etc)

Thank you
John

I see… Well, just as an example, using your current project layout, you could do something like this in your index.html

<ul>
  {{- $introduction := "100_Introduction.md" }}
  <li><a href="{{< ref $introduction >}}">Introduction</a></li>
  <ul>
    {{- $matchedBetting := "101_how_much_can_you_make_doing_matched_betting.md" -}}
    <li><a href="{{< ref $matchedBetting >}}">How much can you make doing matched betting?</a></li>
  </ul>
  {{- $signUpProc := "110_the_sign_up_procedures.md" -}}
  <li><a href="{{< ref $signUpProc >}}">The Signup bonus procedures</a></li>
  <ul>
    {{- $firstSignupBonus := "110_your_first_signup_bonus.md" -}}
    <li><a href="{{< ref $firstSignupBonus >}}">Your first signup bonus</a></li>
  </ul>
  <!-- etc., etc. -->
</ul>

Don’t be overwhelmed. Just take things piece by piece. I think a nice foundation in HTML would be a good place to start.

Thanks zwbetz…appreciate your time…

Well it’s not so much the HTML I have problems with…I been around websites for long enough… its the hugo part of it I seem to struggle to understand…

For example, I could hardcode the tree like you have above, but I am wanting to generate it from the filesystem…

I think my problem is I have a zillion things on my mind, and my brain refuses to learn one more thing :slight_smile:

I have put my tree/html generation code at the bottom here. It seems to me that the contractor has made it loop through sections. (which to me would be the reason why I have to have index.md files)…is there any reason I can’t make this script work directly off the filesystem? rather than using sections?

{{- $currentNode := . }}
{{- $currentMenu := .Page.Params.main_menu }}

{{- $showvisitedlinks := .Site.Params.showVisitedLinks -}}

{{- if eq .Site.Params.ordersectionsby "title"}}
  {{- range .Site.Home.Sections.ByTitle}}
  {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
  {{- end}}
{{- else}}
  {{- range .Site.Home.Sections.ByWeight}}
   {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "currentmenu" $currentMenu}}
  {{- end}}
{{- end}}

<!-- templates -->
{{- define "section-tree-nav" }}
{{- $showvisitedlinks := .showvisitedlinks }}
{{- $currentNode := .currentnode }}
{{- $currentMenu := .currentmenu }}
 {{- with .sect}}
  {{- if and .IsSection (or (not .Params.hidden) $.showhidden)}}
    {{- $numberOfPages := (add (len .Pages) (len .Sections)) }}
    {{- safeHTML .Params.head}}
    {{- if in .URL $currentMenu }}
    <li data-nav-id="{{.URL}}" class="dd-item
        {{- if .IsAncestor $currentNode}} parent{{end}}
        {{- if eq .URL $currentNode.URL}} active{{end}}
        {{- if .Params.alwaysopen}} alwaysopen{{end -}}
        {{- if ne $numberOfPages 0 }} haschildren{{end}}
        ">
      {{ if ne .Params.level 0}}
        <div>            
            <a href="{{ .RelPermalink}}">{{safeHTML .Params.Pre}}{{.Title}}{{safeHTML .Params.Post}}</a>
            {{- if ne $numberOfPages 0 }}
            {{- if or (.IsAncestor $currentNode) (.Params.alwaysopen) }}
            <i class="fa fa-angle-down fa-lg category-icon"></i>
            {{- else -}}
            <i class="fa fa-angle-right fa-lg category-icon"></i>
            {{- end}}
            {{- end}}

            {{- if $showvisitedlinks}}<i class="fa fa-circle-thin read-icon"></i>{{end}}
        </div>
      {{ end }}
      {{- if ne $numberOfPages 0 }}
        <ul>
          {{- .Scratch.Set "pages" .Pages }}
          {{- if .Sections}}
          {{- .Scratch.Set "pages" (.Pages | union .Sections) }}
          {{- end}}
          {{- $pages := (.Scratch.Get "pages") }}

        {{- if eq .Site.Params.ordersectionsby "title"}}
          {{- range $pages.ByTitle }}
            {{- if and .Params.hidden (not $.showhidden) }}
            {{- else}}
            {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
            {{- end}}
          {{- end}}
        {{- else}}
          {{- range $pages.ByWeight }}
            {{- if and .Params.hidden (not $.showhidden) }}
            {{- else}}
            {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "currentmenu" $currentMenu}}
            {{- end}}
          {{- end}}
        {{- end}}
        </ul>
      {{- end}}
    </li>
    {{- end}}
  {{- else}}
    {{- if not .Params.Hidden }}
      <li data-nav-id="{{.URL}}" class="dd-item
     {{- if eq .URL $currentNode.URL}} active{{end -}}
      ">
      {{ if ne .Params.level 0}}
        <div>
          <a href="{{ .RelPermalink}}">
            {{safeHTML .Params.Pre}}{{.LinkTitle}}{{safeHTML .Params.Post}}
          </a>
          {{- if $showvisitedlinks}}<i class="fa fa-circle-thin read-icon"></i>{{end}}
        </div>
      {{ end }}
    </li>
     {{- end}}
  {{- end}}
 {{- end}}
{{- end}}

What do you think is the best way to go?

Really appreciate your help zwebtz, you are a very helpful fellow…
John

This seems like a good way to do it (vs hard-coding it).

You could potentially range through all pages like below, but you would need to add logic within that would differentiate between section headings and list items.

{{ range .Site.RegularPages }}
...
{{ end }}

So for example,. do you mean, have a frontmatter variable, called ‘IsRootNode’ or ‘IsSectionHeading’ or some such boolean named thing?

or alternately determine whether it is a rootnode by comparing filename to the foldername (or some such convention)?

For my own reference, this is a link to all the site variables I could use to extract the pages…

Do you think I can safely assume a summary of the problem here is that the script is trying to use sections, whereas really it should be based off site.AllPages or site.RegularPages ? (because sections require a index.md?)

Thank you again for your help. I think I am understanding…I hope…

Yes, this would work

Thanks Zach, I shall stop bugging you. Very much appreciative of your help. Hopefully I can repay the community when I am know how enough.

If anyone else who read this has any comments, I’d also be all ears. I am fairly confident though that this is the way to go, and will give it a try as soon as I can get the time…

Hi there, I want to help, but I don’t understand your point.

Getting rid of the index files to use the lowest weighted markdown file seems unnecessary. You’ll have the same overhead, as you need to create a file and add metadata (like name) to “lend” it to the parent folder.

What do you gain with it? What I’m missing?

Hi there

Basically it boils down to the way i edit content. It disturbs my thought processes if u have multiple files with the same filename…index.md…i get confused and have to double check things…

Thanks for any thoughts u can offer
John