5个版本

0.1.4	2023年7月2日
0.1.3	2023年7月2日
0.1.2	2023年7月2日
0.1.1	2023年7月2日
0.1.0	2023年7月2日

#1319 in Web编程

MIT 许可证

130KB
58 行

next-pagefind

使用Pagefind与任何实时服务器。

安装

安装程序所需的模块。

cargo安装 spider_cli
cargo安装 pagefind
cargo安装 next-pagefind

入门

启动端口3000上的dev或prod实例，然后在您的next应用程序根目录中运行next-pagefind以创建搜索索引并将内容输出到public文件夹。
可选：在您的meta hrefLang链接中添加data-pagefind-meta="url[href]"，例如：<link rel="alternate" hrefLang="en" href="https://a11ywatch.com/blog/version-your-proto-definitions-for-stablity" data-pagefind-meta="url[href]"/>以替换链接的位置。
在您的next.js项目中设置Pagefind。示例之前使用布局来设置PageFindUI wasm模块一次。

// pagefind.tsx
import { useEffect, useRef } from 'react'

export const PageFind = () => {
  const loaded = useRef<boolean>(false)

  useEffect(() => {
    if (!loaded.current) {
      loaded.current = true
      let observer: MutationObserver

      const PagefindUI =
        // @ts-ignore
        typeof window.PagefindUI !== 'undefined' && window.PagefindUI

      if (PagefindUI) {
        try {
          new PagefindUI({
            element: '#search',
            resetStyles: false,
            showImages: false,
            showEmptyFilters: false,
          })

          // delete the observer code below if you did step 2 and target production websites
          const pagefindDrawer = document.querySelector('.pagefind-ui__drawer')

          // replace the .html from links with path
          if (pagefindDrawer) {
            const callback = () => {
              const links: NodeListOf<HTMLAnchorElement> =
                document.querySelectorAll('.pagefind-ui__result-link')

              for (const link of links) {
                link.href = link.href.replace('.html', '')
              }
            }

            observer = new MutationObserver(callback)

            observer.observe(pagefindDrawer, {
              attributes: false,
              childList: true,
              subtree: true,
            })
          }
        } catch (e) {
          console.error(e)
        }
      }

      return () => {
        if (observer) {
          observer.disconnect()
        }
      }
    }
  }, [loaded])

  return (
      <div id='search'></div>
  )
}

// layout.tsx
import React from 'react'

// use layout for scripts _pagefind
export function Layout({ children }) {
  return (
    <>
      <Head>
        <link href="/_pagefind/pagefind-ui.css" rel="stylesheet" key="pagefind-ui-css" />
        <script src="/_pagefind/pagefind-ui.js" type="text/javascript" key="pagefind-ui-js" />
      </Head>
      <main id="main-content" data-pagefind-body>
        {children}
      </main>
    </>
  );
}

// pages/index.tsx
import React from 'react'
import { Layout } from './layout'
import { PageFind } from './pagefind'

export function Home({ Component, pageProps }) {
  return (
    <>
      <h1>Home Page</h1>
      <PageFind />
    </>
  );
}

Home.getLayout = Layout;

// _app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)
 
  return getLayout(<Component {...pageProps} />)
}

深色模式

如果您需要处理主题，请在_/pagefind/pagefind-ui.css之前包含以下CSS。

在您的公共文件夹中添加以下文件css/_pagefind.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;
    --pagefind-ui-placeholder: #000;
}

:root.dark {
    --pagefind-ui-primary: #eeeeee;
    --pagefind-ui-text: #eeeeee;
    --pagefind-ui-background: #152028;
    --pagefind-ui-border: #152028;
    --pagefind-ui-tag: #152028;
    --pagefind-ui-placeholder: #fff;
}

.pagefind-ui__search-input::placeholder {
    color: var(--pagefind-ui-placeholder);
    opacity: 1;
}

然后，在pagefind之前包含CSS：<link href="/css/_pagefind.css" rel="stylesheet" />。

选项

以下是一些可选选项。

next-pagefind --help
Pagefind for next.js non output export applications. Fully crawl and index your app in one command.

Usage: next-pagefind [OPTIONS]

Options:
  -d, --download-dir <DOWNLOAD_DIR>  The download directory for storing the static.html files
  -u, --url <URL>                    The website url
  -h, --help                         Print help
  -V, --version                      Print version

待办事项

允许传入自定义端口输出。
允许为pagefind自定义构建文件夹。在此期间，您可以使用spider手动拼接文件夹，并简单使用以下命令进行转换：--source _temp_spider_downloads --bundle-dir public&& cp -R _temp_spider_downloads/public/_pagefind public/。

依赖项

~1.2–1.8MB
~35K SLoC