Hugo - 中華フォントを直す(cssファイルの読み込み)

Hugoの無料配布されているテーマをインストールして、最初に直したい所が、
フォント

でした。

今回インストールしたテーマ「cleanwhite」は、おそらく中国方面の方が作られたようで、いわゆる「中華(中国語)フォント」が使われています。

f:id:yokoyoko_115:20200404000029p:plain
「記」が気になる

そこでcssを見てみると

body {
font-family: -apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
}

知らないものがいっぱい...。

調べた限りでは、
PingFang SC・・苹方ゴシック体。iPhoneの中華フォント
Hiragino Sans GB・・・ヒラギノ角ゴ簡体中文
STHeiti・・・中華フォント。「ST」と付くものは“埋め込み”ができないそうです
Microsoft YaHei・・・Windows Vista簡体字中国語版のUI用フォント
Microsoft JhengHei・・・Windows 10 でインストールされる繁体字中国語フォント

...と、中華フォント三昧でした。

日本語フォントにする

このままでは気持ち悪いのでフォントを変えます。

フォントの設定はcssのminファイルに書かれていたので、新しくcssファイルを作って読ませようと思います。

themes/hugo-theme-cleanwhite/layouts/partials/head.html がテンプレートのhead要素内にあたるので見てみます。

head.html

 <!--  Custom CSS  -->
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

ここを何とかすればよさそうです。

{{ }} とは

Go言語のテンプレート機構で使われる書き方でした。

静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る | さくらのナレッジ

Go言語では、text/templateやhtml/templateというテンプレート機構が標準で用意されている。Hugoではこのテンプレート機構をそのままレンダリングに使用している。

Go言語を少しかじったときには {{ }} は出てきませんでした。
書式を調べていくうちに慣れるといいですが。

head.html内では、.Site.Params.custom_css で配列名を指定していて、{{ range }}{{ end }}の間でループして配列の値を{{ . }}で出力しているみたいです。

ちなみに、{{ -- }} はそれぞれ前後の空白を削除する書き方です。
実際に後述するconfig.tomlのcustom.css部分のコメントアウトを外してみると、<link>要素が改行なしに出力されます。

テンプレート機能を使用する (text/template, html/template) | まくまくHugo/Goノート

{{ . | absURL }}. で配列の値を出力しているので、配列である custom_cssの中身を書き換えればよさそうです。
どこにあるのかと探すと、config.toml にありました。

config.toml

[params]
・・・(中略)・・・
# Include any custom CSS and/or JS files, url or relative to /static folder  
# custom_css = ["css/lightbox.css",   "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css", "css/main.css"]

custom_cssの部分を以下のように書き換えます。

custom_css = ["css/custom.css"]

すると、ソースにも

<link rel="stylesheet" href="http://localhost:1313/css/custom.css">

と出ます。 サイトを確認すると、custom.cssが読まれていました!

f:id:yokoyoko_115:20200409154218p:plain
日本語フォントになりました。游ゴシック。

localhostとabsURL

head.htmlに戻りまして...

{{ . | absURL }}| absURL の部分が http://localhost:1313/ に相当します。

absURL | Hugo

訳すと、

absURLとrelURLは、サイトのconfigファイルのbaseURLの値から作られます。

となります。
absURLは、 http(s) から始まる「絶対パス」です。
relURLは、/から始まる「 ルートパス」です。

現在のbaseURLはインストール時のままです(テーマ提供元のサイトURLです)。ホスティングする際はここを書き換える必要があります。

今はローカルホストでサイトを表示させているので、baseURLが設定されていてもabsURLはhttp://localhost:1313/ と解釈しているのですね。

***

html/templateのテンプレートの書き方、少しずつ覚えていきたいです。