Hugo添加Algolia搜索

2022-05-04 约 1196 字预计阅读 3 分钟

前言

Hugo 添加 Algolia 搜索, 本文以 LoveIt 主题为例

LoveIt 启用 Algolia 搜索

添加以下代码在你的 config.toml, 根据自己情况填写

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


[params]
 [params.search]
  enable = true
  # 搜索引擎的类型 ("lunr", "algolia")

  type = "algolia"
  # 文章内容最长索引长度

  contentLength = 4000
  # 搜索框的占位提示语

  placeholder = ""
  # LoveIt 新增 | 0.2.1 最大结果数目

  maxResultLength = 10
  # LoveIt 新增 | 0.2.3 结果内容片段长度

  snippetLength = 50
  # LoveIt 新增 | 0.2.1 搜索结果中高亮部分的 HTML 标签

  highlightTag = "em"
  # LoveIt 新增 | 0.2.4 是否在搜索索引中使用基于 baseURL 的绝对路径

  absoluteURL = false
  [params.search.algolia]
    index = ""
    appID = ""
    searchKey = ""
[outputs]
  home = ["HTML", "RSS", "JSON"]

获取 Algolia 相关配置

Algolia官网
注册登陆

创建属于 Hugo 的 Application

名称随便填一个, 例如 Hugo
CHOOSE YOUR SUBSCRIPTION –> 选择免费的 FREE
点击右侧 —> Next Step:Data Center
选择一个离你网站地方进的地方

获取 index

回到主页
1. 点击左下角的 Data sources
2. 选择你刚才注册的 Application
1. 点击左上角 Indices
2. 点击右上角 Greate Index
3. 填一个名称, 例如 Hugo, 之后在 config.toml 配置 index

获取 appID

获取 searchKey

上传到 Algolia

在你的Hugo主目录下运行:
1

hugo
public 目录下会生成 index.json
将 index.json 上传到你的 Algolia index 中

自动化上传 index.json

需要安装 npm, nodejs
Nodejs

你的 Hugo 目录下安装 atomc-algolia

1

npm install atomic-algolia --save

你的 Hugo 目录下新建 .env 文件

内容为, 请根据自己信息填写, 每一项缺一不可

1
2
3
4


ALGOLIA_APP_ID=
ALGOLIA_INDEX_NAME=""
ALGOLIA_INDEX_FILE="public/index.json"
ALGOLIA_ADMIN_KEY=

开始自动上传

hugo
自动生成 public 目录
npm run algolia

添加不同语言的搜索

在 Algolia 同个 Application 创建两个 index
不同语言有不同的 index.json
请在下方找到对应的 search 配置

参考配置

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107


# [en, zh-cn, fr, pl, ...] 设置默认的语言

defaultContentLanguage = "zh-cn"

[languages]
  [languages.en]
    weight = 1
    title = "ISouthRain"
    languageCode = "en"
    languageName = "English"
    [[languages.en.menu.main]]
      identifier = "posts"
      pre = ""
      post = ""
      name = "Posts"
      url = "/posts/"
      title = ""
      weight = 1
    [[languages.en.menu.main]]
      identifier = "tags"
      pre = ""
      post = ""
      name = "Tags"
      url = "/tags/"
      title = ""
      weight = 2
    [[languages.en.menu.main]]
      identifier = "categories"
      pre = ""
      post = ""
      name = "Categories"
      url = "/categories/"
      title = ""
      weight = 3
    [languages.en.params.search]
      enable = true
      # 搜索引擎的类型 ("lunr", "algolia")

      type = "algolia"
      # 文章内容最长索引长度

      contentLength = 4000
      # 搜索框的占位提示语

      placeholder = ""
      # LoveIt 新增 | 0.2.1 最大结果数目

      maxResultLength = 10
      # LoveIt 新增 | 0.2.3 结果内容片段长度

      snippetLength = 50
      # LoveIt 新增 | 0.2.1 搜索结果中高亮部分的 HTML 标签

      highlightTag = "em"
      # LoveIt 新增 | 0.2.4 是否在搜索索引中使用基于 baseURL 的绝对路径

      absoluteURL = false
      [languages.en.params.search.algolia]
    index = "" # 根据你创建的 index 名, 例如 Hugo-en

    appID = "" # 添加自己的

    searchKey = "" # 添加自己的



  [languages.zh-cn]
    weight = 2
    title = "ISouthRain"
    # 网站语言, 仅在这里 CN 大写

    languageCode = "zh-CN"
    languageName = "简体中文"
    # 是否包括中日韩文字

    hasCJKLanguage = true
    [[languages.zh-cn.menu.main]]
      identifier = "posts"
      pre = ""
      post = ""
      name = "文章"
      url = "/posts/"
      title = ""
      weight = 1
    [[languages.zh-cn.menu.main]]
      identifier = "tags"
      pre = ""
      post = ""
      name = "标签"
      url = "/tags/"
      title = ""
      weight = 2
    [[languages.zh-cn.menu.main]]
      identifier = "categories"
      pre = ""
      post = ""
      name = "分类"
      url = "/categories/"
      title = ""
      weight = 3
    [languages.zh-cn.params.search]
      enable = true
      # 搜索引擎的类型 ("lunr", "algolia")

      type = "algolia"
      # 文章内容最长索引长度

      contentLength = 4000
      # 搜索框的占位提示语

      placeholder = ""
      # LoveIt 新增 | 0.2.1 最大结果数目

      maxResultLength = 10
      # LoveIt 新增 | 0.2.3 结果内容片段长度

      snippetLength = 50
      # LoveIt 新增 | 0.2.1 搜索结果中高亮部分的 HTML 标签

      highlightTag = "em"
      # LoveIt 新增 | 0.2.4 是否在搜索索引中使用基于 baseURL 的绝对路径

      absoluteURL = false
      [languages.zh-cn.params.search.algolia]
    index = "" # 根据你创建的 index 名, 例如 Hugo-zh

    appID = "" # 添加自己的

    searchKey = "" # 添加自己的

请享受🍔🍟

FAQ❓

遇到了问题?
- 请在下方回复