breadcrumbs - 如何为 Hugo 创建工作面包屑？

Question

令人难以置信的是，使用 Hugo 找到关于稍微更高级的技术的可靠信息是多么困难。

经过一段时间的搜索，我找到了 this article用一种非常好的方式为 Hugo 实现面包屑。

我稍微修改了一下，不向最后一条路径添加不必要的链接，并利用 i18n 将 URL 段转换为更易于阅读的内容。我还做了一个小的解决方法来删除一些与翻译条目不匹配的不需要的踪迹:

{{- $url := replace .Permalink ( printf "%s" ( "/" | absLangURL ) ) "" -}}
{{- $url := replace .Permalink ( printf "%s" ( "/" | absLangURL ) ) "" -}}
{{- $.Scratch.Add "path" ( "/" | absLangURL ) -}}

{{- $.Scratch.Add "breadcrumb" (slice (dict "url" ( "/" | absLangURL ) "name" "home" "position" 1 )) -}}
{{- range $index, $element := split $url "/" -}}
  {{- $.Scratch.Add "path" $element -}}
  {{- $.Scratch.Add "path" "/" -}}
  {{- if ne $element "" -}}
    {{- $.Scratch.Add "breadcrumb" (slice (dict "url" ($.Scratch.Get "path") "name" . "position" (add $index 2))) -}}
  {{- end -}}
{{- end -}}

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{{ range $.Scratch.Get "breadcrumb" }}{{ if ne .position 1 }},{{ end }}{
        "@type": "ListItem",
        "position": {{ .position }},
        "item": {
          "@id": "{{ .url }}",
          "name": "{{ .name }}"
        }
    }{{ end }}]
}
</script>

<nav class="breadcrumb">
  {{- $length := len ($.Scratch.Get "breadcrumb") -}}

  {{- range $index, $.Scratch.Get "breadcrumb" -}}

    <!--
    Assigning a constant as default value for i18n function
    if it doesn't match any entry
    Then check if current Breadcrumb item matches this constant,
    which means that part shouldn't be one of Breadcrumb's trail
    -->
    {{- $i18n := i18n ( print "breadcrumbs-" .name ) | default "__INTERNAL__" -}}

    {{- if not ( eq ($i18n) "__INTERNAL__" ) -}}

      {{ if eq ( (int .position) ) $length }}
  <span class="breadcrumb-item active">{{ $i18n }}</span>
      {{- else -}}
  <a class="breadcrumb-item" href="{{ .url }}" >{{ $i18n }}</a>
      {{- end -}}

    {{- end -}}

  {{ end }}
</nav>

它工作得非常好，除了据我所知，在浏览分页链接时，一切都开始复制 N 次，只要分页页面增加(即第 2 页的两倍，第 3 页的三次，依此类推)。

我搜索了更多，找到了 a similar implementation其中没有重复...但是链接都乱了，每个路径的URL都是所有路径的所有链接的串联o.O

我尽量避免在 Hugo 的“论坛”上提问，因为那里给出的答案大多难以理解、不完整或带有“伪伪代码”。

有谁知道如何进行这项工作并且可以帮我一把？

Answer 1

来自 Hugo documentation并建立在 Lars's answer :

创建一个名为 breadcrumbs.html 的文件在文件夹 layouts/partials您的雨果项目或主题

<ol  class="nav navbar-nav">
    {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ol>
{{ define "breadcrumbnav" }}
{{ if .p1.Parent }}
{{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  }}
{{ else if not .p1.IsHome }}
{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  }}
{{ end }}
<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
    <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a>
</li>
{{ end }}

包含 breadcrumbs.html您需要的地方:

{{ partial "breadcrumbs.html" . }}

这会生成所有有效的链接(包括部分)。