Astro ActionsとFuse.jsでのパワー検索

静的サイトの生成は素晴らしいですが、課題を提示します。静的サイトは完全に静的であるか、使用されているフレームワークがサーバー側のルートが関与している場合、真の静的生成の利点を失います。

Astroは、純粋な静的サイトの生成と堅牢なサーバー側の機能のバランスを巧みにバランスさせます。 Astro Actionsは、サーバー側の電力を備えたエンティアルに近い静的サイトを強化します。これは、検索などの機能に最適です。コンテンツが多いサイトの場合、検索を追加すると、通常、フロントエンドのみのソリューション、SAASサービス、または他のフレームワークでの完全なサーバー側の書き換えが意味されます。

Astroは、サーバー側のコード（fuse.jsなど）を介して検索を処理しながら、ほとんど静的ビルド時間の生成を可能にします。このデモでは、fuse.jsを使用して、ビルド中に生成された一連のブックマークを検索し、サーバーコールを介して結果を返します。

Github Liveデモ

プロジェクトのセットアップ

基本的なアストロプロジェクトを作成します：

 npm astro@raptを作成します

プロンプトに従ってください：

• プロジェクトの場所：（あなたの優先ディレクトリ、例： ./astro-search ）
• プロジェクトスターター：基本的なミニマリストスターター
• 依存関係をインストール：はい
• GITリポジトリの初期化：推奨されます

Project Directoryに移動し、 npm run devを実行します。デフォルトのアストロホームページが表示されます。

初期構成

デフォルトのホームページコンテンツ（ /src/pages/index.astro ）を削除します。 Tailwind CSSを追加します：

 NPX AstroはTailwindを追加します

CLIの指示に従って、Tailwindを統合します。 /src/pages/index.astroに基本マークアップを追加します：

 ---
// ./src/pages/index.astro
'../layouts/layout.astro'からレイアウトをインポートします。
---

<layout>
  <div>
    <h1 id="私の最新のブックマーク">私の最新のブックマーク</h1>
    <p>これは後で変更するのはたった10人だけです</p>
  </div>
</layout>

ブックマークデータの統合

提供されたブックマークデータを使用します（または、元の記事のGitHubリンクから110項目を取得します）。ブックマークデータを使用して/src/data/bookmarks.jsonを作成します。 （サンプルデータについては、元の記事を参照してください）。

次に、AstroのコンテンツレイヤーAPIを構成します。 create /src/content.config.ts ：

 「astro：content」から{defintecollection、z}をインポートします。
「Astro/Loaders」から{file}をインポートします。

const bookmarks = defineCollection（{
  スキーマ：Z.Object（{
    pageTitle：Z.String（）、
    URL：Z.String（）、
    説明：Z.String（）。optional（）
  }）、
  ローダー：file（ "src/data/bookmarks.json"）、
}）;

const consty collections = {bookmarks};

サーバー（ npm run dev ）を再起動します。

ブックマークの表示

/src/pages/index.astroでbookmarksコレクションをインポートして使用します：

 ---
'../layouts/layout.astro'からレイアウトをインポートします。
'astro：content'から{getCollection}をインポートします。

const bookmarks = await getCollection（ 'bookmarks'）;
---

<layout>
  <div>
    <h1 id="私の最新のブックマーク">私の最新のブックマーク</h1>
    <p>これは{bookmarks.length}ブックマークのみです</p>

    <h2 id="最新のブックマーク">最新のブックマーク</h2>
    <ul>
      {bookmarks.slice（0、10）.map（（item）=>（
        <li>
          <a href="https://www.php.cn/link/881ad08b23bec80777fe4bce8bee4e0a">
            </a>{item.data?.pageTitle}
            <p>{item.data?.description}</p>
          
        </li>
      ））}
    </ul>
  </div>
</layout>

これにより、最新の10のブックマークが表示されます。

アクションとJavaScriptを使用した検索の実装

新しいコンポーネント/src/components/Search.astroを作成します：

検索：

<script> // ... (JavaScript code as in original article) ... </script>

アストロアクションの設定

netlify統合を追加します：

 NPX AstroはNetlifyを追加します

検索アクションのために/src/actions/index.jsを作成します。

 // ...（元の記事のようなアクションコード、fuse.jsを使用）...

アクションの統合

検索コンポーネントのJavaScriptを更新して、 actions.searchを使用します。Search関数（元の記事に示すように、fuse.jsの結果構造を処理するための変更を備えています）。

結論

この拡張ガイドは、Astroアクションとfuse.jsを使用して、検索機能を構築するためのより簡潔で構造化された説明を提供します。コードスニペットを特定のプロジェクトのセットアップと要件に適応させることを忘れないでください。さらなる改善には、より堅牢なエラー処理や、アストロ諸島内のReactのようなより高度なクライアント側のフレームワークを使用する可能性があります。

以上がAstro ActionsとFuse.jsでのパワー検索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。