通过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中文网其他相关文章！