在我的404页上添加阿尔戈利亚搜索
#javascript #网络开发人员 #初学者 #jamstack

My site很小，所以我真的不需要搜索功能，但是Netlify Algolia plugin看起来很容易使用和一些乐趣。

潜入docs，我有点不知所措。 Algolia的功能广度是巨大的。他们绝对似乎是在jamstack网站上进行完全可自定义的搜索的首选。但是我想要的只是一个快速的半小时。我开始阅读几篇文章，最终发现阿尔戈利亚提供了两种主要产品，即IntantantSearch和AutoComplete。 InstantSearch非常可扩展，并且具有各种UI组件来创建完整的搜索体验。另一方面，自动完成添加了一个像我在许多网站上看到的那样的搜索框。

我安装了NetLify插件，并启动了新的构建，以使爬网器自动运行，从而索引了我的网站上的内容。当我使用NUXT时，所有页面均已预渲染，因此爬网可以解析内容。如果您有水疗中心，则需要在netlify.toml文件中调整配置设置，以使爬虫在页面上渲染JavaScript。

[[plugins]]
package = "@algolia/netlify-plugin-crawler"
  [plugins.inputs]
  branches = ['main', 'develop', 'feat/add-algolia']
  disabled = true
  pathPrefix = "/blog"
  customDomain = "example.com"
  renderJavaScript = true
然后，我尝试安装@algolia/algoliasearch-netlify-frontend插件，但是安装在Windows because they're using a UNIX specific command in their postinstall script上打破。我首先是根据其docs将其包括在JSDELIVR中，但遇到了一些问题，无法在NUXT错误布局上使用Head属性。

我在安装的钩子上写了一个小负载脚本包装器，但这感觉有些慢，不得不从第三方加载资源，所有带来的额外的DNS上的所有额外的DNS，如果JSDELIVR下降（不太可能），该怎么办。 

mounted () {
    this.loadScript('https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js', () => {
      algoliasearchNetlify({
        // Options
      })
    })
  },
  methods: {
    loadScript (url, callback) {
      const script = document.createElement('script')
      script.src = url
      script.onload = callback
      document.head.appendChild(script)
    }
  }

我真正想要的是能够导入ES模块并将其与我的代码捆绑在一起，例如普通的JavaScript软件包。我最终在项目中启用了打字稿，我的第一次尝试，复制阿尔戈利亚的源文件，然后像这样导入（更简单）。

import algoliasearchNetlify from './AlgoliasearchNetlify'

您可以将koude1套件添加到我的项目中。这里有一些技术债务，我需要手动更新文件，如果Algolia更新了他们的软件包，但这也意味着如果需要，我可以将其自定义。现在，我还控制koude3和koude4等Algolias核心软件包的要求，因此可以使事情更加最新。我觉得这是一个很好的妥协。

Netlify walkthrough为您提供以下代码段，但是我发现很难确定所有ENV变量是什么，以及Algolia仪表板中的哪个页面以获取正确的变量。我弄清楚仪表板向您显示了其他API键，具体取决于您上次访问的应用程序。我在这里如何渴望Stripe的文档，该文档会自动用您的键填充代码样本。

algoliasearchNetlify({
    appId: '<YOUR_ALGOLIA_APP_ID>',
    apiKey: '<YOUR_ALGOLIA_API_KEY>',
    siteId: '<YOUR_NETLIFY_SITE_ID>',
    branch: '<YOUR_TARGET_GIT_BRANCH>',
    selector: 'div#search',
})

现在我进行了搜索！我想对此进行一些造型，阿尔戈里亚让您通过他们的config options做到这一点。只需将此代码放在algoliasearchNetlify配置选项中。

theme: {
  mark: '#fff', // Color of the matching content
  background: '#23263b', // Background Color of the input and the panel
  selected: '#111432', // Background Color of the selected item
  text: '#d6d6e7', // Color of the title of the items
  colorSourceIcon: '#d6d6e7' // Color of the icon on the left of results
}

插入值后，我意识到，由于网站上的深色主题切换，我需要动态更新它们。我尝试了一些观看darktheme道具，并试图破坏和重新创建搜索容器，但最终将其涂在他们的源代码中，并挑选了我需要更改的CSS位。这是我添加的片段：

#search .aa-Autocomplete, .aa-Panel, .aa-DetachedContainer {
  --height: 3rem;
  --height-icon: 1.5rem;
  --color-input-icon: var(--grey);
  --color-mark: var(--green);
  --color-background: white;
  --color-selected: #ECECEC;
  --color-text: var(--grey);
  --color-source-icon: var(--grey)
}

自动完成的工作方式是，当您开始键入时，将显示带有顶部结果的弹出窗口。您可以配置显示多少个，但是我将其留在默认值为5的位置。令人讨厌的是，每当您单击窗口时，弹出窗口就会消失，因此您无法使用开发工具进行检查。我进行了一些谷歌搜索，发现您可以将调试选项传递给algoliasearchNetlify，以使弹出窗口保持打开状态。那让我使我需要最终的样式触摸。

algoliasearchNetlify({
    appId: '<YOUR_ALGOLIA_APP_ID>',
    apiKey: '<YOUR_ALGOLIA_API_KEY>',
    siteId: '<YOUR_NETLIFY_SITE_ID>',
    branch: '<YOUR_TARGET_GIT_BRANCH>',
    selector: 'div#search',
    debug: true
})

总的来说，在Netlify插件中添加Algolia有点痛苦，整个集成感觉都在急于。对于水疗中心或SSG来说，它的插件并不完全。我可以想象，如果您只有HTML文件，并且不介意一些额外的第三方资源，它可以正常工作。如果我将来需要一个全面的搜索功能，我肯定会选择阿尔戈利亚，但是对于较小的项目，我会寻找一些不太复杂的东西。 Take a look at the new search feature。

Search