feat: add local search

_config.yml

@@ -1,7 +1,7 @@
 # Theme Info
-theme_name: ILS-X
+theme_name: ILS
 
-theme_version: 1.0.0
+theme_version: 0.1.1
 
 menu:
   Home: /
@@ -14,6 +14,12 @@ favicon: images/favicon.png
 
 avatar: images/avatar.png
 
+# Site page layout setting.
+page:
+  left_side_width: 30
+  right_side_width: 70
+  media_max_width: 960
+
 # Social Links.
 # Usage: `Key: permalink || icon`
 # Key is the link label showing to end users.
@@ -40,9 +46,9 @@ highlight_theme: normal
 # You can get your appid and appkey from https://leancloud.cn
 # more info please open https://github.com/xCss/Valine
 valine:
-  enable: false
+  enable: true
-  appid:    # your leancloud application appid
+  appid:  ih2nzG3ilVNdLgJK4kBXTjOq-gzGzoHsz # your leancloud application appid
-  appkey:   # your leancloud application appkey
+  appkey: gdf6tXXLBTLg9qpjS2y6Tbw7 # your leancloud application appkey
   notify: false # mail notifier, https://github.com/xCss/Valine/wiki
   verify: false # Verification code
   placeholder: 评论一下再走吧~
@@ -51,18 +57,24 @@ valine:
 # Get more information on http://ibruce.info/2015/04/04/busuanzi/
 busuanzi_count:
   # count values only if the other configs are false
-  enable: false
+  enable: true
   # custom uv span for the whole site
-  site_uv: false
+  site_uv: true
+  site_uv_header:
+  site_uv_footer:
   # custom pv span for the whole site
-  site_pv: false
+  site_pv: true
+  site_pv_header:
+  site_pv_footer:
   # custom pv span for one page only
-  page_pv: false
+  page_pv: true
+  page_pv_header:
+  page_pv_footer:
 
 # Local Search
 # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
 local_search:
-  enable: false
+  enable: true
   # If auto, trigger search by changing input.
   # If manual, trigger search by pressing enter key or search button.
   trigger: auto

_config2.yml

@@ -0,0 +1,80 @@
+# Theme Info
+theme_name: ILS-X
+
+theme_version: 1.0.0
+
+menu:
+  Home: /
+  Archives: /archives
+  About: /about
+
+rss: /atom.xml
+
+favicon: images/favicon.png
+
+avatar: images/avatar.png
+
+# Social Links.
+# Usage: `Key: permalink || icon`
+# Key is the link label showing to end users.
+# Value before `||` delimeter is the target permalink.
+# Value after `||` delimeter is the name of FontAwesome icon.
+social:
+  #GitHub: https://github.com/yourname || github
+  #E-Mail: mailto:yourmail || envelope
+  #Google: https://plus.google.com/yourname || google
+  #Twitter: https://twitter.com/yourname || twitter
+  #Weibo: https://www.facebook.com/yourname || weibo
+  #FB Page: https://www.facebook.com/yourname || facebook
+  #VK Group: https://vk.com/yourname || vk
+  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
+  #Instagram: https://instagram.com/yourname || instagram
+
+# Code Highlight theme
+# Available value:
+#   normal | night | night eighties | night blue | night bright
+# https://github.com/chriskempson/tomorrow-theme
+highlight_theme: normal
+
+# Valine.
+# You can get your appid and appkey from https://leancloud.cn
+# more info please open https://github.com/xCss/Valine
+valine:
+  enable: false
+  appid:    # your leancloud application appid
+  appkey:   # your leancloud application appkey
+  notify: false # mail notifier, https://github.com/xCss/Valine/wiki
+  verify: false # Verification code
+  placeholder: 评论一下再走吧~
+
+# Show PV/UV of the website/page with busuanzi.
+# Get more information on http://ibruce.info/2015/04/04/busuanzi/
+busuanzi_count:
+  # count values only if the other configs are false
+  enable: false
+  # custom uv span for the whole site
+  site_uv: false
+  # custom pv span for the whole site
+  site_pv: false
+  # custom pv span for one page only
+  page_pv: false
+
+# Local Search
+# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
+local_search:
+  enable: false
+  # If auto, trigger search by changing input.
+  # If manual, trigger search by pressing enter key or search button.
+  trigger: auto
+  # Show top n results per article, show all results by setting to -1
+  top_n_per_article: 1
+  # Unescape html strings to the readable one.
+  unescape: false
+  # Preload the search data when the page loads.
+  preload: false
+
+
+# Assets
+css: css
+js: js
+images: images

layout/_partial/header.ejs

@@ -16,12 +16,6 @@
                     </a>
                 </li>
             <% } %>
-            <% if (theme.local_search.enable) { %>
-                <li>
-                    <button class="search-btn btn popup-trigger"><i class="fa fa-search"></i></button>
-                </li>
-                <%- next_js('local-search.js') %>
-            <% } %>
         </ul>
 
         <div class="menu-bar">

layout/_partial/local-search.ejs

@@ -15,7 +15,7 @@
                 >
             </div>
             <span class="popup-btn-close">
-                <i class="fa fa-times-circle"></i>
+                <i class="fa fa-times"></i>
             </span>
         </div>
         <div id="search-result">

layout/_partial/tools.ejs

@@ -1,9 +1,12 @@
 <div class="tools-container">
     <ul class="tools-list">
-        <li class="search-btn">
+        <% if (theme.local_search.enable) { %>
-            <i class="fa fa-search"></i>
+            <li class="search popup-trigger">
-        </li>
+                <i class="fa fa-search"></i>
-        <li class="mode-toggle-btn">
+            </li>
+            <%- next_js('local-search.js') %>
+        <% } %>
+        <li class="mode-toggle">
             <i class="fa fa-moon-o"></i>
         </li>
     </ul>

layout/page.ejs

@@ -2,6 +2,7 @@
     <div class="page-top">
         <%- partial('_partial/header') %>
     </div>
+
     <div class="page-middle">
         <main class="main-content">
             <% if (is_home()) { %>
@@ -32,3 +33,6 @@
         <%- partial('_partial/footer') %>
     </div>
 </div>
+<% if (theme.local_search.enable) { %>
+    <%- partial('_partial/local-search') %>
+<% } %>

source/css/layout/_partial/header.styl

@@ -259,7 +259,7 @@
 }
 
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $media-max-width) {
   .menu-list {
     display: none;
   }

source/css/layout/_partial/local-search.styl

@@ -2,29 +2,28 @@
 
 $icon-size = 18px;
 
-$keyword-red = #ff2a2a;
-
 .search-pop-overlay {
-  background: rgba(0, 0, 0, .3);
   display: none;
-  height: 100%;
-  left: 0;
   position: fixed;
+  left: 0;
   top: 0;
+  height: 100%;
   width: 100%;
-  z-index: 1000;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: $z-index-5;
 }
 
 
 .search-popup {
-  background: #f5f5f5;
+  background: var(--background-color);
-  border-radius: 5px;
+  border-radius: 2px;
   height: 80%;
-  left: calc(50% - 350px);
+  left: 50%;
+  transform: translateX(-50%);
   position: fixed;
   top: 10%;
-  width: 700px;
+  width: 70%;
-  z-index: 1001;
+  z-index: $z-index-6;
 
   .search-icon, .popup-btn-close {
     color: var(--normal-text-color);
@@ -36,14 +35,14 @@ $keyword-red = #ff2a2a;
     cursor: pointer;
 
     &:hover .fa {
-      color: #222;
+      color: var(--first-text-color);
     }
   }
 
   .search-header {
-    background: #eee;
+    background: var(--border-color);
-    border-top-left-radius: 5px;
+    border-top-left-radius: 2px;
-    border-top-right-radius: 5px;
+    border-top-right-radius: 2px;
     display: flex;
     padding: 10px;
   }
@@ -64,20 +63,21 @@ input.search-input {
 
 
 .search-popup {
+
   .search-input-container {
     flex-grow: 1;
     padding: 2px;
   }
 
   ul.search-result-list {
-    margin: 5px;
+    margin: 10px 5px;
-    padding: 0;
     width: 100%;
   }
 
   p.search-result {
-    border-bottom: 1px dashed #ccc;
+    border-bottom: 1px solid var(--border-color);
-    padding: 5px 0;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
   }
 
   a.search-result-title {
@@ -85,8 +85,8 @@ input.search-input {
   }
 
   .search-keyword {
-    border-bottom: 1px dashed $keyword-red;
+    border-bottom: 1px dashed var(--primary-color);
-    color: $keyword-red;
+    color: var(--primary-color);
     font-weight: bold;
   }
 
@@ -98,7 +98,14 @@ input.search-input {
   }
 
   #no-result {
-    color: #ccc;
+    color: var(--third-text-color);
     margin: auto;
   }
 }
+
+@media screen and (max-width: $media-max-width) {
+  .search-popup {
+    width: 80%;
+  }
+
+}

source/css/layout/_partial/tools.styl

@@ -7,13 +7,13 @@
       cursor: pointer;
       padding: 5px;
       border-radius: 50%;
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--third-text-color);
       width: 26px;
       height: 26px;
+      font-size: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 18px;
       margin-bottom: 12px;
 
       &:hover {
@@ -25,10 +25,6 @@
         margin-bottom: 0;
       }
 
-      i {
-        transition: all 0.3s ease;
-      }
-
     }
   }
 

source/css/layout/common/basic.styl

@@ -26,6 +26,7 @@ button {
   border: 0;
   outline: none;
   cursor: pointer;
+  background: transparent;
 }
 
 p {

source/css/layout/common/variables.styl

@@ -5,9 +5,10 @@
 // ===============================
 // layout
 // ===============================
-$header-height = 100px; // 头部默认高度
+$header-height = 100px;         // 头部默认高度
-$header-shrink-height = 60px; // 头部收缩高度
+$header-shrink-height = 60px;   // 头部收缩高度
-$main-content-width = 70%; // 中间内容区域宽度
+$main-content-width = 70%;      // 中间内容区域宽度
+$media-max-width = 760px;       // 媒体查询最大宽度
 
 // ===============================
 // z-index
@@ -29,7 +30,7 @@ $first-text-color = #2c3e50; // 第一文本颜色
 $second-text-color = #525e6b; // 第二文本颜色
 $third-text-color = #9ca3ad; // 第三文本颜色
 $normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
-$border-color = #ccc; // 边框颜色
+$border-color = #eee; // 边框颜色
 
 // dark mode color
 $dark-background-color = #333; // 背景颜色

source/js/common.js

@@ -5,7 +5,7 @@ const menuBar = document.querySelector('.menu-bar');
 const windowMask = document.querySelector('.window-mask');
 const headerHeight = header.getBoundingClientRect().height;
 
-window.addEventListener('scroll', function (e) {
+window.addEventListener('scroll', function (_e) {
 
     const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
 
@@ -20,15 +20,10 @@ window.addEventListener('scroll', function (e) {
     }
 });
 
-menuBar.addEventListener('click', function (e) {
+menuBar.addEventListener('click', function (_e) {
     header.classList.toggle('header-drawer-show');
 });
 
-windowMask.addEventListener('click', function (e) {
+windowMask.addEventListener('click', function (_e) {
     header.classList.toggle('header-drawer-show');
 });
-
-
-const searchBtn = document.querySelector('.search-btn');
-searchBtn.addEventListener('click', function (e) {
-});

source/js/toggle-mode.js

@@ -1,7 +1,7 @@
 /**
  * 日间/夜间 模式切换
  */
-const modeToggleBtn = document.querySelector('.mode-toggle-btn');
+const modeToggleBtn = document.querySelector('.mode-toggle');
 const iconDom = modeToggleBtn.querySelector('i');
 const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
 if (modeConfig) {