Astroにブログ機能を追加した話

当サイトはAstroで組んでいるのですが、ニュース欄はすでにあってもブログ機能はなかったので、新しく追加した時の記録です。

コレクションを増やすところから

Astroには「Content Collections」という仕組みがあって、記事の型をconfig.tsに定義しておけます。すでにニュース欄で使っていたので、同じ要領でブログ用のコレクションを追加しました。

タイトル・日付・説明文・画像・タグ・下書きフラグ、くらいの最低限の項目を用意しておけば、あとから記事を書くたびにこの型に沿ってMarkdownを追加するだけで済む想定です。

つまずいたポイント: reCAPTCHAのバッジ

ブログとは直接関係ないけど、同じ時期にお問い合わせフォームにreCAPTCHA v3を入れた。ここで少しハマったのが、Astroはコンポーネントごとにスタイルがスコープされる仕組みになっていて、reCAPTCHAのバッジ要素はJS側で外部に注入されるため、そのままだとCSSが当たらないということが判明しました。

<style is:global>を使ってグローバルスコープでスタイルを書くことで解決しました。Astroでサードパーティのウィジェットを扱うときは、注入される要素がコンポーネントの外に出るケースがあることを覚えておくとよさそうです。

公開範囲の考え方

ブログは思い切ってトップナビには載せず、フッターだけからたどれるようにしました。検索エンジンにはインデックスさせる(noindexは付けない、サイトマップにも含める)方針にしたので、検索経由で見つけてもらいつつ、サイトの顔であるトップページ側の見え方はシンプルなまま保つようにしました。

「導線は用意するけど目立たせすぎない」くらいの温度感が、今のところちょうどいいと思っています。