Home › Q&A › Thread

请教下如何给 hugo-ivy 主题左侧的导航菜单增加 icon 图标？

你好，益辉

我看到 Maëlle Salmon 的个人网站上实现了这个功能，我也看了她网站的源码，我做了以下工作：

修改 config.yaml

menu 下增加 pre: '<i class="fas fa-home"></i>'

menu:
  main:
    - name: "首页"
      url: "/"
      weight: 1
      pre: '<i class="fas fa-home"></i>'

修改 head_custom.html

在 /layouts/partials/head_custom.html 文件中增加如下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

这两个部分的修改即使换成 Maëlle Salmon 的代码也仍然不工作，不知道问题出在哪里，特来请教，谢谢先！

1 Reply

yihui 2y ago

如其 README 文件所声明，hugo-ivy 主题不在我维护的范围内，任何新功能都只能靠你自己读懂源码之后去添加（或者找别人读懂）。

https://github.com/yihui/hugo-ivy/blob/master/layouts/partials/menu.html#L11

只能帮你到这儿了。

chuxinyuan 2y ago

感谢百忙中花时间提供指导，精准定位问题，问题基本解决。在此梳理下：

修改 menu.html

打开 /themes/hugo-ivy/layouts/partials/menu.html 文件

<li{{ if eq .URL $currentPage.RelPermalink }} class="active"{{ end }}><a href="{{ .URL }}">{{ .Name }}</a></li>

修改为：

      <li{{ if eq .URL $currentPage.RelPermalink }} class="active"{{ end }}>
        <a href="{{ .URL }}">
          <i class="fa {{ printf "fa-%s" .Pre }}"></i>{{ .Name }}
        </a>
      </li>

修改 head_custom.html

在 /layouts/partials/head_custom.html 文件中增加如下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

修改 config.yaml

menu 下增加一行代码 pre: home

menu:
  main:
    - name: "首页"
      url: "/"
      weight: 1
      pre: home

目前手机上效果比较满意，但是电脑上图标的位置跑到右边去了，比较丑，反而不够简洁，需要再打磨下或者取消这个功能，很可能选择后者。

yihui 2y ago

电脑上图标的位置跑到右边去了

这是因为为了把菜单项的黑点放到右边显示，整个菜单项的文字做了反向处理：https://github.com/yihui/hugo-ivy/blob/master/static/css/style.css#L194

很可能选择后者

个人建议你选后者。图片、图标都太杀时间，研究来研究去、选来选去、调整来调整去，时间都被吸走了。

chuxinyuan 2y ago

恩，加上显得赘余，之前的就挺好。这次就当是一次学习，学到了就赚了，谢谢你的建议 🤝