Idea: ".SecondSection"

[FuadEfendi]

I am wondering if it is possible to implement something like ".SecondSection" (instead of ".FirstSection"), for left-side navigation:

docs/layouts/partials/hb/modules/docs/nav.html

Line 1 in 033bfdd

{{- $tree := partialCached "hb/modules/docs/functions/tree" . .FirstSection }}

My layout is quite large :

content
  beginner-books
    book1
    book2
    ...
  expert-books
    book1
    book2
    book3

The goal is, when I click expert-books -> book3 on top level menu, to open page at http://localhost:1313/expert-books/book3, it should show chapters from book3. But right now it shows book1, book2, book3, because of .FirstSection returns expert-books content. Maybe it is easier to create such function as Hugo-core?

I am not sure how hard is it; just sharing idea, researching... thanks,

[razonyang]

I am not sure how hard is it

It's possible, but there might be some edge case that needs to be considered (for example, how to determine if the documents belong to first/second section). I'm not very interested in this, but PR is welcome.

You can achieve this easily by separating books into the first sections.

[razonyang]

OK, just think of a simple method, to test it:

1. Install dev branch: hugo mod get github.com/hbstack/docs@feat-root-section
2. Specify docs_root_section as false on First Section, such as docs/_index.md.
3. Rebuild to ensure there isn't cache.

[FuadEfendi]

I tried, feat-root-section, I didn't notice any change of functionality

I am trying this now (planned to try this week):

{{/* layouts/partials/getSecondLevelSection.html */}}
{{- /* Returns the second-level section for the current page */ -}}
{{- define "getSecondLevelSection" -}}
  {{- $currentPage := . -}}
  {{- $ancestors := .Ancestors -}}
  {{- $secondLevel := nil -}}

  {{- if ge (len $ancestors) 2 }}
    {{- /* If there are at least two ancestors, get the second-level ancestor */ -}}
    {{- $secondLevel = index $ancestors (sub (len $ancestors) 2) -}}
  {{- else if eq (len $ancestors) 1 }}
    {{- /* If there's only one ancestor, the parent is the second-level section */ -}}
    {{- $secondLevel = $currentPage.Parent -}}
  {{- else }}
    {{- /* If no ancestors, the current page is the top-level */ -}}
    {{- $secondLevel = $currentPage -}}
  {{- end -}}

  {{- $secondLevel -}}
{{- end -}}

• this is not exactly "second level", but something "above current page", need rework

Why do I need that? Suppose website has few books, and each book is around 200-400 pages; I may even have bigger books; having 400 "href" elements per webpage will make it SEO-unfriendly, load time on mobile devices will be high, although no issues with Web browsers (for comparison, typical Amazon website page has around 400 "href" elements). I have 800-pages book project, split in few parts... thanks,

[FuadEfendi]

This is solution suggested by AI ;)

### **Alternative Approach: Using Custom Front Matter**

If you prefer more control, you can use custom front matter variables to explicitly define the navigation root for each page or section.

**Example:**

In your section's `_index.md` files:

```yaml
# content/book1/part1/_index.md
nav_root: true
```

Then, in your template, you can check for the `nav_root` parameter:

```go
{{- /* Check if the current page or any ancestor has nav_root set to true */ -}}
{{- $navRoot := . -}}
{{- with .Ancestors }}
  {{- range . }}
    {{- if .Params.nav_root }}
      {{- $navRoot = . }}
    {{- end }}
  {{- end }}
{{- end }}

{{- /* Use $navRoot for navigation */ -}}
{{- $tree := partialCached "hb/modules/docs/functions/tree" . $navRoot }}
```

This method allows you to specify which sections should act as navigation roots, giving you flexibility beyond the second level.

[FuadEfendi]

Maybe this is what I need, testing now: {{ (index .Ancestors.Reverse 2).Title }} - hopefully it returns title of "/part2" if page is located in /content/book1/part2/chapter4/page1.md

[razonyang]

I tried, feat-root-section, I didn't notice any change of functionality

Hmm, please describe it in detail? I've tested it myself before I pushed that branch.

having 400 "href" elements per webpage will make it SEO-unfriendly

Is there any related SEO advice from the official website? Such as Google itself.

BTW, I didn't follow the code you provided. If the number of links is sort of matter, then we need to reduce it in some way or just hide the navigation.

[FuadEfendi]

having 400 "href" elements per webpage will make it SEO-unfriendly

Is there any related SEO advice from the official website? Such as Google itself.

There are no such "official" advice. However, basic ranking algorithm for text is TF/IDF (term frequency / inverse document frequency), so that 400 links with non-related text may devalue main textual content of the page, etc.; Google algo may find it "keywords stuffing" and so on; yes, nice to have schema.org META in HTML it may help... but in general faster pages are more SEO-friendly, de-facto; Google advises that too and has "speed test" tool for that: https://pagespeed.web.dev/. For example, some of my webpages perform bad with this test on mobile devices, because DOM is too sophisticated.

This page has 795 "href" in it: https://securitiesexamsmastery.ca/14/

And all child pages have the same 795.

https://pagespeed.web.dev/analysis/https-securitiesexamsmastery-ca-14/npj7zbx3e3?form_factor=mobile

[FuadEfendi]

Quoting user comment from 2019 here,

"Google used to recommend that any page have no more than 100 links per page. However, they removed the "100 links per page" from the webmaster guidelines some time ago. Matt Cutts released a video where he says that the limits for page size and number of links per page are much higher than they used to be.

I've personally worked on a website with 250-400 links on every page. That site did very well in search engines."
https://webmasters.stackexchange.com/a/81171

[FuadEfendi]

Also, I'd like to mention that previous version of the same book https://securitiesexamsmastery.ca/14/ had 3 and even 4 levels of navigation, with same amount of pages navigation was much slower in Chrome browser, I believe because of sophisticated DOM. Now, it is only "chapter/section", two levels of navigation, and it feels 10x faster (with even more pages)

[FuadEfendi]

My fault; https://securitiesexamsmastery.ca/14/ "root" page is _index.md and lists 795 links; child pages are 443 links in average.

[FuadEfendi]

I tried, feat-root-section, I didn't notice any change of functionality

Hmm, please describe it in detail? I've tested it myself before I pushed that branch.

I'll try again; maybe I did something incorrect.

[FuadEfendi]

This webpage, for example, is No.1 in search results (in my Canadian area), https://www.google.com/search?q=canary+deployments+clojure&rlz=1C5CHFA_enCA950CA950&oq=canary+deployments+clojure&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigAdIBBzI2MWowajeoAgCwAgA&sourceid=chrome&ie=UTF-8

"canary deployments clojure" / but note, "clojure" is rarely searchable... 300x less popular than JavaScript ;)

https://clojurepatterns.com/9/8/2/

It has 588 "href" elements. But some other pages have around 1100+ "href", https://clojurepatterns.com/10/9/23/ for example. I think Google is smart enough. Also, it is two-level-hierarchy with navigation. I am going to make repo public for this site too.

[FuadEfendi]

I tried again hugo mod get github.com/hbstack/docs@feat-root-section and I noticed it doesn't modify go.mod or module.yaml - not sure how it works

[FuadEfendi]

ok, it looks like installed correct module,
github.com/hbstack/docs/modules/[email protected] github.com/hbstack/[email protected]

[FuadEfendi]

I think I confused everyone...

I have this layout currently:

content
    book1
    book2
    book3

Homepage will show book1, book2, book3. When I click "book1", it will show only content of "book1" (which is 2nd level from "root"). And what I suggested is to have functionality for 3rd level. Maybe that's why I cannot test github.com/hbstack/docs@feat-root-section - because 2-nd level already works.

"book1/_index.md" has `type: docs" in it. See https://github.com/MasteryEducation/SecuritiesExamsMastery.ca/tree/main/content for example, I have two "books" on it, https://securitiesexamsmastery.ca/

[FuadEfendi]

I forgot that I override list.html here... after deleting this file it works!!! I override "list.html" because I wanted _index.md to show some content; but I don't need it anymore

Thank you @razonyang

[razonyang]

@FuadEfendi So that branch is working right? If so, I'll merge it later.