HugoでStackテーマを使うときの初期設定

ブログ用SSGsとして Hugo を使うなら好きなテーマを使いたい。
自分はテーマとして Stack を選択したので、その場合の初期設定を残しておく。

※なお、Stack 独自の設定と Hugo の設定が混じっているので注意。

全般の設定・変更

※そもそも hugo.toml は個人的に見づらいので hugo.yaml に変更した。
世の中の記事は toml の方が多いので一長一短だと思う。

日本語設定

デフォルト設定のまま記事に日本語を使うとワードカウントなど一部機能が上手く動かないらしいので、以下の設定を追記する。

languageCode: ja
hasCJKLanguage: true
# defaultContentLanguage: ja # 国際化対応は en のままにしている。お好みで。

※ hasCJKLanguageのドキュメント

改行方法の変更

Markdownで改行を入れるのは空白二つが必要だが、いちいち入れるのは面倒なので普通の改行（Enter）で改行になるように設定する。

markup:
  goldmark:
    renderer:
      hardWraps: true

左サイドバーの設定・変更

左のサイドバーをいい感じにしていく。

アバター画像を追加

PROJECT_ROOT/assets/img/avatar.png を置く。

SNSアイコンの追加

実は hugo.yaml で管理する。
iconを増やしたければ PROJECT_ROOT/assets/icons/ 下に入れる。

menu:
  social:
    - identifier: github
      name: github
      url: https://github.com/your-github-url
      params:
        icon: brand-github

右サイドバーの設定・変更

右のサイドバーをいい感じにしていく。

検索窓の追加

一部のウィジェット系はそもそもそのページを用意しなければならないらしい。
https://stack.jimmycai.com/config/widgets

検索窓はそれにあたるので、サンプルを参考にしながらページを追加する。
その後、yamlに設定を追記する。

params:
  widgets:
    homepage:
      - type: search

カテゴリ・タグ一覧の追加

カテゴリやリンクの枠自体は簡単に追加できる。

params:
  widgets:
    homepage:
      - type: categories
        params:
          limit: 10

実際にカテゴリやタグは投稿マークダウンのメタデータに書くと追加される。
イメージはこちら：
https://github.com/CaiJimmy/hugo-theme-stack-starter/blob/master/content/post/hello-world/index.md?plain=1

CSSの設定・変更

いくつか気になる点があるので CSS を修正する。
Stack にカスタムCSS を当てるには PROJECT_ROOT/assets/scss/custom.css という場所があるのでそこに当てたいCSSを追記する。

日本語フォントの導入

デフォルトでも日本語は使えるがフォントが微妙。
最強の Noto Sans JP を入れる。

やり方としては、PROJECT_ROOT/layouts/partials/head/custom.html を作成し、その中でフォントを <link> で読み込む。
その後、CSSで以下を記述した。

:root {
  --base-font-family: "Noto Sans JP", Lato, var(--sys-font-family), var(--zh-font-family), sans-serif;
}

なぜこのようなやり方かというと、 hugo-theme-stack のレイアウトとCSSがそのようになっていたからだ。
それを上書きしているイメージ。

参考個所は

hugo-theme-stack/assts/scss/variables.scss の --base-font-family の定義場所
hugo-theme-stack/layouts/partials/head/ の中

正直レイアウトのテンプレートの動きがよくわかっていないので要調査という感じ。

コードブロックの修正

コードブロックがこんな感じで角ばっている：

↑ CSS修正したくなるスクショ

というわけで padding と radius を入れてCSSを修正した。
フロントエンドはあまり触らないのでより良い書き方があれば教えていただきたい。

/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */
.article-content .highlight pre {
  padding: 10px 15px;
  border-radius: 15px
}

コードスパンの修正

非ダークモード時のコードテキスト内の文字の色が薄くてやや読みづらさがあったので修正する。

:root {
  --code-background-color: #215aa012;
  --code-text-color: #555;
}

aタグのCSSの修正

なんかhoverすると謎の背景アニメーションがあるので消す。
aタグの色やアンダーラインも修正する。

.article-content a {
  color: #0f83fd;
}

a.link {
  box-shadow: none;
}

a.link:hover {
  box-shadow: none;
  text-decoration: underline;
}

終わりに

自分のブログなのでどんどん自分好みに改造していきたい。