Using Algolia with Hugo HBstack theme

Using Algolia with Hugo HBstack theme

TL;DR

You can not find Hugo template on Algolia cause hugo is based on themes, and each theme uses different css styles.

If you also use hbstack, here is my algolia crawler config you can refer to.

 1new Crawler({
 2  appId: "xxxxxxxxx",  // change to your appId
 3  apiKey: "xxxxxxxxxx",  // change to your apiKey
 4  rateLimit: 8,
 5  maxDepth: 10,
 6  startUrls: ["https://travisbikkle.github.io/"],
 7  // be careful with sitemaps below, it's related to you multi-lingual config in your hugo.yaml, your site might be in separated in individual site like zh-hans.youdomain.com, it's related to your languages.yaml(or hugo.yaml:languages),
 8  sitemaps: [
 9    "https://travisbikkle.github.io/zh-hans/sitemap.xml",
10    "https://travisbikkle.github.io/zh-hant/sitemap.xml",
11    "https://travisbikkle.github.io/en/sitemap.xml",
12  ],
13  ignoreCanonicalTo: false,
14  discoveryPatterns: ["https://travisbikkle.github.io/**"],
15  schedule: "every 1 day at 3:00 pm",
16  actions: [
17    {
18      indexName: "xxxxxxxx", // change to your index name
19      pathsToMatch: ["https://travisbikkle.github.io/**", "!*.xml"],
20      recordExtractor: ({ $, helpers }) => {
21        return helpers.docsearch({
22          recordProps: {
23            lvl0: {
24              selectors: "",
25              defaultValue: "Title",
26            },
27            lvl1: [
28              "h1.hb-blog-post-title",
29              ".hb-blog-post-content h1",
30              "h1.hb-docs-doc-title",
31              ".breadcrumb-item.active a",
32            ],
33            lvl2: [".hb-blog-post-content h2", ".hb-docs-doc-content h2"],
34            lvl3: [".hb-blog-post-content h3", ".hb-docs-doc-content h3"],
35            lvl4: [".hb-blog-post-content h4", ".hb-docs-doc-content h4"],
36            lvl5: [".hb-blog-post-content h5", ".hb-docs-doc-content h5"],
37            content: [
38              ".hb-blog-post-content p, .hb-blog-post-content li",
39              ".hb-docs-doc-content p, .hb-docs-doc-content li",
40            ],
41          },
42          indexHeadings: true,
43          aggregateContent: true,
44          recordVersion: "v3",
45        });
46      },
47    },
48  ],
49  initialIndexSettings: {
50    snzhaoyuaio: {
51      attributesForFaceting: ["type", "lang"],
52      attributesToRetrieve: ["hierarchy", "content", "anchor", "url"],
53      attributesToHighlight: ["hierarchy", "content"],
54      attributesToSnippet: ["content:10"],
55      camelCaseAttributes: ["hierarchy", "content"],
56      searchableAttributes: [
57        "unordered(hierarchy.lvl0)",
58        "unordered(hierarchy.lvl1)",
59        "unordered(hierarchy.lvl2)",
60        "unordered(hierarchy.lvl3)",
61        "unordered(hierarchy.lvl4)",
62        "unordered(hierarchy.lvl5)",
63        "unordered(hierarchy.lvl6)",
64        "content",
65      ],
66      distinct: true,
67      attributeForDistinct: "url",
68      customRanking: [
69        "desc(weight.pageRank)",
70        "desc(weight.level)",
71        "asc(weight.position)",
72      ],
73      ranking: [
74        "words",
75        "filters",
76        "typo",
77        "attribute",
78        "proximity",
79        "exact",
80        "custom",
81      ],
82      highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
83      highlightPostTag: "</span>",
84      minWordSizefor1Typo: 3,
85      minWordSizefor2Typos: 7,
86      allowTyposOnNumericTokens: false,
87      minProximity: 1,
88      ignorePlurals: true,
89      advancedSyntax: true,
90      attributeCriteriaComputedByMinProximity: true,
91      removeWordsIfNoResults: "allOptional",
92    },
93  },
94});

Enable Docsearch

This article assumes that you have applied for appId and appKey from Algolia.

You should refer to HBstack official website params.yaml. It is recommended to fork it and make a global search for docsearch. Then you will know it not difficult to read the code and config enable docsearch.

Disable the default search plugin in HBStack

After configuring Algolia, press CTRL K and two windows will pop up.

You could search search globally and comment it out in the code, including go.mod and yaml configuration, and re-publish the website.