优化搜索

leo-qi · Feb 15, 2017 · ed13536 · ed13536
1 parent 97896c7
commit ed13536
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 56 deletions.
diff --git a/_config.yml b/_config.yml
@@ -33,8 +33,8 @@ anchorjs: true                          # if you want to customize anchor. check
 
 # Gems
 # from PR#40, to support local preview for Jekyll 3.0
-gems: [jekyll-paginate]
-gems: ['jekyll-lunr-js-search']
+gems: [jekyll-paginate,jekyll-lunr-js-search]
+#gems: ['jekyll-lunr-js-search']
 
 
 # Markdown settings
@@ -59,7 +59,7 @@ duoshuo_share: true                     # set to false if you want to use Commen
 
 
 # Analytics settings
-# Baidu Analytics 
+# Baidu Analytics
 # ba_track_id: [your track id]
 
 # Google Analytics
@@ -130,4 +130,4 @@ lunr_search:
 # excludes: [atom.xml]
 
 # 也可以针对每个post做设置,规定其是否可以被检索到
-exclude_from_search: true
+exclude_from_search: true
diff --git a/js/search.js b/js/search.js
@@ -0,0 +1,61 @@
+(function() {
+  function displaySearchResults(results, store) {
+    var searchResults = document.getElementById('search-results');
+
+    if (results.length) { // Are there any results?
+      var appendString = '';
+
+      for (var i = 0; i < results.length; i++) {  // Iterate over the results
+        var item = store[results[i].ref];
+        appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
+        appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
+      }
+
+      searchResults.innerHTML = appendString;
+    } else {
+      searchResults.innerHTML = '<li>No results found</li>';
+    }
+  }
+
+  function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split('=');
+
+      if (pair[0] === variable) {
+        return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+      }
+    }
+  }
+
+  var searchTerm = getQueryVariable('query');
+
+  if (searchTerm) {
+    document.getElementById('search-box').setAttribute("value", searchTerm);
+
+    // Initalize lunr with the fields it will be searching on. I've given title
+    // a boost of 10 to indicate matches on this field are more important.
+    var idx = lunr(function () {
+      this.field('id');
+      this.field('title', { boost: 10 });
+      this.field('author');
+      this.field('category');
+      this.field('content');
+    });
+
+    for (var key in window.store) { // Add the data to lunr
+      idx.add({
+        'id': key,
+        'title': window.store[key].title,
+        'author': window.store[key].author,
+        'category': window.store[key].category,
+        'content': window.store[key].content
+      });
+
+      var results = idx.search(searchTerm); // Get lunr to perform a search
+      displaySearchResults(results, window.store); // We'll write this in the next section
+    }
+  }
+})();
diff --git a/js/search.min.js b/js/search.min.js
diff --git a/search.html b/search.html
@@ -1,52 +1,11 @@
 ---
-layout: page
-permalink: /search/
+layout: post
 ---
-<!-- <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>  -->
-<script src="/js/lunr.js" type="text/javascript" charset="utf-8"></script>
-<script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
-<script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
-<script src="/js/URI.js" type="text/javascript" charset="utf-8"></script>
-<!--<script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>-->
-<script src="{{ "/js/jquery.lunr.search.js " | prepend: site.baseurl }}"></script>
-<!--
-<div id="search">
-  <form action="/search" method="get">
-    <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
-  </form>
-</div>
--->
-<div class="nav-item">
-    <form action="/search/" method="get">
-      <p class="control has-addons">
-        <input type="text" id="search-query" class="input" name="q" placeholder="Search" autocomplete="off">
-        <button class="button is-primary">
-          Search
-        </button>
-      </p>
-    </form>
-  </div>
-
-<section id="search-results" style="display: none;">
-  <p>Search results</p>
-  <div class="entries">
-  </div>
-</section>
-
-
-<!--
-<script id="search-results-template" type="text/mustache">
-  {{#entries}}
-    <article>
-      <h3>
-        {{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
-        <a href="{{url}}">{{title}}</a>
-      </h3>
-    </article>
-  {{/entries}}
-</script>
--->
+<form action="/search" method="get">
+  <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
+</form>
 
+<section id="search-results" style="display: none;"> </section>
 {% raw %}
 <script id="search-results-template" type="text/mustache">
   {{#entries}}
@@ -64,14 +23,16 @@ <h3>
   {{/entries}}
 </script>
 {% endraw %}
-
 <script type="text/javascript">
   $(function() {
     $('#search-query').lunrSearch({
-      indexUrl: '/search.json',             // URL of the `search.json` index data for your site
-      results:  '#search-results',          // jQuery selector for the search results container
-      entries:  '.entries',                 // jQuery selector for the element to contain the results list, must be a child of the results element above.
-      template: '#search-results-template'  // jQuery selector for the Mustache.js template
+      indexUrl  : '/js/index.json',           // url for the .json file containing search index data
+      results   : '#search-results',          // selector for containing search results element
+      template  : '#search-results-template', // selector for Mustache.js template
+      titleMsg  : '<h1>Search results<h1>',   // message attached in front of results (can be empty)
+      emptyMsg  : '<p>Nothing found.</p>'     // shown message if search returns no results
     });
   });
-</script>
+</script>
+
+<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>