通過Astro Action和Fuse.js為搜索提供動力

靜態站點的產生很棒，但它帶來了挑戰。靜態站點要么是完全靜態的，要么使用的框架涉及服務器端路由時將失去真正靜態生成的好處。

Astro巧妙地將純靜態站點生成與強大的服務器端功能平衡。 Astro Action賦予了近乎進入的靜態站點，具有服務器端功率，非常適合搜索諸如搜索之類的功能。對於內容豐富的站點，添加搜索通常意味著僅前端解決方案，SaaS服務或其他框架中的完整服務器端重寫。

Astro允許在通過服務器端代碼（例如Fuse.js）處理搜索時大部分靜態構建時間生成。該演示使用Fuse.js搜索在構建過程中生成的一組書籤，並通過服務器調用返回結果。

Github Live Demo

項目設置

創建一個基本的Astro項目：

 NPM創建Astro@最新

遵循提示：

• 項目位置：（您的首選目錄，例如， ./astro-search ）
• 項目入門者：基本極簡主義入門者
• 安裝依賴項：是
• 初始化GIT存儲庫：推薦

導航到項目目錄並運行npm run dev 。您會看到默認的Astro主頁。

初始配置

刪除默認的主頁內容（ /src/pages/index.astro ）。添加尾風CSS：

 NPX Astro添加尾風

請按照CLI說明進行逆風。將基本標記添加到/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”導入{decteCollection，z};
從“ Astro/Loaders”導入{file};

const bookmarks = deCollection（{{
  架構：z.Object（{{
    pagetitle：z.string（），
    URL：z.String（），
    描述：z.String（）。可選（）
  }），
  加載程序：文件（“ src/data/bookmarks.json”），
}）;

導出const collections = {bookmarks};

重新啟動服務器（ npm run dev ）。

顯示書籤

導入並使用/src/pages/index.astro中的bookmarks集合：

 ---
從'../ layouts/layout.astro'導入佈局';
從'astro：content'導入{getCollection};

const書籤=等待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>

設置Astro動作

添加網絡化集成：

 npx astro添加netlify

create /src/actions/index.js搜索操作：

 // ...（使用Fuse.js中的原始文章和原始文章中的操作代碼）...

整合動作

更新搜索組件的JavaScript以使用actions.search函數（如原始文章所示，修改了用於處理Fuse.js的結果結構）。

結論

這項增強指南提供了使用Astro Actions和Fuse.js構建搜索功能的更簡潔，結構化的解釋。請記住，將代碼片段調整到您的特定項目設置和要求中。進一步的改進可能包括更強大的錯誤處理以及使用更先進的客戶端框架（例如Astro Islands中的React）。

以上是通過Astro Action和Fuse.js為搜索提供動力的詳細內容。更多資訊請關注PHP中文網其他相關文章！