preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

Since VuePress’s built-in search only builds search indexes for page titles, H2, H3, and tags. If you need a full-text search, you can use Algolia search instead. Here’s how to apply and configure Algolia search.

Algolia

Algolia is a real-time database search service, which can provide millisecond database search service, and its service can be easily laid out in the form of API to web pages, clients, APPS and other scenarios.

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 codes on the website, just like adding statistical codes. You can then implement a full-text search function:

To apply for

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

After opening it, fill in the address, email and warehouse address and other information. Note here that the site must be publicly accessible:

After filling it out, we waited a while (I waited three days), and if the application was approved, we received an email:

Reply to this email and tell yourself that you are the maintainer of the site and that you can change the code:

Then you get an email the next day with the required information like your AppId:

The default theme

If you are using VuePress’s default theme, VuePress directly provides 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>'
      // If Algolia does not provide you with 'appId', use 'BH4D9OD16A' or remove the configuration item
      appId: '<APP_ID>',}}}Copy the code

You can implement full-text search with this simple configuration:

The search is empty

If you Search for any data and it shows that the data cannot be searched, it is likely that there is something wrong with the crawled data. We log in www.algolia.com/ to open the admin background and click Search in the left option bar to check the corresponding indexName data. If no data is displayed in Browse, That means there may be something wrong with the data crawled, resulting in no corresponding Records generated:

If there is no data, then we will check the crawl of logic, open the crawler background: crawler.algolia.com/admin/crawl… , click the corresponding indexName to enter the background:

If the crawler was successfully retrieved, there is also Monitoring Success data, but Records is 0, then there is probably a problem with the crawler extraction logic. Click the Editor in the left option bar to view the specific crawler logic:

Like pathsToMatch if here is https://ts.yayujs.com/docs/ * *, But your site is [https://ts.yayujs.com/learn-typescript/] * * * * (https://ts.yayujs.com/docs/) at the beginning of, that is probably will extract mistakes here, change, and then click on the right side of the test data:

It is ok to extract data like this, click Save in the upper right corner, and then switch back to Overview, click Restart in the upper right corner, and then crawl the data again:

If there is data in the Records, there will be data in the search.

Other topics

If you don’t use VuePress’s default theme, like I did with vuepress-theme-reco, its search bar is self-implemented, so adding the above configuration won’t work. In this case, you need to follow the method in the email. Add the CSS and JavaScript files manually, and then call the supplied API when it’s finished loading.

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"}}]]Copy the code

Then modify the.vuepress/ enhanceapp.js file:

export default ({ router, Vue, isServer }) => {
  Vue.mixin({
    mounted() {
      // If setTimeout is not set, an error will be reported, but it does not affect the effect
      setTimeout(() = > {
        try {
          docsearch({
            appId: "43GX903BPS".apiKey: "feff649032d8034cf2a636ef55d96054".indexName: "ts-yayujs".container: '.search-box'.debug: false
          });
        } catch(e) {
          console.log(e); }},100)}}); };Copy the code

Note that container, referring to the official docSearch repository, provides not a selector for the input box, but a mount node, such as a div selector.

The display effect is as follows:

Style with the theme of the existing some is not uniform, but it doesn’t matter, we can modify the vuepress/styles/index styl to cover the current style, such as I modify the code as follows:

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

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

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

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

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

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

The final effect is as follows:

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 24th article in a series at github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.