Astro - uki00a

Astro

#Snowpack #SSG #Node.js #Island_Architecture

概要

AstroはSnowpackベースのスタティックサイトジェネレータです

https://github.com/snowpackjs/astro

https://astro.build/blog/introducing-astro

特徴

Snowpackベース

Partial Hydration

セットアップ

code:shell

$ yarn create astro

$ yarn

デフォルトのディレクトリ構成

src/

components/ - 再利用可能なコンポーネントを配置

pages/ - ページ

public/ - 静的ファイル

CLI

devサーバの起動

code:shell

$ astro dev

設定

astro.config.mjsに記述します

ページ

src/pagesディレクトリ配下に*.mdまたは*.astroファイルを配置します。

Markdownページ

Astroはマークダウン形式でコンテンツを記述することもできます。

ページのレイアウトを変更したいときは、Front Matterのlayout属性で.astroファイルへのパスを指定します。

code:markdown

---

layout: ../layouts/default.astro

---

コレクション

v0.19.0でダイナミックルーティングが実装され、今後はそちらを使用することが推奨されています

コレクションはページの特殊系

単一のテンプレートから複数のページを生成したいときに使います(ページネーションとか)

通常のページとは異なり、ファイル名が$で始まります

ページネーション

createCollectionにpaginate: trueを渡すと、自動で有効化される

データの取得について

ページの中ではFetch APIとトップレベルawaitを使用してリモートデータを取得できます

ディレクティブ

client:only - 付与した要素はSSRされない(v0.19.0でサポート)

CSS

Tailwind CSSサポート

https://benborgers.com/posts/astro-tailwind

Astroオブジェクト

Astro.props

Astro.resolve() - テンプレート内から相対パスを解決するための機能(v0.19.0でサポート)