fix/feat: svg造成图片锯齿/hexo-generator-search引入

_config.yml

@@ -178,6 +178,14 @@ algolia_search:
     input_placeholder: "搜索....."
     hits_empty: "未发现与 「${query}」相关内容"
     hits_stats: "找到${hits}条结果（用时 ${time} ms）"
+# need https://github.com/wzpan/hexo-generator-search
+# please add the following config in your _config.yml
+# search:
+#   path: search.json # The filename must be search.json
+#   field: post
+#   content: true
+generator_search:
+  enable: false
 
 # Dependent cdn links
 vendor:

layout/_partial/after-footer.ejs

@@ -113,11 +113,15 @@
         async>
     </script>
 <% } %>
+<% if(theme.generator_search.enable){ %>
+    <%- js('js/generator_search.js') %>
+    <%- js(theme.vendor.js.instantsearch) %>
+<% } %>
 
 <% if(theme.algolia_search.enable){ %>
     <%- js(theme.vendor.js.algolia) %>
     <%- js(theme.vendor.js.instantsearch) %>
-    <%- js('js/search.js') %>
+    <%- js('js/algolia_search.js') %>
     <script>
         var CONFIG = {
             root: '/',
@@ -136,4 +140,4 @@
             }
         };
     </script>
-<% } %>
+<% } %>

layout/_partial/header.ejs

@@ -73,6 +73,10 @@
                 <% if (theme.algolia_search.enable){ %>
                     <a id="nav-search-btn" class="nav-icon popup-trigger" title="<%= __('search') %>">
                     </a>
+                <% } %>
+		            <% if (theme.generator_search.enable){ %>
+                    <a id="nav-search-btn" class="nav-icon popup-trigger" title="<%= __('search') %>">
+                    </a>
                 <% } %>
             </nav>
             <div id="search-form-wrap">

layout/layout.ejs

@@ -24,7 +24,7 @@
             </div>
             <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
             <div class="sidebar-top">
-              <img src="/images/taichi.svg" height="50" width="50"/>
+              <img src="/images/taichi.png" height="50" width="50"/>
               <div class="arrow-up"></div>
             </div>
             <div id="mask"></div>
@@ -33,16 +33,16 @@
         <%- partial('_partial/after-footer') %>
     </div>
     <div class="site-search">
-        <div class="algolia-popup popup">
-            <div class="algolia-search">
-                <span class="algolia-search-input-icon"></span>
-                <div class="algolia-search-input" id="algolia-search-input"></div>
+        <div class="reimu-popup popup">
+            <div class="reimu-search">
+                <span class="reimu-search-input-icon"></span>
+                <div class="reimu-search-input" id="reimu-search-input"></div>
             </div>
 
-            <div class="algolia-results">
-                <div id="algolia-stats"></div>
-                <div id="algolia-hits"></div>
-                <div id="algolia-pagination" class="algolia-pagination"></div>
+            <div class="reimu-results">
+                <div id="reimu-stats"></div>
+                <div id="reimu-hits"></div>
+                <div id="reimu-pagination" class="reimu-pagination"></div>
             </div>
 
             <span class="popup-btn-close"></span>

source/css/_partial/footer.styl

@@ -79,7 +79,7 @@
 .footer-info-sep
   width: 25px
   opacity: 0.6
-  background: url("/images/taichi.svg") no-repeat center / 80%
+  background: url("/images/taichi.png") no-repeat center / 80%
   animation: rotate-all 3s infinite
   animation-timing-function: linear
 

source/css/_partial/header.styl

@@ -188,7 +188,7 @@ $nav-link-wrap
 
 .main-nav-icon
   @extend $nav-link
-  background: url("/images/taichi.svg") no-repeat center / 80%
+  background: url("/images/taichi.png") no-repeat center / 80%
   transform: rotate(0deg)
   transition: transform 1s
 

source/css/_partial/search.styl

@@ -29,8 +29,7 @@
   left: 0
   z-index: 2080
   background-color: rgba(0, 0, 0, 0.3)
-
-.algolia-popup
+.reimu-popup
   overflow: hidden
   padding: 0
 
@@ -49,15 +48,15 @@
       font-family: font-icon
       content: "\f057"
 
-.algolia-search
+.reimu-search
   padding: 10px 15px 5px
   max-height: 50px
   border-bottom: 1px solid #ccc
   background: #f5f5f5
   border-top-left-radius: 5px
   border-top-right-radius: 5px
 
-.algolia-search-input-icon
+.reimu-search-input-icon
   display: inline-block
   width: 20px
   font-size: 18px
@@ -66,7 +65,7 @@
     font-family: font-icon
     content: "\f002"
 
-.algolia-search-input
+.reimu-search-input
   display: inline-block
   width: calc(90% - 20px)
 
@@ -77,15 +76,15 @@
     border: none
     background: transparent
 
-.algolia-powered
+.reimu-powered
   float: right
 
   img
     display: inline-block
     height: 18px
     vertical-align: middle
 
-.algolia-results
+.reimu-results
   position: relative
   overflow: auto
   padding: 10px 30px
@@ -101,11 +100,11 @@
     padding: 0 2px
     color: var(--red-1)
 
-#algolia-hits
+#reimu-hits
   margin-top: 10px
   margin-left: 30px
 
-.algolia-hit-item-link
+.reimu-hit-item-link
   display: block
   text-decoration: none
   color: var(--red-2)
@@ -134,7 +133,7 @@
       opacity: 1
       transition: all 0.2s ease
 
-.algolia-pagination
+.reimu-pagination
   margin: 10px auto
   background: var(--color-wrap)
   border-radius: post-radius
@@ -182,3 +181,4 @@
     &:before
       font-family: font-icon
       content: "\f105"
+

source/css/_partial/sidebar.styl

@@ -344,7 +344,7 @@ $menu-link
 
 .sidebar-menu-icon
   @extend $menu-link
-  background: url("/images/taichi.svg") no-repeat center / 80%
+  background: url("/images/taichi.png") no-repeat center / 80%
   transform: rotate(0deg)
   transition: transform 1s
 
@@ -376,7 +376,7 @@ $menu-link
 
   .sidebar-menu-icon
     opacity: 1
-    background: url("/images/taichi-fill.svg") no-repeat center / 80%
+    background: url("/images/taichi-fill.png") no-repeat center / 80%
 
 .sidebar-top
   position: fixed

source/css/loader.styl

@@ -46,7 +46,7 @@
     .loading-word
       position: absolute
       color: rgba(255, 0, 0, 0.65)
-      top: calc(50% + 100px)
+      top: calc(50% + 110px)
       left: 50%
       transform: translate(-50%, -50%)
       font-size: 1.2rem

source/js/search.js → source/js/algolia_search.js

@@ -15,7 +15,7 @@ $(document).ready(function () {
       algoliaSettings.apiKey,
     ),
     searchFunction: helper => {
-      if ($('#algolia-search-input').find('input').val()) {
+      if ($('#reimu-search-input').find('input').val()) {
           helper.search();
       }
     }
@@ -28,46 +28,46 @@ $(document).ready(function () {
     }),
 
     instantsearch.widgets.searchBox({
-      container: '#algolia-search-input',
+      container: '#reimu-search-input',
       placeholder: algoliaSettings.labels.input_placeholder,
       showReset: false,
       showSubmit: false,
       showLoadingIndicator: false
     }),
 
     instantsearch.widgets.hits({
-      container: '#algolia-hits',
+      container: '#reimu-hits',
       templates: {
         item: data => {
           return (
-            '<a href="' + data.permalink + '" class="algolia-hit-item-link">' +
+            '<a href="' + data.permalink + '" class="reimu-hit-item-link">' +
             data._highlightResult.title.value +
             '</a>'
           );
         },
         empty: data => {
           return (
-            '<div id="algolia-hits-empty">' +
+            '<div id="reimu-hits-empty">' +
             algoliaSettings.labels.hits_empty.replace(/\$\{query}/, data.query) +
             '</div>'
           );
         }
       },
       cssClasses: {
-        item: 'algolia-hit-item'
+        item: 'reimu-hit-item'
       }
     }),
 
     instantsearch.widgets.stats({
-      container: '#algolia-stats',
+      container: '#reimu-stats',
       templates: {
         text: data => {
           const stats = algoliaSettings.labels.hits_stats
             .replace(/\$\{hits}/, data.nbHits)
             .replace(/\$\{time}/, data.processingTimeMS);
           return (
             stats +
-            '<span class="algolia-powered">' +
+            '<span class="reimu-powered">' +
             '  <img src="' + CONFIG.root + 'images/algolia_logo.svg" alt="Algolia" />' +
             '</span>' +
             '<hr />'
@@ -77,7 +77,7 @@ $(document).ready(function () {
     }),
 
     instantsearch.widgets.pagination({
-      container: '#algolia-pagination',
+      container: '#reimu-pagination',
       scrollTo: false,
       showFirst: false,
       showLast : false,
@@ -97,7 +97,7 @@ $(document).ready(function () {
     e.stopPropagation();
     $('body').append('<div class="popoverlay">').css('overflow', 'hidden');
     $('.popup').toggle();
-    $('#algolia-search-input').find('input').focus();
+    $('#reimu-search-input').find('input').focus();
   });
 
   $('.popup-btn-close').click(function () {

source/js/generator_search.js

@@ -0,0 +1,67 @@
+$(document).ready(function () {
+  let searchInput = $('#reimu-search-input');
+  let searchResult = $('#reimu-hits');
+  let pagination = $('#reimu-pagination');
+  let itemsPerPage = 10;
+  let currentPage = 1;
+
+  searchInput.append('<form id="search-form"><input type="text" id="search-text"></form>');
+
+  $.getJSON('/search.json', function (data) {
+    $('#search-form').on('submit', function (event) {
+      event.preventDefault();
+      let inputText = $('#search-text').val();
+      searchResult.empty();
+      pagination.empty();
+      if (inputText) {
+        let hits = data.filter(function (post) {
+          return post.title && post.title.toLowerCase().includes(inputText.toLowerCase()) ||
+                 post.content && post.content.toLowerCase().includes(inputText.toLowerCase());
+        });
+
+        let totalPages = Math.ceil(hits.length / itemsPerPage);
+        pagination.append('<ul class="ais-Pagination-list pagination">');
+        for (let i = 1; i <= totalPages; i++) {
+          let pageItem = $('<li class="ais-Pagination-item pagination-item ais-Pagination-item--page"><a class="ais-Pagination-link page-number" aria-label="Page ' + i + '" href="#">' + i + '</a></li>');
+          if (i === currentPage) {
+            pageItem.addClass('ais-Pagination-item--selected current');
+          }
+          pagination.find('ul').append(pageItem);
+        }
+
+        $('.page-number').click(function (event) {
+          event.preventDefault();
+          currentPage = $(this).text();
+          $('.ais-Pagination-item').removeClass('ais-Pagination-item--selected current');
+          $(this).parent().addClass('ais-Pagination-item--selected current');
+          displayHits(hits, currentPage, itemsPerPage);
+        });
+
+        displayHits(hits, currentPage, itemsPerPage);
+      }
+    });
+  });
+
+  function displayHits(hits, page, itemsPerPage) {
+    searchResult.empty();
+    let start = (page - 1) * itemsPerPage;
+    let end = start + itemsPerPage;
+    let hitsToDisplay = hits.slice(start, end);
+    hitsToDisplay.forEach(function (hit) {
+      searchResult.append('<a href="' + hit.url + '" class="reimu-hit-item-link">' + hit.title + '</a>');
+    });
+  }
+
+  $('.popup-trigger').on('click', function (e) {
+    e.stopPropagation();
+    $('body').append('<div class="popoverlay">').css('overflow', 'hidden');
+    $('.popup').toggle();
+    $('#search-text').focus();
+  });
+
+  $('.popup-btn-close').click(function () {
+    $('.popup').hide();
+    $('.popoverlay').remove();
+    $('body').css('overflow', '');
+  });
+});