Astro
概要
特徴
セットアップ
shell$ yarn create astro
$ yarn
デフォルトのディレクトリ構成
src/
components/ - 再利用可能なコンポーネントを配置
pages/ - ページ
public/ - 静的ファイル
CLI
devサーバの起動
設定
ページ
src/pages ディレクトリ配下に *.md または *.astro ファイルを配置します。
Markdownページ
Astroはマークダウン形式でコンテンツを記述することもできます。
ページのレイアウトを変更したいときは、
Front Matterの
layout 属性で
.astro ファイルへのパスを指定します。
markdown---
layout: ../layouts/default.astro
---
v0.19.0でダイナミックルーティングが実装され、今後はそちらを使用することが推奨されています コレクションはページの特殊系
単一のテンプレートから複数のページを生成したいときに使います(ページネーションとか)
通常のページとは異なり、ファイル名が $ で始まります
ページネーション
createCollection に paginate: true を渡すと、自動で有効化される
データの取得について
ページの中では
Fetch APIとトップレベル
await を使用してリモートデータを取得できます
ディレクティブ
client:only - 付与した要素はSSRされない(v0.19.0でサポート)
CSS
Astroオブジェクト
Astro.props
Astro.resolve() - テンプレート内から相対パスを解決するための機能(v0.19.0でサポート)