给你的网站添加 Algolia 搜索

<script setup lang="ts">
import '@docsearch/css'
import docsearch from '@docsearch/js'
import { getCurrentInstance, onMounted, watch } from 'vue'
import type { DocSearchHit } from '@docsearch/react/dist/esm/types'

interface AlgoliaSearchOptions {
  appId?: string
  apiKey: string
  indexName: string
  placeholder?: string
  searchParameters?: any
  disableUserPersonalization?: boolean
  initialQuery?: string
}

const props = defineProps<{
  options: AlgoliaSearchOptions
  multilang?: boolean
}>()

const vm = getCurrentInstance()
const route = useRoute()
const router = useRouter()

watch(
  () => props.options,
  (value) => {
    update(value)
  },
)

onMounted(() => {
  initialize(props.options)
})

function isSpecialClick(event: MouseEvent) {
  return (
    event.button === 1
    || event.altKey
    || event.ctrlKey
    || event.metaKey
    || event.shiftKey
  )
}

function getRelativePath(absoluteUrl: string) {
  const { pathname, hash } = new URL(absoluteUrl)

  return pathname + hash
}

function update(options: any) {
  if (vm && vm.vnode.el) {
    vm.vnode.el.innerHTML
      = '<div class="algolia-search-box" id="docsearch"></div>'
    initialize(options)
  }
}

const lang = ref('ZH-CN')

// if the user has multiple locales, the search results should be filtered
// based on the language
const facetFilters: string[] = props.multilang ? [`lang:${lang.value}`] : []

if (props.options.searchParameters?.facetFilters)
  facetFilters.push(...props.options.searchParameters.facetFilters)

watch(lang, (newLang, oldLang) => {
  const index = facetFilters.findIndex(filter => filter === `lang:${oldLang}`)
  if (index > -1)
    facetFilters.splice(index, 1, `lang:${newLang}`)
})

function initialize(userOptions: any) {
  docsearch(
    Object.assign({}, userOptions, {
      container: '#docsearch',

      searchParameters: Object.assign({}, userOptions.searchParameters, {
        // pass a custom lang facetFilter to allow multiple language search
        // https://github.com/algolia/docsearch-configs/pull/3942
        facetFilters,
      }),

      navigator: {
        navigate: ({ itemUrl }: { itemUrl: string }) => {
          const { pathname: hitPathname } = new URL(
            window.location.origin + itemUrl,
          )

          // Router doesn't handle same-page navigation so we use the native
          // browser location API for anchor navigation
          if (route.path === hitPathname)
            window.location.assign(window.location.origin + itemUrl)

          else
            router.go(itemUrl)
        },
      },

      transformItems: (items: DocSearchHit[]) => {
        return items.map((item) => {
          return Object.assign({}, item, {
            url: getRelativePath(item.url),
          })
        })
      },

      hitComponent: ({
        hit,
        children,
      }: {
        hit: DocSearchHit
        children: any
      }) => {
        const relativeHit = hit.url.startsWith('http')
          ? getRelativePath(hit.url as string)
          : hit.url

        return {
          type: 'a',
          ref: undefined,
          constructor: undefined,
          key: undefined,
          props: {
            href: hit.url,
            onClick: (event: MouseEvent) => {
              if (isSpecialClick(event))
                return

              // we rely on the native link scrolling when user is already on
              // the right anchor because Router doesn't support duplicated
              // history entries
              if (route.path === relativeHit)
                return

              // if the hits goes to another page, we prevent the native link
              // behavior to leverage the Router loading feature
              if (route.path !== relativeHit)
                event.preventDefault()

              router.go(relativeHit)
            },
            children,
          },
          __v: null,
        }
      },
    }),
  )
}
</script>

<template>
  <div id="docsearch" class="algolia-search-box" />
</template>

<style lang="scss">
.algolia-search-box {
  padding-top: 1px;
}

@media (min-width: 720px) {
  .algolia-search-box {
    padding-left: 8px;
  }
}

@media (min-width: 751px) {
  .algolia-search-box {
    min-width: 176.3px;
    /* avoid layout shift */
  }

  .algolia-search-box .DocSearch-Button-Placeholder {
    padding-left: 8px;
    font-size: 0.9rem;
    font-weight: 500;
  }
}

.DocSearch {
  --docsearch-primary-color: var(--c-brand);
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
  --docsearch-text-color: var(--c-text-light);
  --docsearch-muted-color: var(--c-text-lighter);
  --docsearch-searchbox-background: #f2f2f2;
}
html.dark{
  .DocSearch {
    --docsearch-searchbox-focus-background: #1b1a1a;
    --docsearch-modal-background: var(--primary-bg);
    --docsearch-hit-background: var(--primary-bg);
    --docsearch-hit-shadow: 0 1px 3px 0 #1b1b1b;
    --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(23, 18, 18, 0.5),0 3px 8px 0 #555a64;
    --docsearch-footer-background: ##1b1a1a;
    --docsearch-key-gradient: linear-gradient(-225deg,#252627,#5e5252);
    --docsearch-footer-shadow: 0 -1px 0 0 #202122,0 -3px 6px 0 rgba(69,98,155,0.12);
    --docsearch-hit-color: #767e8a;
    --docsearch-key-shadow: inset 0 -2px 0 0 #41414a,inset 0 0 1px 1px rgb(73, 69, 69),0 1px 2px 1px rgba(30,35,90,0.4);
  }
}
</style>

<script>
const options = {
  appId: 'xxx',
  apiKey: 'xxx',
  indexName: 'artiely',
}
</script>
<template>
  <AlgoliaSearchBox :options="options" />
</template>