[FEATURE] Breadcrumb navigation

[renzhamin]

Describe the feature you want 描述你的功能需求

Breadcrumb navigation is necessary to make full use of the file structure organization of the posts and this is really useful for a blog with lots of content. Take a look at this site for example. Here is the source code.

I have tried this simpler implementation and placed it after the article tag in layouts/posts/single.html and it works just fine. It also works when placed in layouts/_default/section.html but it needs some styling

Useful reference 有价值的参考

No response

[keybasegit]

https://github.com/hugo-fixit/FixIt/blob/master/README.md The theme is based on Hugo loveit and has got elements from Hugo doit. It has got bredcrumbs.html

[mafendi]

Here:

_single.scss:

  .breadcrumbs-container {
    display: flex; /* Use flexbox to make the breadcrumbs appear in one row */
    align-items: center; /* Align the items vertically in the center */
    margin-top: 1rem;
    font-size: .875rem;
  }

  #breadcrumbs {
      list-style: none; /* Remove default list styles */
      //display: flex; /* Use flexbox to make the breadcrumb items appear in one row */
      align-items: center; /* Align the items vertically in the center */
      text-align: center;
      padding: 0; /* Remove default padding */
  }

  #breadcrumbs li {
      display: inline; /* Display the list items in a line */
  }

  #breadcrumbs li:not(:last-child)::after {
      content: "/"; /* Add a slash after each breadcrumb item except the last one */
      margin: 0 8px; /* Add some spacing around the slash */
  }

breadcrumbs.html:

<!-- HTML -->
<div class="breadcrumbs-container">
    <ul id="breadcrumbs">
        {{- range .Ancestors.Reverse }}
            <li><a href="{{ .RelPermalink }}">{{ if .IsHome }}Home{{ else }}{{ .Title }}{{ end }}</a></li>
        {{- end }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    </ul>
</div>

single.html:

{{ partial "breadcrumbs.html" . }}

[mafendi]

Here is how it looks alive: Link

[HEIGE-PCloud]

Although it is a Hugo's feature, DoIt does not support nested folder structure very well. I believe the original idea is everything should be placed under the posts folder, and they get organized by tags and categories.

Whether DoIt should improve its support for nested directories is another topic, but in the current situation, breadcurmb navigation is not really helpful since there is only one level for you to navigate to anyway. Hence I am closing this for now as it is not planned.