How to display ancestors, not just first section?

[TetraTheta]

Sorry for the vague title. I couldn't figure out better title for this problem.

---

By default, HB Cards Theme shows Topmost Section next to Estimated Read Time. I want to display the page's ancestors like 'Section 1 / Section 1-2 / Section 1-2-3', so I modified first-section.html like this:

{{- /* Don't use .FirstSection (everything become 'Blog') */ -}}
{{- with .CurrentSection -}}
<span class="hb-blog-post-section">
  <div class="badge bg-secondary text-decoration-none fw-normal">
    {{- range .Ancestors.Reverse -}}
      {{- if or .IsHome (eq .Title "Blog") -}}
        {{- continue -}}
      {{- end -}}
    <a class="bg-secondary text-decoration-none fw-normal" style="color: var(--hb-badge-color);" href="{{ .RelPermalink }}">{{ .Title }}</a>
    <div class="bg-secondary text-decoration-none fw-normal" style="display: inline-block; color: var(--hb-badge-color); opacity: 0.45;">&nbsp;/&nbsp;</div>
    {{- end -}}
    <a class="bg-secondary text-decoration-none fw-normal" style="color: var(--hb-badge-color);" href="{{ .RelPermalink }}">{{ .Title }}</a>
  </div>
</span>
{{- end -}}

I didn't want to show 'Blog' in sections, I added corresponding code too.

Here is a breif summary of this modified code.

The actual ancestors is like 'Blog / Section 1 / Section 1-2 / Section 1-2-3'. But like I said, I removed 'Blog' from the ancestors, so it will be like 'Section 1 / Section 1-2 / Section 1-2-3.
If you click 'Section 1', you'll go to Section 1(/blog/section-1/). If you click 'Section 1-2', you'll go to Section 1-2(/blog/section-1/section-1-2/), and so on.

But recent change broke my code. I tried to update my code to fit latest update, but I couldn't.

How can I fix my code to display things as it used to do?

---

PS. Should I create my own partial ancestors.html and ancestors-reverse.html for removing 'Blog' entry from .Ancestors? I'm doing same thing on Breadcrumb too, so I wonder if it aid performance or not.

[razonyang]

I'm afraid not possible, since it was cached by the firstSection.

https://github.com/hbstack/blog/blob/2b9c27f3353f66cb7c7a6e7852e4a066592769c3/layouts/partials/hb/modules/blog/post/card.html#L40

I can treat it a feature request instead, are you want to display the closest parent section instead?

[TetraTheta]

I want to display all ancestors except 'Blog' (not 'Docs', if present) as 'Section-1 / Section-1-2'. I'm already displaying closest parent section as categories, so displaying closest parent section as 'first-section' would look like duplicated.

I think I must override card.html too. Since I revert back to partial from partialCached, this will reduce performance gain from recent commits, though...

[razonyang]

I think I must override card.html too. Since I revert back to partial from partialCached

It's a workaround, but it would become a maintain issue, you'll have to check the changes and suit your needs.

[TetraTheta]

It would be very nice to have 'my needs' to be implemented as official feature, but I'm afraid that would be too niche use cases. That's why I decided to override layout files myself, even though it would lead this kind of problem - my workaround got broken after update -.

For example, the way I want to display 'first-section' will decrease performance because Hugo now have to dig through all of the pages' ancestors and filter them. But because I really wanted it anyway, I choose to override it.

You can consider my words as Feature Request, but I'm really afraid that my overrides would be considered as 'too niche use cases' and get rejected.

[razonyang]

Should I create my own partial ancestors.html and ancestors-reverse.html for removing 'Blog' entry from .Ancestors

Is there any reason to remove Blog? I think delete content/blog/_index.md achieves same goal.

I'm doing same thing on Breadcrumb too, so I wonder if it aid performance or not.

Yes, the newer changes cache partials which will produce same output as far as possible.

[TetraTheta]

I don't know well about partial cache, so I still wonder how will it affect performance. I haven't used it before...

As far as I know, 'filtered ancestors' will be used at 'Pages(for Blog, Docs, Series, Categories etc. pages)' and 'Article(article itself, for breadcrumb)'. So using partialCached in both first-section.html(for 'Pages') and breadcrumb/index.html(for Breadcrumb) will help performance, right?

Is there any reason to remove Blog? I think delete content/blog/_index.md achieves same goal.

I tried to rename content/b/_index.md(this is actual path) to @@@@@@_index.md to make it not recognized as _index.md. first-section becomes Bs. This looks like 'Blog' becomes 'Bs'.

I'm not 100% sure, but I think I need that _index.md...

[razonyang]

so I still wonder how will it affect performance

It just cache and reuse the output for pages, for example, section pages (list) blog/foo/bar/ and blog/foo/bar/page/2, has same breadcrumb (home / blog / foo / bar), caching the output with current section as the cache key, then reuse it for subsequence pages, so that theme won't have to execute template multiple time for pages has same breadcrumb.

If you've custom breadcrumb, you can tweak the layouts/partials/hugopress/modules/hb-blog-breadcrumb/hooks/hb-blog-main-begin.html, changes on here hbstack/blog@590bbd0.

[razonyang]

But I think this change may not affect your custom breadcrumbs, it just caching for non single/detailed pages

[TetraTheta]

If it only affects 'non-single/detailed pages'('Pages(for Blog, Docs, Series, Categories etc. pages)' that I said), then it is not what I want to modify instead. Breadcrumbs shows up in both 'non-single/detailed pages' and 'single/detailed pages'. I want to remove 'Blog' from both area.

But I'll try it after I create ancestors.html partial code myself to see if it works for both area or not.

[razonyang]

You can revert the layouts/partials/hugopress/modules/hb-blog-breadcrumb/hooks/hb-blog-main-begin.html's changes by creating it under your project if it doesnt meet your needs.

[razonyang]

With github.com/hbstack/[email protected], you can disable the first section by configuring cascade.

// hugo.yaml
cascade:
  - _target:
      path: /**
    params:
      meta:
        first_section: false

And then create hb-blog-post-meta hook, and save it as layouts/partials/hugopress/modules/hb-custom/hooks/hb-blog-post-meta.html, please do not forgot to configure it in params.yaml to tell hooks system to load it.

// params.yaml
// ...
hugopress:
  modules:
    hb-custom:
      // ...
      hooks:
        hb-blog-post-meta:
          cacheable: false

With this, you don't have to care about upstream changes, you can append any meta you want.

[TetraTheta]

From my (little) experiences, I don't think that is this case.
When port collision happens, Hugo process opened later will immediately be closed because it couldn't assign port it wants. I've experienced new Hugo window get immediately closed because old Hugo instance was already running few times.

I cleaned 'StandbyList' of Windows by running 'EmptyStandbyList', cleaned browser cache, made sure that there is no Hugo process is running by executing taskkill /f /im hugo.exe, then run Hugo server with port 80. Wrong header menu is highlighted again.

I will try to nuke all Hugo cache by deleting corresponding directory.

[razonyang]

Have no idea, I rarely develop on Windows, I'd recommend using other port when customizing templates to avoid encountering unexpected cases.

[TetraTheta]

Can you check if there is any check for 'insecure connection' among npm library you use/depend?

I tested random ports like 55(less than 1000), 443(HTTPS), 65500(very high port number), 80(HTTP). Only 80 had problem. In general, connection to port 80 is HTTP, which is insecure. I think there might be a condition that checks if connection is secure or not by checking port 80, rather than comparing URL scheme etc.

I'm not fan of using other ports than 80 when local test, but I'll use other port until I can figure out why this happens... Thank you for the massive help!

[razonyang]

Can you check if there is any check for 'insecure connection' among npm library you use/depend?

They are irrelevant, those packages are used to generate files (JS, CSS), nothing related to insecure connection, Google it may help, I didn't encouter related issues myself, couldn't help.

[TetraTheta]

Maybe I should change browser to test if this is only for current browser or not...

Thanks for the help! ❤