Hugo集成flexsearch.js实现搜索 导航栏/首页表单跳转无搜索结果

核心问题定位 #

独立搜索页功能正常，说明Flexsearch索引加载、页内搜索执行逻辑本身没有问题，故障来自两个逻辑缺失：

• 导航栏、首页的搜索表单提交时，没有把用户输入的搜索关键词传递到搜索页，仅做了纯页面跳转
• 搜索页的脚本没有配置「页面加载时读取URL携带的搜索参数、自动触发搜索」的逻辑，跳转后无执行入口

分步修复操作 #

1. 改造全局搜索表单的提交逻辑 #

找到导航栏、首页的搜索表单组件，绑定提交拦截逻辑，跳转时将关键词编码后拼接到搜索页URL的查询参数中：

// 遍历所有不在搜索页的搜索表单
document.querySelectorAll('form[role="search"]:not(#search-page-form)').forEach(form => {
  form.addEventListener('submit', e => {
    e.preventDefault()
    const searchInput = form.querySelector('input[name="q"], input[type="search"]')
    const keyword = searchInput.value.trim()
    if (!keyword) return
    // 携带关键词跳转至搜索页
    window.location.href = `/search/?q=${encodeURIComponent(keyword)}`
  })
})

如果表单原本写了硬编码的action="/search/"不需要删除，JS拦截默认提交行为后会覆盖原有跳转逻辑。

2. 调整搜索页/assets/js/search.js的初始化逻辑 #

在你现有Flexsearch初始化、搜索执行函数的同作用域内，添加页面加载时的参数读取逻辑，保证带关键词跳转过来时能自动触发搜索：

// 搜索页加载完成后自动读取参数执行搜索
window.addEventListener('DOMContentLoaded', () => {
  // 读取URL中的q参数
  const searchParams = new URLSearchParams(window.location.search)
  const targetKeyword = searchParams.get('q')
  if (!targetKeyword) return

  // 1. 将关键词填充到搜索页的输入框内，和用户手动输入的视觉效果一致
  const pageSearchInput = document.querySelector('#search-page-form input[type="search"]')
  pageSearchInput.value = targetKeyword

  // 2. 调用你已实现的搜索执行函数，注意替换为你代码中实际的函数名
  // 比如你原来写的executeSearch、runSearch之类的，直接传关键词进去就行
  executeSearch(targetKeyword)
})

3. 快速验证方法 #

先手动在浏览器地址栏输入http://localhost:1313/search/?q=你站点内存在的文章关键词，如果打开页面后能自动渲染搜索结果，说明搜索页的参数触发逻辑正常，再测试导航栏、首页的表单提交即可。

避坑提示 #

• 不要把Flexsearch索引加载、全文检索的逻辑放到全局公共JS里，会增加所有页面的加载体积，这类逻辑只需要在搜索页加载执行即可，非搜索页只保留表单跳转的轻量逻辑
• 关键词传递时必须用encodeURIComponent编码，避免关键词带特殊字符（比如空格、&、中文）时URL解析出错
• 如果你的站点配置了子路径，跳转地址要对应调整，比如子路径是/blog的话就改成/blog/search/?q=xxx

内容的提问来源于stack exchange，提问作者Vincenzo Antedoro