今まで使用していた Hugo のテーマを purehugo から Cabaret に変更した．設定やちょっとした変更を加えてたのでメモ．

Cabaret テーマについて

Cabaret は Red Lounge をベースとしたテーマ． Red Lunge, purehugo, Cabaret はともに軽量なCSSフレームワーク Pure.css を使用している．ベースとなる Red Lounge 同様に設定ファイルによりカスタマイズできる箇所が多数ある．

サイト全体の設定 (config.toml)

ファイル config.toml で設定するパラメータ．

トップページの表示

トップページ( index.html ) に表示する投稿の数や表示方法は params.filter できる．本文を全て表示する数を fullPostLimit で，サマリのみを表示する数を postLimit ，タイトルのみを表示する数を allPostLimit で，それぞれ設定できる．この他にどのタイプの投稿を表示するかを filed と value で設定する必要がある．次は設定例．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

[params.filter]
# Type of posts displayed at index.html
field = "Section"
value = "post"

# Number of posts displayed at index.html
allPostLimit = 20

# Number of posts displayed in summary
postLimit = 2

# Number of posts displayed in full
fullPostLimit = 0

ちなみにこのパラメータを設定しないと layouts/index.html で廃止された変数 $.Site.Recent にアクセスするためサイト構築時にエラー終了する．

サイドバーのナビゲーションリンク

サイドのナビゲーションリンクは menus.main で設定できる．リンクの表示順は weight で調整できる．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

[[menu.main]]
name = "home"
url = "/"
weight = 100

[[menu.main]]
name = "archives"
url = "/post"
weight = 200

[[menu.main]]
name = "categories"
url = "/categories"
weight = 300

[[menu.main]]
name = "about"
url = "/about"
weight = 400

サイドバーのソーシャルアイコン

サイドバーに表示されるソーシャルアイコンは params.social に設定する．2つのパラメータ icon と url が必須．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

[[params.social]]
icon = "twitter"
url = "https://www.twitter.com/toru_mano"

[[params.social]]
icon = "github"
url = "https://github.com/toru-mano"

[[params.social]]
icon = "facebook"
url = "https://facebook.com/toru.mano"

ちなみに， icon は次のように Font Awesome のアイコンの指定に使用されるので，通常とは異なるアイコンを設定することもできる（例えば github-alt など）．

1

<a href="{{ .url }}"><i class="fa lg fa-{{ .icon }}"></i></a>

投稿毎の設定

投稿ファイル *.md の front matter で設定するパラメータ．

ソーシャルシェアリング

共有アイコンが各投稿のタイトル下と最後に表示される．アイコンは facebook, google+, linkedin, twitter の4つ．次のように socailsharing = true と設定する．

1
2
3
4
5

+++
...
socialsharing = true
...
+++

バナー画像

バナー画像を挿入するには次のように banner.inline にて画像ファイルのパスを指定する．画像は右にフロートして表示される．

1
2
3
4
5
6

+++
...
[banner]
inline = "/img/hugo.png"
...
+++

対応するテンプレートは layouts/partials/post/bannerinline.html にあり，その中身は次のようになっている．

1
2
3

{{ if .Params.banner.inline }}
<img src="{{ .Params.banner.inline }}" class="pure-img content-banner-image-inline" />
{{ end }}

なお Red Lounge では有効だった banner.image は無効になっている．正確にはテンプレートは layouts/partials/post/banner.html に存在するが，使用されていない．これを利用したい場合は テンプレート layouts/_default/post/full.html を修正する必要がある．

その他

目次(Table Of Contents, toc)を表示するには toc=true と指定する．

1
2
3
4
5
6

+++
...
toc = true
totop = true
...
+++

修正した箇所

テンプレートの数カ所を環境にあわせるため修正した．

フォント

デフォルトではウェブフォントを使用しているが，このサイトは日本語なので出番なし．そのため， フォントを設定しているテンプレート layouts/partials/head/css/fonts.html からウェブフォントの設定を削除した．

そして， /css/cabaret.css からウェブフォントの指定を削除して新たに次のフォントを指定した．

1
2
3
4
5
6

html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
  font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
code, pre {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

アイコン

デフォルトでは favicon.png な favicon と apple touch 用のアイコン？ apple-touch-icon-144-precomposed.png が指定されている．しかし，手元には伝統的な favicon.ico しかないので layouts/partials/head/icons.html を次のように修正した．

1

<link rel="shortcut icon" href="{{ "/favicon.ico" | relURL }}">

Google Analytics

Google Analytics 用のテンプレートが layouts/partials//google_analytics.html にあるが，どうも使用されていない． Hugo は標準で Google Analytics 用のテンプレートをもっているのでそれを layouts/partials/bodyend.html に追加した．

1

{{ template "_internal/google_analytics.html" . }}

テーマ変更中に参考にしたサイト