✨ feat: 增加搜索功能

MaLuns · Sep 19, 2022 · 5050939 · 5050939
1 parent 8f453dd
commit 5050939
Show file tree

Hide file tree

Showing 20 changed files with 419 additions and 60 deletions.
diff --git a/docs/guide/third-party-support.md b/docs/guide/third-party-support.md
@@ -70,3 +70,47 @@ assets:
 如果您集成了三方评论插件，欢迎您提交 Pull Request 。
 
 
+## 搜索
+
+### 引擎搜索
+
+跳转搜索引擎搜索你的网站内容
+
+可通过 `site:www.imalun.com 想要搜索的内容` 进行搜索
+
+🌰：<https://www.google.com/search?q=site:www.imalun.com%20白云苍狗>
+
+针对搜索引擎配置：
+- `href`：搜索引擎地址。
+- `domain`：您的域名地址。
+
+设置 `type` 为 `engine`。
+```yaml {3}
+search:
+  enable: true
+  type: engine
+  href: 'https://www.google.com/search?q=site:'
+  # href: "https://www.baidu.com/s?wd=site:"
+  # href: "https://www.bing.com/search?q=site:"
+  domain: www.imalun.com
+```
+
+### 本地搜索
+
+您需要先安装 [hexo-generator-searchdb](https://github.com/next-theme/hexo-generator-searchdb)，并参考配置文档。
+
+```bash
+npm install hexo-generator-searchdb
+```
+
+针对本地搜索配置：
+- `preload`：是否预加载搜索。
+- `trigger`：默认回车或点击时触发搜索，设置为 `auto` 时 `input` 触发搜索。
+
+只需要修改 `type` 为 `local`。
+
+```yaml {3}
+search:
+  enable: true
+  type: local
+```
diff --git a/package/hexo-theme-async/_config.yml b/package/hexo-theme-async/_config.yml
@@ -23,7 +23,7 @@ favicon:
   showText: favicon.showText
   hideText: favicon.hideText
 
-# assets
+# Theme resource files or plug-ins
 assets:
   plugin:
     row:
@@ -38,6 +38,8 @@ assets:
       js: //cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js
     typing:
       js: js/plugins/typing.js
+    search:
+      js: //cdn.jsdelivr.net/npm/hexo-generator-searchdb@1.4.0/dist/search.js
     swiper: 
       css: //cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css
       js: //cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js
@@ -62,7 +64,7 @@ cdn:
     async: 
     defer: 
 
-# icons
+# The icon used by the theme
 icons:
   sun: far fa-sun
   moon: far fa-moon
@@ -73,8 +75,10 @@ icons:
   clock: far fa-clock
   user: far fa-user
   back_top: fas fa-arrow-up
+  close: fas fa-times
+  search: fas fa-search
 
-# menu
+# Top navigation menu
 top_bars:
   - title: menu.home
     url: /
@@ -163,7 +167,7 @@ comment:
     v: 0.0.12
     env: 
 
-# Theme 
+# Theme mode 
 theme: 
   switch: true 
   default: style-light # style-light style-dark
@@ -186,4 +190,13 @@ katex:
   global: false
   # Options are for katex rendering options: https://katex.org/docs/options.html
   # In page katex options are also possible and will be merged
-  options: {}
+  options: {}
+
+# Blog search
+search:
+  enable: false
+  type: engine #local engine
+  href: 'https://www.google.com/search?q=site:'
+  # href: "https://www.baidu.com/s?wd=site:"
+  # href: "https://www.bing.com/search?q=site:"
+  domain: 
diff --git a/package/hexo-theme-async/languages/en.yml b/package/hexo-theme-async/languages/en.yml
@@ -40,5 +40,11 @@ menu:
 favicon:
   showText: (/≧▽≦/)Hey! Good again!
   hideText: (●—●)Oh, crash!
+
+search:
+  placeholder: Searching...
+  empty: 'We didn''t find any results for the search: ${query}.'
+  hits: '${hits} results found'
+  hits_time: '${hits} results found in ${time} ms'
 
 ieTips: For a better experience, use a browser other than Internet Explorer
diff --git a/package/hexo-theme-async/languages/zh-Hans.yml b/package/hexo-theme-async/languages/zh-Hans.yml
@@ -41,4 +41,10 @@ favicon:
   showText: (/≧▽≦/)咦！又好了！
   hideText: (●—●)喔哟，崩溃啦！
 
+search:
+  placeholder: 搜索...
+  empty: '找不到您查询的内容: ${query}'
+  hits: '找到 ${hits} 条结果'
+  hits_time: '找到 ${hits} 条结果（用时 ${time} 毫秒）'
+
 ieTips: 为了更好的体验,请使用非IE浏览器
diff --git a/package/hexo-theme-async/layout/_partial/head.ejs b/package/hexo-theme-async/layout/_partial/head.ejs
@@ -55,17 +55,14 @@
 <% } %>
 
 <!-- Variable -->
-<%- variable('TYPED_TEXT',theme.sidebar.typedText) %>
-<%- variable('FAVICON',theme.favicon, true) %>
-<%- variable('THEME_VERSION',theme.version) %>
-<%- variable('THEME',theme.theme) %>
+<%- async_config() %>
 
 <!-- Theme mode css -->
 <% if(theme.theme.switch){%>
     <link data-theme-type="style-light" rel="stylesheet" href="<%= url_for('css/style-light.css') %>?v=<%= theme.version %>" id="trm-switch-style">
     <link data-theme-type="style-dark" rel="stylesheet" href="<%= url_for('css/style-dark.css') %>?v=<%= theme.version %>" id="trm-switch-style">
     <script>
-        let catchMode = localStorage.getItem('theme-mode') || THEME.default;
+        let catchMode = localStorage.getItem('theme-mode') || ASYNC_CONFIG.theme.default;
         let themeMode = catchMode === 'style-dark' ? 'style-light' : 'style-dark';
         let linkdom = document.querySelector('[data-theme-type='+themeMode+']');
         if(linkdom) linkdom.remove();

diff --git a/package/hexo-theme-async/layout/_partial/top-bar.ejs b/package/hexo-theme-async/layout/_partial/top-bar.ejs
@@ -6,9 +6,11 @@
 				<% if(theme.favicon.logo) { %>
 					<img src="<%- url_for(theme.favicon.logo)%>" alt="logo">
 				<% } %>
-				<div class="trm-logo-text">
-					<%= theme.user.last_name %><span><%= theme.user.first_name %></span>
-				</div>
+				<% if(theme.user.last_name) { %>
+					<div class="trm-logo-text">
+						<%= theme.user.last_name %><span><%= theme.user.first_name %></span>
+					</div>
+				<% } %>
 			</a>
 			<!-- logo end -->
 		</div>
@@ -56,6 +58,18 @@
 			<% } %>
 			<!-- mode switcher place end -->
 
+			<% if(theme.search.enable){ %>
+				<% if(theme.search.type === 'local'){ %>
+				<div id="trm-search-btn" class="trm-search-btn">
+					<%- icon(theme.icons.search) %>
+				</div>
+				<% } else if(theme.search.type === 'engine') { %>
+					<a id="trm-search-btn" class="trm-search-btn" data-no-swup target="_blank" href="<%- theme.search.href + theme.search.domain %>">
+						<%- icon(theme.icons.search) %>
+					</div>
+				<% } %> 
+			<% } %> 
+
 		</div>
 		<div class="trm-menu-btn">
 			<span></span>

diff --git a/package/hexo-theme-async/layout/_third-party/plugin.ejs b/package/hexo-theme-async/layout/_third-party/plugin.ejs
@@ -1,10 +1,10 @@
 <%
-let isSwiper,isTyping,isKatex;
+let isSwiper,isTyping,isKatex,isSearch;
 
 isSwiper = Object.values(theme.banner).findIndex(item=>item?.type && item.type === 'slideshow' ) > 0;
 isTyping = theme?.sidebar?.typedText && Array.isArray(theme.sidebar.typedText) && theme.sidebar.typedText.length>0;
 isKatex = theme.katex.global || page?.katex;
-
+isSearch = theme.search.enable && theme.search.type === 'local'
 %>
 
 <% if(loadtype ==='css') {%>
@@ -39,6 +39,10 @@ isKatex = theme.katex.global || page?.katex;
         <%- js(theme.assets.plugin.typing.js) %>
     <% } %>
 
+    <% if(isTyping) {%>
+        <%- js(theme.assets.plugin.search.js) %>
+    <% } %>
+
     <% if(isKatex) {
         let options = { 
             ...theme.katex.options

diff --git a/package/hexo-theme-async/layout/_widget/search.ejs b/package/hexo-theme-async/layout/_widget/search.ejs
@@ -0,0 +1,15 @@
+<% if(theme.search.enable){ %>
+<div class="trm-search-popup">
+    <div class="trm-search-header">
+        <span class="trm-search-popup-btn-close">
+            <%- icon(theme.icons.close)%>
+        </span>
+    </div>
+    <div class="form trm-search-form">
+        <input class="trm-search-input" type="text" placeholder="<%- __('search.placeholder') %>">
+    </div>
+    <div class="trm-search-result-container">
+
+    </div>
+</div>
+<% } %>
diff --git a/package/hexo-theme-async/layout/layout.ejs b/package/hexo-theme-async/layout/layout.ejs
@@ -42,6 +42,8 @@
 
   <%- partial('./_widget/back-to-top') %>
 
+  <%- partial('./_widget/search') %>
+
   <%- partial('./_partial/script') %>
 
 </body>

diff --git a/package/hexo-theme-async/scripts/helper/async_config.js b/package/hexo-theme-async/scripts/helper/async_config.js
@@ -0,0 +1,30 @@
+'use strict';
+
+const url = require('url');
+const { toI18n } = require('../utils')
+
+hexo.extend.helper.register('async_config', function () {
+    const { config, theme, __ } = this
+
+    let exportConfig = {
+        hostname: url.parse(config.url).hostname || config.url,
+        root: config.root,
+        typed_text: theme.sidebar.typedText,
+        favicon: toI18n(theme.favicon, __),
+        theme_version: theme.version,
+        theme: theme.theme,
+        search: theme.search,
+        i18n: {
+            placeholder: theme.search.placeholder || __('search.placeholder'),
+            empty: __('search.empty'),
+            hits: __('search.hits'),
+            hits_time: __('search.hits_time'),
+        }
+    }
+
+    if (config.search) {
+        exportConfig.search.path = config.search.path;
+    }
+
+    return `<script>window.ASYNC_CONFIG = ${JSON.stringify(exportConfig)};</script>`;
+})
diff --git a/package/hexo-theme-async/scripts/helper/variable.js b/package/hexo-theme-async/scripts/helper/variable.js
@@ -1,43 +1,9 @@
-
-const isPlainObject = (obj) => {
-    return Object.prototype.toString.call(obj) === '[object Object]';
-};
-
-const toI18n = (obj, __) => {
-    let isArr = Array.isArray(obj);
-    if (isArr || (isPlainObject(obj) && obj.toString === Object.prototype.toString)) {
-
-        let target = isArr ? [] : {};
-        for (let key in obj) {
-            if (isArr) {
-                if (Array.isArray(key) && isPlainObject(key)) {
-                    target.push(toI18n(key, __))
-                } else if (typeof obj[key] === 'string') {
-                    target.push(__(key))
-                } else {
-                    target.push(key)
-                }
-            } else {
-                if (Array.isArray(obj[key]) && isPlainObject(obj[key])) {
-                    target[key] = toI18n(obj[key], __);
-                } else if (typeof obj[key] === 'string') {
-                    target[key] = __(obj[key]);
-                } else {
-                    target[key] = obj[key];
-                }
-            }
-        }
-        return target;
-    } else {
-        return i18n.__(obj);
-    }
-}
+const { toI18n, isPlainObject } = require('../utils')
 
 function variableHelper(name, val, isLang) {
     if (![null, undefined].includes(val) && typeof name === 'string') {
         if (isLang) {
-            const { i18n } = hexo.theme;
-            const __ = i18n.__()
+            const { __ } = this;
             val = toI18n(val, __)
         }
 

diff --git a/package/hexo-theme-async/scripts/utils.js b/package/hexo-theme-async/scripts/utils.js
@@ -22,6 +22,53 @@ function merge(target, source) {
     return target
 }
 
+/**
+ * 
+ * @param {*} obj 
+ * @returns 
+ */
+function isPlainObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+/**
+ *
+ * @param {*} obj 
+ * @param {*} __ 
+ * @returns 
+ */
+function toI18n(obj, __) {
+    let isArr = Array.isArray(obj);
+    if (isArr || (isPlainObject(obj) && obj.toString === Object.prototype.toString)) {
+        let target = isArr ? [] : {};
+        for (let key in obj) {
+            if (isArr) {
+                if (Array.isArray(key) && isPlainObject(key)) {
+                    target.push(toI18n(key, __))
+                } else if (typeof obj[key] === 'string') {
+                    target.push(__(key))
+                } else {
+                    target.push(key)
+                }
+            } else {
+                if (Array.isArray(obj[key]) && isPlainObject(obj[key])) {
+                    target[key] = toI18n(obj[key], __);
+                } else if (typeof obj[key] === 'string') {
+                    target[key] = __(obj[key]);
+                } else {
+                    target[key] = obj[key];
+                }
+            }
+        }
+        return target;
+    } else {
+        return __(obj);
+    }
+}
+
+
 module.exports = {
     merge,
+    toI18n,
+    isPlainObject
 }
diff --git a/package/hexo-theme-async/source/css/_components/base.less b/package/hexo-theme-async/source/css/_components/base.less
@@ -276,4 +276,19 @@ html {
 *::selection {
     color           : @theme-color;
     background-color: @primary;
+}
+
+::-webkit-scrollbar {
+    width : 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius   : 2px;
+    background-color: fade(@primary, 50%);
+}
+
+::-webkit-scrollbar-track {
+    border-radius   : 2px;
+    background-color: rgba(255, 255, 255, 0.1);
 }