Jekyll에 검색 페이지 추가하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
layout: none
---
[
  {% 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 %}
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: none
---
[
  {% for post in site.posts %}
    {
      "title"      : {{ post.title | jsonify }},
      "categories" : "{{ post.categories | join: ' > ' }}",
      "tags"       : "{{ post.tags | join: ', ' }}",
      "date"       : "{{ post.date | date: '%Y.%m.%d' }}",
      "urlString"  : "{{ post.url }}",
      "url"        : "{{ post.url | prepend: site.baseurl }}"
    }{% unless forloop.last %},{% endunless %}
  {% endfor %}
]

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="common-header search">
  <div class="search">
    <i class="fas fa-search fa-fw"></i>
    <input id="search-input" 
      type="search" 
      tabindex="1" 
      spellcheck="false" 
      placeholder="Search"
    >
  </div>
</div>

<ul id="search-results"></ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="{{ site.baseurl }}/js/simple-jekyll-search.min.js"></script>

<script>
  window.simpleJekyllSearch = new SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '{{ site.baseurl }}/search.json',
    searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',
    noResultsText: 'No results found',
    limit: 10,
    fuzzy: false,
    exclude: ['Welcome']
  })
</script>

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
<script>
  const pointColor = getComputedStyle(document.documentElement).getPropertyValue('--point-color');

  window.simpleJekyllSearch = new SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('search-results'),
    json: '{{ site.baseurl }}/assets/json/search-data.json',
    searchResultTemplate: `
      <li>
        <div>
          <i class="fas fa-folder fa-fw"></i>
          <a href="{url}">{categories}</a>
        </div>
        <div>
          <i class="fas fa-book fa-fw"></i>
          <a href="{url}">{title}</a>
        </div>
        <div>
          <i class="fas fa-tags fa-fw"></i>
          <a href="{url}">{tags}</a>
        </div>
        <div>
          <i class="fas fa-calendar-alt fa-fw"></i>
          <a href="{url}">{date}</a>
        </div>
        <div>
          <i class="fas fa-link fa-fw"></i>
          <a href="{url}" style="font-size: 1rem;">{urlString}</a>
        </div>
      </li>
    `,
    templateMiddleware: function(prop, value, template) {
      if (prop === 'url') {
        return value;
      }

      const queries = document.getElementById('search-input').value
        .split(' ').filter(Boolean)
        .map(s => s.toLowerCase())
        .reduce((a, b) => {
          if (a.indexOf(b) < 0) a.push(b);
          return a;
        }, []);

      const lowerCaseValue = value.toLowerCase();
      let ranges = [];
      for (const query of queries) {
        let index = 0;
        while ((index = lowerCaseValue.indexOf(query, index)) > -1) {
          ranges.push([index, index + query.length]);
          index += query.length;
        }
      }

      if (queries.length > ranges.length) {
        return value
      }

      ranges.sort((a, b) => a[0] - b[0] || b[1] - a[1])
      ranges = ranges.reduce((a, b) => {
        const last = a[a.length - 1];
        if (a.length == 0 || last[1] < b[0]) {
          a.push(b);
        } else if (last[1] < b[1]) {
          a[a.length - 1][1] = b[1];
        }
        return a;
      }, []);

      for (let i = 0; i < ranges.length; i++) {
        ranges[i][0] += i * 7;
        ranges[i][1] += i * 7 + 3;
      }
      for (const range of ranges) {
        value = value.insert('<b>', range[0]).insert('</b>', range[1]);
      }
      return value;
    },
    noResultsText: '',
    limit: 100
  });

  window.onload = function() {
    window.simpleJekyllSearch.search(document.getElementById('search-input').value);
  };
</script>

1
2
3
4
5
---
layout: search
title: Search
permalink: /search
---