JavaScriptを有効にしてください

HugoのテーマをZzoに変更した

 ·  ☕ 4 分で読めます

HugoのテーマをTranquilpeakから「Zzo」に変更しました。

はじめに

Hugoでブログを始めたとき、評価の高いらしいTranquilpeakテーマを選びました。
※参考 Hugoテーマのランキング表示ページを作った

難なく使えていましたが、独自のシェアボタン（はてなブックマーク）を追加しようとした際、「作り込まれていてどうしたら良いかよく分からない」という事態に陥りました。
通常ならシェア機能の部分を拡張するだけで済むはずなのですが・・・

色々検討したのですが、テーマをZzoに変更し、カスタマイズする事で対応できました。
ずっと欲しいと思っていた、サイドバーへの目次表示（QiitaのUIみたいな）も付いていました！

Zzoは見た目がゴテゴテしてるのが難点です。。
※ページ右上の水玉ボタンを押すと、テーマ色を切り替える事はできます
試してませんが「Theer」というテーマも良いかもしれません。
Hugoのテーマ「Theer」を作成しました

Zzoの適用、カスタマイズ

Hugoの再インストールが必要

適用して起動した際、エラーが出力しました。
Hugoのextendedバージョンを使用すると起動できるようになりました。

私はLinuxを使っているのでsnap installしました。
$ snap install hugo --channel=extended

元はapt installしていたので、削除しました。

初期設定

  • テーマを取得します
  • themes/zzo/exampleSite の中身をプロジェクトルートにコピーします。
  • プロジェクトルートの config.toml を削除します。

以下のようになります。

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

$ tree -L 2
├── archetypes
│   └── default.md
├── config
│   └── _default
├── content
│   └── en
│   └── ko
├── resources
│   └── _gen
├── static
│   ├── favicon
│   ├── images
│   └── manifest.json
└── themes
    └── zzo

※GitHubにも記載されていますが、config.tomlではなく、configディレクトリ内にconfigを記述します。

ここで hugo server コマンドを実行すると、ひとまず起動できるはずです。

言語設定

  • config/_default/config.toml 内の defaultContentLanguage = をjaに
  • config/_default/menus.en.toml をコピーして config/_default/menus.ja.toml を作る
  • content/enをコピーしてcontent/jaを作る
  • languages.tomlにjaを追加
1
2
3
4
5
6

[ja]
  title = "sakojunblog"
  languageName = "Japanese"
  weight = 1
  languagedir = "ltr"
  contentdir = "content/ja"

動作確認できたら、enやkoのファイルや設定は消すなりコメントアウトするなり。

シェアボタン（はてブ）追加

config/_default/params.toml に設定追加

1
2
3
4

[[share]]
  name = "twitter"
[[share]]
  name = "hatena"

themes/zzo/layouts/partials/body/share.html を修正。
※表示するボタンは、公式から好きなものを選んでコピペすれば良いです。

1
2
3
4
5
6
7
8

      {{ else if eq (lower .name) "whatsapp" }}
        <a href="https://web.whatsapp.com/send?text={{ $ctx.Title }} - {{ $ctx.Permalink | absLangURL }}" data-href="{{ $ctx.Permalink | absLangURL }}" class="donation__item" target="_blank" rel="noreferer" title="{{ i18n "line" | default "WhatsApp" }}" aria-label="WhatsApp Share Button" data-type="share">
          {{ partial "svgs/social/whatsapp.svg" (dict "width" 35 "height" 35) }}
        </a>
      {{ else if eq (lower .name) "hatena" }}
        <!-- ここにボタンのコードをコピペ -->
        <a href="https://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
      {{ end }}

まとめ

フォントや色が微妙とか、日時の表示が絵文字になってて見辛いとか、どうなのって所はありますが、目的は達成できました。
他にも menus.ja.toml から、使わないページを削除するなどの調整をしましたが省きます。

おまけ

他に検討したこと

  • GatsbyJSに乗り換える
    • Udemyの教材を買って一通りやってみました。
    • タグ一覧を作ってみたが動かず、ブログ作るだけでそんなに苦労してもな…となって意欲が下がりました。
  • VuePressに乗り換える
    • Qiitaの記事などを参考に作ってみましたが、動きませんでした。（バージョン変わったのかな？）
    • theme-blogを使うと、ブログを作ること自体はできました。
      ありもののテーマである事は変わらず、当初の目的である独自シェアボタン追加の方法が分かりませんでした。

簡単にはできそうに無いと分かり、今時点ではフロントエンドをがっつりやる予定もないので、Hugoのテーマ変更に切り替えました。

Tranquilpeakのシェアボタン生成

1
2
3
4

  [[params.sharingOptions]]
    name = "Twitter"
    icon = "fa-twitter"
    url = "https://twitter.com/intent/tweet?text=%s"

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

<ul class="post-actions post-action-share" >
      {{ if (not (eq .Params.showSocial false)) }}
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        {{ range .Site.Params.sharingOptions }}
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="{{ printf .url $.Permalink }}">
              <i class="fa {{ .icon }}"></i>
            </a>
          </li>
        {{ end }}
      {{ end }}

1
2
3
4
5
6
7
8

<ul class="share-options">
    {{ range .Site.Params.sharingOptions }}
      <li class="share-option">
        <a class="share-option-btn" target="new" href="{{ printf .url (substr (querify "x" $.Permalink) 2) }}">
          <i class="fa {{ .icon }}"></i><span>{{ printf (i18n "global.share_on") .name }}</span>
        </a>
      </li>
    {{ end }}

ぜんぜんわからん！

共有

関連記事