add swiftype support

README.md

@@ -122,7 +122,7 @@ banner: http://example.com/banner.jpg
 
 ### Custom Categories & Tags Pages
 
-To enable custom categories page and tags page, just copy the `categories` folder and `tags` folder under your theme's `_source` foler into your site's `source` folder. Then edit theme's _config.yml and add the following lines: 
+To enable custom categories page and tags page, just copy the `categories` folder and `tags` folder under your theme's `_source` foler into your site's `source` folder. Then edit theme's _config.yml and add the following lines:
 ```r
 # Header
 menu:
@@ -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

@@ -18,12 +18,23 @@
     ds.type = 'text/javascript';ds.async = true;
     ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
     ds.charset = 'UTF-8';
-    (document.getElementsByTagName('head')[0] 
+    (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
   })();
 </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

@@ -19,7 +19,7 @@ $header-block-left
 
 $header-block-right
   float: right
-  
+
 .header-inner
   height: 100%
   position: relative
@@ -45,7 +45,7 @@ $header-block-right
   top: 50%
   left: 0
   margin-top: logo-size * -0.5
-  
+
 .header-sub
   border-top: 1px solid color-border
   ul
@@ -60,7 +60,7 @@ $header-block-right
   .main-nav-link
     display: inline-block
     line-height: header-sub-height
-    
+
 #header-sub
   @media mq-mobile
     display: none
@@ -74,13 +74,13 @@ $header-block-right
     display: none
   @media mq-mini
     display: none
-    
+
 #main-nav-mobile
   @media mq-tablet
     display: none
   @media mq-normal
     display: none
-  
+
 
 $nav-link
   float: left
@@ -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