如何为Hugo创建工作面包屑?

时间:2017-08-29 16:16:12

标签: breadcrumbs hugo

令人难以置信的是,与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页的两倍,等等)。

我搜索得更多,发现a similar implementation没有重复...但链接都搞砸了,每条路径的网址都是所有链接的串联所有的路径oO

我尽量避免在Hugo&#34;论坛&#34;因为那里给出的答案大多数时候难以理解,不完整或者使用&#34;伪伪代码&#34;。

有谁知道如何使这项工作能够帮助我?

4 个答案:

答案 0 :(得分:2)

Hugo documentation开始并以Lars's answer为基础:

  1. 在Hugo项目或主题的文件夹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 }}
  1. 在需要的地方包含breadcrumbs.html
{{ partial "breadcrumbs.html" . }}

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

答案 1 :(得分:1)

只需两步,灵感来自:http://hugocodex.org/add-ons/breadcrumbs/

  1. 在您的Hugo项目的文件夹breadcrumbs.html中创建一个名为layouts/partials的文件
<span>
    <a href="/">Home</a>
    {{ range (split .URL "/") }}
        {{ if gt (len . ) 0 }}
            / <a href="/{{ . }}">{{ humanize (replace . "posts" "blog") }}</a>
        {{ end }}
    {{ end }}
</span>
  1. 在需要的地方包括breadcrumbs.html

{{ partial "breadcrumbs.html" . }}

答案 2 :(得分:0)

我被迫停止编码,但是自从这个问题今天弹出来通知我以来,让我展示一下我为解决问题中提出的问题所做的工作,即使我无法真正解释为什么发生-或-如果如今在较新版本的雨果中仍然发生这种情况(我已停止使用v0.28)

好吧,在进行MUCH测试之后,我只是使用“点”的范围初始化了一个模板变量,该变量在调用时传递给部分模板,并且在部分中,而不是从美元的上下文中调用Scratch-符号(或任何在Hugo / Go中称为的符号)我使用了初始化的变量:

list.html

{{ partial "breadcrumbs.html" . }}

partials / breadcrumbs.html

{{ $dot := . }}
{{ $dot.Scratch.Set "path" "" }}
{{ $dot.Scratch.Set "breadcrumb" slice }}

<!-- Rest of the code in the original question -->

然后从它们开始,例如:

{{ $.Scratch.Add "path" $element }}

我用过:

{{ $dot.Scratch.Add "path" $element }}

所有分页元素都不能重复。

答案 3 :(得分:0)

我写了关于添加 breadcrumb partial for hugo with strucutred data 的博文。

不要只向搜索引擎爬虫显示机器可读的面包屑,还要向用户显示同样的内容。我的博文详细介绍了该主题。

在这里回答这个问题是我对爬虫的偏爱。

{{ $url := replace .Permalink (printf "%s" .Site.BaseURL) ""}}
{{ .Scratch.Add "path" .Site.BaseURL }}
{{ .Scratch.Add "breadcrumb" (slice (dict "url" .Site.BaseURL "name" "Home"))}}
{{ .Scratch.Add "permalink" .Permalink }}
{{ .Scratch.Add "title" .Title }}
{{ $pScratch := .Scratch }}

{{ range $index, $element := split $url "/" }}
  {{ $pScratch.Add "path" $element }}
  {{ $pScratch.Add "path" "/" }}
  {{ if ne $element "" }}
    {{ if eq ($pScratch.Get "path") ($pScratch.Get "permalink") }}
        {{ $pScratch.Add "breadcrumb" (slice (dict "url" ($pScratch.Get "path") "name" ($pScratch.Get "title")))}}
    {{ else }}
        {{ $pScratch.Add "breadcrumb" (slice (dict "url" ($pScratch.Get "path") "name" (humanize .)))}}
    {{ end }}
  {{ end }}
{{ end }}

<script type="application/ld+json">
  [{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {{ range $index, $breadcrumb := .Scratch.Get "breadcrumb" }}
        {{ if ne $index 0 }},{{ end }}
          {
            "@type": "ListItem",
            "position": {{ add $index 1 }},
            "name": "{{ $breadcrumb.name }}",
            {{ if ne $breadcrumb.url ($pScratch.Get "permalink") }}
              "item": {{ printf "%s" $breadcrumb.url }},
            {{ end }}
          }
      {{ end }}
      ]
    }
    {{ range $index, $category :=  .Params.categories }}
      ,
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "{{$.Site.BaseURL}}",
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Categories",
            "item": "{{$.Site.BaseURL}}categories/",
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "{{ humanize . }}",
            "item": "{{$.Site.BaseURL}}categories/{{.}}",
          },
          {
            "@type": "ListItem",
            "position": 4,
            "name": "{{ $pScratch.Get "title" }}",
          },
        ]
      }
    {{ end }}
    ]
</script>