使用Hugo自搭博客系列三：algolia搜索

1
2
3

{{- if .Site.Params.algolia.appId -}}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
{{- end -}}

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

{{- if .Site.Params.algolia.appId -}}
  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
  <script>
  docsearch({
      apiKey: {{ .Site.Params.algolia.searchOnlyKey }},
      indexName: {{ .Site.Params.algolia.indexName }},
      appId: {{ .Site.Params.algolia.appId }},
      inputSelector: '.docsearch-input',
      debug: false,
  });
  docsearch({
      apiKey: {{ .Site.Params.algolia.searchOnlyKey }},
      indexName: {{ .Site.Params.algolia.indexName }},
      appId: {{ .Site.Params.algolia.appId }},
      inputSelector: '.mob-docsearch-input',
      debug: false,
  });
  </script>
{{- end -}}

1
2
3
4
5

    {{- if .Site.Params.algolia.appId -}}
      <li style="display:inline-block;margin-right:10px;">
        <input type="search" class="docsearch-input" placeholder="Search" />
      </li>
    {{- end -}}

1
2
3
4
5

    {{- if .Site.Params.algolia.appId -}}
      <li style="display:inline-block;margin-right:10px;">
          <input type="search" class="mob-docsearch-input" placeholder="Search" />
      </li>
    {{- end -}} 

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

.slideout-menu {
  position: fixed;
  top: 0;
  left: 0px;
  bottom: 0;
  width: 180px;
  min-height: 100vh;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
  display: none;

  .language-selector {
    padding-left: 30px;
  }
}

// 这里新增
@media screen and (max-width: 500px) {
    .algolia-autocomplete .ds-dropdown-menu {
        min-width: 99vw;
    }
}

1
2
3
4
5
6
7
8
9

{{/* 生成Algolia搜索索引文件 */}}
{{- $.Scratch.Add "index" slice -}}
{{/* content/posts或content/post目录下的博文才生成索引 */}}
{{- range where (where .Site.Pages "Type" "in" (slice "posts" "post")) "IsPage" true -}}
  {{- if and (not .Draft) (not .Params.private) -}}
    {{- $.Scratch.Add "index" (dict "objectID" .File.UniqueID "url" .Permalink "content" (.Summary | plainify) "tags" .Params.Tags "lvl0" .Title "lvl1" .Params.Categories "lvl2" "摘要") -}}
  {{- end -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

[outputs]
    home = ["HTML", "RSS", "Algolia"]

[outputFormats.Algolia]
  baseName = "algolia"
  isPlainText = true
  mediaType = "application/json"
  notAlternative = true
  
[params.algolia]
  appId = "填下" # 是id
  indexName = "填下"
  searchOnlyKey = "填下"

1
2

npm init
npm install atomic-algolia --save

1
2
3
4

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "algolia": "atomic-algolia"
  },

1
2
3

ALGOLIA_APP_ID=你的Application ID # 注意是ID
ALGOLIA_INDEX_NAME=你的索引名字 ALGOLIA_INDEX_FILE=public/algolia.json 
ALGOLIA_ADMIN_KEY=你的Admin API Key

1

npm run algolia