Hugo に Hugoplate テーマをインストールする2

Hitoshi Arakawa | 2024/11/05 Tue 04:45

以前 Hugo に Hugoplate テーマをインストールする方法を書いた。

Hugo に Hugoplate テーマをインストールする | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-09_installing-hugoplate-theme-on-hugo/

再びゼロから Hugo のサイトを作り直すことになったが、上記リンクに従えばいい。

その補足情報をメモしておく。

まず npm を使うために Node.js のインストールが必要だ。

Node.js ― Run JavaScript Everywhere
https://nodejs.org/en/

また Go のインストールも必要だ。

$ brew install go

依存関係のインストールは sudo を付けないとエラーが出た。すなわち以下のようにすればいい。

$ sudo npm install

Hugoplate テーマの多言語化方法については以前書いた。

[Hugo] Hugoplate テーマでの多言語化 | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-10_multilingual-site-with-hugo/

Hugoplate がアップデートされたのか、以前と {プロジェクト名}/i18n/ 内の言語ファイルの書き方が変わっていた。

新規投稿の方法は以下。

Hugo で多言語サイトにおける新規投稿 | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-12_creating-new-page-on-a-multilingual-hugo-site/

Hugoplate テーマでは、トップに通知バーが表示される。/config/_default/params.toml[announcement] の項目で非表示にできる。

フッターのソーシャルアイコンは以下をいじることで削除できる。

/themes/hugoplate/layouts/partials/essentials/footer.html

以下のファイルを作成することで新規投稿のデフォルトのテンプレートを設定できる。

/themes/hugoplate/archetypes/default.md

RSS フィードの出力数は、以前の Hugo では rssLimit = 50 のような書き方だった。

Hugo で RSS フィードの出力数を指定する|荒川仁志
https://note.com/hitoshiarakawa/n/n01b41c982c83

現在は以下のように書く。

[services.rss]
  limit = 50

RSS フィードは以下のように言語ごとに出力される。

日本語:
http://{ドメイン名}/blog/index.xml

英語:
http://{ドメイン名}/en/blog/index.xml

OGP 画像は /assets/images/og-image.png で設定する( /themes/ ディレクトリ内でも可能?)。

なぜかブログの投稿一覧ページで、画像が正しく表示されなくなった。結局原因が分からなかった。画像部分に小さい四角が表示され不格好なので、以下のファイルでサマリー部分のコードを非表示にした。つまり記事タイトルだけの一覧にした。

/themes/hugoplate/layouts/partials/components/blog-card.html

Matomo や Chatwoot のコードは、/themes/hugoplate/layouts/partials/matomo.htmlchatwoot.html を配置し、/themes/hugoplate/layouts/partials/essentials/head.html に以下を追記する。

<!-- Matomo -->
{{ partial "matomo" . }}

<!-- Chatwoot -->
{{ partial "chatwoot" . }}

参考:
Hugo に Matomo のコードを挿入する|荒川仁志
https://note.com/hitoshiarakawa/n/nce9ac7f6bc5d

hugo.tomldefaultContentLanguage、および config/_default/language.toml で日本語を正しく指定しよう。でないと、サイト内検索が動かない。

参考:
macOS に Node.js (npm) をインストールする方法 #Node.js - Qiita
https://qiita.com/gahoh/items/d2004f711748bf493f6a

MacでGo開発環境を準備する
https://zenn.dev/y16ra/articles/251c3770365689

Hugo で新規投稿|荒川仁志
https://note.com/hitoshiarakawa/n/nb866cdcedba8

rssLimit not working in Hugo 0.55 - support - HUGO
https://discourse.gohugo.io/t/rsslimit-not-working-in-hugo-0-55/18096/2

Amazon.co.jp: LOST シーズン1 コンパクト BOX [DVD] : マシュー・フォックス, エヴァンジェリン・リリー, ジョシュ・ホロウェイ, ドミニク・モナハン, イアン・サマーホルダー: DVD
https://amzn.to/48Ro8Nz