長らく放置してしまってブログを書く場所に困ったのでこのブログの環境を整備し直した。

テーマのバージョンアップもしたが、その時に色々と気になっていた事を直したのでそのログ。

Postsの幅の拡張 Link to heading

Postsページの一覧の幅が小さく、日本語のように文にスペースがない言語だと改行がおかしくなってしまっていた。

assets/ の下においたファイルをconfigの params.customSCSS で読み込めるようなので、以下のような assets/scss/custom.scss をファイルを用意して読み込むことで解決した。

.list {
  ul {
    li {
      .title {
        flex: 9;
      }
      .date {
        flex: 1;
      }
    }
  }
}

configフィアルには以下のように設定を追加。

customSCSS = [
  "scss/custom.scss",
]

フォントをNoto Font Japaneseにする Link to heading

デフォルトで中国語フォントを読み込んでしまったのと、設定されているフォントがあまり好みではなかったため、日本語が使われる箇所だけNoto Font Japaneseにしたかった。

とりあえず下記ページから、Light、Regular、Boldを選択してCSSを生成。

https://fonts.google.com/noto/specimen/Noto+Sans+JP

軽く調べたが設定等からheadタグのlinkを追加する等はできなさそうだったため、上記のページで生成したCSSをそのままダウンロードしてプロジェクトに配置し、そのCSSをcustomCSSで読み込む方針にした。

上記で作ったCSSを noto+sans+jp.css というファイルでassets/cssに保存し、ビルド時に読み込めるようにconfigに以下のように追記。

customCSS = [
  "css/noto+sans+jp.css"
]

Postsの一覧の幅調整時に作ったSCSSを最終的に以下のように設定することで日本語を使う可能性のある箇所でNoto Sans JPが使われるようにした。

body {
  font-family: 'Noto Sans JP', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Sans JP', sans-serif;
}

.list {
  ul {
    li {
      .title {
        flex: 9;
        font-family: 'Noto Sans JP', sans-serif;
      }
      .date {
        flex: 1;
      }
    }
  }
}

i18nの上書き Link to heading

言語設定をjaにするとPost一覧やタグ一覧のタイトルが日本語になる。

ただ、ちょっと見た目がダサいのでタイトルだけは英語にしたい。

i18n対応で変えられるので、ルートにi18nディレクトリを作成し、その中にja.tomlファイルを作成。

以下の英語のtomlファイルの内容をコピペすることで無事英語にできた。

https://github.com/luizdepra/hugo-coder/blob/main/i18n/en.toml

部分的に日本語を残すこともできるが、精査するのも面倒なため一旦は全部コピペで対応。