Blog Building 9: add search function to Hugo

Blog building is gradually improved , Blog content is also gradually increasing , Adding search function can easily retrieve content , Review the knowledge , Consider the past you shall know the future .
Realization hugo Blog content retrieval uses algolia service , First , Modify the blog root directory config.toml file （ Instead of , Otherwise, we can't generate .josn file ）, Add the following ( Paste to the end ）：

[outputs]
  home = ["HTML","RSS","TXT","Algolia"]
  section = ["HTML"]
  taxonomy = ["HTML"]
  term = ["HTML"]
 
[outputFormats.Algolia]
  mediaType = "application/json"
  baseName = "algolia"
  isPlainText = true
 

In the blog root /layouts establish _default Folder , Create in this folder list.algolia.json file , use nop++ Or other software to open the file and add the following ：

[
  {
   {- range $index, $entry := .Site.RegularPages }}
  {
   {- if $index }}, {
   { end }}
  {
    "objectID": {
   { .File.TranslationBaseName }},
    "url": {
   { .Permalink | jsonify }},
    "title": {
   { .Title | jsonify }},
    "summary": {
   { .Summary | jsonify }},
    "content": {
   { .Plain | jsonify }},
    "pubDate": {
   { .PublishDate | jsonify }}
  }
  {
   {- end }}
]

register algolia

Follow the registration guidance process, and then open the settings , See the picture below .

Here we store what we need API Keys

Copy the key at the red line of the upper picture , Modify the configuration file in the theme , as follows ：

# Search config
  #  Search configuration 
  [params.search]
    enable = true
    # type of search engine ["lunr", "algolia"]
    #  The type of search engine  ["lunr", "algolia"]
    type = "algolia"
    # max index length of the chunked content
    #  The longest index length of article content 
    contentLength = 4000
    # placeholder of the search bar
    #  Space occupying prompt of search box 
    placeholder = "So once "
    # max number of results length
    #  Maximum number of results 
    maxResultLength = 10
    # snippet length of the result
    #  Result content fragment length 
    snippetLength = 30
    # HTML tag name of the highlight part in results
    #  In the highlighted part of the search results  HTML  label 
    highlightTag = "em"
    # whether to use the absolute URL based on the baseURL in search index
    #  Whether to use in the search index based on  baseURL  The absolute path of 
    absoluteURL = false
    [params.search.algolia]
      index = "blog"
      appID = "xxx" #  Your key 
      searchKey = "xxx" #  Your key 

Enter cmd command ：

hugo

Then in public Generate under folder algolia.json file , We need to submit this document to algolia, See the picture below .


So far, the preliminary search function has been provided （ See the picture below ）, It can meet the needs of daily use , in addition algolia The free version is available every month 10000 Search experience . But every time you update the blog content, you need to submit it manually algolia.json, To search for new content , You can also set automatic submission , You can search relevant settings by yourself .