HugoでFontAwesomeを使う方法

2021-12-04 / 2021-12-04

HugoにFontAwesomeを使う場合はHugoの機能であるモジュールを使うと簡単に実現できます！

1. npmでFontAwesomeをインストール

package.jsonがない場合はnpm initしてください

npm install -D @fortawesome/fontawesome-free

2. config.ymlのmoduleに使いたいjsファイルをmounts

注意点としてmountすると、デフォルトであるtargetのルートディレクトリが無視されるので明示的に追加する必要があります

module:
  mounts:
    - source: static
      target: static
    - source: node_modules/@fortawesome/fontawesome-free/css/all.min.css
      target: static/css/vendor/@fortawesome/fontawesome-free/css/all.min.css
    - source: node_modules/@fortawesome/fontawesome-free/webfonts
      target: static/css/vendor/@fortawesome/fontawesome-free/webfonts

3. あとはheadで読み込ませるだけ

<link rel="stylesheet" href="{{ "css/vendor/@fortawesome/fontawesome-free/css/all.min.css" | absURL }}">

FontAwesome以外のライブラリでもいけるので、是非使ってみてください！

Hugoで年月別のアーカイブを作る方法

Hugoでアーカイブを作るには2種類ほど方法があります

①タグやカテゴリと同様にタクソノミーを設定する

config.ymlにarchiveを追加し

taxonomies:
  archive: archives

記事のフロントマターに年月を設定してあげれば

archives: ["2021年12月"]

こんな感じのデータが作成されます。この時「yyyy年mm月」の形式でないと年月でソートされないので注意です

    {{ .Site.Taxonomies.archives.Alphabetical.Reverse }}

    [
        {2021年12月 [WeightedPage(0,"Hugoで年月別のアーカイブを作る方法") WeightedPage(0,"HugoでFontawsomeを使う方法")]}
        {2021年10月 [WeightedPage(0,"Hugoに検索機能を追加しよう")]}
        {2021年9月 [WeightedPage(0,"Hugoを使い始めた人に捧げるTips11選") WeightedPage(0,"Go言語Tips② Hugoで使われるlayoutの正体")]}
    ]

新しく作る記事はarchetypesを更新してあげれば問題ないのですが、すでにある記事にarchiveを追加してあげるのは結構大変ですよね

Hugoに検索機能を追加しよう

このサイトにも実装されているんですが、Hugoにlunaを使った検索機能を実装する方法を紹介します。

基本的には公式で紹介されているgistを参考に実装します。（コメント下の方にvanilla js版を作ってくれた方がいました！感謝！）

こちらのサイトも参考にさせて頂きました。

1. lunrのセットアップ

npm install lunr lunr-languagesを実行してパッケージをインストールし、config.ymlに下記を追加します