example 微调

themes/example/LayoutArchive.js

@@ -24,7 +24,7 @@ export const LayoutArchive = props => {
   })
   return (
     <LayoutBase {...props}>
-      <div className="mb-10 pb-20 md:p-12 p-3  min-h-screen w-full">
+      <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
         {Object.keys(archivePosts).map(archiveTitle => (
           <div key={archiveTitle}>
             <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >

themes/example/LayoutBase.js

@@ -28,9 +28,9 @@ const LayoutBase = props => {
 
                 <Title {...props} />
 
-                <div className="container max-w-3xl mx-auto justify-center md:flex items-start py-8 px-2 md:px-4">
+                <div className="container mx-auto justify-center md:flex items-start py-8 px-2">
 
-                    <div className='w-full'>{children}</div>
+                    <div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div>
 
                     <SideBar {...props} />
 

themes/example/LayoutCategoryIndex.js

@@ -1,15 +1,11 @@
-import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import LayoutBase from './LayoutBase'
 
 export const LayoutCategoryIndex = (props) => {
   const { categories } = props
-  const { locale } = useGlobal()
+
   return <LayoutBase {...props}>
-    <div className=' p-10 w-full'>
-      <div className='dark:text-gray-200 mb-5'>
-        <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
-      </div>
+    <div >
       <div id='category-list' className='duration-200 flex flex-wrap'>
         {categories && categories.map(category => {
           return <Link key={category.name} href={`/category/${category.name}`} passHref>

themes/example/LayoutSearch.js

@@ -1,12 +1,15 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import SearchInput from './components/SearchInput'
 import LayoutBase from './LayoutBase'
 
 export const LayoutSearch = props => {
   const { keyword, posts } = props
+  const router = useRouter()
+
   useEffect(() => {
     setTimeout(() => {
       const container = typeof document !== 'undefined' && document.getElementById('container')
@@ -15,7 +18,7 @@ export const LayoutSearch = props => {
         container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
       }
     }, 100)
-  })
+  }, [router.events])
 
   const { locale } = useGlobal()
 
@@ -51,7 +54,7 @@ export const LayoutSearch = props => {
   }, [])
 
   return <LayoutBase {...props}>
-        <div className='py-2'>
+        <div className='pb-12'>
             <SearchInput {...props} />
         </div>
 

themes/example/LayoutTagIndex.js

@@ -4,7 +4,7 @@ import LayoutBase from './LayoutBase'
 export const LayoutTagIndex = (props) => {
   const { tags } = props
   return <LayoutBase {...props}>
-        <div className='p-10'>
+        <div>
             <div id='tags-list' className='duration-200 flex flex-wrap'>
                 {tags.map(tag => {
                   return <div key={tag.name} className='p-2'>

themes/example/components/ArticleInfo.js

@@ -34,14 +34,13 @@ export const ArticleInfo = (props) => {
                     {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
                 </span>
                 <span className='mr-2'>|</span>
-
-            </>)}
-
-            <span className="hidden busuanzi_container_page_pv font-light mr-2">
+                <span className="hidden busuanzi_container_page_pv font-light mr-2">
                 <i className='mr-1 fas fa-eye' />
                 &nbsp;
                 <span className="mr-2 busuanzi_value_page_pv" />
             </span>
+            </>)}
+
         </div>
 
     </section>

themes/example/components/BlogList.js

@@ -39,6 +39,14 @@ export const BlogList = (props) => {
                 <p className="text-gray-700 leading-normal">
                     {p.summary}
                 </p>
+                      {/* 搜索结果 */}
+                {p.results && (
+                    <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                    {p.results.map(r => (
+                        <span key={r}>{r}</span>
+                    ))}
+                    </p>
+                )}
             </article>
         ))}