🎈 perf(搜索): 切换为 DocSearch，优化搜索体验

_config.butterfly.yml

@@ -72,15 +72,15 @@ social:
 
 # Algolia search
 algolia_search:
-  enable: true
+  enable: false
   searchAsYouType: false
 
 # Local search
 local_search:
   enable: false
 
-doc_search:
-  enable: false
+docsearch:
+  enable: true
 
 # Math (數學)
 # --------------------------------------
@@ -323,25 +323,26 @@ waline:
     requiredMeta: ["nick", "mail"]
     login: enable
     copyright: true
-    imageUploader: false
+    imageUploader: true
     recaptchaV3Key: 6Lf8S9MaAAAAAFMx9WOCWRkIX2AZ6Nl9dreuw8p-
     locale:
-      admin: 博主兼管理员
+      admin: 博主
       sofa: 这里冷冷清清的，快来留下脚印吧！
       placeholder: 感谢各位的批评指正，期待与您交流！
       reactionTitle: 就现在，表明你的态度！
-      reaction0: 鼓掌
+      reaction0: 鼓励
       reaction1: 菜狗
       reaction2: 正确
       reaction3: 错误
       reaction4: 思考
-      reaction5: 睡觉
-      level0: 1条
-      level1: 2条
-      level2: 3条
-      level3: 4条
-      level4: 5条
-      level5: 6条以上
+      reaction5: 无聊
+      level0: 买菜
+      level1: 切菜
+      level2: 炒菜
+      level3: 煲汤
+      level4: 煮面
+      level5: 上桌
+      level6: 开吃
     emoji:
       [
         "https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/",

package.json

@@ -7,8 +7,8 @@
     "clean": "hexo clean",
     "deploy": "hexo deploy",
     "server": "hexo server",
-    "yuque": "yuque-hexo sync && npm run build && hexo algolia && npm run deploy",
-    "github": "npm run build && hexo algolia && npm run deploy"
+    "yuque": "yuque-hexo sync && npm run build && npm run deploy",
+    "github": "npm run build && npm run deploy"
   },
   "yuqueConfig": {
     "postPath": "/source/_posts/语雀",

scripts/workbox-build.js

@@ -6,7 +6,7 @@ hexo.on("deployBefore", async function () {
             swSrc: './workbox-sw.js',
             swDest: './public/sw.js',
             globDirectory: './public/',
-            globPatterns: ['*/*.{css,js}','offline/index.html'],
+            globPatterns: ['*/*.css','offline/index.html','js/*.js', 'js/search/docsearch.js'],
             modifyURLPrefix: {
                 '': './'
             }

source/_data/rss.xml

@@ -17,7 +17,7 @@
     {% if config.description %}<description>{{ config.description }}</description>{% endif %}
     {% if config.subtitle %}<subtitle>{{ config.subtitle }}</subtitle>{% endif %}
     <pubDate>{% if posts.first().updated %}{{ posts.first().updated.toDate().toUTCString() }}{% else %}{{ posts.first().date.toDate().toUTCString() }}{% endif %}</pubDate>
-    <generator>https://hexo.io/</generator>
+    <generator>https://blog.ccknbc.cc/</generator>
     {% for post in posts.toArray() %}
     <item>
       <title>{{ post.title }}</title>

source/sub/index.md

@@ -6,7 +6,7 @@ top_img: false
 translate_title: subscribe-to-blog-article-updates
 subtitle: Sub
 date: 2020-10-14 22:17:35
-updated: 2022-10-09 15:23:19
+updated: 2023-02-09 00:19:31
 ---
 {% note success %} **以下方式均支持随时取消订阅，偏好可随时更改** {% endnote %}
 
@@ -17,9 +17,9 @@ updated: 2022-10-09 15:23:19
 3. 邮件订阅（全文输出）
     - 通过{% btn 'https://follow.it/ccknbc?pub',Follow.it,fa-solid fa-paper-plane,outline green %}订阅，注册用户支持自定义关键词、标签及多渠道（例如Telegram, Twitter，将来会支持微信）通知；未注册用户请使用下表订阅（可能需要人机验证）
         <div><form data-v-2bdb5506="" action="https://api.follow.it/subscription-form/YXJvK1pRMXFIbG1QZXEvUHRyUGR1L0xMYTN5V0FHSnhFY3pVeGRpUjV1bUNBbzRLd1hRbDcwTVk0bGlMQlAvOEtXaGU5RWxrTEtTOXBSSlBXWDNyeDZ5Uk1zU2JoRlpmNDh5em9FeG41SCt0WmtQWi9oTm5VZURNbTVOMENSc3h8a1hHYUtHTHV0QmhQZHAvZ3hkOW9zWnl4aE43SjBONDlUdG45YXRJM3JxQT0=/8" method="post"><div data-v-2bdb5506="" class="form-preview"><div data-v-2bdb5506="" class="preview-input-field"><input data-v-2bdb5506="" type="email" name="email" required="required" placeholder="输入您的电子邮件地址" spellcheck="false" mstplaceholder="39225030"></div> <div data-v-2bdb5506="" class="preview-submit-button"><button data-v-2bdb5506="" type="submit" >订阅</button></div></div></form></div>
-    - 前往CC的部落格订阅页面{% btn 'https://rss.ccknbc.cc',订阅页面,fa-solid fa-link,outline green %}订阅(MailChimp)
-    - 点击右下角按钮给 CC 留言，任意发送一条消息后，出现介绍自己页面时勾选订阅点击发送即可完成订阅(MailChimp & Tidio)
-    - 直接在下表输入您的相关信息点击订阅后，按照收到的邮件提示点击确认即可(MailChimp)
+    - 前往CC的部落格订阅页面{% btn 'https://rss.ccknbc.cc',订阅页面,fa-solid fa-link,outline green %}订阅(不再推荐MailChimp)
+    - 点击右下角按钮给 CC 留言，任意发送一条消息后，出现介绍自己页面时勾选订阅点击发送即可完成订阅(不再推荐MailChimp & Tidio)
+    - 直接在下表输入您的相关信息点击订阅后，按照收到的邮件提示点击确认即可(不再推荐MailChimp)
     <script defer src="https://jsd.cdn.zzko.cn/npm/jquery/dist/jquery.min.js"></script>
     <!-- <link href="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn@latest/css/mailchimp.css" rel="stylesheet" type="text/css"> -->
     <div id="mc_embed_signup">

themes/butterfly/layout/includes/head/preconnect.pug

@@ -19,5 +19,5 @@ if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_
 if !theme.asset.busuanzi && (theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv)
   link(rel="preconnect" href="//busuanzi.ibruce.info")
 
-if theme.doc_search.enable
+if theme.docsearch.enable
   link(crossorigin href="https://97MUPN4DMC-dsn.algolia.net" rel="preconnect")

themes/butterfly/layout/includes/header/nav.pug

@@ -5,18 +5,19 @@ nav#nav
         img.site-icon(src=url_for(theme.nav.logo))
       if theme.nav.display_title
         span.site-name=config.title
-
   #menus
-    //- a.site-page#wzayd.wzayd(title='盲人朋友在线浏览按住Alt+g键，体验无障碍阅读' href='javascript:;' accesskey='g')
-    //-   i.fa-solid.fa-wheelchair
-    //-   span=' '+_p('无障碍')
-    a.site-page.toRandomPost(title='随机浏览一篇文章' href='javascript:toRandomPost();' accesskey='g')
-      i.fa-solid.fa-shuffle
     if (theme.algolia_search.enable || theme.local_search.enable)
       #search-button
         a.site-page.social-icon.search(href="javascript:void(0);")
           i.fas.fa-search.fa-fw
           span=' '+_p('search.title')
+    if (theme.docsearch.enable)
+      #docsearch
+    //- a.site-page#wzayd.wzayd(title='盲人朋友在线浏览按住Alt+g键，体验无障碍阅读' href='javascript:;' accesskey='g')
+    //-   i.fa-solid.fa-wheelchair
+    //-   span=' '+_p('无障碍')
+    //- a.site-page.toRandomPost(title='随机浏览一篇文章' href='javascript:toRandomPost();')
+    //-   i.fa-solid.fa-shuffle
     !=partial('includes/header/menu_item', {}, {cache: true})
 
     #toggle-menu

themes/butterfly/layout/includes/third-party/search/docsearch.pug

@@ -0,0 +1,3 @@
+link(href="https://jsd.cdn.zzko.cn/npm/@docsearch/css/dist/style.css" rel="stylesheet")
+script(defer src="https://jsd.cdn.zzko.cn/npm/@docsearch/js/dist/umd/index.js")
+script(defer src="/js/search/docsearch.js")

themes/butterfly/layout/includes/third-party/search/index.pug

@@ -2,5 +2,5 @@ if theme.algolia_search.enable
   include ./algolia.pug
 else if theme.local_search.enable
   include ./local-search.pug
-else if theme.doc_search.enable
-  include ./doc-search.pug
+else if theme.docsearch.enable
+  include ./docsearch.pug

themes/butterfly/source/css/custom.css

@@ -45,4 +45,45 @@
 [data-theme=dark]
 .webpushr-subscribed prompticon3._Bell.Bottom.Right_bell{
     background: var(--btn-bg);
-}
+}
+
+#docsearch{
+    display: inline-block;
+    padding: 0 0 0 14px;
+}
+
+/* .fa-solid.fa-shuffle{
+    position: relative;
+    display: inline-block;
+    padding: 0 0 0 14px;
+} */
+
+/* DocSearch */
+
+:root {
+    --docsearch-primary-color: #8fbc8f!important;
+    /* --docsearch-logo-color: #8fbc8f!important; */
+    --docsearch-searchbox-background: none!important;
+}
+
+html[data-theme=dark] {
+    --docsearch-primary-color: #5468ff!important;
+    /* --docsearch-logo-color: #5468ff!important; */
+    --docsearch-searchbox-background: none!important;
+}
+
+/* .DocSearch-Button-Keys,
+.DocSearch-Button-Placeholder {
+    display: none!important
+} */
+
+/* .DocSearch-Search-Icon {
+    stroke-width: 1.6!important
+} */
+
+/* .DocSearch-Logo svg, svg.cls-1, .cls-2 {
+    fill: var(--docsearch-logo-color)!important;
+    color: var(--docsearch-logo-color)!important;
+} */
+
+/* 其他 */

themes/butterfly/source/js/custom.js

@@ -46,15 +46,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // Algolia搜索
 
-searchSize();
-window.addEventListener('resize', searchSize)
-// 搜索窗口自适应
-function searchSize() {
-    // 只需要适应手机端
-    if (document.body.clientWidth > 768) return
-    let div = document.querySelector('#algolia-hits')
-    // 监听插入，如果有插入则根据可视高度动态设置最大高度
-    div.addEventListener('DOMNodeInserted', () => {
-        div.children[0].style.maxHeight = (document.documentElement.clientHeight - 210) + 'px'
-    })
-}
+// searchSize();
+// window.addEventListener('resize', searchSize)
+// // 搜索窗口自适应
+// function searchSize() {
+//     // 只需要适应手机端
+//     if (document.body.clientWidth > 768) return
+//     let div = document.querySelector('#algolia-hits')
+//     // 监听插入，如果有插入则根据可视高度动态设置最大高度
+//     div.addEventListener('DOMNodeInserted', () => {
+//         div.children[0].style.maxHeight = (document.documentElement.clientHeight - 210) + 'px'
+//     })
+// }

themes/butterfly/source/js/search/docsearch.js

@@ -0,0 +1,50 @@
+docsearch({
+  appId: '97MUPN4DMC',
+	apiKey: 'a003a39f337f5186ec11f5f92bae62b3',
+	indexName: 'ccknbc',
+	container: '#docsearch',
+	placeholder: 'CC的部落格 站内搜索',
+  translations: {
+    button: {
+      buttonText: '搜索',
+      buttonAriaLabel: '搜索',
+    },
+    modal: {
+      searchBox: {
+        resetButtonTitle: '清空',
+        resetButtonAriaLabel: '清空',
+        cancelButtonText: '取消',
+        cancelButtonAriaLabel: '取消',
+      },
+      startScreen: {
+        recentSearchesTitle: '最近搜索历史',
+        noRecentSearchesText: '搜索历史为空',
+        saveRecentSearchButtonTitle: '保存搜索记录',
+        removeRecentSearchButtonTitle: '清除搜索记录',
+        favoriteSearchesTitle: '收藏夹',
+        removeFavoriteSearchButtonTitle: '移出收藏夹',
+      },
+      errorScreen: {
+        titleText: '未能获取搜索结果',
+        helpText: '您可能需要检查您的网络连接',
+      },
+      footer: {
+        selectText: '选择',
+        selectKeyAriaLabel: '回车键',
+        navigateText: '切换',
+        navigateUpKeyAriaLabel: '方向键上',
+        navigateDownKeyAriaLabel: '方向键下',
+        closeText: '关闭',
+        closeKeyAriaLabel: 'ESC退出键',
+        searchByText: '基于 DocSearch by',
+      },
+      noResultsScreen: {
+        noResultsText: '未搜索到相关内容',
+        suggestedQueryText: '您可尝试搜索',
+        reportMissingResultsText: '确认搜索结果是正确的？',
+        reportMissingResultsLinkText: '反馈给Algolia',
+      },
+    },
+  },
+	debug: false
+})