はてなブログからHugoを使ったブログの移行が全然進んでいないので、また少しずつ進めようと思います。
Hugoのテーマによって仕様が異なると思うので自分メモです。
もとのテーマ：clarity
☆今回の作業をやった後に見つけた記事です。同じような方がいて嬉しい♪
Hugoテーマの選定(clarity)と表示カスタマイズ | damのブログラミング雑記ブログ
ファビコンの変更
svgファイルでファビコンを作りました。
svgファイルが表示されない場合に備えてpngファイルも用意しました。
<link rel="icon" type="image/svg+xml" href="http://localhost:1313/icons/favicon.svg"> <link rel="icon alternate" type="image/png" href="http://localhost:1313/icons/favicon.png">
このコードをどこに書くのか、ファビコンのファイルをどこに置くのかを探しました。
themeディレクトリの外に置いてファイルの上書きをする
/themes/hugo-clarity の中のファイルを編集しても、scssファイル同様、テーマ元が更新されれば書き換わってしまいます。
なのでtheme内の該当ファイルをコピーして、配置しました。
/themes/hugo-clarity/layouts/partials/favicon.html このファイルを
/layouts/partials/favicon.html
ディレクトリを作ってここへ置きました。
partialsディレクトリに入っている他の各htmlファイルも同じようにコピーしてthemeの外に置いてテーマのカスタマイズができるようです。
favicon.html
{{- $iconsDir := default "icons/" .Site.Params.iconsDir }}
{{- $appleTouch := absURL (printf "%s%s" $iconsDir "apple-touch-icon.png") }}
{{- $favicon := absURL (printf "%s%s" $iconsDir "favicon.svg" ) }}
{{- $faviconAlt := absURL (printf "%s%s" $iconsDir "favicon.png" ) }}
{{- $manifest := absURL (printf "%s%s" $iconsDir "site.webmanifest" ) }}
<link rel="apple-touch-icon" sizes="180x180" href="{{ $appleTouch }}">
<link rel="icon" type="image/svg+xml" href="{{ $favicon }}">
<link rel="icon alternate" type="image/png" href="{{ $faviconAlt }}">
<link rel="manifest" href="{{ $manifest }}">
今度はファビコン画像の置く場所を確認します。
/themes/hugo-clarity/static/icons にファビコンやアイコン関係の画像がいろいろありました。
favicon.icoもあったのですが、↑のコードには書かれていない様子。どこかで使われているのでしょうか。
ひとまず変更後の apple-touch-icon.png、favicon.svg、favicon.pngを
/static/icons へ置きました。
favicon.svgが表示されない
はじめChromeで表示されませんでした。コードの src のパスを叩いても表示されるのに、デベロッパーツールのNetworkをみてもリクエストされていない。
Safariでは表示されるのにChromeで表示できない...「Can I use」を見てもChromeは対応しているはずなのに謎でした。
ローカル環境だからなのかとも考えました。
結局他のロゴやサイト名変更などいじっている間に表示されるようになりました。謎の時差。
ロゴの変更
もとのテーマではヘッダーとフッターにそれぞれロゴが表示されています。
partialsディレクトリのheader.html、footer.htmlを見てみると該当の部分がありました。
さらにheader.htmlには
{{- partialCached "logo" (dict "logo" $logo "class" "nav_hide") }}
とあったので、logo.htmlが使われていることがわかりました。
フッターの方は、ロゴファイル名の変更（ロゴもpngからsvgに変更しました）、ロゴファイルの参照先はファビコンと同じ場所、ということがわかりました。
ヘッダーは少しややこしそうでした。
header.html（一部抜粋）
{{- $params := .Site.Params }}
{{ $logo := $params.logo }}
{{- partialCached "logo" (dict "logo" $logo "class" "nav_hide") }}
変数を見て、.Site.Params.logo でロゴの何かを設定しているのだろうと推測しました。
/themes/hugo-clarity/exampleSite/config/_default/params.tomlは「Params」と関係していそうなので、その中の「logo」部分を探すと、
logo = "logos/logo.png"
すごくこれっぽいです。このファイルをコピーして
/config/_default/params.toml を作って logo = "logos/logo.svg に書き換えました。
ヘッダーのlogo.svgが表示されない
またまたChromeで表示されませんでした。不思議なことにフッターのロゴは表示されましたがヘッダーが表示されませんでした。
ロゴファイルの参照先はあっていて、デベロッパーツールのNetworkを見てもリクエストされているのに、Elementsで見ると「レンダリングサイズ」が0x0になっていました。
そこで「レンダリング」で調べると、imgタグに width``height を指定しているとレイアウトシフトが起こらなくなるという記事が出てきて、レンダリングにも関係するかと思い設定してみました。
するとレンダリングもされて表示されました。
またもや謎でした。フッターと何が違うのか。こちらも時間が経てば表示されるものなのかもしれません。
サイト名の変更
title やロゴ画像の alt をサイト名に変えたいです。
サイト名はきっと同じところで管理されているのだと思います。
Site.Title が見つからない
head.htmlやheader.htmlを見る限りでは、サイト名は .site.Title で設定されているようです。
head.html（一部抜粋）
{{- $title := "" }}
<title>{{ with $title }}{{ . }} {{ $separator }} {{ end }}{{ .Site.Title }}</title>
「Params」のパターンと同じであればtitle.tomlというファイルですが、ありませんでした。
「title」や「Clarity」でファイル内検索をして /config.toml を見つけました。
title = "Clarity"
こちらを変更しました。
しかしなぜか変わらない
<title> の中身を直接入れてしまえば出るのですが、トップページ以下のページが上手く出し分けできなくなってしまうので困りました。
多言語のtitle設定
さらに「Clarity」でファイル内検索をすると、/config/_default/languages.toml が見つかりました。
languages.toml
[en] title = "Clarity" LanguageName = "English" weight = 1 [pt] title = "Claridade" # just for the sake of showing this is possible LanguageName = "Português" weight = 2
weight = 1 の英語のtitle表示が優先されていたようです。
英語もポルトガル語も対応させる予定はありません。
試しに[ja] を作って他をコメントアウトしたところ、多言語選択のボタンから「Japanese」を選択すると /jaがurlに入るようになりました。
記事がなく真っ白になりました。
ファイルごと消してしまっていいのかよく分からないので、ひとまずすべてコメントアウトして取っておくことにしました。
そうするとconfig.tomlの title の値が無事反映されました。
今後の課題・調べること
探り探りでやっとロゴとサイト名が変更できました！
このまま進めていくには限界があるので以下を調べつつカスタマイズしていきます。
- exampleSiteディレクトリは何に使われているか
もしかするとthemeディレクトリの中にカスタマイズ用のテーマを作って、その中にsiteディレクトリ、という構成なのかもと思い始めています。
ルートディレクトリにあれこれ置くのも、テーマやサイトの切り替えがなければ問題ないといいのですが。 - Hugoの文法を理解しよう
以前もGo言語を少し調べましたがすっかり忘れました。withとかif文のような文法がわからないとどうにもならなさそうです。 - 英語を読もう
ファイル内のあちこちにに英語でコメントがあるので、大事なヒントを拾っていきます。
英語を地道に読んでいくことが近道になりそうです。
同時進行で各メニューやカテゴリの表示など整えていきたいです。
