astro frontend masters

これは、フロントエンド マスターの Astro コースの関連リポジトリです。

設定

このリポジトリのstartブランチには追加のアセットが含まれており、コースの開始点として使用されます。

このコースでは Node バージョン 18 を使用することをお勧めします。

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

私たちは何を構築しているのでしょうか?

多くの (ほとんどの?) Web サイトが従うことになる一般的なワークフローをいくつか使用する小規模ビジネスのサイト。

• マーケティングのランディング ページ
  • ヒーロー画像
    • 画像処理
  • カード
    • 注目の製品
  • ニュースレターのキャプチャ
• 店
  • 高度なレイアウト (ネスト)
  • 共有状態
    • ソリッドカート
    • 反応アイテムボタン (カートに追加)
    • Nano ストアで状態を共有する
• ブログ
  • コンテンツコレクション
    • マークダウン
  • 動的ルート
  • RSSフィード
• について
  • マークダウンページ
• 404ページ

どのような機能をカバーしたいのでしょうか?

• 新しい Astro サイトの初期化
• 地域発展
• ページ
  • サポートされているファイルの種類
    • アストロ
    • マークダウン
    • HTML
  • 基本的なルーティング
  • リンク
  • カスタム 404 ページ
• アストロコンポーネント
  • フロントマター
  • スロット
• レイアウト
  • 基本的なレイアウト
  • 高度なレイアウト
• データの取得
  • Astro およびその他のコンポーネントでのfetchの使用
  • APIデータの読み込み
  • ヘッドレス CMS からの読み込み
• スタイリング
  • Astro コンポーネントのスタイル設定
    • スコープ付きスタイル
    • グローバルスタイル
  • CSS 用の Astro グッズ
    • class:list
    • define:vars
  • スタイルシートのインポート
    • 地元
    • npmパッケージ
  • フレームワーク内:
    • CSSモジュール
• 動的ルート
  • ビルド時に一度ページをレンダリングしたい場合
• ページネーション
• コンテンツコレクション
  • 基本的なセットアップと構成
    • スキーマの定義
    • カスタムスラッグ
  • コレクションを使用してページを構築する
    • リストページ
    • 完全なエントリーページ
• エンドポイント
  • RSS
  • API
    • 静的
• SSRモード
  • 動的ルーティング
  • リクエストごとにページをレンダリングしたい場合
  • APIエンドポイント
• 画像処理
  • assetsディレクトリ
• JS コンポーネントのハイドレート
  • client:*ディレクティブ
  • 複数のフレームワークを使用する
  • アイランド間の共有状態
  • フレームワーク間で状態を共有する