VuePress blog optimization opens Algolia full-text search

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and check the final effect: TypeScript Chinese document .

Since VuePress's built-in search will only build a search index for the page's title, h2, h3 and tags. If you need full-text search, you can use Algolia search. This article describes how to apply and configure Algolia search.

Algolia

Algolia is a database real-time search service that can provide millisecond-level database search services, and its services can be easily deployed to various scenarios such as web pages, clients, and APPs in the form of APIs.

For example, VuePress official documents use Algolia search. The biggest advantage of using Algolia search is convenience. It will automatically crawl the page content of the website and build an index. You only need to apply for an Algolia service and add some code to the website, just like adding The statistical code is the same, and then a full-text search function can be implemented:

Apply

Search service application address: https://docsearch.algolia.com/apply/

After opening, fill in the information such as address, email address and warehouse address. Note here that the website needs to be publicly accessible:

After filling it out, wait for a while (I waited three days), if the application is approved, we will receive an email:

At this point, you need to reply to the email, telling yourself that you are the maintainer of the website, and you can modify the code:

Then the next day you will receive an email with the required information such as the AppId:

Default theme

If you're using VuePress' default theme, VuePress directly provides the themeConfig.algolia option to replace the built-in search box with Algolia search:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
      // 如果 Algolia 没有为你提供 `appId` ，使用 `BH4D9OD16A` 或者移除该配置项
      appId: '<APP_ID>',
    }
  }
}

You can implement full-text search with such a simple configuration:

search is empty

If you search for any data, it shows that no data can be searched, it is likely that there is a problem with the crawled data. We log in to https://www.algolia.com/ to open the management background and click Search in the left options bar , check the corresponding indexName data, if Browse does not display data here, it means that there may be a problem with the crawled data, resulting in no corresponding Records being generated:

If there is no data, then we will check the crawling logic and open the crawler background: https://crawler.algolia.com/admin/crawlers/?sort=status&order=ASC&limit=20 , click the corresponding indexName to enter the background:

If successful crawling is displayed, and there is also Monitoring Success data, but Records is 0, it is probably because the crawler's logic for extracting data has a problem. Click the Editor in the left options bar to view the specific crawler logic:

Like pathsToMatch here, if it is https://ts.yayujs.com/docs/** , but your URLs all start with [https://ts.yayujs.com/learn-typescript/**](https://ts.yayujs.com/docs/**) , then there will probably be an extraction error, modify it, and then click the data on the right to test:

If the data can be extracted like this, it means that there is no problem. Click Save in the upper right corner, then switch back to Overview , click Restart crawling in the upper right corner, and we will crawl the data again:

If there is data in Records, there will basically be data when searching.

other topics

If you are not using the default theme of VuePress, for example, I use vuepress-theme-reco , its search bar is implemented by itself, so adding the above configuration will not be effective. At this time, you need to follow the method in the email, manually Add CSS and JavaScript files, then call the provided API when they're loaded.

We need to modify config.js first:

module.exports = {
    head: [
      [
        'link', { href: "https://cdn.jsdelivr.net/npm/@docsearch/css@alpha", rel: "stylesheet" }
      ],
      [
        'script', { src: "https://cdn.jsdelivr.net/npm/@docsearch/js@alpha" }
      ]
    ]
}

Then modify .vuepress/enhanceApp.js file:

export default ({ router, Vue, isServer }) => {
  Vue.mixin({
    mounted() {
      // 不加 setTimeout 会有报错，但不影响效果
      setTimeout(() => {
        try {
          docsearch({
            appId: "43GX903BPS",
            apiKey: "feff649032d8034cf2a636ef55d96054",
            indexName: "ts-yayujs",
            container: '.search-box',
            debug: false
          });
        } catch(e) {
          console.log(e);
        }
      }, 100)
    },
  });
};

Pay attention to the container, refer to docsearch's official warehouse , what is provided here is not the selector of the input input box, but a mount node, such as the selector of div.

The display effect is as follows:

The style is somewhat inconsistent with the existing theme, but it doesn't matter, we can modify .vuepress/styles/index.styl cover the current style, for example, my modified code is:

.search-box .DocSearch.DocSearch-Button {
    cursor: text;
    width: 10rem;
    height: 2rem;
    color: #5b5b5b;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0rem;
    outline: none;
    transition: all 0.2s ease;
    background: transparent;
    background-size: 1rem;
}

.search-box .DocSearch-Button-Container {
    margin-left: 0.4rem;
}

.search-box .DocSearch-Button .DocSearch-Search-Icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0.1rem;
}

.search-box .DocSearch-Button-Placeholder {
    font-size: 0.8rem;
}

.search-box .DocSearch-Button-Keys {
    position: absolute;
    right: 0.1rem;
}

.search-box .DocSearch-Button-Key {
    font-size: 12px;
    line-height: 20px;
}

The final effect is as follows:

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 24th article, the address of the whole series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.