add swiftype support

README.md

@@ -140,6 +140,20 @@ English and Simplified Chinese are the default languages of the theme. You can a
 language: zh-CN
 ```
 
+## Swiftype
+
+You can now enable **Swiftype** by editing blog's `_config.yml`.
+
+``` yml
+swiftype_install_key: XXX_XXXXXXXXXXXXXXXX
+```
+
+This `install key` can be found at your own engine's install page:
+
+![](http://ppoffice.github.io/hexo-theme-icarus/gallery/swiftype_install.jpg "")
+
+Finally, don't forget to save your swiftype configuration to complete the installation.
+
 ## Features
 
 ### Profile Sidebar

_config.yml.site.example

@@ -76,6 +76,8 @@ theme: icarus
 # DuoShuo
 # duoshuo_shortname: hexo-theme-icarus
 
+# Swiftype
+# swiftype_install_key: XXX_XXXXXXXXXXXXXXXX
 
 # Deployment
 ## Docs: http://hexo.io/docs/deployment.html

layout/_partial/after-footer.ejs

@@ -24,6 +24,17 @@
 </script>
 <% } %>
 
+<% if (config.swiftype_install_key) { %>
+  <script type="text/javascript">
+    (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
+    (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
+    e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
+    })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
+
+    _st('install','<%= config.swiftype_install_key %>','2.0.0');
+  </script>
+<% } %>
+
 <%- partial('cdn_after_footer') %>
 
 <% if (theme.fancybox){ %>

layout/_partial/header.ejs

@@ -15,7 +15,14 @@
         </nav>
       <% } %>
       <div id="search-form-wrap">
-        <%- search_form({ button: ' ', text: __('index.search') }) %>
+        <% if (config.swiftype_install_key) { %>
+          <form class="search-form">
+            <input type="text" class="st-default-search-input search-form-input" placeholder="<%= __('index.search') %>">
+            <button type="submit" class="search-form-submit"></button>
+          </form>
+        <% } else { %>
+          <%- search_form({ button: ' ', text: __('index.search') }) %>
+        <% } %>
       </div>
     </div>
   </div>
@@ -26,7 +33,13 @@
           <td><a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></td>
         <% } %>
         <td>
-          <%- search_form({ text: __('index.search') }) %>
+          <% if (config.swiftype_install_key) { %>
+            <div class="search-form">
+              <input type="text" class="st-default-search-input search-form-input" placeholder="<%= __('index.search') %>">
+            </div>
+          <% } else { %>
+            <%- search_form({ text: __('index.search') }) %>
+          <% } %>
         </td>
       </tr>
     </table>

source/css/_partial/header.styl

@@ -132,7 +132,7 @@ $nav-link
     .search-form-input
       width: 100%
       height: logo-size
-      padding: 0 30px 0 10px
+      padding: 0 30px 0 15px
       line-height: logo-size
       border-radius: ((logo-size + 2)/2)
       &::-webkit-search-results-decoration
@@ -153,19 +153,28 @@ $nav-link
       &:hover, &:focus
         color: #777
 
-.search-form-input
+.search-form-input,
+.search-form-input.st-ui-search-input,
+.search-form-input.st-default-search-input
+  -webkit-appearance: textarea
+  appearance: textarea
+  padding: 0
   width: 200px
-  outline: none
-  appearance: none
-  background: none
   box-shadow: none
   color: color-default
   transition: 0.2s ease
   box-sizing: border-box
+  height: auto !important
+  line-height: line-height
+  outline: none !important
+  background: none !important
   font: font-size font-sans
-  border: 1px solid color-border
+  border: 1px solid color-border !important
   &:focus
-    border-color: color-link
+    border-color: color-link !important
+  &::-webkit-search-results-decoration
+  &::-webkit-search-cancel-button
+    -webkit-appearance: none
 
 #main-nav-mobile
   overflow-y: hidden