Merge pull request #562 from tangly1024/develop

medium主题样式\搜索页

themes/medium/LayoutSearch.js

@@ -9,15 +9,19 @@ import BLOG from '@/blog.config'
 import Mark from 'mark.js'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
+import { useRouter } from 'next/router'
 
 export const LayoutSearch = (props) => {
   const { locale } = useGlobal()
   const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+
   useEffect(() => {
     setTimeout(() => {
       const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
-        const re = new RegExp(keyword, 'gim')
+        const re = new RegExp(currentSearch, 'gim')
         const instance = new Mark(container)
         instance.markRegExp(re, {
           element: 'span',
@@ -28,14 +32,20 @@ export const LayoutSearch = (props) => {
     100)
   })
   return <LayoutBase {...props}>
+
     <div className='py-12'>
       <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
-      <SearchInput currentSearch={keyword} {...props} />
-      <TagGroups {...props} />
+      <SearchInput currentSearch={currentSearch} {...props} />
+
+    {!currentSearch && <>
+        <TagGroups {...props} />
       <CategoryGroup {...props} />
+    </>}
+
     </div>
-    <div>
+
+    {currentSearch && <div>
         {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-    </div>
+    </div>}
   </LayoutBase>
 }

themes/medium/LayoutSlug.js

@@ -12,9 +12,7 @@ export const LayoutSlug = props => {
   const { locale } = useGlobal()
 
   if (!post) {
-    return <LayoutBase
-      {...props}
-      showInfoCard={true}
+    return <LayoutBase {...props} showInfoCard={true}
     />
   }
 
@@ -30,15 +28,8 @@ export const LayoutSlug = props => {
   )
 
   return (
-    <LayoutBase
-      {...props}
-      showInfoCard={true}
-      slotRight={slotRight}
-    >
-
-      {!lock && <ArticleDetail {...props} />}
-
-      {lock && <ArticleLock password={post.password} validPassword={validPassword} />}
+    <LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
+      {!lock ? <ArticleDetail {...props} /> : <ArticleLock password={post.password} validPassword={validPassword} />}
     </LayoutBase>
   )
 }

themes/medium/components/ArticleDetail.js

@@ -21,25 +21,24 @@ export const ArticleDetail = props => {
   return <div id='container'>
 
         {/* title */}
-        <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
+        <h1 className="text-3xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
 
         {/* meta */}
-        <section className="py-2 items-center font-sans px-1">
-            <div className='flex text-gray-500 py-1 dark:text-gray-600'>
-                <span> <i className='far fa-calendar mr-2' />{date}</span>
-                <span className='mx-2'>|</span>
-                <span> <i className='far fa-calendar-check mr-2'/>{post.lastEditedTime}</span>
-                <div className="hidden busuanzi_container_page_pv font-light mr-2">
-                    <i className="ml-3 mr-1 fas fa-eye" />
-                    <span className="busuanzi_value_page_pv" />
+        <section className="py-2 items-center text-sm font-sans px-1">
+            <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
+                <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
+                <span className='mx-1'>|</span>
+                <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2'/>{post.lastEditedTime}</span>
+                <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
+                    <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
                 </div>
             </div>
             <Link href="/about" passHref>
                 <div className='flex pt-2'>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={25} />
+                    <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} />
 
-                    <div className="mr-3 ml-2 text-md text-green-500 cursor-pointer">
+                    <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
                         {BLOG.AUTHOR}
                     </div>
                 </div>