サムネイル画像や、記事一覧のデザインを修正します。
- 記事一覧のデザインを変更＆サムネイル画像の生成
frontmatterでのtitleの廃止
記事一覧のデザイン変更＆サムネイル画像の設定
これまでの記事一覧ページは、縦に投稿記事が並んでいるだけでしたが、カードタイプに変更します。
-
参考画像を用意する
参考にしたいデザインのスクリーンショットなどをとって、ローカルに配置します。 これは、後でGeminiに渡します。
-
Geminiに生成してもらう
下記の指示を
geminiさんに渡して実装してもらいます。@templates/index.html について、[Image ...sample.png] のようなデザインに変更したいです。 # 機能 - サムネイル画像は、`content/<Category>/<ArticleId>/thumbnail.<exp>`に配置する - サムネイル画像がない場合は、デフォルトの画像を利用する - サムネイル画像は`webp`に変換する - サムネイル画像のサイズは、`1200 × 630 px`とする - デフォルトのサムネイル画像は、`static/images/default-thumbnail.png`に配置 - 記事の概要は、記事内の`description`タグを参照すること - カードのレイアウトはPCだと3列のグリッドにして、SPだと1列 - カードの高さは、固定してはみ出し部分は省略して。 - 日付のフォーマットは、`YYYY-MM-DD`
サムネイル画像のパス指定
複数の記事で同じサムネイル画像を使いたい場合、すべての記事同じ画像を配置していると容量が無駄なので、staticディレクトリに配置できるようにします。
サムネイル画像のパス指定を`frontmatter`でできるようにしたいです。
## 機能
- frontmatterでのキーは`thumbnail`とする
- パスの指定では、`static/images/`以下のファイルのみを指定可能（`thumbnail: static/images/xxx.<exp>`）
- ビルド後は、`dist/images/...webp`に配置される
- frontmatterで`thumbnail`が指定されていない場合、現在の挙動を踏襲する
- 1. `index.md`と同じ階層にある`thumbnail.<exp>`を利用する
- 2. `index.md`と同じ階層にサムネイル画像がない場合は、`static/images/default-thumbnail.webp`を利用する
frontmatterでの title タグを廃止
frontmatterのtitleタグで記事のタイトルを決めていましたが、#で指定できるようにします。
`frontmatter`の`title`キーを廃止して、ボディ内の`#`タグをタイトルとしたい。