如果您有一个静态 WordPress 网站，或者正在强烈考虑搭建一个静态网站，那么您可能已经意识到它的默认局限性。其中最大的限制之一是无法为您的网站添加搜索功能。这是因为标准 WordPress 网站上搜索的"常规方式"是通过 PHP 实现的，而静态网站不使用 PHP。这个障碍是显而易见的。
但是，通过一点创造性思维，您可以使用一个免费的、开源的 JavaScript 库 Lunr（以及其他一些工具）来解决这个问题，并为您的静态网站添加搜索功能。
所以，如果您准备好将一些内在的 JCVD Bloodsport 能量投入到您的 WordPress 静态网站中，那就让我们开始吧。
目录
什么是 Lunr.js，为什么它是静态网站的完美搜索解决方案 🌙
⏭️ 如果您已经被说服了，只是想要实现步骤，点击这里 直接跳转到教程。
Lunr.js 是一个紧凑的 JavaScript 库，专为浏览器端搜索而设计。与传统的 WordPress 搜索（会不断向数据库发起查询）不同，Lunr.js 在客户端处理一切。无需 PHP 处理。无需调用外部服务的 API。纯粹、快速 的 JavaScript 体验。
最棒的是，为您的静态网站添加 Lunr.js 不会增加您任何托管费用。您的网站仍然可以在 Cloudflare Pages（或类似服务）上运行，并享有我在关于如何启动静态网站的主要指南中介绍的所有好处。
话虽如此，我想简要说明一下正确的预期。Lunr.js 有很多优点，但它并不是一个完美的解决方案。以下是您需要了解的内容……
使用 Lunr.js 的优缺点 ⬆️⬇️
在决定这是否将成为您静态网站的好搜索解决方案时，有两个主要因素需要考虑：
- 您网站的规模。
- 搜索质量的权衡。
较大网站的性能考虑
Lunr.js 对小型和中型网站效果很好，但有一些实际限制需要考虑：
- 索引大小和加载时间：每 100 篇文章，预计索引文件大小约为 100-200KB。这听起来可能不算多，但一个拥有 1,000 多篇文章的网站最终可能会有 1MB 以上的索引，需要在搜索开始前加载到访问者的浏览器中。对于较小的网站，这种加载几乎是即时的，但较大的网站可能会出现明显的延迟。
- 内存使用：整个索引会加载到浏览器的内存中。对于非常大的网站，这可能会降低访问者浏览器的速度（不仅包括您搜索页面的标签页，还包括他们的所有标签页）。
底线是，如果您的网站页面少于 500 个，您应该没问题。
搜索质量：您得到什么和放弃什么
与服务器端搜索解决方案相比，Lunr.js 做了一些权衡：
优点：
- 开箱即用的相关性排名。
- 模糊匹配，处理意外的拼写错误。
- 词干提取（搜索 "run" 时找到 "running"）。
缺点：
- 没有自然语言处理来理解查询意图。
- 处理具有多个搜索运算符的复杂查询的能力有限。这并不是一个巨大的缺点，因为大多数人根本不使用搜索运算符，但这只是您需要知道的事情，以防这对你很重要。我将为您提供两种（通配符和精确匹配）搜索运算符，这将满足绝大多数用例。
对于大多数个人博客、作品集网站和小型企业网站来说，这些权衡是完全合理的。您的访问者仍然会获得有用且相关的结果。
第一阶段：设置您的开发环境 👨🏻💻
现在您已经了解了 Lunr.js 的全部内容，是时候卷起袖子为实现做好一切准备了。
所需工具 🧰
要完成这项工作，您需要一些必备工具：
- 您的本地 WordPress 网站（带有 Simply Static 插件）。
- Lunr.js 库。
- Mac 上的终端 / Windows 上的命令提示符。
如果您按照我之前的指南设置静态 WordPress 网站，那么除了 Lunr.js 之外，所有这些工具对您来说都应该很熟悉。
⚠️ 注意：我的演示静态网站是使用 Neve FSE 构建的，这是一个块主题，但您也可以将本教程用于经典主题。实现方式只有一个小小的差异，这个差异正好出现在教程的开头——我会指出来。
将 Lunr.js 添加到您的本地 WordPress 环境 🖥️
假设您正在使用 Local by Flywheel，第一步是进入您的 WordPress 网站。确保 一键管理 已启用，然后点击 WP 管理 按钮：
接下来，从 WordPress 仪表板进入 外观 → 编辑器。
⚠️ 如果您看不到'编辑器'，则意味着您正在使用经典主题（点击查看说明）
正如我上面提到的，这是本指南中唯一在方法上存在小小分歧的地方。对于经典主题用户，如果您还没有安装，需要安装并激活 页眉和页脚脚本插件。然后从 WordPress 仪表板进入 设置 → 页眉和页脚脚本，并在 页眉脚本 部分添加以下代码：
<script src="https://unpkg.com/lunr/lunr.js"></script>Code language: HTML, XML (xml)
添加代码并保存后，点击此处 跳至下一步，在适当的步骤继续本教程。
这将带您进入全站编辑器。从侧边菜单中选择 模式：
如果您使用的不是 Neve FSE 主题 而是另一个块主题，那么下一个界面会看起来稍有不同。
尽管如此，您应该能够在 所有模板部分 下看到 页眉 选项。
这是因为每个主题都至少有一个页眉模板，用于存储导航菜单和其他常见功能（例如网站图标、网站标题）。实际上许多主题有多个页眉模板（Neve FSE 也包括在内），但默认的通常叫做"页眉"，没有其他词。
您可能还会看到"主页眉"或"页眉主"。关键是找到最像默认选项的那个。找到后，点击 三个垂直点 并选择 编辑：
接下来，您需要向头部模板添加一个自定义HTML块，这意味着您需要首先通过点击头部内的任意位置来到达最高级别的父块。之后：
- 点击最左边的按钮多次，直到到达顶级父块。
- 到达后，点击右下角的小+图标添加新块。
- 输入 html。
- 点击 Custom HTML 添加该块。
复制下面的代码片段并将其粘贴到HTML块中：
<script src="https://unpkg.com/lunr/lunr.js"></script>Code language: HTML, XML (xml)
点击保存以应用更改。
创建搜索测试页面 🔎
成功将Lunr.js添加到头部模板后，下一步是创建一个专用的搜索页面，您的网站访问者可以在该页面搜索您的网站：
从WordPress仪表板，转到 页面 → 添加新页面。
进入块编辑器后，您就可以开始工作了。
首先，给页面命名。不需要创意。"搜索"或"搜索 + 您的网站名称"可能适用于99%的网站。
接下来，添加一个组块来包含所有内容：
点击 + 图标，在搜索字段中输入 group 并选择 组 块。然后点击第一个选项，它看起来像一个 单个矩形：
在组块内，添加以下内容：
- 一个 标题 块，包含类似"搜索我们的网站"的文字。
- 一个 段落 块，包含简要说明（例如，"输入您要查找的内容。要描述性，但请简洁"）。
添加这两个块时，请确保点击最左边的按钮，这样当您点击+图标时，它会在组父块内：
现在是关键部分 – 您需要为搜索界面添加一个 HTML 块。确保您在组父块内，然后：
- 点击 + 图标 添加新块。
- 搜索 html 并选择 自定义HTML 块。
- 将以下代码粘贴到其中：
<div class="lunr-search-container">
<div class="lunr-search-form">
<input type="text" id="lunr-search-input" placeholder="Search for..." class="lunr-search-input">
<button id="lunr-search-button" class="lunr-search-button">Search</button>
</div>
<div id="lunr-search-results" class="lunr-search-results"></div>
</div>Code language: JavaScript (javascript)
在此下方，再添加三个HTML块。
第一个块的代码将添加关于如何使用两种搜索运算符（通配符和精确匹配）的说明，以满足不同需求：
<div class="search-tips">
<small>
<strong>搜索提示：</strong>
使用 * 进行部分匹配（即 design* 会找到 design、designer），使用 " " 进行精确短语匹配（即 "static site"）。
</small>
</div>Code language: HTML, XML (xml)
从技术上讲，你也可以将上述内容添加为一个常规的段落块，但使用 <div> 可以进行一些微小的样式设置，这些设置会从下面的块中获取。如果你确实选择使用段落块，仍然应该添加 CSS 代码👇🏻，因为它为整个搜索块设置了外观。搜索提示只是其中的一小部分。
点击显示 CSS 样式代码 👨🏻💻
<style>
.lunr-search-container {
max-width: 600px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.lunr-search-form {
display: flex;
gap: 10px; /* This creates space between input and button */
}
.lunr-search-input {
flex: 1;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 4px;
outline: none;
transition: border-color 0.2s;
}
.lunr-search-input:focus {
border-color: #0073aa;
}
.lunr-search-button {
padding: 12px 24px;
font-size: 16px;
background-color: #0073aa;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
white-space: nowrap;
}
.lunr-search-button:hover {
background-color: #005177;
}
/* Search tips styling */
.search-tips {
margin-top: 20px;
margin-bottom: 15px;
opacity: 0.8;
font-size: 1.0em;
}
.lunr-search-results {
margin-top: 30px;
min-height: 50px;
}
.lunr-result-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.lunr-result-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.lunr-result-title a {
color: #0073aa;
text-decoration: none;
}
.lunr-result-snippet {
font-size: 14px;
line-height: 1.6;
color: #555;
}
.lunr-no-results {
font-style: italic;
color: #777;
}
/* Highlight styling for search results */
.lunr-highlight {
background-color: #ffeb3b;
padding: 0 2px;
border-radius: 2px;
}
</style>Code language: HTML, XML (xml)
第三个实际上只是一个占位符。它最终会包含你的 JavaScript 代码，但你现在添加占位符是为了测试以确保一切正常工作：
点击显示占位符 JavaScript 代码 👨🏻💻
<script>
document.addEventListener('DOMContentLoaded', function() {
// This is where our Lunr.js search implementation will go
console.log('Search page loaded and ready for Lunr implementation');
// Elements
const searchInput = document.getElementById('lunr-search-input');
const searchButton = document.getElementById('lunr-search-button');
const resultsContainer = document.getElementById('lunr-search-results');
// Just to confirm everything is connected properly
searchButton.addEventListener('click', function() {
resultsContainer.innerHTML = '<p>Search functionality coming soon! You searched for: <strong>' +
searchInput.value + '</strong></p>';
});
});
</script>Code language: HTML, XML (xml)
测试是下一步，但在此之前，请快速再检查一次以确保所有块都已添加到组块中。你应该看到一条细线包围着所有内容，其中包含你的六个块（即标题、段落、四个 HTML）：
测试搜索界面
接下来，点击右上角的保存草稿，然后点击预览按钮，查看你的搜索页面在前端是什么样子。
在搜索框中输入内容，然后点击搜索按钮。您应该会看到一条显示搜索功能即将上线！的消息，后面跟着您输入的内容。
如果一切显示正确，恭喜！您已成功设置搜索界面。搜索功能暂时还无法工作，因为您还没有创建搜索索引，但基础架构已经搭建完成。
返回区块编辑器标签页并点击发布。现在您已准备好进入第二阶段。
第二阶段：创建搜索索引生成器 🏗️
对于 Lunr.js，您的搜索索引需要一个结构化的 JSON 文件，其中包含您 WordPress 网站中所有可搜索的内容。当有人访问搜索页面时，您的 JavaScript 代码会加载这个文件。虽然可以手动创建 JSON 文件，但自动化会更高效。为此，您需要一个小型定制插件。
构建自定义内容提取插件 🔌
首先，打开 Local by Flywheel，确保您正在使用的站点已选中（如果您有多个站点）。然后按照以下步骤操作：
- 点击站点名称下方直接显示的站点文件夹按钮。这将在 Mac 上打开 Finder（如下所示）或在 Windows 上打开文件管理器，您将看到其中的一些文件夹。
- 进入
app，然后是public，然后是wp-content，最后是plugins。 - 在
plugins中，创建一个新文件夹命名为lunr-index-generator：
打开 Sublime Text 或您之前使用的任何代码/文本编辑器，将下面的代码粘贴进去。然后将此文件保存为 lunr-index-generator.php，存放在新的 lunr-index-generator 文件夹中：
点击查看插件代码 👨🏻💻
<?php
/**
* Plugin Name: Lunr Index Generator
* Description: Creates a search index for Lunr.js from your WordPress content
* Version: 1.0
* Author: Lunr
*/
// Don't allow direct access to the plugin file
if (!defined('ABSPATH')) {
exit;
}
// Add admin menu item
function lunr_index_generator_menu() {
add_management_page(
'Generate Lunr Search Index',
'Lunr Search Index',
'manage_options',
'lunr-index-generator',
'lunr_index_generator_page'
);
}
add_action('admin_menu', 'lunr_index_generator_menu');
// Create the admin page
function lunr_index_generator_page() {
?>
<div class="wrap">
<h1>Generate Lunr.js Search Index</h1>
<p>Click the button below to generate a search index of your site's content for use with Lunr.js.</p>
<form method="post" action="">
<?php wp_nonce_field('lunr_generate_action', 'lunr_nonce'); ?>
<p>
<label>
<input type="checkbox" name="include_posts" value="1" checked>
Include Posts
</label>
</p>
<p>
<label>
<input type="checkbox" name="include_pages" value="1" checked>
Include Pages
</label>
</p>
<p>
<input type="submit" name="lunr_generate" class="button button-primary" value="Generate Index">
</p>
</form>
<?php
// Handle form submission
if (isset($_POST['lunr_generate']) && check_admin_referer('lunr_generate_action', 'lunr_nonce')) {
lunr_generate_index();
}
?>
</div>
<?php
}
// 用于清理搜索内容的函数
function clean_content_for_search($content) {
// 移除常见的表单字段模式
$content = preg_replace('/Name:.*?Email:.*?Message:.*?/i', '', $content);
// 清理多余的空白字符
$content = preg_replace('/\s{2,}/', ' ', $content);
return trim($content);
}
// 生成搜索索引
function lunr_generate_index() {
$include_posts = isset($_POST['include_posts']) ? true : false;
$include_pages = isset($_POST['include_pages']) ? true : false;
// 初始化文档数组
$documents = array();
// 如果选择则获取文章
if ($include_posts) {
$posts = get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'numberposts' => -1,
));
foreach ($posts as $post) {
$documents[] = array(
'id' => $post->ID,
'url' => get_permalink($post->ID),
'title' => $post->post_title,
'content' => clean_content_for_search(wp_strip_all_tags($post->post_content)),
'excerpt' => get_the_excerpt($post->ID),
'date' => get_the_date('', $post->ID)
);
}
}
// 如果选择则获取页面
if ($include_pages) {
$pages = get_posts(array(
'post_type' => 'page',
'post_status' => 'publish',
'numberposts' => -1,
));
foreach ($pages as $page) {
// 跳过搜索页面本身
if ($page->post_name === 'search') {
continue;
}
$documents[] = array(
'id' => $page->ID,
'url' => get_permalink($page->ID),
'title' => $page->post_title,
'content' => clean_content_for_search(wp_strip_all_tags($page->post_content)),
'excerpt' => get_the_excerpt($page->ID),
'date' => get_the_date('', $page->ID)
);
}
}
// 创建JSON文件
$json_data = json_encode($documents, JSON_PRETTY_PRINT);
// 保存文件到当前主题目录
$theme_dir = get_stylesheet_directory();
$file_path = $theme_dir . '/lunr-search-index.json';
$file_saved = file_put_contents($file_path, $json_data);
if ($file_saved) {
echo '<div><p>搜索索引生成成功！文件已保存到：<code>' . $file_path . '</code></p></div>';
} else {
echo '<div><p>错误：无法保存搜索索引文件。请检查文件权限。</p></div>';
}
// 也输出为可下载文件
echo '<div><p>您也可以直接下载索引文件：</p>';
echo '<p><a href="#">下载 JSON</a></p>';
echo '<script>
document.getElementById("download-json").addEventListener("click", function(e) {
e.preventDefault();
const blob = new Blob([' . json_encode($json_data) . '], {type: "application/json"});
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "lunr-search-index.json";
link.click();
});
</script></div>';
}Code language: HTML, XML (xml)
下一步是激活它。
激活插件并生成您的 JSON 文件
返回您的 WordPress 网站并像激活其他任何插件一样激活该插件：插件 → 已安装的插件 → 激活。
激活后，转到 工具 → Lunr 搜索索引。
勾选您要包含的内容类型（即文章、页面），然后点击 生成索引。插件会自动为您保存 JSON 文件。
⚠️ 复制 File saved to 右侧显示的位置。
另外，即使插件会保存它，还是下载一份以便快速检查：
打开后，你会看到与你的页面和/或文章对应的文本。例如，我的看起来是这样的：
如果一切正常，你可以继续将其添加到你的静态站点设置中。
✋ 假设你阅读并按照我关于设置 WordPress 静态站点的教程操作，那么你已经安装并配置了 Simply Static 插件。如果情况不是这样，我建议先去看教程然后再回来这里。或者，如果你使用的是不同的解决方案并想继续使用它，你需要找到下面我将向你展示的内容的等价物。
从你的 wp-admin，进入 Simply Static → General，将你之前保存的 JSON 文件位置粘贴到附加文件和目录窗口中。它应该是这样的：
/Users/username/Local Sites/site-name/app/public/wp-content/themes/theme-name/lunr-search-index.jsonCode language: PHP (php)
区别在于 username、site-name 和 theme-name 应该是你的实际信息。
第三阶段：实现搜索界面 🔋
此时你已经加载了 Lunr.js 库并生成了包含内容的全新 JSON 索引。现在是有趣的部分——将它们整合在一起，为你的网站访问者创建一个可用的搜索功能。
连点成线 🔗
还记得你之前添加到搜索页面的那个占位符 JavaScript 吗？是时候把它换成真正的代码了。回到你的搜索页面并编辑它：
- 在 WordPress 仪表盘中进入 Pages → All Pages。
- 找到你的搜索页面并点击 Edit。
- 找到包含 HTML 块的 Group 块。
- 找到 JavaScript HTML 块（页面最底部的那个），用下面的完整实现替换占位符代码——但是 ⚠️ 对于这一行
fetch('wp-content/themes/YOUR-THEME-NAME/lunr-search-index.json')，将/YOUR-THEME-NAME/替换为你实际的主题名称。例如，在我的文件中，那一行看起来是这样的：fetch('/wp-content/themes/neve-fse/lunr-search-index.json')。完成的这一行也应该与你添加到 Simply Static 插件的附加文件和目录窗口中的内容部分匹配。唯一的区别是，在插件中你写的是完整路径，而这里是从/wp-content/开始。
点击显示代码 👨🏻💻
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('lunr-search-input');
const searchButton = document.getElementById('lunr-search-button');
const resultsContainer = document.getElementById('lunr-search-results');
let lunrIndex = null;
let allDocuments = [];
fetch('/wp-content/themes/YOUR-THEME-NAME/lunr-search-index.json')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(documents => {
allDocuments = documents;
lunrIndex = lunr(function() {
this.pipeline.remove(lunr.stemmer);
this.searchPipeline.remove(lunr.stemmer);
this.ref('id');
this.field('title', { boost: 10 });
this.field('content');
this.field('excerpt', { boost: 5 });
documents.forEach(function(doc) {
this.add(doc);
}, this);
});
console.log('搜索索引已加载并准备就绪！');
searchButton.disabled = false;
})
.catch(error => {
console.error('加载搜索索引时出错：', error);
resultsContainer.innerHTML = '<p>抱歉，加载搜索索引时出现问题。请稍后重试。</p>';
});
function performSearch() {
const query = searchInput.value.trim();
if (query === '' || lunrIndex === null) {
return;
}
const enhancedQuery = query.split(' ')
.map(term => {
if (term.length > 3) {
return `${term}~1^10 ${term}^15`;
} else {
return `${term}^15`;
}
})
.join(' ');
try {
const results = lunrIndex.search(enhancedQuery);
displayResults(results, query);
} catch (error) {
console.error('搜索错误：', error);
resultsContainer.innerHTML = `<p>抱歉，您的搜索出现错误。请尝试使用更简单的搜索词。</p>`;
}
}
function displayResults(results, query) {
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = `<p>未找到与 <strong>${query}</strong> 相关的结果。请尝试其他关键词。</p>`;
return;
}
resultsContainer.innerHTML = `<p>找到 ${results.length} 个与 <strong>${query}</strong> 相关的结果：</p>`;
const resultsList = document.createElement('div');
resultsList.className = 'lunr-results-list';
results.forEach(result => {
const doc = allDocuments.find(doc => doc.id.toString() === result.ref);
if (!doc) return;
const resultItem = document.createElement('div');
resultItem.className = 'lunr-result-item';
const title = document.createElement('div');
title.className = 'lunr-result-title';
const titleLink = document.createElement('a');
titleLink.href = doc.url;
titleLink.textContent = doc.title;
title.appendChild(titleLink);
const snippet = document.createElement('div');
snippet.className = 'lunr-result-snippet';
const snippetText = doc.excerpt || doc.content;
const cleanedSnippet = snippetText
.replace(/Name:.*?Email:.*?Message:.*?/gi, '')
.replace(/\b(Submit|Send|Post|Button|Click here)\b/g, '')
.replace(/\s{2,}/g, ' ')
.trim();
const maxSnippetLength = 150;
const truncatedSnippet = cleanedSnippet.length > maxSnippetLength ?
cleanedSnippet.substring(0, maxSnippetLength) + '...' :
cleanedSnippet;
const decoder = document.createElement('div');
decoder.innerHTML = truncatedSnippet;
snippet.textContent = decoder.textContent;
const meta = document.createElement('div');
meta.className = 'lunr-result-meta';
meta.textContent = doc.date || '';
resultItem.appendChild(title);
resultItem.appendChild(snippet);
resultItem.appendChild(meta);
resultsList.appendChild(resultItem);
});
resultsContainer.appendChild(resultsList);
}
searchButton.addEventListener('click', performSearch);
searchInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
performSearch();
}
});
searchInput.addEventListener('input', function(event) {
event.stopPropagation();
});
});
</script>代码语言：HTML, XML (xml)
#### 测试您的搜索功能
替换代码后，保存页面并在前端进行测试。在搜索栏中输入与您网站内容相关的关键词，看看是否能得到搜索结果：
同时点击搜索结果，以确保它能带你到显示的页面或文章。
然后尝试搜索运算符。输入相同的查询，但在末尾添加一个 *，看看会出现什么：
再次重复，但将查询放在引号内。如果一切看起来都正常工作，那么你就可以进行最后一步实施了。
## 第四阶段：将你的站点上线 📤
将搜索页面发布到你的上线站点是一个激动人心的时刻，如果你已经按照我的 WordPress 静态站点教程设置好了一切，这不应该花费超过一两分钟。从 Local 中的 wp-admin：
- 回到 Simply Static 并检查 Diagnostics 选项，确保没有问题。
- 如果一切正常，则点击 Generate：
之后执行以下操作：
**在 Mac 上：** **在 Windows 上：**
打开 **Terminal** 并进入包含你的 Python 代码片段的目录（文件夹）。例如：
cd ~/Desktop/website-toolsCode language: JavaScript (javascript)
在文件夹内，运行执行脚本：
./update-website.sh
使用 **文件资源管理器** 进入包含你的 Python 代码片段的文件夹。如果你不确定，可以搜索它 - `update-website.bat`。这是假设你按照静态站点教程中的建议以此名称保存了该文件。如果没有，则可以尝试搜索 `.bat`，这将显示硬盘上的所有 `.bat` 文件。找到文件后，双击执行它。
✋🤔 如果你需要更多背景信息，请参阅 [静态 WordPress 站点教程](https://wpshout.com/launch-and-maintain-a-cheap-wordpress-site/)，然后阅读后再回到这里。
运行 Python 脚本后等待几分钟。然后检查你的上线站点，但更重要的是检查搜索页面。最后再测试一次，这样你就知道一切是否仍然正常工作，仅此而已。你完成了。 🎉
## 最后的想法 💭
静态 WordPress 站点有很多优势——成本、速度、安全——但它们也有局限性。幸运的是，如果你愿意创造性思考并付出一点努力，有各种方法可以解决这些问题。
无论是像我们在这里介绍的添加完整的搜索解决方案，还是像我之前介绍的 [添加联系表单](https://wpshout.com/add-contact-forms-to-a-static-wordpress-site/)，你真的可以两者兼得。
具体说到搜索，如果你的站点内容超过 500 页，Lunr.js 开始显示其局限性，[Fuse.js](https://www.fusejs.io/) 是一个很好的替代方案。它的工作方式不同（在搜索时使用模糊匹配，而不是像你在这里学到的那样预先构建索引），但对于内容大量的静态站点来说，它效率更高。
***你对如何向静态站点添加搜索有任何问题吗？在下方评论中告诉我。我很乐意提供帮助。***
…
别忘了加入我们关于加速 WordPress 站点的速成班。在下面了解更多：
**如何加速你的 WordPress 站点**
通过一些简单的修复，你可以将加载时间减少甚至 50-80% 🚀
Newsletter Form - Sidebar
名
*
你的邮箱
*
立即订阅！
通过在上方输入您的电子邮件，即表示您订阅了我们的每周新闻通讯。您可以随时取消订阅。我们尊重您的收件箱和隐私。
