Hugoの無料配布されているテーマをインストールして、最初に直したい所が、
フォント
でした。
今回インストールしたテーマ「cleanwhite」は、おそらく中国方面の方が作られたようで、いわゆる「中華(中国語)フォント」が使われています。
そこで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が読まれていました!
localhostとabsURL
head.htmlに戻りまして...
{{ . | absURL }}
の| absURL
の部分が http://localhost:1313/
に相当します。
訳すと、
absURLとrelURLは、サイトのconfigファイルのbaseURLの値から作られます。
となります。
absURLは、 http(s)
から始まる「絶対パス」です。
relURLは、/
から始まる「 ルートパス」です。
現在のbaseURLはインストール時のままです(テーマ提供元のサイトURLです)。ホスティングする際はここを書き換える必要があります。
今はローカルホストでサイトを表示させているので、baseURLが設定されていてもabsURLはhttp://localhost:1313/
と解釈しているのですね。
***
html/templateのテンプレートの書き方、少しずつ覚えていきたいです。