Table of contents
Open Table of contents
はじめに
astroが1年で大きくバージョンアップした。背景として、本ブログはastro-paperというテンプレートを使用している。 astro-paperもしっかりアップデートされていたので、それに合わせてアップデートした。
アップデートしてみて
- 画像の参照が楽に
- 以前は
publicディレクトリ配下に画像を配置していたが、v4からmdファイルと同階層にファイルを配置可能となった
- 以前は
- View Transition API
- ページ遷移時のグイグイ動く
- ビルド速度
- 体感的には速くなった
- Slugの仕様
- 以前はメタデータの
postSlugを指定していたが、v4からはファイル名をそのままslugとして使用するようになった - これにより、少し修正が必要になった（後述）
- 以前はメタデータの
テンプレートからの変更点
主に以下の点の変更を行った。テンプレートからアップデートを実施しようとしたが、マージの複雑さを避けるため、新たにリポジトリをクローンして手動で変更を行った。
- 日本語対応
- Italicの削除
- フォント ( M PLUS Rounded ) の変更
- ロケールの変更
- lang=“ja”に変更
- langTag=“ja-JP”に変更
- 時間表記をyyyy/MM/ddに設定
- 各種画像の差し替え
- favicon
- サイトロゴ
- OGP画像
- コンテンツの差し替え
- OGP画像の自動性生成 ( satori ) のフォントファイル追加
- カスタムslug ( 記事URLの末尾 ) の追加
- 以前は
postSlugを指定し、{投稿日}-{postSlug}としていた。 - これを
{投稿日}-{ファイル名}に変更した
- 以前は
Slugの実装について
astroは指定したコンテンツディレクトリ配下のパスを自動でslugとして使用する。
たとえば、src/content/blog/2024/02/astro-version-update/index.mdの場合、2024/02/astro-version-updateがslugとして使用される。ただし、/はslugとして使用できないため、-に変換する実装が必要となる。
以下のような関数を作成し、slugify関数を使用することで、slugを生成することができる。
export function slugify(str) {
return str
.toLowerCase()
.replace(/ /g, "-")
.replace(/[^\w-]+/g, "");
}
まとめ
感想としてはv4になり、ブログ記載に限っては少し快適になったとは感じた。ただ、テンプレートからの変更点が多く、手動で変更を行う必要があったので、それが少し大変だった。いずれ自分でテンプレート作成したい。
