Featured image of post Hugo Stackテーマのカスタマイズ
Website Hugo

Hugo Stackテーマのカスタマイズ

これはなに Link to this heading

HugoのStack テーマを利用するにあたり、“config.yaml"などテーマに関連する設定を変更した。もう一度サイトを構築する際絶対に忘れているため、記録を残しておく。

本文で示す変更箇所は下記のとおりである。

  • サイト情報
  • 画像
  • サイトのリンク
  • 外部リンク
  • Widgets
  • Google Analytics
  • 言語
  • 多言語対応に関する設定
  • コメント機能の無効化
  • OpenGraphの設定
  • フォント
  • フッター
  • コードブロックの設定
  • コードブロックのカスタマイズ
  • default.mdのアレンジ

サイト情報の変更 Link to this heading

  • baseurlをサイトのHomeのURLに変更する
  • titleとdescriptionをオリジナルのものに変更する
  • footerに表示されるサイトの設立年を変更する
  • sidebarの絵文字やサブタイトルを変更する
config.yaml
baseurl: https://nakureis-notes.netlify.app

title: NakuRei's Notes
description: meta descriptionだよ

params:
  # ...
  footer:
    since: 2022

  sidebar:
    compact: false
    emoji:
    subtitle: サブタイトル
    # ...

画像の変更 Link to this heading

avatar画像とfaviconを作成1し、パスを指定する。

Stackテーマでは、avatarでlocalをtrueにし、assets\以下に画像を配置すると、サイズを自動で変更してくれる。

  • assets/img/avatar.pngにオリジナルの画像（150×150px）をオリジナルのものに変更する
    • あるいはavatar.enabledをfalseにする
  • static/img/favicon.pngを作成し、“config.yaml"にリンクを設定する
config.yaml
params:
  # ...
  sidebar:
    # ...
    avatar:
      enabled: true
      local: true
      src: img/avatar.png

  favicon: /img/favicon.png # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)

サイトのリンクの変更 Link to this heading

permalinksを変更すると、baseurl以降の各記事のリンクを変更できる。

config.yaml
permalinks:
  post: /post/:slug/
  page: /:slug/

外部リンクの変更 Link to this heading

左サイドバーにあるGitHubやTwitterなどのリンクを変更する。

config.yaml
menu:
  # ...
  social:
    - identifier: github
      name: GitHub
      url: https://github.com/NakuRei
      params:
        icon: brand-github

    - identifier: twitter
      name: Twitter
      url: https://twitter.com/nakurei7901
      params:
        icon: brand-twitter

Widgetsの変更 Link to this heading

サイトの右サイドバーに表示される情報を変更する。widgetは記述順に描画される。

config.yaml
params:
  # ...
  widgets:
    homepage:
      - type: search
      - type: categories
        params:
          limit: 10
      - type: tag-cloud
        params:
          limit: 10
      - type: archives
        params:
          limit: 5
    page:
      - type: toc
      - type: categories
        params:
          limit: 10
      - type: tag-cloud
        params:
          limit: 10

Google Analyticsの設定 Link to this heading

Google Analytics でアカウントを作成し、Webストリームを作成する。その後、作成したストリームの測定IDをgoogleAnalyticsに書き込む。

config.yaml
googleAnalytics: G-XXXXXXXXXX

言語の変更 Link to this heading

RSS出力に付与する文字コードlanguageCodeを日本語にする。

config.yaml
languageCode: ja

DefaultContentLanguageも日本語にする。これにより言語指定のないindex.mdがすべて日本語の記事として取り扱われる2。また、これに伴いhasCJKLanguageをtrueにする。これによりHugo内部の変数.Summaryと.WordCountが正しく動作するようになる。

config.yaml
DefaultContentLanguage: ja
hasCJKLanguage: true

多言語対応に関する設定の変更 Link to this heading

languagesを設定すると、サイトを多言語対応させ、言語ごとに各設定を変更できる。下記の例では、言語ごとにサイトタイトル、サブタイトル、meta descriptionを変更している3。

config.yaml
languages:
  ja:
    languageName: 日本語
    title: NakuRei's Notes
    description: meta descriptionだよ
    weight: 1
    params:
      sidebar:
        compact: false
        emoji: 🐦
        subtitle: サブタイトル
        avatar:
          enabled: true
          local: true
          src: img/avatar.png
  en:
    languageName: English
    title: NakuRei's Notes
    description: Example description
    weight: 2
    params:
      sidebar:
        compact: false
        emoji: 🐦
        subtitle: Sub title
        avatar:
          enabled: true
          local: true
          src: img/avatar.png

コメント機能の無効化 Link to this heading

個人的にコメント機能は必要性を感じないので無効化する。

config.yaml
params:
  # ...
  comments:
    enabled: false

OpenGraphの設定 Link to this heading

opengraphのtwitter.siteに自分のTwitterアカウントのアカウント名（@は除いたもの）を書く。

twitter.cardでは、Twitterで記事がシェアされるときの、カードのスタイルを変更できる。StackのOpenGraphの設定 ではsummaryとsummary_large_imageが選べる。好みなほうに変更する。

config.yaml
params:
  # ...
  opengraph:
    twitter:
      # Your Twitter username
      site: nakurei7901

      # Available values: summary, summary_large_image
      card: summary_large_image

フォントの変更 Link to this heading

Stackの標準では中国語のフォントが使われるため、これを日本語フォントに変更する。今回はZen Maru Gothic を適用する。ついでにコードブロックのフォントにRicty Diminished を追加する。

layouts/partials/head/にcustom.htmlを作成し、下記を記入する。

layouts/partials/head/custom.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<style>
  :root {
    --ja-g-font-family: 'Zen Maru Gothic', '游ゴシック', '游ゴシック Medium',
      'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic,
      'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';

    --article-font-family: var(--ja-g-font-family), var(--base-font-family);
    --base-font-family: var(--ja-g-font-family), 'Lato', var(--sys-font-family),
      var(--zh-font-family), sans-serif;
    --code-font-family: 'Ricty Diminished', Menlo, Monaco, Consolas,
      'Courier New', monospace;
  }
</style>

<script>
  (function () {
    const customFont = document.createElement('link');
    customFont.href =
      'https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap';

    customFont.type = 'text/css';
    customFont.rel = 'stylesheet';

    document.head.appendChild(customFont);
  })();
</script>

Stackでは、フォントがthemes/hugo-theme-stack/assets/scss/variables.scssにCSS変数で定義されている。 たとえば、記事本文のフォントは--article-font-familyで定義されている。記事のタイトルや記事カード、サイドメニューなどのフォントは--base-font-familyに定義されている。よって、これらに日本語フォントを加えれば、記事が日本語フォントで表示されるようになる。 また、コードブロックのフォントは--code-font-familyで指定されている。そのため、これに"Ricty Diminished"を加えている。

scriptには、Google Fonts から"Zen Maru Gothic"フォントを持ってくるためのコードを書いている。

フッターの変更 Link to this heading

Stackのデフォルトでは、フッターの著作権表示がサイトのタイトルになっている。個人的にはここを著者名にしたかったため、フッターをカスタマイズする。

フッターをカスタマイズするには、/layouts/partials/footer/直下にfooter.htmlを作成し、そこにカスタマイズ内容を書き込む。 Hugoではテーマよりも自作ファイルのほうが優先されるため、カスタマイズしたフッターがテーマよりも優先して利用される。

まず、“config.yaml"にauthorの情報を追記する。

config.yaml
author:
  name: Rei Naku

次に、もともとテーマに組み込まれているフッターをサイトにコピーする。

cp ./themes/hugo-theme-stack/layouts/partials/footer/footer.html ./layouts/partials/footer/

その後、コピーした"footer.html"を開き、{{ .Site.Title }}を{{ with $.Site.Author.name }} {{.}} {{end}}に変更する。

layouts/partials/footer/footer.html
8
9

-       {{ now.Format "2006" }} {{ .Site.Title }}
+       {{ now.Format "2006" }} {{ with $.Site.Author.name }} {{.}} {{end}}

これで、著作権表示をサイトのタイトルから著者名に変更できる。

ちなみに、Stackテーマの著作権表示は削除しないようにする。 公式ページにも下記の文言がある。

“Please do not remove the “Theme Stack designed by Jimmy” text and link.”4

コードブロックの設定 Link to this heading

デフォルトで行番号が表示されないように、“config.yaml"でlineNosをfalseにする。この設定のとき、行番号を表示したい場合は{linenos=true}をコードブロックに追加すると表示できる。

config.yaml
markup:
  # ...
  highlight:
    # ...
    lineNos: false

コードブロックのカスタマイズ Link to this heading

コードブロックでファイル名が表示されるように変更する。

ここでは、Hugo v0.93.0から使えるRender Hooks for Code Blocks を利用する。これを利用すると、Markdown Syntaxを利用したまま、コードブロックのスタイルをカスタマイズできる。

カスタマイズは、layouts/_default/_markup/に"render-codeblock.html"を作成して、そこにカスタマイズ内容を書き込めば良い。言語によってスタイルを変えたい場合は、“render-codeblock-bash.html"のように、ファイル名の後ろに言語名を付ける。

たとえば、ファイル名をnameで渡す場合、下記のようにカスタマイズする。

layouts/_default/_markup/render-codeblock.html
1
2
3
4
5
6
7
8

<div>
  {{- $name := .Attributes.name -}} {{ with $name }}
  <div class="code-block-filename">{{ . }}</div>
  {{ end }}
  <div class="code-block-content">
    {{- highlight (.Inner | safeHTML) .Type .Options }}
  </div>
</div>

{ }で渡した変数は、.Attributes.変数名で受け取れる。{{ with $name }} ... {{ end }}で囲うことで、$nameがある場合のみファイル名を表示するようにしている。

コードブロックの内容は.Innerで受け取れる。これをhighlight関数に渡すことで、コードをハイライト表示にできる。また、Hugoの機能でコードブロックに指定できる変数（e.g. hl_lines, linenostart）5は.Optionsに格納される。これをhighlight関数の第3引数に渡すと、デフォルトのコードブロックと同様にオプションを指定できる。

表示部分にクラスを指定し、CSSを書けば表示スタイルも変更できる。たとえば下記のようなスタイルを指定すると、下図のようなスタイルでファイル名を表示できる。

スタイルの例

render-codeblock.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<style>
  .code-block-filename {
    --code-filename-fontsize: calc(0.96em * 0.9);

    display: table;
    max-width: 100%;
    background: var(--accent-color-darker);
    color: var(--accent-color-text);
    font-size: var(--code-filename-fontsize);
    line-height: 1;
    padding-top: calc(var(--code-filename-fontsize) * 0.5);
    padding-left: calc(var(--code-filename-fontsize) * 0.7);
    padding-right: calc(var(--code-filename-fontsize) * 0.7);
    padding-bottom: calc(var(--code-filename-fontsize) * 0.7);
    border-radius: calc(var(--code-filename-fontsize) * 0.5)
      calc(var(--code-filename-fontsize) * 0.5) 0 0;
  }
  .code-block-content {
    padding-top: 0px;
  }
</style>

default.mdのアレンジ Link to this heading

新しい記事は"archetypes/default.md"に基づいて作成されるため、“archetypes/default.md"をアレンジすると記事を作りやすくなる。

個人的に使っている設定は下記の通り。

archetypes/default.md
---
title: {{ replace .Name "-" " " | title }}
description:
slug: {{ replace .Name "-" " " | title }}
date: {{ .Date }}
categories:
tags:
image:
math: false
license:
hidden: false
comments: false
draft: true
---

## これはなに

## 参考文献・URL

参考文献・URL Link to this heading

  1. 本サイトのavatar画像とfavicon画像は、Canva で作成した。 ↩︎

  2. ファイル名をindex.en.mdとすれば、英語の記事として取り扱われる。 ↩︎

  3. sidebarのsubtitleを変更するのにsidebarのパラメータをすべて記述しているが、こうしないとsidebarのパラメータが正常に動作しない。 ↩︎

  4. Stack | Card-style Hugo theme designed for bloggers （2022/11/19閲覧）より引用。 ↩︎

  5. 詳細はSyntax Highlighting | Hugo を参照。 ↩︎

Licensed under CC BY-NC-SA 4.0
最終更新 5月 21, 2023
© 2022 - 2024 NakuRei
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。