hugo开启简单的搜索

hugo开启简单搜索功能

无论模板是否支持搜索都可以开启

第一步: Config.toml 可能是/config/_default/Config.toml

添加或者修改

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

第二步:创建 layouts/_default/index.json

注:layouts/ 目录里保存的是 Hugo 的模板文件。layouts/ 是站点级别的模板, themes//layouts/ 是主题级别的模板,站点级别模板的设置优先于主题级别的模板。

1
2
3
4
5
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
  {{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

完成后 可以在站点根目录生成一个 /index.json 的索引

第三步: 创建搜索页面 创建 content/search.md

1
2
3
4
5
6
---
title: "Search Results"
sitemap:
priority : 0.1
layout: "search"
---

第四步骤,添加静态模板 layouts/_default/search.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<section>
<div>
  <form action="{{ "search" | absURL }}">
    <input id="search-query" name="s"/>
  </form>
  <div id="search-results">
   <h3>Matching pages</h3>
  </div>
</div>
</section>
<script id="search-result-template" type="text/x-js-template">
<div id="summary-${key}">
  <h4><a href="${link}">${title}</a></h4>
  <p>${snippet}</p>
  ${ isset tags }<p>Tags: ${tags}</p>${ end }
  ${ isset categories }<p>Categories: ${categories}</p>${ end }
</div>
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<script src="{{ "js/search.js" | absURL }}"></script>

第五步 添加 创建 static/js/search.js

这是具体实现搜索功能的 JS 函数,search.html 中被引用,照抄即可。

  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
summaryInclude=60;
var fuseOptions = {
shouldSort: true,
includeMatches: true,
threshold: 0.0,
tokenize:true,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
  {name:"title",weight:0.8},
  {name:"contents",weight:0.5},
  {name:"tags",weight:0.3},
  {name:"categories",weight:0.3}
]
};

var searchQuery = param("s");
if(searchQuery){
$("#search-query").val(searchQuery);
executeSearch(searchQuery);
}else {
$('#search-results').append("<p>Please enter a word or phrase above</p>");
}

function executeSearch(searchQuery){
$.getJSON( "/index.json", function( data ) {
  var pages = data;
  var fuse = new Fuse(pages, fuseOptions);
  var result = fuse.search(searchQuery);
  console.log({"matches":result});
  if(result.length > 0){
    populateResults(result);
  }else{
    $('#search-results').append("<p>No matches found</p>");
  }
});
}

function populateResults(result){
$.each(result,function(key,value){
  var contents= value.item.contents;
  var snippet = "";
  var snippetHighlights=[];
  var tags =[];
  if( fuseOptions.tokenize ){
    snippetHighlights.push(searchQuery);
  }else{
    $.each(value.matches,function(matchKey,mvalue){
      if(mvalue.key == "tags" || mvalue.key == "categories" ){
        snippetHighlights.push(mvalue.value);
      }else if(mvalue.key == "contents"){
        start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0;
        end = mvalue.indices[0][1]+summaryInclude<contents.length?mvalue.indices[0][1]+summaryInclude:contents.length;
        snippet += contents.substring(start,end);
        snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0],mvalue.indices[0][1]-mvalue.indices[0][0]+1));
      }
    });
  }

  if(snippet.length<1){
    snippet += contents.substring(0,summaryInclude*2);
  }
  //pull template from hugo templarte definition
  var templateDefinition = $('#search-result-template').html();
  //replace values
  var output = render(templateDefinition,{key:key,title:value.item.title,link:value.item.permalink,tags:value.item.tags,categories:value.item.categories,snippet:snippet});
  $('#search-results').append(output);

  $.each(snippetHighlights,function(snipkey,snipvalue){
    $("#summary-"+key).mark(snipvalue);
  });

});
}

function param(name) {
  return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
}

function render(templateString, data) {
var conditionalMatches,conditionalPattern,copy;
conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
//since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
copy = templateString;
while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
  if(data[conditionalMatches[1]]){
    //valid key, remove conditionals, leave contents.
    copy = copy.replace(conditionalMatches[0],conditionalMatches[2]);
  }else{
    //not valid, remove entire section
    copy = copy.replace(conditionalMatches[0],'');
  }
}
templateString = copy;
//now any conditionals removed we can do simple substitution
var key, find, re;
for (key in data) {
  find = '\\$\\{\\s*' + key + '\\s*\\}';
  re = new RegExp(find, 'g');
  templateString = templateString.replace(re, data[key]);
}
return templateString;
}

最后 打开 http://你的网站/search 就有一个基本的站内搜索了

部分模板自带了搜索功能

你可以查看模板里面的 /exampleSite/content/search.md

然后覆盖上面的/content/search.md内容

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计