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

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

Astro允許在通過服務(wù)器端代碼（例如Fuse.js）處理搜索時大部分靜態(tài)構(gòu)建時間生成。該演示使用Fuse.js搜索在構(gòu)建過程中生成的一組書籤，並通過服務(wù)器調(diào)用返回結(jié)果。

Github Live Demo

項目設(shè)置

創(chuàng)建一個基本的Astro項目：

 NPM創(chuàng)建Astro@最新

遵循提示：

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

導(dǎo)航到項目目錄並運行npm run dev 。您會看到默認(rèn)的Astro主頁。

初始配置

刪除默認(rèn)的主頁內(nèi)容（ /src/pages/index.astro ）。添加尾風(fēng)CSS：

 NPX Astro添加尾風(fēng)

請按照CLI說明進行逆風(fēng)。將基本標(biāo)記添加到/src/pages/index.astro ：

 ---
// ./src/pages/index.astro
從'../ layouts/layout.astro'導(dǎo)入佈局';
---

<layout>
  <div>
    <h1>我的最新書籤</h1>
    <p>這只是一個大數(shù)中的10個，我們以後會更改</p>
  </div>
</layout>

集成書籤數(shù)據(jù)

使用提供的書籤數(shù)據(jù)（或原始文章中的GitHub鏈接中獲取110個項目）。使用您的書籤數(shù)據(jù)創(chuàng)建/src/data/bookmarks.json 。 （有關(guān)示例數(shù)據(jù)，請參見原始文章）。

現(xiàn)在，配置Astro的內(nèi)容層API。 create /src/content.config.ts ：

從“ astro：content”導(dǎo)入{decteCollection，z};
從“ Astro/Loaders”導(dǎo)入{file};

const bookmarks = deCollection（{{
  架構(gòu)：z.Object（{{
    pagetitle：z.string（），
    URL：z.String（），
    描述：z.String（）?？蛇x（）
  }），
  加載程序：文件（“ src/data/bookmarks.json”），
}）;

導(dǎo)出const collections = {bookmarks};

重新啟動服務(wù)器（ npm run dev ）。

顯示書籤

導(dǎo)入並使用/src/pages/index.astro中的bookmarks集合：

 ---
從'../ layouts/layout.astro'導(dǎo)入佈局';
從'astro：content'導(dǎo)入{getCollection};

const書籤=等待getCollection（'Bookmarks'）;
---

<layout>
  <div>
    <h1>我的最新書籤</h1>
    <p>這只是{bookmarks.length}書籤</p>

    <h2>最新書籤</h2>
    <ul>
      {bookmarks.slice（0，10）.map（（item）=>（
        <li>
          <a href="http://ipnx.cn/link/881ad08b23bec80777fe4bce8bee4e0a">
            </a>{item.data?.pagetitle}
            <p>{item.data?.Description}</p>
          
        </li>
      ）}}
    </ul>
  </div>
</layout>

這顯示了10個最新書籤。

通過操作和JavaScript實施搜索

創(chuàng)建一個新的組件/src/components/Search.astro ：

設(shè)置Astro動作

添加網(wǎng)絡(luò)化集成：

 npx astro添加netlify

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

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

整合動作

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

結(jié)論

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

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