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

2023-12-04 · 5 分で読了 · Hugo ·

共有する:

Hugoテーマの選定

Hugo ThemesのBlogタグから探して、一番良さそうだったClarityを選択した。おしゃれ（主観）で、ダークモードとライトモードもある。

テーマの導入

Githubリポジトリにいくつか導入方法が載っているが、ここではHugo modulesを使った方法を使用した。Git submodulesを使うのは「古い方法」らしい。

exampleSiteをコピーしてきてこれをカスタマイズする。

カスタマイズ

記事のテンプレートを変更する

archetypes/post.mdを変更する。コメントを翻訳したり、slugを追加したり、Page Bundlesを使用することにしたり、どうせ作成しないサムネイル類を非表示にしたりした。

 1---
 2title: "{{ replace .Name "-" " " | title }}" # タイトル
 3slug: "{{ .File.ContentBaseName }}" # URLのスラッグ（ファイル名から自動入力）
 4date: {{ .Date }} # 日時（自動入力）
 5description: "記事の説明" # 検索エンジン向け記事の説明
 6featured: true # 注目の記事に載せるかどうか
 7draft: true # 下書きかどうか。下書きは本番サイトに表示されない
 8toc: true # 目次を生成するか
 9# menu: main # 表示されるメニュー
10usePageBundles: true # Page Bundlesを使用する
11# featureImage: "/images/path/file.jpg" # 記事のトップ画像
12# featureImageAlt: "Description of image" # ↑のalt
13# featureImageCap: "This is the featured image." # ↑のキャプション（省略可）
14# thumbnail: "/images/path/thumbnail.png" # SNSからリンク貼ったときに表示されるサムネ
15# shareImage: "/images/path/share.png" # SNSからリンク貼ったときに表示されるサムネ
16# codeMaxLines: 10 # コードブロックで折りたたまれる行数（params.tomlからオーバーライド）
17# codeLineNumbers: false # コードブロックで行番号を表示する（params.tomlからオーバーライド）
18# figurePositionShow: true # 図番号を表示する（params.tomlからオーバーライド）
19categories:
20  - Technology
21tags:
22  - Tag_name1
23  - Tag_name2
24comment: false # コメントを無効にする
25---
26
27本文

パーマリンクを変更する

config/config.tomlに記述する。好きな形式を書く。

1[permalinks]
2post = "/:sections/:year/:month/:day/:slug/"

ついでにconfig/config.tomlのファイル名をconfig/hugo.tomlに変更する。Hugo 0.110.0からはhugo.tomlが推奨される。

言語を日本語にする

config/languages.tomlに記述して日本語を最優先にする。

Clarityは日本語に対応しているが、訳語を変更する場合はi18n/ja.tomlを作成する。overviewの訳は使用箇所的に目次が妥当そうなので変更する。

1[overview]
2other = "目次"

Markdown中の改行をしやすくする

デフォルトだとMarkdownの改行はそのままHTMLに反映されるため、文中で改行すると意図しない半角スペースが挿入される。config/_default/markup.tomlにこれを防ぐオプションを記述する。eastAsianLineBreaksStyle = "css3draft"を指定すると文頭がアルファベット（この記事で言えば「Git submodulesを使うのは～」の文など）の場合にも対応できる。

1[goldmark.extensions.cjk]
2enable = true
3eastAsianLineBreaks = true
4eastAsianLineBreaksStyle = "css3draft"

共有ボタンを変更する

layouts/partials/share.htmlを作成する。例えばMastodonやMisskeyを追加する場合は以下のようにする。

 1  <a
 2    href="https://donshare.net/share.html?text={{ .Title }}&url={{ .Permalink }}"
 3    class="mastodon"
 4    title="{{ $s }} Mastodon"
 5    target="_blank"
 6    rel="nofollow"
 7  >
 8    {{ partial "sprite" (dict "icon" "mastodon2") }}
 9  </a>
10  <a
11    href="https://misskeyshare.link/share.html?text={{ .Title }}&url={{ .Permalink }}"
12    class="misskey"
13    title="{{ $s }} Misskey"
14    target="_blank"
15    rel="nofollow"
16  >
17    {{ partial "sprite" (dict "icon" "misskey") }}
18  </a>

アイコンの追加はlayouts/partials/に適当なHTMLファイル（例: icons-extra.html）を作成して、テーマ側のicons.htmlを参考にSVGを記述する。それをlayouts/partials/hooks/body-end.htmlで読み込む。

1{{- partialCached "icons-extra" . }}

ライトモードでのアイコンの色をつけるには、SVGのpath要素にfill属性がない状態で、assets/sass/_custom.sassに色を記載する。

1// Icons
2.mastodon
3  svg
4    fill: #2b90d9
5
6.misskey
7  svg
8    fill: #86b300

faviconを変更する

static/icons/に置く。必要なファイルは以下。

static/icons/android-chrome-192x192.png
static/icons/android-chrome-256x256.png
static/icons/apple-touch-icon.png
static/icons/favicon-16x16.png
static/icons/favicon-32x32.png
static/icons/favicon.ico
static/icons/mstile-150x150.png

フォントを変更する

フォント指定はassets/sass/_override.sassに、定義はassets/sass/_custom.sassに記述する。font-weightは300, 400, 500, 700, 900が使われるかもしれない。

個人的には、特にゴシック体・サンセリフ体では和文フォントと欧文フォントの書体を合わせたいのでNoto Sans CJK JPにした。ローカルにある場合はローカルのフォントを、ない場合はWebフォントを使うことにする。Google FontsにあるのはNoto Sans Japaneseだけど違いはよくわからない。URLはNoto Sans JPだし。

 1// Fonts
 2@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap')
 3
 4@font-face
 5  font-family: 'Noto Sans CJK JP'
 6  font-weight: 100
 7  src: local('Noto Sans CJK JP Thin'), local('NotoSansCJKjp-Thin'), local('NotoSansJP-Thin')
 8
 9@font-face
10  font-family: 'Noto Sans CJK JP'
11  font-weight: 300
12  src: local('Noto Sans CJK JP Light'), local('NotoSansCJKjp-Light'), local('NotoSansJP-Light')
13
14@font-face
15  font-family: 'Noto Sans CJK JP'
16  font-weight: 350
17  src: local('Noto Sans CJK JP DemiLight'), local('NotoSansCJKjp-DemiLight'), local('NotoSansJP-DemiLight')
18
19@font-face
20  font-family: 'Noto Sans CJK JP'
21  font-weight: 400
22  src: local('Noto Sans CJK JP Regular'), local('NotoSansCJKjp-Regular'), local('NotoSansJP-Regular')
23
24@font-face
25  font-family: 'Noto Sans CJK JP'
26  font-weight: 500
27  src: local('Noto Sans CJK JP Medium'), local('NotoSansCJKjp-Medium'), local('NotoSansJP-Medium')
28
29@font-face
30  font-family: 'Noto Sans CJK JP'
31  font-weight: 700
32  src: local('Noto Sans CJK JP Bold'), local('NotoSansCJKjp-Bold'), local('NotoSansJP-Bold')
33
34@font-face
35  font-family: 'Noto Sans CJK JP'
36  font-weight: 900
37  src: local('Noto Sans CJK JP Black'), local('NotoSansCJKjp-Black'), local('NotoSansJP-Black')

1html
2  --font: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif

Hugo用のVSCode tasks.jsonを作成した