HugoでFontAwesomeのアイコンを使用してみた。

トップページの生成までは何とかいったので、リンクが内部ページか外部ページかをわかるようにアイコンを表示してみようと試してみた。
よく見かけるこんなやつ。

・https://fontawesome.com/ で探してみたら、「external-link-alt」という名前で存在しました。
　よし！使ってみようと思ったのですが、あれそういえばGutHubやTwitterのアイコンも同じで
　は、と思ったので表示部分を確認してみる。
　「D:\hugo\sites\hugo-site\themes\hyde-x\layouts\partials\sidebar.html」の表示部分が以下
　です。

<ul class="sidebar-nav">
  <li class="sidebar-nav-item">
  {{ with .Site.Params.github }}<a href="{{ . }}"><i class="fa fa-github-square fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.bitbucket }}<a href="{{ . }}"><i class="fa fa-bitbucket-square fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.stackOverflow }}<a href="{{ . }}"><i class="fa fa-stack-overflow fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.linkedin }}<a href="{{ . }}"><i class="fa fa-linkedin-square fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.googleplus }}<a href="{{ . }}"><i class="fa fa-google-plus-square fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.facebook }}<a href="{{ . }}"><i class="fa fa-facebook-square fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.twitter }}<a href="{{ . }}"><i class="fa fa-twitter-square fa-3x"></i></a>{{ end }}
  {{ with .Site.Params.youtube }}<a href="{{ . }}"><i class="fa fa-youtube-square fa-3x"></i></a>{{ end }}
  {{ if .Site.Params.rss }}<a href="{{ "/index.xml" | absURL }}" type="application/rss+xml"><i class="fa fa-rss-square fa-3x"></i></a>{{ end }}
  </li>
</ul>

・「class=”fa fa-github-square fa-3x”」となっててそれらしいclassを参照している。
　今度は読み込んでるCSSを確認してみる。
　「D:\hugo\sites\hugo-site\themes\hyde-x\layouts\partials\head.html」の読み込み部分が
　以下です。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

・「bootstrapcdn」とやらを読み込んでるみたいです。font-awesomeに関連するやつのようなの
　でそのまま使えそう。
　「D:\hugo\sites\hugo-site\config.toml」でひとまず試してみる。

　修正前：

[Menus]
  main = [
      {Name = "About ／ 自己紹介", URL = "/about/", weight = 1},
      {Name = "Works ／ 作業", URL = "/works/", weight = 2},
      {Name = "Blog ／ ブログ", URL = "https://blog.oyakata-life.net/", weight = 3}
  ]

　修正後：

[Menus]
  main = [
      {Name = "About ／ 自己紹介", URL = "/about/", weight = 1},
      {Name = "Works ／ 作業", URL = "/works/", weight = 2},
      {Name = "Blog ／ ブログ", URL = "https://blog.oyakata-life.net/", weight = 3, Post = ' <i class="fa fa-external-link"></i>'}
  ]

・修正して表示確認してみる。

・ブログの右にアイコンが出てくれるのを期待してたが表示されない。
　サイドメニューの表示部分を確認してみる。
　「D:\hugo\sites\hugo-site\themes\hyde-x\layouts\partials\sidebar.html」表示部分が以下
　です。

    <ul class="sidebar-nav">
      <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
      {{ range .Site.Menus.main }}
      <li class="sidebar-nav-item">{{ .Pre }}<a href="{{ .URL | absURL }}">{{ .Name }}</a></li>
      {{end}}
    </ul>

・https://gohugo.io/content-management/menus/ を見てもpost指定は可能だけど、このテーマ
　では使ってなかったみたい。
　「D:\hugo\sites\hugo-site\layouts\partials\sidebar.html」にコピーして以下のように修正し
　た。

<ul class="sidebar-nav">
  <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
  {{ range .Site.Menus.main }}
  <li class="sidebar-nav-item">{{ .Pre }}<a href="{{ .URL | absURL }}">{{ .Name }}{{ .Post }}</a></li>
  {{end}}
</ul>

・再度、表示確認をしてみる。