决定水一篇《给`hugo hello-friend-ng主题加一个面包屑导航》

在为hugo站点选主题的时候,一眼看中了hello-friend-ng,非常喜欢主题的logo设计,有种打开console等待输入的感觉。看Demo的时候我以为这就是面包屑导航,结果发现并不是,感觉有点可惜,于是想着自己改一改吧。

就是我这个菜鸡的水平不够,自定义CSS结果路径怎么设置都不对,只能直接和HTML丢在一起了。

下面就开始吧!

  1. 主题目录/layouts/partials下新增一个breadcrumb.html

  2. 编辑breadcrumb.html,代码如下:

    <div  class="breadcrumb">
      {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
    </div>
    {{ 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 }}
    
  3. 新增style.css,具体放在哪里我也不知道,所以我的做法是加入breadcrumb.html中,代码如下:

    /* breadcrumb */
    .breadcrumb {
        background: #fafafa;
        padding: 4px 15px;
        margin-bottom: 40px;
        list-style: none;
        border-radius: 5px; 
    }
    .breadcrumb>li{
        display: inline-block; 
        opacity: .7;
    }
    .breadcrumb>li+li:before {
        padding: 0 5px; 
        color: #ccc; 
        content: ">"; 
    }
    .breadcrumb li a{text-decoration:none;}
    .dark-theme .breadcrumb {background: #252627;}
    

    我调整过的代码如下:

    /* breadcrumb */
    .breadcrumb {list-style:none;}
    .breadcrumb li{display:inline-block;font-display: auto;}
    .breadcrumb li+li ::before{padding:0px 0px; content:"/";}
    .breadcrumb li a{text-decoration:none;}
    
  4. 完成以上步骤后,我们就获得一个面包屑导航插件了,可以插入你需要的页面。使用方式,在你需要的页面中,适合的地方插入{{ partial "breadcrumb.html" . }}。一般需要导航条的页面有single.htmllist.html

  5. 鉴于我自己的需要,我将面包屑导航插入logo.html。经过反复试验,插在<span class="logo__text"><span class="logo__cursor">中间。

    <span class="logo__text">{{ with .Site.Params.Logo.logoText }}{{ . }}{{ else }}hello{{ end }}</span>
    <span class="breadcrumb">{{ partial "breadcrumb.html" . }}</span>
    <span class="logo__cursor" style=
    
  6. 具体效果请看本站。

参考

Hugo 添加面包屑导航