feat(search): 添加 MeiliSearch 搜索

https://www.meilisearch.com/

_cdn.yml

@@ -84,6 +84,20 @@ instantsearch_v4:
   npm: true
   static: false
   cdnjs: false
+volantis_search_meilisearch:
+  name: hexo-theme-volantis
+  file: source/js/search/meilisearch.js
+  local: true
+  npm: true
+  static: false
+  cdnjs: false
+instant_meilisearch:
+  name: "@meilisearch/instant-meilisearch"
+  file: dist/instant-meilisearch.umd.min.js
+  version: 0.8.1
+  npm: true
+  static: false
+  cdnjs: false
 jquery:
   name: jquery
   file: dist/jquery.min.js

_config.yml

@@ -1052,11 +1052,16 @@ rightmenus:
 # npm i hexo-generator-json-content
 search:
   enable: true
-  service: hexo  # hexo, algolia
+  service: hexo  # hexo, algolia, meilisearch
   algolia:
     searchAsYouType: true # If false, triggers the search only on submit.
     hitsPerPage: 5 # Set the number of hits per page.
     placeholder: 'Search...' # The placeholder text of the input.
+  meilisearch:
+    placeholder: 'Search...'
+    searchKey: ''
+    indexName: ''
+    hostUrl: ''
 
 ############################### Search ############################### > end
 

languages/en.yml

@@ -55,8 +55,5 @@ kill:
 search:
   title: Search
   load_data: Loading the Database
-  algolia_search:
-    hits_empty: "We didn't find any results for the search: ${query}."
-    hits_stats: '${hits} results found in ${time} ms'
-  local_search:
-    hits_empty: "We didn't find any results for the search: ${query}"
+  hits_empty: "We didn't find any results for the search: ${query}."
+  hits_stats: '${hits} results found in ${time} ms'

languages/zh-CN.yml

@@ -55,8 +55,6 @@ kill:
 search:
   title: 搜索
   load_data: 数据库加载中
-  algolia_search:
-    hits_empty: '找不到您查询的内容：${query}'
-    hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
-  local_search:
-    hits_empty: '找不到您查询的内容：${query}'
+  hits_empty: '找不到您查询的内容：${query}'
+  hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒'
+

languages/zh-TW.yml

@@ -51,8 +51,5 @@ kill:
 search:
   title: 搜尋
   load_data: 資料庫載入中
-  algolia_search:
-    hits_empty: '找不到您查詢的內容：${query}'
-    hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'
-  local_search:
-    hits_empty: '找不到您查詢的內容：${query}'
+  hits_empty: '找不到您查詢的內容：${query}'
+  hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒'

layout/_partial/scripts/global.ejs

@@ -52,14 +52,21 @@
       <% } %>
 
       <% if(theme.search.service === 'hexo') { %>
-        dataPath: (("<%- config.root %>" || "/").endsWith("/") ? "<%- config.root %>" || "/" : "<%- config.root %>/" || "/") + "<%- config?.jsonContent?.file || "content.json" %>"
+        dataPath: (("<%- config.root %>" || "/").endsWith("/") ? "<%- config.root %>" || "/" : "<%- config.root %>/" || "/") + "<%- config?.jsonContent?.file || "content.json" %>",
+      <% } %>
+
+      <% if(theme.search.service === 'meilisearch') { %>
+        placeholder: '<%- theme.search.meilisearch.placeholder %>',
+        apiKey: '<%- theme.search.meilisearch.searchKey %>',
+        indexName: '<%- theme.search.meilisearch.indexName %>',
+        appId: '<%- theme.search.meilisearch.hostUrl %>',
       <% } %>
     },
     languages: {
-      <% if(theme.search.service === 'algolia') { %>
-        algolia: {
-          hits_empty: "<%- __('search.algolia_search.hits_empty') %>",
-          hits_stats: "<%- __('search.algolia_search.hits_stats') %>",
+      <% if(theme.search.enable) { %>
+        search: {
+          hits_empty: "<%- __('search.hits_empty') %>",
+          hits_stats: "<%- __('search.hits_stats') %>",
         }
       <% } %>
     }

layout/_plugins/search/script.ejs

@@ -4,6 +4,11 @@
       await volantis.js("<%- theme.cdn.algolia_search_v4 %>")
       await volantis.js("<%- theme.cdn.instantsearch_v4 %>")
     <% } %>
+        
+    <% if(theme.search.service === 'meilisearch') { %>
+      await volantis.js("<%- theme.cdn.instantsearch_v4 %>")
+      await volantis.js("<%- theme.cdn.instant_meilisearch %>")
+    <% } %>
     return volantis.js("<%- theme.cdn['volantis_search_' + theme.search.service] %>");
   }
 

scripts/events/lib/check-configuration.js

@@ -16,8 +16,8 @@ see: https://hexo.io/zh-cn/docs/configuration
 description is not configured!`
     }
     if (themeConfig?.search?.service===`google`||themeConfig?.search?.service===`azure`||themeConfig?.search?.service===`baidu`) {
-      return `原 google, algolia, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本被移除
-The google, algolia, azure, baidu site search is ancestral code, and the document is lost, which is inconvenient for subsequent maintenance. It was removed in version 5.0
+      return `原 google, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本被移除
+The google, azure, baidu site search is ancestral code, and the document is lost, which is inconvenient for subsequent maintenance. It was removed in version 5.0
 see: https://volantis.js.org/v5/theme-settings/#站内搜索`
     }
     if (`backstretch` in themeConfig?.plugins) {

source/css/_style/_layout/search.styl

@@ -11,6 +11,18 @@
     z-index: 3
     border-radius: $border-card
     overflow: hidden
+    .search-icon,
+    #resule-hits-empty
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      text-align: center;
+      transform: translate(-50%, -50%);
+      i
+        font-size: 8em;
+        color: #e8e8e8
+        margin-bottom 10px
     @media screen and (max-width: $modal-threshold)
       box-shadow: none
       max-width: none
@@ -155,6 +167,87 @@
     z-index: 1
 
 
+if hexo-config('search.service') == 'meilisearch'
+  #u-search
+    .modal-header
+      .ais-SearchBox-input
+        margin: $gap 50px
+        padding: 0 $gap * 0.5
+        width: "calc(100% - 100px - %s)" % $gap
+        @media screen and (max-width: $modal-threshold)
+          padding: 0
+        line-height: 2rem
+        border-radius: $border-card
+        vertical-align: middle
+        border: none
+        appearance: none
+        box-shadow: none
+        background: transparent
+        trans()
+        &:focus
+          border-top-left-radius: $border-card
+          border-top-right-radius: $border-card
+    .modal .modal-body
+      height: "calc(100% - %s)" % 115px
+      .ais-Hits-list
+        list-style: none
+        .result
+          position: relative
+          display: block
+          padding: $gap
+          border-radius: $border-card
+          b[mark]
+            color: darken($color-theme, 10)
+            text-decoration: underline
+            font-size 120%
+            background-color #ffe600
+          &:hover
+            background: var(--color-site-bg)
+            .title
+              color: var(--color-list-hl)
+          .title
+            display: inline-block
+            max-width: 100%
+            color: var(--color-list)
+            font-weight: bold
+            padding: 1px
+            margin-bottom: 2px
+            white-space: normal
+            overflow: hidden
+            text-overflow: ellipsis
+            font-size: $fontsize-h4
+          .digest
+            display: block
+            white-space: inherit
+            overflow: hidden
+            word-break: break-all
+            text-overflow: ellipsis
+            font-size: $fontsize-code
+            color: var(--color-meta)
+          .icon
+            position: absolute
+            top: 50%
+            right: 0
+            margin-top: -4px
+            font-size: 11px
+            color: var(--color-meta)
+    footer
+      position: absolute;
+      bottom: 0;
+      padding: 0 16px;
+      width: 100%;
+      height: 51px;
+      hr
+        margin 5px 0
+      #meilisearch-info
+        height 40px
+        line-height 40px
+        font-size 14px
+        div
+          display: inline
+        .meilisearch-poweredBy
+          float: right
+
 if hexo-config('search.service') == 'algolia'
   #u-search
     .modal-header

source/js/search/algolia.js

@@ -13,7 +13,9 @@ let SearchService = (() => {
     </header>
     <main class="modal-body">
       <div id="algolia-search-results">
-        <div id="algolia-hits"></div>
+        <div id="algolia-hits">
+          <div class="search-icon"><i class="fa-sharp fa-solid fa-telescope"></i></i></div>
+        </div>
       </div>
     </main>
     <footer>
@@ -105,7 +107,7 @@ let SearchService = (() => {
         },
         empty: function (data) {
           return (
-            `<div id="algolia-hits-empty">${volantis.GLOBAL_CONFIG.languages.algolia.hits_empty.replace(/\$\{query}/, data.query)}</div>`
+            `<div id="resule-hits-empty"><i class="fa-solid fa-box-open"></i><p>${volantis.GLOBAL_CONFIG.languages.search.hits_empty.replace(/\$\{query}/, data.query)}</p></div>`
           )
         }
       }
@@ -115,7 +117,7 @@ let SearchService = (() => {
       container: '#algolia-info > .algolia-stats',
       templates: {
         text: function (data) {
-          const stats = volantis.GLOBAL_CONFIG.languages.algolia.hits_stats
+          const stats = volantis.GLOBAL_CONFIG.languages.search.hits_stats
             .replace(/\$\{hits}/, data.nbHits)
             .replace(/\$\{time}/, data.processingTimeMS)
           return (
@@ -162,7 +164,6 @@ let SearchService = (() => {
   }
 
   fn.search = () => {
-    search?.refresh();
     document.querySelector("#u-search").style.display = "block";
     document.addEventListener("keydown", event => {
       if (event.code === "Escape") {

source/js/search/hexo.js

@@ -60,6 +60,9 @@ let SearchService = (() => {
     let results = "";
     results += fn.buildResultList(fn.data.pages);
     results += fn.buildResultList(fn.data.posts);
+    if (results === "") {
+      results = `<div id="resule-hits-empty"><i class="fa-solid fa-box-open"></i><p>${volantis.GLOBAL_CONFIG.languages.search.hits_empty.replace(/\$\{query}/, fn.queryText)}</p></div>`
+    }
     document.querySelector("#u-search .modal-results").innerHTML = results;
     window.pjax && pjax.refresh(document.querySelector("#u-search"));
     document.addEventListener("keydown", function f(event) {