Hugoのテーマを使う上で、色々と調整したいところがある。
いったんこのサイトでは調整が落ち着いたため、どんなことをやったのかをまとめる。
基本的なcustom cssの設定方法
まず、テーマのcssがどこに記述されているかというと、このテーマでは<theme_name>/assets/scss/にある。
ここを直接編集すれば、もちろんcssはその通り読み込まれて調整できる。
しかし、大体の場合はthemeをsubmoduleとしてgitリポジトリ管理していたりするとそのファイルを書き換えたくないと思う。
さらに、go modを使った管理の場合は基本的に編集できない。
こういった場合のベストプラクティスは、プロジェクトルートのassets内に読み込ませたいファイルを置いていく方法である。
具体的なcustom css置き場は/assets/scss/である。
custom.scssを置いておけば、そのcssが読み込まれる。
このサイトでした調整
このサイトではStackというテーマを使っている。
「hugo theme」でググって一番上に出るサイトのトップの方にあってパット見で良さそうなのでこれにした。
日本語フォントにする
このテーマを使って最初に気になったのはフォントが中華フォントであること。
中華フォントの胡散臭さはなんとも言えないし、単純に見にくいので変える。
先にもだした、/assets/scss/custom.scssを編集してフォントを調整する。
/assets/scss/custom.scss
1
2
3
4
5
|
:root {
--ja-font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
--base-font-family: "Lato", var(--sys-font-family), var(--ja-font-family), sans-serif;
}
|
上記のように書いて、--base-font-familyに--ja-font-familyを入れる（もともとは--zh-font-familyが設定されている）。
↓調整後↓
コードブロックにファイル名をつける
コードブロックにファイル名を書けたら便利だと思う。
ファイル名をつけるという操作はcssだけでは難しい。
このときは、/layouts/に色々決まったhtmlファイルを作ることで調整できる。
コードブロックは/layouts/_default/_markup/render-codeblock.htmlを作ると良い。
/layouts/_default/_markup/render-codeblock.html
1
2
3
4
5
6
7
|
<div>
{{- $name := .Attributes.name -}}
{{ with $name }}<div class="codeblock--name">{{ . }}</div>{{ end }}
<div class="codeblock--content">
{{- highlight (.Inner | safeHTML) .Type .Options }}
</div>
</div>
|
/assets/scss/custom.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.codeblock--name {
color: var(--accent-color-text);
background-color: var(--accent-color);
width: fit-content;
padding: 0px 10px;
border-radius: 15px 15px 0px 0px;
margin-top: 4px;
margin-bottom: -2px;
font-size: initial;
}
.codeblock--content {
font-size: initial;
}
|
こうすることで、mdファイルに以下のように書くことでファイル名を表示できる。
```scss {name="/assets/scss/custom.scss"}
.codeblock--name {
...
```
インラインコードの調整
もとはコントラストがなさすぎて見にくい。
おまけに、paddingも調整する。
/assets/scss/custom.scss
1
2
3
4
5
6
7
8
|
:root {
--code-text-color: rgb(20, 20, 20);
--code-background-color: rgba(0, 0, 0, 0.07);
}
.article-content code {
padding: 3px 5px;
}
|
↓調整後↓
おわり
いままでは、hugoのテーマをそのまま使っていた（フォントが気に食わなかったら別のテーマに行くとかやっていた）ので結構自由度高くカスタマイズできることを知れてよかった。
以下に、調整済みのファイル全体を出しておく。おわり。
/assets/scss/custom.scss
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
27
28
29
30
31
32
33
34
|
:root {
--ja-font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
--base-font-family: "Lato", var(--sys-font-family), var(--ja-font-family), sans-serif;
--body-text-color: #707070;
--card-text-color-tertiary: #767676;
li.current span {
font-style: italic;
}
--code-text-color: rgb(20, 20, 20);
--code-background-color: rgba(0, 0, 0, 0.07);
}
.codeblock--name {
color: var(--accent-color-text);
background-color: var(--accent-color);
width: fit-content;
padding: 0px 10px;
border-radius: 15px 15px 0px 0px;
margin-top: 4px;
margin-bottom: -2px;
font-size: initial;
}
.codeblock--content {
font-size: initial;
}
.article-content code {
padding: 3px 5px;
}
|
/layouts/_default/_markup/render-codeblock.html
1
2
3
4
5
6
7
|
<div>
{{- $name := .Attributes.name -}}
{{ with $name }}<div class="codeblock--name">{{ . }}</div>{{ end }}
<div class="codeblock--content">
{{- highlight (.Inner | safeHTML) .Type .Options }}
</div>
</div>
|