Pagefind

配置参数

outputPath string

The path to the pagefind bundle directory

Default:

"/pagefind"

ui object boolean

Options for the UI interface or false to disable it

Default:

{
  containerId: "search",
  showImages: false,
  excerptLength: 0,
  showEmptyFilters: true,
  showSubResults: false,
  resetStyles: true
}

indexing object

Options for the indexing process

Default:

{ rootSelector: "html", verbose: false, excludeSelectors: [] }

customRecords object[]

Other custom records

描述

此插件使用 Pagefind 库在您的网站中创建一个完全静态的搜索引擎，而无需任何托管基础设施。 该过程分为两个步骤：

• 索引 (Indexing): 这是扫描所有 HTML 页面并构建搜索索引的过程。
• UI 渲染 (UI rendering): 一个 UI 组件，开箱即用地支持搜索、过滤和元数据。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind(/* Options */));

export default site;

UI 组件 (UI Component)

要在你的网站中添加搜索组件，只需创建一个带有 search id 的元素。该插件会自动生成 HTML 代码，以在任何包含此元素的页面中导入 JavaScript 和 CSS 样式。

<h1>欢迎来到我的网站</h1>

<!-- 在此处插入搜索组件: -->
<div id="search"></div>

UI 配置 (UI configuration)

该插件具有 ui 键，其中包含一些配置选项。默认值如下：

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  ui: {
    containerId: "search",
    showImages: false,
    showEmptyFilters: true,
    resetStyles: true,
  },
}));

export default site;

自定义样式 (Customising the styles)

通用的 UI 组件带有一些 CSS 自定义属性，你可以在你的 CSS 文件中编辑它们：

:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #eeeeee;
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: sans-serif;
}

禁用 UI 组件 (Disable the UI component)

如果你想使用自定义搜索组件，你可以在插件配置中禁用自动插入通用 UI 组件：

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  ui: false, // 不插入 UI 组件
}));

export default site;

索引 (Indexing)

indexing 键允许自定义索引过程。默认值如下：

import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";

const site = lume();

site.use(pagefind({
  indexing: {
    rootSelector: "html",
    verbose: false,
  },
}));

export default site;

我们可以通过添加 data-pagefind-body 属性来设置显式内容索引。如果此属性存在于 HTML 元素中，则仅索引该元素内部的内容。任何没有此属性的其他内容将不会被索引。因此，删除页面的最佳方法是将 data-pagefind-body 添加到你要索引的内容的包装元素。

或者，你可以通过在 HTML 元素上设置 data-pagefind-ignore 属性来选择性地忽略内容。 并使用 data-pagefind-ignore="all" 来同时忽略其子元素。

权限 (Permissions)

Lume 默认使用 所有权限 执行。如果你不想授予所有权限，而是为此插件配置特定权限：

• --allow-run 运行 pagefind 二进制文件。它由 NPM 包自动下载，其路径取决于用户名、版本和平台。 如果你想显式传递它，你需要检查二进制文件下载的位置。

例如，对于 macOS 上的用户名 "oscarotero" 和 Pagefind 1.1.0，它将是： --allow-run=/Users/oscarotero/Library/Caches/deno/npm/registry.npmjs.org/@pagefind/darwin-x64/1.1.0/bin/pagefind_extended