Merge pull request #72 from tangly1024/feature-search

Feature search

components/Comment.js

@@ -25,6 +25,10 @@ const Comment = ({ frontMatter }) => {
   return (
     <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
+        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
+          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+        </div>)}
+
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
           <ReactCusdis
             lang={locale.LOCALE.toLowerCase()}
@@ -38,10 +42,6 @@ const Comment = ({ frontMatter }) => {
           />
         </div>)}
 
-        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>)}
-
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
             options={{

components/Tabs.js

@@ -43,9 +43,8 @@ const Tabs = ({ className, children }) => {
     </ul>
     <div>
       {children.map((item, index) => {
-        return <section key={index}
-                        className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
-          {item}
+        return <section key={index} className={ 'animate__animated animate__fadeIn animate__faster'}>
+          {currentTab === index && item}
         </section>
       })}
     </div>

pages/search/[keyword].js

@@ -63,7 +63,9 @@ export async function getStaticProps ({ params: { keyword } }) {
     const page = await getDataFromCache(cacheKey)
     const tagContent = post.tags ? post.tags.join(' ') : ''
     const categoryContent = post.category ? post.category.join(' ') : ''
-    let indexContent = [post.title, post.summary, tagContent, categoryContent]
+    const articleInfo = post.title + post.summary + tagContent + categoryContent
+    let hit = articleInfo.indexOf(keyword) > -1
+    let indexContent = [post.summary]
     console.log('搜索是否命中缓存', page !== null)
     if (page !== null) {
       const contentIds = Object.keys(page.block)
@@ -74,16 +76,19 @@ export async function getStaticProps ({ params: { keyword } }) {
       })
     }
     post.results = []
-    let hit = false
+    let hitCount = 0
     const re = new RegExp(`${keyword}`, 'g')
-    indexContent.forEach(c => {
+    indexContent.forEach((c, i) => {
       const index = c.toLowerCase().indexOf(keyword.toLowerCase())
       if (index > -1) {
         hit = true
         const referText = c?.replace(re, `<span class='text-red-500'>${keyword}</span>`)
         post.results.push(`<span>${referText}</span>`)
+        hitCount += 1
       } else {
-        post.results.push(`<span>${c}</span>`)
+        if ((post.results.length - 1) / hitCount < 3 || i === 0) {
+          post.results.push(`<span>${c}</span>`)
+        }
       }
     })
 

themes/NEXT/components/SearchInput.js

@@ -76,7 +76,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     {(showClean && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
 
     <div className='p-3 bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center items-center cursor-pointer'
-      onClick={handleKeyUp}>
+      onClick={handleSearch}>
         <i className={`${onLoading ? 'fa-spinner animate-spin ' : 'fa-search'} fas hover:scale-125 hover:text-black transform duration-200 dark:text-gray-300 dark:hover:text-white text-gray-600 cursor-pointer`} />
     </div>
   </div>