気まぐれ備忘録

Hugoテーマ「axiom」をカスタマイズしてみたよ

こんにちは。

Hugo のテーマ、axiomから、主に下記内容をカスタマイズしたときの備忘録です。

  • FontAwesome アイコンの導入
  • 記事内フォントをNoto Sans JPへ変更
  • markdown 内での RAW HTML 許可
  • リンクテキストの CSS 変更

詳細のコードはGitHubで公開しているので、必要な方・急いでいる方はご覧くださいませ。

markdown 内での RAW HTML 許可

これを実装しないと FontAwesome アイコンが使えないですからね。変えました。


[params]
disableThemeAttribution = true

FontAwesome の導入

~/static/webfontsに、FontAwesome のフリー版を配置しました。後述のカスタム CSS で import します。

カスタム CSS の導入

axiom では、テーマ CSS のカスタマイズが可能となっています。 assets/custom.cssに CSS を実装することで、お好みのスタイルで上書きすることができます。

 


@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap");
@import url("/webfonts/css/all.min.css");

.font-content-title,
.cdata > blockquote p,
.cdata > ol,
.cdata > p,
.cdata > ul {
font-family: "Noto Sans JP", sans-serif !important;
}

.font-content-title {
font-weight: 600;
}

.cdata a {
text-decoration: underline;
font-weight: bold;
color: rgb(0, 81, 173) !important;
}

ところがどっこい! axiom のテーマでは、デフォルト CSS ファイルの末尾にカスタム CSS をpost-cssで結合するため、 本来ファイル冒頭に書かなければ動かない@importが機能しないのです。(このへん

ということで自アカウントに Fork して修正対応し、ついでに PR 投げておきました。 見てくれると良いな…。


上記の他にもconfig.tomlを色々いじっています。

Fork してのカスタマイズ、最初からオリジナルテーマ作れば良いのでは?それは言わない約束。

ということで、めでたしめでたし。