Introduce

Hogo 的加载速度虽然快, 但是总有一些令人不太满意的地方, 例如 icon, 有些 theme 为了加载速度, 原生菜单不自带 icons, 但是我们往往希望在菜单栏有 icons, 不但为了页面美观, 而且图标也利于访客快速了解网站架构.

由于 Hugo server 的原理是将 markdown 文档利用内置引擎渲染成 HTML, 而且为了防止更新主题把我们的更改消除, 我们选择优先级更高的根目录 (即有 config.yml 的目录层级)

1. 引入特定图标

例如我想在菜单的 search 前面添加名为 magnifying-glass 的 icon, 以 Font Awesome 为例.

1.1 引入图标

在博客的根目录 (即有 config 的层级) 创建一个 fontawesome 的文件夹, 然后把我们下载的 magnifying-glass.svg 保存到该目录.

然后在 layout/partials 目录下面创建一个 fontawesome.html 文件, 在里面黏贴

1
2
3

<span class="inline-svg" >
{{ readFile ( print "fontawesome/" . "magnifying-glass.svg" ) | safeHTML  }}
</span>

这样我们就成功引入了图标, 但是这只是一个纯静态的图标, 如果想要有鼠标悬停动画还需要接着做点工作. 我们在该文件引入 fill=currentColor , 得到下面模板

1
2
3
4
5
6

<span class="inline-svg" >
{{- $fname:=print "fontawesome/" . ".svg" -}}
{{- $path:="<path" -}}
{{- $fill:="<path fill=\"currentColor\"" -}}
{{ replace (readFile $fname) $path $fill | safeHTML }}
</span>

1.2 调整样式

默认的格式不一定对所有主题都能完美兼容, 所以我们需要调整大小, 在 header.css 修改. 下面是我的配置, 但是你可能需要一些调整.

1
2
3
4
5
6
7

.inline-svg {
  display: inline-block;
  height: 1.15rem;
  width: 1.15rem;
  top: 0.15rem;
  position: relative;
}

1.3 使用

大功告成, 在 config.yml 做一个这样的目录即可显示图标

1
2
3
4
5

 - identifier: search
   Pre: "<i class='fa fa-magnifying-glass'></i>"
   name: Search
   url: search
   weight: 1

其他地方也可添加, 如 main 或者 footer 都可以.

2. 通过 script 进入

在 header.html 黏贴如下内容

1

<script defer src="/static/fontawesome/fontawesome-all.js"></script>

在想要使用的地方输入

1

<i class="fab fa-图标名"></i>

使用脚本可以很方便的使用图标, 但是也会对网络有一定要求, 国内可能会出现加载慢甚至失败的现象. Font Awesome 也可换成 Google Font , Eva Icons , 或者 iconfont 等任何图标库.