😊
さまざまなプラットフォームに公開しているコンテンツを集約してHugoで一覧を表示する
唐突にホームページを作り直したくなること、ありますよね。いまの僕がその状態です。そんなわけで、作り直しました。
作り直しのポイント
今回の作り直しにおける目新しい点としては、さまざまなプラットフォームで公開しているコンテンツを集約して一覧表示できるようにしたということです。
こんな感じで、新しいものから順に混ぜこぜにして表示しています。
Hugoで外部コンテンツの一覧を表示する
外部コンテンツを集約したデータを準備する
まず、上記のプラットフォームからコンテンツを集約したデータを作成します。具体的にはこんなJSONファイルを生成してあります。
Hugoのテンプレートで読み込む
HugoにはData templatesという、dataディレクトリに置かれたファイルをテンプレートからいい感じに読み取れる便利機能があります。ここでは、上記で準備したJSONをdata/feed.jsonにダウンロードしてきたものとします（拡張子が.xmlならRSSもそのまま読み取れるのですが、JSONの方が取り回しがいいのでそちらを用いています）。
以下のようにして、上記で準備したデータファイルをテンプレート内で読み込みます（プロパティ名はお手元のデータ構造に合わせて読み替えてください）。
{{ range $.Site.Data.feed.items }}
<img src="{{ .enclosure.url }}">
<a href="{{ .link }}">{{ .title }}</a>
<p>{{ .pub_date }}</p>
<p>{{ .description }}</p>
{{ end }}
データの更新
GitHub Actionsで定期的に更新するようにしています。詳しくはコンテンツを集約するコード、および、ホームページのリポジトリを参照してください。
まとめ
便利なプラットフォームがたくさんあるので活用していきつつ、しかしホームページはそれはそれでちゃんと作りたい。そんな願いを叶えるための一例でした。
Discussion