教程：在jekyll博客中添加搜索功能

发表于 更新于 分类于

在创建一个静态博客网站时，对于网站的搜索功能来说是一个很重要的设计。虽然jekyll本身没有内置的搜索功能，但是我们可以通过使用一些可选的jekyll插件或通过集成第三方服务来添加搜索功能。

下面就以最经典的hydeout主题为例来介绍一下，具体步骤:

1.先下载Simple-Jekyll-Search这个插件到本地

开源地址：https://github.com/christian-fei/Simple-Jekyll-Search

2.创建search.json文件

首先在根目录下创建一个search.json的文件，然后复制下面的代码到这个文件

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


<!--请自己手动取掉反斜杠，或者直接复制到vscode里面会自动去掉。
---
layout: null
---
\[
  \{\% for post in site.posts \%\}
    \{
      "title"    : "\{\{ post.title | escape \}\}",
      "category" : "\{\{ post.category \}\}",
      "tags"     : "\{\{ post.tags | join: ', ' \}\}",
      "url"      : "\{\{ site.baseurl \}\}\{\{ post.url \}\}",
      "date"     : "\{\{ post.date \}\}"
    \} \{\% unless forloop.last \%\},\{\% endunless \%\}
  \{\% endfor \%\}
\]
-->

3.复制下载好的js文件到站点js目录下

打开Simple-Jekyll-Search/dest/目录，把这两个文件simple-jekyll-search.js和simple-jekyll-search.min.js直接复制到自己博客根目录下的/js/下，没有就新建一个js目录。

4.在_layouts目录下新建一个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

---
layout: default
title: 搜索
---


<header>
  <h1 class="page-title">{{ page.title }}</h1>
  <form>
    <label for="search-input">
      <h4>请输入标题、相关内容或日期</h4>
      <br>
    </label>
    <input type="text" id="search-input" placeholder="搜索...">
    
  </form>

  <br>
</header>
<div class="content">
  <div id="results-container">
    <ul></ul>
    <p class="no-results" style="display:none;">没有搜索到相关文章</p>
  </div>
</div>
<script src="/js/simple-jekyll-search.min.js"></script>
<script>
  SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container').querySelector('ul'),
  json: '/search.json',
  searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
  noResultsText: '', // 将此处设置为空字符串
  limit: 20,
  fuzzy: false,
  onSearchComplete: function(searchResults) { // 添加此行
    var noResults = document.querySelector('.no-results');
    if (searchResults.length === 0) {
      noResults.style.display = 'block';
    } else {
      noResults.style.display = 'none';
    }
  }
});

</script>

5.如果要单独显示一个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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<style>
  /* 修改header样式 */
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
  }

  /* 修改标题样式 */
  h1.page-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 32px;
    text-align: center;
  }

  /* 修改提示信息样式 */
  h4 {
    margin: 0;
    color: #666;
    font-size: 18px;
    margin-bottom: 10px;
  }

  /* 修改输入框样式 */
  #search-input {
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
  }

  /* 修改输入框聚焦样式 */
  #search-input:focus {
    outline: none;
    border-bottom: 2px solid #000;
  }

  /* 修改搜索结果容器样式 */
  #results-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* 修改搜索结果列表样式 */
  #results-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* 修改搜索结果项样式 */
  #results-container li {
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
  }

  /* 修改搜索结果链接样式 */
  #results-container li a {
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  /* 修改搜索结果链接悬停样式 */
  #results-container li a:hover {
    color: #007bff;
  }

  /* 修改没有搜索结果提示信息样式 */
  .no-results {
    text-align: center;
    font-size: 18px;
    color: #666;
  }
</style>
<header>
  <h1 class="page-title">{{ page.title }}</h1>
  <form>
    <label for="search-input">
      <h4>请输入标题、相关内容或日期</h4>
    </label>
    <input type="text" id="search-input" placeholder="搜索...">
  </form>
</header>
<div class="content">
  <div id="results-container">
    <ul></ul>
    <p class="no-results" style="display:none;">没有搜索到相关文章</p>
  </div>
</div>
<script src="/js/simple-jekyll-search.min.js"></script>
<script>
  SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container').querySelector('ul'),
  json: '/search.json',
  searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
  noResultsText: '', // 将此处设置为空字符串
  limit: 20,
  fuzzy: false,
  onSearchComplete: function(searchResults) { // 添加此行
    var noResults = document.querySelector('.no-results');
    if (searchResults.length === 0) {
      noResults.style.display = 'block';
    } else {
      noResults.style.display = 'none';
    }
  }
});

</script>


通过安装Simple-Jekyll-Search插件，我们可以很轻松地添加搜索功能。同时，为了让搜索结果显示得更加友好，我们还为搜索结果设置了一个模板，并添加了搜索结果为空时的处理。以上几个简单步骤就可以让你的博客网站拥有搜索功能。