Medium主题搜索标红

themes/Medium/LayoutBase.js

@@ -9,6 +9,7 @@ import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
 import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -19,9 +20,10 @@ import { useGlobal } from '@/lib/global'
 const LayoutBase = props => {
   const { children, meta, showInfoCard = true, slotRight, slotTop } = props
   const { locale } = useGlobal()
+  const router = useRouter()
 
   return (
-    <div id='container' className='bg-white w-full h-full min-h-screen justify-center'>
+    <div className='bg-white w-full h-full min-h-screen justify-center'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
         {/* 桌面端左侧菜单 */}
@@ -41,7 +43,7 @@ const LayoutBase = props => {
           <Tabs className='py-14 px-6 sticky top-0'>
             {slotRight}
             <div key={locale.NAV.ABOUT}>
-              <SearchInput className='mt-6  mb-12' />
+              {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
               {showInfoCard && <InfoCard />}
               {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
             </div>

themes/Medium/LayoutSearch.js

@@ -4,21 +4,30 @@ import { useGlobal } from '@/lib/global'
 import TagGroups from './components/TagGroups'
 import CategoryGroup from './components/CategoryGroup'
 import BlogPostListScroll from './components/BlogPostListScroll'
+import { useEffect } from 'react'
 
 export const LayoutSearch = (props) => {
   const { locale } = useGlobal()
+  const { keyword } = props
+  useEffect(() => {
+    setTimeout(() => {
+      const container = document.getElementById('container')
+      if (container && container.innerHTML) {
+        const re = new RegExp(`${keyword}`, 'gim')
+        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+      }
+    },
+    100)
+  })
   return <LayoutBase {...props}>
-
     <div className='py-12'>
-      <div className='pb-4 w-full'>
-      {locale.NAV.SEARCH}
-      </div>
-      <SearchInput/>
-
+      <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
+      <SearchInput currentSearch={keyword} {...props}/>
       <TagGroups {...props}/>
       <CategoryGroup {...props}/>
     </div>
-
-    <BlogPostListScroll {...props}/>
+    <div id='container'>
+      <BlogPostListScroll {...props}/>
+    </div>
   </LayoutBase>
 }

themes/Medium/components/SearchInput.js

@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
 
 const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
-  const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
+  // const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -14,12 +15,15 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
     }
   })
 
-  const handleSearch = (key) => {
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+
     if (key && key !== '') {
       setLoadingState(true)
-      router.push({ pathname: '/search', query: { s: key } }).then(r => {
-        setLoadingState(false)
-      })
+      // router.push({ pathname: '/search/' + key }).then(r => {
+      //   setLoadingState(false)
+      // })
+      location.href = '/search/' + key
     } else {
       router.push({ pathname: '/' }).then(r => {
       })
@@ -34,13 +38,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
   }
   const cleanSearch = () => {
     searchInputRef.current.value = ''
-    setSearchKey('')
   }
 
-  let lock = false
+  const [showClean, setShowClean] = useState(false)
   const updateSearchKey = (val) => {
-    if (!lock) {
-      setSearchKey(val)
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
     }
   }
   function lockSearchInput () {
@@ -61,15 +71,15 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
       onCompositionUpdate={lockSearchInput}
       onCompositionEnd={unLockSearchInput}
       onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={searchKey}
+      defaultValue={currentSearch}
     />
 
     <div className='-ml-8 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'
-      onClick={() => { handleSearch(searchKey) }}>
+      onClick={handleSearch}>
         <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
     </div>
 
-    {(searchKey && searchKey.length &&
+    {(showClean &&
       <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
         <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
       </div>
@@ -77,12 +87,4 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
   </div>
 }
 
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}
-
 export default SearchInput