Zenn
🦙

Hugo テーマ変更（Mainroad から Travelify へ）

2021/01/12に公開
Hugo
tech

テーマ乗り換え

先日、ブログ PROGRAMMERS OFFICEを Zenn に移行しました。
以降の記録は、前記事です。
WordPress から Hugo への乗り換え

が、ふと、ちょっと地味かなと、トップページにcarouselを入れたいなと思い立ち、そんなテーマを探したところ、Travelify が良さそうということで、乗り換えてみました。

Travelify

インストール

最初は、上記githubサイトにも書いてある通り、

cd themes
git clone https://github.com/balaramadurai/hugo-travelify-theme.git

としましたが、これだと最終的には、反映に失敗してしまうので、一旦削除して、submoduleとしてadd しました。

git rm --cached themes/hugo-travelify-theme
git submodule add https://github.com/balaramadurai/hugo-travelify-theme.git themes/hugo-travelify-theme

slider（カルーセル）の設定

もともと有効になっているので、ata/slider をコピーして、各yamlを編集します。
ただ、一つおかしかったのは、既定のyamlだと正しくリンクが動作しませんでした。
yamlにもう１行追加します。

Permalink: シンガポール2-2018年6月%E3%80%80五月天（メイデイ）

という感じです。

リンクしたいページのbaseurlの下を記載すれば良いです。
もともと存在する、url行と同じ内容で良いです。

記事ページ上部リンク

各記事ページの上部には、共有用リンクがつきます。
ただ、Facebook用のリンクは動作がおかしかったので、オフにしました。

[params.share]
    facebook = false

タグクラウドの日本語表示

最大の難関？

既定では、まず各タグの記事数が２より大きいものしか表示されないようになっているので、全タグを対象とするために、
data/l10n.toml ファイルの設定で、min_count = 0に変更します。

[widgets.tag_cloud]
    title = "Tag cloud"
    min_count = 0  # If you have many posts, then tag with just one topic makes the tag cloud cluttered. This variable can help reduce the clutter.

そして、ロジック変更ですが、まず、テンプレート自体を修正しても、githubコミット時に再取得されてしまうので、カスタマイズ用にファイルをコピーしてから修正する必要があります。
themes/hugo-travelify-theme/layouts/partials/widgets/tag_cloud.html
を
layouts/partials/widgets/tagcloud.html
にコピーしてこちらを修正します。（最初分からずにファイル名を変えてしまいましたがおそらくそのままで大丈夫）

そして、実は、なぜ日本語が表示されていないのか理解できていないのですが、Mainroad では表示できていたわけなので、そちらのロジックをいただいてきます。

    {{ with site.GetPage (printf "/%s/%s" "tags" ($name | urlize)) }}
    <a href="{{ .Permalink }}" style="font-size: {{ add ($value.Count) $mag_factor }}px;" title="{{ ($value.Count) }} topics">
      <!--a href="{{ $baseurl }}/tags/{{ $name | urlize }}"-->
      {{ $name | title }}
    </a>
      {{ end }}

から

    {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
    <a href="{{ .Permalink }}" style="font-size: {{ add ($value.Count) $mag_factor }}px;" title="{{ ($value.Count) }} topics">
      <!--a href="{{ $baseurl }}/tags/{{ $name | urlize }}"-->
      {{ $name | title }}({{ $value.Count }})
    </a>
      {{ end }}

に変更。（ついでに、記事数カウントも追加しています）

アーカイブwidget

Mainroad にもありませんでしたが、こちらの Travelify も、設定するとエラーになってしまうという開発中？の状態です。

ですので、先日作った Widget をこちらでも読み込むようにします。

やはり、テンプレートフォルダから
layouts/partials/widgets.html
にコピーしてきて、

    {{ partial "widgets/archives" . }}

の記述を追加します。

CSSカスタマイズ

配色の変更は、config.toml の、 [params] に

    custom_css = ["assets/mystyle.css"]

の記述を行います。

所感

Travelify、無難なデザインでありながら、細かい仕掛けもあるので良いテンプレートだと思います、

日本語情報がないのが辛いところだと思うので、この記事がお役に立てれば良いかと思いました。

Discussion